【React】create-react-appで初めての環境構築

# はじめに
初めて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/

#### ②下記のコマンドをターミナルに入力する
![スクリーンショット 2023-10-26 19.23.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/c9280aa9-e0b1-c85d-7dd5-377d699caab9.png)


→下記のような文字が出力されていればOK
![スクリーンショット 2023-10-08 13.43.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/a3b39fb1-e34d-ffa5-211f-572eeeb13bcc.png)

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

#### ④ターミナルにbrew -v(インストールされているHomebrewのバージョンを確認するコマンド)を入力する
　→インストールされているHomebrewのバージョンが出力されていることを確認します。


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

#### ②ターミナルにnodebrew -v(インストールされているnodebrewのバージョンを確認するコマンド)を入力する
　→インストールされているnodebrewのバージョンが出力されていることを確認します。
![スクリーンショット 2023-10-08 13.57.54.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/041ca7d2-cfdf-e079-c3bd-7682f12287ce.png)

## 3.Nodeのインストール
#### ①ターミナルにnodebrew ls-remote(インストールできるNode.jsの一覧を表示)を入力する
![スクリーンショット 2023-10-08 14.00.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/d3c87b40-6f49-e4bd-b12e-999234c40df7.png)
※このような出力になっていない(warningが出ている場合)はターミナルにnodebrew setupと入力する
　

#### ②ターミナルにnodebrew install-binary stable(バグが無くて安定したのNode.jsのバージョンをインストールするためのコマンド)を入力する
![スクリーンショット 2023-10-08 14.03.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/b684565b-d1cd-6937-bce9-af00954547a0.png)


#### ③ターミナルにnodebrew ls(インストールされているNode.jsのバージョン一覧を表示するコマンド)を入力する
![スクリーンショット 2023-10-08 14.04.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/88e11955-4e60-7d9d-8c99-7a2d97cd5754.png)


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

#### ⑤ターミナルにnodebrew ls(インストールされているNode.jsのバージョン一覧を表示するコマンド)を入力する
　→currentが書き換わっていることを確認する
![スクリーンショット 2023-10-08 14.05.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/d0451214-c74b-e064-2f27-423ae1e265ef.png)



## 4.Nodeの環境パスを通す

#### ①ターミナルにecho $SHELL（何のシェルを使っているかを確認するコマンド）を入力する
　→dashが入った文言が出力された場合は、別のコマンドを入力する必要があるため、ここからは別のサイトを見て進めて見てください。（Node　環境パス　bashで検索すれば出ると思います。）
![スクリーンショット 2023-10-08 14.09.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/058bf571-fc80-3e86-a5b4-af09fd7f8169.png)


#### ②ターミナルに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の初期画面が開いていることを確認する
![スクリーンショット 2023-10-08 17.06.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2823804/00a6b9d4-6fa8-cf0a-0e08-7003a888da6a.png)



# 参考資料
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を使えるようにするために環境構築してみました。特に問題なく構築できたため、皆さんも参考資料のサイトを見ながら環境構築してみてください。