课程将涵盖哪些主题?
React 基础入门
React 课程介绍:
开场白。
什么是 React 以及关于这个库的一些历史。
强调使用代码库系统。
基础 React 组件:
学习在 React 中什么是 JSX。
如何编写一个基础的第一个组件。
用静态数据构建一个组件并理解基础知识。
使用动态数据构建列表:
动态构建元素。
利用Array.prototype.map进行动态构建。
从文件导入和导出组件。
使用动态数据构建表格:
表格及其组件在HTML中的结构。
使用嵌套循环构建表格。
以嵌套方式使用map函数。
使用导入文件中的动态数据。
使用Style Object进行样式设计:
理解HTML和JSX之间的区别。
学习如何为页面上的元素设置样式。
通过已学的样式以一种具有挑战性的方式练习动态构建元素。
带状态和事件的组件
在 React 中集成 CSS 文件:
将样式世界作为组件构建不可或缺的一部分。
理解 className 是什么以及 HTML 与 JSX 之间的区别。
结合课程到目前为止学到的所有材料进行全面练习。
强调 CSS 规则以及它们如何集成到我们构建的系统中。
在组件中集成Props:
什么是React中的props以及何时使用它们。
使用props构建组件以及常见的编写方法。
在动态构建中使用我们编写的组件。
使用 Props 构建表格:
使用 props 构建表格。
在表格构建中创建一个智能组件。
结合使用 props 和 CSS 样式,与多个组件进行动态构建。
使用 Events 和 useState:
如何将 onClick 类型的事件链接到元素。
什么是智能组件以及我们为什么需要它们。
什么是 react hook 类型的 useState 以及如何使用它。
在组件的 JSX 中创建布尔条件。
连接事件创建和状态存储,以构建智能 React 组件。
使用 onChange 事件:
如何向页面添加输入框并使用 useState 来存储输入值。
使用用户输入的数据构建动态列表。
深入解释数组以及值和引用之间的区别。
理解如何处理存储在组件状态上的数组。
高级主题与API使用
使用事件构建动态表格:
理解如何综合迄今为止所学的一切来动态构建表格。
使用 useState 来存储多个输入。
使用对象数组的复杂状态的例子。
使用 useEffect 钩子:
什么是 useEffect 类型的 react 钩子以及如何以及何时使用它。
使用 fetch 进行服务器通信。
展示方法以确保我们的代码安全以避免不必要的错误。
构建一个结合了 useState 和 useEffect 钩子的智能组件。
在服务器端搜索中使用useEffect的示例:
探索useEffect的附加用途。
理解组件的生命周期如何影响我们的代码实现。
展示一个使用useEffect的复杂示例。
使用额外的输入:
什么是checkbox输入以及如何使用它。
什么是radio输入以及如何使用它。
什么是datetime和datetime-local输入以及何时使用它们。
使用 API 构建带结果筛选的表格:
发起 API 请求以获取有关表格的数据。
动态构建表格。
学习如何通过智能结果筛选来执行搜索。
讨论代码架构。
高级主题和代码架构
使用高级筛选器:
构建一个显示航班信息的表格。
通过智能行组件扩展表格的使用。
使用输入构建表格的筛选器,使用复选框、日期时间和文本输入。
Bulma 库高级样式:
学习嵌入现成的样式。
使用 bulma 包为一起构建的 React 项目添加颜色和样式。
在现有组件中嵌入样式,并浏览我们将使用的库的文档。
在JavaScript中排序:
改进现有的表格组件并为其添加排序功能。
深入理解如何在包含数字、字符串和对象的数组上进行排序。
了解当我们的字段不是直接比较时如何处理特殊排序。
组件间的通信渠道:
学习子组件如何与父组件通信。
在多个组件上实现bulma样式。
构建一个多功能组件,允许我们在应用程序中嵌入标签。
查看使用类型为function的props的例子。
结论