آموزش مبانی ری‌اکت و توسعه پیشرفته فرانت‌اند - آخرین آپدیت

مقدمه Introduction

• معرفی تخصص Introduction to Specialization

• تاریخچه ری‌اکت و نقاط عطف React History - Milestone

• ری‌اکت RC چیست و آخرین نسخه ری‌اکت What is React RC & Latest React Version

• پرسش و پاسخ: ری‌اکت RC و آخرین نسخه IQ - What is React RC & Latest React Version

• ساخت اولین پروژه با ری‌اکت ۱۹ Creating First Project - React 19

• پرسش و پاسخ: ساخت اولین پروژه ری‌اکت ۱۹ IQ - Creating First Project - React 19

• درک ساختار پروژه Understanding Project Structure

• پرسش و پاسخ: درک ساختار پروژه IQ - Understanding Project Structure

• ساخت پروژه با تایپ‌اسکریپت (TypeScript) Creating Project with TypeScript

• پرسش و پاسخ: ساخت پروژه با تایپ‌اسکریپت IQ - Creating Project with TypeScript

• ساخت پروژه در NextJS Creating Project in NextJS

• ساخت پروژه در Remix Creating Project in Remix

• پرسش و پاسخ: پروژه با تایپ‌اسکریپت و Remix IQ - Project with TypeScript and Remix

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

• ساخت کامپوننت از ابتدا Creating Component from Scratch

• پرسش و پاسخ: ساخت کامپوننت از ابتدا IQ - Creating Component from Scratch

• ساخت کارت محصول Creating Product Card

• پرسش و پاسخ: ساخت کارت محصول IQ - Creating Product Card

• رندر مقادیر پویا از یک آبجکت Render Dynamic Values from an Object

• پرسش و پاسخ: رندر مقادیر پویا از آبجکت IQ - Render Dynamic Values from an Object

• رندر مقادیر پویا از یک آرایه Rendering Dynamic Values from an Array

• مفهوم ویژگی Key در متد Map Concept of Key Attribute in Map()

• پرسش و پاسخ: رندر مقادیر آرایه و ویژگی Key IQ - Rendering Dynamic Values from Array and Key Attribute

• ری‌اکت فرگمنت (React Fragment) و فرگمنت خالی React Fragment & Empty Fragment

• پرسش و پاسخ: ری‌اکت فرگمنت IQ - React Fragment & Empty Fragment

• تفاوت Export پیش‌فرض و نام‌گذاری شده Default vs Named Export

• پرسش و پاسخ: Default vs Named Export IQ - Default vs Named Export

• قوانین JSX The Rules of JSX

• پرسش و پاسخ: قوانین JSX IQ - The Rules of JSX

• تخصیص JSX به متغیر Assigning JSX to Variable

• پرسش و پاسخ: تخصیص JSX به متغیر IQ - Assigning JSX to Variable

• درک مفهوم Props Understanding Props

• پرسش و پاسخ: درک Props IQ - Understanding Props

• پویا کردن کامپوننت محصول با استفاده از Props Making Product Component Dynamic Using Props

• رندرینگ شرطی (Conditional Rendering) Conditional Rendering

• پرسش و پاسخ: رندرینگ شرطی IQ - Conditional Rendering

• مدیریت رویدادهای پایه: کلیک Basic Event Handling - Click

• پرسش و پاسخ: مدیریت رویدادهای پایه IQ - Basic Event Handling

• ارسال پارامتر Parameter Passing

• پرسش و پاسخ: ارسال پارامتر IQ - Parameter Passing

• تمرین: ساخت یک کامپوننت کارکنان پویا Task - Create a Dynamic Employee Component

• تمرین: رندرینگ شرطی در کامپوننت کارکنان (isActive) Task - Conditional Rendering on Employee Component (isActive)

• تمرین: محاسبه مقدار فاکتوریل با ارسال پارامتر Task - Calculate the Factorial Value by Passing Parameter

مدیریت وضعیت (State) State Management

• استیت (State) چیست و چرا به آن نیاز داریم؟ What is the State and Why Needed?

• پرسش و پاسخ: مفهوم و نیاز به استیت IQ - What is the State and Why Needed?

• هوک useState و درک ایجاد استیت useState() Hook - Understanding State Creation

• پرسش و پاسخ: هوک useState IQ - useState() Hook - Understanding State Creation

• استیت به عنوان یک Snapshot State as a Snapshot

