آموزش مبانی مدرن ری‌اکت ۲۰۲۶: راهنمای کاربردی توسعه‌دهنده [ویدئویی] - آخرین آپدیت

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

مقدمه Introduction

• معرفی دوره Course Introduction

• چیستی، چرایی و جایگزین‌های ری‌اکت What, Why, and React Alternatives

• کامپوننت چیست؟ What Is a Component?

• راه‌اندازی محیط کدنویسی در ویندوز Set Up the Coding Environment on Windows

• ساخت اولین پروژه ری‌اکت Create Your First React Project

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

• ساخت اولین کامپوننت ری‌اکت Creating the First React Component

• مرور مجدد کدها Revisit the Code

JSX JSX

• معرفی فصل Chapter Introduction

• ساختار بهتر A Better Structure

• پیاده‌سازی کامپوننت SubscriptionForm Implementing SubscriptionForm Component

• استایل‌های درون‌خطی (Inline Styles) Inline Styles

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

• المان ریشه واحد و React Fragments One Root Element and React Fragments

• کلاس‌های CSS CSS Classes

پراپ‌ها (Props) Props

• معرفی فصل Chapter Introduction

• نصب پکیج‌های Third-party Install Third-party Packages

• پیاده‌سازی کامپوننت Quote Implementing Quote Component

• افزودن پراپ‌ها به کامپوننت Quote Adding Props to Quote Component

• بررسی دقیق پراپ‌ها Props in Detail

• تابع Map Map Function

• پراپ Key Key Prop

• استفاده از props.children props.children

استیت (State) State

• مقدمه Introduction

• JSX برای شمارنده (Counter) Counter's JSX

• مدیریت‌کننده‌های رویداد (Event Handlers) Event Handlers

• اولین پیاده‌سازی شمارنده Counter First Implementation

• هوک useState useState Hook

ساخت یک پروژه کاربردی Building a Practical Project

• مرور کلی پروژه Project Overview

• بحث در مورد کامپوننت‌ها Talk About the Components!

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

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

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

• استفاده از API انیمه و axios Anime API and axios

• توضیحات بیشتر درباره جستجو Talk More About Search

• تابع جستجو Search Function

• پراپ‌های SearchInput SearchInput Props

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

• دریافت پاسخ API Consume the API Response

• عدم امکان تغییر مستقیم استیت (Mutation) Cannot Mutate State

• افزودن به علاقه‌مندی‌ها Add to Favorites

• حذف از علاقه‌مندی‌ها Remove from Favorites

• کامپوننت لودینگ Loading Component

• ماژول‌های CSS (CSS Modules) CSS Modules

• وضعیت‌های لودینگ و خطا Loading and Error States

• افزودن لودینگ و خطا به JSX Add Loading and Error to JSX

• یک مشکل دیگر! Yet Another Issue!

• بررسی دقیق هوک useEffect useEffect Hook in Detail

• جستجوی اولیه The Initial Search

• یک تغییر سریع A Quick Change

استایل‌دهی در ری‌اکت Styling in React

• معرفی فصل Chapter Introduction

• مروری بر نحوه افزودن استایل به صفحه A Review of How to Add Styles to the Page

• آیکون‌ها Icons

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

• کامپوننت Alert با CSS Modules Alert Component With CSS Modules

• استفاده از CSS in JS CSS-in-JS

• کامپوننت Alert با Styled Components Alert Component With Styled Components

• جداسازی دغدغه‌ها (Separation of Concerns) چگونه است؟ What About Separation of Concerns?

طراحی کامپوننت و کتابخانه‌های کامپوننت Component Design and Component Libraries

• معرفی فصل Chapter Introduction

• بازبینی اپلیکیشن انیمه Revisiting the Anime App

• کتابخانه کامپوننت MUI MUI Component Library

• استفاده از کامپوننت‌های MUI Using MUI Components

• سلسله‌مراتب کامپوننت‌ها در پروژه‌های واقعی ری‌اکت Component Hierarchies in Real-World React Projects

ساختار داخلی ری‌اکت و بهینه‌سازی عملکرد React Internals and Performance Optimization

• معرفی فصل Chapter Introduction

• رویکرد Declarative و رندرینگ The Declarative Approach and Rendering

• DOM مجازی (Virtual DOM) Virtual DOM

• دسته‌بندی استیت (State Batching) State Batching

• جلوگیری از رندرهای مجدد اضافی Avoiding Extra Re-renders

• هوک useCallback The useCallback Hook

• هوک useMemo The useMemo Hook

• ابزار React DevTools و پروفایلینگ React DevTools and Profiling

• ابزار Lighthouse Lighthouse

• کامپایلر ری‌اکت (React Compiler) React Compiler