🎉 Adding server-side rendering (SSR) to Create React App 🎉 #reactjs

🎉 Adding server-side rendering (SSR) to Create React App 🎉  #reactjs

  • Create React apps with server-side rendering (SSR) and no build configuration.
  • All you have to do is to replace dependency in your project ( ) with plus provide one more entry point for the server-side application bundle as demonstrated below: – – You can launch the app in development mode by running: – – Then open http://localhost:3000/ to see your app….
  • When you’re ready to deploy to production, create a minified bundle with .
  • For more information refer to Create React App documentation: – – Join our Telegram chat for support and feature requests – https://t.me/reactapp – – Help shape the future of React App SDK by joining our community today, check out the open issues, submit new feature ideas and bug reports, send…

react-app – Create React apps with server-side rendering and no build configuration
Continue reading “🎉 Adding server-side rendering (SSR) to Create React App 🎉 #reactjs”

Introducing Postlight’s WordPress + React Starter Kit

Introducing postlight’s WordPress + React starter kit  #ReactJS #Wordpress

  • With some research, configuration, and trial and error, you can have both — but we’d like to save you the work.Meet Postlight’s WordPress + React Starter Kit, a free, zero-to-hero toolkit for engineers and product tinkerers who want to try out headless WordPress on their own computer with minimal effort.This starter kit…
  • From there, you’re ready to start importing data from your own WordPress site, and customizing the backend and frontend for your own needs.Postlight has shipped several headless WordPress projects with a React frontend for our clients in the past year or so, and we got tired of repeating the initial…
  • We use it internally to start new WordPress projects, and we made it generic enough for you to do the same.The Business Case: Why Headless WordPress?In our work with various clients, we’ve seen several scenarios, business reasons, and product requirements that make a WordPress backend with a React frontend make…
  • Your site or app needs to talk to several APIs, your WordPress content being just one of them, and it’s way easier to do that with a JavaScript frontend.You’re ready to migrate your site from WordPress to a new decoupled CMS, but want to do so piecemeal — first the frontend, and…
  • Headless WordPress does require you have some WordPress/PHP skills on your engineering team, but you can isolate that work to backend developers, and free up your frontend talent to work oblivious to WordPress’ inner workings, only aware of how to query the WP API.The Technical Details: How To Do Headless…

People who publish on the web love WordPress. Engineers love React. With some research, configuration, and trial and error, you can have both — but we’d like to save you the work. Meet Postlight’s…
Continue reading “Introducing Postlight’s WordPress + React Starter Kit”

