React 實戰詳解 - 從react小白到大白
使用create-react-app 腳手架
一 通過create-react-app腳手架 搭建專案
- 首先全域性安裝 create-react-app 腳手架: yarn add -g create-react-app
- 通過create-react-app新建一個專案 npx create-reate-app my-app --typescript
- yarn start 可以發現專案正常啟動了
二 使用sass ,和 css module
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 中修改全域性樣式
// app.modules.scss
.normal {
:global {
.ant-button {
// 此處修改 antd button的樣式,但會在 normal 模組內生效,不會影響到其他地方
}
}
}
- 使用sass和模組化 ,以XXX.module.scss 新建樣式檔案 比如 app.module.scss
三 postCss 處理css相容性(通過加字首的方式)
在package.json 中配置 browserlist 來定義相容的目標瀏覽器
4.配置antd的css樣式問題 (由於yanr add antd 之後直接使用antd元件會出現樣式不能生效的問題)
方法一 全域性引入antd樣式
方法二 webpack配置對antd樣式引入做特殊處理
四 配置路由
- yarn add react-router-dom
2.配置
五 配置redux
1.配置redux
2.通過react-redux 配置redux
3.redux 非同步處理
a redux-thunk的使用
b redux-saga的使用
c redux-observable的使用
4.配置redux 其他中介軟體
六 react開發者工具總結
七 webpack配置
1.webpack打包優化
2.split-chunk 程式碼分割
使用 umi 腳手架
一 通過umi腳手架進行搭建專案
1.全域性安裝腳手架 : yarn add -g umi
2.yarn create @umijs/umi-app
3.安裝依賴 執行 yarn
4.yarn start 介面已經能跑出來了
二 配置sass
由於umi已經配置好了ts 和 less ,可以直接用於開發。如果習慣使用sass的小夥伴只能單獨進行配置了
1.yarn add node-sass sass-loader
2.yarn add -D @umijs/plugin-sass
3.配置 .umirc.ts
{
//...
sass:{} // 在原來基礎上,增加
}
4.將原本的less結尾的樣式檔案,改為scss結尾,再重啟專案即可正常使用sass了
三 dva的使用
四 antd-design-pro 的使用(許可權配置以及國際化)
五 程式碼分割 - split-chunk