雖然 Vue 在國內一家獨大，但在全球范圍內，React 依然是最流行的前端框架
最近和一些朋友聊天，發現很多項目都選擇了 React 技術棧，而且公司的新項目也決定使用 React
我一直以來都是走的 Vue 技術棧，雖然接觸過 RN，但只停留在能用階段
既然要正式做 React 的項目，那還是系統的學習一下 React 吧
一、安裝 Node 環境
如果僅僅是安裝 Node.js，其實並沒有什么難度，直接上 node.js 官網下載安裝包即可
不過 node.js 的更新速度太快，node.js 的版本管理就顯得尤為重要，推薦使用 nvm 來管理 node 版本
Windows:
其實 nvm 並不支持 Windows，不過有替代品 nvm-windows，可以訪問其 GitHub 地址下載安裝包
https://github.com/coreybutler/nvm-windows/releases
主要有 nvm-noinstall 和 nvm-setup 兩個包可選
其中 noinstall 是免安裝的綠色安裝包，但需要手動配置環境變量
而 setup 是一個安裝包，不用配置環境變量，建議下載這個
安裝之后，可以在命令行輸入 nvm v 檢查版本
如果在安裝 nvm 之前已經打開了命令行窗口，記得在安裝之后重新打開命令行
Mac:
在 Mac 上安裝 nvm 非常簡單，只需要在終端執行這一行代碼即可：
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
上面鏈接中的 v0.34.0 是 nvm 的版本號
如果想要保證版本最新，可以查看 nvm 的 README 文件中 Install & Update script 部分
安裝 nvm 之后，可以通過以下命令安裝和使用指定版本的 node.js
nvm ls // 查看目前已經安裝的版本
nvm install 10.15.3 // 安裝指定的版本的 node.js
nvm use 10.15.3 // 使用指定版本的 node.js
二、搭建 React 項目
就像 Vue 有 vue-cli 一樣，React 也有自己的腳手架工具 create-react-app
可以采用傳統的全局安裝方式，先安裝 create-react-app，再通過腳手架創建項目：
// 全局安裝腳手架
npm install -g create-react-app // 創建名為 my-react-app 的項目
create-react-app my-react-app // 啟動項目
cd my-react-app npm start
如果 Node >= 6 且 npm >= 5.2，那就不需要提前全局安裝 create-react-app，可以直接使用 npx 創建項目：
npx create-react-app my-react-app cd my-react-app npm start
如果更習慣用 yarn，且 yarn >= 0.25，也不用提前安裝腳手架，直接用這個命令：
yarn create react-app my-react-app
創建項目之后，可以使用 npm run start 命令啟動項目；使用 npm run build 命令打包編譯，打包之后會生成一個 build 目錄
完整的項目命令在 package.json 中可以看到：
這里還有一個 npm run eject 命令，它能夠將隱藏的項目配置項暴露出來
因為 create-react-app 腳手架其實使用的是 react-scripts 配置項目，所以構建的項目配置信息都在 node_models/react-scripts 目錄下
如果需要手動修改 webpack 配置，就可以使用 npm run eject 命令，將配置項暴露出來
但該操作是一個單向操作，一旦使用 npm eject，配置信息就會永久暴露，無法再次隱藏
三、項目結構
通過 create-react-app 生成的項目結構如下：
public
這里的 public 目錄就和 vue 項目中的 public 目錄類似，該目錄下的文件不會被 webpack 加載
在 npm run build 打包的時候，public 目錄下的文件也會原封不動的復制到 build 目錄下
index.js
src 是源碼目錄，其中 /src/index.js 類似於 vue 中的 main.js，是項目的入口文件
serviceWorker.js
在 index.js 的末尾有這樣的一行代碼：
這里調用了 /src/serviceWorker.js 中的 unregister 方法，取消 service worker 的注冊
如果有離線緩存或者 PWA 的需求，可以調用 register 方法。只要訪問過一次該網站，項目就可以離線環境下訪問
在 public 目錄下有一個 manifest.json 文件，它就是為 PWA 做的配置（圖標、名字等等）
其他的 App.js 和 App.css 都是具體的頁面文件，類似於 vue 中的 App.vue
但實際項目中更多的是使用 jsx 文件，所以這里的 App.js 和 App.css 可以刪掉，然后根據實際業務另外開發啟動頁