Build a React app with Bun | Bun Español

Bun has built-in support for .jsx and .tsx files. React works with Bun.

Create a new React app with bun init --react. This gives you a template with a React app and an API server together in one full-stack app.

# Create a new React app
bun init --react

# Run the app in development mode
bun dev

# Build as a static site for production
bun run build

# Run the server in production
bun start

Hot Reloading

Run bun dev to start the app in development mode. This starts the API server and the React app with hot reloading.

Full-Stack App

Run bun start to start the API server and frontend together in one process.

Static Site

Run bun run build to build the app as a static site. This creates a dist directory with the built app and its assets.

├── src/
│   ├── index.ts        # Server entry point with API routes
│   ├── frontend.tsx    # React app entry point with HMR
│   ├── App.tsx         # Main React component
│   ├── APITester.tsx   # Component for testing API endpoints
│   ├── index.html      # HTML template
│   ├── index.css       # Styles
│   └── *.svg           # Static assets
├── package.json        # Dependencies and scripts
├── tsconfig.json       # TypeScript configuration
├── bun-env.d.ts        # Type declarations for .svg and .css imports
├── bunfig.toml         # Bun configuration
└── bun.lock            # Lock file