React是近幾年來前端項(xiàng)目開發(fā)非常火的一個(gè)框架，其背景是Facebook團(tuán)隊(duì)的技術(shù)支持，市場占有率也很高。很多初學(xué)者糾結(jié)一開始是學(xué)react還是vue。個(gè)人覺得，有時(shí)間的話，最好兩個(gè)都掌握一下。從學(xué)習(xí)難度上來說，react要比vue稍難一些。萬事開頭難，但是掌握了react對于大幅提高前端技能還是非常有幫助的。本文一步步詳細(xì)梳理了從創(chuàng)建react、精簡項(xiàng)目、集成插件、初步優(yōu)化等過程。對于react開發(fā)者來說，能夠節(jié)省很多探索的時(shí)間。下面請跟著我來一步步操作。

先睹為快

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

從零創(chuàng)建React項(xiàng)目

支持Sass/Scss/Less/Stylus

路由使用：react-router-dom

組件的創(chuàng)建與引用

React Developer Tools瀏覽器插件

redux、react-redux使用

redux-thunk

store的創(chuàng)建與使用

Redux DevTools安裝與使用

immutable.js使用

Mock.js使用

解決本地跨域反向代理

其他常用工具匯總

超值附贈(zèng)：集成Ant Design

即使你是新手，跟著操作一遍以后，也可以快速上手React項(xiàng)目啦！

※注：本文代碼區(qū)域每行開頭的“+”表示新增，“-”表示刪除，“M”表示修改；代碼中的“...”表示省略。

1 創(chuàng)建React-APP

為了加速npm下載速度，先把npm設(shè)置為淘寶鏡像地址。

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

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

通過官方的create-react-app，找個(gè)喜歡的目錄，執(zhí)行：

npx create-react-app react-app

命令最后的react-app是項(xiàng)目的名稱，可以自行更改。

稍等片刻即可完成安裝。安裝完成后，可以使用npm或者yarn啟動(dòng)項(xiàng)目。

進(jìn)入項(xiàng)目目錄，并啟動(dòng)項(xiàng)目：

cd react-appyarn start (或者使用npm start)

如果沒有安裝yarn，可以前往yarn中文網(wǎng)站安裝：

https://yarn.bootcss.com/

啟動(dòng)后，可以通過以下地址訪問項(xiàng)目：

http://localhost:3000/

2 精簡項(xiàng)目

2.1 刪除文件

接下來，刪除一般項(xiàng)目中用不到的文件，最簡化項(xiàng)目。

以上文件刪除后，頁面會(huì)報(bào)錯(cuò)。這是因?yàn)橄鄳?yīng)的文件引用已不存在。需要繼續(xù)修改代碼。

2.2 簡化代碼

現(xiàn)在目錄結(jié)構(gòu)如下，清爽許多：

逐個(gè)修改以下文件：

src/App.js代碼簡化如下：

src/index.js代碼簡化如下：

public/index.html

運(yùn)行效果如下：

2.3 使用Fragment去掉組件外層標(biāo)簽

react要求每個(gè)組件HTML的最外層必須是由一個(gè)標(biāo)簽包裹，且不能存在并列的標(biāo)簽。例如，在src/App.js中，如果是這樣就會(huì)報(bào)錯(cuò)：

如果確實(shí)需要這樣的HTML，并且不想再添加一個(gè)父級標(biāo)簽，可以使用Fragment作為最外層。代碼修改如下：

以上僅為了說明Fragment的使用效果。在某些組件嵌套的使用場景下，非常適合使用Fragment。例如父組件是

3 項(xiàng)目目錄結(jié)構(gòu)

項(xiàng)目目錄結(jié)構(gòu)可根據(jù)項(xiàng)目實(shí)際靈活制定。這里分享下我常用的結(jié)構(gòu)，僅供參考。

3.1 引入全局公用樣式

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

然后在src/index.js里引入frame.css

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

3.2 支持Sass/Less/Stylus

工欲善其事必先利其器，這么高大上的react怎能好意思用最原始的css搭配呢？create-react-app默認(rèn)情況下未暴露配置文件。要更靈活配置項(xiàng)目，需要將配置文件暴露出來。

執(zhí)行以下命令，暴露配置文件：

※注意：暴露配置的文件的操作不可逆！

npm run eject

如果之前沒有提及git的話，可能會(huì)報(bào)以下錯(cuò)誤：

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

需要先在項(xiàng)目根目錄下執(zhí)行：

git add . git commit -m "初始化項(xiàng)目(備注)"

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

3.2.1 支持Sass/Scss

eject后，雖然package.json以及webpack.config.js里有了sass相關(guān)代碼，但是要正確使用Sass/Scss，還要再安裝node-sass。

執(zhí)行以下命令：

npm install node-sass --save-dev

安裝完成后，項(xiàng)目已支持Sass/Scss，可以將原css文件后綴名修改為sacc/scss，別忘了把src/index.js中引入的frame.css后綴名修改為sacc/scss。

