Getting started with Bun and React
Tags: react, webdev
Published: 2022-12-21 19:11:09

**Written by [Nelson Michael](https://blog.logrocket.com/author/nelsonmichael/)✏️**

A JavaScript runtime environment allows a program to interact with the outside world by providing access to inbuilt libraries and objects. Simply put, a runtime environment is one in which your program can execute. 

[Bun](https://bun.sh) is a relatively new, fast all-in-one JavaScript runtime. In this article, we'll look at some interesting facts about Bun, evaluate how it compares to other JavaScript runtimes, and see how to use Bun to bootstrap a React project. Lastly, we’ll run some speed tests to see if Bun is really as fast as its website claims! 

_Jump ahead:_

*   [What is Bun?](#what-is-bun)
*   [What can I do with Bun?](#what-can-i-do-with-bun)
    *   [Transpiling](#transpiling)
    *   [Task running](#task-running)
    *   [Package management](#package-management)
*   [How does Bun compare to Node.js and Deno?](#how-does-bun-compare-to-nodejs-and-deno)
    *   [Speed](#speed)
    *   [Extra features](#extra-features)
    *   [Compatibility](#compatibility)
*   [Creating a React app with Bun](#creating-a-react-app-with-bun)
*   [Speed test: Bun vs. Node.js](#speed-test-bun-vs-nodejs)
*   [Speed test: Bun vs. Create React App](#speed-test-bun-vs-create-react-app)

## What is Bun? <a name="what-is-bun">

Bun is a new, lightweight JavaScript runtime that includes a native bundler, transpiler, task runner, and npm client. It allows you to bundle, transpile, install, and run JavaScript and TypeScript projects. 

Bun is the new kid on the block; it's all about speed, and it's a strong contender for the top JavaScript runtime spot right now. It claims to be more feature-rich and faster than Node.js and Deno. Jarred Sumner created Bun, which was released to the public in 2021\. Since then, it has quickly accumulated over 30k stars on Github. 

Bun comes with a boatload of features:

*   Includes web APIs such as Fetch, WebSocket, and ReadableStream
*   Transpiles every file, so both TypeScript and JSX work
*   Implements the Node.js module resolution algorithm, meaning npm packages may be used
*   Includes a lightning-fast SQLite3 client
*   Implements the majority of the Node.js API, meaning that many native Node modules simply work

## What can I do with Bun? <a name="what-can-i-do-with-bun">

Bun’s website refers to it as a “[fast all-in-one JavaScript runtime.](https://bun.sh)” So what else can we do with Bun? Let’s take a look.

### Transpiling <a name="transpiling">

Bun's transpiler is a fantastic feature that converts TypeScript, JSX, and even vanilla JavaScript. Why would you need to transpile plain JavaScript, after all? 

That’s a great question. This is where one of Bun's performance-enhancing features comes into play. Bun automatically optimizes JavaScript before it is executed. 

The transpiling feature is still under development, but the developers intend to include an optimized binary format for JavaScript in the future. These optimizations could have significant implications for edge apps and other short-lived processes.

### Task running <a name="task-running">

Bun's task runner is similar to that of Node.js, but it is noticeably faster. You can use Bun's task manager in a Node project to take advantage of its speed. A task runner is an essential tool; both Node/npm and Deno include one by default. Furthermore, Bun's task manager can run almost any script without the need for the run subcommand, whereas npm can only do so for a few script names.

### Package management <a name="package-management">

Bun's package manager outperforms in terms of performance. In fact, Bun, should be faster than [pnpm](https://pnpm.io) or Yarn, and here's why:

*   **Symlinks**: Because Bun employs symlinks, packages for each project are linked to a centralized location. This means that modules used in subsequent projects do not have to be downloaded again
*   **Binary lockfile**: Bun uses a binary lockfile; binary files are typically serialized and deserialized more quickly, thereby reducing the overall time required by the package manager
*   **Zig**: Bun's package manager is written in Zig. This is a very fast language; much faster than JavaScript, which is used by the majority of other JavaScript package managers

## How does Bun compare to Node.js and Deno? <a name="how-does-bun-compare-to-nodejs-and-deno">

Node.js and Deno are two of the most popular and widely used server-side JavaScript runtime environments. Let’s see [how they compare to Bun](https://blog.logrocket.com/bun-javascript-runtime-taking-node-js-deno/).

### Speed <a name="speed">

According to [benchmarks performed by Bun's creators](https://github.com/oven-sh/bun), Bun can outperform both Node.js and Deno in I/O-intensive operations such as HTTP servers and SQL. Bun is built to be faster to start and run than either Node.js or Deno. It also claims to be significantly faster than both server-side JavaScript runtimes due to its use of [JavaScriptCore](https://developer.apple.com/documentation/javascriptcore) instead of JavaScript V8, its use of Zig for API writing, and extensive tuning and benchmarking. 

These claims may appear outlandish — after all, it's all JavaScript and JavaScript V8 is quite efficient. However, remember I mentioned Bun’s speed with I/O-intensive tasks? A significant percentage of execution time is spent in the runtime's API rather than the JavaScript engine itself. Bun is much faster in these cases because it has a much faster I/O implementation than either Node.js or Deno.

### Extra features <a name="extra-features">

Bun is not just a JavaScript runtime, it also comes with a host of extra features that make it a versatile and powerful tool for web developers. These features include a bundler, a TypeScript transpiler, and a test runner, which are similar to those found in Deno. 

Bun also includes a CSS-in-JS tool, a template builder, and an environment variable loader. Bun does not have the same code weight constraints as web libraries, enabling it to offer both performance optimization and an impressive array of features.

### Compatibility <a name="compatibility">

Bun was built to be Node-compatible. It includes full support for CommonJS, Node-API, and some Node.js modules. This feature is extremely useful because it allows you to access the vast Node.js ecosystems.

## Creating a React app with Bun <a name="creating-a-react-app-with-bun">

Now that we have a better understanding of Bun’s many features. Let’s see how we can create a React application on the Bun JavaScript runtime. 

To start, install Bun on your computer:

```bash
curl https://bun.sh/install | bash
```

If you’re on a Mac, you’ll have to do some extra steps to get Bun working. After installation is successful you’ll get two export commands. Follow these steps to add those commands in a `.zprofile` file in your `Users` folder:

1.  Navigate to your computer's hard disk
2.  Navigate to the `Users` folder
3.  Navigate to your current logged in user
4.  Find a file called `.zprofile`
5.  Add the commands in the `zprofile` file and save

Use the following command to check that Bun was installed:

```javascript
bun -v
```

Now, let’s install React. In your terminal, navigate to where you want to keep your React project, and then run the following command:

```javascript
bun create react [app name]
```

Next, navigate to your project folder and then run the below command below to start a local development server:

```javascript
bun dev
```

If you want to create a production build, run this command:

```javascript
bun react-scripts build
```

Bun does not [generate script commands for us like Create React App](https://blog.logrocket.com/everything-you-need-know-about-react-scripts/), but you can do that by simply installing `react-scripts`. These preconfigured React scripts run the build tools that are needed to programmatically transform React JSX syntax into JavaScript:

```javascript
bun a react-scripts -d
```

Now, simply add the scripts in your `package.json` file. Then you can start running scripts just like you would in a Create React App project with npm. 

Add the following scripts to your `package.json` file:

```javascript
{
  "scripts":{
    "start": "bun dev",
    "build": "react-scripts build"
  }
}
```

Bun creates a React app with JavaScript by default. To use TypeScript instead, just change the file extension from `.jsx` to `.tsx`.

## Speed test: Bun vs. Node.js <a name="speed-test-bun-vs-nodejs">

Let’s perform a simple speed test to see which of these runtimes executes the code the fastest. Our program is just a simple loop, at the start of the program we start a timer and when the loop finishes its iteration we end the timer. 

Here’s the code for the program:

```javascript
console.time('test');
for (let i = 0; i < 10000; i++) console.log(i)
console.timeEnd("test");
```

Let’s run our speed test:

1.  Create a file and call it whatever you want, let’s call it `bun-test.js`.
2.  Paste the code above into the file.
3.  Open your terminal and navigate to the folder where you have the file.
4.  Run the program on the terminal.

To run the program with Bun use this command:

```javascript
bun [file name]
```

Here’s the result from running the program with Bun: ![Speed Test with Bun](https://blog.logrocket.com/wp-content/uploads/2022/12/running-program-with-bun.png) 

It took Bun `22.39ms` to complete the loop. 

Now, let’s see how long it will take Node.js to complete the same program. 

To run the program with Node use this command:

```javascript
node [file name]
```

Here’s the result from running the program with Node: ![Speed Test with Node.js](https://blog.logrocket.com/wp-content/uploads/2022/12/running-program-with-node.png) 

It took Node `163.225ms` to complete the same program!

## Speed test: Bun vs. Create React App <a name="speed-test-bun-vs-create-react-app">

Now, let’s perform another type of speed test. Let’s see how long it will take for Bun to set up a React application compared to Create React App. 

To set up a React application with Bun, open up your terminal and cd into the folder where you’d like to install your React project:

```javascript
bun create react [app name]
```

As shown below, it took Bun `17.78s` to finish installing all the dependencies for a brand new React application: ![Time for Bun to Install All Dependencies for a React App](https://blog.logrocket.com/wp-content/uploads/2022/12/bun-seconds-to-run-react.png) 

Now, let’s see how long it would take Create React App to do the same thing. Again, open the terminal and cd into the folder that you’d like to install your React project in:

```bash
npx create-react-app [app name]
```

As shown below, it took Create React App `61s` to finish installing all the dependencies for a new React application: ![Time for Create React App to Install All Dependencies for a React App](https://blog.logrocket.com/wp-content/uploads/2022/12/create-react-app-seconds-to-run.png) **_N.B.,_** _internet speed was a major factor in the above tests, but the same internet speed was used for both tests_

## Conclusion

Bun is a powerful all-in-one JavaScript runtime that offers web developers a rich set of features and tools. In this article, we took an in-depth look at Bun's features and compared them to other popular JavaScript runtimes, such as Node.js and Deno. We also demonstrated how to create a simple React app with Bun, and ran tests to show just how fast and efficient it is compared to other runtimes. Overall, Bun is a versatile and powerful tool that offers a wealth of benefits to web developers looking to build fast, efficient, and scalable applications.

---
##Cut through the noise of traditional React error reporting with LogRocket

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) is a React analytics solution that shields you from the hundreds of false-positive errors alerts to just a few truly important items. LogRocket tells you the most impactful bugs and UX issues actually impacting users in your React applications.

[![LogRocket signup](https://blog.logrocket.com/wp-content/uploads/2017/03/1d0cd-1s_rmyo6nbrasp-xtvbaxfg.png)](https://lp.logrocket.com/blg/signup)

[LogRocket](https://lp.logrocket.com/blg/react-signup-issue-free) automatically aggregates client side errors, React error boundaries, Redux state, slow component load times, JS exceptions, frontend performance metrics, and user interactions. Then LogRocket uses machine learning to notify you of the most impactful problems affecting the most users and provides the context you need to fix it.

Focus on the React bugs that matter — [try LogRocket today](https://lp.logrocket.com/blg/react-signup-issue-free).