Create A React App With Webpack And Babel

There is a great official way introduced by Facebook to start a React project using create-react-app. This command will create a basic React app without any build configuration which is recommended for anyone who is getting started with React. You shouldn’t bother about Webpack and Babel as a beginner.

You could start your project by copying boilerplate code from a Github repository or simply running the create-react-app command. Though create-react-app is a great tool, but I would like to suggest you to create your own boilerplate code. This will help you better understand the React ecosystem with Webpack and Babel and how they work together.

Let’s jump right in.

What Is Webpack?

Webpack official doc says:

Webpack is used to compile JavaScript modules. Once installed, you can interface with webpack either from its CLI or API. If you’re still new to webpack, please read through the core concepts and this comparison to learn why you might use it over the other tools that are out in the community.

What Is Babel?

Babel official doc says:

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you:

Transform syntax
Polyfill features that are missing in your target environment (through @babel/polyfill)
Source code transformations (codemods)
And more!

Prerequisite

These are the npm modules we are going to import in our project.

React

react
react-dom

Babel

babel/core
babel/preset-env
babel/preset-react
babel-loader

Webpack

css-loader
webpack
webpack-cli
style-loader
webpack-dev-server

Let’s get started.

1) Set up a project folder and move into it. This will be our final project structure

Create a react app with web pack and babel

React app structure

1

mkdir react_babel_webpack && cd react_babel_webpack

2) Creating a package.json file into the project root folder

1

npm init

Answer these questions and press yes to proceed.

reactjs package.json file

package.json

3) Create src folder and these files in your project root folder

1

react_babel_webpack>mkdir src

1

react_babel_webpack>type nul > src/index.html

1

react_babel_webpack>type nul > src/index.js

Note: index.js and index.html should be in the src folder.

4) Install React and React-Dom modules

1

npm i react react-dom --save-dev

5) Install Babel modules

In this step, we are going to install these Babel’s modules.

babel-core
babel-loader
babel/preset-env
babel/preset-react

1

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

6) Install Webpack’s modules

In this step, we are going to install following Webpack’s modules.

webpack
webpack-cli
webpack-dev-server

1

npm i webpack webpack-cli --save-dev

Install webpack-dev-server module as well.

1

npm i webpack-dev-server --save-dev

7) Add start and build settings in scripts node of package.json.

package.json

8) Install style-loader and css-loader webpack helper modules to use CSS in our application

1

npm i css-loader style-loader --save-dev

9) Install html-webpack-plugin and html-loader

These are HTML webpack html plugins for displaying our HTML pages.

1

npm i html-webpack-plugin html-loader --save-dev

10) Create webpack.config.js file at root project folder

Once all modules are installed, we have to create a webpack.config.js file to keep settings here. Let’s see how to create this file.

1

react_babel_webpack>type nul > webpack.config.js

Once this config file is created, copy the below code in this config file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


const HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.html$/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: "./src/index.html",
      filename: "./index.html",
    }),
  ],
};

11) Create .babelrc file in root project folder

1

react_babel_webpack>type nul > .babelrc

Add these lines of code in .babelrc file as well.

1
2
3


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

12) Open index.js file and add these lines of codes.

1
2
3
4
5
6
7
8


import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <div>Creating your React app with Webpack and Babel - ZeptoBook</div>;
};

ReactDOM.render(<App />, document.querySelector("#root"));

13) Open index.html file and add these lines of codes

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


<!DOCTYPE html>
<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>React Babel Webpack</title>
        <meta name="description" content="">

        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <section id="root"></section>
    </body>
</html>

14) Run your project

Everything is setup now. It’s time to run your app. Run this command in your terminal.

1

npm start

If everything is setup properly, you will see browser window with a message.

15) Build the app

By running below command, it will build React app.

1

npm run build

It will create a dist folder in the project root folder having index.html and main.js file.

Conclusion

In this blog, we learned about how to create your React app with the help of Webpack and Babel. When you set up your own react project in this way it is pretty easy to customize and optimize it and upgrade dependency.

Download Code