React Tutorial 環境建置

目標

透過 nvm 管理 node.js 版本，並安裝官方團隊出的 Create React App 來製作我們的single page website。IDE的部分則是使用 Atom ，並額外設定 ESlint 及安裝 Atom React plugin ，提高開發網頁的效率。

安裝 nvm（示範環境為OS X 10.5.5）

透過Homebrew 安裝 nvm

$brew install nvm

接著輸入下列指令使 shell 運行 nvm

$ echo "source $(brew --prefix nvm)/nvm.sh" >> .bash_profile

重新啟動終端機使設定生效

$ . ~/.bash_profile

使用nvm安裝Node.js

nvm 就是用來做 Node.js 的版本控管，試想當你新進一家公司，該公司已經用v3.5.0開發他們的官網，而在之前你開發的環境都是 v5.5.0 以上，這時候你必須透過 nvm 調整自己的開發環境至 v3.5.0 才不會出現非預期性錯誤。這時 nvm 就非常好用！

查看遠端有哪些 Node.js 的版本可以安裝

$nvm ls-remote

安裝欲安裝的版本

$nvm install <version>

node版本會放在此

$ls /usr/local/opt/nvm

查看可使用的node版本

$nvm ls

切換版本

nvm use指令只會在當前的 shell 生效

$nvm use v6.5.0

或

$nvm use --delete-prefix v6.5.0

為解決上述問題，可以將常用的版本加入 alias 中，這樣就不用每次開新的 shell 都要執行 nvm use了!

$ nvm alias default <version>

安裝create-react-app

Node.js 必須在 v4.x 以上

安裝 create-react-app

$npm install -g create-react-app

建立一個名為 myApp 的app資料夾

$create-react-app myApp

在該app資料夾下運行 app

myApp $npm start

接著就可以去 localhost:3000 看第一個demo app了！

Atom 套件： React Plugin, ESlint 安裝

React Plugin

React Plugin比較簡單，直接在 Atom 的偏好設定內安裝套件（名為 React ）即可。

ESlint

ESlint 的部分比較麻煩，除了 Atom 偏好設定內的安裝完（名為 ESlint ）外，還必須

這裏有關 ESlint 的 issue 還在解。因此這邊還是要手動增添一些設定。

在 myApp 資料夾內有個 packages.json ，加入

//...
"eslintConfig": {
    "extends": "react-app"
  }

並安裝下列套件即可

npm install -g eslint-config-react-app@0.2.1 eslint@3.5.0 babel-eslint@6.1.2 eslint-plugin-react@6.3.0 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-flowtype@2.18.1

為了讓其他協作開發者知道該app使用的相依環境，盡量使用 $npm install --save <library-name>。 --save會把相依套件寫在packages.json 的 dependencies。甚至可以更進一步使用 --save-dev 和 --save-optional 來區分套件分別隸屬於 devDependencies 還是 optionalDependencies。