react

1. 初始 react

• 0101. react roadmap
  • 📂 TNotes.yuque
    • TNotes.yuque.react.0101
  • 1. 📝 概述
• 0032. react 是什么
  • 1. 📝 概述
  • 2. 🤔 react 是什么
  • 3. 📒 react 的特点 - 轻量
  • 4. 📒 react 的特点 - 原生
  • 5. 📒 react 的特点 - 灵活
  • 6. 📒 react 的特点 - 单向数据流
  • 7. 📒 库 vs. 框架
  • 8. 🔗 References
• 0040. 了解 react 官方文档的基本结构
  • 1. 📝 概述
  • 2. 📒 react 官方文档结构简介
• 0039. react 源码仓库
  • 1. 📝 概述

2. 环境准备

• 0034. 开发 react 项目之前推荐安装的 vscode 插件 - eslint
  • 1. 📝 概述
  • 2. 📒 eslint 概述
  • 3. 📒 安装 ESLint 插件
  • 4. 📒 配置 ESLint 基本流程
  • 5. 💻 demos.1 - 约束只能使用单引号，不能使用双引号
  • 6. 📒 注意事项
• 0035. 在 vscode 中，让 Emmet 语法支持 JSX
  • 1. 📝 概述
  • 2. 💻 具体配置流程
    • 2.1. 【做法 1】通过设置面板来配置
    • 2.2. 【做法 2】通过配置文件 .vscode/settings.json 来配置
  • 3. 💻 demos.1 - 在 vscode 中，让 Emmet 语法支持 JSX
  • 4. 🔗 References
• 0008. npm create vite 使用 vite 快速初始化一个 react 工程
  • 1. 📝 概述
  • 2. 📒 使用 pnpm 的实际操作流程
  • 3. 💻 demos.1 - 使用 vite 创建 react 工程并启动
  • 4. 🔗 References

3. 第一个 react 应用

• 0042. Hello World（v16）
  • 1. 📝 概述
  • 2. 💻 通过 CDN 的方式引入相关依赖
  • 3. ⚙️ 核心 API
    • 3.1. ⚙️ React.createElement
    • 3.2. ⚙️ React.render
  • 4. 💻 demos.1 - 在页面上渲染出 Hello World
  • 5. 💻 demos.2 - 初步认识 React.createElement 和 JSX
  • 6. 🔗 References
• 0050. React.createElement 跟 document.createElement 是一样的吗？
  • 1. 📝 概述
  • 2. 🤔 React.createElement 跟 document.createElement 是一样的吗？
  • 3. 📒 扩展：虚拟 DOM
• 0051. react 核心库和 react-dom 库之间的关系是？
  • 1. 📝 概述
  • 2. 🤔 react 核心库和 react-dom 库之间的关系是？
  • 3. 💬 评价
• 0052. 为什么一旦使用了 JSX 语法，就必须要引入 react 核心库？
  • 1. 📝 概述
  • 2. 🤔 为什么一旦使用了 JSX 语法，就必须要引入 react 核心库？
  • 3. ⚠️ 注意：React v17+ 的变化
• 0053. 通过脚手架来搭建工程 vs. 通过 CDN 的方式来直接引入 react 相关的库
  • 1. 📝 概述
  • 2. 🤔 通过脚手架（比如 vite、umi、create-react-app）来搭建工程 vs. 通过 CDN 的方式来直接引入 react 相关的库
  • 3. 💬 评价
• 0001. Hello World（v19）
  • 1. 📝 概述
  • 2. 💻 demos.1 - Hello World

4. 需要注意的一些版本问题

• 0043. ReactDOM.render
  • 1. 📝 概述
  • 2. ⚠️ 兼容性问题 - 从 v18 开始，不再支持 ReactDOM.render 这个 API
  • 3. ⚙️ ReactDOM.render
  • 4. 💻 demos.1 - ReactDOM.render 的基本使用示例
  • 5. ⚙️ ReactDOM.createRoot
  • 6. 💻 demos.2 - ReactDOM.createRoot 的基本使用示例
  • 7. 🤔 为什么弃用 ReactDOM.render？
