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.
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.
For compiling React, first install the Babel React preset module as a development dependency:
npm install babel-preset-react --save-devThen, 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"
]
}