[1行で完了]最速でReact環境構築

※自分のアウトプット用(メモ)です

結論だけ知りたい人用

1行のコマンドでReactの環境構築を完了する。
[条件]
1.Node.js 8.10以上
2.npm 5.6以上

$ npx create-react-app プロジェクト名

順番通り説明していきます。

必要なパッケージのインストール方法

1. brewをインストール

Macのパッケージ管理システムであるbrewをインストール。
brew公式サイト

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

2. nodebrewをbrewでインストール

nodeのバージョン管理ができるnodebrewをインストール。
（brewでインストールするので先にbrewをインストールした）。

$ brew install nodebrew

3. Node.jsをnodebrewを使ってインストール

Node.jsはnodebrewで管理した方が使いやすいと思います。他のバージョンに移るの簡単ですし、普通にインストールすると削除するのに手間なんですよね...
ほとんどの場合、安定版をインストールしておけば問題ないと思います。

// リモートにあるインストールできるNode.jsの一覧表示
$ nodebrew ls-remote

// 安定版をローカル(自分のMac)にインストール
$ nodebrew install stable

// ローカルにインストールされている`Node.js`のバージョンを一覧表示
$ nodebrew ls

// インストールしたバージョンの`Node.js`を選択する
$ nodebrew use 使用したいバージョン番号

4. Node.jsのパスを通す

// "~/.bash_profile"にパスを追記する(bashの場合)
$ echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.bash_profile

// ターミナルを再起動して反映
// または以下を実行して反映
$ source ~/.bash_profile

5. nodeとnpmが使用可能か確認

Node.jsをインストールした時点でnpm(node package manager)もインストールされているので、うまくいっていればこの時点で使用可能になっているはずです。

// Node.js
$ node -v

// npm
$ npm -v

これで準備は整いました。

create-react-appでReactの環境構築

任意の場所で以下のコマンドを叩いてください。
npxコマンドを簡潔に説明すると、パッケージをローカルにインストールすることなく実行できるコマンドです。
環境を汚染しないので手軽に実行して見たいときに便利です。
詳細はこちら。

$npx create-react-app プロジェクト名

これでカレントディレクトリにreactのプロジェクトが作成されました。
以下のコマンドでブラウザ表示します。

$ npm start

お疲れ様でした。