使用 Bun 构建 React 应用

Bun 内置支持 .jsx 和 .tsx 文件。React 可以与 Bun 一起使用。

使用 bun init --react 创建一个新的 React 应用。这会给你一个模板：把 React 应用和 API 服务器放在一个完整的全栈应用中。

terminal

# 创建一个新的 React 应用
bun init --react

# 在开发模式下运行应用
bun dev

# 构建为生产环境的静态站点
bun run build

# 在生产环境下运行服务器
bun start

热重载

运行 bun dev 以在开发模式下启动应用。这会启动 API 服务器和支持热重载的 React 应用。

全栈应用

运行 bun start 可以在一个进程中同时启动 API 服务器和前端。

静态站点

运行 bun run build 将应用构建为静态站点。这会创建一个 dist 目录，其中包含构建后的应用及其资源。

File

├── 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