React是近幾年來前端專案開發非常火的一個框架，其背景是Facebook團隊的技術支援，市場佔有率也很高。很多初學者糾結一開始是學react還是vue。個人覺得，有時間的話，最好兩個都掌握一下。從學習難度上來說，react要比vue稍難一些。萬事開頭難，但是掌握了react對於大幅提高前端技能還是非常有幫助的。本文一步步詳細梳理了從建立react、精簡專案、整合外掛、初步優化等過程。對於react開發者來說，能夠節省很多探索的時間。下面請跟著我來一步步操作。

先睹為快

正式開始前，先看下通過本次分享，能掌握什麼？

從零建立React專案支援Sass/Scss/Less/Stylus路由使用：react-router-dom元件的建立與引用React Developer Tools瀏覽器外掛redux、react-redux使用redux-thunkstore的建立與使用Redux DevTools安裝與使用immutable.js使用Mock.js使用解決本地跨域反向代理其他常用工具彙總超值附贈：整合Ant Design

即使你是新手，跟著操作一遍以後，也可以快速上手React專案啦！

1 建立React-APP

為了加速npm下載速度，先把npm設定為淘寶映象地址。

npm config set registry http://registry.npm.taobao.org/

也可以使用cnpm，根據喜好自行選擇。

通過官方的create-react-app，找個喜歡的目錄，執行：

npx create-react-app react-app

命令最後的react-app是專案的名稱，可以自行更改。

稍等片刻即可完成安裝。安裝完成後，可以使用npm或者yarn啟動專案。

進入專案目錄，並啟動專案：

cd react-appyarn start （或者使用npm start）

如果沒有安裝yarn，可以前往yarn中文網站安裝：

https://yarn.bootcss.com/

啟動後，可以通過以下地址訪問專案：

http://localhost:3000/

2.2 簡化程式碼

現在目錄結構如下，清爽許多：

逐個修改以下檔案：

src/App.js程式碼簡化如下：

src/index.js程式碼簡化如下：

public/index.html

執行效果如下：

2.3 使用Fragment去掉元件外層標籤

react要求每個元件HTML的最外層必須是由一個標籤包裹，且不能存在並列的標籤。例如，在src/App.js中，如果是這樣就會報錯：

如果確實需要這樣的HTML，並且不想再新增一個父級標籤，可以使用Fragment作為最外層。程式碼修改如下：

以上僅為了說明Fragment的使用效果。在某些元件巢狀的使用場景下，非常適合使用Fragment。例如父元件是<table>，而子元件可以用<Fragment>包裹多個<tr>。

3 專案目錄結構

專案目錄結構可根據專案實際靈活制定。這裡分享下我常用的結構，僅供參考。

3.1 引入全域性公用樣式

在frame.css裡引入其他公用樣式： src/common/style/frame.css

然後在src/index.js裡引入frame.css

如圖，頁面全域性樣式已生效。

3.2 支援Sass/Less/Stylus

工欲善其事必先利其器，這麼高大上的react怎能好意思用最原始的css搭配呢？create-react-app預設情況下未暴露配置檔案。要更靈活配置專案，需要將配置檔案暴露出來。

執行以下命令，暴露配置檔案：

※注意：暴露配置的檔案的操作不可逆！

npm run eject

如果之前沒有提及git的話，可能會報以下錯誤：

Remove untracked files, stash or commit any changes, and try again

需要先在專案根目錄下執行：

git add . git commit -m "初始化專案(備註)"

稍等片刻，eject成功，目錄變化如下：

3.2.1 支援Sass/Scss

eject後，雖然package.json以及webpack.config.js裡有了sass相關程式碼，但是要正確使用Sass/Scss，還要再安裝node-sass。

執行以下命令：

npm install node-sass --save-dev

安裝完成後，專案已支援Sass/Scss，可以將原css檔案字尾名修改為sacc/scss，別忘了把src/index.js中引入的frame.css字尾名修改為sacc/scss。

3.2.2 支援Less

支援Less稍微多一點步驟，首先安裝less和less-loader：

npm install less less-loader --save-dev

然後修改config/webpack.config.js：

修改後需要執行yarn start重啟專案。

然後將原css檔案的字尾名修改為less，src/index.js中引入的frame.less，頁面已正常解析less。

3.2.3 支援Stylus

支援Stylus跟Less完全一樣，首先安裝stylus和stylus-loader：

