「Vite」でReact環境構築をしたい!

2024/11/16に公開

はじめに

最近Reactを勉強していますが、環境構築を「Vite」で行うように変更しました。
ViteによるReact環境構築をまとめます。

ViteによるReactの環境構築手順

Reactプロジェクトを作成したいディレクトリで以下コマンドを実行します。

npm create vite@latest

コマンド実行すると、いくつか質問されるので回答します。
プロジェクト名を入力します。

? Project name: › music_app

フレームワークや言語を選択します。

? Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
❯   React
    Preact
    Lit
    Svelte
    Solid
    Qwik
    Angular
    Others
Select a variant: › - Use arrow-keys. Return to submit.
    TypeScript
    TypeScript + SWC
❯   JavaScript
    JavaScript + SWC
    Remix ↗

上記でReactプロジェクトのフォルダー作成されました。
以下のような表示が出る想定です。上記のコマンドを実行するとセットアップ完了します。

Done. Now run:
    cd music_app
    npm install
    npm run dev

Discussion