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 node-sass@4.14.1 ，注意先把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