gswardman

Esbuild React: Basic Things You Need to Know

By gswardman December 20, 2021

The impact of a quick bundler is appreciated by most react developers, especially those working on large projects with limited resources and time. Webpack, Parcel, Rollup, Babel, grunt, and other similar projects exist for this reason. Esbuild, a relatively new kid on the block, is hailed as the world's quickest bundler, and its popularity has skyrocketed in recent days.

What Is Esbuild React?

Esbuild React

Esbuild react is a relatively new module packaging solution that emphasizes speed, making it a popular choice for react apps with large projects. The entire bundler is written in the Go language with a bit of JavaScript and TypeScript. Evan Wallace, the project's original developer, refers to it as the "linker of the web" on his GitHub.com profile.

Esbuild comes as an NPM package and can be loaded using the node package manager with the following command:

npm install esbuild

Running the above command in the node CLI downloads the Esbuild package to your local node_modules folder where you will be able to use it in your project as a normal package or dependency. There are alternative ways to download the package, but the most straightforward is to use the trusted node package management tool.

Esbuild Is Not Your Normal Js Bundler

Esbuild is essentially another tool that a developer may utilize to make their work easier and save time, especially when time and resources are limited. This is true because Esbuild is one of several module bundlers available, but it has a few unique features that most users will appreciate.

Esbuild React has quickly established itself as one of the top bundlers for React developers, owing to its superior speed when compared to other module bundlers such as Webpack. Esbuild exhibits considerable gains in build time in real-world tests pitting common web bundlers against each other, which can be compounded for big projects (10x to 100x faster).

Module Bundlers? What Do They Do?

Module Bundlers

Module bundlers are tools or technologies that "compile" big web application projects into a single file that can be efficiently loaded by a browser.  They are typically loaded as dependencies, however they assist in merging all of the other requirements in an application, as well as HTML and CSS.

Why You Need A Bundler Like Esbuild React

Before they came around, the work of managing and loading several JS or Typescript files, dependencies, and libraries was quite cumbersome and a nightmare for large projects. It would take a long time to minify, organize and build complex projects.

Bundler Like Esbuild React

Without a bundler like Esbuild React, the developer had to manually link all the modules and components together and make sure the browser can parse and load them correctly. In most cases, this is not the ideal way to build an app and it could also affect its performance even on modern browsers.

Speaking of app performance, JavaScript is not converted to any form when a web application is completed. This means the browser has to parse through all the JS files in your application to load your React App. For small projects, this can be done quickly but larger projects with hundreds of scripts would affect load times significantly

Another downside to working without a bundler has to do with cross-browser support as well as performing complex frontend operating like code splitting. It can be a nightmare to make sure your app works well across browsers and modules are loaded dynamically.

Esbuild React and other bundlers automate the linking process and make the work of implementing cross-browser support much easier.

At the same time, using a bundler like Esbuild react for complex projects minimizes the possibility of an error occurring during run time as the build or “compiling” is done beforehand.  This allows the developer to build an app they are sure will run smoothly when deployed.

What is the current version of Esbuild react?

The latest release of Esbuild as of late 2021 is version 0.14.2. This version maintains most of the features and syntax of previous versions but introduces new things like new config options. It also fixes some minor bugs like the edge case bug which has been fixed with a catch scope. More importantly, though, the current release was built with GO 1.7.4.

Is Esbuild react a command-line program?

Esbuild is primarily a CLI package that is run through the node CLI using the build command. However, developers working on complex React applications do not have to bundle their projects through the CLI. Instead, they can automate the process by adding build commands in a package.json file or using a build script in JavaScript through the API packed with Esbuild.

What is the syntax for Esbuild react?

Esbuild is written in GO but it doesn’t mean that developers have to use Go syntax in their React applications to build their projects using the bundler. There is not much difference in Esbuild syntax from most other JS bundlers. You just need to know how to invoke the build command that instructs Esbuild to build your project.

syntax for Esbuild react

Since it’s not a standalone language, Esbuild does not have a different syntax that could confuse experienced Reactjs developers. However, you do need to go through the documentation and tutorial to understand how to do complex tasks like using Esbuild plugins in your projects.

What are the basic setup and requirements?

Esbuild react is a JavaScript loader package that runs inside node. So, you need to be working inside a node js dev environment/ecosystem to use Esbuild. In fact, you’ll need the node package manager to add Esbuild into your project more or less like a dependency.

The basic setup requirements for Esbuild react as outlined by the developer are as follows:

  • Download and install Esbuild- the easiest way is to use npm
  • Download and install Reactjs and react-dom packages If you don’t have them already. Again, this is best done using the trust node package manager using the CLI.
  • Install Esbuild as a dev dependency through npm

After doing the above, you will be good to go and can and start building your first bundle using Esbuild React.

What are the advantages of using Esbuild react?

Esbuild has many similarities with other popular bundlers like Webpack. However, the biggest advantage to building an esbuild react app is the build speed which is usually 10 to 100x faster. This has been tested and proven in real-world applications.

Part of the reasons why Esbuild is so fast according to the developer’s documentation includes:

  • Written in the Go language which normally compiles to native code
  • The project uses parallelism to take advantage of all available CPU cores
  • The bundler was written from scratch without libraries making it lightweight
  • Esbuild is designed to optimize memory utilization

These and the quality and of the project itself make Esbuild React, by far, one the fastest bundlers out there. Of course, it may lack some features and plugins you may be used to in more established bundlers like Webpack but its sheer speed is reason enough to use it for react apps.

Esbuild react and app example

This React app example uses Esbuild to link and build the project. It is a simple app that prints the words “Hello world” to the CLI.

Create a file called myapp.jsx and add the following code

import * as React from 'react'import * as Server from 'react-dom/server'let myapp = () => <h1>Hello world! </h1>console.log (Server.renderToString(<myapp />))

To build the Esbuild react app from source code using Esbuild add the following code at the end to create a file with both react and custom code in it that you can run.

\node_modules\.bin\esbuild app.jsx --bundle --outfile=out.js

Finally, run the outfile using the command node out.js

Video (From YouTube) about Esbuild create react app

Not many react developers know and appreciate the speed gains they can get using Esbuild despite its rising popularity. If you are one of these developers, then watching Jack Herrington’s Esbuild and SWC video on YouTube might change your mind.

In the video, he does a real-life comparison of the popular bundlers out there and does a great job highlighting Esbuild’s strengths.

Conclusion

All in all, one can confidently say that the hype around Esbuild is quite justified given its performance and stability as a React loader/builder. Book a call today if you would like support or help on how to utilize powerful web dev technologies like Esbuild React in your projects.