React – Paul's Memo Books

00-01 關於前端開發生態圈的總整理(Base on React)

By paul | 2018-03-09 | Comments 0 Comment

有鑑於最近旁聽Front-end meeting後，發現許多套件名詞擺在一起的時候好像會迷失方向，雖然一部分知道大概功能，但有一部分套件的角色與在整體生態圈的定位仍有些陌生

因此整理以下提供一個整體性的概念

前端框架工具介紹文：https://gist.github.com/weihanglo/ccefb5107b1d60669ded1177e6f954ca#es6babel

ReactJs：

React僅僅是Web應用程式中的視圖層(View)，定義上不能算是框架，應用程式中可以將之分解成一個一個小的組件，因此你的Web站台可以是經由各種型式的元件(Component)組裝而成，當Web的問題與場景愈來愈具備挑戰性的時候，元件導向開發(Component-Driven Development)可以達成問題分解解決與並易於重用，而React的開發方法就是符合元件導向開發模式。

React之於元件、元件之於類別的使用方法初探，可見：https://paulfun.net/wordpress/?p=471

React的革命：Virtual Dom

當React的View engine要追踪模型更改並將其應用於DOM ，這個動作又稱為渲染(Rendering)，React採用了Virtual Dom的演算法

Virtual Dom是可以加快渲染速度的機制，Dom的更改以往是透過在Browser層直接操作真實網頁上的Dom，React的差異化算法是使用Tree的形式去計算，在內存中，直接建立一組假的Dom，在內存中處理Dom的效能大幅提升，React同時也會盡可能的保持Dom大部分不變，保持最小幅度的更新

關於虛擬Dom的秘密：https://conferences.oreilly.com/fluent/fluent2014/public/schedule/detail/32395
React.js Tutorial React re-render

在Server端渲染？

因為react對DOM的處理是使用假的DOM，都在內存中進行，因此更可以將此渲染工作拋到Server上。僅僅只剩下讓Browser客戶端處理事件就好

註：React呈現的HTML標記包含data-reactid屬性，這有助於React跟踪DOM節點。

進一步：JSX語法糖

JSX的特性是讓標籤更加語意，更加簡化，可以整合JavaScript，以單單組合Div包含Class定義的標籤工作，JSX讓我們可以有如使用Template一樣簡潔：

一般JavaScript語法
1-1

JSX語法

2-1

當然 JSX 並非強制使用，你也可以選擇不用，因為最終 JSX 的內容還是會轉化成 JavaScript（瀏覽器只看的懂 JavaScript）

強化React

React-Flux

React本身只是個MVC架構中的View(視圖)函式庫，沒有類似Model或Controller的角色，這個最初是由React的最早的創作小組所提出的概念性架構，雖然利用Action與Store解決了React 控制視圖的問題，但Flux發表至今並沒有太多源碼更新, 一方面被認為學習曲線高，另一方面是很妥善的設計，重用程式碼不少，因此建議參考Redux。

React Flux

React-Redux

Redux 是管理應用狀態的js庫。是單向數據流應用架構中更優雅的實現，Redux 和 React 之間無依賴關係。Redux支持 React、Angular、Ember、jQuery 甚至純 JavaScript。

相較於Flux，Redux現在發展得很好，學習資源與使用者很多，也有很多週邊的擴充或應用可用，當遇到問題時比較容易找到解答，所以Redux應該是首選。

NodeJs：

Node.js模塊系統，它擁有強大的npm套件管理機制。我們將以“Node風格”編寫我們的代碼，並引用Require我們所需的一切。React可作為一個單獨的npm package引用進來。

現在我們使用Node來管理系統的相依性（統一ES6），我們幾乎所有的解決方案都有npm可以來使用，那接下來就是選擇打包工具。

WebPack+Babel

WebPack

Webpack 是德國開發者 Tobias Koppers 開發的模組整合工具。它的核心功能如下:

