寫在前面
React 相比於 Vue ，更注重對 JS 的掌握，Vue 把能做的都做了，只剩下最簡單的讓開發者使用，開發者需要充分記憶 Vue 的特定指令后就可很輕松很舒服地開發。相反，React 是提供了一種思路和方式，沒有過多的限制，可以讓開發者很靈活、很自由地進行開發，但要求會相對高些，需要開發者對 JS 達到幾乎精通的地步才能真正運用好 React。二者都需要掌握。
本篇博客是 React 的起手式，開啟 React 探索之路，從 React 的引入開始。
React 的引入有如下幾種方式：
1. CDN 引入
和普通的 JS 庫或框架一樣，React 也可以從 CDN 引入。
在使用 CDN 引入之前需要了解兩種類型的 JS 文件，一個是 cjs ，一個是 umd。
cjs：全稱為 CommonJS，是 Node.js 支持的模塊規范
umd：全稱為 Universal Module Definition 是統一模塊定義，是包含 Node.js 使用的 cjs 的，兼容包含瀏覽器、Node.js 的模塊規范。
新模塊規范：最新的模塊規范是使用 import 和 export 關鍵字。
因此一般在引入 React 時，會優先使用 umd 版本，可同時支持 Node.js 和瀏覽器。
React 的 CDN引入需要引入 2 個 JS 庫文件，即 react 和 react-dom，這里以 BootCDN 引入為例。
在下列的引入中也都是引入 umd 版本，並且其引入順序一定得是先引入 react ，后引入 react-dom。
1.1 react (先引入)
這里又分為 development 和 production 版本，一個是開發者版，一個是產品版，兩個都可以，產品版可能功能比開發者更全些，但占內存更多些。這里以引入 production 版本為例：
<script src="https://cdn.bootcss.com/react/16.13.1/umd/react.production.min.js"></script>
1.2 react-dom (后引入)
同上述的 react，react-dom 的引入方式類似， production 版本，記得是 umd 版本，最好版本號和 react 的一樣。
<script src="https://cdn.bootcss.com/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
1.3 查看是否成功引入 react
<script>
console.log(React);
console.log(ReactDOM);
</script>
如果能成功輸入 React 和 ReactDOM 兩個對象就是引入成功！
2. Webpack 引入
需要對 webpack 進行環境配置， 詳細請看 create a react app
在 Webpack 配置環境下使用 import ... from 引入，命令如下：
//安裝 react react-dom
yarn add react react-dom
//引入 react react-dom
import React from "react"
import ReactDOM from "react-dom"
除了 Webpack 外，rollup、parcel 也支持上述寫法引入。
3. create-react-app
Webpcak 引入 React 對於老手來說更加靈活，但對於新手來說，Webpack 的配置很復雜，為了引入 React，還要配置復雜的 Webpack，就更加深了難度，因此，像 Vue 配備了 Vue cli 一樣，React 也配備了 React 開發的標准工具，即 create-react-app 工具，和 Vue cli 是類似的，都內置了 Webpack ，幫我們配置好了 React 的開發環境，直接使用就好了。
對於新手來說，create-react-app 工具更容易上手。
//全局安裝 create-react-app
yarn global add create-react-app
//查看版本號
create-react-app --version
//創建 React 文件，進入到要創建的目錄中，執行創建命令
create-react-app 項目名