手機也能上課
1/6
初學(xué)者模板
使用 React 開發(fā)網(wǎng)頁時，我們需要使用到 React 提供的兩個 JavaScript 包，分別是 react.js 和 react-dom.js：
- react.js：提供 React 的頂級 API，是 React 的核心庫，其核心思想是虛擬DOM（Virtual DOM）；
- react-dom.js：提供針對 DOM 操作的相關(guān) API；
值得注意的是：react-dom.js 是基于 react.js 的，因此頁面中需要保證 react.js 先加載！
另外，React 推薦開發(fā)者使用特殊的 JSX 語法來編寫 UI 代碼，對于初學(xué)者來講，嘗試 JSX 最快的方法是在頁面中引入 babel-standalone.js 包。將以上 JavaScript 包整合在一起，可得到以下這個初學(xué)者頁面模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React 的初學(xué)者模板</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script type="text/babel">
// 可以在這個 script 標(biāo)簽里使用 JSX 語法
</script>
</body>
</html>說明：模板中引入的 JavaScript 文件均來自 Staticfile CDN 提供的在線文件，你可以將它們下載到本地使用，當(dāng)然，它們也支持 npm 下載，前提是你的系統(tǒng)支持 Node.js。
為什么說上述模板是初學(xué)者模板呢？
- 模板中引入的是 React 提供的 development版本，它包含了完整的警告和調(diào)試模式，有助于初學(xué)者從一開始就遵循 React 約定好的開發(fā)規(guī)范；
- 細心的小伙伴可能已經(jīng)發(fā)現(xiàn)了，模板中的最后一個 script 標(biāo)簽指定了 type 屬性為 text/babel，這是因為 React 推薦使用的 JSX 語法無法被瀏覽器內(nèi)置的 JavaScript 引擎解析，需要使用 Babel 對其進行預(yù)編譯，所以凡是使用了 JSX 語法的 script 標(biāo)簽都要加上 type = "text/babel"。
與以上兩點相對應(yīng)，你需要了解的是：
- React 提供的 development 版本僅適用于開發(fā)環(huán)境，不適合生產(chǎn)環(huán)境，也就是說，在項目上線時，需要使用壓縮優(yōu)化后的 production.min.js版本；
- 通過引入 babel-standalone.js 來編譯 JSX 效率是非常低的，因為基于這種方式的編譯過程完全運行在瀏覽器端，瀏覽器不僅要加載 babelstandalone.js 文件，還要借助此文件去編譯 JSX，整個過程會比較耗時。所以在實際開發(fā)中，我們會在項目上線前先將 JSX 代碼編譯為 JS 代碼，減輕瀏覽器的負擔(dān)，從而提高用戶體驗！