• 0100. 并发渲染（Concurrent Rendering）
  • 1. 📝 概述
  • 2. 📒 before v18 - ReactDOM.render 的局限性
  • 3. 📒 after v18 - ReactDOM.createRoot 的优势
  • 4. 🔗 References
• 0041. 不再支持 UMD，推荐使用 ESM
  • 1. 📝 概述
  • 2. 🤔 什么是 UMD？
  • 3. 🤔 为什么移除 UMD？
  • 4. 📒 React 19 中的相关的变化及影响
  • 5. 📒 替代方案：使用 ESM
  • 6. 🔗 References

5. JSX

• 0013. JSX 概述
  • 1. 📝 概述
  • 2. 📒 JSX 是什么
  • 3. 📒 JSX 必须单根
  • 4. 📒 声明式
  • 5. 💻 demos.1 - 一个简单的 React 组件示例
• 0048. HTML Tag vs. React Element vs. JSX Element
  • 1. 📝 概述
  • 2. 📒 三者的关系与区别
  • 3. 📒 React 中的 HTML Tag
  • 4. 📒 JSX Element
  • 5. 📒 React Element
  • 6. 🤔 为什么要写这篇笔记？
• 0044. react element 是只读的
  • 1. 📝 概述
  • 2. 💻 demos.1 - react element 是只读的
• 0045. jsx 必须单根
  • 1. 📝 概述
  • 2. 💻 demos.1 - jsx 必须单根
• 0014. React.Fragment
  • 1. 📝 概述
  • 2. 📒 React.Fragment
  • 3. 🤔 为什么使用 React.Fragment？
  • 4. ⚠️ 注意事项 - 列表渲染的 key 值问题
  • 5. 💻 demos.1 - React.Fragment 并不会生成真实 DOM
  • 6. 💻 demos.2 - React.Fragment 在列表渲染中的应用
  • 7. 🔗 References
• 0003. html to jsx 在线转换
  • 1. 📝 概述
  • 2. 📒 需求场景描述
  • 3. 🔗 transform - html 转 jsx 在线转换器
  • 4. 💻 一个简单的 html to jsx 转换示例
• 0015. 在 JSX 中使用注释
  • 1. 📝 概述
  • 2. 📒 JSX 中注释的写法
  • 3. 💻 demos.1 - // - 错误的注释格式
  • 4. 💻 demos.2 - 可以使用 jsx-eslint 检查错误的注释格式 //
  • 5. 🔗 References
• 0009. 在 JSX 中使用 JS 表达式
  • 1. 📝 概述
  • 2. 📒 在 JSX 中使用 JS 表达式
  • 3. 💻 demos.1 - 官方示例 - 渲染头像
  • 4. 💻 demos.2 - 在表达式中无法渲染的一些特殊值
  • 5. 💻 demos.3 - 无法渲染普通对象，可以渲染 react 元素对象
  • 6. 🔗 References
• 0017. 在 JSX 中书写内联样式 style
  • 1. 📝 概述
  • 2. 📒 在 JSX 中书写内联样式 style
  • 3. 💻 demos.1 - ❌ 错误写法 - 在 JSX 中的 style 写成字符串形式
  • 4. 💻 demos.2 - ✅ 正确写法 - 采用对象的形式来写，属性名使用小驼峰的形式
  • 5. 💻 demos.3 - 动态样式
• 0004. 使用 className 给元素添加 class
  • 1. 📝 概述
  • 2. 💻 demos.1 - 添加样式
  • 3. 💻 demos.2 - 在 JSX 中也可以使用 class 添加样式
  • 4. 🤔 为什么不能直接使用 class 来添加样式，而是使用 className 呢？
  • 5. 🤔 如果在添加样式的时候，不小心写成了 class，样式还能正常添加吗？
  • 6. 🔗 References
