Bundling is an important phase in the web development process, particularly when dealing with JavaScript frameworks like React. It entails combining all the various JavaScript files and dependencies into a single file for faster browser loading and execution.

esbuild is a lightweight and efficient bundler for React apps. Here's an overview of how to use esbuild to bundle a basic React application.

How to Install esbuild Globally

We'll start by installing esbuild globally in your system by running npm install -g esbuild in the command line. This will install the latest version of esbuild globally on your system.

After installation, you can access esbuild from the command line by typing esbuild.

How to Create a New Directory for Your React Application

To create a new directory for your React application, open the terminal and navigate to the directory where you want to create the new directory. Then run the following command:

mkdir my-react-app

This will create a new directory named my-react-app. You can replace it with whatever name you want to give your React application directory.

After creating the directory, navigate into it by running:

cd my-react-app

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

npm init -y

Install React and React DOM by running npm install react react-dom in the terminal. This will install the latest versions of React and React DOM in your project, along with any required dependencies.

How to Create the Necessary Files and Folders

Let's create the necessary files and folders. Here's a basic structure:

my-react-app
├── src
|   |
│   |── index.js
├── |--- index.html
│  
└── package.json


Add the code shown below in your app, following the above structure:

index.html:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Hello, esbuild!</title>
</head>

<body>
  <div id="root"></div>
  <script src="Bundle.js"></script>
</body>

</html

The above code outlines the fundamental structure of an HTML5 web page. It starts with a declaration indicating the use of HTML5. The main structure consists of an <html> root element containing a <head> section for metadata, including character encoding and viewport settings for responsiveness.

The <title> element defines the browser tab's title, while the actual content resides in the <body> element. Within the <body>, a <div> element with the id "root" serves as a placeholder for potential dynamic content.

Additionally, there's a <script> tag pointing to an external JavaScript file named "Bundle.js," generated by esbuild, to be executed by the browser.

This structure sets the foundation for building a web page with HTML5, CSS, and JavaScript functionality.

index.js

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

function App() {
  return (
    <div>Hello, esbuild! </div>
  );
}

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

Our React code sets up a simple React application with a single component App. It renders a <div> element with the text Hello, esbuild! and mounts it into the DOM, specifically into the element with the id of root.

How to Create the Build Function

Let's add the following build script using the esbuild bundler in our package.json file:

"scripts": {
        "build": "esbuild src/index.js --bundle --outfile=Bundle.js --loader:.js=jsx --format=cjs"
},

This build script starts with the entry point src/index.js and proceeds to bundle all the dependencies. The resulting bundled code is saved as Bundle.js.

The script also specifies that files with the .js extension should be treated as jsx files, indicating the usage of JSX syntax.

Finally, the output format is set to CommonJS (cjs) which is the module system utilized by Node.js.

By executing this build script, the esbuild bundler will process the files, apply the necessary transformations, and generate a single bundled JavaScript file ready for deployment or further usage.

Overview of the Build Function and its Purpose

The build script using esbuild is JavaScript code that bundles your JavaScript code into a single file. This is useful for optimizing your code for production environments, reducing the number of HTTP requests needed to load your application, and improving load times.

The build method takes an options object as its argument, which allows you to configure how your code is bundled. The options object specifies properties such as entryPoints, outfile, format, bundle, and loader.

Once the build method is configured with the desired options, the build function is called, which triggers the build process. This will output a single bundled file containing all of your JavaScript code.

Finally, the build script is run by executing the script using Node.js. You can do this by updating the package.json file to include a script that runs the build script, as shown above.

Build the React app using the following command:

npm run build


Then run the app using this command:

npx http-server

Conclusion

By following these steps, you can bundle your basic React application using esbuild and have it ready for deployment or further usage. Here is the demo.

Happy coding!