• پرسش و پاسخ: استیت به عنوان Snapshot IQ - State as a Snapshot

• به‌روزرسانی استیت بر اساس استیت قبلی Updating State Based on Previous State

• پرسش و پاسخ: به‌روزرسانی استیت بر اساس مقدار قبلی IQ - Updating State Based on Previous State

• کار با چندین استیت Working with Multiple States

• تابع مقداردهی اولیه (Initializer Function) برای جلوگیری از بازسازی استیت Initializer Function - Avoiding Recreation of Initial State

• پرسش و پاسخ: تابع مقداردهی اولیه IQ - Initializer Function - Avoiding Recreation of Initial State

• استفاده از آرایه به عنوان استیت Array as State

• پرسش و پاسخ: آرایه به عنوان استیت IQ - Array as State

• استفاده از آبجکت به عنوان استیت Object as State

• پرسش و پاسخ: آبجکت به عنوان استیت IQ - Object as State

• تمرین: مقداردهی اولیه استیت با یک آرایه بزرگ Task - Initialize the State with the Large Array

• تمرین: به‌روزرسانی عناصر استیت با استفاده از تابع به‌روزرسان Task - Update the Elements of the State Using Updater Function

بررسی عمیق مدیریت رویدادها Event Handling - Deep Dive

• مرور مدیریت رویدادها Event Handling Recap

• آبجکت رویداد در ری‌اکت: Synthetic Event React Event Object - Synthetic Event

• پرسش و پاسخ: Synthetic Event در ری‌اکت IQ - React Event Object - Synthetic Event

• رویداد Input: جعبه متن (Textbox) Input Event - Textbox

• تمرین: رویداد Input در Textbox Task - Input Event - Textbox

• پرسش و پاسخ: رویداد Input در Textbox IQ - Input Event - Textbox

• انتشار رویداد: Bubbling Event Propagation - Bubbling

• پرسش و پاسخ: انتشار رویداد (Bubbling) IQ - Event Propagation - Bubbling

• متوقف کردن انتشار رویداد Stopping Propagation

• پرسش و پاسخ: توقف انتشار IQ - Stopping Propagation

• متد preventDefault برای جلوگیری از رفتار پیش‌فرض preventDefault() - Preventing Default Behavior

• پرسش و پاسخ: preventDefault IQ - preventDefault() - Preventing Default Behavior

• رویداد فرم با چندین استیت form Event with Multiple States

• تمرین: رویداد فرم با چندین استیت Task - form Event with Multiple States

• مدیریت استیت‌های فرم به صورت آبجکت form Event States as Object

• تمرین: استفاده از استیت آبجکتی در رویداد فرم Task - Using Object State with form Event

• مدیریت رویداد واحد با استفاده از کلید پویا Single Event Handler Using Dynamic Key

• پرسش و پاسخ: هندلر رویداد واحد با کلید پویا IQ - Single Event Handler Using Dynamic Key

• تمرین: هندلر رویداد واحد با کلید پویا Task - Single Event Handler Using Dynamic Key

• به‌روزرسانی تابعی: روش صحیح Functional Update - The Correct Way

• فیلدهای ورودی: Checkbox Input Fields - Checkbox

• فیلدهای ورودی: Radio Button Input Fields - Radio Button

• تمرین: فیلدهای ورودی Radio Button Task - Input Fields - Radio Button

• پرسش و پاسخ: فیلدهای ورودی IQ - Input Fields

• تمرین: مدیریت فرم با استفاده از Textbox، Checkbox و Radio Buttons Task - Form Handling Using Textbox, Checkbox & Radio Buttons

• مدیریت رویداد: onFocus Event Handling - onFocus Event

• مدیریت رویداد: onBlur Event Handling - onBlur Event

• تمرین: مدیریت رویدادهای onFocus و onBlur Task - Event Handling - onFocus & onBlur Event

• مدیریت رویداد: onKeyUp و onKeyDown Event Handling - onKeyUp & onKeyDown Event

• پرسش و پاسخ: رویدادهای onKeyUp و onKeyDown IQ - Event Handling - onKeyUp & onKeyDown Event

• مدیریت رویداد: onMouseEnter و onMouseLeave Event Handling - onMouseEnter & onMouseLeave Event

• تمرین: رویدادهای onMouseEnter و onMouseLeave Task - Event Handling - onMouseEnter & onMouseLeave Event

