【React】+【TypeScript】+【Vite】環境構築

React + TypeScript + Vite のインストール方法

ターミナル上で、「React + TypeScript + Vite」をインストールしたいフォルダに移動します。

以下コマンドを実行します。

npm create vite@latest

質問がいくつか出てくるので回答していきます。最初はこのアプリの名前で、これがフォルダの名前に使われます。

任意の名称を決め、「Enter」キーを押下します。

? Project name: › vite-project

フレームワークを選びます。↓矢印キーでReactを選んで「Enter」キーを押下します。

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

TypeScriptを使うか聞かれます。一番上を選んで「Enter」キーを押下します。

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

プロジェクト・フォルダの作成はこれで完了です。次は、上記の指示に従って依存パッケージのインストールを行います。

プロジェクトのフォルダに移動し、npm installを実行します。

npm install

これでセットアップは完了です。