How to add React to an existing Webpack project

28 Jan, 2021

To add React into an existing project where we are already using Webpack, we must follow these simple steps:

install and add babel
install and add react and react-dom
hot reload with webpack-dev-server

Add Babel to Webpack

First, we add babel to our project (if we haven’t already) with babel-loader, react-preset, and support to es6 syntax. Browsers do not support JSX extension natively and babel will help Webpack to transpile our React code to vanilla JavaScript. To add the dependencies as development dependencies, we simply run:

npm install --save-dev @babel/core @babel/preset-env babel-loader @babel/preset-react

Next, we set up babel-loader in webpack.config.js file:

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
  },
  // ...add the babel-loader and preset
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  // ...add resolve to .jsx extension
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  // ...
}

Then, add a .babelrc file where we add babel’s preset-react:

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Add React to Webpack

Of course, we need to add react now. To use React, we also want to install the react-dom package. To do so, from our project’s root directory we run:

npm install --save react react-dom

Let’s add now some sample code to our project in order to be able to test it. In src/index.js write:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
    }}
  >
    <h1>
      Hello World from <a href="https://www.polynique.com">Polynique</a>
    </h1>
  </div>
)

ReactDOM.render(<App />, document.getElementById('app'))

In dist/index.html we make sure to have the <div id="app"></div> container in which our React app will be rendered:

<!DOCTYPE html>
<html>

<head>
  <title>Hello React</title>
</head>

<body>
  <!-- add React app container -->
  <div id="app"></div>

  <!-- add webpack bundle.js -->
  <script src="./dist/bundle.js"></script>
</body>
</html>

We are now ready for testing.

React hot reload

Finally, we add react-hot-loader. This module helps you to speed up your development process by applying to your browser every change you make into your code.

To add Hot Module Replacement, add to webpack.config.js:

const path = require('path')
// add webpack import
const webpack = require('webpack') 

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  // ...add HowModuleReplacementPlugin and devServer
  plugins: [new webpack.HotModuleReplacementPlugin()],
  devServer: {
    contentBase: path.resolve(__dirname, './dist'),
    hot: true,
  },
}

In order to be able to run Webpack as dev-server, we add the following script to our package.json:

{
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js --mode development"
  },
}

Lastly, we insert at the end of the file src/index.js:

import React from 'react'
import ReactDOM from 'react-dom'

const App = () => (
  <div
    style={{
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      height: '100vh',
    }}
  >
    <h1>
      Hello World from <a href="https://www.polynique.com">Polynique</a>
    </h1>
  </div>
)

ReactDOM.render(<App />, document.getElementById('app'))

module.hot.accept()

To run the dev-server, you now simply need to run npm start.

If you like our post, please share it:

JavaScript React Webpack