はじめに
久々、環境構築をしたのでまとめました。
今回は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
オプションを指定するだけで行けるらしいです...!簡単！！