# React_demo

**Repository Path**: hannah_bingo/react_demo

## Basic Information

- **Project Name**: React_demo
- **Description**: 1. React练习阶段的所有代码：基础语法+router+redux
2. ToDoList案例+github搜索案例

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-28
- **Last Updated**: 2022-11-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

>  相关笔记可查看语雀：[2022年React初学 · 语雀 (yuque.com)](https://www.yuque.com/yiyaobingo/zny61g/gkz29be22ydu3q0g/edit)
>
> - /(ㄒoㄒ)/~~，分享需要收费
>
> 查阅博主主页：https://blog.csdn.net/hannah2233
>
> - 搜索React即可，有系列笔记





# 一、 关于TodoList案例

## 1-1 todo-list案例一

## 1-2 todo-list案例二

> 实现一个todo list
>
> 功能点
>
> \1. 可新增数据
>
> \2. 数据可修改
>
> \3. 数据可删除
>
> \4. 可以修改数据的优先级

# 二、 代码相关目录结构

## 2-1 基础部分 

### 2-1-1 1_React入门

>  笔记详情：[(303条消息) 【React一】React基础+组件化编程【ref+props+state】_翼遥bingo的博客-CSDN博客](https://blog.csdn.net/hannah2233/article/details/127841484?spm=1001.2014.3001.5502)

├─1_React入门
│  ├─1_创建虚拟DOM的方式
│  │      1_原生创建虚拟DOM.html
│  │      2_jsx创建虚拟dom.html
│  │      3_jsx语法规则.html
│  │      
│  ├─2_React面向组件化编程
│  │  ├─a_函数式+类式组件
│  │  │      1_函数式组件编程.html
│  │  │      2_类式组件.html
│  │  │      
│  │  └─b_组件实例的三大属性
│  │      ├─props
│  │      │      1_props的基本使用.html
│  │      │      2_props的简写方式.html
│  │      │      3_函数式组件.html
│  │      │      
│  │      ├─refs
│  │      │      1_字符串形式ref.html
│  │      │      2_回调函数形式ref中回调次数的问题.html
│  │      │      2_回调函数形式的ref .html
│  │      │      3_createRef的使用.html
│  │      │      4_ref.html
│  │      │      
│  │      └─state
│  │              1_state.html
│  │              2_state的简写方式.html
│  │              
│  ├─js
│  │      babel.min.js
│  │      prop-types.js
│  │      react-dom.development.js
│  │      react.development.js
│  │      
│  └─事件处理
│      │  1_事件处理.html
│      │  
│      └─收集表单数据
│              1_受控组件.html
│              1_非受控组件.html
│              2_高阶函数_函数柯里化.html
│              4_不用函数柯里化.html
│    

### 2-1-2 2_生命周期钩子函数

> 笔记详情 ： [(303条消息) 【React二】ref与事件处理与生命周期钩子函数_翼遥bingo的博客-CSDN博客](https://blog.csdn.net/hannah2233/article/details/127853625?spm=1001.2014.3001.5502)


├─2_生命周期钩子函数
│  │  0_引出生命周期.html
│  │  1_react生命周期(旧).html
│  │  1_父组件render(旧).html
│  │  2_新的生命周期.html
│  │  3_DOM的Diffing算法.html
│  │  
│  ├─0_引出.html
│  │      0_引出.html
│  │      
│  └─js
│          babel.min.js
│          prop-types.js
│          react-dom.development.js
│          react.development.js
│

## 2-2 使用脚手架构建

### 2-2-1  create-react-app下的hello-react  

![image-20221128223155637](https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202211282232563.png)



### 2-2-2  Router6

![image-20221128224439631](https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202211282244567.png)

> [(303条消息) 【React四】 React-router-dom【关于React18及React16的路由使用对比】_翼遥bingo的博客-CSDN博客](https://blog.csdn.net/hannah2233/article/details/128088898?spm=1001.2014.3001.5502)
>
> - 路由间传递参数...

### 2-2-4 redux

> antd及redux笔记后续补全，类式组件+函数式组件乱乱的，得过段时间把所有东西重新整理一下，等完成项目之后后继续更新的

### 2-2-3  react-extension

![image-20221128224504530](https://yiyaobingo.oss-cn-beijing.aliyuncs.com/typora/5.21img1202211282245797.png)

> [(303条消息) 【React七】---React扩展---Hooks、setState、Lazyload、Context..._翼遥bingo的博客-CSDN博客](https://blog.csdn.net/hannah2233/article/details/128089055?csdn_share_tail={"type"%3A"blog"%2C"rType"%3A"article"%2C"rId"%3A"128089055"%2C"source"%3A"hannah2233"})