React

Create React, Webpack And Babel Scratch Set Up

Introduction

 
In this article, we will learn how to create Babel for React scratch setup with Webpack.
 
Steps 
 
We’ll start with a React project.
 
Step 1
 
Now that we have Node and npm installed, we will create a new folder for our project, newreact.
 
Step 2
 
Initialize it as an Npm project
 
npm init -y
 
Create React, Webpack And Babel Scratch Set Up
 
Step 3 - Installing Dependencies using NPM
 
Run the below command in the terminal:
 
npm i webpack webpack-cli --save-dev
 
Create React, Webpack And Babel Scratch Set Up
 
Webpack is a tool that will bundle your code and its dependencies into a single .js file.
 
Let's install the Babel dependencies:
 
npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev
 
Create React, Webpack And Babel Scratch Set Up 
 
What is Babel?
 
Babel is a toolchain mainly used to convert ECMAScript 2015+ code into a backward-compatible version of JavaScript in current and older browsers or environments.
 
Step 4 - Create Project Folder structure
 
Now, we will config the Babel. Let’s create a new file, (.babelrc)
 
Create React, Webpack And Babel Scratch Set Up 
  • babel preset env for compiling modern Javascript down to ES5
  • babel preset react for compiling JSX and other stuff down to Javascript.
installing react and react-dom

npm i react react-dom
 
installing the HTML webpack plugin
 
npm i html-webpack-plugin html-loader --save-dev
 
Create React, Webpack And Babel Scratch Set Up
 
Then update the webpack's configuration file:
  1. const HtmlWebPackPlugin = require("html-webpack-plugin");  
  2. module.exports = {  
  3.     module: {  
  4.         rules: [{  
  5.             test: /\.(js|jsx)$/,  
  6.             exclude: /node_modules/,  
  7.             use: {  
  8.                 loader: "babel-loader"  
  9.             }  
  10.         }, {  
  11.             test: /\.html$/,  
  12.             use: [{  
  13.                 loader: "html-loader"  
  14.             }]  
  15.         }]  
  16.     },  
  17.     plugins: [  
  18.         new HtmlWebPackPlugin({  
  19.             template: "./src/index.html",  
  20.             filename: "./index.html"  
  21.         })  
  22.     ]  
  23. };  
Now, create an HTML file in src/index.html,
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.             <title>Welcome React</title>  
  6.         </head>  
  7.         <body>  
  8.             <div id="id"></div>  
  9.         </body>  
  10.     </html>  
Then, create src/component folder user.js
  1. import React, {  
  2.     Component  
  3. } from "react";  
  4. import ReactDOM from "react-dom";  
  5. class userForm extends Component {  
  6.     constructor() {  
  7.         super();  
  8.         this.state = {  
  9.             value: ""  
  10.         };  
  11.         this.handleChange = this.handleChange.bind(this);  
  12.     }  
  13.     handleChange(event) {  
  14.         const {  
  15.             value  
  16.         } = event.target;  
  17.         this.setState(() => {  
  18.             return {  
  19.                 value  
  20.             };  
  21.         });  
  22.     }  
  23.     render() {  
  24.         return ( < form > < input type = "text"  
  25.             value = {  
  26.                 this.state.value  
  27.             }  
  28.             onChange = {  
  29.                 this.handleChange  
  30.             }  
  31.             /> < /form>);  
  32.     }  
  33. }  
  34. export default userForm;  
  35. const iscontain = document.getElementById("id");  
  36. iscontain ? ReactDOM.render( < userForm / > , iscontain) : false;  
Step 5
 
Please check the below screen:
 
Create React, Webpack And Babel Scratch Set Up
 
Now, we will run the build:
 
npm run build
 
Create React, Webpack And Babel Scratch Set Up
 
Step 5
 
To install and setup the Webpack dev server, install the package with:
 
npm i webpack-dev-server --save-dev
 
Open package.json file and add scripts:
  1. "scripts": {  
  2.     "start": "webpack-dev-server --open --mode development",  
  3.     "build": "webpack --mode production"  
  4. },  
Step 7
 
Finally, run the application.
 
npm start
 

Conclusion

 
In this article, we learned how to install and configure React, Webpack, the Webpack dev server, and Babel.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found