分類:React

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

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

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

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

React Tech Stack

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

 

ReactJs:

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

React之於元件、元件之於類別的使用方法初探,可見:http://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節點。

更多好文:https://blog.risingstack.com/the-react-way-getting-started-tutorial/

進一步:JSX語法糖

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

一般JavaScript語法
1-1
JSX語法
2-1

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

更多好文:https://blog.techbridge.cc/2016/04/21/react-jsx-introduction/ 、https://reactjs.org/docs/jsx-in-depth.html

強化React

React-Flux

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

React Flux

更多好文:http://eddychang.me/blog/javascript/94-flux-concept.html

React-Redux

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

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

React Redux

更多的Redux:https://noootown.gitbooks.io/deeperience-react-native-boilerplate/content/Redux/Redux%20&%20React.html

 

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 的程式碼 (壓縮)

更多好文:https://rhadow.github.io/2015/03/23/webpackIntro/

 

Babel

Babel是一個java script的Transpiler。Babel 轉換ES6的代碼到ES5
我們稱這個過程叫作transpiling。我們享用es6的功能與好處,但至今仍必須確保僅支援es5的瀏覽器仍然能運作。
Babel的另一個重要工作就是去瞭解JSX。Babel會編譯我們的jsx成ES5的js。讓我們的瀏覽器可以直譯與執行。

 

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

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

 

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

01-02 React 套件發布 & 套件刪除

01-02 React 套件發布 & 套件刪除

套件發布

Step1 帳號註冊

  • 要先在npm官方註冊一組帳號

  • 資料填寫

  • 信箱認證

這時候就完成了npm帳號的註冊

 

Step2 套件發布

  • 在終端機登入剛剛註冊的帳號

注意:密碼為隱碼,並非無法輸入

出現上面資訊代表登入成功

 

  • 發布前注意事項

主要資訊會package.json這檔案配置

private:一定要是false,否則npm會拒絕發布

name:不能有大寫符號‚不能用.或是_開頭‚必須要小於214個字符

version:版本號碼,不可以重複發布同樣的版本號碼

 

  • 套件發布

終端機指令:npm publish

發布完成後可以在npm官方網站檢視

搜尋也可以搜尋出發布的套件

 

套件刪除

  • 必須在發布後24小時內刪除,否則必須聯繫 support@npmjs.com 協助
  • 與發佈時一樣,必須先透過終端機登入
  • npm unpublish <scope>@<version>

01-React開發環境建置

01-React開發環境建置

  • 安裝編輯器

    • 編輯器選擇(WebStorm、Sublime Text、Atom、Visual Studio Code、TextMate、Coda…)

1:檔案總管/搜尋/版控/debug/擴充工具

2:目錄

3:頁籤

4:程式

5:面板區

主要都在終端機這介面操作,輸入npm指令

ex:要將專案在其他port上執行

  • 安裝node.js

  • 樣版文件(boilerplate)

    • 別人已經配置好的專案樣板,可以提供開發專案的基本所需的模組

 

ant-design-pro

zuiidea(admin/admin)

 我們選擇 antd這個UI套件做為開發框架.套件下載

 

第一次開啟資料夾必須執行npm指令npm i 或是yarn install,把node_model載入

Step1

Step2

Step3

安裝完後輸入npm start / yarn run 編譯執行

預設port 8000 ,如果要更改執行的port可執行下列指令

執行後就可以看到專案最初的樣貌

最基本的環境建置就完成了

參考資料:

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

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

環境需求:
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 badminton_fun_react@1.1.0~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
1.
2.
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,正式環境建議使用其他更合適的策略
 未完待續
WP Facebook Auto Publish Powered By : XYZScripts.com