ReactJS Babel Introduction (original) (raw)

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 `

JavaScript

// index.js

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

ReactDOM.render(, document.getElementById('root'));

JavaScript

// App.js

import React, { Component } from 'react'; class App extends Component { render() { return (

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.

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.