正常操作，正常分析，大家好，我是D1N910。

在大約兩年前，我購買了?騰訊課堂【NEXT】一線大廠 React 實踐寶典 這門課。

因為我一直基本上是使用Vue來進行前端頁面的開發(fā)，但是一直沒有時間去實踐看完。

兩年沒去看了，真的很慚愧，時間，唉，過得真快啊。

為了在這門課過期之前看完，所以我要抓緊時間學完了。

本系列的專欄記錄了我學習?一線大廠React實踐寶典? 的筆記。

下面的內(nèi)容版權(quán)歸屬是??騰訊課堂【NEXT】一線大廠 React 實踐寶典 這門課，當然，如果我微不足道的筆記也算是我自己的版權(quán)，那么也是有我的小小一份，你可以用來學習 React。但是如果你用來商業(yè)化盈利，請先獲得??騰訊課堂【NEXT】一線大廠 React 實踐寶典 制作方的許可。

BTW，作為挖坑狂魔，如果這篇專欄沒有更新，那么當我沒說過。

*?注意，在此之前，你需要安裝好 node、npm，以下內(nèi)容都是認為你已經(jīng)安裝好了。

課程引言

天下大勢，分久必合，合久必分。

目前前端，就從主流框架而言，有 React、Vue、Angular，本系列主要講述的是React。

首先從 React 的起源講起。

React的起源

• Facebook 在假設(shè) Instagram 的時候，發(fā)現(xiàn)原有MV*框架太難維護

• 工程師自己開發(fā)了一套專注展示層（ View ）的框架，并提出了 Flux 架構(gòu)

• 表現(xiàn)優(yōu)異，獲得關(guān)注，2013 年 5 月開源

起源的契機，就是為了替代原有的 MV* 框架，用以構(gòu)建中大型的項目，專注于視圖層面。

React帶來的變革

對于老師來說

• 2015-2015，探索 React 在業(yè)務(wù)中的可能性，PC 試驗田

• 2016年，遇到和 FaceBook 一樣的問題，項目龐雜難開發(fā)，進行全面 React 改造，項目可維護性大大提高

• 2017年，直接在瀏覽器端進行頁面渲染的話，體驗不是很好，所以主要頁面采用 React 服務(wù)端渲染技術(shù)，為億萬級用戶帶來極致體驗

• 2018，React 與 TypeScript 強強聯(lián)合，結(jié)構(gòu)更加清晰

用了 React，項目有了質(zhì)的飛躍。

未來？

會更加便捷，在接下來的幾年內(nèi)都不會過時，無論什么時候?qū)W習都不算晚。

本小結(jié) 課程引言 END

React基本開發(fā)環(huán)境

搭建工程化React開發(fā)環(huán)境

第零部：搭建環(huán)境

為什么需要工程化開發(fā)環(huán)境

起初，我們的web開發(fā)比較簡單，有一個功能加一個功能即可。

后來隨著工程越來越復(fù)雜，參與的人越來越多。

需要一套工程化的開發(fā)方式，使得項目更加易于維護。

工程化是一套統(tǒng)一的流程、規(guī)范和開發(fā)方式，它可以對不同人之間的開發(fā)方式進行一個約束。

從而給項目開發(fā)管理和多人協(xié)作帶來了很大的方便。

這很重要，所以學習 React 就要從工程化開發(fā)環(huán)境開始講起，搭建起一套 React 工程化開發(fā)環(huán)境。

之后會在這個搭建好的?React 環(huán)境上進行學習。

搭建工程化 React 開發(fā)環(huán)境

工程化（過程可重復(fù)，自動化，適合大規(guī)模多人協(xié)作，可維護性好）

設(shè)計圖紙；準備材料；制作零件；組裝零件

非工程化（維護性差，缺乏標準流程，難以重復(fù)）

直接上手做；檢查是否滿足需求；修修補補直到滿足需求

在工程化前端開發(fā)中

設(shè)計圖紙 - npm init 生成或拷貝現(xiàn)成的package.json

準備材料 - npm install 安裝依賴包

制作零件 - 開發(fā)各個代碼模塊

組裝零件 - 配置并運行打包工具、編譯工具等

第一步 設(shè)計圖紙（生成package.json）

這里的圖紙指的是 package.json。

可以用下面兩種方式

（1）自己設(shè)計項目圖紙 npm init

（2）套用現(xiàn)成的設(shè)計圖紙 復(fù)制 package.json 到項目根目錄

下面演示的是如何用 npm init 設(shè)計項目圖紙。

創(chuàng)建一個空文件夾，名字我這里叫“d1n910-learn-react-init”

