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

使用create-react-app 腳手架

一 通過create-react-app腳手架 搭建項目

1. 首先全局安裝 create-react-app 腳手架： yarn add -g create-react-app
2. 通過create-react-app新建一個項目 npx create-reate-app my-app --typescript
3. 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 模塊內生效，不會影響到其他地方
            }
      }
}

3. 使用sass和模塊化 ，以XXX.module.scss 新建樣式文件 比如 app.module.scss

三 postCss 處理css兼容性（通過加前綴的方式）

在package.json 中配置 browserlist 來定義兼容的目標瀏覽器

4.配置antd的css樣式問題 （由於yanr add antd 之後直接使用antd組件會出現樣式不能生效的問題）
方法一 全局引入antd樣式
方法二 webpack配置對antd樣式引入做特殊處理

四 配置路由

1. yarn add react-router-dom
   2.配置

//app.tsx
import {HashRouter as Router,Route,Switch,Link,NavLink,Redirect} from 'react-router-dom';
//...
<Router>
      <header>
            <NavLink to={{pathname:'/todo-list'}} activeClassName={'active'}><span>todoList</span></NavLink>
            <NavLink to={{pathname:'/shopping'}} activeClassName={'active'}><span>購物車</span></NavLink>
      </header>
      <Switch>
            <Redirect from="/" to="todo-list" />
            <Route path='/shopping' exact={true} component={Shopping}/>
      </Switch>
</Router>

五 配置redux

yarn add redux react-redux redux-thunk redux-saga redux-observable
1.配置redux(不使用react-redux)

// app.tsx
import {createStore} from '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