1. spice

    Posted

    spice
Changes in title
+macで1からReactの環境構築をするのだ
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,224 @@
+
+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
+```
+
+簡単。
+
+次に、セットアップ。
+
+```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を使っているのですが、環境構築の手間が窓に比べるととんでもなく楽ですね。
+これは開発捗るわ。。。