bunとviteを使ってreact構築

公式サイトはこちら

プロジェクト作成

1. コマンド実行

bunx create-vite

2. プロジェクト名
   上記コマンドを実行するとプロジェクト名を聞かれるので、好きな名前を入力する

? Project name: › my-react-app

3. フレームワーク選択
   Reactを選択した状態でEnter

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Others

4. 言語とトランスパイラー選択
   今回はTypeScript + SWCを選択します。

SWCとは？

Rustで作成されたトランスパイラーで、Babelより高速に動きます。
最近ではSWCがデフォルトスタンダードになっています。

? Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
❯   TypeScript + SWC
    JavaScript
    JavaScript + SWC

5. 依存関係インストール
   cdでプロジェクトディレクトリに移動し、依存関係をインストールする

cd my-react-app

bun install

6. スクリプト編集
   開発用と本番用のスクリプトを変更する

"scripts": {
-  "dev": "vite",
-  "build": "vite build",
+  "dev": "bunx --bun vite",
+  "build": "bunx --bun vite build",
},

7. 開発サーバーを起動する

bun run dev

以下のような画面が起動すれば成功

オプションでテンプレートを直接指定

bunx create-vite my-react-app --template react-ts
cd my-react-app
bun install
bun run dev

上記のコマンドを実行することで、Viteが用意してくれているテンプレートを使用でき、後は依存関係をインストールするだけですぐに開発できるようになる
しかし、このテンプレートのトランスパイラーはBabelを使用している点に注意