More than 3 years have passed since last update.

【徹底解説】React環境構築〜 create-react-app

Last updated at 2020-10-31Posted at 2020-10-31

Reactで初めてアプリを作る方向けの、環境構築〜アプリ立ち上げまでのフローを紹介します。

0.create-react-appに必要なもの

・node 8.10 以上
・npm 5.6 以上

Homebrew とは macOS 用のパッケージマネージャーです。
Homebrew のサイト↓↓↓
https://brew.sh/index_ja

Homebrew をインストールします

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

Homebrew がインストールされていることを確認します

$ brew -v

Homebrew を使って nodebrew をインストールします

$ brew install nodebrew

nodebrew がインストールされていることを確認します

$ nodebrew -v

nodebrew を使って node をインストールします

node の安定バージョンをインストール（create-react-appに必要なバージョンをインストール）

$ nodebrew install stable

node の最新バージョンをインストールしたい方はこちら

$ nodebrew install latest

インストール可能な node のバージョンを一覧で確認することもできます（バージョンを指定したいときに）

$ nodebrew ls-remote

バージョン一覧が表示されるので、任意のバージョン番号を以下の要領で指示する。（セットする）

$ nodebrew use vX.X.X

特に要求がない場合は安定バージョンをインストールしましょう

まだ node が使える状態になっていないので使えるようにする

zshの場合

$ echo export PATH=$HOME/.nodebrew/current/bin:$PATH >> ~/.zprofile

bashの場合

echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

ターミナルを一度再起動しましょう

node がインストールされているか確認しましょう

$ node -v

node がインストールされていれば npm も自動的にインストールされています

$ npm -v

これで create-react-app を実行する準備が整いました

自分の開発ディレクトリで create-react-app を実行

$ npx create-react-app 作りたいフォルダ名

エラーが出ずに実行されればOK

お疲れ様でした。