The JS runtimes
Published in

The JS runtimes

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.

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:

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store