執行以下命令：

npm install stylus stylus-loader --save-dev

安裝完成後，按照上一小節介紹的支援less的方法，修改config/webpack.config.js。完成後重啟專案，引入stylus檔案可以正常解析了。

我個人習慣使用Stylus，因此後續的講解中使用Stylus。同時，把src/common/下的style目錄也更名為stylus。

frame.styl程式碼如下：

src/index.js程式碼修改如下：

最基本的配置搞定了，接下來要開始引入頁面（pages）了。頁面的切換需要使用路由（Router），請繼續閱讀下面的章節。

4 路由

4.1 頁面構建

首先，構建home和login頁面。

src/pages/home/index.js程式碼：

src/pages/home/home.styl程式碼

src/pages/login/index.js程式碼：

src/pages/login/login.styl程式碼

我個人的習慣是，僅供參考：

全域性公用級別（不需要模組化）的className，用G-xxx。例如G-autocut(截字)、G-color-red(文字紅色)。頁面級別的className，用P-xxx。模組級別的className，用M-xxx。

接下來，我們使用react-router-dom實現路由。

4.2 使用react-router-dom

執行安裝命令：

npm install react-router-dom --save

修改src/App.js，程式碼如下：

App.js引入了Home和Login兩個頁面級元件。然後使用react-router-dom分別設定了路徑。

import的機制是預設尋找index.js，所以每個元件的主檔名設為index.js，在引用的時候就可以省略檔名。

這裡說明一下<Route>的屬性：

path表示路徑，這個很好理解。component表示繫結的元件。exact表示是否精確匹配。

如果沒有設定exact，那麼：

localhost:3000/會顯示Home頁，

localhost:3000/abc也會顯示Home頁。

因為匹配到了前面的"/"，路由就會成功。

最後的<Redirect>表示以上都沒有匹配成功的會，預設跳轉的路由。

來看下效果：

訪問http://localhost:3000/#/login效果：

訪問http://localhost:3000/#/home效果：

4.3 路由跳轉

接下來，簡單介紹下如果在頁面之間進行路由跳轉。

注意button的onClick裡要bind(this)，否則，在gotoHome裡的this是undefined。

當然，也可以這麼寫：

最終目的都是要讓gotoHome中的this指向正確的作用域。

5 元件引入

這章節內容也很容易，接觸過vue的同學應該也很清楚，為了教程的完整性，還是簡單說一下。下面來簡單實現一個公用的頭部元件。

5.1 建立header元件

目錄結構如下：

src/components/header/index.js程式碼：

src/components/header/header.styl程式碼：

5.2 引入Header元件

然後，在Home和Login頁面裡引入Header元件。

以Home頁面為例，修改src/pages/home/index.js：

同樣的方式在Login頁面也引入Header元件，程式碼就不放出了。效果如下：

5.3 元件傳參

使用過vue的同學都知道，vue元件有data和props。對應react的是state和props。

react向子元件傳參使用以下方式：

在Header元件內部，直接使用this.props就可以接收。例如：this.props.param1。

本次分享主要是介紹流程性的內容，篇幅有限，關於react的state和props請查閱官方文件。

6 React Developer Tools瀏覽器外掛

為了更方便除錯react專案，建議安裝chrome外掛。

先科學上網，在chrome網上應用店裡搜尋“React Developer Tools”並安裝。

安裝完成後，開啟chrome除錯工具，可以清晰的看到react專案程式碼結構。

專案GitHub

本次分享涉及的專案程式碼已全部上傳至GitHub，有需要的同學可前往自行下載：

https://github.com/Yuezi32/react-family

敬請閱讀下篇

本次分享（上篇）暫告一段落。在下篇中，將繼續講解以下內容：

7 Redux及相關外掛

7.1 安裝redux7.2 安裝react-redux7.3 安裝redux-thunk7.4 安裝瀏覽器Redux外掛7.5 建立store7.6 複雜專案store分解7.7 對接react-redux與store7.8 啟動Redux DevTools7.9 安裝使用immutable

8 Mock.js安裝與使用

9 解決本地開發跨域問題

10 其他常用工具

11 附贈章節：整合Ant Design

11.1 安裝Ant Design11.2 實現按需載入11.3 自定義主題顏色

敬請閱讀《超全面詳細一條龍教程！從零搭建React專案全家桶（下篇）》