How to build a React project from scratch using Webpack 4 and Babel

I have been learning React lately, and I have used create-react-app to create my React projects easily with minimal efforts and configuration, and i guess you too have most probably used create-react-app or react-slingshot to create your react apps.These are fantastic tools if you want to just focus on React and let them take care of the configuration. But is this the way you want to learn React?

Probably not, that’s why you are here. So let’s get started :)

Getting Started:

Before starting, you must have npm installed on your computer, which comes bundled with Node.js, you can install it from here.

Folder Structure:

Folder structure for the React app

You can create the above directories with these commands.

mkdir react-boilerplatecd react-boilerplatemkdir -p src/components src/styles

Initialize the Project:

All projects that uses node package manager(npm) must be initialized. To initialize a project enter below command in a terminal. This will create a package.json file.

npm init

You’ll be asked few questions related to the project, you can skip them by pressing enter, if you want to skip all the questions, add a -y flag.

npm init -y

Now your package.json file will look something like this.

{"name": "react-boilerplate","version": "1.0.0","description": "","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"keywords": [],"author": "","license": "ISC"}

Installing Webpack:

Webpack is a module bundler that lets us bundle our project files into a single file for production. So let’s add webpack to our project.

npm install webpack webpack-cli --save-dev

The above command will add webpack and webpack-cli as a dev dependency to our project.We installed webpack-cli so that we can use webpack in the command line.

Installing React:

Install react and react-dom as a dependency.

npm install react react-dom --save

Installing Babel:

In order for React to work, we need to install Babel alongside with it. We need Babel to transpile ES6 and JSX to ES5.

Install babel-core, babel-loader, babel-preset-env, babel-preset-react as a dev dependency.

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

• babel-core: Transforms ES6 code to ES5
• babel-loader: Webpack helper to transpile code, given the the preset.
• babel-preset-env: Preset which helps babel to convert ES6, ES7 and ES8 code to ES5.
• babel-preset-react: Preset which Transforms JSX to JavaScript.

Index.js :

Create an index.js file inside root of the /src folder, for now add the following line code inside it.This file will be the entry point to our app.

console.log("hello");

Index.html :

Create an index.html file inside root of the /src folder and add following code inside it.

Entry and Output file:

Create a webpack.config.js in the root directory of the project so that we can define rules for our loaders.

Define the entry point and output directory of our app inside the webpack.config.js

In the above code, Webpack will bundle all of our JavaScript files into index-bundle.js file inside the /dist directory.

Webpack Loaders:

Now add some loaders inside this file, which will be responsible for loading and bundling the source files.

Inside the webpack.config.js, add following lines of code:

Here babel-loader is used to load our JSX/JavaScript files and css-loader is used to load and bundle all of the CSS files into one file and style-loader will add all of the styles inside the style tag of the document.

Before Webpack can use css-loader and style-loader we have to install them as a dev-dependency.

npm install css-loader style-loader --save-dev

Keep in mind that webpack executes the loaders from last to first i.e from right to left.

.babelrc:

Now create a .babelrc file inside root of the project directory with the following contents inside of it.

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

This file will tell babel which presets to use for transpiling the code. Here we are using two presets:

• env: This preset is used to transpile the ES6/ES7/ES8 code to ES5.
• react: This preset is used to transpile JSX code to ES5.

Compiling files using Webpack:

Add the following lines of code inside the script object of the package.json file as below:

"start": "webpack --mode development --watch","build": "webpack --mode production"

Here i have used watch flag, so whenever there is a change in source files, webpack will automatically compile all the source files.

There are two modes in webpack 4, the production mode which produces optimized files ready for use in production and development mode which produces easy to read code and gives you best development experience. The --mode flag lets us choose which mode to use.

Now you can compile the project using below command:

npm start

After executing the above command you will see index_bundle.js file created under the /dist directory which will contain transpiled ES5 code from index.js file.

App.js

Create an App.js file inside the components folder of the src folder with the following contents inside of it.

App.css:

Create an App.css file inside the styles folder of the src folder with the following contents inside of it.

This CSS file is used to make sure the css-loader and style-loader are working correctly.

Now modify the index.js file that we created earlier to contain following lines of code.

Installing Html-webpack-plugin:

Now we also need to install html-webpack-plugin, this plugin generates an HTML file, injects the script inside the HTML file and writes this file to dist/index.html.

Install the html-webpack-plugin as a dev-dependency:

npm install html-webpack-plugin --save-dev

Now we need to configure this plugin inside the webpack.config.js file, add the following lines of code inside it.

Here the value of template key is the file index.html that we created earlier and it uses this file as a template and generates new file named index.html inside the /dist folder with the script injected.

The setup is almost complete, all we have to do is to compile the source files using webpack, you can run the project using below command:

npm start

You will get output inside the /dist folder of project, Now open the index.html in a web browser, you will see the text “My React App!” inside of it.

But this approach has a downside that you have to manually refresh the webpage, in order to see the changes you have made. To have webpack watch our changes and refresh webpage whenever any change is made to our components, we can install webpack-dev-server.

Installing Webpack-dev-server:

Install webpack-dev-server as a dev-dependency

npm install webpack-dev-server --save-dev

And change the package.json start script like below:

"start": "webpack-dev-server --mode development --open --hot"

I have added two flags --open and --hot which opens and refreshes the web page whenever any change is made to components.

Now run the below command in the terminal:

npm start

You should see the browser window open and display the content just like the below screenshot.

Output in a browser window

That’s it, Now we have our own React boilerplate that we can use to create our React projects. You can also download this react setup from my Github.

If you found this article helpful, please hit the 👏 button. If you have any doubts, you can comment below, I’d be happy to help :)