Bundler in React.js

Today I was trying to read and watch some videos about the bundler specifically about the "parcel" and suddenly I one question pops up in my mind that, "is there any default bundler with React.js?"

So I was looking for the this and I try to read about bundler and how we can use bundler with React.js project. So some overview and initial setup here I am presenting regarding bundler here in this article.

Bundler -

A bundler in react.js is a tool which allows to package code into a single file or bundle. Due to this size of code will reduce and so performance of application will improve. Common bundlers used with React are Webpack and Parcel.

Now we will come to the question that arises in my mind that was, "is there any default bundler with React.js?"

Answer for that is, React itself not come with a default bundler. however, when you set up a React project using tools like Create React APP(CRA), Next.js, or other boilerplate setups, they include a bundler configuration to help you get started quickly.

Create React App(CRA)

When you create a React project using Create React App, it uses Webpack as the default bundler. Create React App abstracts the configuration details, so you don't have to manage the Webpack setup manually. Here's how you typically create a React project with CRA:

1. Install Create React App:

//run command on bash/terminal
npx create-react-app my-react-app        

2. Navigate to the Project Directory:

cd my-app        

3. Start the Development Server:

npm start        

Behind the scene, CRA configures Webpack to bundle your React application. This includes setting up development and production builds, handling static assets, optimizing performance, and more.

Next.js

Next.js is another popular React framework that comes with built-in building using Webpack. It offers feature like server-side rendering, static site generation, and API routes out of the box. Here's the set up for Next.js project:

1. Install Next.js:

npx create-next-app my-next-app        

2. Navigate to the Project Directory:

cd my-next-app         

3. Start the Development Server:

npm run dev        

Next.js abstracts the Webpack configuration but allows for customization if needed through 'next.config.js'.

Vite

Vite is a modern build tool that has been gaining popularity as an alternative to Webpack, specially for React projects. Vite offers faster development experience with instant server start and hot module replacement(HMR). here's how you setup a React project with Vite:

1. Install Vite:

npm create vite@latest my-vite-app --template react        

2. Navigate to the Project Directory:

cd my-vite-app        

3. Install Dependencies:

npm install        

4. Start the Development Server:

npm run dev        

Custom Webpack Setup

If project requires more control over build process, you can set up React project with a custom Webpack configuration. Here's a basic setup process:

1. Initialize a New Project:

mkdir my-custom-react-app
cd my-custom-react-app
npm init -y        

2. Install React and Webpack:

npm install react react-dom

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

3. Configure Babel:

create a '.babelrc' file:

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

4. Configure Webpack:

create a 'webpack.config.js' file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
  },
};        

5. Create Project Structure:

mkdir src public
touch src/index.js public/index.html        

6. Add Basic React Code:

'src/index.js':

import React from 'react';
import ReactDOM from 'react-dom';

const App = () => <div>Hello, React!</div>;

ReactDOM.render(<App />, document.getElementById('root'));        

'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 App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>        

7. Start the Development Server:

Add a script to your 'package.json':

"scripts": {
      "start": "webpack server --mode development"
}        

Run the Development server:

npm start        

React itself doesn't include a bundler, tools like Create React App, Next.js, and Vite simplify the process by providing pre-configured setup using Webpack or Vite. For most use cases, starting with one of these tools is recommended, but for more advanced requirements, you can always set up a custom Webpack configuration.