值不值得学：先确认你的前端基础是否过关

这套React资料解决的核心问题，是帮助有前端基础的人跨越“只会写静态页面和原生脚本”到“能独立开发单页面应用”的门槛。它不是带你从零认识网页编程，而是教你如何用组件化思维去拆解界面、用单向数据流去管理状态。如果你的HTML和CSS还算熟练，但JavaScript只停留在写简单交互的程度，建议先补齐ES6的数组方法、解构、箭头函数等语法，因为React的组件逻辑几乎全是靠这些现代JS特性撑起来的。基础扎实了，跟下来才不会觉得每一行代码都在变魔术。

学完能做什么：从切图到独立产出单页面应用

跟着这套资料走完，你能独立完成一个标准单页面项目的搭建和开发。具体来说，你能用脚手架初始化工程，看懂并调整项目目录架构；能用JSX结合原生逻辑写出可复用的组件，理清父子组件之间通过props传值的方式；能熟练使用state和setState处理界面数据的变更，掌握条件渲染、列表循环以及事件监听；同时能区分傻瓜组件与聪明组件的区别，掌握函数式组件与class组件的写法，并清楚组件生命周期在不同阶段的触发时机。这些知识点拼凑起来，足够你独立去开发一个中后台管理系统的前端界面，或者做一个结构清晰的交互式Web应用。

资料怎么用：建议的阅读与练习顺序

拿到资料后，不要直接跳到项目实战环节。建议先从环境搭建部分看起，跟着操作一遍Node和脚手架的安装，自己手动把空项目跑起来。接着重点啃基础语法部分，尤其是JSX本质、state与props的区分、以及组件生命周期的剖析，这几块是日常开发中最频繁接触的核心。看视频时不要光听，要在本地代码里同步敲打，尝试修改state里的初始值，观察界面渲染的变化。进入组件化阶段后，自己试着把一个复杂页面拆成几个独立组件，手动模拟单向数据流的传递过程。等基础知识融会贯通了，再去跟着项目实战从头到尾敲一遍代码，重点体会实际业务中组件是如何拆分和组装的。


需要有html+css和扎实的js功底||最好是有es基础，因为react里面都是在写js掌握使用JSX语法和纯组件编程思想||深入了解单向数据流编程风格和第三

课程目录

*   欢迎来到React世界/

  *   详细了解我们的React

  *   精讲安装node

  *   安装脚手架并搭建项目

  *   分析项目目录架构并重写一遍搭建的项目

*   React基础知识讲解/

  *   深入理解react和react-dom两个库

  *   深度剖析JSX的实质

  *   state变量渲染和setState修改数据

  *   精讲props属性传递

  *   实战必备之条件渲染与数据循环

  *   详细讲解事件监听的实现

  *   React之样式的编写讲解

  *   深入剖析React实现双向数据绑定

  *   精讲React组件生命周期

*   React组件的写法 /

  *   傻瓜组件和聪明组件的区别

  *   深入理解函数式组件

  *   详细讲解class组件的写法

*   React组件化和ui库引⼊使⽤/

  *   引入使用ant-design组件库

  *   详细讲解配置ant-design按需加载

  *   性能优化之PureComponent讲解

  *   性能优化之React.memo讲解

  *   React高级使用之组件复合写法

*   高阶组件(HOC)/

  *   高阶组件初体验

  *   讲解高阶组件的链式调用

  *   实现高阶组件装饰器写法

  *   详细讲解组件通信之上下文(context)

*   React函数式编程之Hook/

  *   隆重介绍ReactHooks

  *   详细介绍新特性useState

  *   详细介绍新特性useEffect

  *   详细介绍新特性useContext

  *   详细介绍新特性useReducer

  *   详细讲解官网介绍额外的Hooks

  *   自己动手封装一个自定义Hooks

  *   深入讲解ReactHooks的使用规则

*   强⼤的状态管理器Redux/

  *   深度学习Redux成员及其数据流

  *   学习redux编写一个累加器程序

  *   react-redux进行改造累加器

  *   高阶组件装饰器模式进行简化封装代码

  *   深度剖析redux中间件给我们带来的帮助

  *   抽离reducer和action进行统一管理

*   ⻚面连接器之路由react-router(版本4.x)/

  *   介绍及安装使用react-router

  *   体验react-router的写法

  *   学习react-router的路由传参取参

  *   深入学习react嵌套路由及路由重定向

  *   深入剖析路由守卫的实现与使用

*   redux-saga与Generator生成器/

  *   介绍redux-saga和redux-thunk的不同

  *   应用redux-saga改造路由守卫登录认证

  *   详解generator函数的原理和使用(一)

  *   详解generator函数的原理和使用(二)

*   开始使用umi开发框架/

  *   介绍企业级react应用框架umi

  *   详细了解dva是什么以及它与umi的约定

  *   使用umi开发项目并快速新建页面

  *   详细讲解umi里面的嵌套路由与动态路由

  *   创建配置文件编写配置式路由

  *   讲解配置式路由如何加入路由守卫

  *   讲解在umi里如何引入antd并使用

  *   在umi开发框架里面引入dva进行开发

  *   用dva开发模式开发一个商品页面

*   快速搭建⼀个后台管理页面框架/

  *   详细了解如何从antd框架里面拿到自己想要的代码

  *   开始使用antd布局组件进行项目大框架的布局

  *   改变顶部一级导航进行跳转并改变视图内容

  *   贴近实战点击一级菜单切换二级菜单数据

  *   进行页面归类优化项目可读性一

  *   进行页面归类优化项目可读性二

  *   引入ant-design-pro库并使用其现成的404页面

  *   详细讲解二级菜单栏伸缩状态利用antd如何实现

*   全局管理用户状态及信息/

  *   从ant-design-pro的登录页里面抽取出想要的代码

  *   详细讲解编写登录mock接口

  *   详细讲解dva编写登录功能

  *   使用redux管理的用户信息改造路由守卫组件

  *   使用下拉菜单并编写退出登录功能

*   回顾项目，展望未来/

  *   回顾整个项目及后续发展

  *   高级工程师到架构师-解决问题思路+学习方法