手順 1: Node.js をインストール
Reactを動かすには Node.js が必要です。
以下の手順でインストールします。
Node.jsの公式サイトにアクセス。
推奨版 (LTS) をダウンロードしてインストール。
以下のコマンドでインストールを確認。
node -v
npm -v
それぞれ、バージョンが表示されればOK。
手順 2: Reactプロジェクトの作成
Reactアプリを作成する方法は大きく2つあります。
方法 1: Create React App (初心者向け)
簡単な設定で環境を構築できます。
npx create-react-app （任意のアプリ名）
例）
npx create-react-app my-app
これで、my-appが作成されました。
次に、アプリのディレクトリに移動して、ブラウザを起動します。
cd my-app
npm start
→ ブラウザが自動で開き、http://localhost:3000 でアプリが動作します。
方法 2: Vite（高速で軽量）
最近はViteの方が人気です。
npm create vite@latest my-app
使用するフレームワークなどを選択後、アプリの作成開始。
cd my-app
npm install
npm run dev
→ http://localhost:5173 にアクセスするとアプリが確認できます。
手順 3: CRA（Create React App）と Viteのコマンド表
| 動作 | CRA | Vite |
|---|---|---|
| 開発サーバーを起動 | npm start | npm run dev |
| 本番ビルド | npm run build | npm run build |
| ビルド後のプレビュー | npx serve -s build | npm run preview |
| 依存関係のインストール | npm install | npm install |
| パッケージ追加 | npm install package-name | npm install package-name |
| パッケージ削除 | npm uninstall package-name | npm uninstall package-name |
手順 3: 開発環境のセットアップ（おまけ）
開発をしやすくするために、以下のツールを用意すると便利です。
VS Code のインストール
公式サイト からダウンロード。
- ES7+ React/Redux/React-Native snippets（Reactのスニペット）
- Prettier（コード整形）
- ESLint（コードチェック）