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 levelThe latest standard version which 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, main.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, main.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-Polyfills: 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
