How to use Babel with React In 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

How to use Babel with React In React

Javascript

Javascript

HTML

ReactJS Babel Introduction

Categories

Contact US

How to use Babel with React In React

Javascript

Javascript

HTML

ReactJS Babel Introduction

Similar Reads

Categories

Contact US