> ## Documentation Index
> Fetch the complete documentation index at: https://bun.ll1025.cn/llms.txt
> Use this file to discover all available pages before exploring further.

# 使用 Bun 构建 React 应用

Bun 原生支持 `.jsx` 和 `.tsx` 文件。React 可以与 Bun 一起使用。

使用 `bun init --react` 创建一个新的 React 应用。这会为你提供一个包含 React 应用和 API 服务器的全栈应用模板。

```bash terminal icon="terminal" theme={null}
# 创建一个新的 React 应用
bun init --react

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

# 构建用于生产的静态站点
bun run build

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

***

### 热重载

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

### 全栈应用

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

### 静态站点

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

```txt 文件树 icon="folder-tree" theme={null}
├── src/
│   ├── index.ts        # 带有 API 路由的服务器入口点
│   ├── frontend.tsx    # 支持 HMR 的 React 应用入口点
│   ├── App.tsx         # 主要 React 组件
│   ├── APITester.tsx   # 用于测试 API 端点的组件
│   ├── index.html      # HTML 模板
│   ├── index.css       # 样式文件
│   └── *.svg           # 静态资源
├── package.json        # 依赖和脚本
├── tsconfig.json       # TypeScript 配置
├── bunfig.toml         # Bun 配置
└── bun.lock            # 锁文件
```