Chapter 3. Development Mode and Mastering Hot Reloading
In the previous chapter, you learned how to use create-react-app. This is just the beginning of our React tooling journey. By using create-react-app to bootstrap your application, you're installing many other tools used for development. These tools are part of the react-scripts package. The focus of this chapter will be the development server that comes with react-scripts where we'll cover:
- Starting the development server
- Automatic Webpack configuration
- Putting hot component reloading to use
Starting the development server
If you created a React application using the create-react-app tool in the previous chapter, then you have everything you need to launch a development server. No configuration is necessary! Let's start it up right now. First, make sure that you're in the project directory:
cd my-react-app/
Now you can start the development server:
npm start
This will start the development server using the start script from the react-scripts package. You should see the console output that looks like this:
Compiled successfully!You can now view my-react-app in the browser.Local: http://localhost:3000/On Your Network: http://192.168.86.101:3000/Note that the development build is not optimized.To create a production build, use npm run build.
You'll notice that in addition to printing this output in the console, this script will launch a new browser tab with http://localhost:3000/ as the address. The page that's displayed looks like this:
We've accomplished a lot in just a...
In this chapter, you learned how to start the development server for a project created with create-react-app. You then learned that the react-scripts package has its own Webpack configuration that it uses when it starts the development server for you. We went over the key areas of configuration that you shouldn't necessarily have to think about when you're trying to write an application.
Finally, you saw hot module reloading in action. Out of the box, react-scripts reloads the app for you when you make source changes. This results in a page refresh, which is good enough to get started. We then looked at the potential challenges of developing components using this approach because it wipes out any state that the component had before it was updated. So you ejected from create-react-app and customized the Webpack configuration for your project to support hot component reloading that will preserve the state.
In the following chapter, you'll work with tooling to support unit tests in your...
