## [初始化項目](https://facebook.github.io/create-react-app/))
+ 安裝
```
npx create-react-app myreact
```
+ 結構
- package.json：包管理文件
- node_modules：局部安裝的第三方模塊
- .gitignore：被git忽略的目錄或者文件
- src：開發目錄
- index.js：整個項目的入口文件
- app.js：根組件
- public：存放項目模板文件，以及通過href或者src引入的外部文件
- readme.md：說明文檔
+ vscode插件：ES7 React/Redux
+ react-devtools
## [配置](https://www.npmjs.com/package/react-app-rewired)
+ 安裝
- 修改默認配置
```
npm install react-app-rewired customize-cra --save-dev
```
- 使用路由
```
npm install react-router-dom --save
```
- 使用sass
```
npm install node-sass --save-dev
```
- 使用多個類名
```
npm install classnames --save
```
+ 新建
- 在項目根目錄下新建一個config-overrides.js
```
const {override,addWebpackAlias,useEslintRc} = require('customize-cra')
const path = require('path')
module.exports = override(
addWebpackAlias({
'@': path.resolve(__dirname, 'src/'),
}),
useEslintRc()
)
```
- 在項目根目錄下新建一個.eslintrc
```
{
"extends": "react-app",
"rules": {
"no-undef": "off",
"no-restricted-globals": "off",
"no-unused-vars": "off",
"eqeqeq": "off"
}
}
```
+ 使用
- 修改項目根目錄下的package.json中的scripts
```
"scripts": {
"dev": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test --env=jsdom",
"eject": "react-scripts eject"
}
```
- 啟動項目
```
npm run dev
```
- 將css文件全部改成scss
## [路由](https://reacttraining.com/react-router/web/guides/quick-start)
+ index.js
- 引入
```
import {HashRouter} from 'react-router-dom'
```
- 使用
```
<HashRouter><App /></HashRouter>
```
+ App.js
- 引入
```
import {Route,Switch,Link,NavLink} from 'react-router-dom'
import routes from './routes.js'
```
- 使用
```
<Switch>
{
routes.map(e => <Route {...e} />)
}
</Switch>
```
+ routes.js
- 從vies目錄引入路由組件
- 在routes中添加這個路由的path、key和component
- 添加exact為true，表示嚴格匹配
## [組件](https://react.docschina.org/)
- 類型
- 按定義方式
- 函數：一個函數就相當於一個組件
- 無狀態：只能接收props，沒有state、ref和生命周期
- 受控：當props改變，組件的內容才會更新
- 展示：充當UI組件
- 類：使用es6的class定義一個組件
- 有狀態：既能接收props，又能定義state，還有ref和生命周期
- 非受控：除了props，改變state，視圖也會變
- 處理邏輯：調用函數，改變狀態，渲染視圖
- 按功能划分
- 路由：在views目錄下
- 復用：在components目錄下
- 創建
- 引入
- 類庫
```
import React, {Component} from 'react'
import classnames from 'classnames'
```
- 樣式
- 全局樣式
```
import './index.scss'
```
- 模塊化樣式
```
import styles from './index.module.scss'
```
- 生成
- 使用jsx語法生成一個react元素，它是html與js的結合體
- 函數
- 類
- ES6的class
- 繼承
- 標簽
- 可以在多個標簽的外層添加一對小括號
- 有且僅有一個頂層標簽
- 樣式
- 類名不是class，而是className
- 動態
- 內聯：style等於花括號，再接一個json對象
- 類名：使用classnames，當成函數來調用
- 事件
- 屬性名是小駝峰，屬性值是花括號，再接一個函數
- 事件監聽函數中沒有this，需要設置this，方法有3種
- 1.在花括號中，對函數使用bind
- 2.在contructor中，對函數使用bind
- 3.使用箭頭函數
- 參數
- 默認參數是事件對象
- 可以從外部傳入參數，方法有兩種
- 對函數使用bind方法，第一個參數是this，后面就是傳入的參數
- 在回調函數的外層套上一個函數，父函數的默認參數是事件對象，子函數接收所有參數
- 列表
- 使用map方法生成react元素
- 每個元素必須有key，並且不同出現重復
- 導出
```
export default 組件名
```
## 組件
+ 條件渲染
- 不能在花括號里寫if條件語句
- 可以在花括號里寫邏輯運算符
- &&和||
- 三元表達式
+ 生命周期函數
- constructor：只會在組件初始化的時候執行一次
- render：第一次以及之后組件發生更新，都會執行render
- componentDidMount：當前組件內的DOM節點全部加載完畢
- shouldComponentUpdate：當props或state發生變化，在重新渲染執行之前
- componentDidUpdate：當props或state發生變化，並且shouldComponentUpdate返回為true
- componentWillUnmount：當組件被銷毀
- UNSAFE_componentWillMount：當組件被渲染出來之前
- UNSAFE_componentWillReceiveProps：當組件收到新的props之前
+ ref
- 在construtor中，創建一個ref變量
- 在jsx中，給目標節點添加一個ref屬性，等於這個ref變量
- 獲取這個變量，結果的current屬性就是要獲取的目標節點
+ 純組件
- React自帶的一個API
- 當props或state發生改變時，淺比較改變前后的值，如果不變，就不會重新渲染
+ 高階組件
- React中的一種設計模塊
- 其實就是一個函數，傳入的參數是一個組件，導出的結果是一個新的組件
- 使用ES7的裝飾器語法
- 安裝插件
```
npm install @babel/plugin-proposal-decorators --save-dev
```
- 在config-overrides.js文件中添加
```
addDecoratorsLegacy()
```
- 先使用@加上高階組件的名稱，再正常導出被裝飾的組件
## [antd-design-mobile](https://mobile.ant.design/docs/react/introduce-cn)
+ 安裝
```
npm install antd-mobile --save
npm install babel-plugin-import --save-dev
```
+ 在config-overrides.js文件中添加如下代碼
```
fixBabelImports('import', {
libraryName: 'antd-mobile',
style: 'css',
})
```
+ 使用：在jsx中，直接當成標簽來使用
+ 如果需要引入外部文件
- 放在assets目錄下
- 參與wepback的打包流程
- 使用相對路徑或者@
- 放在public目錄下
- 沒有參與打包
- 路徑抬頭是%PUBLIC_URL%/
## [axios](https://www.kancloud.cn/yunye/axios/234845)
+ 對比fetch
- ES7引入的API
- 語義化，簡潔，但是目前存在諸多問題
+ 安裝
```
npm install axios --save
```
+ 配置
- 新建一個axios.js文件，添加以下內容
```
import axios from 'axios'
import {Toast} from 'antd-mobile'
axios.interceptors.request.use(function(config){
Toast.loading('加載中')
return config
}, function (error) {
return Promise.reject(error)
});
axios.interceptors.response.use(function(response){
Toast.hide()
return response.data
}, function (error) {
return Promise.reject(error)
})
export default axios
```
- 在index.js文件中，將axios添加到全局
- 創建上下文對象
- 使用Provider組件，在value中添加axios
+ 使用
- 在某個組件中，指定上下文對象
- 通過this.context.axios獲取axios
+ 圖片
- 本地圖片
- img標簽
- 如果src的值是寫死的，直接寫圖片的相對路徑，也可以將相對路徑改成@抬頭
- 無論src的值是否寫死，都必須結合require方法
- 背景圖片
- 如果將樣式寫在style中，url里面的路徑必須是相對路徑
- 如果將樣式寫在標簽上，必須結合require方法
- 服務器返回的圖片
- 后端不要返回請求路徑前面的域名和端口號
- 前端在index.js文件中
- 配置http請求的公共路徑
```
const commonUrl = `http://${process.env.NODE_ENV == 'development' ? 'localhost' : 'xiaobulaoshi.club'}:8888`
```
- 添加到Provider組件的value中
- 前端指定當前組件的上下文對象
- 前端在服務器返回的圖片路徑前面，手動添加this.context.commonUrl
+ 代理
- 安裝插件
```
npm install http-proxy-middleware --save-dev
```
- 在src目錄下新建一個setupProxy.js文件，添加
```
const proxy = require('http-proxy-middleware')
module.exports = function(app){
app.use(
proxy(
'/xiaobu/api',
{
target: 'http://localhost:8888',
secure: false,
changeOrigin: true,
pathRewrite: {
'^/xiaobu/api': ''
}
}
)
)
}
```
- 在axios的請求攔截器中添加axios請求的路徑抬頭
```
config.url = '/xiaobu/api' + config.url
```
- 將請求路徑中的http://locahost:8888去掉
```