Bun 开箱即支持 .jsx 和 .tsx 文件。React 可以在 Bun 上直接运行。

使用 bun init --react 创建一个新的 React 应用。这将为你提供一个模板，包含一个简单的 React 应用和一个简单的 API 服务器，整合在一个全栈应用中。

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

# 以开发模式运行应用
bun dev

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

# 以生产模式运行服务器
bun start

---

热重载

运行 bun dev 以开发模式启动应用。这将启动 API 服务器和带有热重载功能的 React 应用。

全栈应用

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

静态站点

运行 bun run build 将应用构建为静态站点。这将创建一个 dist 目录，包含构建好的应用和所有资源。

├── src/
│   ├── index.tsx       # 带有 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            # 锁定文件