• پرسش و پاسخ: onMouseEnter و onMouseLeave IQ - onMouseEnter & onMouseLeave Event

مدیریت عملی وضعیت Managing State Practically

• مقدمه Introduction

• ساخت پروژه Project Creation

• راه‌اندازی پروژه با Tailwind CSS و ساخت هدر Project Setup with Tailwind CSS and Header Creation

• ساخت کامپوننت کارت محصول Creating Product Card Component

• رندر لیست محصولات با داده‌های استاتیک Rendering Product List with Static Data

• ساخت مودال افزودن محصول Creating Add Product Modal

• ساخت فرم برای افزودن محصول Creating Form for Add Product

• ذخیره مقادیر فرم افزودن محصول Storing the Values of the Add Product Form

• پیاده‌سازی قابلیت افزودن محصول Implementing Add Product Functionality

• پیاده‌سازی قابلیت حذف محصول Implementing Delete Functionality

• راه‌اندازی فرم ویرایش محصول Setting Up Edit Product Form

• پیاده‌سازی قابلیت ویرایش محصول Implementing Edit Product Functionality

• پیاده‌سازی قابلیت فعال/غیرفعال کردن محصول Implementing Active/Inactive Product Functionality

• رندر محصولات فعال و غیرفعال Rendering Active/Inactive Products

هوک useEffect و چرخه حیات کامپوننت useEffect() - Working with Component Life Cycles

• درک چرخه حیات کامپوننت Understanding Component Life Cycle

• پرسش و پاسخ: چرخه حیات کامپوننت IQ - Understanding Component Life Cycle

• مقدمه‌ای بر هوک useEffect Introduction to useEffect Hook

• استفاده از هوک ساده useEffect Using Simple useEffect() Hook

• پرسش و پاسخ: استفاده از useEffect ساده IQ - Using Simple useEffect() Hook

• اهمیت آرایه وابستگی‌ها (Dependency Array) در useEffect useEffect() - Importance of the Dependency Array

• پرسش و پاسخ: آرایه وابستگی‌ها در useEffect IQ - useEffect() - Importance of the Dependency Array

• تابع پاک‌سازی (Cleanup Function) در useEffect useEffect() - Cleanup Function

• پرسش و پاسخ: تابع Cleanup در useEffect IQ - useEffect() - Cleanup Function

• مکان مناسب برای فراخوانی هوک useEffect The Right Place to Call the useEffect() Hook

• چه زمانی از استفاده از useEffect در ری‌اکت اجتناب کنیم When to Avoid Using the useEffect Hook in React

• درک چرخه اضافی Setup و Cleanup در حالت Strict Mode ری‌اکت Understanding React Strict Mode's Extra Setup and Cleanup Cycle

• هوک useEffect و مدیریت وابستگی‌ها useEffect() Hook - Managing Dependencies

• مقایسه useEffect و به‌روزرسانی‌های DOM: نیاز به useLayoutEffect useEffect() Vs DOM Updates - Need of UseLayoutEffect()

• به تأخیر انداختن افکت‌های ناشی از تعاملات در ری‌اکت Deferring Effects Triggered by Interactions in React

• درک اینکه useEffect فقط در سمت کلاینت اجرا می‌شود Understanding useEffect Only Runs on Client Side

ری‌اکت روتر (React Router) React Router

• مقدمه‌ای بر مسیریابی (Routing) Introduction to Routing

• درک مسیریابی در ری‌اکت Understanding Routing in React

• پیکربندی مسیرها با استفاده از React Router Configure Routes Using React Router

• پرسش و پاسخ: پیکربندی مسیرها با React Router IQ - Configure Routes Using React Router

• درک تفاوت اپلیکیشن‌های تک صفحه‌ای (SPA) و چند صفحه‌ای (MPA) Understanding Single-page Application and Multi-page Application

• پرسش و پاسخ: SPA در مقابل MPA IQ - SPA vs MPA

• ساخت نوار ناوبری (Navbar) در مسیر ریشه (Root) Navbar Creation on Root Route

• ساخت صفحه محصولات Creating Products Page

• ساخت صفحه یافت نشد (404) Not Found Page (404)

• پرسش و پاسخ: صفحه 404 IQ - Not Found Page (404)

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

• مدیریت پویای مسیرهای تودرتو: پارامتر مسیر (Route Parameter) Dynamically Handling Nested Routes - Route Parameter

