获取资料

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

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

第1章 [前言]这,不仅仅是一门课程的开始

本章中,将向大家介绍本门课的相关信息,包括你能学到的知识概览、最终项目效果、学习所需的知识储备、课程讲解方式、推荐的学习方法以及未来的更新计划等等。

共 1 节 (12分钟) 收起列表

1-1 课前须知,这里有你需要了解得一切 (12:00)

第2章 [基础篇]配置React与TypeScript工作环境

本章开始,我们将正式开启React的学习之旅,首先让我们一起来学习,如何搭建开发环境,并学会如何启动一个react + typescript 的项目。

共 7 节 (36分钟) 收起列表

2-1 带着问题来学习

2-2 [环境搭建]开始我们的第一个React项目 (07:46)

2-3 [项目启动]使用create-react-app快速搭建React (09:55)

2-4 [延伸阅读]NPM vs YARN

2-5 [TypeScript配置]tsconfig.json详解 (11:35)

2-6 [延伸阅读]tsconfig.json编译器配置文档

2-7 [TypeScript配置]深挖TS编译流程 (06:07)

第3章 [基础篇]React 与 TypeScript

React是什么?他的出现解决了什么问题?让我们通过制作一个购物网站来认识react的基础知识吧。在本章中,将会围绕类组件的知识点带同学们慢慢领悟React的特征。

共 17 节 (110分钟) 收起列表

3-1 带着问题来学习

3-2 章节总览 (02:54)

3-3 [概念理解]React的前世今生 (08:09)

3-4 [组件化]初识React函数式组件 (12:48)

3-5 [概念理解]JSX 编程思维 (10:53)

3-6 [组件化]配置React的CSS模组 (13:50)

3-7 [延伸阅读]CSS in JS (JSS)

3-8 [资源配置]加载媒体与字体文件 (05:51)

3-9 [组件化]创建class类组件 (08:53)

3-10 [延伸阅读]React的行内样式与CSS

3-11 [概念理解]State vs Props (05:56)

3-12 [事件驱动]React Event 事件处理 (12:32)

3-13 [异步处理]获取网络API数据 (09:54)

3-14 [异步处理]setState的异步开发 (06:01)

3-15 [死与新生]探索React组件的生命周期 (06:50)

3-16 [概念理解]React 17 版本变化 (05:24)

3-17 作业节

第4章 [基础篇]React Hooks

本章将会基于react hooks 继续完成购物车组件,并通过函数式组件来学习hooks相关知识与技巧。

共 11 节 (83分钟) 收起列表

4-1 带着问题来学习

4-2 [概念理解] 什么是钩子(hooks) (09:14)

4-3 [状态钩子]使用useState管理组件state (08:01)

4-4 [概念理解]副作用 side effect (05:31)

4-5 [副作用钩子]使用useEffect异步获取数据 (10:43)

4-6 [副作用钩子]useEffect 使用指南 (10:35)

4-7 [全局数据传递]Context 与 useContext (07:23)

4-8 [全局数据传递]组件化Context Provider (13:09)

4-9 [高阶组件HOC]withAddToCart() (11:24)

4-10 [自定义Hook]useAddToCart() (06:31)

4-11 作业节

第5章 [实战项目]项目搭建与首页开发

掌握基础概念以后就可以正式进入课程的实战演练部分。本章,我们将会搭建实战项目,从整体上学习实战项目的结构、学习如何给项目划分功能模块、并且学会如何更合理的配置前端项目。实战项目中也将全面使用react hooks。

共 9 节 (69分钟) 收起列表

5-1 带着问题来学习

5-2 [项目规划]网站开发设计指南 (09:43)

5-3 [项目启动]系统设计与项目初始化 (08:45)

5-4 [主页开发]Header、Footer (16:03)

5-5 [项目重构]组件化思想实践 (05:50)

5-6 [主页开发]走马灯与侧边栏多重菜单 (12:53)

5-7 [主页开发]热门产品推荐 (13:46)

5-8 [实战任务]开发合作企业组件 (01:49)

5-9 作业节

第6章 [路由系统]React Router Dom

构建和优化一个合理的路由架构是前端攻城狮必须掌握的技能。在本章中,课程会以react-router-dom为例,学会如何使用组件化的思想搭建一个简单、高效、可拓展的路由系统。

共 8 节 (57分钟) 收起列表

6-1 带着问题来学习

6-2 [概念理解]路由与SPA (06:27)

6-3 [路由初始化]配置react-router (12:10)

6-4 [路由架构]基础路由系统 (09:04)

6-5 [路由搭建]页面导航 (14:17)

6-6 [路由搭建]withRouter 与 useRouter (10:47)

6-7 [路由搭建]Link 与动态导航 (03:49)

6-8 作业节

第7章 [Redux 入门]实战项目架构设计

redux是目前react中最流行的架构模式,本章将会通过网站的i18n国际化语言切换为案例,一步一步学会如何创建状态仓库store、如何实现store的链接与订阅、如何拆分合并reducer,以及如何统一管理action。除此以外,我们还会学习如何使用TypeScript来处理redux相关代码的强类型定义。…

共 11 节 (118分钟) 收起列表

7-1 带着问题来学习

7-2 [概念理解]什么是redux? (12:15)

7-3 [创建state]createStore (13:04)

7-4 [访问state]获取store数据 (07:27)

7-5 [更新state]Action与Reducer处理 (11:50)

