從 Vue 的視角學 React（一）—— 項目搭建

雖然 Vue 在國內一家獨大，但在全球範圍內，React 依然是最流行的前端框架

最近和一些朋友聊天，發現不少項目都選擇了 React 技術棧，並且公司的新項目也決定使用 React

我一直以來都是走的 Vue 技術棧，雖然接觸過 RN，但只停留在能用階段

既然要正式作 React 的項目，那仍是系統的學習一下 React 吧

 

1、安裝 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

 

 

2、搭建 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，配置信息就會永久暴露，沒法再次隱藏

 

 

3、項目結構

經過 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 能夠刪掉，而後根據實際業務另外開發啓動頁