ここでは、Reactの学習と記事のコード検証ができる環境を作ります。Viteを使い、つまずきポイント（Nodeのバージョン、npmのエラー、起動確認）もまとめます。
必要なもの
- Node.js（推奨：LTS）
- npm（Nodeに同梱）
- エディタ（VS Codeなど）
Nodeのバージョン確認：
node -v
npm -v古すぎる場合はLTSへ更新してください。
ViteでReactプロジェクト作成
Viteは「開発サーバが速い」「設定が軽い」ことが利点です。以下でプロジェクトを作ります。
npm create vite@latest react-tutorial対話で聞かれたら
- Framework: React
- Variant: JavaScript（TypeScriptでも可）
を選びます。
起動して動作確認
作成後は依存関係を入れて起動します。
cd react-tutorial
npm install
npm run devブラウザで表示されるURL（例：http://localhost:5173/）にアクセスし、初期画面が出れば成功です。
よくあるエラーと対処
npm: command not found：Nodeが入っていない、またはPATHが通っていないEACCES：権限問題。Mac/Linuxならnode管理にvolta/nvmを使うか、権限のあるディレクトリで実行Port 5173 is in use：別プロセスが使用中。Viteが別ポートを提案するのでそれを使うか、使用中プロセスを終了
つまずいたら、まずは「Nodeのバージョン」「プロジェクト直下で実行しているか」「npm installが完了しているか」を確認します。
チェックリスト
npm run devで開発サーバが起動する- ブラウザでReact初期画面が表示される
src/App.jsxを編集すると画面が変わる（ホットリロード）
コメント