Bun unterstützt .jsx- und .tsx-Dateien out of the box. React funktioniert einfach mit Bun.

Erstellen Sie eine neue React-App mit bun init --react. Dies gibt Ihnen eine Vorlage mit einer einfachen React-App und einem einfachen API-Server zusammen in einer Full-Stack-App.

# Create a new React app
bun init --react

# Run the app in development mode
bun dev

# Build as a static site for production
bun run build

# Run the server in production
bun start

---

Hot Reloading

Führen Sie bun dev aus, um die App im Entwicklungsmodus zu starten. Dies startet den API-Server und die React-App mit Hot Reloading.

Full-Stack-App

Führen Sie bun start aus, um den API-Server und das Frontend zusammen in einem Prozess zu starten.

Statische Site

Führen Sie bun run build aus, um die App als statische Site zu erstellen. Dies erstellt ein dist-Verzeichnis mit der gebauten App und allen Assets.

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