React 逐步採用
不知道你是否和我一樣，斷斷續續學幾年的 React，總是無法順利把 React 加入到現有的 jQuery 網站中，學 jQuery 時很快樂，需要什麼功能時只需要在 script 標籤裡信手捻來 js 檔案就能快速使用，怎麼到了 React 就完全走鐘？非得使用 NodeJS 編譯才可以？React 起手式就是 create-react-app？這其中一定有什麼誤會，帶你來看看官方說法：
React 在剛推出的時候就容許被逐步採用，你可以按自己所需可多可少的採用 React。 或許你只想在現存的網頁上增加少量的互動性。採用 React component 會是個非常好的選擇。 -- React 官方手冊
按照官網裡的步驟練習結束，就如上面所說一樣，可以很順利的把 React 加入不需 NodeJS 編譯的傳統網站裡。
造成網頁變慢的元兇
會學習到可選的 JSX，JSX 很有意思，可以在 JS 裡安插類 HTML 標籤，從【逐步採用】學習到【可選：嘗試 React 與 JSX】的最後一段結論：
這種方式最適合用來學習和建立簡單的示範。然而，它會令你的網頁變慢，而且並不適合發佈到線上環境。 -- React 官方手冊：快速嘗試 JSX 章節
之所以會令你的網頁變慢，是因為它是載入 babel.js 後在網頁執行時才編譯 JS 裡的 JSX 標籤內容，每次都要花時間編譯，網頁自然快不了。
原來網頁變慢是因為動態編譯 JSX，而不是 React 慢。
JSX 最佳用法就是預先編譯，但
官方的教學在此之後就是利用 NodeJS 把 babel 安裝到現有的 WebPack 專案中，再編譯 JSX 內容成為標準 JS 內容，最後才把編譯後的成品上傳到網站執行。
等等，這樣就不是逐步採用 React 了，要加入 WebPack 就等於是大改現有網站啦！
小結：要逐步採用 React 就不能使用 JSX
原有網站在沒有 WebPack 加持下，要逐步採用 React 勢必不能使用 JSX，因使用 Babel 動態轉換 JSX 的效率不佳。
結論就是：逐步採用 React 下又不要使用 NodeJS 編譯網站，React.createElement 你只能用它了。 😁
逐步採用 React 下的難題：外掛元件
逐步採用 React 雖然可以限縮自己要學習的內容，比如我只要學 ES6 + React.State + React.Props 等，只要會 CSS，要刻什麼都很簡單。
但外掛元件呢？
我的現有網站使用了大量的 EasyUI 和 DevExtreme 元件，這些元件僅提供 NodeJS 下載安裝，並沒有發佈編譯後可使用的 JS 檔案。
解決方案就只好在 React class 裡使用 jQuery 操作外掛元件？
這叫 React 入門到放棄。
所幸的是，在 DevExpress 官網裡有個叫【DevExtreme Tickets】的技術小本本，它記錄許多過往使用者所提出的技術問題和解決方案，其中一個主題是：Have demo about devextreme-react without npm?
DevExtreme 官方提出【提取+橋接】的概念。撇開現有網站，另開【Webpack-React-DevExtreme】專案，使用 WebPack 提取所需的元件，如 dxButton 等，再利用 NodeJS 編譯，把提取並編譯過的 JS 檔放入現有網站，如此就能在逐步採用 React 的場合下又能享受外掛元件的開發便利性。
而外掛元件則是存放到 DOM 的 window 裡，範例程式碼如下：
DevExtreme 提取 JS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20 | import * as React from "react";
import { Button } from "devextreme-react/button";
export class ButtonExample extends React.Component {
// <Button icon="plus" text="Click me"/>
constructor(props) {
super(props);
}
render() {
return (
<Button {...this.props} />
);
}
}
const MyLib = {
ButtonExample
}
export default MyLib
|
逐步採用 React 專案呼叫編譯後的 DevExtreme 元件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 | <!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.common.css' />
<link rel='stylesheet' type='text/css' href='https://cdn3.devexpress.com/jslib/18.1.3/css/dx.material.blue.light.css' />
<title>DevExtreme with webpack and React example</title>
</head>
<body>
<div class="container">
<h1>DevExtreme with webpack and React example</h1>
<div id="app"></div>
<div id="app2"></div>
</div>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="js/app/bundle.js"></script>
<script>
const e = React.createElement
ReactDOM.render(e(window.MyLib.ButtonExample, { icon:"plus",text:"Click me"}, null), document.getElementById("app2"))
</script>
</body>
</html>
|
至於 Webpack-React-DevExtreme 原始碼，你可以在上述的票證裡找到。
結論時間
愛用 jQuery 是我個人的選擇，你也可以使用單純的 Vanilla JS，端看你的場合和上手程度來使用。
初學 React 最怕的就是在環境上的摸索上花很多時間，在不使用 npm、webpack 甚至是 Babel，現在我可以專注在學習 React 的設計上，並且和現有 HTML / JavaScript 專案進行互動，做中學所得到的回饋是最直接的。
官方不建議採用【逐步使用 React】？官方是建議使用 NPM Bundler，官方有說明建議原因，和相關資源也比較多，但有關於官方不建議【逐步使用 React】？我官方網站翻了翻，沒找到，有找到的期待你分享這類的相關資料。
React 裡要不要用 jQuery 是另一個問題，React 元件裡我是盡量用相容性比較高的 ES5/6 標準，至於 IE，我的環境不會遇到它，忽略也無仿。
在逐步採用 React 又要使用外掛元件，不再是魚和熊掌的問題，使用一個簡單 WebPack 專案 + 一次編譯，就能把所需的外掛元件放到 window 中，完全滿足「我全都要」的需求，實在是太棒啦！
如果有其它的外掛元件，我想也可以參照此方法把外掛元件產出。
底下是使用 Vanilla JS + React 使用 DevExtreme 小部件的範例。
和你分享 😉
SEE ALSO
