# learn-react

**Repository Path**: mumu-osc/learn-react

## Basic Information

- **Project Name**: learn-react
- **Description**: React, React Router 教学用项目。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2023-08-02
- **Last Updated**: 2025-01-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React, ReactRouter, NiceFish, 前端

## README

# learn-react

<div>
    <strong>这是一个面向初学者的 React 教程项目，请勿把此项目代码用于生产环境。</strong>
</div>

## 分支上的内容描述

所有内容都拆分到了分支上，按照难度循序渐进，分支的顺序与 PPT 一致：

| 序号 | 分支名称              | 功能描述                             |
| ---- | --------------------- | ------------------------------------ |
| 1    | master                | 无内容                               |
| 2    | quick-start           | React 框架快速上手                   |
| 3    | jsx-quick-start       | JSX 快速上手                         |
| 4    | jsx-sass              | 在 JSX 中使用 SASS 作为 CSS 与编译器 |
| 5    | jsx-rules             | JSX 语法基本规则                     |
| 6    | props-and-state       | props 和 state 的基本用法            |
| 7    | jsx-refs              | 在 JSX 中使用 ref 操作 DOM           |
| 8    | event-basic           | 事件基础                             |
| 9    | event-emitter         | 事件触发器                           |
| 10   | component-hierarchy   | 组件的结构                           |
| 11   | react-router-basic    | React Router 基本用法                |
| 12   | react-router-nested   | React Router 嵌套路由                |
| 13   | form-basic            | 表单基础                             |
| 14   | form-controlled       | 受控表单                             |
| 15   | form-validation-basic | 基本表单校验案例，不使用任何第三方库 |
| 16   | form-validation-ajv   | 使用 ajv js 来校验表单               |
| 17   | axios-basic           | axios 基本用法                       |
| 18   | axios-intercepter     | axios 实现拦截器                     |
| 19   | axios-service         | axios 封装通用服务                   |
| 20   | lifecycle             | React 组件的生命周期                 |
| 21   | compose               | 组合组件                             |
| 22   | high-order-component  | 高阶组件                             |
| 23   | hooks-basic           | hooks 基本用法                       |
| 24   | hooks-custom          | 自定义 hooks                         |
| 25   | hooks-i18n            | 用 hooks 实现国际化字符串            |
| 26   | state-context         | 用 Context 实现状态管理              |
| 27   | state-react-redux     | 用 React Redux 实现状态管理          |
| 28   | stateless-component   | 无状态组件                           |
| 29   | jest                  | 用 Jest 来进行单元测试               |
| 30   | jasmine-syntax        | Jasmine 语法                         |
| 31   | cypress               | 用 Cypress 进行集成测试              |