• 0046. JSX 元素的正确使用及常见错误示例
  • 1. 📝 概述
  • 2. 💻 demos.1 - JSX 元素的正确使用及常见错误示例
• 0010. 条件渲染
  • 1. 📝 概述
  • 2. 📒 React 中的条件渲染
  • 3. 💻 demos.1 - 条件渲染示例
  • 4. 📒 对比 vue 中的 v-if 和 v-show
  • 5. 🔗 References
• 0011. 列表渲染
  • 1. 📝 概述
  • 2. 📒 列表渲染
  • 3. 💻 demos.1 - 列表渲染
  • 4. 💻 demos.2 - 列表中的 react 元素必须加 key
  • 5. 🔍 查看官方文档对于列表渲染时为什么要给元素加 key 的说明
  • 6. 💼 面试题：你知道为什么列表渲染需要添加 key 吗？
  • 7. 🔗 References
• 0016. dangerouslySetInnerHTML
  • 1. 📝 概述
  • 2. 📒 dangerouslySetInnerHTML 简介
  • 3. 💻 demos.1 - dangerouslySetInnerHTML 的基本使用
• 0054. DOMPurify
  • 1. 📝 概述
  • 2. 📒 DOMPurify 简介
  • 3. 💻 demos.1 - 使用 DOMPurify 净化 html 字符串

6. 组件基础知识

• 0021. 组件的基本组成及核心概念简介
  • 1. 📝 概述
  • 2. 📒 组件的 3 大基本组成结构
  • 3. 📒 函数组件和类组件的基本写法
  • 4. 📒 组件的属性 - Props
  • 5. 📒 组件的状态 - State
  • 6. 📒 组件的生命周期方法
  • 7. 📒 组件的事件 - Events
  • 8. 📒 组件模板语法 - 条件渲染、列表渲染
  • 9. 📒 组件的样式 - Style
  • 10. 📒 Context API
  • 11. 📒 Hooks
• 0002. react 组件名的命名规则
  • 1. 🔍 查看 react 官方对组件名的命名规则的描述
  • 2. 💻 demos.1 - react 组件名的命名规则
• 0022. 函数组件概述
  • 1. 📝 概述
  • 2. 📒 函数组件
  • 3. 💻 使用 ES6 的箭头函数来定义函数组件
  • 4. 💻 在函数组件中使用 Hooks
• 0023. 类组件概述
  • 1. 📝 概述
  • 2. 📒 类组件
  • 3. 📒 类组件的基本形式
  • 4. 📒 类组件的状态（State）
  • 5. 📒 类组件的生命周期方法
• 0024. 单向数据流是什么
  • 1. 📝 概述
  • 2. 📒 单向数据流
  • 3. 📒 React 中的单向数据流
  • 4. 💻 单向数据流

7. 组件调用

• 0049. 函数组件不同调用方式对比：组件式调用 vs. 函数式调用
  • 1. 📝 概述
  • 2. 💻 demos.1 - 组件式调用 <Com /> vs. 函数式调用 {Comp()}

8. 组件属性

• 0026. 属性默认值
  • 1. 📝 概述
  • 2. 💻 函数组件设置属性默认值
  • 3. 💻 给类组件设置属性默认值
• 0019. 组件属性的传递和接收
  • 1. 📝 概述
  • 2. 💻 demos.1 - 组件属性的传递和接收
  • 3. 💻 demos.2 - 不同数据类型的属性传递
• 0005. 通过 props 和 children 来传递元素内容
  • 1. 📝 概述
  • 2. 📒 传递“元素内容”
  • 3. 💻 demos.1 - 传递元素内容的简单示例
