開発環境

環境確認（バージョンチェックとか）

Reactをローカル環境で動かすためにはNode.jsが無いと動かないみたい。
なのでまずインストールされているか確認。以下のコマンドをターミナルで実行しましょう。

node -v

このコマンドを実行してインストールされていたら以下の様にバージョンが表示されます。

➜  ~ node -v
v21.1.0

当記事はインストールされているものとして進めていきます。続いてはnpmがインストールされているかの確認をします。
npm とはNode Package Managerの略でReactにおいてはReact本体とその周辺の拡張ツールをインストールや管理をするために使います。

npm -v

正常にインストールされていれば以下のようにインストールされているバージョンが表示されるはずです。

➜  ~ npm -v                                                                      
10.4.0

Reactのインストール

さてそれではReactをインストールしていきます。
任意のディレクトリで以下のコマンドを実行してください
ディレクトリを作成しながらそこにインストールするには1行目のコマンドを、
既に作成したディレクトリの中にインストールするには3行目のコマンドを実行です

npx create-react-app <インストールするディレクトリ名>
// 作成済みディレクトリにいて、そこにインストールする場合
npx create-react-app ./

上記コマンドを実行すると本当に良い？大丈夫？って聞かれるので y を入力してエンターするとインストールがはじまります。

Ok to proceed? (y) y (Enter)

インストールが完了したら、そのディレクトリに移動してコマンドを実行します。
ここでは「sample-react-app」というディレクトリにインストールしたと仮定します。

Reactの起動

// インストールしたディレクトリに移動
cd sample-react-app
// 以下のコマンドでReactを起動します
npm start

その後ブラウザのURLにlocalhost:3000と入力してアクセスすると以下の起動画面が表示されます。
これでReactの環境構築・初回起動が完了です。

こんな画面が出たら成功　グッジョブ。

簡単ですよね。
私も驚きました。簡単すぎて。
でもここからが大変なんですよねきっと。
何はともあれReactの開発環境構築、お疲れ様でした。

(2),(3)と書き続けられるように頑張っていきます。
それでは最後まで読んでいただきありがとうございました。