React Hot Loader
Nodemon for the front-end
Getting started
We will implement the webpack sass asset pipeline for the jsx code, with the same reload functionality we get with nodemon.
Use this branch: https://github.com/wdi-sg/react-reference/tree/3-react-hotload
Look at what we added: https://github.com/wdi-sg/react-reference/compare/2-react-jsx-intro..3-react-hotload
- react hot loader
- index.html that gets built by react
- production build script
Building index.jsx
Run the example app: npm run dev node index.js
Visit http://localhost:3000
Open the generated main.js file. Scroll to the bottom. What do you see?
Make a change in your jsx code and see it change in the browser instantly.
Production
Build the production files. npm run build
Run the server. npm run start Visit http://localhost:3000
Open the generated main.js file.
Pairing Exercise
Clone the react repo into a named folder:
$ git clone https://github.com/wdi-sg/react-reference.git hotloading-react
Check out the hot laoding branch:
$ git checkout 3-react-hotload
Repeat the above.