收藏

React开发简书项目 从零基础入门到实战

主流技术点:Immutable.js,React-redux,React-router4

React从零基础入门到实战,完成企业级项目简书网站开发

难度 中级 时长 17小时 学习人数 4650 综合评分 10.00

React从零基础入门到实战,完成企业级项目简书网站开发

  • 第1章 课程导学 试看 1 节 | 10分钟

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

    收起列表

    • 视频: 1-1 课程导学 (09:26) 试看
  • 第2章 React初探 试看 5 节 | 53分钟

    本章主要讲解React项目的开发环境搭建,工程代码结构及React中最基础的语法内容,同时对前端组件化思想进行介绍。

    收起列表

    • 视频: 2-1 React简介 (04:15)
    • 视频: 2-2 React开发环境准备 (09:06)
    • 视频: 2-3 工程目录文件简介 (22:08)
    • 视频: 2-4 React中的组件 (13:00) 试看
    • 视频: 2-5 React 中最基础的JSX语法 (03:52) 试看
  • 第3章 React基础精讲 7 节 | 117分钟

    本章通过TodoList功能的实现,给大家完整介绍React的基础语法,设计理念以及围绕React展开的一些编程思维。

    收起列表

    • 视频: 3-1 使用React编写TodoList功能 (09:22)
    • 视频: 3-2 React 中的响应式设计思想和事件绑定 (19:06)
    • 视频: 3-3 实现 TodoList 新增删除功能 (18:56)
    • 视频: 3-4 JSX语法细节补充 (13:03)
    • 视频: 3-5 拆分组件与组件之间的传值 (24:29)
    • 视频: 3-6 TodoList 代码优化 (16:15)
    • 视频: 3-7 围绕 React 衍生出的思考 (15:34)
  • 第4章 React高级内容 14 节 | 193分钟

    本章讲解React高级部分内容,包含PropTypes,生命周期函数,虚拟Dom,数据mock,动画实现等部分课程讲解。

    收起列表

    • 视频: 4-1 React developer tools 安装及使用 (05:27)
    • 视频: 4-2 PropTypes 与 DefaultProps 的应用 (14:36)
    • 视频: 4-3 props,state 与 render 函数的关系 (09:48)
    • 视频: 4-4 React 中的虚拟DOM (18:43)
    • 视频: 4-5 深入了解虚拟DOM (13:11)
    • 视频: 4-6 虚拟 DOM 中的 Diff 算法 (14:36)
    • 视频: 4-7 React 中 ref 的使用 (12:57)
    • 视频: 4-8 React 的生命周期函数 (29:42)
    • 视频: 4-9 React 生命周期函数的使用场景 (23:51)
    • 视频: 4-10 使用Charles实现本地数据mock (10:42)
    • 视频: 4-11 React 中实现 CSS 过渡动画 (07:09)
    • 视频: 4-12 React 中使用 CSS 动画效果 (04:18)
    • 视频: 4-13 使用 react-transition-group 实现动画(1) (20:09)
    • 视频: 4-14 使用 react-transition-group 的使用(2) (06:50)
  • 第5章 Redux入门 9 节 | 97分钟

    本章主要讲解Redux产生背景,组成内容以及使用方式,通过实例带大家上手Redux数据管理框架的使用。

    收起列表

    • 视频: 5-1 Redux 概念简述 (07:24)
    • 视频: 5-2 Redux 的工作流程 (06:20)
    • 视频: 5-3 使用 Antd 实现 TodoList 页面布局 (11:46)
    • 视频: 5-4 创建 redux 中的 store (15:02)
    • 视频: 5-5 Action 和 Reducer 的编写 (27:57)
    • 视频: 5-6 使用 Redux 完成 TodoList 删除功能 (05:53)
    • 视频: 5-7 ActionTypes 的拆分 (06:43)
    • 视频: 5-8 使用 actionCreator 统一创建 action (08:17)
    • 视频: 5-9 Redux 知识点复习补充 (06:38)
  • 第6章 Redux进阶 10 节 | 136分钟

    本章主要讲解UI组件与容器组件基础,如何使用redux-thunk,redux-saga等Redux中间件,以及react-redux的使用方式。

    收起列表

    • 视频: 6-1 UI组件和容器组件 (13:41)
    • 视频: 6-2 无状态组件 (04:31)
    • 视频: 6-3 Redux 中发送异步请求获取数据 (08:59)
    • 视频: 6-4 使用Redux-thunk 中间件实现ajax数据请求 (28:56)
    • 视频: 6-5 什么是Redux的中间件 (05:47)
    • 视频: 6-6 Redux-saga中间件入门(1) (14:14)
    • 视频: 6-7 Redux-saga中间件入门(2) (16:12)
    • 视频: 6-8 如何使用 React-redux(1) (13:32)
    • 视频: 6-9 如何使用 React-redux(2) (14:22)
    • 视频: 6-10 使用React-redux完成TodoList功能 (15:28)
  • 第7章 项目实战:Header组件开发 16 节 | 255分钟

    本章讲解项目中公用Header组件的开发,包含动画效果实现,iconfont,immutable.js,styled-components的使用以及异步数据的获取。

    收起列表

    • 视频: 7-1 项目目录搭建,Styled-Components 与 Reset.css 的结合使用 (15:36)
    • 视频: 7-2 使用 styled-components 完成 Header 组件布局(1) (17:27)
    • 视频: 7-3 使用 styled-components 完成 Header 组件布局(2) (16:57)
    • 视频: 7-4 使用 iconfont 嵌入头部图标 (18:27)
    • 视频: 7-5 搜索框动画效果实现 (18:44)
    • 视频: 7-6 使用 React-Redux 进行应用数据的管理 (22:58)
    • 视频: 7-7 使用 combineReducers 完成对数据的拆分管理 (15:01)
    • 视频: 7-8 actionCreators 与 constants 的拆分 (11:37)
    • 视频: 7-9 使用 Immutable.js 来管理store中的数据 (09:20)
    • 视频: 7-10 使用 redux-immutable 统一数据格式 (05:49)
    • 视频: 7-11 热门搜索样式布局 (14:49)
    • 视频: 7-12 Ajax获取推荐数据 (30:16)
    • 视频: 7-13 代码优化微调 (04:41)
    • 视频: 7-14 热门搜索换页功能实现 (28:57)
    • 视频: 7-15 换页旋转动画效果的实现 (19:25)
    • 视频: 7-16 避免无意义的请求发送,提升组件性能 (04:19)
  • 第8章 项目实战:首页开发 10 节 | 144分钟

    本章将带大家完成项目首页的开发,课程能容包含react-router4的使用,组件及reducer的拆分设计,首页部分的核心功能包含列表显示,加载更多,返回顶部等。

    收起列表

    • 视频: 8-1 什么是路由,如何在React中使用路由功能 (05:56)
    • 视频: 8-2 首页组件的拆分 (14:11)
    • 视频: 8-3 首页专题区域布局及reducer的设计 (26:25)
    • 视频: 8-4 首页文章列表制作 (15:07)
    • 视频: 8-5 首页推荐部分代码编写 (10:17)
    • 视频: 8-6 首页异步数据获取 (14:46)
    • 视频: 8-7 异步操作代码拆分优化 (11:14)
    • 视频: 8-8 实现加载更多功能 (19:56)
    • 视频: 8-9 返回顶部功能实现 (14:26)
    • 视频: 8-10 首页性能优化及路由跳转 (11:00)
  • 第9章 项目实战:详情页面和登录功能开发 8 节 | 86分钟

    本章将完成详情页面的开发,过程中将完整介绍react-router跨页面传值的方法及登陆鉴权的实现思路。同时我们将给大家介绍异步组件和路由withRouter方法的使用方式。

    收起列表

    • 视频: 9-1 详情页面布局 (07:30)
    • 视频: 9-2 使用redux管理详情页面数据 (10:28)
    • 视频: 9-3 异步获取数据 (08:49)
    • 视频: 9-4 页面路由参数的传递 (08:44)
    • 视频: 9-5 登陆页面布局 (09:21)
    • 视频: 9-6 登陆功能实现 (24:45)
    • 视频: 9-7 登陆鉴权及代码优化 (06:20)
    • 视频: 9-8 异步组件及withRouter路由方法的使用 (09:46)
  • 第10章 课程总结 3 节 | 12分钟

    本章将给大家介绍项目的上线流程,React版本升级对本项目的影响,并带大家进行整个课程的知识点回顾。

    收起列表

    • 视频: 10-1 项目上线流程 (07:12)
    • 视频: 10-2 React 版本升级说明 (01:55)
    • 视频: 10-3 课程总结 (01:57)
本课程已完结

试看

全部试看小节



讲师

Dell Web前端工程师

BAT资深前端工程师,负责数据平台技术研发。曾任去哪儿网高级前端工程师,主导去哪儿网内部前端监控系统设计,负责去哪儿网门票用户端的前端设计开发。曾任国内知名培训机构高级前端讲师,负责React,Angular,Vue,Hybrid,RN的课程讲授,具备丰富前端授课经验。对优雅编程及工程化有深度思考及见解,教会你写代码,同时帮助你把代码写的更漂亮!

讲师其他课程

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题