Using Bun with React

Now that we have Bun setup locally, let's see how it works with React.

The cool part is that we actually get a build out of the box from Bun. So let's use that and have a play with it.

Using Bun with React

To get started open up your terminal and run the following command.

bun create react bun-react

The bun-react part is the folder that will be created with everything inside of it.

It's actually a super fast command to run and you'll have your app in a second or so.

I then went ahead and added a simple counter component called Counter.jsx

import { useState } from 'react';

function Counter() {
  const [counter, setCounter] = useState(0);
  return (
    <div>
      <span>Counter: {counter}</span>
      <button onClick={() => setCounter((count) => count + 1)}>+</button>
    </div>
  );
}

export default Counter;

And then imported it in my App.jsx file.

import "./App.css";
import Counter from "./Counter";

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Counter />
    </div>
  );
}

export default App;

With that in place run your application with the following command.

bun dev

You should now be able to open up your server on http://localhost:3000/ and see your bun powered React app.

And that's it a super quick way to run your React apps.

Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Comments

[Rense Bakker]

I'm super interested in learning bun! On the other hand I notice some hesitation as well, because I'm unsure how the adoption of bun will be for enterprise applications (e.g. are other devs going to love or hate me for using bun)... Can you shed any light on that? Definitely going to try it out for some personal projects though!

[Chris Bongers]

I think you'll like my latest article which is kind of a sum up: daily-dev-tips.com/posts/bun-so-far/

I mean I'm super impressed, but it seems a bit early.
I'm missing tons of things I would like to see in Bun, and it kind of puts me off it for now at least.

Hoping they will keep the momentum going and make me want to come back to it.