Setting up for React development

Before we can start developing with React in our existing skeleton code base, we first need to add configuration to compile and bundle the frontend code, add the React-related dependencies necessary to build the interactive interface, and tie it all together in the MERN development flow.

Configuring Babel and Webpack

To compile and bundle the client code to run it during development and also bundle it for production, we will update the configuration for Babel and Webpack.

Babel

For compiling React, first install the Babel React preset module as a development dependency:

npm install babel-preset-react --save-dev

Then, update .babelrc to include the module and also configure the react-hot-loader Babel plugin as required for the react-hot-loader module.

mern-skeleton/.babelrc:

{
    "presets": [
      "env",
      "stage-2",
"react"
    ],
"plugins": [
      "react-hot-loader/babel"
    ]
}

Webpack

To bundle client-side code after compiling it with Babel, and also to...