Improving Your Development Workflow with Webpack, React Hot Loader and Onsen UI

[patrick]

One of the great things about React is that there are a lot of tools and libraries available. One of the most popular is the React Hot Reloader by Dan Abramov, who also created Redux. The React Hot Reloader enables developers to make code changes and apply these changes without the application losing its state. In this tutorial we will build a small application step by step to demonstrate the power of Webpack and React and also show how OnsenUI users can benefit from it.

Click here to see the original article

[pravin-d]

Very good tutorial. However the code snippets are a little bit confusing. The first example with Page components it would be helpful to mention that some imports are left out for brevity. In the last example push PageTwo it would be helpful to show the changes in PageOne too. Also in the currently react expects a key prop to be generated in the renderPage(). Hope this is not too much of a nit picking.

[co2-git]

Would be good if you put the files tree and file names for each file. Except that, colors is not recognized anymore by webpack v2 in devServerschema and we now have to use babel-loader instead of babel. Other than that, still one of the best tutorials out there for using webpack-dev-server with Hot Module Replacement.