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