Setup React Using webpack4, Babel 7 and ES lint — Airbnb styling
Tags: node, react, babel7, eslint
Published: 2019-09-30 11:26:54

---
title: Setup React Using webpack4, Babel 7 and ES lint — Airbnb styling
published: true
description: A guide to set up react with webpack, babel and linting
tags: Nodejs, ReactJs, Babel 7, Es lint
cover_image: https://thepracticaldev.s3.amazonaws.com/i/rpuobyizl573q2dla3vm.jpg
---

In this article, I will walk you through how to set up react using "Webpack4" and "babel 7". Also, we'll be linting our project with Es lint using Airbnb as our style guide. Before we kick off, let me mention that using the "create-react-app" simplify all of these and prevents lots of hassle. However, a setup with Webpack from scratch helps understand codes better, personally, I enjoy coding so long as understand it. I know getting a code to work is much excitement, however, understanding every single line of code in your code base is premium. With that said, let's get cracking.

Our prerequisites include;
- A machine with node installed, you can see install the latest node version at [NodeJs.org](https://nodejs.org/en/)
- Basic JavaScript and NODE/NPM knowledge

## Setup Babel

Babel is a npm library used to compile our code from ECMAScript 6 (ES6) to some native version of JavaScript. ES6 comes with modern ways of writing JavaScript codes, which bring lots of benefits and generally makes writing JavaScript more painless. Running JavaScript in the console/browser with the latest ECMAScript might lead to compatibility issues, so we compile using Babel, see more at [Babel docs](https://babeljs.io/docs/en/usage)

To set up babel we need to install;

- @babel/cli - is a babel tool that allows us to use babel from the command line
- @babel/core - is a babel tool which contains the core babel modules
- @babel/preset-env - is a babel plugin to set up transformation environment
- @babel/preset-es2015 - is a babel plugin to set up transformation environment to ES2015
- @babel/preset-react - is a babel plugin to set up transformation environment for react
- babel-loader - is a babel plugin to compile using webpack

To install them;
Create a folder you can give it any name you like, and run this in the terminal

```
mkdir react-webpack && cd react-webpack
npm init --y
npm i @babel/cli @babel/core @babel/preset-env @babel/preset-es2015 @babel/preset-react babel-loader -D
```
- i is a shortcut for install and D flag would save the modules as devdependencies


## Configure Babel

Let's configure babel so it can compile our code. In the root folder create a file named ".babelrc"

```
touch .babelrc
```

In ".babelrc" add the following code;
```
{
"presets": ["@babel/preset-env", "@babel/react"]
}
```

Like we mentioned earlier "preset" allow us to set the environment for transforming our code, they are set of rules by which babel compiles our code. That will be all for babel.

## Setup Webpack
Webpack is used to compile JavaScript modules, it's a popular React app bundler but have other uses. 
To set up Webpack, we need;
- webpack, webpack-cli, and webpack-dev-server - Webpack bundles our JavaScript file, webpack-cli includes the command-line utilities and webpack-dev-server provides hot reloading during development.
- HTML-webpack-plugin - It simplifies the creation of HTML files to serve your webpack bundles

Run:
```
npm i webpack webpack-cli webpack-dev-server
npm i html-webpack-plugin -D
```

## Add Style-loaders for CSS
To compile our CSS files we'll need style-loader and CSS loader
```
npm i style-loader css-loader -D
```

## Configure Webpack
In the project root folder, create a file called "webpack.config.js" and add the following code;

{% gist https://gist.github.com/debelistic/c946addb52cb7038bc34e8769ac950ea %}

Let's create our entry file and it's folder:
```
mkdir dist && cd dist
touch app_bin.js
```
Create the template HTML file in the root folder:
```
touch index.html
```
Add the following code to the HTML file:
{% gist https://gist.github.com/debelistic/8fb409ae443a33a125827d54806cd7a7 %}

We require path and HtmlWebpackplugin at the beginning. Path is a built-in Nodejs module, essentially used to resolve modules path and Htmlwebpackplugin is the module we installed earlier.

We are exporting an object which describes our configuration;

**entry** - which specifies the entry point for our application
**output** - an object which includes the path to our bundle folder and a **filename** which specifies our output file where our project is bundled and mapped to its dependencies
**devServer** - which specifies our server port number and inline property which means that a script will be inserted in your bundle to take care of live reloading.
**module** - includes rules - an array of instructions on how webpack will bundle our application. It includes test - which indicates the regex matching the acceptable file extensions
**exclude** - specifies folders which webpack should ignore, loader - specifies the module to load our app
**query** - specifies the preset for our app

The second object applies to our styling

**plugins** - here we initiate the HTML plugin and set our template to our index.html file at root folder.

Add scripts to in package.json
```
"start": "webpack-dev-server — mode development — open — hot",
"build": "webpack — mode production",
```
The start script is used to start our app, here we are using the development server mode to run our server.

Create “src” folder and add index.js file to the folder
```
mkdir src && cd src
touch index.js
```
In index.js add the following code

{% gist https://gist.github.com/debelistic/bed07a085ed49f68d0c8da31516191fc %}


We import react and react-dom and our app from ./compenents/App and render it on line 5.
Lets create our components folder and our App.js file
```
mkdir components && cd components
touch App.js
```
In components/App.js add:

{% gist https://gist.github.com/debelistic/28cf2ba9951e7e491344dd4a53a66e18 %}

We import react and add a functional react component.
Run npm start on the command line in the project root, it should output some messages which you can read while it compiles. The app should launch in the browser at the port number specified in "webpack.config.js"

## Setup Eslint with Airbnb style guide

Linting helps us to ensure we adhere by certain standards while writing codes
To setup linter with eslint and airbnb
Run npx install-peerdeps - dev eslint-config-airbnb
Then configure eslint

In project, root create .eslintrc file
```
touch .eslintrc
```

Add the following code:
{% gist https://gist.github.com/debelistic/ef9c9669610fe376132b2db1c6ac79f3 %}

In the code above we added the following properties
**extends**- our style guide which is Airbnb
**env** - specifies our environments
**rules** - we added extension name so it doesn't display an error when we include jsx in our js files


We have come to the end of this guide, I hope you like it. If you would like to learn react, check out the following resources:
Learn React on [Scrimba](https://scrimba.com/g/glearnreact) with Bob Ziroll
Check out NetNinja YouTube channel, he has an awesome tutorial on React and Redux
To learn more or if you run into errors check out their official documentation at:
Webpack — https://webpack.js.org/concepts/
Babel — https://babeljs.io/docs/en/
Eslint — https://eslint.org/docs/user-guide/getting-started
Airbnb — https://github.com/airbnb/javascript
If you like it, give the post a like or comment below for issues. You can follow me on Twitter as well [@devDebelistic](https://twitter.com/devDebelistic)