课程介绍
如果您在成长过程中对游戏充满热情,那么您可能对 connect-4 并不陌生——这是一款广受欢迎的游戏,其目标是在您的对手面前将四个单色圆盘连接成一个网格状的支架。通过本课程,您将有机会通过使用 React 构建一个 connect-4 克隆来重温童年美好的回忆。
React,也称为 React JS,是一个强大的 JavaScript 库,用于使用 UI 组件构建自定义的交互式用户界面。一些最著名的组织使用 React 作为其前端的例子包括 Netflix、Facebook 和 Airbnb。由 Meta 和独立开发者社区共同开发和维护,React 仍然是免费和开源的。React 是一个完全基于 JavaScript 构建的基于组件的库,非常适合设计复杂的 UI。使用 React,开发人员可以构建封装的组件,从而有效地管理自己的状态并在数据更改时呈现 UI 更新。例如,想想您在 twitter 提要或 Facebook 上的点赞按钮上看到的自动内容刷新功能。这里 UI 组件的状态在页面上发生了变化,数据更新时无需手动刷新。这只是 React 的一个小而强大的特性。
通过一个完整的实践项目,本课程将教你成为一名熟练的 React 开发人员必须了解的所有 React 基本原则。我们从开始使用 React 所需的工具开始,以及创建 Connect-4 游戏板的说明。从那里我们深入到 React OnClick 事件、传递 Props、破坏、React Children 和传递参数。随着对基础的扎实理解,学生们将继续学习游戏组件的各种样式技术,以及动态类和处理回调。在这里,我们将探索与动态类相结合的内联、全局和动态样式。然后我们将继续讨论 React State Hook、React Key Property 和初始化游戏模块。然后学生处理更多的中间概念,包括计算获胜者的逻辑组件,确定平局和 React 生命周期事件。在最后一个模块中,我们探讨了人工智能在自动移动建议和单人游戏中的实现。
除了动手实践的 React 模块,我们还为需要复习的人提供了 JavaScript 的全面概述。在这里,我们首先向学生介绍定义 HTML 文档逻辑结构的文档对象模型 (DOM)。从那里我们深入研究 JavaScript 以演示可以操作 DOM 元素以向静态组件添加交互性的各种方法。我们从基础开始,包括 JavaScript 放置和数据输出。从那里我们继续讨论变量声明、算术运算、运算符优先级、数据类型和对象。一旦涵盖了基础,我们将继续使用数组、条件语句、JavaScript 比较运算符、布尔值和循环进行更复杂的操作。在这里,学生将学习释放 JavaScript 的真正力量,根据用户交互呈现不同的结果。我们将探索使用函数来有效地处理重复性任务和 JavaScript 事件来处理基于动作和事件的输出。该部分将以一个动手项目结束,学生将在该项目中运用他们的知识来构建一个基于网络的照片库和背景颜色转换器。
Published 09/2022
MP4 | Video: h264, 1280×720 | Audio: AAC, 44.1 KHz, 2 Ch
Genre: eLearning | Language: English | Duration: 78 lectures (5h 38m) | Size: 2.3 GB
你会学到什么
- 文档对象模型 (DOM) 简介
- DOM 操作
- JavaScript 基础
- JavaScript 算术运算符、数据类型、数组、循环、事件
- JavaScript 变量、运算符优先级、对象、函数
- ReactJS 的基础
- 使用 React 所需的工具
- 传递道具、破坏、React Children、点击事件、样式
- React 关键属性,处理回调
- 单人游戏的 AI 集成
- 条件渲染和生命周期事件
- 构建 Connect-4 游戏板
要求
- HTML和CSS的基础知识
- 基本计算机技能
本课程适用于谁
- 有兴趣学习如何使用 JavaScript 构建交互式网页的学生
- 有兴趣学习 ReactJS 的学生
- 对使用 React 进行前端 UI 开发感兴趣的学生
- 有兴趣学习 JavaScript 基础的学生