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