5.20 7.7 7.8 React 17 系统精讲 结合TS打造旅游电商平台

作者： 作者的头像   bubboo123 ,  2022-05-20 11:14:04 ,  所有人可见 ,  阅读 788

1


第2章 项目初始化

npx create-react-app my-app
17.png

第3章 【基础篇】React 与 TypeScript

创建TS的React项目

18.png

如果要使用TS，就这样配置

4.png

3-4 【组件化】初识React函数式组件

666.png
1.png

3-5 【概念理解】JSX 编程思维

2.png

3.png
4.png
5.png
5.png
6.png
7.png

3-6 配置React的CSS模组

6.png

8.png

导入css报错，是因为typescript无法识别css格式的文件，给css文件加上类型的定义声明

10.png

11.png
然后就可以看到引入成功了
12.png

13.png

上述就是JSS了

7.png{width=81%}

装插件 解析CSS文件，并且生成typescript对应的引用类型，且对css也有智能提示了

9.png

14.png

11.png
12.png

3-8 【资源配置】加载媒体与字体文件

15.png
17.png
19.png

3-9 【组件化】创建class类组件

1.png

3-11 State vs Props

2.png
3.png
4.png

5.png

Props是只读的

6.png

8.png

3-12 【事件驱动】React Event 事件处理

9.png

10.png
11.png

12.png

3-13 【异步处理】获取网络API数据

13.png
14.png

3-14 【异步处理】setState的异步开发

经典面试题
16.png
1.png

当我们使用setState的时候，只要生命周期不变化，还是基于上一次state进行更新

2.png

解决方法:setState的第一个参数传入函数，这样点击1次后就能增加2了

3.png

3-15 【死与新生】探索React组件的生命周期

4.png

3-16 React17版本变化

14.png

第4章 【基础篇】React Hooks

4-2 【概念理解】 什么是钩子【Hooks只能在函数式组件内使用】

15.png

5.png

7.png

17.png

18.png

1.png

8.png
2.png

4-3 【状态钩子】使用useState管理组件state

9.png

4-4 【概念理解】副作用 side effect

1.png
2.png

3.png

4-5 【副作用钩子】使用useEffect异步获取数据

4.png
5.png

4-6 【副作用钩子】useEffect 使用指南

useEffect的第二个参数

3.png

特别注意async的位置！

4.png{width=88%}
5.png{width=88%}

4-7【全局数据传递】Context 与 useContext

多层 props 传递会导致深度注入：props drilling

9.png

不使用useContext

7.png

使用useContext

8.png

4-8 组件化Context Provider

10.png

注意上面这里使用的是props.children

11.png
12.png

另外为了共享setState，就要新建一个新的Context

1.png
2.png

4-9 withAddToCart()

13.png{width=81%}
14.png{width=78%}

高阶组件也是组件 放进components目录下 一般由with开头

实现添加购物车业务逻辑

2.png
3.png
5.png

4-10 【自定义Hook】 useAddToCart()

17.png
with代表高阶函数，use代表钩子函数
1.png{width=73%}
（并非React特性，所以自定义时无需引入React）

自定义Hook，返回功能函数

3.png

2.png

第5章 【实战项目】项目搭建与首页开发

1.png
2.png

创建项目

  • 【不知道为什么换了镜像源还是巨慢】npx create-react-app react-travel --template typescript
  • 用这个yarn create react-app XXX(项目名称) --template typescript

3.png

4.png

antd使用

先下载antd依赖

4.png

antd icons的导入使用

4.png

然后在index.tsx中import "antd/dist/antd.css"

5.png

@font-face的使用

5.png

component小技巧

2.png
1.png
3.png

Grid栅格

5.png

第6章 【路由系统】React Router Dom

6.png 7.png 8.png

6.png
7.png

有的第三方框架没有原生支持typescript，所以需要安装类型支持npm install @type/xxx

8.png

直接使用路由组件里的render属性直接渲染jsx代码

9.png 10.png

12.png
9.png

10.png

11.png

6-6 【路由搭建】withRouter 与 useRouter

12.png

使用高阶函数

14.png

使用钩子

13.png

6-7 【路由搭建】Link 与动态导航

15.png

第7章 【Redux 入门】实战项目架构设计

16.png
1.png 2.png 3.png

7-3 【创建state】createStore

2.png
1.png

