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