この記事の要点

Reactの開発にはNode.jsとnpm（またはyarn/pnpm）が前提。まずLTS版Node.jsを入れる 現在の推奨は「create-react-app」より高速な「Viteで作成」だが、CRAも依然動作する npmなら「npm create vite@latest」でテンプレートからReactプロジェクトを生成できる 生成後はディレクトリ移動→npm install→npm run dev で開発サーバーが起動する 開発サーバーは既定でlocalhost上に立ち上がり、保存すると即座に画面へ反映される（HMR） グローバルインストールよりプロジェクト単位の管理が安全で、バージョン衝突を避けられる

概要

Reactで開発を始めるには、まずNode.jsとnpm（Nodeに同梱されるパッケージ管理ツール）を用意し、プロジェクトのひな形を生成します。本記事では、従来から使われているcreate-react-app（CRA）と、近年標準になりつつある高速ビルドツールViteの両方の手順を紹介します。これからReactを学ぶなら、起動が速くビルドも軽快なViteでの作成がおすすめです。

前提：Node.jsとnpm

Reactのビルドや開発サーバーはNode.js上で動きます。まずNode.js公式サイトからLTS版（長期サポート版）をダウンロードしてインストールしてください。Node.jsをインストールするとnpmも一緒に入ります。インストール後、ターミナル（コマンドプロンプトやPowerShell、ターミナル）でバージョンを確認します。

node -v   # 例: v20.x.x
npm -v    # 例: 10.x.x

バージョンが表示されれば準備完了です。

使い方・手順（Viteで作成：推奨）

1. プロジェクトを生成する
任意のディレクトリで次のコマンドを実行します。my-react-appは好きなプロジェクト名に変えてください。

npm create vite@latest my-react-app -- --template react

2. ディレクトリへ移動して依存をインストールする

cd my-react-app
npm install

3. 開発サーバーを起動する

npm run dev

表示されたURL（多くは http://localhost:5173）をブラウザで開くとReactアプリが表示されます。ソースを保存するとHMR（ホットリロード）で即座に画面へ反映されます。

使い方・手順（create-react-appで作成）

従来型のCRAを使う場合は次の通りです。グローバルインストールは不要で、npxで都度実行できます。

npx create-react-app my-react-app
cd my-react-app
npm start

この場合の開発サーバーは既定で http://localhost:3000 に起動します。

実用例・Tips

• 本番ビルド：公開用の最適化ファイルは npm run build で生成される（Viteはdist/、CRAはbuild/に出力）。
• パッケージ追加：ルーティングや状態管理などは npm install react-router-dom のようにプロジェクト単位で追加する。
• yarn/pnpmも可：npmの代わりにyarnやpnpmでも同様に管理できる。チームで揃えるのが望ましい。
• node_modulesは共有しない：巨大になるため.gitignoreに入れ、Git管理から外すのが基本。

注意点・落とし穴

• Node.jsのバージョン：古いNodeだと新しいツールが動かないことがある。LTS版を使い、必要ならnvm等でバージョンを切り替える。
• グローバルインストールの弊害：npm install -g create-react-appのようなグローバル導入は古い版が残りやすい。npxやnpm createで都度最新を使う方が安全。
• ポート競合：既定ポートが使用中だと起動に失敗する。別プロセスを止めるか、起動オプションでポートを変更する。
• 権限エラー：npmのグローバル領域への書き込み権限不足でエラーになることがある。プロジェクトローカルで完結させると回避しやすい。

関連リンク

Reactそのものの概念（コンポーネント・仮想DOM・JSX・Hooks）についてはReactを参照してください。インストール後の学習の出発点になります。