آموزش کاربردی React – پروژه‌ها، مسیریابی و مدیریت وضعیت - آخرین آپدیت

پروژه: TaskMate Project: TaskMate

• دموی TaskMate TaskMate Demo

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

• کامپوننت‌ها / 045 Components / 045

• وضعیت: tasklist و setTasklist / 046 State: tasklist and setTasklist / 046

• توابع: ویرایش و حذف / 047 Function: Edit and Delete / 047

• هشدار: مقدار تعریف نشده (Undefined) / 048 Warning: Undefined Value / 048

• دکمه به‌روزرسانی / 049 Update Button / 049

• حافظه محلی: ذخیره تمام تسک‌ها / 050 Local Storage: Store All Tasks / 050

• تم: تغییر پس‌زمینه / 051 Theme: Change Background / 051

• استقرار پروژه Project Deployment

مسیریابی در ری‌اکت (React Router) React Router

• آشنایی با React Router / 053 React Router Introduction / 053

• راه‌اندازی React Router / 054 React Router Setup / 054

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

• ناوبری (Navigation) / 056 Navigation / 056

• پارامترهای مسیر / 057 Route Parameters / 057

• مسیر یافت نشد / 058 No Route Found / 058

• مسیرهای تو در تو (Nested Routes) / 059 Nested Routes / 059

• تجدید ساختار پروژه / 060 Project Restructuring / 060

دوره سریع Tailwind CSS Tailwind CSS Crash Course

• مقدمه و دموی Tailwind Introduction and Demo

• ویژگی‌های مشترک Common Properties

• حالت‌های Hover، Focus و سایر وضعیت‌ها Hover, Focus, and Other States

• طراحی ریسپانسیو Responsive Design

• حالت تاریک (Dark Mode) Dark Mode

• پیکربندی سفارشی / 206 Custom Configuration / 206

• دموی پروژه / 207 Project Demo / 207

• بخش هدر و Hero / 208 Header and Hero Section/ 208

• فوتر / 209 Footer / 209

• صفحه ریسپانسیو و ابزارهای کامپوننت / 210 Responsive Screen and Component Tools / 210

پروژه API فیلم: Cinemate Movie API Project: Cinemate

• دموی Cinemate Cinemate Demo

• راه‌اندازی پروژه Project Setup

• آشنایی با Tailwind / 063 Tailwind Introduction / 063

• مستندات TMDB API / 064 TMDB API: Documentation / 064

• طراحی UI (Tailwind و Flowbite) / 065 UI Design (Tailwind and Flowbite) / 065

• ساختار ناوبری Navigation Structure

• یکپارچه‌سازی حالت تاریک / 067 Dark Mode Integration / 067

• ساختار لیست فیلم‌ها / 068 Movie List Structure / 068

• دریافت API: لیست فیلم‌ها / 069 API Fetch: Movie List / 069

• هوک سفارشی: useFetch / 070 Custom Hook: useFetch / 070

• دریافت API: جستجوی فیلم / 071 API Fetch: Movie Search / 071

• سفارشی‌سازی Tailwind CSS / 072 Tailwind CSS Customization / 072

• صفحه یافت نشد / 073 Page Not Found / 073

• اطلاعات تک‌تک فیلم‌ها / 074 Individual Movie Information / 074

• بازیابی اسکرول: بازگشت به بالا / 075 Scroll Restoration: Scroll to Top / 075

• عنوان داینامیک صفحه / 076 Dynamic Page Title / 076

• به‌روزرسانی استایل / 077 Style Update / 077

• استقرار پروژه / 078 Project Deployment / 078

• شاخه توسعه در Git و GitHub Development Branch on Git and GitHub

• رفع خطای Netlify / 079 Solved: Netlify Error / 079

تمرین: سبد خرید Assignment: Shopping Cart

• صورت مسئله تمرین و دمو / 080 Assignment Statement and Demo / 080

• راه حل: راه‌اندازی پروژه Solution: Project Setup

• راه حل: کامپوننت‌ها / 082 Solution: Components / 082

• راه حل: صفحات / 083 Solution: Pages / 083

• استقرار تمرین Assignment Deployment

پروژه Context و Reducers: سبد خرید Context and Reducers Project: Shopping Cart

• مدیریت وضعیت سراسری (Global State) Global State Management

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

• کانتکست (Context) / 087 Context / 087

• ردیوسر (Reducer) / 088 Reducer / 088

• متدها / 089 Methods / 089

• استقرار پروژه / 090 Project Deployment / 090

پروژه Redux: سبد خرید Redux Project: Shopping Cart

• آشنایی با Redux Redux Introduction

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

• اسلایس و اکشن (Slice & Action) / 092 Slice and Action / 092

• ردیوسرها: افزودن و حذف / 093 Reducers: Add and Remove / 093

• وضعیت استور Redux / 094 Redux Store State / 094

• استقرار پروژه / 095 Project Deployment / 095