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
- 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
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;
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:
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
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:
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:
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 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
Top comments (0)