آموزش مبانی ری‌اکت، کامپوننت‌ها و مدیریت استیت (React) - آخرین آپدیت

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

مقدمه Introduction

• آشنایی با تخصص آموزشی Introduction to the Specialization

• چرا باید ری‌اکت یاد بگیریم؟ Why Should You Learn React?

• دموی زنده پروژه نهایی Live Demo - Final Project

• چه چیزی خواهیم ساخت - بخش اول What We Will Build - Part 1

• چه چیزی خواهیم ساخت - بخش دوم What We Will Build - Part 2

• پیش‌نیازهای دوره Course Prerequisites

• منابع پروژه Project Resources

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

• افزونه‌های Visual Studio Code Visual Studio Code Extensions

مبانی ری‌اکت React Fundamentals

• راه‌اندازی HTML پایه و افزودن CDN ری‌اکت Set Up Basic HTML and Add React CDN

• اولین کد ری‌اکت First React Code

• تمرین ۱: نوشتن اولین کد ری‌اکت Assignment 1 - Writing First React Code

• ایجاد المان و رندر کردن در ری‌اکت Creating Element and Rendering in React

• JSX چیست؟ What Is JSX?

• روشی بهتر برای ایجاد پروژه‌های ری‌اکت Better Way to Create React Projects

• ایجاد پروژه Create Project

• اجرای پروژه Run the Project

• پاک‌سازی پروژه Cleanup Project

• بازگرداندن قابلیت‌های پروژه Make the Project Functional Again

• اولین کامپوننت ری‌اکت First React Component

• تمرین ۲: کامپوننت ری‌اکت Assignment 2 - React Component

• تمرین ۳: کامپوننت والد و فرزند Assignment 3 - Parent Child Component

• پاسخ تمرین ۳: کامپوننت والد و فرزند Assignment 3 Solution - Parent-Child Component

• قوانین JSX Rules of JSX

کامپوننت‌های ری‌اکت React Components

• کار با استایل‌ها Work with Styles

• افزودن کلاس‌های بوت‌استرپ Adding Bootstrap Classes

• کار با کلاس‌ها - بخش اول Work with Classes - Part 1

• متغیرها در JSX Variables in JSX

• تمرین ۳: افزودن Const Assignment 3 - Adding Const

• پاسخ تمرین ۳: افزودن ثابت‌ها Assignment 3 Solution - Adding Constant.

• المان‌های HTML در JSX HTML Element in JSX

• کامپوننت Student Student Component

• صادرات و وارد کردن کامپوننت‌ها (Export/Import) Export and Import Components

• تمرین ۴: جداسازی کامپوننت Student Assignment 4 - Separating Student Component

• پاسخ تمرین ۴: جداسازی کامپوننت Student Assignment 4 Solution - Separating Student Component

• Props و کامپوننت‌ها Props and Components

• نصب کتابخانه‌های جانبی و تصاویر Install Third-Party Libraries and Images

• وارد کردن تصویر و طراحی هدر Import Image and Header Design

• طراحی فوتر و بدنه اصلی کامپوننت Footer and Main Body Component

• تمرین ۵: رفع خطا و طراحی Assignment 5 - Fix Error and Designing

• ارسال کامپوننت‌ها به عنوان Children Passing Components as Children

• سلسله‌مراتب نهایی Final Hierarchy

• توابع Arrow Function Arrow Function

• مقایسه Functional Components در مقابل Class Components Functional Versus Class Components

• کامپوننت‌های کلاس-محور (Class Components) Class Components

• تمرین ۶: تبدیل MainBody به Class Component Assignment 6 - Convert MainBody to Class Component

استیت ری‌اکت و پروژه CountOPedia React State - CountOPedia

• ایجاد CountOPedia Create CountOPedia

• پاسخ تمرین ۷: راه‌اندازی CountOPedia Assignment 7 Solution - Set Up CountOPedia

• دکمه‌های اپلیکیشن شمارنده Counter Application Buttons

• رویدادهای کلیک Click Events

• تنظیم و بازیابی استیت (State) Setting and Retrieving State

• دمو: استیت در ری‌اکت Demo - React State

• خلاصه مفاهیم استیت State Summary

• سینتکس جدید SetState New SetState Syntax

• طراحی رابط کاربری CountOPedia CountOPedia UI

• دکمه بازی تصادفی و ریست Random Play and Reset Button

• تمرین ۸: وضعیت بازی و آخرین حرکت Assignment 8 - Game Status and Last Play

• پاسخ تمرین ۸: وضعیت بازی و آخرین حرکت Assignment 8 Solution - Game Status and Last Play

پروژه ContactOPedia و عملیات CRUD ContactOPedia - CRUD Operations

• ایجاد پروژه ContactOPedia Create Project - ContactOPedia

• افزودن کامپوننت‌ها Add Components

• ساختار اولیه (Skeleton) کامپوننت‌ها Skeleton of Components

• افزودن رابط کاربری مخاطبین Add Contact UI

• استیت مخاطبین مورد علاقه و عمومی Favorite and General Contact State

• رابط کاربری هر مخاطب به صورت مجزا Individual Contact UI

