Open In App

ReactJS Babel Introduction

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will discuss Babel and why it is one of the most widely used transpilers in the world.

What is babel?

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

Javascript




// 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'));


Javascript




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


HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>


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

Directory Structure

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

Why do we need Babel? 

The main reason we need Babel is that it gives us the privilege to make use of the latest things JavaScript has to offer without worrying about whether it will work in the browser or not. 

Features of Babel:

  • Babel-Plugins: The Plugins are configuration details for Babel to transpile the code that supports a number of plugins, which could be used individually, provided the environment is known.
  • Babel-Presets: Babel presets have a set of plugins that instruct Babel to transpile in a specific mode. provided the environment is known.
  • Babel-Polyfills: During instances when methods and objects, cannot be transpiled, We can make use of babel-polyfill to facilitate the use of features in any browser.
  • Babel-CLI: The Command-line interface of Babel has a lot of commands where the code can be easily compiled on the command line. It also has features like plugins and presets to be used along with the command making it easy to transpile the code at once.


Last Updated : 06 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads