Vite を使ってサクッと React × TypeScript の開発環境を作りましょう!
※Windowsで環境構築を行っています
✅ 対象者
- JavaScriptの基礎を勉強した人
- Reactの環境構築がよくわからない人
- TypeScriptにも興味がある人
1. 前提条件
以下のソフトがインストールされていることを前提とします。
- Node.js(公式サイト)(推奨:18以上)
- npm(Node.jsをインストールすれば同時に使える)
- ターミナル(コマンドライン)
- エディタ(例:Visual Studio Codeが使いやすい)
※バージョン確認するといいかも(npm -v node -v)
2. プロジェクトの作成
まずはプロジェクトを作成しましょう。
Visual Studio Codeでターミナルを開き、開発用のフォルダ(例:dev
)に移動します。
PS C:\Users\ユーザ名\Desktop\dev
その状態で以下のコマンドを実行します。
npm create vite@latest
実行すると、対話形式でいくつか質問されます。
- プロジェクト名:my-react-app(好きな名前でOK)
- フレームワーク:React
- バリアント:TypeScript
以上が完了したら念のため今いるフォルダを確認しておきましょう。
cd プロジェクト名
最後にフォルダを開きます。
code .
3. 依存パッケージのインストール
プロジェクトのディレクトリに移動したら、依存パッケージをインストールします。
npm install
完成です
📝 お疲れさまでした!
ここまで読んでいただき、ありがとうございました!
一緒に開発頑張っていきましょう!!!