7.3: Using React with Express and Webpack


In this module we will set up a full-stack React app with Express. Begin with Rocket's base React Express repo. This repo has a few new React-specific features built-in.

File Structure

The structure of our React app will begin with two files.


index.js contains the root node we create and mentions the document variable. There will be little to no changes to this file while writing the app, except maybe to import another Sass file.


App.jsx contains the React app. This structure is to enable Fast Refresh (described below) but is also to completely separate the code mentioning the document variable from the actual React code for modularity.

Fast Refresh

Fast Refresh is the library that allows React to reload a component and preserve its state at the same time. We have changed the Webpack dev config to add the appropriate libraries.

Remove Watch

We have removed the watch command to run Webpack, and have integrated watch functionality into Express. In index.mjs we detect that we are in the development environment and start the Webpack watcher from within Express. This means we can run both Express and Webpack simultaneously in watch mode with nodemon index.mjs.