Build a Connect-4 Clone in React + JavaScript Foundations

Build a Connect-4 Clone in React + JavaScript Foundations, available at $39.99, has an average rating of 4.29, with 78 lectures, based on 181 reviews, and has 44792 subscribers.

You will learn about 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 This course is ideal for individuals who are Students interested in learning how to build interactive web pages using JavaScript or Students interested in learning ReactJS or Students interested in front-end UI Development using React or Students interested in learning JavaScript Foundations It is particularly useful for Students interested in learning how to build interactive web pages using JavaScript or Students interested in learning ReactJS or Students interested in front-end UI Development using React or Students interested in learning JavaScript Foundations.

Enroll now: Build a Connect-4 Clone in React + JavaScript Foundations

Summary

Title: Build a Connect-4 Clone in React + JavaScript Foundations

Price: $39.99

Average Rating: 4.29

Number of Lectures: 78

Number of Published Lectures: 78

Number of Curriculum Items: 78

Number of Published Curriculum Objects: 78

Original Price: $29.99

Quality Status: approved

Status: Live

What You Will 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

Who Should Attend

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

Target Audiences

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

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.

Course Curriculum

Chapter 1: Intro to The Document Object Model (DOM)

Lecture 1: DOM Introduction

Lecture 2: DOM Manipulation

Chapter 2: JavaScript Development

Lecture 1: Introduction

Lecture 2: JS Placement

Lecture 3: External JavaScript

Lecture 4: JavaScript Output

Lecture 5: JavaScript InnerHTML

Lecture 6: JavaScript Commenting

Lecture 7: JavaScript Constants

Lecture 8: JavaScript Variables Introduction

Lecture 9: JavaScript Assignment Operator

Lecture 10: JavaScript Arithmetic Operations

Lecture 11: JavaScript Arithmetic Operations Continued

Lecture 12: JavaScript Operator Precedence

Lecture 13: JavaScript Data Types

Lecture 14: JavaScript Objects

Lecture 15: JavaScript Object Output

Lecture 16: JavaScript Strings

Lecture 17: JavaScript String Length

Lecture 18: JavaScript Special Characters

Lecture 19: JavaScript Random Numbers

Lecture 20: JavaScript Min and Max Function

Lecture 21: JavaScript Math Round Function

Lecture 22: JavaScript Arrays

Lecture 23: JavaScript Array Attributes

Lecture 24: JavaScript Arrays – Pop – Push – Shift – Unshift

Lecture 25: JavaScript Changing and Deleting Elements

Lecture 26: JavaScript Splicing an Array

Lecture 27: JavaScript Sorting an Array

Lecture 28: JavaScript Joining Arrays

Lecture 29: JavaScript Conditional Statements

Lecture 30: JavaScript Comparisons

Lecture 31: JavaScript Booleans

Lecture 32: JavaScript For Loops

Lecture 33: JavaScript For-In Loop

Lecture 34: JavaScript While Loops

Lecture 35: JavaScript Do-While Loop

Lecture 36: JavaScript Break and Continue

Lecture 37: JavaScript Functions

Lecture 38: JavaScript Events

Lecture 39: JavaScript Project 1 – BG Color Changer

Lecture 40: JavaScript Project 2 – Photo Gallery

Lecture 41: JavaScript Project 2 – Completion

Chapter 3: Intro to React

Lecture 1: Skills Required

Lecture 2: What is React?

Lecture 3: Hello React

Lecture 4: Tools Needed

Lecture 5: Code Pen

Lecture 6: Intro to JSX

Chapter 4: React Project: Build a Connect-4 Clone

Lecture 1: Project Overview

Lecture 2: Tools Needed

Lecture 3: Creating the Game Board

Lecture 4: Game Circle – OnClickEvent

Lecture 5: Passing Props – Destructing – React Children

Lecture 6: Passing Arguments to Click Events

Lecture 7: Inline Styling

Lecture 8: Square to Circle Component

Lecture 9: Global Styling

Lecture 10: Dynamic Styling

Lecture 11: Dynamic Classes

Lecture 12: Handling Callbacks

Lecture 13: Using React State Hook (again)

Lecture 14: Updating the Player Circle

Lecture 15: Initializing the Game Board

Lecture 16: React Key Property

Lecture 17: Styling the Game Board – Header and Footer

Lecture 18: Calculating the Winner

Lecture 19: Displaying the Winner

Lecture 20: Determining a Draw Condition

Lecture 21: React Lifecycle Events

Lecture 22: Initializing the Game

Lecture 23: Suggesting a Move – Implementing a Computer Player

Lecture 24: Smart Computer Player (Basic AI)

Lecture 25: CSS Variables

Lecture 26: Conditional Rendering

Lecture 27: Deploy to Netlify

Lecture 28: Deploy to Surge

Lecture 29: Project Summary

Instructors

YouAccel Training
8+ Million Enrollments, 70k+ Reviews. Register Today.

Rating Distribution

1 stars: 2 votes

2 stars: 4 votes

3 stars: 30 votes

4 stars: 57 votes

5 stars: 88 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!