آموزش ساخت Connect-4 Clone در React + JavaScript Foundations

سرفصل ها و درس ها

مقدمه ای بر مدل شیء سند (DOM) Intro to The Document Object Model (DOM)

• معرفی DOM DOM Introduction

• دستکاری DOM DOM Manipulation

توسعه جاوا اسکریپت JavaScript Development

• مقدمه Introduction

• قرار دادن JS JS Placement

• جاوا اسکریپت خارجی External JavaScript

• خروجی جاوا اسکریپت JavaScript Output

• JavaScript InnerHTML JavaScript InnerHTML

• کامنت گذاری جاوا اسکریپت JavaScript Commenting

• ثابت جاوا اسکریپت JavaScript Constants

• معرفی متغیرهای جاوا اسکریپت JavaScript Variables Introduction

• اپراتور جاوا اسکریپت JavaScript Assignment Operator

• عملیات محاسباتی جاوا اسکریپت JavaScript Arithmetic Operations

• عملیات محاسباتی جاوا اسکریپت ادامه دارد JavaScript Arithmetic Operations Continued

• اولویت اپراتور جاوا اسکریپت JavaScript Operator Precedence

• انواع داده جاوا اسکریپت JavaScript Data Types

• اشیاء جاوا اسکریپت JavaScript Objects

• خروجی شی جاوا اسکریپت JavaScript Object Output

• رشته های جاوا اسکریپت JavaScript Strings

• طول رشته جاوا اسکریپت JavaScript String Length

• کاراکترهای ویژه جاوا اسکریپت JavaScript Special Characters

• اعداد تصادفی جاوا اسکریپت JavaScript Random Numbers

• تابع حداقل و حداکثر جاوا اسکریپت JavaScript Min and Max Function

• تابع دور ریاضی جاوا اسکریپت JavaScript Math Round Function

• آرایه های جاوا اسکریپت JavaScript Arrays

• ویژگی های آرایه جاوا اسکریپت JavaScript Array Attributes

• آرایه های جاوا اسکریپت - Pop - Push - Shift - Unshift JavaScript Arrays - Pop - Push - Shift - Unshift

• جاوا اسکریپت تغییر و حذف عناصر JavaScript Changing and Deleting Elements

• جاوا اسکریپت پیوند یک آرایه JavaScript Splicing an Array

• جاوا اسکریپت مرتب سازی یک آرایه JavaScript Sorting an Array

• پیوستن آرایه های جاوا اسکریپت JavaScript Joining Arrays

• عبارات شرطی جاوا اسکریپت JavaScript Conditional Statements

• مقایسه جاوا اسکریپت JavaScript Comparisons

• بولین های جاوا اسکریپت JavaScript Booleans

• جاوا اسکریپت برای حلقه ها JavaScript For Loops

• JavaScript For-In Loop JavaScript For-In Loop

• JavaScript while Loops JavaScript While Loops

• حلقه جاوا اسکریپت Do-While JavaScript Do-While Loop

• جاوا اسکریپت شکسته و ادامه دهید JavaScript Break and Continue

• توابع جاوا اسکریپت JavaScript Functions

• رویدادهای جاوا اسکریپت JavaScript Events

• JavaScript Project 1 - BG Color Changer JavaScript Project 1 - BG Color Changer

• پروژه جاوا اسکریپت 2 - گالری عکس JavaScript Project 2 - Photo Gallery

• پروژه جاوا اسکریپت 2 - تکمیل JavaScript Project 2 - Completion

مقدمه ای برای React Intro to React

• مهارت های مورد نیاز Skills Required

• React چیست؟ What is React?

• سلام واکنش Hello React

• ابزار مورد نیاز Tools Needed

• قلم کد Code Pen

• معرفی JSX Intro to JSX

React Project: ساخت Connect-4 Clone React Project: Build a Connect-4 Clone

• بررسی اجمالی پروژه Project Overview

• ابزار مورد نیاز Tools Needed

• ابزار مورد نیاز Tools Needed

• ایجاد صفحه بازی Creating the Game Board

• دایره بازی - OnClickEvent Game Circle - OnClickEvent

• گذراندن وسایل - تخریب - واکنش کودکان Passing Props - Destructing - React Children

• ارسال آرگومان ها برای کلیک روی رویدادها Passing Arguments to Click Events

• یک ظاهر طراحی داخلی Inline Styling

• مولفه مربع به دایره Square to Circle Component

• یک ظاهر طراحی جهانی Global Styling

• یک ظاهر طراحی پویا Dynamic Styling

• کلاس های دینامیک Dynamic Classes

• رسیدگی به تماس ها Handling Callbacks

• استفاده از React State Hook (دوباره) Using React State Hook (again)

• به روز رسانی حلقه بازیکن Updating the Player Circle

• راه اندازی صفحه بازی Initializing the Game Board

• ویژگی React Key React Key Property

• طراحی صفحه بازی - سرصفحه و پاورقی Styling the Game Board - Header and Footer

• محاسبه برنده Calculating the Winner

• نمایش برنده Displaying the Winner

• تعیین یک شرط قرعه کشی Determining a Draw Condition

• رویدادهای چرخه حیات واکنش نشان دهید React Lifecycle Events

• راه اندازی بازی Initializing the Game

• پیشنهاد حرکت - پیاده سازی یک پخش کننده کامپیوتری Suggesting a Move - Implementing a Computer Player

• پخش کننده رایانه هوشمند (هوش مصنوعی اولیه) Smart Computer Player (Basic AI)

• متغیرهای CSS CSS Variables

• رندر مشروط Conditional Rendering

• در Netlify مستقر شوید Deploy to Netlify

• مستقر در Surge Deploy to Surge

• خلاصه ی پروژه Project Summary