Cordova and Beyond – 3) Implementing React components, with hot reload in the bargain

Webpack is on board

In the previous post I showed in detail how to configure Webpack and Yarn/Gulp in order to have:

  • Babel compilation of ES6 code modules
  • Bundling ES5 code with source maps
  • distinction between development and production environments
  • management of all needed Cordova tasks for each platform (android and browser)
  • watch of modified files and automatic rebuild of the Cordova browser platform (but not hot reload)

Now it is time to get rid of jQuery and every templating. React is going to substitute all that. The final code is to be found in the enter-react branch

Substituting the various views

We start from the leaves of the rendering tree and we move up until the top files:

Adding hot reload

Since everything is now a React component, we can add react-hot-loader. the operation is pretty straightforward and the thing plugs fairly easily into Babel and Webpack.

However, because we still do not have a single <App/> component to start from, we have to decorate with hot two components.

What do we do with routing?

At this stage the app is still a web page that destroys and rebuilds the DOM according to program instructions. We need now to implement a couple of abstractions: history and routes.

I don’t like React Router. It is too big and cumbersome. I prefer to use universal-router. It allows to implement CSS transitions between the pages in a fairly simple manner.



2 thoughts on “Cordova and Beyond – 3) Implementing React components, with hot reload in the bargain

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s