Edited at

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

More than 1 year has passed since last update.

Mac book proを購入したので、

1からの環境構築をしてみました。

備忘録を兼ねて、書きます。

参考になれば幸いです。


Home brew のインストール

ターミナルを開き、公式サイトにあるスクリプトをそのままコピペ。


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

と、こんな感じでバンバン進んでいく。

途中でエンターキーと、パスワードの入力が要求されるので、入力する。

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

異常がないか確認する。


terminal

$ brew doctor

Your system is ready to brew.

エラーなし。

優秀。


nodebrewのインストール

次に、

nodebrew なるものをインストールする。

node.jsのバージョン管理とか、楽になるらしい。


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を追加。


terminal

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

$ export NODEBREW_ROOT=/usr/local/var/nodebrew

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


terminal

$ source /.bash_profile

-bash: /.bash_profile: No such file or directory

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


terminal

$ sudo vi .bash_profile


パスワードを要求されるので、入力する。

すると、ファイルが開くので、『:wq』(ファイルを保存して終了という意味のvimコマンド)をうちこんでenterキーをおす。

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


terminal

$ source /.bash_profile


これで、パスの設定は完了。※注意1

次に、セットアップ。


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をインストールする。


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のバージョンを確かめて


terminal

$ nodebrew ls

v8.5.0

current: none


そのバージョンを使うよう設定する。

ここでは、自分のターミナルで表示されたバージョンを指定すれば良い。

僕がやった時は、v8.5.0であった。


terminal

$ nodebrew use v8.5.0

use v8.5.0

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


terminal

$ node -v

v8.5.0

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


terminal

$ npm -v

5.3.0

入っていた。よろしい。


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

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


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"


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!


行けた!

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


teminal

$cd new_world 

$npm start

すると、ブラウザが起動して成功!

サーバを止めたい場合は、ctrl+cで可能。

結構簡単にいけました〜!

初めてmacを使っているのですが、環境構築の手間が窓に比べるととんでもなく楽ですね。

これは開発捗るわ。。。

※注意1

ここで環境変数を設定しても、ターミナルを再起動すると、環境変数がなくなっていることがある。(というか、普通無くなる)

なので、自分で直接.bash_profileのの中に環境変数などを設定しておく必要がある。


terminal

$ vi .bash_profile


でファイルを開いた後、『i』を押して編集モードにしてから、

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

export PATH
export NODEBREW_ROOT=/usr/local/var/nodebrew

と書き足して保存。

そうすると、ターミナルを再起動しても、npmなどのコマンドが使える。