آموزش مدیریت وضعیت در React، افکت‌ها و هوک‌های اختصاصی (Custom Hooks) - آخرین آپدیت

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

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

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

پروژه حرفه‌ای: وب‌سایت پورتفولیو - حالت تاریک/روشن و React Context Professional Project: Portfolio Website - Dark/Light Mode, React Context

• مقدمه Introduction

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

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

• راه‌اندازی چیدمان نوار ناوبری (Navbar) Setting Up the Navbar Layout

• لینک‌های ناوبری نسخه دسکتاپ Desktop Navigation Links

• افزودن سوئیچ حالت تاریک/روشن Adding Light/Dark Mode Toggle

• منوی موبایل با آیکون همبرگری Mobile Menu with Hamburger Icon

• ساخت نقاط اسکرول (ScrollDots) برای ناوبری Building ScrollDots for Navigation

• ساخت بخش Hero Building the Hero Section

• چیدمان بخش پروژه‌ها Projects Section Layout

• ساخت کامپوننت ProjectCard Create the ProjectCard Component

• فیلتر کردن پروژه‌ها بر اساس نوع Filtering Projects by Type

• ساخت چیدمان بخش مهارت‌ها و تجربیات Building the Skills & Experience Section Layout

• شبکه مهارت‌ها (Skills Grid) Skills Grid

• خط زمانی تجربیات (Experience Timeline) Experience Timeline

• ساخت چیدمان بخش توصیه‌ها Building the Layout of Recommendations Section

• کامپوننت TestimonialCard TestimonialCard

• ناوبری با فلش ArrowNavigation

• ردیف لوگوی شرکت‌ها با کامپوننت CompanyLogo Company Logos Row with CompanyLogo Component

• ساخت بخش تماس با ما Building the Contact Section

• ساخت فوتر Building the Footer

• حفظ حالت تاریک/روشن Dark/Light Mode Persisting

مقادیر مرجع با استفاده از Refs Reference values with Refs

• مقدمه Introduction

• ساخت تایمر با استفاده از Ref Creating a Timer Using Ref

• دسترسی به یک گره DOM با Ref Accessing a DOM Node with Ref

• دسترسی به گره‌های DOM کامپوننت‌های دیگر Accessing Another Component's DOM Nodes

• بهترین روش‌ها برای دستکاری DOM با استفاده از Refs Best Practices for DOM Manipulation with Refs

مرور مقادیر مرجع با استفاده از Refs - اشتباهات رایج و بهترین روش‌ها Reference values with Refs Review - Common mistakes and best practices

• مرور مقادیر مرجع با استفاده از Refs - اشتباهات رایج و بهترین روش‌ها Reference values with Refs Review - Common mistakes and best practices

پروژه حرفه‌ای: بازی ورق زدن کارت‌ها - useRef Professional Project: Card Flip Game - useRef

• مقدمه - راهنمای گام‌به‌گام کاربر Introduction - User Walkthrough

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

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

• تنظیم وضعیت بازی در App - تولید و مخلوط کردن آیکون‌ها با الگوریتم Fisher Yates Set Up the Game State in App - Generate and Shuffle Icons Using the Fisher-Yates Algorithm

• ساخت کامپوننت تنظیمات و تعریف فرآیند بازنشانی بازی Build the Settings Component and Define reInitialiseGame in the Process

• دکمه ریست Reset Button

• تابلو امتیازات ScoreBoard

• نمایش شرطی گرافتی هنگام پیروزی در بازی Conditionally Show Graffiti When the Game Is Won

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

• افزودن منطق ورق زدن به کامپوننت کارت Add Flipping Logic to the Card Component

• انتقال منطق ورق زدن به GameBoard با استفاده از Refs Move Flipping Logic to GameBoard Using Refs

• پخش صدای پیروزی هنگام تطبیق تمام جفت کارت‌ها Play a Victory Sound When the Player Matches All Card Pairs

• پخش صدای ورق زدن هنگام چرخش کارت Play Flipping Sound on Card Flip

