codequick-darkmode-logo
登录注册
React 课程

教学大纲:

React 课程

20 课程 125 在线编程问题


课程将涵盖哪些主题?

React 基础入门

  1. React 课程介绍:

    • 开场白。

    • 什么是 React 以及关于这个库的一些历史。

    • 强调使用代码库系统。

  1. 基础 React 组件:

    • 学习在 React 中什么是 JSX。

    • 如何编写一个基础的第一个组件。

    • 用静态数据构建一个组件并理解基础知识。

  1. 使用动态数据构建列表:

    • 动态构建元素。

    • 利用Array.prototype.map进行动态构建。

    • 从文件导入和导出组件。

  1. 使用动态数据构建表格:

    • 表格及其组件在HTML中的结构。

    • 使用嵌套循环构建表格。

    • 以嵌套方式使用map函数。

    • 使用导入文件中的动态数据。

  1. 使用Style Object进行样式设计:

    • 理解HTML和JSX之间的区别。

    • 学习如何为页面上的元素设置样式。

    • 通过已学的样式以一种具有挑战性的方式练习动态构建元素。

带状态和事件的组件

  1. 在 React 中集成 CSS 文件:

    • 将样式世界作为组件构建不可或缺的一部分。

    • 理解 className 是什么以及 HTML 与 JSX 之间的区别。

    • 结合课程到目前为止学到的所有材料进行全面练习。

    • 强调 CSS 规则以及它们如何集成到我们构建的系统中。

  1. 在组件中集成Props:

    • 什么是React中的props以及何时使用它们。

    • 使用props构建组件以及常见的编写方法。

    • 在动态构建中使用我们编写的组件。

  1. 使用 Props 构建表格:

    • 使用 props 构建表格。

    • 在表格构建中创建一个智能组件。

    • 结合使用 props 和 CSS 样式,与多个组件进行动态构建。

  1. 使用 Events 和 useState:

    • 如何将 onClick 类型的事件链接到元素。

    • 什么是智能组件以及我们为什么需要它们。

    • 什么是 react hook 类型的 useState 以及如何使用它。

    • 在组件的 JSX 中创建布尔条件。

    • 连接事件创建和状态存储,以构建智能 React 组件。

  1. 使用 onChange 事件:

    • 如何向页面添加输入框并使用 useState 来存储输入值。

    • 使用用户输入的数据构建动态列表。

    • 深入解释数组以及值和引用之间的区别。

    • 理解如何处理存储在组件状态上的数组。

高级主题与API使用

  1. 使用事件构建动态表格:

    • 理解如何综合迄今为止所学的一切来动态构建表格。

    • 使用 useState 来存储多个输入。

    • 使用对象数组的复杂状态的例子。

  1. 使用 useEffect 钩子:

    • 什么是 useEffect 类型的 react 钩子以及如何以及何时使用它。

    • 使用 fetch 进行服务器通信。

    • 展示方法以确保我们的代码安全以避免不必要的错误。

    • 构建一个结合了 useState 和 useEffect 钩子的智能组件。

  1. 在服务器端搜索中使用useEffect的示例:

    • 探索useEffect的附加用途。

    • 理解组件的生命周期如何影响我们的代码实现。

    • 展示一个使用useEffect的复杂示例。

  1. 使用额外的输入:

    • 什么是checkbox输入以及如何使用它。

    • 什么是radio输入以及如何使用它。

    • 什么是datetime和datetime-local输入以及何时使用它们。

  1. 使用 API 构建带结果筛选的表格:

    • 发起 API 请求以获取有关表格的数据。

    • 动态构建表格。

    • 学习如何通过智能结果筛选来执行搜索。

    • 讨论代码架构。

高级主题和代码架构

  1. 使用高级筛选器:

    • 构建一个显示航班信息的表格。

    • 通过智能行组件扩展表格的使用。

    • 使用输入构建表格的筛选器,使用复选框、日期时间和文本输入。

  1. Bulma 库高级样式:

    • 学习嵌入现成的样式。

    • 使用 bulma 包为一起构建的 React 项目添加颜色和样式。

    • 在现有组件中嵌入样式,并浏览我们将使用的库的文档。

  1. 在JavaScript中排序:

    • 改进现有的表格组件并为其添加排序功能。

    • 深入理解如何在包含数字、字符串和对象的数组上进行排序。

    • 了解当我们的字段不是直接比较时如何处理特殊排序。

  1. 组件间的通信渠道:

    • 学习子组件如何与父组件通信。

    • 在多个组件上实现bulma样式。

    • 构建一个多功能组件,允许我们在应用程序中嵌入标签。

    • 查看使用类型为function的props的例子。

  1. 结论