Esbuild: React Example

[rizkyramadhan]

We need an easy to follow example.
I would suggest a Create-React-App project built using esbuild as an example, this will onboard most of us to esbuild.

[immanuelfodor]

This. When I saw that incredible benchmark in the readme, I just said, wow, we seriously need it for React build. If you make an example app happen, I think we'll consider migrating to your hobby project as a company 😃

[evanw]

I've never used create-react-app before but from what I understand, it's basically a customized webpack config. It's not possible to use esbuild to replace a webpack config generated with create-react-app because it includes a lot of things that esbuild doesn't implement. For example, it appears to support processing CSS in .css/sass/scss files as well as inlining .bmp/gif/jpg/png files as base64 URLs. It also seems to enable JSX syntax in .js files while esbuild requires you to use the .jsx extension.

I'm not trying to have esbuild replace webpack. If you need the complexity of create-react-app/webpack, then you're not going to be able to use esbuild. I'm only intending for esbuild to be appropriate for a certain sweet spot of use cases. Currently this is just bundling JavaScript/JSX files that use CommonJS/ES6 modules. In the future, it will hopefully also include bundling TypeScript files and maybe CSS files. If I get to implementing all of that, it may be possible to manually port an app that uses create-react-app to esbuild, but it may take significant effort depending on how many custom webpack features it uses.

[immanuelfodor]

If you would try to replace webpack, and you succeed to "reimplement" it in Go, you'd get famous, go to conferences, etc. This is a real opportunity here, you're one step ahead of everybody, and it fills a need in the market. But fair enough, it's your project, it seems you have clear vision about what you want to do with it. I just don't get if you have the talent to accomplish this already, why not make it something truly earthshaking. No matter what, I wish you all the luck you can master, great job what you did here, the most amazing build optimization I've seen in some time!

[arangates]

@immanuelfodor maybe Google must do that

[immanuelfodor]

Sooner or later somebody will definitely implement it. 100x increase in build time is well worth the effort. There was another issue for Svelte use case (#8), so I feel even two forks of this repo could coexist: an esbuild-react and an esbuild-svelte variant.

[chowey]

You guys might be missing the point. Webpack has 10,472 commits and 585 contributors over the past 7 years. Re-writing that in Go from the ground up is not trivial.

The same goes for any JS build tool. You would have to re-write it in Go from the ground up.

I'm already impressed that @evanw is planning Typescript support.

Now, something like transpiling JSX is much simpler. The React guys explain it well. JSX converts directly to function calls in a straightforward way.

I think a React example is a good idea. It doesn't have to be Create-React-App. It can just showcase how to run esbuild with JSX.

[immanuelfodor]

Sounds good, thumbs up for showing us the way! :)

[evanw]

Just using React with esbuild should be pretty simple:

• Make sure all JSX syntax is put in .jsx files instead of .js files because esbuild uses the file extension to determine what syntax to parse.

• If you're using TypeScript, run tsc first to convert .tsx files into either .jsx or .js files.

• If you're using esbuild to bundle React yourself instead of including it with a <script> tag in your HTML, you'll need to pass '--define:process.env.NODE_ENV="development"' or '--define:process.env.NODE_ENV="production"' to esbuild on the command line (see #12 for details).

If you're using Preact instead of React, you'll also need to pass --jsx-factory=preact.h --jsx-fragment=preact.Fragment to esbuild on the command line.

[evanw]

For example, if you have a file called example.jsx with the following contents:

import * as React from 'react'
import * as ReactDOM from 'react-dom'

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Use this for a development build:

esbuild example.jsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=out.js

Use this for a production build:

esbuild example.jsx --bundle '--define:process.env.NODE_ENV="production"' --minify --outfile=out.js

[rw3iss]

FYI, for anyone else wanting to replace webpack for a faster building, you don't really have to. Just use the esbuild-loader package, and it will work. The livereload isn't any faster, but it will still build the JS/TS faster, ie:

       {
            test: /\.(j|t)sx?$/,
            include: [PATHS.src], 
            exclude: [PATHS.modules],
            use: [
                {
                    loader: 'esbuild-loader',
                    options: {
                        loader: 'tsx', // Or 'ts' if you don't need tsx
                        target: 'esnext'
                    }
                }
            ]
        },

[IlmariKu]

I'm creating a ESbuild-version of nano-react-app to this repository

https://github.com/IlmariKu/esbuild-react-app