ReactをBunで使用する方法

ReactをBunで使用する方法

ReactをBunで使用するには、Bunの環境をセットアップして、Reactアプリケーションを作成する必要があります。
以下の手順に従ってください。

1. Bunのインストール

まず、Bunをインストールします。
公式サイトの手順に従ってください。

curl -fsSL https://bun.sh/install | bash

インストールが完了したら、ターミナルを再起動し、bunコマンドが使用できることを確認します。

bun --version

2. 新しいReactプロジェクトの作成

Bunを使用して新しいReactプロジェクトを作成します。

bun create react my-react-app

my-react-appはプロジェクトのディレクトリ名です。
任意の名前に変更できます。

3. プロジェクトディレクトリに移動

作成したプロジェクトディレクトリに移動します。

cd my-react-app

4. プロジェクトの依存関係のインストール

Bunを使用して依存関係をインストールします。

bun install

5. Reactアプリケーションの起動

開発サーバーを起動してReactアプリケーションを実行します。

bun dev

ブラウザで http://localhost:3000 にアクセスして、Reactアプリケーションが正しく動作していることを確認します。

6. TypeScriptを使用する場合

TypeScriptを使用するには、tsconfig.jsonファイルを追加し、必要なパッケージをインストールします。

bun add -d typescript @types/react @types/react-dom

次に、tsconfig.jsonファイルをプロジェクトのルートに作成します。

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

7. コンポーネントの作成

srcフォルダ内に新しいコンポーネントを作成してみましょう。
例えば、src/components/Hello.tsxファイルを作成します。

import React from 'react';

const Hello: React.FC = () => {
  return <h1>こんにちは、BunとReact!</h1>;
};

export default Hello;

8. コンポーネントの使用

src/App.tsxファイルを開き、先ほど作成したコンポーネントをインポートして使用します。

import React from 'react';
import Hello from './components/Hello';

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

これで、ReactとBunを使用してTypeScriptでコンポーネントを作成し、表示することができました。
開発サーバーが動作している場合、ブラウザで結果を確認できます。