我将在这里总结学习JS三大框架之一的React所做的事情。我在2019年大年夜前夕开始学习，将持续不断地更新！

※新增动态页面路由、动态API路由和API数据整理的Next.js设置（2022/09/13添加）

React的基本结构

通过CDN链接，初次体验虚拟DOM！

※参考：React入门- 它真厉害！React可以在CDN上运行！

2020年01月12日追加：通过CDN链接首次体验JSX！

※参考：【React】开始JSX：”哇！JSX还可以在CDN上运行！”

在JSX中嵌套另一个函数的JSX（2020/02/17更新）

※参考：【React】在JSX中嵌入另一个函数的JSX（嵌套状态）

JSX的条件分支。if语句出错？避免方法。（2020/02/27更新）

※参考资料：【React】条件分支的编写方式（避免使用 if 语句，逻辑运算符，三元运算符）

在JSX中循环。 for循环出现错误？如何避免。（2020/03/04补充）

※参考：【React】循环的写法（避免使用for循环、数组、map()函数）

JSX和计时器处理（setInterval()）（2020/03/26更新）

※ 参考：【React】理解JSX渲染和定时处理（setInterval()）的关系

事件属性（onChange、onClick）（2020/03/31补注）

※参考：【React】尝试使用事件属性（onChange和onClick）

组件

基礎版本

组件入门。如果不将第一个字符大写，就无法识别！（2020/04/06附注）

※参考：【React】开始使用组件（首字母大写！）

读取组件属性的特定值以创建变化！（2020/04/14添加）

※参考：【React】读取组件属性值（样式、文本、四则运算）

尝试使用组件和类（2020/04/23添加）

※ 参考：用React.Component、render()、super()来编写组件的方法（React中的类使用方式）

设置组件类的属性值为个别值（2020年04月28日追加）

※引用：【React】在类组件中设置属性

项目编辑

创建并运行React项目（2020/05/03追加）

※参考：【React】使用Create React App创建和运行项目（包括错误处理）

Note: The Chinese translation provided above is a paraphrased version of the given text.

更新 App 组件的内容（2020/05/13 添加）

参考：【React】尝试重写React项目中的App组件

将多个组件分割为多个文件进行加载（2020/05/18添加）

※ 参考：【React】在React项目中创建类组件，嵌套和文件分割完整流程。

状态管理

州

设置状态（setState()）、计时器处理、事件处理（2020/05/27添加）

※参考：【React】在React项目中开始使用状态（setState()，定时器处理，事件处理）

(注：这是在React项目中开始使用状态（setState()，定时器处理，事件处理）的参考资料。)

使用三元运算符进行条件分支，使用map()进行循环遍历（2020/06/02追加）

※ 仅提供一个选项，请参考：【React】使用状态控制结构（条件分支、循环）

上下文

通过上下文解决组件之间值的桶接力问题（2020/06/09添加）

※参考：使用【React】的Context将值传递给嵌套组件。

重申

安装Redux，进行值的传递和修改（2020/06/23添加）

※参考：【React】开始使用Redux（安装〜配置存储、减速器、提供者）

React Hooks (フック) 可以被重新构造为一个中文表达：React钩子

React Hooks的起步：useState、useEffect、useContext（2021/02/17添加）

※参考：【React】入门钩子（React Hooks）：useState、useEffect、useContext

使用Fetch API与Hook和JSON服务器进行协作，理解React生命周期（2021/02/20添加）。

参考文献：使用Fetch API将React Hooks和json-server进行连接（理解React生命周期）

2021年2月24日，使用Fetch API通过フック和Firebase的实时数据库进行协作。

※参考：【React】使用Fetch API将React Hooks和Realtime Database连接（React + Firebase环境）

CSS配置

我调查了React中各种CSS设置的方法（2020/12/09添加）

※参考：研究了React的CSS设置方法（className属性、style属性、CSS模块、CSS in JS、CSS框架）

使用CSS Modules可以创建CSS和Sass(SCSS)的局部作用域（2020/12/11新增）

※ 参考：【React】使用CSS模块创建CSS和Sass(SCSS)的本地作用域

在使用styled-components开始使用CSS in JS（2020/12/16添加）

※参考：【React】使用styled-components开始进行CSS in JS

开始使用Material UI进行Material Design（2020/12/18附加）

参考：【React】通过UI框架Material UI开始使用Material Design

在React + CSS in JS + TypeScript环境下。

建立环境

使用React和TypeScript构建开发环境，并部署到GitHub Pages（2021/01/26更新）

※ 参考：【React】创建React + TypeScript开发环境（包括部署）

创建React + TypeScript + CSS in JS环境（2021/01/31添加）

※参考：【React】搭建React + TypeScript + CSS-in-JS的开发环境（同时处理Git错误）

EJS→JSX 翻译为 “EJS 转 JSX”。

比较React和元语言，首先是HTML组件化（2021/02/02更新）。

※仅提供一个中文选项：【React】将HTML组件化（React与元语言的比较-1）

在React Helmet中替换标签中的