はじめに

久々、環境構築をしたのでまとめました。
今回はcreate-react-appを使用してreactの環境構築をしていきます
どなたかの参考になれば。

環境

まずは作業を始める段階でのバージョンです。
homebrewは入っている前提で作業を進めていきます。

名前	version	補足
MacOS	10.15	Catalina
homebrew	2.5
node.js	12.9
yarn	1.22	stable
create-react-app	3.4

以下、今回インストールする物のバージョンです。

名前	version	補足
nodebrew	1.0
node.js	14.10	stable 更新します
yarn	1.22	stable
create-react-app	3.4

nodebrewのインストール

まずhomebrewを使用して、nodebrewをインストールしていきます。
既にnode.jsが入っているので必要ないといえばないのですが、後々のことを考えてnodebrewを使用することにしました。
まずはインストール。

$ brew install nodebrew

私の場合、エラーが出ました。出なかった人はスルーしてください。
gccをインストールしないとビルド出来ないよとの事なのでインストールします。
終わったら再度nodebrewをインストールします。

Error: An exception occurred within a child process:
  CompilerSelectionError: nodebrew cannot be built with any available compilers.
Install GNU's GCC:
  brew install gcc

インストールが終了したら確認
バージョンが表示されたら成功です。

$ nodebrew --version

nodebrewがインストールされたらpathを通します。
私はCatalinaなのでzshですがbashの人は.bashrcで入力してください。
もちろんvimで直接入力しても問題ありません。

$ nodebrew setup

export...とパスが表示されるのでそれをコピーして↓のコマンドを入力
$ echo '{コピペしたやつ}' >> ~/.zshrc

次にnode.jsの安定版をインストールします。
バージョンを指定したい場合はstableの部分を指定のバージョンを書き入れましょう。
迷ったらとりあえず安定版。

$ nodebrew install-binary stable

インストールされていたら確認と指定をしていきます。

インストール出来ているか確認します
$ nodebrew list

今回はv14.10.1がインストールされていたのでこちらを使用します。
$ nodebrew use 14.10.1

nodeのバージョンを確認。14.10.1になっていればOKです
$ node -v

以上で、nodebrewとnode.jsのインストールは終了です。

react.jsの環境構築

yarnのインストール

node.jsのパッケージマネージャーであるyarnをインストールします。
こちらもhomebrewから。

$ brew install yarn

終わったら確認

$ yarn --version

react-create-app

reactはreact-create-appを使用するのが一番楽なのでyarnからこちらをインストールします。

$ yarn global add create-react-app

インストールされたら使用可能です！

$ create-react-app {名前}

まとめ

最近、自分のPCで開発をしていなかったので、なかなか長い道のりになりました。
作業を進めながら書いたので抜けはないかと思いますが、何かありましたらコメントお願いいたします！
近々react+typescriptの環境構築もするので、そちらもまとめますー！

追記

TypeScriptの設定を調べたのですが、どうやらcreate-react-appで簡単に設定出来るようです...!

$ create-react-app {アプリ名} --typescript

オプションを指定するだけで行けるらしいです...!簡単！！