在這個空文件夾下，運行 npm init 命令，運行后，就會開始 package.json 這個文件的配置。

內(nèi)容如下：

沒問題的話，輸入 yes 即可，隨后我們能夠看到生成的 package.json，后繼我們可以通過這個文件，對我們的 React 項目進行包的管理。

第二步 準備材料（安裝依賴包）

如何安裝？

和剛剛生成 package.json 一樣，也是有兩種方法。

1、自己設(shè)計項目圖紙

npm install --save xxx

npm install --save-dev xxx

npm install -g xxx

2、套用現(xiàn)成的設(shè)計圖紙

npm install 依照現(xiàn)成的依賴列表安裝

npm install --save 的作用是可以 安裝并寫入?運行依賴，我們不僅可以安裝包，還可以把安裝的包記錄在剛剛的 package.json 文件中

npm install --save-dev?的作用是可以?安裝并寫入 開發(fā)依賴

依賴有兩種：

（1）運行依賴 ，項目想要運行用的依賴

（2）開發(fā)依賴，開發(fā)這個項目時用到的依賴，和項目實際運行沒有太大的關(guān)系，比如eslint

npm install -g

這個命名是全局安裝，不會安裝到當前根目錄的 node_modules 下，而是安裝到系統(tǒng)目錄下，我們一般用來安裝全局的命令行工具，比如 webpack。

第三步 安裝需要的包

React 工程化開發(fā)環(huán)境構(gòu)成：

webpack（包括各種 loader[加載器]?和 插件）

babel（包括各種preset，用來轉(zhuǎn)換我們使用的高級js語法，用來編譯成低版本瀏覽器能夠執(zhí)行的代碼，這樣解決兼容性問題）

less / sass （用來方便寫前端 css 樣式，這里只做使用，不做探討，有興趣的同學可以自己去查看相關(guān)內(nèi)）

核心

react、

react-dom

配置如下

上面的內(nèi)容 和我們剛剛說的 React 環(huán)境構(gòu)成的關(guān)系是

less / sass 對應(yīng) "less": "^3.0.4",

react 對應(yīng) "react": "^16.4.0"

react-dom 對應(yīng) "react-dom": "^16.4.0"

因為它們是項目運行時要用到的，所以放到了?dependencies 里

babel、webpack 放到了 devDependencies 中

"babel": "^6.23.0",

"babel-core": "^6.26.3",

"babel-loader": "^7.1.4",

"babel-polyfill": "^6.26.0",

"babel-preset-env": "^1.7.0",

"babel-preset-react": "^6.24.1",

"css-loader": "^0.28.11",

"html-webpack-plugin": "^3.2.0",

"less-loader": "^4.1.0",

"style-loader": "^0.21.0",

"webpack": "^4.9.1",

"webpack-cli": "^2.1.4",

"webpack-dev-middleware": "^3.1.3",

"webpack-dev-server": "^3.1.4",

"webpack-hot-middleware": "^2.22.2"

第四步 組裝零件（配置并運行打包工具、編譯工具等）

包安裝好后，都會放到一個叫?node_modules 的文件夾下，組裝零件需要針對我們的零件寫對應(yīng)的內(nèi)容。

babel 配置

babel 是用來將我們書寫的 JavaScript 高級語法轉(zhuǎn)換成 低版本瀏覽器能夠執(zhí)行的代碼的工具。

在根目錄下新建一個文件? .babelrc ，這文件用以存儲 babel 的配置，我們可以寫下面這個簡單的配置，說明 babel 會對 es6 的語法和 react 的代碼進行轉(zhuǎn)換。

webpack 配置

webpack是一個很方便的打包工具，還可以開啟開發(fā)時候的本地服務(wù)器，還可以支持代碼熱更新。

在項目的根目錄下創(chuàng)建一個文件 webpack.config.js

內(nèi)容如下

entry: {

path: path.join(__dirname, './src/index')

}

代表 webpack 將會從??'./src/index' 開始加載，把它相關(guān)的模塊像樹一樣一層一層加載進來。

output: {

path: path.join(__dirname, './dist'),

filename: '[name].min.js'

}

代表打包后輸出的文件放到 './dist'? 里，文件壓縮的名稱叫 xxx.min.js

代表打包文件將采用的規(guī)則。在我們的 src 文件下，一般只有 .js 和 .jsx 文件，所以正則表達式是 /\.jsx?$/，然后采用 babel-loader 來進行資源加載，其中我們不會管 /node_modules/ 下的內(nèi)容（exClude），因為這些一般都是編譯好的。

【小廣告：什么？還不會正則表達式？快去看我之前的專欄啦】

