54 lines
1.6 KiB
Plaintext
54 lines
1.6 KiB
Plaintext
---
|
|
title: Build a React app with Bun
|
|
sidebarTitle: React with Bun
|
|
mode: center
|
|
---
|
|
|
|
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.
|
|
|
|
```bash terminal icon="terminal"
|
|
# 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.
|
|
|
|
```txt File Tree icon="folder-tree"
|
|
├── 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
|
|
```
|