Bundler in React.js

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.

要查看或添加评论,请登录

Shubham Hirap的更多文章

  • React Hook: useCallback()

    React Hook: useCallback()

    useCallback() is a React Hook that lets you cache a function definition between re-renders. const cachedFn =…

  • React Hook: useMemo()

    React Hook: useMemo()

    useMemo() Hook "useMemo" is a React Hook that lets you cache the result of a calculation between re-renders…

  • Reducer Method and Some useful examples

    Reducer Method and Some useful examples

    A Reducer() method works on each array element. The final result of running the reducer across all elements of the…

  • Atomic Design Pattern

    Atomic Design Pattern

    Introduction As a React JS Developer, I work on UI components on daily basis. Component reusability is the main…

    1 条评论
  • BEM Methodology in short

    BEM Methodology in short

    Introduction I am working as a React frontend developer so yesterday I got introduced to a new concept BEM Methodology.…

  • Javascript Arrow function

    Javascript Arrow function

    An arrow function expression is a compact alternative to a traditional function expression, but is limited and can't be…

    2 条评论

社区洞察

其他会员也浏览了