ReactJS Babel Introduction

ReactJS Babel is a very famous transpiler that basically allows us to use future JavaScript in today’s browsers. In simple words, it can convert the latest version of JavaScript code into the one that the browser understands. Transpiler is a tool that is used to convert source code into another source code that is of the same level. The latest standard version that JavaScript follows is ES2020 which is not fully supported by all browsers hence we make use of a tool such as ‘babel’ so that we can convert it into the code that today’s browser understands.

Using Babel with React

We use Babel with React to transpile the JSX code into simple React functions that can be understood by browsers. Using this way we can assure that our JSX code can work in almost any browser. This combination is widely used in modern-day web development.

In order to manually setup babel in React with webpack follow the below steps.

Step 1: Create the folder where you want the application and navigate to it using the command:

mkdir my-app
cd my-app

Step 2: After navigating to the directory type the following command

npm init -y

Make sure this is displayed in the terminal

Wrote to /home/reactapp/my-app/package.json:
{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Step 3: Install the necessary react packages using the following command

npm i react react-dom

Step 4: Install webpack and babel using the command

npm i webpack webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin webpack-dev-server –save-dev

After following the above steps the dependencies in package.json will look like:

"dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^9.1.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^5.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }

Step 5: Create the files named index.html, App.js, index.js, webpack.config.js, .babelrc

Step 6: Write the following code in webpack.config.js file 

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './index.js', // Entry point of your application
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js', // Output bundle file name
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader', // Use Babel for .js and .jsx files
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html', // Use this HTML file as a template
    }),
  ],
};

Step 7: Inside the scripts section of package.json file add the following code

"scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
}

Step 8: Add the following code in index.html, index.js, and App.js

// index.js
 
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // Import your main React component
 
ReactDOM.render(<App />, document.getElementById('root'));

Step 9: Inside the .babelrc file add the following code

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

After following all the above steps the project structure should look like

The package.json should look like:

{
  "name": "my-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1"
  },
  "devDependencies": {
    "@babel/core": "^7.22.9",
    "@babel/preset-env": "^7.22.9",
    "@babel/preset-react": "^7.22.5",
    "babel-loader": "^9.1.3",
    "html-webpack-plugin": "^5.5.3",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^4.15.1"
  }
}

Step 9:  To run the application type the following command in a web browser

npm start

Output:

The output in the browser will look like

VISHNU PRIYA