How to build React applications faster with Bun
Tags: bunjs, react, webdev
Published: 2023-03-09 01:19:22

by [Uma Victor](https://blog.openreplay.com/authors/uma-victor)

Is your npm package install slower? Or do you want to try out a new runtime environment? [Bun](https://bun.sh/) is the new Javascript runtime that claims to be better than `Node.js`. This article will test this out and see how we can improve our React applications with this new runtime.


## Introduction

In this tutorial, we will have a test at [Bun](https://bun.sh/). We'll learn about Bun, what makes it so fast, and we'll try creating a React application using it, testing the speed of installs. Finally, we'll have a feel of using Bun as a package manager. Let's start!

## What is Bun

Bun is a new JavaScript runtime that seeks to provide an easy, quick, and modern environment to work in. If you are wondering what the `Javascript` runtime is, a `JavaScript` runtime is an environment that allows you to execute your `JavaScript` code and provide useful features and libraries to help you in your development process.

Unlike Node.js, Bun aims to provide a more modern and simpler environment for running JavaScript code, focusing on simplicity, performance, and security. On the other hand, Deno's goal is to offer a modern and safe environment for running TypeScript and JavaScript code without using a package manager.

In general, the choice of a JavaScript runtime depends on the specific needs and requirements of the project. For example, if you need to build a server-side application, you may choose Node.js. If you need a secure environment for running JavaScript code without a package manager, you may choose Deno. If you need a simple and fast environment for running JavaScript code, consider Bun.


## What makes Bun so fast?

Here are some reasons the Bun runtime is so fast:

1. Lightweight: Bun is a lightweight runtime, meaning it has a smaller codebase and requires fewer resources, which allows it to perform better in speed and memory usage than other Runtimes.

2. Low-level code: The Bun runtime is written in Zig, a low-level programming language that is relatively new compared to C or Rust.

3. Performance: Bun doesn’t use the v8 engine. Instead, it uses the Javascript core from Webkit, which is generally considered to be faster.

4. Compactness: Bun has a native bundler to replace tools like Webpack and a native transpiler, so you can write Typescript code out of the box. Bun has a test runner, just like Jest. Environment variables load automatically; you don’t need to install dotenv into every project.


## Installing the Bun runtime

To install Bun natively on your Mac, Windows, or Linux machine, run this command:

```bash
curl -fsSL https://bun.sh/install | bash
```
For macOS users, run this after:

```bash
exec /bin/zsh
```



## Using Bun with React
In this section, let's see how to set up a React application using Bun.

First, you need to verify that you have the Bun runtime installed. To do this, type the command:
```bash
bun --version
```
Your version of Bun on your system will be displayed on your terminal. If you need help, you can install Bun on your system from the previous section or check the [docs](https://github.com/oven-sh/bun#readme) for the installation guide on your machine.

In your terminal, run the following:

```bash
bun --help
```
This command outputs some helpful information.
![bun command](https://blog.openreplay.com/images/how-to-build-react-apps-faster-with-bun/images/s_EDF932C5D09DEB6FA1C2F512391DB7DB8C8EA01808D3EAE54AE3C42C902DDC0A_1675284786451_Screenshot+2023-02-01+at+21.51.35.png)

For example, the create command from above enables us to create a new React project. Run the command:
```bash
bun create
```
This command displays some tools to create a new project template.
![bun_create](https://blog.openreplay.com/images/how-to-build-react-apps-faster-with-bun/images/s_EDF932C5D09DEB6FA1C2F512391DB7DB8C8EA01808D3EAE54AE3C42C902DDC0A_1675335240968_Screenshot+8.png)
From the image above, you can see some helpful commands that can be used to scaffold a new project, and you can see the React command from the list. Now run:
```bash
bun create react [your-app-name-here]
cd app
```


You can run a development build for your application by running this command:

```bash
bun dev
```
Or a production build by running:
```bash
bun build
```




<h2>Session Replay for Developers</h2> 
<p><em>
Uncover frustrations, understand bugs and fix slowdowns like never before with <strong><a href="https://github.com/openreplay/openreplay" target="_blank">OpenReplay</a></strong> — an open-source session replay suite for developers. It can be <strong>self-hosted</strong> in minutes, giving you complete control over your customer data
</em></p>
<img alt="OpenReplay" width="768" height="400" src="https://blog.openreplay.com/assets/overview_Z17Qdyg.png" class="astro-UXNKDZ4E" loading="lazy" decoding="async">
<em>Happy debugging! <a href="https://openreplay.com" target="_blank">Try using OpenReplay today.</a></em>






## Using Bun as a package manager

According to the official [Bun GitHub page](https://github.com/oven-sh/bun)[,](https://github.com/oven-sh/b) bun install has shown it can install packages 20x to 100x faster than npm install, and on macOS, you can record up to 4x to 80x faster than npm install.

Bun install is a command used to install packages. To use Bun install, you need to have Bun installed on your system and have a project set up. The syntax for the Bun install command is:

```bash
bun install
```

And remove and add packages with the following:

```bash
bun remove <package_name>
bun add <package_name>
```

The `<package_name>` is the name of the package you want to install. The Bun install command will download the specified package and its dependencies and make them available for use in your project. For example:

```bash
bun install lodash
```


## Speed testing Bun

We have covered the installation of Bun and its unique features. Let's test the speed of creating a new React app using Bun vs. using `create-react-app`. Let's start our test with Bun.

Navigate to your project folder in your terminal and run the command: 

```bash
bun create react [your-app-name]
```

After installing React, creating the React app takes Bun less than 10 seconds.
![--](https://blog.openreplay.com/images/how-to-build-react-apps-faster-with-bun/images/CNVv6zp.png)

Let's try this with `create-react-app` and see what we get. 
Navigate to your project folder in your terminal and run this command: 

```bash
npx create-react-app <app-name>
```
![--](https://blog.openreplay.com/images/how-to-build-react-apps-faster-with-bun/images/ddy62AC.png)
It took `create-react-app` 17s to create a project.

For further investigation, you can visit this [GitHub](https://github.com/oven-sh/bun/tree/e55d6eed2bf9a5db30250fdd8b9be063dc949054/bench) repo containing a lot of benchmark tests you can carry out on Bun.

## Conclusion

In this tutorial, we learned about the Bun runtime, how to install it, and use it with React. So have fun playing using Bun in your next project, and enjoy this new blazing-fast runtime.




[![newsletter](https://blog.openreplay.com/newsletter_Z1P0UIP.png)](https://newsletter.openreplay.com/)