**React 精品课程：从环境搭建到 Hooks 实战的全栈进阶指南**
在现代化 Web 开发的浪潮中，React 凭借组件化思维和虚拟 DOM 的高性能表现，已然成为前端工程师必备的核心技能。然而，许多初学者往往止步于“会用库”，却缺乏从零搭建工程化项目的能力，或在面对 React 16.8 引入的 Hooks 时感到无所适从。本课程《React 精品课程：入门与提高，含 React Hooks 以及实战》正是为了填补这一空白，为学员提供一条从底层环境配置到高阶组件设计再到完整项目落地的清晰路径。
课程开篇并未急于切入 React 语法，而是扎实地立足于开发环境的构建。对于前端开发者而言，Node.js 与 npm 是生态的基石。前几讲详细拆解了 Node.js 环境的安装、使用 n 工具管理多版本 Node、以及 npm 的核心命令体系，包括包的增删改查与自定义脚本的编写。这种“磨刀不误砍柴工”的安排，帮助学员彻底理解包管理器的运作逻辑，避免因环境配置问题导致后续学习受阻。此外，课程还引入了 Yarn 和 Next.js、Gatsby 等现代工具链，拓宽了学员的技术视野，使其不仅掌握 CRA（Create React App）这一官方脚手架，更能理解 SSR（服务端渲染）与静态站点生成等进阶场景的工程差异。
随着基础环境的稳固，课程正式进入 React 核心知识体系。不同于市面上众多只讲语法的入门课，本课程深度覆盖了 React 的主流技术栈，重点剖析了函数式组件与 Hooks 的全面应用。对于深受 Class 组件生命周期困扰的开发者，Hooks 的引入不仅是 API 的变化，更是编程思维的转变——从“对象的生命周期”转向“状态的副作用管理”。课程通过由浅入深的讲解，帮助学员掌握 useState、useEffect、useContext 等常用 Hook 的用法，并深入探讨自定义 Hook 的设计模式，从而提升代码的复用性与可维护性。
更具价值的是，这是一门强调“实战”的体系课。理论讲解始终伴随着具体的代码练习，涵盖状态管理、路由配置、性能优化等真实开发场景中的痛点问题。无论是处理复杂的表单逻辑，还是实现高效的数据请求，学员都能在实操中巩固知识点，形成解决复杂业务问题的能力闭环。
对于希望系统掌握 React 技术栈、突破初级开发瓶颈、或准备转型全栈开发的工程师来说，这门课程提供了从入门到精通的完整知识图谱。它不仅教授 React 本身，更构建了包含 Node 生态、打包工具、服务端渲染在内的完整前端工程化能力，是通往现代前端高级开发岗位的坚实阶梯。
课程目录
1-1 [学习npm基本用法] 搭建node+npm开发环境 (04:29) 1-2 [学习npm基本用法] 使用n管理node版本 (07:51) 1-3 [学习npm基本用法] npm基本结构和用法 (18:31) 1-4 [学习npm基本用法] 如何安装、卸载和更新npm包 (15:39) 1-5 [学习npm基本用法] 如何创建和运行自定义的npm脚本 (07:16) 1-6 [学习npm基本用法] 如何安装yarn和使用yarn (06:43) 2-1 [学习自己搭建react项目] 搭建react项目的几种方式 (21:28) 2-2 [学习自己搭建react项目] 使用next.js搭建react应用 (27:03) 2-3 [学习自己搭建react项目] 使用gatsby搭建react项目 (17:57) 2-4 [学习自己搭建react项目] 官方脚手架create-react-app搭建react项目 (18:21) 3-1 [学习常用的es6语法] 了解es6和babel (05:34) 3-2 [学习常用的es6语法] let和const的用法 (08:35) 3-3 [学习常用的es6语法] 模块化(es-module) (17:04) 3-4 [学习常用的es6语法] 解构赋值 (14:36) 3-5 [学习常用的es6语法] 对象拓展 (13:20) 3-6 [学习常用的es6语法] 模板字符串 (02:45) 3-7 [学习常用的es6语法] 拓展运算符 (09:06) 3-8 [学习常用的es6语法] includes用法 (05:25) 3-9 [学习常用的es6语法] class类的用法 (19:22) 3-10 [学习常用的es6语法] 箭头函数 (08:52) 3-11 [学习常用的es6语法] 修饰器-Decorator (06:02) 3-12 [学习常用的es6语法] promise异步处理 (19:11) 3-13 [学习常用的es6语法] generator异步处理 (20:25) 3-14 [学习常用的es6语法] async-await异步处理 (11:48) 4-1 [react组件的写法] react组件的类型 (07:40) 4-2 [react组件的写法] class类组件 (09:38) 4-3 [react组件的写法] 函数组件 (10:16) 5-1 [学习jsx语法] jsx和html的区别 (09:12) 5-2 [学习jsx语法] jsx的基本使用 (19:57) 5-3 [学习jsx语法] 条件判断 (11:43) 5-4 [学习jsx语法] 列表处理 (14:05) 6-1 [css处理方案] css处理方案有哪些 (11:03) 6-2 [css处理方案] 使用sass (08:14) 6-3 [css处理方案] 使用css-module (18:35) 6-4 [css处理方案] 使用postcss (08:46) 6-5 [css处理方案] style-components (23:01) 6-6 [css处理方案] flex弹性布局 (06:34) 7-1 [state和props的用法] state的基本使用 (08:50) 7-2 [state和props的用法] setState方法 (19:46) 7-3 [state和props的用法] props的基本使用 (06:35) 7-4 [state和props的用法] react组件通信方式 (10:02) 8-1 [react组件生命周期] 理解react组件生命周期 (11:40) 8-2 [react组件生命周期] 新版生命周期方法 (28:28) 8-3 [react组件生命周期] 旧版生命周期方法 (11:21) 9-1 [实践课：开发个人网站] 技术选型 (08:43) 9-2 [实践课：开发个人网站] 页面布局 (05:30) 9-3 [实践课：开发个人网站] 头部导航和底部文案 (19:24) 9-4 [实践课：开发个人网站] 首页 (17:56) 9-5 [实践课：开发个人网站] 作品列表页 (05:18) 9-6 [实践课：开发个人网站] 作品详情页 (12:17) 10-1 [表单处理和事件绑定] react事件处理 (11:49) 10-2 [表单处理和事件绑定] 使用refs访问DOM (07:50) 10-3 [表单处理和事件绑定] 使用受控组件处理表单 (05:55) 10-4 [表单处理和事件绑定] 使用非受控组件处理表单 (07:50) 10-5 [表单处理和事件绑定] 处理表单验证 (07:58) 11-1 [Portals和PropTypes] portals的基本使用 (04:24) 11-2 [Portals和PropTypes] 用Portals封装弹窗组件 (14:09) 11-3 [Portals和PropTypes] PropTypes(类型检查) (07:11) 12-1 [处理API请求] 如何在react中处理数据请求 (11:30) 12-2 [处理API请求] fetch和axios (09:24) 12-3 [处理API请求] API统一管理 (15:55) 13-1 [react高级特性] memo (05:48) 13-2 [react高级特性] 代码分割 (07:03) 13-3 [react高级特性] lazy和Suspense (06:25) 14-1 [react hooks] 介绍hooks (08:13) 14-2 [react hooks] useState (05:44) 14-3 [react hooks] useEffect (13:00) 14-4 [react hooks] useContext (16:38) 14-5 [react hooks] useReducer (17:03) 14-6 [react hooks] 额外的Hooks (20:18) 14-7 [react hooks] 自定义hooks (07:32) 14-8 [react hooks] hooks的规则 (04:03) 15-1 [react生态系统] 图解react生态系统 (20:18) 15-2 [react生态系统] 使用工具库 (15:12) 15-3 [react生态系统] 使用UI库 (13:47)