可同時整合 CommonJS 和 AMD 模組
轉換 JSX, Coffee Script, TypeScript 等
分散封裝專案使用的程式碼，使載入頁面時只需載入當頁所需的程式碼以加速載入速度
整合樣式表 (css, sass, less 等)
處理圖片與字型
建置 production-ready 的程式碼 (壓縮)

Babel

Babel是一個java script的Transpiler。Babel 轉換ES6的代碼到ES5

我們稱這個過程叫作transpiling。我們享用es6的功能與好處，但至今仍必須確保僅支援es5的瀏覽器仍然能運作。

Babel的另一個重要工作就是去瞭解JSX。Babel會編譯我們的jsx成ES5的js。讓我們的瀏覽器可以直譯與執行。

整理至此，仍發現，每個環節其實都可以更深入的探討，不過對於overall的角色定位已經有了更具體的認識，因此我整理總心智圖如下(可能有誤或缺，歡迎指教)：

放大：https://paulfun.net/wordpress/wp-content/uploads/2018/03/591.png

若有新的消息或觀念上的修正，後續會再持續更新本文

React環境安裝記錄與React的首次坦誠相見

By paul | 2018-01-12 | Comments 1 comment

環境需求：

Nodejs: https://nodejs.org/download/17

nodejs是用來啟動babel與webserver

nodejs安裝後

node -v

可以用來查詢版本

v7.10.0

接著切換到範例的react-app目錄

標準的node-react app開發目錄下都會有pakcage.json

描述著相依的套件與環境的關系

package.json範例：

{
  "name": "badminton_fun_react",
  "version": "1.1.0",
  "author": "paul",
  "scripts": {
    "go": "open http://localhost:48761; npm run server",
    "e2e": "nightwatch",
    "test": "./node_modules/.bin/concurrently -k 'npm run server' 'npm run e2e'",
    "start": "npm run server",
    "server": "live-server public --host=localhost --port=48761"
  },
  "private": true,
  "devDependencies": {
    "concurrently": "^2.2.0",
    "live-server": "^1.2.0"
  },
  "dependencies": {
    "http-server": "^0.11.1"
  }
}

接著切換到package.json的同目錄下，執行

npm install

雖然看pakcage.json才幾個相依，但實際裝完，還是會有13x個套件被安裝到同層node-modules目錄

接著就啟動

npm start (yarn start)

註1：node install的時候，早上我老是遇到git的目錄問題No git binary found in $PATH #1389)

原本的相依套件寫的是 “live-server”: “git://github.com/acco/live-server.git”

這會要求你環境參數必須要有git的呼叫路徑，但我安裝了git-for-windows，也確認環境變數有設定，卻無法從powershell去透過nodejs呼叫，不知為啥

後來直接把live-server的參考變成版本號，這套就過了！

註2： node start啟動的時候，我老是會出現error，細看log，也只看的到12 info lifecycle [email protected]~start: Failed to exec start script

因此猜測是start的時候有問題，後來發現原始的start語法是 “server”: “live-server public –host=localhost –port=3000 –middleware=./disable-browser-cache.js”

把–middleware的參數拿掉就可以work了！但怎麼讓原語法正常運作，我不確定，因為這感覺是live-sever的機制，可能版本也有關系！

進入本文前：

專案目錄：

public就是我們ReactApp的程式根目錄，這我們在package.json的server start有把路徑名稱傳進去

裡面有index.html是首頁畫面

React之於元件

react app就是全部由元件(components)所組成，component，並非僅僅指的是UI的component，它們在同一個地方自我包含了markup, view logic, 甚至css

這個特性使得react component可以重覆被利用

註：react的資料流與互動性已經被嚴謹的定義。因此當元件的輸入一旦變動，框架就會自動重新刷新component。

這是react框架所保證的UI強健性(給定一組input，其相關的元件作為output，只要掛載在page上)，就會永遠一致

元件之於類別