7-4 【访问state】获取store数据

3.png

7-5 【更新state】Action与Reducer处理

4.png

7-6 【订阅state】store的连接与订阅

5.png
6.png

7-7 【i18n】完成网站语言切换

react-i18next配置 【原生支持typescript】
4.png{width=81%} npm install react-i18next i18next --save
5.png

配置之后的工作中可复用

6.png

高阶函数式使用

8.png

导入小写的withTranslation，且注意组件是从第二个小括号传入

10.png

8.png{width=61%}
13.png{width=71%}

钩子函数式使用

14.png
2.png
1.png这个问题回头再处理

7-8 【redux重构】action 的拆分与统一

3.png
9.png

7-9 【redux封装】在类组件中使用react-redux

react-redux官网

安装react-redux的类型声明文件

4.png 5.png

7-10 【redux封装】在函数式组建中使用react-redux

10.png

13.png
14.png
16.png

第8章 【Redux进阶】异步AJAX与redux中间件

6.png 7.png

8-4

npm install axios，它自带typescript支持

import axios from "axios"

17.png
1.png

数据请求回来前DOM刚渲染完，悬空操作，Loading

3.png

error和loading类似

2.png

配置axios

Snipaste_2022-07-07_11-23-27.png

- 设计模式

Snipaste_2022-07-07_11-30-40.png
Snipaste_2022-07-07_11-30-57.png
Snipaste_2022-07-07_11-31-13.png
Snipaste_2022-07-07_11-31-23.png
Snipaste_2022-07-07_11-32-07.png
Snipaste_2022-07-07_11-32-25.png
Snipaste_2022-07-07_11-32-37.png
Snipaste_2022-07-07_11-32-49.png

Snipaste_2022-07-07_13-22-40.png

npm install redux-thunk，自带typescript

import thunk from "redux-thunk"

import applyMiddleware from "redux"

Snipaste_2022-07-07_13-40-51.png
Snipaste_2022-07-07_13-46-43.png

Snipaste_2022-07-07_13-53-18.png

Snipaste_2022-07-07_13-53-00.png

异步aciton返回函数，函数里写异步逻辑

Snipaste_2022-07-07_13-56-07.png Snipaste_2022-07-07_13-56-29.png

Snipaste_2022-07-07_14-01-00.png
Snipaste_2022-07-07_14-01-12.png

Snipaste_2022-07-07_14-02-16.png

Snipaste_2022-07-07_14-02-32.png
Snipaste_2022-07-07_14-03-52.png

Snipaste_2022-07-07_14-04-06.png

Snipaste_2022-07-07_14-05-09.png
Snipaste_2022-07-07_14-05-25.png

8-9 自定义中间件 actionLog

Snipaste_2022-07-07_14-11-44.png

Snipaste_2022-07-07_14-09-57.png

Snipaste_2022-07-07_14-10-29.png

Snipaste_2022-07-07_14-12-51.png

8-10

Snipaste_2022-07-07_14-13-19.png
Snipaste_2022-07-07_14-14-34.png
Snipaste_2022-07-07_14-14-53.png
Snipaste_2022-07-07_14-15-06.png
Snipaste_2022-07-07_14-15-15.png
Snipaste_2022-07-07_14-15-57.png
Snipaste_2022-07-07_14-16-53.png

第9章【Redux-Tooklkit】完成产品搜索与产品详情

Snipaste_2022-07-07_14-26-36.png
Snipaste_2022-07-07_14-26-58.png

Snipaste_2022-07-07_14-27-28.png

9-5 React Toolkit

Snipaste_2022-07-07_15-58-47.png

Snipaste_2022-07-07_16-00-12.png

核心createSlice

Snipaste_2022-07-07_16-03-09.png 

import { createSlice, createAction } from '@reduxjs/toolkit'
import type { PayloadAction } from '@reduxjs/toolkit'
import { createStore, combineReducers } from 'redux'

const incrementBy = createAction<number>('incrementBy')
const decrementBy = createAction<number>('decrementBy')

