Learning React Chapter 15 - Making changes

After completing Chapter 15, I made some changes to the index.jsx and refreshed the page. Those changes were not shown.

So I went back to the Terminal and retyped: node_modules.bin\webpack.cmd, let it build and then refreshed to see the changes.

That seems cumbersome process to do for every change or am I missing something? Why is this better than using the include files? Thank you.

Chapter 15 doesn’t mention too much about hot-reloading where your changes will automatically update whenever you make a file change. I will update this tutorial shortly to address that limitation, but in the meantime, Facebook released a simpler build setup since the book came out: https://github.com/facebookincubator/create-react-app That may be perfect for everybody.

For a more manual approach, this may help: https://robots.thoughtbot.com/setting-up-webpack-for-react-and-hot-module-replacement

Regarding your bigger question on why use this approach as opposed to the include files…the reason is performance and file size. With the more complex build approach, your browser gets a fully compiled version of your app in pure JavaScript. In the include approach, your browser gets the original JSX and then spends additional time turning that into JavaScript after your page loads. That is fine for learning how to use React, but once you decide to ship your app for the broader public, you want to avoid that additional transformation step.


1 Like