引導(dǎo)語(yǔ)
眾所周知，學(xué)習(xí)一門技術(shù)最好的方法，就是實(shí)踐，大白話就是跟著我們一起敲代碼，我們學(xué)習(xí) React 亦是如此。由于開發(fā) React 應(yīng)用需要一個(gè)眾多開發(fā)工具組成的開發(fā)環(huán)境，因此在這之前，我們需了解其開發(fā)環(huán)境及開發(fā)工具，然后才能更好的開發(fā) React 應(yīng)用。了解完這些基礎(chǔ)之后，我們會(huì)帶大家來(lái)創(chuàng)建你的第一個(gè) React 應(yīng)用，并介紹一些容易遇到的細(xì)節(jié)問題。
資源
開發(fā)環(huán)境
1. Node.js
Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。React 應(yīng)用并不依賴于 Node.js 運(yùn)行，但是開發(fā)過程中的一些編譯過程（比如 npm，Webpack 等）都需要在 Node 環(huán)境下運(yùn)行。因此，開發(fā) React 應(yīng)用前，應(yīng)確保已經(jīng)安裝了 Node.js。
官方下載地址是 https://nodejs.org，穩(wěn)定版和最新版選擇一個(gè)版本下載即可（我們開發(fā)一般使用穩(wěn)定版）。
2. NPM
NPM 是 Node 的一個(gè)包管理工具，每個(gè)包都是一個(gè)模塊，能夠使你輕松下載、管理模塊依賴和版本。同樣的，在使用 React 開發(fā)應(yīng)用時(shí)，會(huì)依賴很多模塊，這些模塊就可以通過 NPM 進(jìn)行下載。由于 NPM 已集成到了 Node.js 中，因此不用單獨(dú)下載。
當(dāng)然我們也可使用 yarn 模塊管理，本教程統(tǒng)一使用 npm 模塊管理。
開發(fā)工具
1. Webpack
Webpack 是一個(gè)前端資源加載和打包工具。Webpack 提供了模塊化的開發(fā)方式，將各種靜態(tài)資源視為模塊，如 JavaScript、CSS、圖片等，并通過 Webpack 生成優(yōu)化過的代碼。同樣在開發(fā) React 應(yīng)用時(shí)也要用到 Webpack 來(lái)進(jìn)行模塊打包。
Webpack 的安裝可以參考官網(wǎng)文檔。Webpack 的進(jìn)一步學(xué)習(xí)可以打開官網(wǎng)，本小節(jié)不做詳細(xì)闡述。
2. Babel
Babel 是一個(gè) JavaScript 編譯器，主要用于將 ECMAScript 2015+ 版本的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語(yǔ)法，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。
由于我們?cè)陂_發(fā) React 應(yīng)用中，會(huì)用到很多 ES6 的語(yǔ)法，但目前瀏覽器并不完全支持，因此在 Webpack 編譯階段，利用 Babel 將 ES6 及其以后的語(yǔ)法編譯成 ES5 語(yǔ)法。
如何快速搭建 React 應(yīng)用
Webpack、Babel 等工具是開發(fā) React 應(yīng)用所必需的，但這些工具的使用、配置又比較繁瑣，需要大量學(xué)習(xí)才可以掌握。因此，本小冊(cè)借助官方提供的腳手架 Create React App 創(chuàng)建 React 應(yīng)用。該腳手架已經(jīng)將 Webpack、Babel 等工具的配置做了封裝，無(wú)需開發(fā)者做配置，提供了一個(gè)零配置的現(xiàn)代構(gòu)建。
Create React App 對(duì)于開發(fā)環(huán)境版本有一定的要求，具體如下：
npm 版本 >= 5.6
node 版本 >= 8.10
快速搭建 React 應(yīng)用需要四個(gè)步驟：
- 安裝官方腳手架；
- 創(chuàng)建 React 項(xiàng)目；
- 啟動(dòng)項(xiàng)目；
- 暴露配置項(xiàng)。
下面大家跟著本文來(lái)一步一步進(jìn)行操作。
1. 使用 npm 安裝官方腳手架
npm install -g create-react-app
安裝好之后，可以運(yùn)行：create-react-app --version 查看版本號(hào)，如果版本號(hào)正常展示，證明安裝成功。
2. 創(chuàng)建 React 項(xiàng)目
create-react-app my-demo
這里項(xiàng)目名不能使用駝峰的形式(即不能包含大寫字母)，不然會(huì)有以下報(bào)錯(cuò)：
name can no longer contain capital letters。
3. 啟動(dòng)項(xiàng)目
cd my-demo && npm start
此處也可使用 yarn 啟動(dòng)項(xiàng)目：yarn start，建議 yarn 和 npm 不要混用。
4. 暴露配置項(xiàng)
npm run eject
當(dāng)看到以下界面時(shí)，說明你的 React 應(yīng)用就已經(jīng)安裝好了。
文件結(jié)構(gòu)
文件結(jié)構(gòu)一覽
接下來(lái)，我們看下安裝好的 React 應(yīng)用的文件結(jié)構(gòu)。
├── README.md 文檔
├── package.json npm 依賴
├── public 靜態(tài)資源文件夾
│ ├── favicon.ico 網(wǎng)站icon圖標(biāo)
│ ├── index.html 模版
│ ├── logo192.png 192*192大小的react logo
│ ├── logo512.png 512*512大小的react logo
│ ├── manifest.json 移動(dòng)桌面快捷方式配置文件
│ └── robots.txt 網(wǎng)站與爬蟲間的協(xié)議
├── src 源碼文件夾
│ ├── App.css
│ ├── App.js 根組件
│ ├── App.test.js
│ ├── index.css 全局樣式
│ ├── index.js 入口文件
│ ├── logo.svg
│ └── serviceWorker.js PWA 支持
└── yarn.lock
創(chuàng)建你的 Hello World
為了快速了解 React，我們先改動(dòng)一個(gè)文件看看效果，從動(dòng)手嘗試中去學(xué)習(xí)。
打開 src/index.js 文件，可以看到 render 的模版是 App.js，代碼如下：
import React from 'react' // 使用JSX語(yǔ)法必須引入react
import ReactDOM from 'react-dom'
import App from './App.js'
ReactDOM.render(<App />,
document.getElementById('root'))
<App />是 JSX 語(yǔ)法（后面會(huì)講什么是 JSX 語(yǔ)法）。
root 是 index.html 模版里的元素，渲染出來(lái)的 App 組件放在此處。
我們來(lái)嘗試修改 App.js 文件：
// src/App.js
import React from 'react'
import './App.css'
function App() {
return (
<div className="App">
<header className="App-header">
<p>
hello world
</p>
</header>
</div>
)
}
export default App
可以看到上面代碼中，我們將 header 中的內(nèi)容換成了我們自己的，保存代碼，瀏覽器會(huì)自動(dòng)幫我們刷新，接著我們就能看到頁(yè)面展示如下：
到此，我們已經(jīng)完成了使用 React 的第一步。
樣式引入之 Sass
我們?cè)陂_發(fā)過程中，通常不會(huì)使用原生的 CSS 直接開發(fā)，而是會(huì)選擇 CSS 預(yù)處理語(yǔ)言，比如 Sass，使用 Sass 會(huì)極大的提高我們書寫 CSS 的效率。
Sass 的安裝
- 首先，讓我們一起來(lái)安裝 Sass，create-react-app 腳手架中已經(jīng)添加了 sass-loader 的支持，只需要安裝 node-sass 插件即可, 使用如下命令即可直接安裝 Sass。
npm install node-sass --save-dev
在上面命令中，我們使用了 --save-dev 后綴，其代表將 Sass 安裝在了開發(fā)環(huán)境。
安裝好 Sass 之后，我們可以在項(xiàng)目中直接引入并使用 Sass 。
- create-react-app 腳手架中已經(jīng)添加了 sass-loader 的支持，想要查看配置，執(zhí)行
npm run eject，隱藏的配置都會(huì)展示出來(lái)，打開 config/webpack.config.js 文件，會(huì)找到如下幾行代碼:
const sassRegex = /\.(scss|sass)$/; // 正則：以 .scss 或者 .sass 結(jié)尾
const sassModuleRegex = /\.module\.(scss|sass)$/; // 正則：以 .module.scss 或者 .module.sass 結(jié)尾
// ...
{
test: sassRegex,
exclude: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
},
'sass-loader'
),
sideEffects: true,
},
{
test: sassModuleRegex,
use: getStyleLoaders(
{
importLoaders: 2,
sourceMap: isEnvProduction && shouldUseSourceMap,
modules: true,
getLocalIdent: getCSSModuleLocalIdent,
},
'sass-loader'
),
},
上面一段代碼中，第一、二行是兩個(gè)正則表達(dá)式，分別表示以 .scss 或者 .sass 結(jié)尾和以 .module.scss 或者 .module.sass 結(jié)尾?；ɡㄌ?hào)中是 Webpack 配置 loader 的語(yǔ)法，我們一起來(lái)回憶下此部分。官網(wǎng)有提到，在 webpack 的配置中 loader 有兩個(gè)目標(biāo)：
- test 屬性，用于標(biāo)識(shí)出應(yīng)該被對(duì)應(yīng)的 loader 進(jìn)行轉(zhuǎn)換的某個(gè)或某些文件。
- use 屬性，表示進(jìn)行轉(zhuǎn)換時(shí)，應(yīng)該使用哪個(gè) loader。
這就告訴 Webpack 編譯器（compiler）如下信息：
“嘿，webpack 編譯器，當(dāng)你碰到以 .scss 或者 .sass 或者 .module.scss 或者 .module.sass 結(jié)尾的文件時(shí)，在你對(duì)它打包之前，先使用 sass-loader 轉(zhuǎn)換一下?！?/p>
npm run eject此命令會(huì)將腳手架中隱藏的配置都展示出來(lái)，此過程不可逆。
樣式的引入
上面例子中 src/App.js 直接引入 App.scss，使用方式如下：
import React from 'react'
import './App.scss'
function App() {
return (
<div className="App">
<header className="title">
<p>
hello world
</p>
</header>
</div>
)
}
export default App
假如此時(shí)如果在其他組件中引入另一個(gè)樣式文件，若其他樣式文件中有相同的 .title 類名，那么會(huì)造成樣式上的沖突。如果想實(shí)現(xiàn)樣式的模塊化，則需使用 [name].module.scss 方式命名，使用方式如下：
import styles from './index.module.scss'
export default function App() {
return (
<div className={styles.title}>hello world</div>
)
}
這樣就不會(huì)和其他同類名的 .title 沖突了。
<div class="App_title__-GfWs">hello world</div>
提示：要添加 CSS Modules 樣式表，這里必須使用
[name].module.css方式命名，不然會(huì)認(rèn)為是個(gè)常規(guī)的 CSS。另外若使用 Sass、Less 等，只需將[name].module.css改為[name].module.scss即可。
小結(jié)
本節(jié)內(nèi)容主要講解了如何使用 creat-react-app 腳手架快速搭建 React 開發(fā)環(huán)境，學(xué)習(xí)了日常開發(fā)所需要的工具，并寫出一個(gè)簡(jiǎn)單的 hello world 組件。重點(diǎn)是安裝腳手架所需的環(huán)境，注意腳手架對(duì)于環(huán)境的版本要求。我們知道腳手架是基于 Webpack 工具構(gòu)建的，想要更深入的學(xué)習(xí) Webpack，可以詳細(xì)學(xué)習(xí)官網(wǎng)的知識(shí)點(diǎn)。 下一小節(jié)我們要學(xué)習(xí) React 的一些基礎(chǔ)知識(shí)，為后續(xù)章節(jié)打基礎(chǔ)。