const counter = createSlice({
  name: 'counter',
  initialState: 0 as number,
  reducers: {
    increment: (state) => state + 1,
    decrement: (state) => state - 1,
    multiply: {
      reducer: (state, action: PayloadAction<number>) => state * action.payload,
      prepare: (value?: number) => ({ payload: value || 2 }), // fallback if the payload is a falsy value
    },
  },
  // "builder callback API", recommended for TypeScript users
  extraReducers: (builder) => {
    builder.addCase(incrementBy, (state, action) => {
      return state + action.payload
    })
    builder.addCase(decrementBy, (state, action) => {
      return state - action.payload
    })
  },
})

const user = createSlice({
  name: 'user',
  initialState: { name: '', age: 20 },
  reducers: {
    setUserName: (state, action) => {
      state.name = action.payload // mutate the state all you want with immer
    },
  },
  // "map object API"
  extraReducers: {
    // @ts-expect-error in TypeScript, this would need to be [counter.actions.increment.type]
    [counter.actions.increment]: (
      state,
      action /* action will be inferred as "any", as the map notation does not contain type information */
    ) => {
      state.age += 1
    },
  },
})

const reducer = combineReducers({
  counter: counter.reducer,
  user: user.reducer,
})

const store = createStore(reducer)

store.dispatch(counter.actions.increment())
// -> { counter: 1, user: {name : '', age: 21} }
store.dispatch(counter.actions.increment())
// -> { counter: 2, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply(3))
// -> { counter: 6, user: {name: '', age: 22} }
store.dispatch(counter.actions.multiply())
// -> { counter: 12, user: {name: '', age: 22} }
console.log(`${counter.actions.decrement}`)
// -> "counter/decrement"
store.dispatch(user.actions.setUserName('eric'))
// -> { counter: 12, user: { name: 'eric', age: 22} }

configureStore

9-6 实战

安装依赖 npm install @reduxjs/toolkit，支持typescript

Snipaste_2022-07-07_16-24-57.png
使用Redux Toolkit之后，就不用分开创建action和reducer了。每个action都有对应的处理函数。注意reducers是一个对象
Snipaste_2022-07-07_16-33-51.png
Snipaste_2022-07-07_16-35-54.png

Snipaste_2022-07-07_16-37-37.png

Snipaste_2022-07-07_16-39-39.png

9-8 React Toolkit中使用Redux Thunk

Snipaste_2022-07-07_16-41-16.png

createAsyncThunk

Snipaste_2022-07-07_16-44-27.png

Snipaste_2022-07-07_16-49-37.png

9-9 完成产品搜索页面

Snipaste_2022-07-07_16-50-25.png

第10章 【顶部导航】用户登陆

Snipaste_2022-07-07_21-39-09.png

Snipaste_2022-07-07_21-45-23.png

Snipaste_2022-07-07_21-46-12.png
Snipaste_2022-07-07_21-46-24.png
Snipaste_2022-07-07_21-47-05.png

10-7 单点登录与JWT

Snipaste_2023-04-05_11-38-17.png
Snipaste_2022-07-07_21-47-05.png
Snipaste_2022-07-07_21-54-26.png
因为要在服务器保存用户的session，所以称之为有状态登录。
Snipaste_2022-07-07_21-54-40.png

Snipaste_2022-07-07_21-54-56.png

Snipaste_2022-07-07_21-55-53.png
Snipaste_2022-07-07_21-59-00.png
Snipaste_2022-07-07_21-57-30.png

Snipaste_2022-07-07_21-58-37.png

10-8 JWT的原理

Snipaste_2022-07-07_22-26-07.png
Snipaste_2022-07-07_22-26-52.png

10-9

Snipaste_2022-07-07_22-27-19.png

10-10

安装解码插件 npm install jwt-decode

Snipaste_2022-07-07_22-39-27.png

Snipaste_2022-07-07_22-38-56.png

Snipaste_2022-07-07_22-41-09.png

第11章 【综合运用】 购物与订单

Snipaste_2022-07-07_22-45-04.png
Snipaste_2022-07-07_22-46-12.png

Snipaste_2022-07-07_22-47-29.png

第12章 【项目上线】网站测试与部署

  • 方案1：使用本地服务器来托管网站
  • 方案2：容器化部署

静态部署

搭建本地服务器
  • npm install -g serve
  • serve -s build
  • 如果要改端口serve -s build -l 4000
其他部署方式还要看文档 Create React App官网

容器化使用docker部署

7.png{width=81%}

8.png{width=81%}

9.png{width=81%}

10.png{width=81%}

开启虚拟服务

12.png{width=52%}

