React30-Project23: Setting Up a React Project Using Webpack and Babel

Project image

Introduction

React has become a popular JavaScript library for building user interfaces, and setting up a React project from scratch can be a valuable skill for developers. One crucial tool in the modern JavaScript ecosystem is Webpack, a powerful module bundler that simplifies the management of dependencies and assets in your project. In this tutorial, we’ll guide you through the process of setting up a React project using Webpack from scratch.

Prerequisites

Before we dive into the project setup, ensure you have the following prerequisites installed on your machine:

Node.js and npm: Make sure you have Node.js installed, as it comes with npm (Node Package Manager).

Implementation

Step 1: Project Initialization
Create a new directory for your project and navigate into it using the terminal.

mkdir react-webpack-from-scratch
cd react-webpack-from-scratch

Initialize a new npm project by running the following command and follow the prompts

npm init -y

Step 2: Installing Dependencies
Install the necessary dependencies, including React and ReactDOM:

npm install react react-dom

Now, let’s install Webpack and its associated tools like babel:

npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin --save-dev

Step 3: Creating Webpack Configuration
Create a webpack.config.js file in the project root to configure Webpack:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: {
      path:path.resolve(__dirname, "dist"),
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "public", "index.html"),
      }),
    ],
    module: {
        rules: [
          {
            test: /\.?js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react']
              }
            }
          },
        ]
      },
  devServer: {
    port: 3000,
  },
};

Explanation of Webpack Usage

• Entry and Output: In webpack.config.js, the entry field specifies the entry point of the application (index.js), and the output field configures where the bundled code should be generated.
• Babel Loader: The module.rules section configures Webpack to use Babel for transpiling JavaScript files. This ensures compatibility with older browsers and allows you to use the latest ECMAScript features.
• Webpack Dev Server: The devServer section configures the development server, providing features like live reloading and easy debugging.
• HTML Webpack plugin: The html-webpack-plugin is a popular webpack plugin that simplifies the process of creating HTML files to serve your bundled JavaScript files. It automatically injects the generated script tags into the HTML file, and it's particularly useful for React projects.
  html-webpack-plugin will automatically create an HTML file in your dist directory with the necessary script tags for your bundled JavaScript. This simplifies the setup and ensures that your React application is correctly embedded in the HTML file, with any necessary dependencies automatically included.

Add CSS support:

To enable CSS support in a webpack setup along with Babel, you’ll need to use appropriate loaders for handling CSS files. Below is an updated webpack configuration that includes support for processing CSS files using the style-loader and css-loader:

Install the necessary loaders:

npm install style-loader css-loader --save-dev

Update your webpack.config.js:

...
module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
...

To add image support in your webpack configuration, you can also use the `file-loader` or `url-loader` to handle image files.

Step 4: Babel Configuration
Create a .babelrc file in the project root to configure Babel:

// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

This configuration tells Babel to use the preset for both modern JavaScript and React.

Step 5: Creating React Components

Create a simple React component in src/App.js:

// src/App.js
import React from 'react';

const App = () => {
  return (
    <div>
      <h1>Hello, React with Webpack!</h1>
    </div>
  );
};

export default App;

Step 6: Entry Point
Create the entry point file, src/index.js, where you render the React component:

// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(<App />);

Step 7: HTML Template
Create a simple index.html file in the public directory:

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

Step 8: NPM Scripts
Update the `scripts` section in `package.json` to include the following

"scripts": {
  "start": "webpack serve --mode development --open",
  "build": "webpack --mode production"
}

The defined NPM scripts (start and build) make it convenient to run the development server and create a production-ready build.

Step 9: Run the application

Run the below command in terminal to start the application:

npm start

You should now see the app in your browser.

Source code for reference:
Github

Conclusion

Setting up a React project from scratch using Webpack is an essential skill for web developers. With the right configuration, you can take advantage of modern JavaScript features, React’s declarative syntax, and Webpack’s powerful bundling capabilities. This tutorial serves as a solid foundation for building more complex React applications with a streamlined development workflow. Happy coding!

Check out my Youtube channel for more content:
SaurabhNative-Youtube

Next part in the series we will set up and use react testing library for writing test cases in react.

React30-Part24