7-6 [订阅state]store的连接与订阅 (09:59)

7-7 [i18n]完成网站语言切换 (22:14)

7-8 [redux重构]action 的拆分与统一 (14:24)

7-9 [redux封装]在类组件中使用react-redux (15:39)

7-10 [redux封装]在函数式组建中使用react-redux (10:52)

7-11 作业节

第8章 [进击的Redux]异步AJAX与redux中间件

前后端分离架构是目前网站开发的主流技术,本章我们将会学习如何在react项目中通过AJAX进行http数据访问,并通过redex-thunk来完成redux架构中异步action的处理方法。

共 10 节 (88分钟) 收起列表

8-1 带着问题来学习

8-2 [概念理解]RESTful (09:08)

8-3 [API说明]课程后端在哪里?

8-4 [API连接]AJAX 异步获取推荐数据 (16:13)

8-5 [概念理解]Redux vs MVC (06:09)

8-6 [reducer管理]combineReducers (20:23)

8-7 [中间件]使用redux-thunk中间价实现异步action (13:16)

8-8 [中间件]什么是中间件 (08:41)

8-9 [中间件]自定义中间件 actionLog (07:19)

8-10 [RESTful进阶(选修)]Richardson成熟度模型与HATOAS (06:19)

第9章 [Redux-Toolkit]完成产品搜索与产品详情

本章,我们来完成项目的产品模块,包括产品的搜索、过滤、分页、以及数据塑形,同时我们也会学习如何进行产品相关页面ui的布局,完成旅游路线搜索页面、旅游路线详情页面等等。

共 9 节 (117分钟) 收起列表

9-1 带着问题来学习

9-2 章节总览 (04:44)

9-3 [详情页面搭建 1]页面框架、详情与日期选择 (24:53)

9-4 [详情页面搭建 2]页面框架、详情与日期选择 (12:58)

9-5 [概念理解]什么是redux-toolkit (15:31)

9-6 [redux-toolkit]createSlice、reducer、与immer (18:24)

9-7 [概念理解]createAsyncThunk 理论基础 (06:52)

9-8 [redux-toolkit]sotre配置(configureStore)与异步处理(createAsyncThunk) (11:24)

9-9 [综合运用]搜索页面 (22:06)

第10章 [顶部导航]用户登陆

作为一个电商平台,用户的登陆以及注册永远是核心功能。本章我们将会学习如何使用JWT(json web token)来实现react网站的无状态登陆,使用redux来全局管理用户状态,并且通过Redux-persist来持久化网站状态。除此以外,我们还会学习react的表单,以及如何使用async/await模式处理异步数据请求。…

共 11 节 (87分钟) 收起列表

10-1 带着问题来学习

10-2 [布局重构]页面布局 (12:44)

10-3 [注册页面]Antd + ts 表单处理 (09:08)

10-4 [注册页面]注册业务逻辑处理 (06:37)

10-5 [概念理解]Status Code 的重要性 (04:58)

10-6 [登录页面]用户登录表单与布局 (03:29)

10-7 [概念理解]JWT原理剖析 (05:44)

10-8 [JWT实例]JWT与单点登录实例解释 (09:20)

10-9 [登录页面]SignIn登录业务处理 (13:05)

10-10 [登录页面]SignOut登出业务处理 (10:15)

10-11 [redux-persist]登录持久化 (10:47)

第11章 [综合运用] 购物与订单

本章将会综合运用之前几章所掌握的react与redux技术,实现电商网站最重要的两个功能,“购物”与“订单支付”。本章中,我们将会完成用户的购物车系统、结算系统、在线支付系统、以及订单管理系统。

共 9 节 (64分钟) 收起列表

11-1 带着问题来学习

11-2 [路由进阶]私有路由搭建 (07:59)

11-3 [UI搭建]购物车页面初始化 (08:51)

11-4 [Redux创建]购物车 Slice (08:59)

11-5 [redux连接]加载购物车 (14:19)

11-6 [购物模块完成]购物车下单 (06:16)

11-7 [UI搭建]在线支付页面初始化 (06:10)

11-8 [Redux创建]订单 Slice (06:09)

11-9 [redux连接]完成在线支付 (04:59)

第12章 [项目上线]网站测试与部署

测试与部署是软件开发生命周期的最后一步,本章中,我们将会使用第三方框架来编写测试用例,学习如何进行react组件的测试、如何对redux的action与reducer的进行测试,最后还会学习如何使用docker进行容器化部署,实现在阿里云上线。…

共 9 节 (47分钟) 收起列表

12-1 带着问题来学习

12-2 [章节总览]部署方案介绍 (01:46)

12-3 [静态部署]本地服务器托管 (04:52)

12-4 [概念理解]5分钟带你认识Docker (05:28)

12-5 [速查表]常用的docker命令

12-6 [环境搭建]容器化方案与Docker配置 (07:49)

12-7 [速查表]Dockerfile 语法

12-8 [容器化改造]理解 Dockerfile 全过程 (09:56)

12-9 [容器化上线]实现阿里云部署 (16:14)

第13章 [附录篇]TypeScript语法入门

为方便同学们学习,特将[2小时极速入门 TypeScript]作为课程附录内容赠送提供给大家。在本章中,主要介绍TypeScript 工作流以及编译配置,认识TypeScript 基本特性以及TypeScript 面对对象特性等,帮助同学们轻松上手Typescript常规应用。…

评论0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址