下载docker ，然后命令行通过docker --version查看docker版本

利用docker搭建一个容器化的web服务器

1.拉取一个linux操作系统centos镜像：docker pull centos:latest
2.运行docker images查看当前所有的镜像
3.（容器化部署）运行centos docker镜像docker run -p 9566:80 --name web -i -t centos /bin/bash
  • -p代表运行端口，9566是本机端口，80是docker内部的默认端口
  • name代表docker容器运行成功后给它分配一个叫web的名字
  • -i -t通常会一起使用，表示交互模式，运行并且进去这个docker容器
  • 当我们按下回车之后，我们基于docker的容器化linux操作系统就运行起来了，同时就进去了这个虚拟系统
4.给这个linux系统安装网站的托管服务器，服务器推荐使用 nginx
5.安装nginx服务器首先添加安装源rpm ivh http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

13.png

6.然后执行yum install -y nginx安装 nginx，之后执行whereis nginx就可以看到 nginx 的安装路径了（之后react网站构建打包完成后就是放到这个文件夹中）
7.运行nginx命令把服务器运行起来（验证：浏览器输入localhost:9566）

14.png{width=81%}

我们可以把操作系统、运行环境、脚本、程序全部都打包在一起制作成镜像文件，就相当于给系统设置一个还原点

两种方式构建Docker镜像

  • docker commit
  • docker build + Dockerfile[推荐使用]

在项目中创建一个文件：Dockerfile（实际上就是构造Docker镜像的脚本），没有后缀，然后文件内容编辑如下：

15.png

终端输入docker build构建镜像+-t react-web起名+.

输入docker images查看镜像是否已存在

16.png

容器化镜像，docker run -d -p 12231:80 react-web，这里的12231只要不是被占用的端口就可以。然后项目就成功部署在docker中了

运行docker ps检查一下

17.png

浏览器输入localhost:12231

以上都是容器化部署在本地电脑上，现在要开始容器化部署在阿里云ECS上了

容器化部署在阿里云ECS

  • 首先注册阿里云账号并充值100块以上

阿里的两个服务

18.png{width=52%}

容器化部署的大致思路

19.png

1.创建云服务器ECS实例
2.点击实例列表中的远程连接，方式选Workbench远程连接然后输入密码
3.通过以下四个命令添加yum源

20.png

4.安装docker yum install docker-io -y
5.启动docker systemctl start docker
6.查看安装结果docker info
7.启动阿里云的容器镜像服务
  • 先开启阿里云容器镜像服务，然后进入镜像加速器，按照指引把命令复制到终端运行（然后docker加速器就添加成功了）

21.png

8.接下里就是本课第五步，本地构建课程实战项目的docker镜像
  • 打开命令行，cd 到项目文件夹
  • 使用命令docker build -t react-web .，然后镜像就创建成功了
  • 运行docker images查看一下
    22.png
9.课程的第六步：在阿里云镜像服务中创建我们的私人docker镜像仓库
  • 打开阿里云容器镜像服务，点击镜像仓库，点击创建镜像仓库（代码源选本地仓库），然后点击仓库进入仓库的操作文档
    23.png
  • 首先复制第一条命令登录仓库，然后填写阿里云登陆密码
  • 然后复制第3命令去推送镜像，其中命令里的版本号是自定义的（比如1.0.0），ImageId可以在docker images里找到。
    24.png
  • 在镜像仓库文档页面左侧点击镜像版本，就可以看到刚上传好的镜像了
  • 接下来就要在ECS服务器上部署这个docker镜像了，所以到仓库基本信息页复制第2条命令
  • 拉取成功之后就要部署这个镜像了docker run -d -p 12231:80 第2里的命令pull后面跟着的仓库地址
  • 然后docker就运行起来了，运行docker ps查看一下状态
10.由于ECS服务器的实例安全策略，我们暂时没法从外部访问项目的端口12231，所以我们需要配置一下
  • 打开ECS实例列表，点击实例名称，在基本信息栏中找到配置安全组规则，然后在普通安全组中找到配置规则，点击手动添加，在端口范围目的中输入12231/12231，授权对象源输入0.0.0.0/0【表示不对外部 ip 做任何显示】
    25.png
  • 然后等待几分钟，等安全策略规则响应，然后回到实例列表，复制ECS实例公网地址+端口号:12231到浏览器

0 评论