React Cookbook

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.exports = webpackConfig;

File: webpack.config.js

3. After we added the .jsx extension to our babel-loader, we need to create the src/components/App.jsx file:

  // Dependencies  import React from 'react';  // Components  import Home from './Home'; ...