ReactJS Virtual DOM

ReactJS Babel Introduction

Last Updated : 12 Apr, 2025

Babel is a JavaScript compiler that converts modern JavaScript code (like ES6+ and JSX) into a backwards-compatible version that older browsers can understand. In the context of React, Babel allows to use modern syntax like JSX and ES6+ features.

Transpile ES6+ code: Convert modern JavaScript (ES6 and newer) into compatible JavaScript that runs on older browsers.
Transpile JSX: JSX (JavaScript XML) is a syntax extension for JavaScript, widely used in React. Babel converts JSX into standard JavaScript that browsers can understand.
Enable use of future JavaScript features: Babel allows the use of experimental features or future versions of JavaScript before they are supported by browsers.

How Babel Works with ReactJS?

Babel works through a series of transformations that take your modern JavaScript (including JSX) and convert it into backwards-compatible JavaScript. This process typically involves three main stages:

Parsing: Babel parses the JavaScript code into an Abstract Syntax Tree (AST), which is a structured representation of the code.
Transformation: Babel applies various plugins to the AST to convert the code into a desired format. For example, it converts JSX into React.createElement() calls or converts ES6 arrow functions into regular functions.
Code Generation: Finally, Babel generates JavaScript code from the transformed AST. This is the final JavaScript output that browsers can execute.

Why Babel is a Transpiler, Not a Compiler?

Babel is often referred to as a transpiler rather than a compiler because its primary function is to translate one version of JavaScript into another version of JavaScript.

Transpiling usually refers to the process of translating source code from one version of a language to another version of the same language (e.g., from ES6 to ES5, or JSX to JavaScript).
Compiling, on the other hand, refers to the broader process of converting high-level code into machine code or bytecode, which can then be executed directly by a computer or runtime environment (e.g., compiling C or C++ code to machine code).

Steps to Use Babel with React(Without CRA)

Step 1: Create a directory for the project.

mkdir my-app
cd my-app

Step 2: Initialize the application using the following command.

npm init -y

Step 3: Install the required React dependencies

npm i react react-dom

Step 4: Install webpack and babel using the command

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

Step 5: 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 6: Create the files named index.html, App.js, index.js, webpack.config.js, .babelrc

Folder Structure

Dependencies

{
    "scripts": {
        "start": "webpack-dev-server --mode development --open",
        "build": "webpack --mode production"
    }
    "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 7: Add the following code in index.html, index.js, and App.js

HTML

<!--index.html-->

<html>

<head>
</head>

<body>
    <div id="root"></div>
</body>

</html>

JavaScript

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

JavaScript

// App.js

import React, { Component } from 'react';
class App extends Component {
    render() {
        return (
            <div>
                <h1>Hello Geeks</h1>
            </div>
        );
    }
}
export default App;

JavaScript

//webpack.config.js

const path = require('path');
const webpack = require('html-webpack-plugin');
module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                },
            },
        ],
    },
    plugins: [
        new webpack({
            template: './index.html',
        }),
    ],
};

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

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

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

npm start

Output

When Do You Explicitly Install Babel?

You only need to manually install Babel when not using Create React App (CRA). Some common cases include:

Creating a custom Webpack configuration from scratch
Using lightweight build tools like Vite, Parcel, or Rollup
Building a fully customized dev environment for advanced setups

Note => CRA includes Babel under the hood, so no manual Babel setup is needed unless you eject or start from scratch

Popular Babel Presets and Plugins for ReactJS

Babel has various presets and plugins that can be used to customize the transpilation process for ReactJS development.

Tool/Plugin	Purpose
@babel/preset-env	Auto-transpiles based on target environments
@babel/preset-react	Converts JSX to JavaScript
@babel/plugin-transform-runtime	Reduces duplicated helper code, smaller bundles
@babel/plugin-proposal-class-properties	Allows using class fields syntax

Why is Babel Essential for ReactJS?

JSX Transformation: React’s declarative JSX syntax relies on Babel to convert it into JavaScript code.
Future-Proofing: Developers can adopt the latest JavaScript features without waiting for universal browser support.
Ecosystem Integration: Babel seamlessly integrates with tools like Webpack, ESLint, and testing frameworks.

ReactJS Virtual DOM

immukul

Improve

Article Tags :

Similar Reads

React is a JavaScript Library known for front-end development (or user interface). It is popular due to its component-based architecture, Single Page Applications (SPAs), and Virtual DOM for building web applications that are fast, efficient, and scalable. Applications are built using reusable compo

React Introduction

ReactJS is a component-based JavaScript library used to build dynamic and interactive user interfaces. It simplifies the creation of single-page applications (SPAs) with a focus on performance and maintainability. It is developed and maintained by Facebook.The latest version of React is React 19.Use

React Environment Setup

To run any React application, we need to first setup a ReactJS Development Environment. In this article, we will show you a step-by-step guide to installing and configuring a working React development environment. We will discuss the following approaches to setup environment in React. Table of Conte