آموزش مبانی React و پروژه‌های اولیه - آخرین آپدیت

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

setup-React-19-and-JSX React 19 Setup & JSX

• مقدمه‌ای بر دوره تخصصی Introduction to the Specialization

• نحوه راه‌اندازی React 19 با Vite How to Setup React 19 with Vite

• اولین کامپوننت React شما Your First React Component

• خروجی گرفتن از کامپوننت‌های React Exporting React Components

• ساخت رابط کاربری با JSX: نوشتن مارک‌آپ در React Building UIs with JSX: Writing Markup in React

• ادغام JavaScript در JSX با استفاده از آکولاد Integrating JavaScript in JSX with Curly Braces

• استایل‌دهی به کامپوننت‌های React Styling React Components

• کار با Props در کامپوننت‌های React Working with Props in React Components

• رندرینگ شرطی ۱ Conditional Rendering 1

• رندرینگ شرطی ۲ Conditional Rendering 2

• رندر کردن لیست‌ها Rendering Lists

• نگه داشتن خلوص (Pure) کامپوننت‌ها Keeping Components Pure

• مثالی از Purity Props Purity Props Example

مرور-JSX-اشتباهات-رایج-بهترین-روش‌ها JSX Review - Common mistakes - Best practices

• مرور JSX JSX Review

• اشتباهات رایج و بهترین روش‌ها Common Mistakes - Best Practices

پروژه-حرفه‌ای-Cambridge-Rentals Professional Project - Cambridge Rentals

• مقدمه Introduction

• درخت کامپوننت (Component Tree) Component Tree

• ساخت ساختار فایل‌ها Building the File Structure

• ساخت Header Build the Header

• ساخت Title Build the Title

• ساخت Footer Build the Footer

• ساخت لیست ویژگی‌ها Build the List of Properties

• ساخت کامپوننت PropertyTypeLabel Build the PropertyTypeLabel Component

• ساخت کامپوننت PropertyBanner Build the PropertyBanner Component

• ساخت کامپوننت IconWithText Build the IconWithText Component

• ساخت کامپوننت PropertyAttribute Build the PropertyAttribute Component

افزودن-تعامل‌پذیری Adding Interactivity

• پاسخ به رویدادها Responding to Events

• انتقال هندلرهای رویداد از والد به فرزند Passing Event Handlers from a Parent to a Child

• درک انتشار رویداد (Event Propagation) Understanding Event Propagation

• جلوگیری از رفتار پیش‌فرض Preventing Default Behaviour

• وضعیت در React (State) React State

• دسته‌بندی State و به‌روزرسانی آن با مقدار در مقابل تابع State Batching + Updating State Using a Value vs Function

• به‌روزرسانی اشیاء (Objects) در State Updating Objects in State

• به‌روزرسانی آرایه‌ها در State Updating Arrays in State

• ایجاد سبد خرید Create a Shopping Cart

• چرخه Trigger -> Render -> VirtualDOM -> Commit Trigger => Render => VirtualDOM => Commit

مرور-افزودن-تعامل‌پذیری-اشتباهات-رایج-بهترین-روش‌ها Adding Interactivity Review - Common mistakes - Best practices

• مرور افزودن تعامل‌پذیری Adding Interactivity - Review

پروژه-حرفه‌ای-اپلیکیشن-To-Do-List Professional Project: To Do List App

• مقدمه Introduction

• درخت کامپوننت Component Tree

• ساخت ساختار فایل‌ها Building the File Structure

• رندر کردن وظایف (Tasks) Rendering Tasks

• ساخت کامپوننت TaskControls Building the TaskControls Component

• ساخت کامپوننت TaskForm Building the TaskForm Component

• تغییر وضعیت تکمیل وظیفه Toggle Task Completion

• حذف وظایف Delete Tasks

• ویرایش وظایف Edit Tasks

• ماندگار کردن تغییرات با استفاده از localStorage Make Changes Persistent Using localStorage

React-Reducer React Reducer

• مقدمه Introduction

• ایجاد تابع Reducer Create the Reducer Function

مرور-React-Reducer-اشتباهات-رایج-و-بهترین-روش‌ها React Reducer Review - Common mistakes and best practices

• مرور React Reducer اشتباهات رایج و بهترین روش‌ها React Reducer Review - Common mistakes and best practices

پروژه-حرفه‌ای-آزمون-رانندگی-انگلیس-با-React-Reducer Professional Project: UK Driving Test - React Reducer

• مقدمه Introduction

• درخت کامپوننت Component Tree

• ساخت ساختار فایل‌ها Building the File Structure

• مدیریت State کوییز با استفاده از useReducer Managing Quiz State with useReducer

• نمایش سوال: بخش هدر سوال QuestionView: QuestionHeader

• نمایش سوال: متن سوال QuestionView: QuestionText

• نمایش سوال: گزینه‌های پاسخ QuestionView: AnswerOptions

• نمایش سوال: نمایش رسانه QuestionView: MediaDisplay

• نمایش سوال: کنترل‌های ناوبری QuestionView: NavigationControls

• نوار پیشرفت (ProgressBar) ProgressBar

• بنر اپلیکیشن AppBanner

• نمایش نتیجه ResultView

React-Context React Context

• مقدمه‌ای بر React Context Introduction to React Context

• اعمال React Context در اپلیکیشن To Do List Applying React Context to To-Do List App