Unit testing with Jest: Redux + async actions + fetch

  • Unit testing with Jest: Redux + async actions + fetchUsing Jest v20LAST UPDATE: June 24, 2017.
  • Ok, now, let’s test it step by step based on the WritingTests from the Redux docs.A big change here since I first wrote this article in 2016 is that Jest now does not mock your dependencies automatically like it used to.
  • /api’;import configureMockStore from ‘redux-mock-store’import thunk from ‘redux-thunk’const middlewares = [ thunk ];const mockStore = I am also going to write a helper method to mock the fetch response (we don’t need nock as suggested in the Redux Writing Test example):const mockResponse = (status, statusText, response) = { return new window.Response(response,…
  • Do you remember the import at the beginning of our example action code?import ‘whatwg-fetch’If you or your team forget to use the polyfill version of fetch, Chrome or FF will still work and you won’t notice it!
  • Thanks to the Redux docs for the great explanation of how we can test those async actions and for the mocha example (2017 note: They changed the example to use Jest!)

I have been using Jest since its beginnings. I won’t lie, the path has been painful: Things like updating from version 0.x.0 to version 0.y.0 (specially to version 0.4.0) was particularly terrible…
Continue reading “Unit testing with Jest: Redux + async actions + fetch”

GraphQL Authentication with React Native & Apollo [Part 2/2]

GraphQL authentication with React Native & Apollo  #GraphQL #ReactNative #Apollo

  • We’ll use gql to write our graphql query and the graphql higher order component to tap into the Apollo client.We know that our mutation looks something like this (from working with it directly in Launchpad in part 1).
  • Now we need to to be able to pass variables from our user to the mutation.Finally, we want to make this mutation available to the Register component via this.props so that the component agnostic from the Apollo bindings.Now to use it we’ll go to the end of our handleSubmit function…
  • Click “Log Out”, refresh the app, and you’ll see it no longer brings you to profile.Login with Email and PasswordLogging in with email and password is just like sign up, we’re just calling a different mutation.
  • I’ll let the code do the talking.Now to call the login function available on this.props, save the JWT and change screens (on success) or show an error.Showing User InformationThe final thing we’ll do, to demonstrate that things are actually working and it’s not just a big facade, is show the…
  • The server is expecting the JWT to be coming in the authorization header and uses that to find the current user.To pass this token along with the request we’ll use setContext from the apollo-link-context which is another apollo link we’ll use.

This is the second and final part of a series where I cover how to setup authentication with React Native, GraphQL, and MongoDB. Below is part 1 where we setup the server. In this part we’ll be…
Continue reading “GraphQL Authentication with React Native & Apollo [Part 2/2]”

Integrating Swift Classes into React Native – Olivia Oddo – Medium

Integrating #Swift Classes into React Native with this guide:  #ReactJS

  • Add @obj modifiers: The React Native docs state that Swift does not support macros, so we have to add @objc modifiers to ensure the class and functions are exported properly to the Objective-C runtime.Add the @objc modifier to your class like so…Next, add the @obj modifier to any methods you…
  • Bridging header: In the bridging header you created add this line of code Objective-C file: We now need to create an Objective-C file in order to expose our Swift to React Native.
  • Multiple Swift classes: If you have multiple classes you can add several swift files (do not need to add additional bridging headers).
  • You can then add the other classes and methods to your Objective-C file like so…11.
  • Invoke Swift methods: In your React Native class invoke the Swift methods that we exposed.

I was developing a React Native application recently, and something I needed to do could not be implemented in Javascript. I resorted to integrating Swift classes and methods into React Native as…
Continue reading “Integrating Swift Classes into React Native – Olivia Oddo – Medium”

Now that it’s okay to use @reactjs again, I can say: I’ve been working on this @WordPress + React thing for awhile

  • Postlight’s Headless WordPress + React Starter Kit is an automated toolset that will spin up two things: – – The following setup will get WordPress running locally on your machine, along with the WordPress plugins you’ll need to create and serve custom data via the WP REST API.
  • To install and start WordPress, run the following command: – – When that completes successfully, the WordPress REST API will be available at http://localhost:8080.
  • To import data and media from a live WordPress install locally, use Migrate DB Pro.
  • At this point you can start setting up custom fields, and if necessary, creating custom REST API endpoints in the Postlight Headless WordPress Starter theme.
  • Once you have Docker installed on your computer, you can run the container locally using this command:

headless-wp-starter – 🔪 WordPress + React: a starter kit
Continue reading “Now that it’s okay to use @reactjs again, I can say: I’ve been working on this @WordPress + React thing for awhile”

React.js Efficient Server Rendering – Hacker Noon

#ReactJS #Javascript RT @ReactAmsterdam: Make #ReactJS Server Rendering Efficient:

  • React.js Efficient Server RenderingFor about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more simplicity to frontend.But in some cases we need SEO with dynamic JSX content or we need more performance in load time for a frontend pages.
  • And for that cases Facebook developers made React.js in that way so it can be rendered on Server Side too, using Node.js basic functionality.So the flow is almost similar to this oneClient sending request to get some JSX template pageNode.js server getting main file containing JSX codeRendering it to plain HTML codeSending HTML response to clientUsing HTML markup, then client loading also React.js client side code for adding dynamic logic to rendered HTMLThis is helping to display HTML content faster than React will render it, and it is helping to give some content to Search Engine bots or website crawlers.But What If You Don’t Have Node.JS backend?This is the real questing that was standing for me when I’ve started working on large Python Django project.
  • I decided to do React.js as a frontend, but they hat a lot of Python stuff on a backend, I couldn’t rewrite all code just for server side rendering.
  • I think we really don’t need!And I got an idea to build standalone Node.js Server only for React.js JSX template rendering and nothing else, so I can make a proxy request to that server and it will render JSX content for me and will response pure HTML back to Python Django Template.
  • What is that?So using basic principle of proxy requests I just made very simple code for Pythonimport requestsimport jsonPROXY_RENDER_ADDRESS = ‘http://localhost:3000/’def get_html(filename, props): try: props_str = json.dumps(props) r = + filename , data=props_str , headers={‘Content-Type’: ‘application/json’}) if r.status_code == 200: return r.text, props_str except Exception as e: print(e) return False, FalseWhich is basically making POST Request to proxy rendering service and by passing global state as a JSON, getting back the HTML code rendered by Node.js server.So the main advantages that I gotNo need to integrate Node.js in backend side, or use crappy JS engines in Python, which are eating a lot of memoryAbility to keep JSX template cache, which give huge load time improvementsScale backend services without scaling base rendering service, so you can have multiple servers with single cached rendering service and get better performanceHuge flexibility in writing code.

For about a year now I’m developing Web Applications based on React.js, and it was amazing for me to write code that actually scales with JSX components, rather than functions, it’s giving more…
Continue reading “React.js Efficient Server Rendering – Hacker Noon”