# Reactアプリ作成

Warpを開いて、以下のコマンドを叩きましょう。

```bash
npm create vite
```

最初にviteのversionの確認がありますが、`y`と入力して`Enter`を押しましょう。

```bash
Need to install the following packages:
create-vite@5.1.0
Ok to proceed? (y) y
```

次に、プロジェクトの名前を聞かれますが、`calendar-project`として`Enter`を押しましょう。

```bash
Project name: … calendar-project
```

次に、フレームワークを選択する必要があり、カーソルキーで`React`を選択し、`Enter`を押しましょう。

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

最後に言語の選択ですが、`TypeScript`を選択し、`Enter`を押しましょう。

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

これでReactのアプリが作成されました。

`calendar-project`に移動しましょう。

```bash
cd calendar-project
```

その後、このプロジェクトに必要なライブラリをインストールします。

```bash
npm install
```

ライブラリがインストールされたら、Reactアプリを起動してみましょう。

```bash
npm run dev
```

起動したらブラウザにて、`http://localhost:5173`を開き、Reactアプリが動作しているか確認しましょう。

<figure><img src="https://1869761657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FcUBbYqol4PMzZJggiMqV%2Fuploads%2FtGIqP6UUBJpLWATXVkFY%2Fa.png?alt=media&#x26;token=d9574f48-f019-441c-81cf-bd3da8ec9ade" alt=""><figcaption></figcaption></figure>

確認できたら、VSCodeにて`calendar-project`を開いておきましょう。