• پرسش و پاسخ: مسیرهای تودرتو و پارامتر مسیر IQ - Nested Routes - Route Parameter

• لایه بندی‌ها (Layouts) و رویداد Outlet Layouts - Outlet Event

• پرسش و پاسخ: لایه‌ها و Outlet IQ - Layouts - Outlet Event

• ویژگی index و ارجاع به مسیر والد "index" Attribute - Referring the Parent Route

• پرسش و پاسخ: ویژگی index و مسیر والد IQ - "index" Attribute - Referring the Parent Route

• استفاده از Navbar به عنوان یک لایه (Layout) Use Navbar as a Layout

• ارسال داده به کامپوننت فرزند: context و هوک useOutletContext Passing Data to Child Component - context & useOutletContext() hook

• ارسال داده به کامپوننت فرزند: state و هوک useLocation Passing Data to Child Component - "state" and useLocation() hook

• پرسش و پاسخ: context, useOutletContext, state و useLocation IQ - context, useOutletContext(), "state" and useLocation() hook

• ساخت کارت جزئیات محصول Creating Product Details Card

• درک هوک useRoutes Understanding the useRoutes() hook

• پرسش و پاسخ: درک هوک useRoutes IQ - Understanding the useRoutes() hook

• درک کامپوننت NavLink Understanding NavLink Component

• پرسش و پاسخ: درک NavLink IQ - Understanding NavLink Component

• کامپوننت Navigate برای تغییر مسیر (Redirection) Navigate Component for Redirection

• هوک useNavigate: روش صحیح تغییر مسیر useNavigate() - Correct Way to Redirect

• پرسش و پاسخ: Navigate و useNavigate IQ - Navigate & useNavigate()

• بازسازی ساختار پروژه Project Restructuring

• بهبود رابط کاربری Interface Improvement

هوک useContext و مدیریت وضعیت جهانی The useContext() Hook - Global State Management

• مفهوم Prop Drilling Prop Drilling

• پرسش و پاسخ: Prop Drilling IQ - Prop Drilling

• درک Context API Understanding of Context API

• پرسش و پاسخ: درک Context API IQ - Understanding of Context API

• هوک useContext useContext() Hook

• پرسش و پاسخ: هوک useContext IQ - useContext() Hook

• ساخت رابط کاربری برای اپلیکیشن ماشین‌حساب Creating Interface for Calculator App

• راه‌اندازی Context API در اپلیکیشن ماشین‌حساب Setup Context API into Calculator App

• مدیریت داده‌های ورودی در وضعیت جهانی (Global State) Handling Input Data in the Global State

• تغییر و مدیریت وضعیت جهانی Global State Manipulation

• پرسش و پاسخ: مدیریت وضعیت جهانی IQ - Global State Manipulation

• تأمین‌کنندگان کانتکست تودرتو (Nested Context Providers) Nested Context Providers

رداکس تول‌کیت (RTK) و مدیریت پیشرفته وضعیت جهانی Redux Tool Kit (RTK) - Advanced Global State Handling

• مقدمه‌ای بر Redux و RTK Introduction to Redux and RTK

• پرسش و پاسخ: معرفی Redux و RTK IQ - Introduction to Redux and RTK

• ساخت اسلایس (Slice) Creating Slice

• پرسش و پاسخ: ساخت Slice IQ - Creating Slice

• پیکربندی استور (Store) Configuring Store

• پرسش و پاسخ: پیکربندی Store IQ - Configuring Store

• دریافت داده‌ها از استور: هوک useSelector Fetching the Store Data - useSelector()

• پرسش و پاسخ: دریافت داده‌ها با useSelector IQ - Fetching the Store Data - useSelector()

• ساخت اکشن‌ها (Actions) در اسلایس Creating Actions in Slice

• پرسش و پاسخ: ساخت اکشن‌ها در Slice IQ - Creating Actions in Slice

• نحوه عملکرد تغییرناپذیری (Immutability) در اکشن‌ها در پشت صحنه How Immutability in Actions Works Behind the Scenes

• پرسش و پاسخ: مفهوم Immutability در اکشن‌ها IQ - How Immutability in Actions Works Behind the Scenes

• مدیریت مقادیر ورودی در رداکس Handling Input Values in Redux

• محاسبه عملیات ریاضی در رداکس Calculating Arithmetic Operations in Redux

• پیاده‌سازی رداکس در اپلیکیشن React Router Implementing Redux in React Router App