• 0025. 布尔属性
  • 1. 📝 概述
  • 2. 📒 布尔属性
  • 3. 📒 在 HTML 中常见的布尔属性
  • 4. 💻 demos.1 - 布尔属性在 React 中的应用示例
  • 5. ⌛️ 历史：布尔属性名称的由来

9. 组件状态

10. 组件生命周期

• 0027. 生命周期
  • 1. 📝 概述

11. ref

• 0018. 实现图片自动轮播的效果
  • 1. 📝 概述
  • 2. 💻 demos.1 - 图片自动轮播（）
  • 3. 💻 demos.2 - 图片自动轮播
  • 4. 🔗 References

12. hooks

13. hoc

14. redux

• 0047. redux 是什么
  • 1. 📝 概述
  • 2. 📒 redux 概述
  • 3. 📒 官方对 redux 的介绍
  • 4. 📒 redux 核心概念
  • 5. 🤔 为什么 Reducer 必须是纯函数（Pure Functions）？
  • 6. 🤔 Action 创建函数（Action Creators）是什么？
  • 7. 📒 redux 常用工具及生态系统
  • 8. 🔗 References
• 0028. redux 的基本使用
  • 1. 📒 本节会用到的一些依赖
  • 2. 💻 demos.1 - 脱离 react 单独使用 redux 来管理状态数据
  • 3. 💻 demos.2 - redux 的基本使用 - createStore 版
  • 4. 💻 demos.2 - redux 的基本使用 - @reduxjs/toolkit 版
  • 5. 💻 demos.2 - redux 的基本使用 - @reduxjs/toolkit 版（模块化）
• 0029. 为什么说前端的 mvc 已死
  • 1. 🔗 links
  • 2. 📒 notes
  • 3. 🤖 为什么说前端的 mvc 已死？
    • 3.1. 复杂的状态管理
    • 3.2. 组件化
    • 3.3. 单向数据流
    • 3.4. 虚拟 DOM
    • 3.5. 社区和生态系统
    • 3.6. 开发体验
    • 3.7. 总结
  • 理解为什么前端不适用 mvc 模式。
• 0030. redux 中的 action
  • 1. 🔗 links
  • 2. 💻 脱离 react 单独使用 redux 来管理状态数据
  • 3. 📒 action 是什么？有什么用？
  • 4. 📒 redux 部分源码 - 判断 action 是否合法的逻辑
  • 5. 💻 action 必须是一个平面对象
  • 6. 💻 action 的 type 属性必须是 string 类型
  • 7. 📒 type 的硬编码问题
  • 8. 📒 action 的创建函数
  • 9. 📒 bindActionCreators
  • 10. 💻 action 的创建函数以及工具方法 bindActionCreators
  • 11. 🤖 如何验证一个对象是否是 plain-object？
  • 12. 🤖 为什么 type 必须是 string 类型，符号类型不行
  • 理解 action 的本质
  • 编写 action 时的一些常见写法
  • action 的创建函数
  • 学会使用 bindActionCreators 来简化 action 的分发流程
  • 学习 redux 的源码，比如：关于 action 的判断逻辑 isAction 的实现、关于 bindActionCreators 的实现源码。
• 0031. 在 redux 中，store、reducer、action 三者之间的关系
  • 1. 📒 store
  • 2. 📒 reducer
  • 3. 📒 action
  • 了解 redux 中的 3 个核心组成部分 store、reducer、action，并清楚它们之间的关系。

15. 第三方库

• 0006. react-modal
  • 1. 🔗 react-modal 相关链接
  • 2. 📒 react-modal 概述
  • 3. 💻 demos.1 - 认识 contentLabel 属性
  • 4. 💻 demos.2 - 封装一个简单的 dialog 组件
