React+Typescript App with ESBuild
Tags: javascript, typescript, react, esbuild
Published: 2021-09-02 18:42:38

There is a project called [ESBuild](https://esbuild.github.io/), basically a bundler like web-pack or rollup, and it has been making a lot of noise in the Front-End Development space. Why? Primarily because of its promise to deliver extremely high performance. 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1vlbt8aykw9t19t3lt1.png)
###### Source - https://esbuild.github.io/
  
I would say this is especially great for large projects or large teams. In fact, it even supports Typescript out of the box which is why I am interested in it. In this blog, we will explore ESBuild and use it to build a simple Typescript+React app. 

Let's get started!

## Setup the Project

First, let's create a new directory and initialize a new `package.json` file:
```
mkdir sample-ts-react-app
cd sample-ts-react-app/
npm init -y
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t683imzis60eus0uhf2.png)

Then the only thing we need to install to set up our bundler is `esbuild`:
```
npm i esbuild
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h7kskzfrtgkzfpn3gm0s.png)

Since we are building a react app we are going to install React and ReactDom along with the type definitions for these two packages and the typescript compiler as folllows:
```
npm i react react-dom @types/react @types/react-dom typescript
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hk0qf38flky6xz466fpq.png)
 
Once the installation is complete, let's use the Typescript Compiler to initialize a new `tsconfig.json`. Here we will also specify that all of our source files will be under the `src/` folder and that we will be using `react`:
```
npx tsc --init --rootDir src --jsx react
```
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ix408d3fugrgav8zy7mg.png)

That's it! We have setup our project, now let's open up the the folder in an IDE, I am using Visual Studio, but you can use one of your choice. 


## Write up the sample app

Let's create application entry point under the`src` folder as `app.tsx`:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6t9p0kqllk29fdioaget.png)

Now let's write some basic code. Here we import some of the common libraries and hooks including: `React`, `useCallback`, `useState`, and `ReactDOM`. Our app will consist of a simple component that will take a message as a prop, have an internal state for a counter that is initialized to 0, a callback function that increments the count by 1, and simple UI that shows this information.

```typescript
import React, { useCallback, useState } from "react";
import ReactDOM from "react-dom";

const App = (props: { message: string }) => {
    const [count, setCount] = useState(0);
    const increment = useCallback(() => {
        setCount(count => count + 1);
    }, [count]);
    return(<>
        <h1>{props.message}</h1>
        <h2>Count: {count}</h2>
        <button onClick={increment}>Increment</button>
    </>)
};
```

Then let's render out this app component with a simple message using the ReactDOM onto the root element within our html.
```typescript
ReactDOM.render(
  <App message="Hello World! Simple Counter App built on ESBuild + React + Typescript"/>,
  document.getElementById('root')  
);
```

Of course the next step is to actually create this HTML that our app will sit on. We will do this by creating a sibling folder to `src` called `public/index.html`. This file will contain a simple div with an id root which we will render the previous React App component to and a script to load the JS Bundler.

That's it for our app!

## Bundle App with ESBuild
Next step is to use ESBuild to bundle our app.tsx. If you have worked with webpack or rollup, you know this process. 

Before we bundle, I will first add a script in the `package.json` called `build` which will invoke ESBuild and pass in the entry point for the app along with a few flags (bundle, minify, and sourcemap) and an output target `public/bundle.js`. 
```json
//pacakage.json
"scripts": {
   "build": "esbuild src/app.tsx --bundle --minify --sourcemap --outfile=public/bundle.js"
}
```

Oila and just like that when you run `npm run build` we should be able to complete building our app almost in a blink of an eye (30ms!!!)
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhknxqq4shgoxf82m75j.png)
 
Finally running the app should be simple enough. Just point to the index.html file and it should run:
```
open index.html
```

## How does ES Build achieve such speeds?
ESBuild compiler actually targets the Javascript Ecosystem but it is written in Go. Now I am personally a fan of bootstrap projects, for example, the typescript compiler being written in typescript. However, this level of performance improvement a Go compiler for Javascript project does make it worthwhile for me.

You might have also noticed that ESBuild is also much more lower level when compared to something like webpack. If you want the same level of developer ergonomics as webpack, like webpack dev-server, you might have to combine ESBuild with something like [Vite](https://vitejs.dev/) or [Snowpack](https://www.snowpack.dev/). In fact, these tools actually use ESBuild under the hood!


All in all, ESBuild is still a great starting point to test how fast you can potentially build your application. Of course, you are free to explore using this skeleton code and build on it. I am personally looking forward to hearing your thoughts and experiences on ESBuild!