• ظاهر و احساس پروژه ContactOPedia Look and Feel ContactOPedia

• افزودن هندلر (Handler) برای مخاطبین Add Contact Handler

• پیاده‌سازی عملی افزودن مخاطب Add Contact in Action

• افزودن اعتبارسنجی (Validation) Add Validations

• نمایش اعتبارسنجی و اعلان موفقیت Display Validation and Success Notification

• تغییر وضعیت مورد علاقه (Toggle Favorites) Toggle Favorites

• تمرین ۹: حذف مخاطب Assignment 9 - Delete Contact

• پاسخ تمرین ۹: حذف مخاطب Assignment 9 Solution - Delete Contact

• افزودن کاربر تصادفی به لیست مخاطبین Add Random User to Contact List

• فراخوانی با Axios Axios Call

• دمو: افزودن مخاطب تصادفی Demo - Adding Random Contact

• تمرین ۱۰: حذف تمامی مخاطبین Assignment 10 - Remove All Contact

• پاسخ تمرین ۱۰: حذف تمامی مخاطبین Assignment 10 Solution - Remove all Contact

• شناسایی مخاطبی که باید بروزرسانی شود Which Contact Has to Be Updated

• تغییر رابط کاربری بر اساس بروزرسانی Toggle UI Based on Update

• عملکرد دکمه لغو Cancel Button in Action

• بروزرسانی مخاطب - بخش اول Update Contact - Part 1

• بروزرسانی مخاطب - بخش دوم Update Contact - Part 2

پروژه CyclOPedia و متدهای چرخه حیات در Class Components CyclOPedia - Lifecycle Methods Class Components

• ایجاد پروژه CyclOPedia Create Project - CyclOPedia

• راه‌اندازی Random API Set Up Random API

• نمایش مدرس Display Instructor

• متد componentDidUpdate componentDidUpdate

• کامپوننت‌های کنترل‌شده (Controlled Component) Controlled Component

• ذخیره‌سازی در Local Storage Saving in Local Storage

• جداسازی بخش مدرس Separating Out Instructor

• متد componentWillUnmount componentWillUnmount

• بارگذاری لیست دانشجویان Load Student List

• عیب‌یابی و رفع باگ Bug Time

پروژه WatchOPedia و هوک‌ها در ری‌اکت WatchOPedia - Hooks in React

• ایجاد WatchOPedia Create WatchOPedia

• راه‌اندازی شمارنده Set Up Counter

• استفاده عملی از useState useState in Action

• نکات مهم و اشتباهات رایج useState Gotchas with useState

• اشیاء (Objects) و استیت Objects and State

• نکته مهم دیگر در مورد useState Another Gotcha with useState

• بخش هیجان‌انگیز Something Exciting

• تنظیمات فیلم‌های WatchOPedia WatchOPedia Movie Setup

• پاسخ تمرین ۱۱: نمایش لیست فیلم‌ها Assignment 11 Solution - Display Movie List

• پاسخ تمرین ۱۲: افزودن فیلم به لیست تماشا Assignment 12 Solution - Add a Movie to Watch

پروژه CyclOPedia و متدهای چرخه حیات در Functional Components CyclOPedia - Lifecycle Methods Functional Components

• پروژه اولیه Initial Project

• فیلدهای ورودی نام و بازخورد Name and Feedback Input fields

• مروری بر useEffect useEffect Overview

• استفاده از useEffect فقط در رندر اول useEffect - First Render Only

• عملکرد Unmount در useEffect useEffect - Unmount in Action

• تمرین ۱۳: استفاده از useEffect Assignment 13 - Use Effect

• پاسخ تمرین ۱۳: استفاده از useEffect Assignment 13 Solution - Use Effect

• بارگذاری دانشجو هنگام بروزرسانی شمارنده Load Student on Counter Update

• هوک useRef و مقادیر قبلی useRef and previous values

• استفاده از useRef برای تعداد دانشجویان useRef on Student Count

• کاربردهای رایج‌تر useRef More Common Uses of useRef

• هوک useId uselD Hook

پروژه RouteOPedia و مسیریابی در ری‌اکت RouteOPedia - Routing in React

• راه‌اندازی RouteOPedia Set Up RouteOPedia

• ایجاد کامپوننت‌های بیشتر Create More Components

• اولین مسیر (Route) First Route

• کامپوننت Link Link Component

• تمرین ۱۴: مسیرهای محصولات Assignment 14 - Product Routes

• پاسخ تمرین ۱۴: مسیرهای محصولات Assignment 14 Solution- Product Routes

• مسیرهای تو در تو (Nested Routes) Nested Routes

• استفاده از Index در مسیرهای تو در تو Index in Nested Route

• صفحه یافت نشد (Not Found) Not Found

• پارامترها در URL Parameters in URL

• تمرین ۱۵: پارامترها در URL Assignment 15 - Parameters in URL

• کامپوننت NavLink NavLink Component

• مسیریابی با استفاده از هوک useNavigate Navigate Using useNavigate Hook

• استفاده از کامپوننت Link برای مسیریابی Using Link Component to Navigate

• روش دیگر مسیریابی Another Navigation Method

• بازگشت به مسیر قبلی Navigate Back