React16.4 开发简书项目 从零基础入门到实战

Stella981
• 阅读 1112

第1章 课程导学
本章主要介绍学习react的重要性,课程的知识大纲,学习前提,讲授方式及预期收获。
1-1 课程导学

第2章 React初探
本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。
2-1 React简介
2-2 React开发环境准备
2-3 工程目录文件简介
2-4 react中的组件
2-5 React 中最基础的JSX语法

第3章 React基础精讲
本章通过TodoList功能的实现,给大家完整介绍React的基础语法,设计理念以及围绕React展开的一些编程思维。
3-1 使用React编写TodoList功能
3-2 React 中的响应式设计思想和事件绑定
3-3 实现 TodoList 新增删除功能
3-4 JSX语法细节补充
3-5 拆分组件与组件之间的传值
3-6 TodoList 代码优化
3-7 围绕 React 衍生出的思考

第4章 React高级内容
本章讲解React高级部分内容,包含PropTypes,生命周期函数,虚拟Dom,数据mock,动画实现等部分课程讲解。
4-1 React developer tools 安装及使用
4-2 PropTypes 与 DefaultProps 的应用
4-3 props,state 与 render 函数的关系
4-4 React 中的虚拟DOM
4-5 深入了解虚拟DOM
4-6 虚拟 DOM 中的 Diff 算法
4-7 React 中 ref 的使用
4-8 React的生命周期函数
4-9 React 生命周期函数的使用场景
4-10 使用Charles实现本地数据mock
4-11 React 中实现 CSS 过渡动画
4-12 React 中使用 CSS 动画效果
4-13 使用 react-transition-group 实现动画(1)
4-14 react-transition-group 的使用(2)

第5章 Redux入门
本章主要讲解Redux产生背景,组成内容以及使用方式,通过实例带大家上手Redux数据管理框架的使用。
5-1 Redux 概念简述
5-2 Redux 的工作流程
5-3 使用 Antd 实现 TodoList 页面布局
5-4 创建 redux 中的 store_x264
5-5 Action 和 Reducer 的编写
5-6 使用 Redux 完成 TodoList 删除功能_x264
5-7 ActionTypes 的拆分
5-8 使用 actionCreator 统一创建 action
5-9 Redux 知识点复习补充

第6章 Redux进阶
本章主要讲解UI组件与容器组件基础,如何使用redux-thunk,redux-saga等Redux中间件,以及react-redux的使用方式。
6-1 UI组件和容器组件
6-2 无状态组件
6-3 Redux 中发送异步请求获取数据
6-4 使用Redux-thunk 中间件实现ajax数据请求
6-5 什么是Redux的中间件
6-6 Redux-saga 中间件使用入门(1)
6-7 Redux-saga 中间件使用入门(2)
6-8 如何使用 React-redux(1)
6-9 如何使用 React-redux(2)
6-10 使用React-redux完成TodoList功能

第7章 项目实战:Header组件开发
本章讲解项目中公用Header组件的开发,包含动画效果实现,iconfont,immutable.js,styled-components的使用以及异步数据的获取。
7-1 项目目录搭建,Styled-Components 与 Reset.css 的结合使用
7-2 使用 styled-components 完成 Header 组件布局(1)
7-3 使用 styled-components 完成 Header 组件布局(2)
7-4 使用 iconfont 嵌入头部图标
7-5 搜索框动画效果实现
7-6 使用 React-Redux 进行应用数据的管理
7-7 使用 combineReducers 完成对数据的拆分管理
7-8 actionCreators 与 constants 的拆分
7-9 使用 Immutable.js 来管理store中的数据
7-10 使用 redux-immutable 统一数据格式
7-11 热门搜索样式布局
7-12 Ajax获取推荐数据
7-13 代码优化微调
7-14 热门搜索换页功能实现
7-15 换页旋转动画效果的实现
7-16 避免无意义的请求发送,提升组件性能

第8章 项目实战:首页开发
本章将带大家完成项目首页的开发,课程能容包含react-router4的使用,组件及reducer的拆分设计,首页部分的核心功能包含列表显示,加载更多,返回顶部等。
8-1 什么是路由,如何在React中使用路由功能
8-2 首页组件的拆分
8-3 首页专题区域布局及reducer的设计
8-4 首页文章列表制作
8-5 首页推荐部分代码编写
8-6 首页异步数据获取
8-7 异步操作代码拆分优化
8-8 实现加载更多功能
8-9 返回顶部功能实现
8-10 首页性能优化及路由跳转

第9章 项目实战:详情页面和登录功能开发
本章将完成详情页面的开发,过程中将完整介绍react-router跨页面传值的方法及登陆鉴权的实现思路。同时我们将给大家介绍异步组件和路由withRouter方法的使用方式。
9-1 详情页面布局
9-2 使用redux管理详情页面数据
9-3 异步获取数据
9-4 页面路由参数的传递
9-5 登陆页面布局
9-6 登陆功能实现
9-7 登陆鉴权及代码优化
9-8 异步组件及withRouter路由方法的使用

第10章 课程总结
本章将给大家介绍项目的上线流程,React版本升级对本项目的影响,并带大家进行整个课程的知识点回顾。
10-1 项目上线流程
10-2 React 版本升级说明
10-3 课程总结

下载地址:百度网盘下载

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
4个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Jacquelyn38 Jacquelyn38
3年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Easter79 Easter79
3年前
Vue 2.0开发企业级移动端音乐WebAPP
第1章课程内容介绍包括课程概述、课程安排、学习前提、讲授方式等方面的介绍,最后演示了整个音乐App的功能,让同学们对课程项目有一个直观的了解。11导学12课前必读(源码获取方式)第2章项目准备工作包括项目需求分析、脚手架初始化代码、项目目录介绍及图标字体、公共样式等资源的准备。21需求分析22Vu
Stella981 Stella981
3年前
Python3+TensorFlow 打造人脸识别智能小程序
第1章课程导学本章节主要介绍课程的主要内容、核心知识点、课程涉及到的应用案例、深度学习算法设计通用流程、适应人群、学习本门课程的前置条件、学习后达到的效果等,帮助大家从整体上了解本门课程的整体脉络。第2章深度学习基础串讲(必备理论知识)主要介绍深度学习的基础知识,具体包括了深度学习的发展历程、基本概念(前向运算、反向传播、参数优化)、深度
Stella981 Stella981
3年前
React前端开发入门与实战
阿里云大学:React前端开发入门与实战(https://www.oschina.net/action/GoToLink?urlhttp%3A%2F%2Fclick.aliyun.com%2Fm%2F1000010022%2F)本课程主要讲解React的基础使用技巧及实战案例。React是一个用于构建用户界面的JavaScript
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
10个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这