3.2.2 支持Less

支持Less稍微多一點(diǎn)步驟，首先安裝less和less-loader：

npm install less less-loader --save-dev

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

修改后需要執(zhí)行yarn start重啟項(xiàng)目。

然后將原css文件的后綴名修改為less，src/index.js中引入的frame.less，頁面已正常解析less。

3.2.3 支持Stylus

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

執(zhí)行以下命令：

npm install stylus stylus-loader --save-dev

安裝完成后，按照上一小節(jié)介紹的支持less的方法，修改config/webpack.config.js。完成后重啟項(xiàng)目，引入stylus文件可以正常解析了。

我個(gè)人習(xí)慣使用Stylus，因此后續(xù)的講解中使用Stylus。同時(shí)，把src/common/下的style目錄也更名為stylus。

frame.styl代碼如下：

src/index.js代碼修改如下：

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

4 路由

4.1 頁面構(gòu)建

首先，構(gòu)建home和login頁面。

src/pages/home/index.js代碼：

src/pages/home/home.styl代碼

src/pages/login/index.js代碼：

src/pages/login/login.styl代碼

我個(gè)人的習(xí)慣是，僅供參考：

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

接下來，我們使用react-router-dom實(shí)現(xiàn)路由。

4.2 使用react-router-dom

執(zhí)行安裝命令：

npm install react-router-dom --save

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

App.js引入了Home和Login兩個(gè)頁面級組件。然后使用react-router-dom分別設(shè)置了路徑。

import的機(jī)制是默認(rèn)尋找index.js，所以每個(gè)組件的主文件名設(shè)為index.js，在引用的時(shí)候就可以省略文件名。

這里說明一下的屬性：

• path表示路徑，這個(gè)很好理解。
• component表示綁定的組件。
• exact表示是否精確匹配。

如果沒有設(shè)置exact，那么：

localhost:3000/會(huì)顯示Home頁，

localhost:3000/abc也會(huì)顯示Home頁。

因?yàn)槠ヅ涞搅饲懊娴?#34;/"，路由就會(huì)成功。

最后的表示以上都沒有匹配成功的會(huì)，默認(rèn)跳轉(zhuǎn)的路由。

來看下效果：

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

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

4.3 路由跳轉(zhuǎn)

接下來，簡單介紹下如果在頁面之間進(jìn)行路由跳轉(zhuǎn)。

在Login頁面添加一個(gè)用于跳轉(zhuǎn)至Home頁的按鈕，代碼修改如下：

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

當(dāng)然，也可以這么寫：

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

5 組件引入

這章節(jié)內(nèi)容也很容易，接觸過vue的同學(xué)應(yīng)該也很清楚，為了教程的完整性，還是簡單說一下。下面來簡單實(shí)現(xiàn)一個(gè)公用的頭部組件。

5.1 創(chuàng)建header組件

目錄結(jié)構(gòu)如下：

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的同學(xué)都知道，vue組件有data和props。對應(yīng)react的是state和props。

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

在Header組件內(nèi)部，直接使用this.props就可以接收。例如：this.props.param1。

本次分享主要是介紹流程性的內(nèi)容，篇幅有限，關(guān)于react的state和props請查閱官方文檔。

6 React Developer Tools瀏覽器插件

為了更方便調(diào)試react項(xiàng)目，建議安裝chrome插件。

先科學(xué)上網(wǎng)，在chrome網(wǎng)上應(yīng)用店里搜索“React Developer Tools”并安裝。

安裝完成后，打開chrome調(diào)試工具，可以清晰的看到react項(xiàng)目代碼結(jié)構(gòu)。

項(xiàng)目GitHub

本次分享涉及的項(xiàng)目代碼已全部上傳至GitHub，有需要的同學(xué)可前往自行下載：

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

敬請閱讀下篇

本次分享(上篇)暫告一段落。在下篇中，將繼續(xù)講解以下內(nèi)容：

7 Redux及相關(guān)插件

• 7.1 安裝redux
• 7.2 安裝react-redux
• 7.3 安裝redux-thunk
• 7.4 安裝瀏覽器Redux插件
• 7.5 創(chuàng)建store
• 7.6 復(fù)雜項(xiàng)目store分解
• 7.7 對接react-redux與store
• 7.8 啟動(dòng)Redux DevTools
• 7.9 安裝使用immutable

8 Mock.js安裝與使用

9 解決本地開發(fā)跨域問題

10 其他常用工具

11 附贈(zèng)章節(jié)：集成Ant Design

• 11.1 安裝Ant Design
• 11.2 實(shí)現(xiàn)按需加載
• 11.3 自定義主題顏色

敬請閱讀《超全面詳細(xì)一條龍教程！從零搭建React項(xiàng)目全家桶(下篇)》

總結(jié)

以上是生活随笔為你收集整理的react安装_超全面详细一条龙教程！从零搭建React项目全家桶（上篇）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。