React を始める

React を本番環境で使用するには、Node.js に含まれている npm が必要です。
また、React の開発環境をセットアップし、ビルドツールを選択する必要があります。

1. React 開発環境のセットアップ

まず、Node.js がインストールされていることを確認してください。ターミナルで以下のコマンドを実行することで確認できます。

node -v

Node.js がインストールされている場合、次のようなバージョン番号が表示されます。

v22.15.0

インストールされていない場合は、Node.js をインストールする必要があります。

2. ビルドツール（Vite）のインストール

Node.js の準備ができたら、ビルドツールを選択して React アプリケーションの作成を開始できます。
このチュートリアルでは、ビルドツールとして Vite を使用します。

以下のコマンドを実行して Vite をインストールします。

npm install -g create-vite

インストールが成功すると、次のような結果が表示されます。

649ms で 1 パッケージを追加しました

3. React アプリケーションの作成

以下のコマンドを実行して、my-react-app という名前の React アプリケーションを作成します。

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

もし以下のようなメッセージが表示された場合は、y キーを押してから Enter キーを押して続行してください。

以下のパッケージをインストールする必要があります:
[email protected]
続行してもよろしいですか？ (y)

作成が成功すると、次のような結果が表示されます。

> npx
> create-vite my-react-app --template react

|
o  C:\Users\stale\my-react-app 内にプロジェクトの雛形を作成中...
|
-  完了しました。次に以下を実行してください:

  cd my-react-app
  npm install
  npm run dev

4. 依存関係のインストール

上記の結果に示されている通り、新しく作成した React アプリケーションのディレクトリに移動します。

cd my-react-app

次に、以下のコマンドを実行して依存関係（Dependencies）をインストールします。

npm install

実行結果は以下のようになります。

8秒で 154 パッケージを追加し、155 パッケージを監査しました

33 パッケージが資金援助を求めています
  詳細は `npm fund` を実行してください

脆弱性は 0 件見つかりました

5. React アプリケーションの実行

これで、最初の「本物の」React アプリケーションを実行する準備が整いました！
以下のコマンドを実行して、アプリケーション my-react-app を起動します。

npm run dev

実行すると、以下のようなメッセージが表示されます。

VITE v6.3.5  217 ms で準備完了

➜  Local:   http://localhost:5173/
➜  Network: --host を指定して公開
➜  h + enter でヘルプを表示

自動的にブラウザのウィンドウが開き、作成したばかりの React アプリが表示されます。もし開かない場合は、ブラウザのアドレスバーに localhost:5173 と入力してください。