آموزش ساخت Connect-4 Clone در React + JavaScript Foundations
Build a Connect-4 Clone in React + JavaScript Foundations
آنچه یاد خواهید گرفت
- مقدمه ای بر مدل شیء سند (DOM)
- دستکاری DOM
- مبانی جاوا اسکریپت
- عملگرهای حسابی جاوا اسکریپت، انواع داده، آرایه ها، حلقه ها، رویدادها
- متغیرهای جاوا اسکریپت، اولویت اپراتور، اشیاء، توابع
- مبانی ReactJS
- ابزارهای مورد نیاز برای کار با React
- پاس دادن به وسایل، تخریب، واکنش کودکان، رویدادهای OnClick، استایل کردن
- ویژگی React Key، ارسال پاسخ به تماس
- ادغام هوش مصنوعی برای بازی های تک نفره
- رویدادهای چرخه حیات رندر شرطی
- ساخت Gameboard Connect-4
اگر در دوران رشد به بازی‌ها علاقه داشتید، احتمالاً با Connect-4 غریبه نیستید - یک بازی بسیار محبوب با هدف اتصال چهار دیسک تک رنگ به یک نگهدارنده شبکه مانند قبل از حریف. با استفاده از این دوره، شما این فرصت را دارید که با ساختن یک کلون Connect-4 با استفاده از React، این خاطره دوست داشتنی دوران کودکی را زنده کنید.
React که با نام React JS نیز شناخته می شود، یک کتابخانه قدرتمند جاوا اسکریپت است که برای ساخت رابط های کاربری سفارشی و تعاملی استفاده می شود. با استفاده از اجزای رابط کاربری برخی از شناخته شده‌ترین نمونه‌های سازمان‌هایی که از React برای قسمت جلویی خود استفاده می‌کنند عبارتند از Netflix، Facebook و Airbnb. React که توسط متا به همراه جامعه ای از توسعه دهندگان مستقل توسعه و نگهداری می شود، رایگان و منبع باز باقی می ماند. React یک کتابخانه مبتنی بر کامپوننت است که به طور کامل بر اساس جاوا اسکریپت ساخته شده است، که آن را برای طراحی رابط های کاربری پیچیده عالی می کند. با React، توسعه‌دهندگان می‌توانند مؤلفه‌های کپسوله‌شده‌ای بسازند که به‌طور مؤثر وضعیت خود را مدیریت کرده و به‌روزرسانی‌های رابط کاربری را به‌طور خاص در هنگام تغییر داده‌ها ارائه کنند. برای مثال، به ویژگی به‌روزرسانی خودکار محتوا که در فید توییتر می‌بینید یا دکمه لایک فیس‌بوک فکر کنید. در اینجا وضعیت مؤلفه UI در صفحه تغییر می کند، بدون نیاز به بازخوانی دستی هنگام به روز رسانی داده ها. این تنها یک ویژگی کوچک و در عین حال قدرتمند React است.
از طریق یک پروژه عملی کامل، این دوره به شما تمام اصول اساسی React را که برای تبدیل شدن به یک توسعه دهنده ماهر React باید بدانید، به شما آموزش می دهد. ما با ابزارهای مورد نیاز برای شروع با React، همراه با دستورالعمل‌های ایجاد صفحه بازی Connect-4 شروع می‌کنیم. از آنجا به رویدادهای React OnClick، Passing Props، Destructing، React Children و Passing Arguments می پردازیم. دانش‌آموزان با درک کاملی از مبانی، به سراغ تکنیک‌های مختلف استایل‌سازی برای اجزای بازی، همراه با کلاس‌های دینامیک و مدیریت تماس‌ها می‌روند. در اینجا استایل داخلی، جهانی و پویا را همراه با کلاس‌های پویا بررسی می‌کنیم. سپس به سراغ React State Hook، React Key Property و مقداردهی اولیه ماژول های بازی می رویم. سپس دانش‌آموزان با مفاهیم متوسط‌تری از جمله مؤلفه‌های منطقی محاسبه برنده، تعیین قرعه‌کشی و رویدادهای React Lifecycle مقابله می‌کنند. در آخرین ماژول، ما اجرای هوش مصنوعی را برای پیشنهادات حرکتی خودکار و بازی‌های تک نفره بررسی می‌کنیم.
علاوه بر ماژول عملی React، ما همچنین یک مرور کلی از جاوا اسکریپت را برای کسانی که به تازه کننده در اینجا ما با معرفی دانش آموزان با مدل شیء سند (DOM) شروع می کنیم که ساختار منطقی اسناد HTML را تعریف می کند. از آنجا به جاوا اسکریپت می‌رویم تا روش‌های مختلفی را نشان دهیم که در آن عناصر DOM می‌توانند برای افزودن تعامل به اجزای استاتیک دستکاری شوند. ما درست از اصول اولیه شروع می کنیم، که شامل جاوا اسکریپت و خروجی داده می شود. از آنجا به اعلان متغیر، عملیات حسابی، اولویت عملگر، انواع داده ها و اشیا می رویم. پس از پوشاندن پایه‌ها، با استفاده از آرایه‌ها، بیانیه‌های شرطی، عملگرهای مقایسه جاوا اسکریپت، Booleans و حلقه‌ها به عملیات پیچیده‌تر می‌رویم. در اینجا دانش آموزان یاد خواهند گرفت که قدرت واقعی جاوا اسکریپت را برای ارائه نتایج متفاوت بر اساس تعامل کاربر آزاد کنند. ما استفاده از توابع را برای مدیریت کارآمد وظایف تکراری و رویدادهای جاوا اسکریپت برای مدیریت خروجی بر اساس کنش‌ها و رویدادها بررسی خواهیم کرد. این بخش با یک پروژه عملی به پایان می رسد که در آن دانش آموزان دانش خود را برای ایجاد یک گالری عکس مبتنی بر وب و تغییر رنگ پس زمینه پیاده سازی می کنند.
این دوره برای چه کسانی است:
- دانشجویان علاقه مند به یادگیری نحوه ساخت صفحات وب تعاملی با استفاده از جاوا اسکریپت
- دانشجویان علاقه مند به یادگیری ReactJS
- دانشجویان علاقه مند به توسعه رابط کاربری front-end با استفاده از React
- دانشجویان علاقه مند به یادگیری مبانی جاوا اسکریپت
مقدمه ای بر مدل شیء سند (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
https://donyad.com/d/f7c5
YouAccel Training
شروع به یادگیری کنید و مهارت های مورد نیاز خود را کسب کنید! بیانیه ماموریت: برای تسهیل یک محیط جامع یادگیری آنلاین برای دانشجویان. درباره شرکت YouAccel یک ارائه دهنده پیشرو در آموزش آنلاین است ، دوره هایی را در صنایع مختلف از IT و توسعه گرفته تا تجارت ، بازاریابی ، طراحی و بهره وری ارائه می دهد. تجربه آموزش الکترونیکی ارائه شده توسط YouAccel پویا است. هر دوره در High Definition با تکالیف ، آزمونها و امتحانات مربوطه که به صورت الکترونیکی تحویل و درجه بندی می شوند ، پخش می شود. کلیه دوره های YouAccel توسط مربیان دارای گواهینامه تدریس می شود که دارای چندین سال سابقه کار در زمینه ای هستند که برای آنها آموزش می دهند. این دوره ها را می توان با سرعت شخصی برگزار کرد و در چندین سطح از جمله مبتدی ، متوسط و پیشرفته ارائه می شود. دوره های آنلاین همچنین برای راحتی بیشتر با هر دستگاه تلفن همراه سازگار هستند. با استفاده از این تجربه به یک سطح جدید شخصی ، ارتباط زنده با مربیان از طریق کنسول پیام رسانی آنلاین Udemy در دسترس است. کلیه دوره ها دارای گواهی پایان دوره هستند و محدودیت سنی اعمال نمی شود.
نمایش نظرات