然后我們要解析 .less 文件，這里的loader用感嘆號的意思是，先是用 less-loader 轉(zhuǎn)換，轉(zhuǎn)換好后傳給 css-loader 轉(zhuǎn)換，然后傳給 style-loader，然后再打包再一起。

plugins 表示我們現(xiàn)在安裝的一些插件。這里用到的插件?HtmlWebpackPlugin 是可以把我們生成的js文件注入到 html 文件內(nèi)。

第最后一步 嘗試運行 webpack 打包命令

在開始試運行 webpack 之前，你需要現(xiàn)在你的工程中添加下面幾個文件，你現(xiàn)在還不知道這幾個文件的具體作用，不過下面馬上就知道了。

根目錄下新建 index.html 文件

內(nèi)容

<html>

<head>

<meta?charset="utf-8" />

<meta?name="viewport"?content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover" />

<title>D1n910 learn?React Demo</title>

</head>

<body>

<div?id="app"></div>

? ?<script?crossorigin?src="https://unpkg.com/react@16/umd/react.development.js"></script>

? ?<script?crossorigin?src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

</body>

</html>

src 文件夾下 新建 index.js 文件

在確定全局安裝好了 webpack 和 webpack-cli 后，命令分別是?

npm install?webpack -g?和?npm install?webpack-cli?-g

在命令行中執(zhí)行

webpack?

可以發(fā)現(xiàn)最終 dist 文件夾下有我們要的文件，index.html 也有引入我們要打包進來的index.min.js 代碼

執(zhí)行后也能夠正確得到結(jié)果

現(xiàn)在嘗試把我們的 index.js 里的內(nèi)容，寫成 ES6 的箭頭函數(shù)的寫法

再次進行webpack構(gòu)建，發(fā)現(xiàn)原來的箭頭函數(shù)，已經(jīng)被babel轉(zhuǎn)換好了。

本小節(jié) 搭建React工程化開發(fā)環(huán)境 END

本小節(jié)Github 項目地址（所以后面除非特殊情況，不然我就不會貼一大堆代碼啦）

https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-1-basic-env

開始你的 React 之旅

首先我們用html實現(xiàn)一個 Hello React，可以看到下面的例子中是由 樣式 + 內(nèi)容 組成的 模版 。

這三個在 React 中怎么表示呢？

在 src文件夾下?新建一個 index.less

新建一個 index.js，為了使用 React，所以要寫上對應(yīng)的引入方法。

Hello 是定義的組件。ReactDom.render()是掛載方法，第一個參數(shù)是要掛載的組件，第二個參數(shù)是要掛載上去的對象。

在 package.json 文件的 scripts 添加一個啟動本地服務(wù)器的命令

保存后，在命令行 （注意你的位置要在你的對應(yīng)package.json的目錄）中輸入 npm start。

會有顯示

?Project is running at http://localhost:8080/

其中后面的?http://localhost:8080/ 對應(yīng)的是項目地址，在瀏覽器中打開即可查看效果。

打開控制臺，也能夠看到我們的代碼正常跑動了。

現(xiàn)在來講解下我們剛剛的代碼

引入 babel-polyfill，可以轉(zhuǎn)換高版本的代碼，為了兼容性考慮。

引入 React 和 ReactDOM 對應(yīng)在的代碼。

不過為了我們的文件大小、節(jié)省帶寬考慮，我們的 React 使用了 cdn 的引入方式。

所以我們可以在之前的webpack配置的外部擴展（externals）配置選項中排除這兩個依賴。這樣我們就不會直接把 React 和 ReactDOM 打包到我們項目中去了。

?本小節(jié) 開始你的 React 之旅 END

JSX 語法

什么是 JSX

jsx 語法類似 HTML 標簽，可以讓我們更好地定義 React 組件，讓我們的代碼結(jié)構(gòu)更加清晰，能讓我們很好很快上手 React。

JSX 語法

jsx 的 “ x ”??代表的是拓展的意思。

上一小節(jié)，我們使用了 return <h1>Hello React</h1>，其實就是使用了 JSX 了。而從JSX 到 HTML 概括來說，分下面三個步驟。

（1）JSX 提供類似于 HTML 標簽的寫法，方便開發(fā)者便攜

（2）Babel 將 JSX 語法編譯為 React 的API

（3）React 將 ReactAPI 中生成的組件渲染為 HTML 元素

先看 （1），現(xiàn)在將我們上一節(jié)的 return 的 JSX 改造一下

進過 （2）的 babel 的轉(zhuǎn)換，會變成這樣

上面是我自己打的，實際轉(zhuǎn)換壓縮后的代碼如下

