Adding React to Webpack 4

In this recipe, we are going to implement React with Webpack 4, but we will use a plugin called html-webpack-plugin to generate our index.html file to render our React application. In the next recipe, we will integrate Node.js to have more flexibility in our server-side before rendering the HTML code.

Getting Ready

For this recipe, you will need to install the following packages:

npm install react react-dom babel-preset-react

How to do it...

Here are the steps to add React to Webpack 4:

1. Using the same code of the last recipe, create a .babelrc file and add some presets:

  {
    "presets": [
      "env",
      "react"
    ]
  }

File: .babelrc

 

2. In our webpack.config.js file, where we have our babel-loader, we need to add the .jsx extension beside the .js extension to be able to apply babel-loader to our React components:

const webpackConfig = {
module: {
rules: [
        {
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader'
        }
      ]
    }
  };

 module...