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.