文档是最好的参考资料，你要对解决的问题建立技术思路，然后去文档中找寻框架有没有提供相应的工具

2.1 思路

可以通过react 的creat-react-app来创建项目，有利于快速开始开发，但是脚手架会隐藏很多细节。必要的时候这些细节对我们理解项目有重要的意义，因此我们会采用手动创建一个项目，借此掌握前端工具链的使用。

2.2 项目初始化

2.2.1 初始项目及依赖

  1. //创建项目支持typescript
  2. npx create-react-app mwm-react --template typescript

清理一下脚手架生成的文件，去掉不需要的，创建pages目录放业务页面

├── src src开发目录 │ ├── assets 静态资源 │ ├── components 公共组件 │ ├── layouts 页面布局组件 │ ├── modules 公共业务模块 │ ├── pages 具体业务页面 │ ├── routers 项目路由配置 │ ├── services axios服务等相关 │ ├── stores 全局公共 mobx store │ ├── styles 存放公共样式 │ ├── utils 工具库/通用函数 │ ├── index.html 入口html页面 │ └── main.js 项目入口文件

  • 用css使用css-in-js的方式组织，这样有利于组织组件样式

    1. #安装 emotion
    2. yarn add @emotion/react @emotion/styled
    3. #vscode 要安装vscode-styled-components 显示提示

  • Antd 依赖 ```javascript yarn add antd 在app的src中引入组建和css //App.tsx 这里用less主要是配合craco修改主题配置 import ‘antd/dist/antd.less’ import {Button} from ‘antd’

//修改改主题配置过程可以参考antd文档，这里要注意在安装craco后yan start不能运行，因此要补安装 yarn add react-scripts

  1. <a name="fbkpO"></a>
  2. ### 3.2 界面布局
  3. 使用flexbox布局，能非常快捷的将登陆元素在页面的横轴及纵轴上居中。
  4. > flex布局知识点：[https://www.css88.com/archives/8629](https://www.css88.com/archives/8629)
  5. > Grid布局知识点：[https://www.css88.com/archives/8510](https://www.css88.com/archives/8510)
  7. <a name="yP3lm"></a>
  8. ### 2.3 异步请求与JWT认证
  9. <a name="kzw0C"></a>
  10. #### 2.3.1 Promise
  11. > 可视化javascript事件循环 [https://www.html.cn/web/javascript/15434.html](https://www.html.cn/web/javascript/15434.html)
  12. > 要先理解javascript的事件循环；
  14. > setTimeout(() => {console.log('我执行了！');}, 2000);
  16. > ![image.png](https://cdn.nlark.com/yuque/0/2021/png/691546/1611839356726-d8084ac8-ea2b-4df0-95f3-47fc34a64dcc.png#height=545&id=y6QvK&margin=%5Bobject%20Object%5D&name=image.png&originHeight=1090&originWidth=2432&originalType=binary&ratio=1&size=521379&status=done&style=none&width=1216)
  17. > 1.  greet 如调用栈并执行，打印 hello
  18. > 1. respond如调用栈，由于respond调用了setTimeout，setTimeout入调用栈
  19. > 1. setTimeout执行，发现setTimeout是浏览器原生方法，就将他的回调函数，放入到WEB API中，setTimeout出栈，respond出栈。
  20. > 1. WEB API 中的会调函数1秒后移入到宏任务队列中
  21. > 1. EVENT LOOP机制调宏任务队列中的函数入调用栈执行
  22. > 
  24. ES6中引入了Promise，Promise是一个对象有三种状态：<br />fulfilled: promise 已经被 resolved<br />rejected: promise 已经被 rejected<br />pending: promise 暂时还没有被解决也没有被拒绝<br />Promise的回调函数直接放入**微任务队列中，**微任务队列中的函数要先于宏任务队列中的函数被事件机制调用<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/691546/1611840511376-34a6c883-c5bd-4437-af55-eb63b77e532c.png#height=377&id=vpKgA&margin=%5Bobject%20Object%5D&name=image.png&originHeight=754&originWidth=1364&originalType=binary&ratio=1&size=523374&status=done&style=none&width=682)
  25. <a name="oDw6Y"></a>
  26. #### 2.3.2 Async/Await 
  27. ES7中引入async 和 await 关键字，简化Promise的异步行为。
  29. ```javascript
  30. const one=()=>Promise.resolve("One")
  32. async function myFunc(){
  33.     console.log("异步函数内");
  34.   const res = await one();
  35.   console.log(res);
  36. }
  38. console.log("开始");
  39. myFunc();//异步函数
  40. console.log("结束")
  41. //输出顺序：
  42. 开始
  43. 异步函数内
  44. 结束
  45. One

执行过程如下:

  1. 调用栈执行console.log(“开始”)
  2. 调用栈执行myFunc(), 执行console.log(“异步函数内”)，继续执行遇到await,这个时候将myFunc()移入到微任务队列
  3. 调用栈继续执行console.log(“结束”)
  4. 全局执行上下文环境中没有函数执行，这时事件循环机制从微任务队列中获取myFunc()继续执行

    2.3.3 封装网络请求