React boilerplate with Bun

React is an extremely popular JavaScript library for building user interfaces. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. React enables building encapsulated components that manage their own state, then compose them to make complex UIs. React is super popular in the world of web frameworks.

Anyone exploring Bun will likely be writing a React app or Next app. Gone are the days when you’d build from scratch. For Bun starters, it’d be useful to have a minimal React boilerplate. There are many boilerplates available in a number of GitHub repos. In this article, we’ll explore Bun’s built-in React boilerplate. Let’s get started.

React boilerplate

In addition to being a JS runtime, Bun has a built-in test runner, upgrade tool, NPM client, etc. The other interesting thing that Bun’s built-in boilerplates. These minimal boilerplates provide a very easy way to start with Bun.

To check the list of boilerplates, use bun create command:

There are boilerplates for discord, hono, next, and react. Out of these, the most useful ones would be next and react, as both are extremely popular in the world.

Now that we’ve the list of boilerplates, let’s create a React boilerplate project. The input is the directory in which boilerplate code will be placed.

> bun create react ./react-boiler
[package.json] Detected React - added "react-refresh"
$ bun install
bun install v0.2.2
 + react-refresh@0.10.0
 + typescript@4.8.4
 + react@18.2.0
 + react-dom@18.2.0
 + web-vitals@3.0.4
8 packages installed [26.00ms]
[34.00ms] bun install
$ bun bun ./src/index.jsx
react v18.2.0
    30.58 KB   react/cjs/react-jsx-dev-runtime.development.js [0]
    64.50 KB   react/cjs/react.development.js [1]
     0.17 KB   react/index.js [2]
     0.20 KB   react/jsx-dev-runtime.js [3]
react-dom v18.2.0
   790.57 KB   react-dom/cjs/react-dom.development.js [4]
     0.65 KB   react-dom/client.js [5]
     0.51 KB   react-dom/index.js [6]
react-refresh v0.10.0
    16.58 KB   react-refresh/cjs/react-refresh-runtime.development.js [7]
     0.20 KB   react-refresh/runtime.js [8]
scheduler v0.23.0
    15.30 KB   scheduler/cjs/scheduler.development.js [9]
     0.18 KB   scheduler/index.js [10]
web-vitals v3.0.4
     9.96 KB   web-vitals/dist/web-vitals.js [11]
976.16 KB JavaScript
       12 modules
        5 packages
 35379 LOC parsed
     27ms elapsed
 Saved to ./node_modules.bun
[75.00ms] git
[836.00ms] bun create react
Come hang out in bun's Discord: https://bun.sh/discord
-----
A local git repository was created for you and dependencies were installed automatically.
Created react project successfully
# To get started, run:
cd react-boiler
bun dev

The command finishes pretty fast. The create command does the following:

• Downloads the React boilerplate code from GitHub
• Install the required modules through bun install command (this is like running npm install)
• Compiles React code in dev mode
• Suggests the next steps

The bun create prepares a complete ready-to-use boilerplate. The next step is to run it. That’s all.

Before running, let’s take a look at the boilerplate:

The code structure is as expected of a React app. There are JSX files that contain the business logic. The index.jsx includes App.jsx. The App.jsx shows a simple page with a link to the React’s official site.

Let’s run the boilerplate:

> cd react-boiler/
> bun dev
[0.76ms] "node_modules.bun" - 12 modules, 5 packages
[12.00ms] bun!! v0.2.2 (6632135e)
Link: http://localhost:3000
        public/index.html

The server is up. Let’s open the browser:

Works like a charm! That was really quick.

Thanks for reading! More articles on similar topics can be seen in the magazine: The JS runtimes.