Skip to content

Main Navigation 👀 TOC

⚙️ Settings

📂 TNotes.yuque

Appearance

Sidebar Navigation

1. 认识 react

✅ react 是什么

2. 官方资料

✅ 了解 react 官方文档的基本结构

✅ react github 仓库链接

3. 准备工作

✅ 开发 react 项目之前推荐安装的 vscode 插件 - eslint

✅ 在 vscode 中，让 Emmet 语法支持 JSX

✅ npm create vite 使用 vite 快速初始化一个 react 工程

4. 第一个 react 应用

✅ 第一个 react v16 程序 - 通过 CDN 引入 react、react-dom 在页面上渲染出 Hello World

✅ 第一个 react v19 程序 - 通过 CDN 引入 react、react-dom 在页面上渲染出 Hello World

5. 需要注意的一些和版本相关的问题

✅ ReactDOM.render

✅ 在 react v19 中，移除了 UMD，推荐使用 ESM

6. JSX

✅ JSX 概述

✅ HTML Tag vs. React Element vs. JSX Element

✅ react element 是只读的

✅ jsx 必须单根

✅ html to jsx 在线转换

✅ 在 JSX 中使用注释

✅ 在 JSX 中使用 JS 表达式

✅ 在 JSX 中书写内联样式 style

✅ 使用 className 添加样式名

✅ JSX 元素的正确使用及常见错误示例

✅ 条件渲染

✅ 列表渲染

7. dangerouslySetInnerHTML

✅ dangerouslySetInnerHTML

8. 组件基础知识

✅ 组件的基本组成

✅ react 组件名的命名规则

✅ 函数组件概述

✅ 类组件概述

⏰ 单向数据流是什么

9. 组件调用

✅ React 组件调用方式对比：JSX 渲染 vs 直接函数调用

10. 组件属性

✅ 组件属性的传递和接收

✅ 通过 props 和 children 来传递元素内容

✅ 布尔属性

⏰ 组件属性的校验

11. 组件状态

12. 组件生命周期

⏰ 生命周期

13. ref

✅ ref

✅ demo-图片定时切换

14. hooks

15. hoc

16. 内置组件

✅ React.Fragment

17. redux

✅ redux 是什么

⏰ redux 的基本使用

⏰ 为什么说前端的 mvc 已死

⏰ redux 中的 action

⏰ 在 redux 中，store、reducer、action 三者之间的关系

18. 第三方库

✅ react-modal

✅ react-monaco-editor

⏰ react-tooltip

⏰ react-intl

19. 工程化

✅ npm create vite 使用 vite 快速初始化一个 react 工程

⏰ 快速搭建一个基于 vite、antd 的 react 项目

20. UI 组件库

⏰ 学习 antd Message 组件的使用

21. empty

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

⏰ xxx

to top

目录

open in vscode

Copied!

✅ 已完成：37

0094. xxx

👣 9437 | 2025年04月29日周二 14:29:30

Last updated:

Pager

上一篇⏰ xxx

下一篇⏰ xxx