Bootcamp
Search…
7.3: Using React with Express and Webpack
Introduction
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.jsx
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
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.Last modified 2mo ago
Copy link