ReactJS Babel Introduction
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 -yStep 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
<!--index.html-->
<html>
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
// App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Hello Geeks</h1>
</div>
);
}
}
export default App;
//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 startOutput
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.