• 0012. react-monaco-editor
  • 1. 🔗 monaco-react 官方文档
  • 2. 🔍 Monaco Editor API
  • 3. 📒 monaco-react 概述
  • 4. 💻 demos.1 - 安装并引入 Editor 组件
  • 5. 💻 demos.2 - 4 个钩子 onChange、onMount、beforeMount、onValidate
  • 6. 💻 demos.3 - 获取编辑器的当前值
  • 7. 💻 demos.4 - 只读模式
  • 8. 💻 demos.5 - 动态设置编辑器中的内容
  • 9. 💻 demos.6 - 实战练习 - 模仿 matatastudio 的代码预览效果封装一个代码预览组件
  • 10. 📒 实现代码预览功能 - 业务背景 + 遇到的坑 + 解决方案
    • 10.1. 1️⃣ 在线方案 - 使用代理
    • 10.2. 2️⃣ 在线方案 - 下载资源丢到自己的 CDN 上
    • 10.3. 3️⃣ 离线方案 - 手动下载相关模块
    • 10.4. 4️⃣ 离线方案 - use monaco-editor as an npm package
  • 11. 🤖 monaco 名称的由来
  • 12. 🔗 links
• 0033. react-tooltip
  • 1. 🔗 links
  • 2. 📒 react-tooltip 概述
  • 3. 📒 安装 react-tooltip
  • 4. 📒 核心依赖的版本
  • 5. 📒 引入 react-tooltip
  • 6. 📒 关于 css 引入的一些注意事项
  • 7. 💻 了解 react-tooltip 的基本使用
• 0038. react-intl
  • 1. 🔗 react-intl 相关资料
  • 2. 🔗 ICU 相关资料
  • 3. 📒 react-intl 简介
  • 4. 📒 react-intl 库中的一些常用模块
  • 5. 🤔 ICU (International Components for Unicode) 是什么？有什么用？
  • 6. 💻 demos.1 - react-intl 基本使用
  • 7. 🔍 如何判断传入的 locale 是否是合法值
  • 8. 💻 demos.3 - 特殊的 locale 值
  • 9. 💻 demos.4 - useIntl、injectIntl - 使用 defineMessages 定义消息
  • 10. 💻 demos.5 - 通过 intl 对象来获取国际化消息数据
  • 11. 💻 demos.2 - IntlShape 在 .ts 中的应用
  • React-Intl 是一个强大的工具，可帮助开发人员轻松管理和本地化他们的 React 应用程序。

16. 工程化

• 0036. 快速搭建一个基于 vite、antd 的 react 项目
  • 1. 🔗 antd 官方文档 - 在 vite 中使用 antd
  • 2. 📒 使用 pnpm 实现安装和初始化的流程
  • 3. 💻 demos.1 - 测试按钮组件的使用

17. UI 组件库

• 0037. 学习 antd Message 组件的使用
  • 1. 🔗 Message 全局提示
  • 2. 💻 demos.1 - 了解 Message 的基本使用
  • 3. 💻 demos.2 - 理解 contextHolder 的作用
  • 4. 🔗 来自官方文档的回复：为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 locale/prefixCls/theme 等配置？

18. empty

• 0055. xxx

• 0056. xxx

• 0057. xxx

• 0058. xxx

• 0059. xxx

• 0060. xxx

• 0061. xxx

• 0062. xxx

• 0063. xxx

• 0064. xxx

• 0065. xxx

• 0066. xxx

• 0067. xxx

• 0068. xxx

• 0069. xxx

• 0070. xxx

• 0071. xxx

• 0072. xxx

• 0073. xxx

• 0074. xxx

• 0075. xxx

• 0076. xxx

• 0077. xxx

• 0078. xxx

• 0079. xxx

• 0080. xxx

• 0081. xxx

• 0082. xxx

• 0083. xxx

• 0084. xxx

• 0085. xxx

• 0086. xxx

• 0087. xxx

• 0088. xxx

• 0089. xxx

• 0090. xxx

• 0091. xxx

• 0092. xxx

• 0093. xxx

• 0094. xxx

• 0095. xxx

• 0096. xxx

• 0097. xxx

• 0098. xxx

• 0099. xxx