Reactのスタート


reactの開発環境を構築する。

## 関連記事

* Reactのスタート
* [Reactのプロジェクト](http://qiita.com/park-jh/items/488d43e2d0b87991207e)
* [Reactで挨拶](http://qiita.com/park-jh/items/bffaec5d05a96850e91b)
* [ReactでTrelloみたいなToDoリスト＜1＞ props](http://qiita.com/park-jh/items/f3f6162cee982eb9e6f3)
* [ReactでTrelloみたいなToDoリスト＜2＞ state](http://qiita.com/park-jh/items/0b71fd9c7e6cc8cbe844)
* [ReactでTrelloみたいなToDoリスト＜3＞ prop-types](http://qiita.com/park-jh/items/6a8eac233e3f3ae61f32)
* [ReactでTrelloみたいなToDoリスト＜4＞ immutability-helper](http://qiita.com/park-jh/items/6166434f80bc186f8c77)

## 始まる前に

ホームディレクトリに下記のようなディレクトリやファイルはないだろうか？

```sh
cd ~

node_modules
package.json
yarn.lock
```

あるとしたら、間違った方法で、nodeの開発を行ってると言える。
またはパッケージをグローバルで設置しようとしたのに、-gオプションを忘れてしまい、そのまま気付かずに放置したとも言える。
上記のディレクトリやファイルはnodeのプロジェクトの配下にあるべきのものだ。

ここではnvm ▶︎ node（npm） ▶︎ yarn ▶︎ create-react-app 順で開発環境を構築する方法を紹介する。
nvmからyarnまでの手順はreactの開発環境だけではなく他のフロントエンド開発環境にも通用される。
rubyもそうだが、nodeの場合も活発に開発されていてバージョンアップが頻繁に行われている。
バージョン別に使えるライブラリが決まってることも多くなっている。
もはやrubyやnodeのバージョン別管理なしでは、いろんなニーズに対応が難しいのだ。

nvmとnode、npmやyarnを適材適所に正しく使うのが重要になる。

## nvm(node version manager)

* nodeのバージョンを管理
* rubyのrbenvやrvmみたいなもの

## npm(node package manager)

* nodeで使うjavascriptのpackageを管理
* rubyのbundlerやpythonのpipみたいなもの

## yarn

* npmと同様
* facebookが開発
* npmで設置できるpackageはyarnでも設置が可能
* npmがmac portであれば、yarnがhomebrewみたいな感じ

## create-react-app

* facebookが開発
* reactプロジェクトを生成してくれるツール

## 設置

macOSではhomebrewという立派なパッケージマネージャーが存在する。
googleのchromeやmicrosoftのskypeなどgui系のアプリもhomebrewで設置ができる。
brew info ＜パッケージ名＞を実行すると、設置手順が表示されるから参考にしよう。

### nvm（macOS）

```sh
% brew info nvm
nvm: stable 0.33.2, HEAD
Manage multiple Node.js versions
https://github.com/creationix/nvm
/usr/local/Cellar/nvm/0.33.1 (7 files, 122.4KB) *
  Built from source on 2017-03-28 at 17:55:15
  From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/nvm.rb
  ==> Caveats
  Please note that upstream has asked us to make explicit managing
  nvm via Homebrew is unsupported by them and you should check any
  problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.zshrc or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.33.2 will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
```

* ホームディレクトリの配下に.nvmを生成する。

```sh
  mkdir ~/.nvm
```

* シェルの設定ファイルに環境変数を追加する。

```sh
  vi ~/.zshrc #bashの場合は、~/.bash_profile

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"
```

念のためシェルをbashに切り替えてbrew info nvmで確認してみた。

```sh
$ brew info nvm
nvm: stable 0.33.2, HEAD
Manage multiple Node.js versions
https://github.com/creationix/nvm
/usr/local/Cellar/nvm/0.33.1 (7 files, 122.4KB) *
  Built from source on 2017-03-28 at 17:55:15
  From: https://github.com/Homebrew/homebrew-core/blob/master/Formula/nvm.rb
  ==> Caveats
  Please note that upstream has asked us to make explicit managing
  nvm via Homebrew is unsupported by them and you should check any
  problems against the standard nvm install method prior to reporting.

You should create NVM's working directory if it doesn't exist:

  mkdir ~/.nvm

Add the following to ~/.bash_profile or your desired shell
configuration file:

  export NVM_DIR="$HOME/.nvm"
    . "/usr/local/opt/nvm/nvm.sh"

You can set $NVM_DIR to any location, but leaving it unchanged from
/usr/local/Cellar/nvm/0.33.2 will destroy any nvm-installed Node installations
upon upgrade/reinstall.

Type `nvm help` for further information.

Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
```

使っているシェルに合わせてメッセージが表示されてる。
~/.zshrcが~/.bash_profileに変えただけで手順は同じだ。
シェルの設定ファイルを修正したら、リロードする。

```sh
source ~/.zshrc # source ~/.bash_profile
```

### nvm（Linux）

redhat系とdebian系のディストリビューションもパッケージマネージャーを提供している。
しかし、nvmは関連パッケージを提供してない。
代わりにインストールスクリプトを提供しているので、これを使う。
curlやwgetを用いてインストールスクリプトをダウンロードし実行する。
curlやwgetコマンドが存在しない場合はyumやapt-getなどで設置しよう。

* curlを使う場合

```vim
  curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
```

* wgetを使う場合

```vim
  wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh | bash
```

使ってるシェルの設定ファイルに環境変数を追加する。

```sh
  vi ~/.zshrc #bashの場合は、~/.bash_profile

  export NVM_DIR="$HOME/.nvm"
  [ -s "$NVM_DIR/nvm.sh"  ] && . "$NVM_DIR/nvm.sh" # This loads nvm
```

### nvmの使用法

| コマンド                         | 説明                             |
| ---                              | ---                              |
| nvm ls                           | 設置されてるnodeの一覧を表示     |
| nvm ls-remote                    | 設置可能なnodeの一覧を表示       |
| nvm use ＜nodeバージョン＞       | 指定したnodeバージョンに切り替え |
| nvm install ＜nodeバージョン＞   | 指定したnodeバージョンを設置     |
| nvm uninstall ＜nodeバージョン＞ | 指定したnodeバージョンを削除     |

使用例）nvm use 8.1.1

### node

最新バージョンのnodeを設置する。（この記事を作成しているときは v8.1.1が最新）

```sh
# 8.1.1で設置
nvm install 8.1.1

# 設置されたnodeの一覧を確認
nvm ls

# 設置されたnodeのバージョンを確認
node -v
```

### npm

__npmはnvmで設置したnodeにbundleされてるから別途に設置する必要はない。__
homebrewでもパッケージとして提供しているが、設置しないように注意を払う必要がある。
次に説明するyarnの場合も同じだ。

```sh
which npm
~/.nvm/versions/node/v8.1.1/bin/npm
```

### yarn

yarnの公式サイトではhomebrewを用いて設置しているが、npmから提供しているパッケージに対してはnpmで設置したほうがいい。
nvmを使わないならともかくnvmを使うならnodeのバージョン別にパッケージを管理したほうがいいのだ。
同じバージョンのnode環境で共通的に使えるパッケージに関してはグローバルで設置しよう。

```sh
# グローバルでyarnを設置
npm install -g yarn

# 設置したyarnを確認
npm ls -g --depth=0
```

### create-react-app

npmでも設置できるが、ここではyarnで設置する。

```sh
yarn global add create-react-app
yarn global ls
yarn global v0.24.5
warning No license field
info "create-react-app@1.3.1" has binaries:
   - create-react-app
info "phantomjs-prebuilt@2.1.14" has binaries:
   - phantomjs
info "pushstate-server@3.0.0" has binaries:
   - pushstate-server
✨  Done in 1.36s.
```

ここまですると、主に使うコマンドはこうなる。

```sh
which node
~/.nvm/versions/node/v8.1.1/bin/node
which npm
~/.nvm/versions/node/v8.1.1/bin/npm
which yarn
~/.nvm/versions/node/v8.1.1/bin/yarn
which create-react-app
~/.nvm/versions/node/v8.1.1/bin/create-react-app
```

これで、一つのnodeのバージョンに従属されたグローバルな開発環境が構築された。
次は、create-react-appでプロジェクトを生成してみよう。

## 参考

* https://github.com/creationix/nvm
* https://github.com/npm/npm
* https://yarnpkg.com/en/docs/install
* https://yarnpkg.com/en/docs/usage
* https://github.com/facebookincubator/create-react-app