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

کار با APIها – پروژه Crypto Dash Working With APIs – Crypto Dash Project

• معرفی بخش و پروژه Section & Project Intro

• اطلاعات API و راه‌اندازی پروژه API Info & Project Setup

• ارسال درخواست‌های HTTP Making HTTP Requests

• استفاده از Async/Await در useEffect Async/Await In useEffect

• نمایش داده‌های ارزها Display Coin Data

• متغیرهای محیطی (Environment Variables) Environment Variables

• انتخابگر محدودیت نمایش Limit Selector

• فیلتر کردن ارزها Filter Coins

• انتخابگر ترتیب مرتب‌سازی Sort Order Selector

مسیریابی React Router در حالت Declarative – توسعه پروژه Crypto Dash React Router in Declarative Mode – Extend Crypto Dash Project

• مقدمه‌ای بر مسیریابی (Routing) Intro To Routing

• سینتکس React Router React Router Syntax

• مسیر صفحه اصلی Homepage Route

• صفحه درباره ما و کامپوننت Link About Page & Link Component

• صفحه یافت نشد (404) Not Found Page

• دریافت جزئیات ارز Fetch Coin Details

• نمایش جزئیات ارز Display Coin Details

• افزودن اسپینر Loading Add Loading Spinner

• دریافت و قالب‌بندی داده‌های نمودار Get & Format Chart Data

• نمایش نمودار Show Chart

ساخت و استقرار (Build & Deploy) Build & Deploy

• معرفی بخش Section Intro

• درک فرآیند Build Understanding The Build Process

• دستور Build The Build Command

• استقرار در Vercel Deploy To Vercel

مدیریت وضعیت با Context API – رابط کاربری سبد خرید Context API – Shopping Cart UI

• معرفی بخش Section Intro

• Context API چیست؟ What Is the Context API?

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

• راه‌اندازی JSON Server JSON Server Setup

• نمایش داده‌های محصول Display Product Data

• تنظیم Proxy Setup Proxy

• ایجاد Product Context Product Context

• ایجاد Cart Context Cart Context

• دکمه افزودن به سبد خرید Add To Cart Button

• هدر و شمارنده سبد خرید Header & Cart Count

• منوی کشویی آیتم‌های سبد خرید Cart Items Dropdown

• حذف آیتم‌ها و خالی کردن سبد خرید Remove Items & Clear Cart

• ذخیره آیتم‌های سبد خرید در Local Storage Store Cart Items To Local Storage

مسیریابی React Router در حالت Framework – پروژه Friendly Dev React Router Framework Mode – Friendly Dev Project

• معرفی بخش و پروژه Section & Project Intro

• راه‌اندازی پروژه و ساختار فایل‌ها Project Setup & File Structure

• ایجاد مسیرها (Routes) Creating Routes

• رفع خطای کنسول Devtools Devtools Console Error Fix

• مفهوم SSR و Client Hydration SSR & Client Hydration

• لینک‌ها و ناوبری Links & Navigation

• استایل‌دهی به لینک فعال Active Link Styling

• منوی واکنش‌گرا Responsive Menu

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

• مقدمه‌ای بر تایپ‌ها (TypeScript) Introduction To Types (TypeScript)

• مسیرهای Layout Layout Routes

لودرها، فیلترینگ، صفحه‌بندی و موارد بیشتر Loaders, Filtering, Pagination & More

• بررسی کلی لودرها (Loaders) Loaders Overview

• دریافت پروژه‌ها با استفاده از لودر Fetch Projects With Loader

• ایجاد تایپ Project Create Project Type

• نمایش داده‌های لودر Display Loader Data

• مسیر پویا و Client Loader Dynamic Route & Client Loader

• خروجی صفحه جزئیات Details Page Output

• صفحه‌بندی پروژه‌ها Project Pagination

• کامپوننت صفحه‌بندی Pagination Component

• فیلتر دسته‌بندی پروژه‌ها Project Category Filter

• انیمیشن فیلتر پروژه‌ها Animate Project Filter

• پروژه‌های منتخب Featured Projects

صفحات داخلی، اکشن‌ها و وبلاگ Markdown Inner Pages, Actions, Markdown Blog

• صفحه درباره ما About Page

• ساختار JSX صفحه تماس با ما Contact Page JSX

• مثالی از React Router Actions React Router Actions Example

• اعتبارسنجی فرم با Actions Form Validation With Actions

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

• Markdown چیست؟ What Is Markdown?

• دریافت متادیتای پست Fetch Post Meta

• نمایش متادیتای پست Display Post Meta

• پست تک و Markdown Single Post & Markdown

• نمایش صفحه جزئیات Display Details Page

• مرتب‌سازی پست‌ها بر اساس تاریخ Sort Posts By Date

• استفاده مجدد از کامپوننت صفحه‌بندی Re-Use Pagination Component

• فیلتر پست‌های وبلاگ Blog Post Filter

• آخرین پست‌های وبلاگ Latest Blog Posts