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

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

مقدمه و شروع به کار Introduction & Getting Started

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

• راهنمای گذراندن این دوره How To Take This Course

• ری‌اکت چیست؟ What Is React?

• معماری اپلیکیشن‌های ری‌اکت React App Architecture

• توسعه مبتنی بر کامپوننت Component-Based Development

• مقایسه ری‌اکت با جاوااسکریپت خام React vs Vanilla JavaScript

• اکوسیستم ری‌اکت React Ecosystem

• ری‌اکت در پشت صحنه چگونه کار می‌کند How React Works Under The Hood

• راه‌اندازی محیط توسعه Development Environment Setup

مرور مفاهیم ضروری جاوااسکریپت برای ری‌اکت React-Related JavaScript Refresher

• مقدمه بخش Section Intro

• توابع پیکانی (Arrow Functions) Arrow Functions

• تمپلیت لیترال‌ها (Template Literals) Template Literals

• رندرینگ سه تایی و کوتاه‌ساز (Ternary & Short Circuit) Ternary & Short Circuit Rendering

• تخریب ساختار و عملگر Rest (Destructuring) Destructuring & Rest Operator

• متدهای آرایه Array Methods

• زنجیره‌سازی اختیاری و عملگر Nullish Coalescing Optional Chaining & Nullish Coalescing Operator

• تغییرناپذیری و عملگر Spread Immutability & Spread Operator

• پراِمیس‌ها و Async Await Promises & Async Await

مبانی ری‌اکت – وضعیت، هوک‌ها، رویدادها، پراپس و بیشتر React Fundamentals – State, Hooks, Events, Props & More

• مقدمه بخش Section Intro

• راه‌اندازی سریع ری‌اکت و createElement Quick React Setup & createElement

• مقدمه‌ای بر JSX Intro To JSX (JavaScript XML)

• راه‌اندازی ابزار ساخت Vite Vite Build Tool Setup

• ساخت کامپوننت‌ها Creating Components

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

• لیست‌ها Lists

• مدیریت رویدادها Handling Events

• مقدمه‌ای بر State Intro To State

• وضعیت امتیازدهی (Rating State) Rating State

• بیشتر درباره هوک UseState More on UseState Hook

• رندرینگ و استایل‌دهی شرطی Conditional Rendering & Styling

• پراپس‌ها (Props) Props

• ترکیب کامپوننت‌ها (Component Composition) Component Composition

• ارسال امتیاز Submit Rating

• ترکیب کامپوننت مودال Modal Component Composition

• ارسال داده‌ها به عنوان Children Passing Data As Children

فرم‌ها، ورودی‌ها و کامپوننت‌های کنترل‌شده – پروژه اپلیکیشن یادداشت‌ها Forms, Input & Controlled Components – Notes App Project

• مقدمه بخش Section Intro

• راه‌اندازی اپلیکیشن و Tailwind (نسخه 4) App & Tailwind Setup (v4)

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

• شیء داده‌های فرم Form Data Object

• ارسال فرم و وضعیت سراسری (Global State) Form Submission & Global State

• نمایش یادداشت‌ها Show Notes

• ساخت فرم تاشو Make Form Collapsible

• کامپوننت‌های ورودی قابل استفاده مجدد Reusable Input Components

• حذف یادداشت‌ها Delete Notes

• چالش رندرینگ شرطی Conditional Rendering Challenge

• انتقال پراپس در سطوح مختلف (Prop Drilling) Prop Drilling

چرخه حیات کامپوننت و هوک useEffect Component Lifecycle & useEffect Hook

• مقدمه بخش Section Intro

• توضیح چرخه حیات کامپوننت Component Lifecycle Explained

• کلاس‌ها و متدهای چرخه حیات Classes & Lifecycle Methods

• چرخه حیات و useEffect Lifecycle & useEffect

• اثرات جانبی LocalStorage LocalStorage Side Effect

هوک useRef – پروژه تایمر ساده useRef Hook – Simple Timer Project

• مقدمه بخش Section Intro

• هوک useRef چیست و راه‌اندازی پروژه What Is useRef & Project Setup

• کاربرد useRef و ورودی‌های کنترل‌نشده useRef In Action & Uncontrolled Inputs

• حفظ مقدار تایمر در هنگام رندر مجدد Persist Timer Across Re-Renders

• چالش ترکیب کامپوننت‌ها Component Composition Challenge

• فوکوس خودکار روی دکمه شروع Auto-Focus Start Button

• ذخیره تایمر در Local Storage Save Timer To Local Storage