Build a Connect-4 Clone in React + JavaScript Foundations

如果您在成长过程中对游戏充满热情，那么您可能对 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

Learn the Foundations of React and JavaScript by Building a Fully Functional Connect-4 Game Clone

What you’ll learn

• Introduction to the Document Object Model (DOM)
• DOM Manipulation
• JavaScript Foundations
• JavaScript Arithmetic Operators, Data Types, Arrays, Loops, Events
• JavaScript Variables, Operator Precedence, Objects, Functions
• Foundations of ReactJS
• The Tools Needed to work with React
• Passing Props, Destructing, React Children, OnClick Events, Styling
• React Key Property, Handing Callbacks
• AI Integration for Single Player Games
• Conditional Rendering & LifeCycle Events
• Building the Connect-4 Gameboard

Requirements

• Basic Knowledge of HTML and CSS
• Basic Computer Skills

Description

If you had a passion for games growing up, you’re likely no stranger to connect-4 – a wildly popular game with the objective of connecting four single colored disks into a grid-like holder before your opponent. With this course you have the opportunity to relive this fond childhood memory by building a connect-4 clone using React.

React, also known as React JS, is a powerful JavaScript library used for building custom, interactive user interfaces using UI components. Some of the most well known examples of organizations using React for their front-end include Netflix, Facebook, and Airbnb. Developed and maintained by Meta along with a community of independent developers, React remains free and open-source. React is a component based library built entirely on JavaScript, which makes it perfect for designing complex UI’s. With React, developers can build encapsulated components that efficiently manage their own state and render UI updates specifically when data changes. For example, think of the automated content refresh feature you see on a twitter feed, or Facebook like button. Here the state of the UI component changes on the page, without having to manually refresh when the data is updated. This is just one small, yet powerful feature of React.

Through a complete hands-on project, this course will teach you all the fundamental principles of React that you must know to become a proficient React developer. We start with the tools needed to get started with React, along with instructions on creating the Connect-4 game board. From there we dive in to React OnClick Events, Passing Props, Destructing, React Children, and Passing Arguments. With a solid understanding of the foundations, students move on to various styling techniques for the game components, along with Dynamic classes, and handling callbacks. Here we’ll explore inline, global, and dynamic styling coupled with dynamic classes. We will then move on to the React State Hook, React Key Property and initializing the game modules. Students then tackle more intermediate concepts including the logical components of calculating a winner, determining a draw, and React Lifecycle events. In the last module, we explore the implementation of AI for automated move suggestions, and single player games.

In addition to the hands-on React module, we also offer a comprehensive overview of JavaScript for those who need a refresher. Here we start with introducing students to the document object model (DOM) which defines the logical structure of HTML documents. From there we dive into JavaScript to demonstrate various methods in which DOM elements can be manipulated to add interactivity to static components. We start right from the basics, which includes JavaScript placement, and data output. From there we move on to variable declaration, arithmetic operations, operator precedence, data types, and objects. Once the foundations are covered, we move on to more complex operations using Arrays, Conditional Statements, JavaScript comparison operators, Booleans and loops. Here students will learn to unleash the true power of JavaScript to render different outcomes based on user interaction. We will explore the use of functions to efficiently handle repetitive tasks and JavaScript events to handle output based on actions and occurrences. The section will conclude with a hands-on project where students will implement their knowledge to build a web based photo gallery and background color changer.

Who this course is for

• Students interested in learning how to build interactive web pages using JavaScript
• Students interested in learning ReactJS
• Students interested in front-end UI Development using React
• Students interested in learning JavaScript Foundations