react实战——react旅游网

慕课网react实战

• 搭建项目
• 问题
• • 1.按照官网在index.tsx中引入antd出错？
  • 2.typescript中如何使用react-router
  • 3.react-router
  • • 3.1 V6
    • 3.2 V5
    • 3.3V6实现私有路由
    • 4.函数式组件接收props参数时定义数据接口？
    • 5.使用TypeScript开发react项目：
    • 6.要使一个组件拥有路由组件的history、location、match等属性
    • 7.书写代码规范上的一些问题
    • 8.使用redux和react-redux
    • • 8.1使用react-redux
      • 8.2类式组件中使用react-redux
      • 8.3函数式组件中使用react-redux（使用hooks函数）
      • 8.4使用redux
      • 8.5异步处理redux-thunk——可以在action中处理异步任务
      • 8.6自定义中间件
      • 8.7redux-tooltik
      • 9.I18n网站国际化
      • 10.获得全局数据的两种方式？
      • • 10.1 在类组件中使用高阶函数
        • 10.2在函数式组件中使用hooks
        • 11.如何处理请求得到的html字符串为网页
        • 12.登录相关
        • • 12.1单点登录与JWT
          • 13报错
          • 网络请求
          • • axios
            • 对悬空数据做预处理！！！！！
            • 避免在useEffect��一直请求网络数据

              搭建项目

              创建基于typescript的react项目：create-react-app react-travel --template typescript

              安装依赖：npm install typescript-plugin-css-modules --save-dev

              问题

              1.按照官网在index.tsx中引入antd出错？

              出错时因为路径问题：官网中是：import 'antd/dist/antd.css';,但是在依赖目录中没有antd.css文件，只有reset.css，所以改变路径即可：

              import 'antd/dist/reset.css';

              2.typescript中如何使用react-router

              1. react-router并没有提供原生typescript的支持，所以我们需要安装react-router的类型定义，

                 npm install --save-dev @types/react-router-dom

                 typescript的支持我们只在开发过程中使用，所以安装的开发依赖中-dev（结余上线后的体积）

              2. 怎么样我们才能知道一个框架有没有原生的支持typescript呢：

                 -上网搜

                 -直接使用，没有出现类型的提示警告之类的，就是支持的。

              3.react-router

              3.1 V6