macで1からReactの環境構築をするのだ


Mac book proを購入したので、
1からの環境構築をしてみました。

備忘録を兼ねて、書きます。
参考になれば幸いです。


##Home brew のインストール

ターミナルを開き、[公式サイト](https://brew.sh/index_ja.html)にあるスクリプトをそのままコピペ。

```shell-session:terminal
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
==> This script will install:
/usr/local/bin/brew
/usr/local/share/doc/homebrew
/usr/local/share/man/man1/brew.1
/usr/local/share/zsh/site-functions/_brew
/usr/local/etc/bash_completion.d/brew
/usr/local/Homebrew
==> The following new directories will be created:
/usr/local/Cellar
/usr/local/Homebrew
/usr/local/Frameworks
/usr/local/bin
/usr/local/etc
/usr/local/include
/usr/local/lib
/usr/local/opt
/usr/local/sbin
/usr/local/share
/usr/local/share/zsh
/usr/local/share/zsh/site-functions
/usr/local/var
```
と、こんな感じでバンバン進んでいく。
途中でエンターキーと、パスワードの入力が要求されるので、入力する。

五分〜六分くらい待って、インストール完了

異常がないか確認する。

```shell-session:terminal
$ brew doctor
Your system is ready to brew.
```

エラーなし。
優秀。

##nodebrewのインストール

次に、
nodebrew なるものをインストールする。
node.jsのバージョン管理とか、楽になるらしい。

```shell-session:terminal
$ brew install nodebrew
Updating Homebrew...
==> Downloading https://github.com/hokaccha/nodebrew/archive/v0.9.7.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v0.9.7
######################################################################## 100.0%
==> Caveats
You need to manually run setup_dirs to create directories required by nodebrew:
  /usr/local/opt/nodebrew/bin/nodebrew setup_dirs

Add path:
  export PATH=$HOME/.nodebrew/current/bin:$PATH

To use Homebrew's directories rather than ~/.nodebrew add to your profile:
  export NODEBREW_ROOT=/usr/local/var/nodebrew

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

zsh completions have been installed to:
  /usr/local/share/zsh/site-functions
==> Summary
🍺  /usr/local/Cellar/nodebrew/0.9.7: 8 files, 38.2KB, built in 5 seconds
```

簡単。
ここで、環境変数を設定しなきゃいけない。
上で追加してねと言われたPATHを追加。

```shell-session:terminal
$ export PATH=$HOME/.nodebrew/current/bin:$PATH
$ export NODEBREW_ROOT=/usr/local/var/nodebrew
```

そしてパスを通すのだけれど、ファイルがないと言われた。

```shell-session:terminal
$ source /.bash_profile
-bash: /.bash_profile: No such file or directory
```


ないなら作れば良い。ということでファイル作成。

```shell-session:terminal
$ sudo vi .bash_profile
```
パスワードを要求されるので、入力する。
すると、ファイルが開くので、『:wq』（ファイルを保存して終了という意味のvimコマンド）をうちこんでenterキーをおす。

そして、再度パスを通してみる。

```shell-session:terminal
$ source /.bash_profile
```
これで、パスの設定は完了。※注意１


次に、セットアップ。

```shell-session:terminal
$ nodebrew setup
Fetching nodebrew...
Installed nodebrew in $HOME/.nodebrew

========================================
Export a path to nodebrew:

export PATH=$HOME/.nodebrew/current/bin:$PATH
========================================
```

##node.jsなどのインストール
最新のnode.jsをインストールする。

```shell-session:terminal
$ nodebrew install-binary latest
Fetching: https://nodejs.org/dist/v8.5.0/node-v8.5.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully
```

成功したらしい。

インストールしたnode.jsのバージョンを確かめて

```shell-session:terminal
$ nodebrew ls
v8.5.0

current: none
```

そのバージョンを使うよう設定する。
ここでは、自分のターミナルで表示されたバージョンを指定すれば良い。
僕がやった時は、v8.5.0であった。

```shell-session:terminal
$ nodebrew use v8.5.0
use v8.5.0
```

一応、ちゃんと設定ができているか確認。

```shell-session:terminal
$ node -v
v8.5.0
```

npmも自動で入ってるらしいので、確認。

```shell-session:terminal
$ npm -v
5.3.0
```

入っていた。よろしい。

##Reactの便利なコマンドを使えるようにする

reactが使えるように設定する。

```shell-session:terminal
$ npm install -g create-react-app
/Users/yugo/.nodebrew/node/v8.5.0/bin/create-react-app -> /Users/yugo/.nodebrew/node/v8.5.0/lib/node_modules/create-react-app/index.js
+ create-react-app@1.4.0
added 104 packages in 10.515s
```

良いらしい。

やっとこさ、
アプリを作成してみる。
アプリ名はなんでも良い。ここでは"new_world"

```shell-session:terminal
$ create-react-app new_world

Creating a new React app in /Users/[ユーザー名]/new_world.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...


> fsevents@1.1.2 install /Users/[ユーザー名]/new_world/node_modules/fsevents
> node install

[fsevents] Success: "/Users/[ユーザー名]/new_world/node_modules/fsevents/lib/binding/Release/node-v57-darwin-x64/fse.node" already installed
Pass --update-binary to reinstall or --build-from-source to recompile

> uglifyjs-webpack-plugin@0.4.6 postinstall /Users/[ユーザー名]/new_world/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js

+ react-scripts@1.0.13
+ react-dom@15.6.1
+ react@15.6.1
added 1237 packages in 105.505s

Success! Created new_world at /Users/[ユーザー名]/new_world
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd new_world
  npm start

Happy hacking!
```


行けた！
あとは、アプリのディレクトリに移動して起動するだけ。

```shell-session:teminal
$cd new_world 
$npm start 
```

すると、ブラウザが起動して成功！
サーバを止めたい場合は、ctrl+cで可能。


結構簡単にいけました〜！
初めてmacを使っているのですが、環境構築の手間が窓に比べるととんでもなく楽ですね。
これは開発捗るわ。。。


※注意１
ここで環境変数を設定しても、ターミナルを再起動すると、環境変数がなくなっていることがある。（というか、普通無くなる）
なので、自分で直接.bash_profileのの中に環境変数などを設定しておく必要がある。
 
```shell-session:terminal
$ vi .bash_profile
```
でファイルを開いた後、『i』を押して編集モードにしてから、

```
PATH=$HOME/.nodebrew/current/bin:$PATH
export PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew
```
と書き足して保存。
そうすると、ターミナルを再起動しても、npmなどのコマンドが使える。