• بازنشانی GameBoard Reset the GameBoard

افکت‌های React (Effects) React Effects

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

• وابستگی‌های useEffect useEffect Dependencies

• توابع پاکسازی (Cleanup) در useEffect useEffect Cleanup Functions

• گوش دادن به کلید کیبورد Listening for a Keyboard Key

• تغییر اندازه Google Maps Google Maps Resizing

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

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

پروژه حرفه‌ای: اپلیکیشن هواشناسی - useEffect Professional Project: Weather App - useEffect

• مقدمه - راهنمای گام‌به‌گام کاربر Introduction - User Walkthrough

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

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• هدر (Header) Header

• ساخت SearchBar و دریافت شهرهای واقعی از API مربوط به Open Meteo Build SearchBar and Retrieve Real Cities from the Open-Meteo Geocoding API

• ساخت useEffect برای دریافت داده‌های هواشناسی هنگام انتخاب شهر Build a useEffect to Fetch Weather Data When a City Is Selected

• ساخت useEffect برای تبدیل داده‌های API هنگام تغییر داده‌ها Build a useEffect that Transforms the API Data When Data Changes

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

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

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

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

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

پروژه حرفه‌ای: مجموعه داستان - رابط کاربری چندزبانه، React Context و React Professional Project: Story Collection - Multi-language UI, React Context, React

• مقدمه - راهنمای گام‌به‌گام کاربر Introduction - User Walkthrough

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

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• ساخت Language Context و پوشاندن App در Provider Building the Language Context and Wrapping App in the Provider

• مسیریابی و چیدمان با App.jsx Routing & Layout with App.jsx

• ساخت هدر Building the Header

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

• ساخت کامپوننت فوتر Building the Footer Component

• پیکربندی Supabase و تنظیمات محیطی Supabase Configuration & Environment Setup

• صفحه StoryList - دریافت و نمایش داده‌ها StoryList Page – Fetching & Displaying Data

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

• صفحه StoryDetail StoryDetail Page

• صفحه StoryDetail: ساخت بخش محتوای داستان StoryDetail Page: Building the Story Content Section

• ساخت صفحه NotFound Building the NotFound Page

• ساخت یک اسکرول‌بار سفارشی زیبا Build a Beautiful Custom Scrollbar

پروژه حرفه‌ای: برد کانبان با قابلیت کشیدن و رها کردن (مانند Trello) - useEffect Professional Project: Kanban Board with Drag & Drop like Trello - useEffect

• مقدمه - راهنمای گام‌به‌گام کاربر Introduction - User Walkthrough

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

• ساختار پروژه - ایجاد فایل‌ها و پوشه‌ها Project Structure – Creating Files and Folders

• افزودن حالت تاریک با Theme Toggle و useEffect Adding Dark Mode with Theme Toggle and useEffect

• ساخت برد کانبان: مدیریت وضعیت ستون‌ها و رندر کردن وظایف Building the Kanban Board: Managing Column State and Rendering Tasks

• افزودن و حذف ستون‌ها Adding & Deleting Columns

• افزودن وظایف (Tasks) Adding Tasks

• ویرایش عناوین ستون‌ها Editing Column Titles

• ویرایش درجا (Inline) وظایف Editing Tasks Inline

• استفاده از useRef برای فوکوس و اسکرول به انتهای Textarea هنگام شروع ویرایش Use useRef to Focus and Scroll to the End of the Textarea When Editing Starts

• پیاده‌سازی حذف وظیفه در برد کانبان Implementing Task Deletion in the Kanban Board

• پیاده‌سازی قابلیت کشیدن و رها کردن (Drag and Drop) برای وظایف Implementing Drag and Drop for Tasks

• مدیریت حرکت وظیفه در پایان عملیات Drag Handling Task Movement on Drag End

• اعمال استایل‌های اسکرول‌بار سفارشی با استفاده از کلاس‌های کاربردی Apply Custom Scrollbar Styles Using a Utility Class

• ذخیره وضعیت کانبان در localStorage Persisting Kanban State to localStorage