Create A React App With Webpack And Babel

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

mkdir react_babel_webpack && cd react_babel_webpack

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

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

react_babel_webpack>mkdir src
react_babel_webpack>type nul > src/index.html
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

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

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

npm i webpack webpack-cli –save-dev

Install webpack-dev-server module as well.

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

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.

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.

react_babel_webpack>type nul > webpack.config.js

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

11) Create .babelrc file in root project folder

react_babel_webpack>type nul > .babelrc

Add these lines of code in this file as well.

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

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

14) Run your project

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

npm start

run the reactjs app

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.

npm run build

build react app

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.

Further Reading

Create Your First React App In Easy Steps

Create Your Blog Site With Gatsby.js Static Site Generator

What Is JavaScript Callback And How Does It Work?

Adesh

Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Close Menu
%d bloggers like this: