okgoes
🔍
← 目录从零开始学习React
✏️ 编辑

学习大纲

2024/9/18

以下是从零开始学习 React 的大纲，涵盖了从基础到精通的学习路径。每一阶段都包含核心概念、实践项目和学习资源。

1. 基础阶段

1.1 JavaScript 基础

  • 掌握目标：熟悉 ES6 及其后的 JavaScript 语法特性。
    • 变量（let，const）
    • 箭头函数
    • 模板字符串
    • 解构赋值
    • 扩展运算符（...）
    • 类与模块化（import/export）

1.2 HTML & CSS 基础

  • 掌握目标：了解如何构建页面结构，布局和样式。
    • HTML5 基本标签和语义化
    • CSS Flexbox 和 Grid 布局
    • 响应式设计基础

1.3 React 基础

  • 学习内容：

    • React 的基本概念和框架：什么是组件？
    • JSX 语法基础
    • 函数组件 vs 类组件
    • 状态（State）与属性（Props）
    • 事件处理
    • 条件渲染

  • 项目：创建一个简单的待办事项（To-do List）应用。

2. 进阶阶段

2.1 React 核心功能

  • 学习内容：
    • 使用 Hooks（useState, useEffect）
    • 表单处理与受控组件
    • 列表与键值（key）
    • 生命周期方法（通过 Hooks 实现）

2.2 React 路由与导航

  • 学习内容：
    • React Router 的安装与使用
    • 路由切换与动态路由
    • 嵌套路由与 404 页面的处理

2.3 状态管理

  • 学习内容：

    • 组件间数据传递：父子组件
    • Context API
    • Redux 基础概念与使用
    • Redux 工具链：Redux Toolkit

  • 项目：创建一个带有用户登录功能的博客应用，使用路由进行页面跳转并使用 Context API 或 Redux 管理全局状态。

3. 高阶阶段

3.1 性能优化

  • 学习内容：
    • 组件懒加载（React.lazy, Suspense）
    • 使用 useMemo 和 useCallback 进行性能优化
    • React 的虚拟 DOM 和如何优化重新渲染
    • React 事件合成机制

3.2 自定义 Hooks

  • 学习内容：
    • 学习如何编写自定义 Hooks 以提高代码复用性
    • 使用第三方库时封装自定义 Hooks

3.3 React Server-side Rendering (SSR)

  • 学习内容：
    • Next.js 的基础知识与使用
    • Static Site Generation (SSG) 和 Incremental Static Regeneration (ISR)
    • SEO 优化

3.4 高级状态管理工具

  • 学习内容：

    • MobX、Recoil 等替代状态管理工具
    • 使用 Zustand 等简化状态管理的工具

  • 项目：构建一个带有 SSR 的全栈电商应用。

4. 精通阶段

4.1 构建大型应用

  • 学习内容：
    • React 项目结构和模块化
    • 使用 Monorepo 管理大型项目（例如：Lerna 或 Nx）
    • 设计模式在 React 中的应用（容器组件与展示组件等）
    • 前端缓存策略与优化

4.2 React 生态系统

  • 学习内容：
    • 使用 TypeScript 与 React 搭配开发
    • 测试工具（Jest, React Testing Library）
    • 使用 GraphQL 与 Apollo Client 进行数据管理
    • 与流行的 UI 库（如 Material-UI, Ant Design）的集成

4.3 企业级应用开发

  • 学习内容：

    • 微前端架构与 React 的集成
    • CI/CD（持续集成与部署）工具链的使用（例如：GitHub Actions, Jenkins 等）
    • Docker 与容器化部署 React 应用

  • 项目：构建一个复杂的多用户权限管理系统，集成实时数据更新和安全策略。

5. 精通实战项目

  • 项目1：构建一个具有多种用户权限的 SaaS 应用，带有订阅支付系统。
  • 项目2：构建一个实时聊天应用，使用 WebSocket 或 GraphQL 订阅。

6. 学习资源