はじめに

初めてReactのアプリケーションを作成してみたので、その手順を解説します。

前提条件

Mac OS
VSCode

前提知識

create-react-app・・・Reactの公式が発表しているreactの環境構築を簡単に行うためのツール
Node.js・・・サーバー環境で動くJavaScript(手元のPCがサーバーとなるため、そこでJavaScriptを動かすために必要となるもの)
npm・・・Node.jsで必要になるパッケージマネージャー("N"ode.jsの"パ"ッケージ"マ"ネージャーの頭文字でnpm)
homebrew・・・MacOSのパッケージ管理ツール
nodebrew・・・nodeのバージョン管理ツール

各種インストール

1.Homebrewインストール

①Homebrew公式サイトを開く

Homebrew公式サイト：https://brew.sh/

②下記のコマンドをターミナルに入力する

→下記のような文字が出力されていればOK

③「Return」か「Enter」を押下する

→ターミナルに大量の文章が出力されます。最後の方に「Installation successful!」と出力されていれば問題なくインストールできています。
　　※出ていなければスペルミスしていないか確かめてください。それも問題なければエラーを解読してググってください。

④ターミナルにbrew -v(インストールされているHomebrewのバージョンを確認するコマンド)を入力する

　→インストールされているHomebrewのバージョンが出力されていることを確認します。

2.Nodebrewインストール

①ターミナルにbrew install nodebrew(Homebrewでnodebrewをインストールするためのコマンド)を入力する

②ターミナルにnodebrew -v(インストールされているnodebrewのバージョンを確認するコマンド)を入力する

　→インストールされているnodebrewのバージョンが出力されていることを確認します。

3.Nodeのインストール

①ターミナルにnodebrew ls-remote(インストールできるNode.jsの一覧を表示)を入力する

※このような出力になっていない(warningが出ている場合)はターミナルにnodebrew setupと入力する
　

②ターミナルにnodebrew install-binary stable(バグが無くて安定したのNode.jsのバージョンをインストールするためのコマンド)を入力する

③ターミナルにnodebrew ls(インストールされているNode.jsのバージョン一覧を表示するコマンド)を入力する

④ターミナルにnodebrew use バージョン名(Node.jsのどのバージョンを使うか指定するためのコマンド)を入力する

⑤ターミナルにnodebrew ls(インストールされているNode.jsのバージョン一覧を表示するコマンド)を入力する

　→currentが書き換わっていることを確認する

4.Nodeの環境パスを通す

①ターミナルにecho $SHELL（何のシェルを使っているかを確認するコマンド）を入力する

　→dashが入った文言が出力された場合は、別のコマンドを入力する必要があるため、ここからは別のサイトを見て進めて見てください。（Node　環境パス　bashで検索すれば出ると思います。）

②ターミナルにecho 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile（環境パスを通すためのコマンド）を入力する

③ターミナルを再起動する

④ターミナルにnode -vとnpm -vを入力し、Node.jsは10．１６以上、npmは５．６以上であることを確認する

⑤ターミナルにｃｄ　○○で開発を行うディレクトリへ移動する

⑥ターミナルにnpx create-react-app フォルダ名（ネットワーク上にあるcreate-react-appを実行するコマンド）を入力する

５.Reactの環境が構築されているか確認する

①使っているエディターで生成したフォルダを開く

②ターミナルにnpm startを入力する

③Reactの初期画面が開いていることを確認する

参考資料

react公式サイト
https://ja.legacy.reactjs.org/docs/create-a-new-react-app.html

create-react-appで環境構築
https://youtu.be/Ym4If5W9SS0?si=vSMdCGv4ewi-vcME

さいごに

自宅のPCでReactを使えるようにするために環境構築してみました。特に問題なく構築できたため、皆さんも参考資料のサイトを見ながら環境構築してみてください。