Skip to content

Bun は .jsx および .tsx ファイルをすぐにサポートします。React は Bun ですぐに動作します。

bun init --react で新しい React アプリを作成します。これにより、シンプルな React アプリとシンプルな API サーバーを 1 つのフルスタックアプリとして提供するテンプレートが作成されます。

bash
# 新しい React アプリを作成
bun init --react

# 開発モードでアプリを実行
bun dev

# 本番環境用に静的サイトとしてビルド
bun run build

# 本番環境でサーバーを実行
bun start

ホットリローディング

bun dev を実行してアプリを開発モードで起動します。これにより、API サーバーと React アプリがホットリローディングで起動します。

フルスタックアプリ

bun start を実行して、API サーバーとフロントエンドを 1 つのプロセスで一緒に起動します。

静的サイト

bun run build を実行してアプリを静的サイトとしてビルドします。これにより、ビルドされたアプリとすべてのアセットを含む dist ディレクトリが作成されます。

txt
├── 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            # ロックファイル

Bun by www.bunjs.com.cn 編集