React的元件是extends自React.Component的ES6類別

我們參考成React 的變數。

每一個extends來的compoent類別，都會有獨立方法render(), render()也是唯一component必須一定要有的方法

React框架使用這個render方法的回傳值來決定什麼要到page上

共有以下2種方式可創建React Component

render方法內，return包含的markup，這樣的用法不同於傳統的java script！

這種語法是利用了JSX(Java script eXtension syntax)。JSX是facebook所創造出來的一個標準

使用JSX可以讓我們在component的view裡面直接撰寫與html熟悉的語法，縱使不是必要的作法

但教學中還是會滿常見的

JSX

React元件最終會渲染Html到瀏覽器上，因此render()方法的職責就是描述view該如何表現

React建置app的方式是透過假的dom，通稱虛擬dom(virtual DOM)後續會再詳細描述，

React允許我們在元件的內部使用java script來描述Html。

因此jsx就是被創造出來，讓我們可以使用java script來表現html時，能更貼近html

來看看以下的差異

java script 語法

1-1

1-2

JSX格式

2-1

2-2

因此我們說，JSX就是透過java script表達的一個輕量抽象層。其易讀性改善的效益非常巨大。也降低了新進開發人員的學習曲線

Babel

Babel是一個java script的Transpiler。Babel 轉換ES6的代碼到ES5

我們稱這個過程叫作transpiling。

我們享用es6的功能與好處，但至今仍必須確保僅支援es5的瀏覽器仍然能運作。

Babel的另一個重要工作就是去瞭解JSX。Babel會編譯我們的jsx成ES5的js。讓我們的瀏覽器可以直譯與執行。

若我們要動態Babel進行transpile, 只需要告訴我們的java script runtime。我們的程式需要被Babel complie

當你的component程式都正常運作，page也正常宣告，console會show以下的訊息

You are using the in-browser Babel transformer. Be sure to precompile your scripts for production

為了快速測試，我們採用了in-browser的babel transpile，正式環境建議使用其他更合適的策略

未完待續

將你的Nodejs React Web App Docker化

By paul | 2018-01-08 | Comments 0 Comment

假設目前已選用React的框架，我試驗的這套名叫https://github.com/zuiidea/antd-admin

方案目錄結構如下：

主要react程式都放在src的目錄下

node_modules是在npm install的時候，才會把相依套件安裝在這個目錄裡面

以下步驟的目的主要是希望啟動一個node.js 的web server，將我們的react web啟動後，可以透過外部編修程式來除錯與開發

production環境，不需要另外開放目錄了，而且依正常nodejs 的production build，就也編譯好了，所以不會因為src的code異動而影響！

1.在webapp的根目錄，建立DockerFile (touch Dockerfile)

# You should always specify a full version here to ensure all of your developers
# are running the same version of Node.
FROM node:7.8.0

# Override the base log level (info).
ENV NPM_CONFIG_LOGLEVEL warn

# Install and configure `serve`.
RUN npm install -g serve
CMD serve -s build
EXPOSE 8000

# Install all dependencies of the current project.
COPY package.json /node-app/package.json
#COPY npm-shrinkwrap.json npm-shrinkwrap.json
# The -g switch installs the Express Generator globally on your machine so you can run it from anywhere.
RUN cd /node-app;npm install

# Copy all local files into the image.
COPY . /node-app

# Build for production. 正式機時，要解除註解重建images，不然會大大影響效能
# RUN cd /node-app; npm run build

2. 建立Docker Images

docker build -t react-test-docker .

3. 啟動Docker Container(註，因為沒有標記production build，所以要指定start的路徑，start後，要加上prefix參數，指定你的web app目錄)

sudo docker run -d \

           -v /mnt/nodejs-app/mesodashboard/antd-admin-dashboard/src:/node-app/src \

           -p 8000:8000 \

        –name react-test-server \

           react-test-docker \

           npm start --prefix /node-app