解决什么问题：从写页面到做业务

这份资料讲的是 React18 及其周边工具链。它解决的不是怎么写标签，而是怎么用组件化思路搭一个能跑、能维护的交互界面。日常里这类问题很多：列表渲染、表单回填、跨层级传数据、购物车增删改。课程把这些场景拆成小步，先讲 JSX 和事件绑定，再讲虚拟 DOM 的本质，最后落到父子传参和跨组件通讯。如果你之前只会写静态页，或者用框架时总靠复制粘贴，跟着走一遍，能明白为什么这样写，而不是只记住一个写法。

适合什么基础：得有 JS 底子

它不是零基础入门。你得熟悉 ES6 里的箭头函数、解构、Promise，知道 npm 怎么装包，命令行能跑起来。资料从脚手架和项目目录讲起，默认你碰过前端工程化。如果这些还生疏，建议先把 JS 基础和包管理过一遍，不然到生命周期和跨组件通讯会卡住。对转行的人来说，这里要求的是能独立看懂报错、改配置，而不是跟着抄一遍就完。

建议怎么看：先抓三块，再串起来

顺序不用死磕。先看 JSX 语法和列表渲染，把界面怎么拼出来弄清；再看事件绑定和条件渲染，理解交互怎么触发；接着看购物车案例，这是把前面串起来的综合练习，能检验你是不是真懂了状态怎么变。组件生命周期和父子传参那块可以放慢，它是后面做复杂业务的地基。资料里每个点都配了小案例，别只看不动手：讲完列表就自己改个字段，讲完事件就换个参数传，这样比干看记得牢。学完能独立做的事，大致是拿一个接口数据，搭出带增删改查的交互页，并知道状态在组件间怎么走。这不算能直接上岗做大型项目，但作为自己写业务模块的起点，够用了。


167 邂逅React-React的特点-React组件化开发方式 · 168 React列表渲染-JSX语法介绍-JSX嵌入表达式 · 169 JSX事件绑定

课程目录

*   167 邂逅React-React的特点-React组件化开发方式/

  *   01 邂逅React-React的特点

*   168 React列表渲染-JSX语法介绍-JSX嵌入表达式/

  *   01 React列表渲染-JSX语法介绍

*   169 JSX事件绑定-传递参数-条件渲染-JSX本质/

  *   01 JSX事件绑定-传递参数-条件渲染

*   170 ReactElement对象本质-虚拟DOM-购物车案例/

  *   01 ReactElement对象本质-虚拟DOM

*   171 脚手架-项目目录结构-项目组织方式-render函数/

  *   01 脚手架-项目目录结构-项目组织方式

*   172 组件生命周期-父子传参-跨组件通讯-Context/

  *   01 组件生命周期-父子传参-跨组件通讯

*   173 setState同步或异步更新-列表key的作用-memo使用/

  *   01 setState同步或异步更新-列表key的作用

*   174 事件总线-获取DOM refs-受控组件-高阶组件/

  *   01 事件总线-获取DOM refs-受控组件

*   175 React中fragment-css modules-css in js-tailwind/

  *   01 React中fragment-css modules-css

*   176 ant-design库-axios的封装-react-transition动画/

  *   01 ant-design库-axios的封装-react

*   177 redux的使用-react-redux-react-saga-中间件原理/

  *   01 redux的使用-react-redux-react

*   178 react-router-路由嵌套-动态路由-路由传参/

  *   01 react-router-路由嵌套-动态路由

*   179 React Hooks-useState-useEffect-useContxt/

  *   01 React Hooks-useState-useEffect

*   180 useRef-自定义Hook-自定义Hook的练习/

  *   01 useRef-自定义Hook-自定义Hook的练习

*   181 邂逅React Fiber-useStateHook源码阅读/

  *   01 邂逅React Fiber-useStateHook源码阅读

*   182 PC项目实战/

  *   01 PC项目实战

*   183 PC项目实战/

  *   01 PC项目实战

*   184 PC项目实战/

  *   01 PC项目实战

*   185 PC项目实战/

  *   01 PC项目实战

*   186 PC项目实战/

  *   01 PC项目实战

*   187 认识数据可视化-可视化应用场景-CSS3特效/

  *   01 认识数据可视化-可视化应用场景.mp4

*   188 邂逅Canvas-Canvas绘制图形API-Canvas属性API/

  *   01 邂逅Canvas-Canvas绘制图形API.mp4

*   189 Canvas动画API-Canvas案例练习/

  *   01 Canvas动画API-Canvas案例练习.mp4

*   190 SVG的绘图-SVG属性-SVG的动画/

  *   01 SVG的绘图-SVG属性-SVG的动画.mp4

*   191 SVG的特效案例-邂逅Echarts-Echarts绘制图表/

  *   01 SVG的特效案例-邂逅Echarts.mp4

*   192 Echarts图表绘制-大屏适配-可视化项目的搭建/

  *   01 Echarts图表绘制-大屏适配.mp4

*   193 可视化项目实战（一）/

  *   01 可视化项目实战（一）.mp4

*   194 可视化项目实战（一）/

  *   01 可视化项目实战（一）.mp4

*   课件资料/

  *   80-React全家桶实战_01/

    *   79-React全家桶实战_01/

      *   Day01.zip

      *   code.zip

  *   81_React全家桶实战_02/

    *   Day02.zip

    *   code.zip

  *   82_React全家桶实战_03/

    *   Day03.zip

    *   code.zip

  *   83_React全家桶实战_04/

    *   Day04.zip

    *   code.zip

  *   84_React全家桶实战_05.zip

  *   85_React全家桶实战_06.zip

  *   86_React全家桶实战_07.zip

  *   87_React全家桶实战_08.zip

  *   88_React全家桶实战_09.zip

  *   89_React全家桶实战_10.zip

  *   90_React全家桶实战_11.zip

  *   91_React全家桶实战_12.zip