DEV Community

Cover image for Using Bun with React
Chris Bongers
Chris Bongers

Posted on • Originally published at daily-dev-tips.com

4

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
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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

bun dev
Enter fullscreen mode Exit fullscreen mode

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

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
brense profile image
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!

Collapse
 
dailydevtips1 profile image
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.

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs