Using Bun with React

Using Bun with React

Chris Bongers
Β·Oct 5, 2022Β·

2 min read

Play this article

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.

Bun running 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

Did you find this article valuable?

Support Chris Bongers by becoming a sponsor. Any amount is appreciated!

See recent sponsors |Β Learn more about Hashnode Sponsors
Β 
Share this