Bun 开箱即用地支持 .jsx 和 .tsx 文件。React 与 Bun 完美兼容。
使用 bun init --react 创建一个新的 React 应用。这会为您提供一个模板,其中包含一个简单的 React 应用和一个简单的 API 服务器,它们都位于一个全栈应用中。
# Create a new React appbun init --react
# Run the app in development modebun dev
# Build as a static site for productionbun run build
# Run the server in productionbun start热重载
运行 bun dev 以在开发模式下启动应用程序。这将启动 API 服务器和 React 应用,并支持热重载。
全栈应用
运行 bun start 以在单个进程中启动 API 服务器和前端。
静态站点
运行 bun run build 将应用构建为静态站点。这将创建一个 dist 目录,其中包含构建的应用和所有资产。
├── src/
│ ├── index.tsx # 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
├── bunfig.toml # Bun configuration
└── bun.lock # Lock file