React 實戰詳解 - 從react小白到大白

首先全局安裝 create-react-app 腳手架： yarn add -g create-react-app

通過create-react-app建立一個項目 npx create-reate-app my-app --typescript

yarn start 可以發現項目正常啟動了

1.yarn add -D node-sass （腳手架已經幫我們安裝好了sass-loader，并且已經配置好了webpack，不需要我們自己去配置了，隻需要安裝node-sass就行了）

注意：有些時候 安裝node-sass會失敗，可以通過修改安裝源方式解決。在項目根節點建立 .npmrc檔案 ，寫入sass_binary_site=https://npm.taobao.org/mirrors/node-sass/ ，然後重新執行yarn add -D node-sass即可。 如果遇到sass v5.0.0 不相容 4.0.0的報錯，可先解除安裝node-sass ： yarn remove node-sass ，再定向安裝指定版本的node-sass： yarn add -D [email protected] ，注意先把dev-server伺服器關掉，重新安裝之後再啟動，否則可能出現安裝不成功的情況。

2. 腳手架已經幫我們配置css-module 的webpack配置了，隻需要我們 建立樣式檔案以 XXX.module.css（scss、less）的方式即可

注意：css-module 中修改全局樣式

使用sass和子產品化 ，以XXX.module.scss 建立樣式檔案 比如 app.module.scss

在package.json 中配置 browserlist 來定義相容的目标浏覽器

4.配置antd的css樣式問題 （由于yanr add antd 之後直接使用antd元件會出現樣式不能生效的問題）

方法一 全局引入antd樣式

方法二 webpack配置對antd樣式引入做特殊處理

yarn add react-router-dom

2.配置

yarn add redux react-redux redux-thunk redux-saga redux-observable

1.配置redux(不使用react-redux)

2.通過react-redux 配置redux

3.redux 異步處理

a redux-thunk的使用

b redux-saga的使用

c redux-observable的使用

4.配置redux 其他中間件

1.webpack打包優化

2.split-chunk 代碼分割

1.全局安裝腳手架 ： yarn add -g umi

2.yarn create @umijs/umi-app

3.安裝依賴 執行 yarn

4.yarn start 界面已經能跑出來了

由于umi已經配置好了ts 和 less ，可以直接用于開發。如果習慣使用sass的小夥伴隻能單獨進行配置了

1.yarn add node-sass sass-loader

2.yarn add -D @umijs/plugin-sass

3.配置 .umirc.ts

4.将原本的less結尾的樣式檔案，改為scss結尾，再重新開機項目即可正常使用sass了

三 dva的使用

四 antd-design-pro 的使用（權限配置以及國際化）

五 代碼分割 - split-chunk