2017年7月6日 星期四

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



沒有留言:

張貼留言

© ERIC RILEY , 自由無須告知轉貼
Background Japanese Sayagata by Olga Libby