Usually we use create-react-app which does some magic behind the scenes like Webpack . Webpack is annoying, so let’s see how the app can work without it. I’ll try esbuild in this article instead.

We only need 3 packages:

yarn add react esbuild typescript

React is for components rendering

and esbuild to do all the magic instead of Webpack :

Transform jsx to JavaScript

Transform Typescript to JavaScript

Bundling all our code and node modules to one file

Simple http server to serve bundled index.js

So we don’t even need babel . I like babel , but esbuild already handles code transformation for us.

First of all let’s compile a command to use on yarn start:

./node_modules/.bin/esbuild index.tsx --bundle --outdir = . --servedir = . --loader :.js = tsx --watch

Where

—watch - to watch for changes so live reload is possible

--loader:.js=tsx - so esbuild understands and transforms Typescript

--outdir=. --servedir=. - to use a local esbuild http server. “.” - current path

Now let’s make index.html .…