最后通過 （3）的React的執(zhí)行，就完成轉(zhuǎn)換到 HTMl 代碼的部分。

JSX語法四大原則

1、最外層只能有一個標簽包裹

????反例

???? 結(jié)合我們上面說的 babel 轉(zhuǎn)換方法，如果我們這邊寫成了多個，那么會造成 babel 不知道如何轉(zhuǎn)換的情況。

????兩種解決方案：

????（1）使用一個標簽包裹，比如 <div>

????（2）?在 React Fragment in v16.2 版本下，使用簡便的版本 <> </> 進行包裹。不過這個

????

2、標簽一定要閉合

????這個就不用解釋了

3、沒有子節(jié)點的標簽可以寫成自閉合的單標簽

????比如 img 標簽

4、屬性使用小駝峰命名法

????比如我們綁定點擊點擊事件的屬性是 onclick，在 React 中要寫成 onClick；比如 class 屬性應(yīng)該使用 className 替代。（小駝峰的意思就是拼接單詞，第一個單詞首字母不大寫，后面跟著的單詞的首字母大寫。對應(yīng)的還有大駝峰，就是第一個單詞的首字母也大寫）

本小節(jié)倉庫地址：https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-3-jsx

混合 JavaScript 與 JSX

在之前我們已經(jīng)能夠用 JSX 寫一些簡單的靜態(tài)頁面，但是實際上我們遇到的會復(fù)雜得多。

首先來了解一下 React.createElement(type, [props], [...children])

? 以 React.createElement('p', { color: 'red' }, 'This is my firest React app.') 為例

type（必填）：?'p' 代表 HTML 標簽，或 React 組件類，或 React.Fragment

[props]（可選）：代表屬性對象，可以為空對象

[children]（可選）：?'This is my firest React app.' ，就是子元素，可以為空，可以是 React 元素，可以是 React 元素數(shù)組。

上面這些都可以和 Javascript 語句混合使用，下面列舉的常見的使用方法

React.createElement

props

利用一對花括號代表此處是一塊 JS 代碼，給 style 賦值一個 Object

children

這里我們構(gòu)建了一個復(fù)雜類型，最后插入到children數(shù)組中。需要注意的是，元素插入?yún)?shù)，要保持使用一對花括號。

React7?下這種數(shù)組渲染需要帶?key?以提高性能。如果不帶，瀏覽器也會報錯。

條件渲染

使用場景

場景一、滿足某個條件才渲染，比如 VIP 用戶展示特殊標記。

解決方案：使用 &&

場景二、 根據(jù)某個條件是否成立，渲染兩種不同的元素，比如登錄用戶展示歡迎頁，未登錄用戶展示登錄提示

解決方案：使用三元運算符 ?:

場景三、更加復(fù)雜的條件，比如管理員，VIP 用戶，普通用戶展示不同界面

解決方案：聲明變量，使用 if-else 判斷并賦值

場景一

給?UserInfo 組件傳入 props 值 name，設(shè)置為 D1n910，結(jié)果就變成了 “歡迎?D1n910!”

場景二

使用 ?: 三元操作符，有傳入name，name為真

去掉name，name 為假

場景三

定義更加復(fù)雜的內(nèi)容。下面的 ?? 主要說的是判斷用戶身份。

循環(huán)渲染

使用場景

渲染一系列結(jié)構(gòu)相同的元素，比如一個所有用戶的列表

普通渲染列表

（1）構(gòu)建數(shù)組型變量

（2）Array.map

這個函數(shù)方法本身和上面一樣，會返回一個數(shù)組，這也是較為常用的渲染方法之一

打開控制臺，會發(fā)現(xiàn)之前也有發(fā)現(xiàn)過的報錯，這邊的意思是希望我們給這種數(shù)組渲染的元素，有key值來進行區(qū)分。

這個 key 傳入的是代表數(shù)據(jù)的唯一值，比如這邊我們可以傳入元素本身，現(xiàn)在我們就發(fā)現(xiàn)沒有報錯了。

本小節(jié)倉庫地址?https://github.com/D1N910/learn-react/tree/master/Chapter1/demo-4-mix-jsx-with-react

本節(jié)結(jié)束，本節(jié)本身會有一個項目練習制作，叫 React 博客項目開發(fā)環(huán)境搭建，這邊想要自己規(guī)劃設(shè)計一個好上手的項目，就不放出來啦。大家現(xiàn)在可以嘗試實踐上面的內(nèi)容，開始一個自己的小博客的搭建。

本文 END，未完待續(xù)，學習進度?2/9

五一還有 剩下兩天半！ 加油加油