React.js (1) - 環境建置與編譯

以下筆記關於 React.js 開發方式與環境建置設定 ( > React.js v.15)。

React.js 開發方式

React.js 的開發方式，主要是開發於單頁 SPA 的應用程式，次要可以利用 React Router 來切分不同頁面的應用程式，開發時將會直接在 react-app 的專案目錄下開發，等到開發完， 再編譯輸出成 Production 環境應用程式 (網頁資料夾) ，然後就可以使用，也就是只專注於開發前端應用程式。

React.js 環境建置

後續筆記再來寫關於如何將現有專案導入 React.js ，先來看看 React.js 基礎建置步驟:

1.  安裝 create-react-app 這個套件，這是 React.js 官方寫的，讓開發者比較迅速可以直接建置一個模板。
• 安裝方式:
• yarn install -g create-react-app 或 npm install -g create-react-app
2. 用 create-react-app 建置一個專案模板，然後跑起來。
• create-react-app [專案名稱]
• cd 進入專案資料夾
• yarn start 或 npm start ，就會啟動伺服器，自動偵測檔案修改，自動編譯。
3. 模板開發 (./src, ./public)
4. 編譯輸出專案成網站
• yarn build 或 npm build

建議過程都使用 yarn, 因為 npm 真的是夭壽慢。

React.js 使用編譯後&建置後的檔案

yarn build 或 npm build 之後，直接到 ./build 資料夾底下，開啟伺服器就可以了。


Reference:
http://ithelp.ithome.com.tw/articles/10184606
http://ithelp.ithome.com.tw/articles/10185954
https://babeljs.io/repl/#?babili=false&evaluate=true&lineWrap=false&presets=es2015%2Creact%2Cstage-2&targets=&browsers=&builtIns=false&debug=false&code_lz=G4QwTgBAJiAuIQLwQDwAsCMA-AEgUwBsCB7CAdWLAKhQHpMsg
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
http://blog.techbridge.cc/2016/07/30/react-dev-enviroment-webpack-browserify/
https://facebook.github.io/react/docs/installation.html#creating-a-new-application
https://facebook.github.io/react/tutorial/tutorial.html