آموزش جامع و مدرن ری‌اکت از صفر تا صد - آخرین آپدیت

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

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

• خوش‌آمدگویی به دوره Welcome To The Course

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

• مخازن کدهای دوره Course Code Repos

• ری‌اکت چیست؟ 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 Function Arrow Functions

• Template Literals Template Literals

• رندرینگ Ternary و Short Circuit Ternary & Short Circuit Rendering

• Destructuring و عملگر Rest Destructuring & Rest Operator

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

• عملگر Optional Chaining و Nullish Coalescing Optional Chaining & Nullish Coalescing Operator

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

• Promiseها و Async Await Promises & Async Await

• کوییز بخش Section Quiz

مبانی ری‌اکت: State، هوک‌ها، Eventها، Props و بیشتر React Fundamentals - State, hooks, events, props & more

• مقدمه بخش Section Intro

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

• آشنایی با JSX Intro To JSX (JavaScript XML)

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

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

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

• کار با لیست‌ها Lists

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

• آشنایی با State Intro To State

• مدیریت State برای امتیازدهی Rating State

• بررسی عمیق‌تر هوک UseState More on UseState Hook

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

• مفهوم Props Props

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

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

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

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

• کوییز بخش Section Quiz

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

• مقدمه بخش Section Intro

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

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

• آبجکت داده‌های فرم Form Data Object

• ارسال فرم و State جهانی Form Submission & Global State

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

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

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

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

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

• مفهوم Prop Drilling Prop Drilling

• کوییز بخش Section Quiz

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

• مقدمه بخش Section Intro

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

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

• رابطه Lifecycle و useEffect Lifecycle & useEffect

• استفاده از LocalStorage به عنوان Side Effect LocalStorage Side Effect

• کوییز بخش Section Quiz

هوک 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

• کوییز بخش Section Quiz

کار با APIها - پروژه داشبورد کریپتو 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) Limit Selector

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

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

• کوییز بخش Section Quiz

ری‌اکت روتر در حالت Declarative - توسعه پروژه داشبورد کریپتو 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

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

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

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

• افزودن Loading Spinner Add Loading Spinner

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

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

• کوییز بخش Section Quiz

بیلد و استقرار (Build & Deploy) Build & Deploy

• مقدمه بخش Section Intro

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

• دستور Build The Build Command

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

• کوییز بخش Section Quiz

سیستم 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

• کوییز بخش Section Quiz

ری‌اکت روتر در حالت 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

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

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

• منوی ریسپانسیو Responsive Menu

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

• آشنایی با تایپ‌ها (TypeScript) Introduction To Types (TypeScript)

• مسیرهای Layout Layout Routes

• کوییز بخش Section Quiz

لودرها، فیلترینگ، صفحه‌بندی و بیشتر Loaders, Filterting, 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) Featured Projects

• کوییز بخش Section Quiz

صفحات داخلی، اکشن‌ها و وبلاگ 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

• کوییز بخش Section Quiz

استفاده از Strapi Headless CMS برای محتوا - توسعه پروژه Friendly Dev Strapi Headless CMS For Content - Extending Friendly Dev Project

• توضیح Headless CMS Headless CMS Explained

• ساختار پوشه‌بندی Full Stack Full Stack Folder Structure

• ساخت پروژه Strapi Create Strapi Project

• راه‌اندازی دیتابیس و پنل ادمین Strapi Database & Strapi Admin Setup

• تعریف Content Type برای پروژه‌ها Project Content Type

• دسترسی به API Accessing The API

• دریافت پروژه‌ها از Strapi Fetch Projects From Strapi

• تعریف تایپ Strapi Project Strapi Project Type

• دریافت تک پروژه از Strapi Fetch Individual Project From Strapi

• پروژه‌های منتخب در صفحه اصلی Home Featured Projects

• تعریف Content Type برای پست‌ها Post Content Type

• دریافت پست‌ها از Strapi Fetch Posts From Strapi

• دریافت جزئیات پست از Strapi Fetch Post Details From Strapi

• نمایش پست‌های Strapi در صفحه اصلی Homepage Posts From Strapi

• کوییز بخش Section Quiz

تصاویر Cloudinary، فرم تماس و استقرار Full Stack Cloudinary Images, Contact Form & Full Stack Deployment

• آپلود تصاویر در Cloudinary Upload Images To Cloudinary

• ساخت فرم تماس با Formspree.io Formspree.io Contact Form

• استقرار Strapi در Render.com Deploy Strapi To Render.com

• استقرار فرانت‌اند در Vercel Frontend Vercel Deployment

• کوییز بخش Section Quiz

کتابخانه TanStack Query - پروژه جستجوی گیت‌هاب TanStack Query - GitHub Finder Project

• مقدمه بخش و پروژه Section Intro & Project Intro

• کتابخانه TanStack Query چیست؟ What Is TanStack Query?

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

• ادغام با API گیت‌هاب GitHub API Integration

• ساخت کوئری‌ها با هوک useQuery Making Queries With useQuery Hook

• بهینه‌سازی و پاک‌سازی کدها Clean Up Code

• نصب React Query Devtools React Query Devtools Install

• پیاده‌سازی قابلیت جستجوهای اخیر Recent Searches Feature

• بحث در مورد مدیریت State Let's Chat About State

• پیش‌دریافت داده‌ها (Prefetching) با TanStack Query Prefetching Data With TanStack Query

• ذخیره کاربران اخیر در Local Storage Save Recent Users To Local Storage

• نمایش پیشنهادات کاربر Show User Suggestions

• ساخت کامپوننت منوی کشویی پیشنهادات Suggestions Dropdown Component

• توکن API و نکات امنیتی مهم API Token & Important Security Information

• بررسی وضعیت فالو بودن کاربر Check If User Is Following

• استفاده از Mutation برای فالو کردن Mutations - Follow User

• استفاده از Mutation برای آن‌فالو کردن Mutations - Unfollow User

• اعلان‌های Toast Toast Notifications

• کوییز بخش Section Quiz

کتابخانه TanStack Router - پروژه IdeaDrop TanStack Router - IdeaDrop Project

• مقدمه بخش و پروژه Section & Project Intro

• آشنایی با TanStack Router Intro To TanStack Router

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

• ساخت مسیرها Creating Routes

• مدیریت Head و Meta Head & Meta

• استفاده از Mock REST API Mock REST API

• دریافت داده‌ها با لودرهای TanStack Router Fetch Data With TanStack Router Loaders

• پراکسی Vite و رفع خطاهای کانفیگ Vite Proxy & Fix Config Errors

• راه‌اندازی TanStack Query و QueryClient TanStack Query & QueryClient Setup

• استفاده از TanStack Query برای دریافت ایده‌ها Use TanStack Query To Fetch Idea

• نصب و استفاده از Axios Install & Use Axios

• دریافت و نمایش ایده‌ها Fetch & Display Ideas

• هدر و لایوت اصلی Header & Main Layout

• صفحه ۴۰۴ Not Found Page

• چالش طراحی صفحه اصلی Homepage Challenge

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

• ساخت فرم ایجاد ایده Create Idea Form

• پیاده‌سازی Mutation برای ایجاد ایده Create Idea Mutation

• حذف ایده‌ها Delete Ideas

• فرم ویرایش ایده Idea Edit Form

• پیاده‌سازی Mutation برای به‌روزرسانی ایده Update Idea Mutation

• کوییز بخش Section Quiz

استک MERN: بک‌اند Express API و دیتابیس MongoDB MERN Stack: Backend Express API & MongoDB Database

• مقدمه بخش Section Intro

• استک MERN چیست؟ What Is The MERN Stack?

• مقایسه Monorepo و Separate Repos Monorepo vs Separate Repos

• راه‌اندازی اولیه سرور Express Basic Express Server Setup

• ساخت Endpoints سرور Creating Server Endpoints

• مدیریت فایل‌های Route Route Files

• ساخت Error Handler سفارشی Custom Error Handler

• راه‌اندازی MongoDB Atlas (دیتابیس ابری) MongoDB Atlas Setup (Cloud Database)

• راه‌اندازی MongoDB Compass و وارد کردن داده‌ها MongoDB Compass Setup & Data Import

• اتصال به دیتابیس با Mongoose Connect To Database Using Mongoose

• ساخت مدل و دریافت ایده‌ها Model & Fetch Ideas

• ایجاد ایده جدید Create New Idea

• حذف و به‌روزرسانی ایده‌ها Delete & Update Ideas

• اتصال فرانت‌اند به بک‌اند Integrating The Frontend & Backend

• محدودیت و مرتب‌سازی در سطح API Limit & Sort At API Level

• کوییز بخش Section Quiz

احراز هویت API با JWT و Refresh Tokens API Authentication With JWT & Refresh Tokens

• توکن‌های JWT چیستند؟ What Are JWTs?

• توضیح استراتژی Access و Refresh Token Access & Refresh Token Strategy Explained

• مدل کاربر و هش کردن رمز عبور User Model & Password Hashing

• ساخت Endpoint ثبت‌نام کاربر User Register Endpoint

• تولید Access و Refresh Tokens Generate Access & Refresh Tokens

• ساخت Endpoint خروج و پاک‌سازی کوکی Logout Endpoint & Clear Cookie

• ساخت Endpoint ورود Login Endpoint

• استفاده از Refresh Token Use Refresh Token

• محافظت از مسیرها (Protecting Routes) Protecting Routes

• سطوح دسترسی و Authorization کاربر User Authorization & Access Control

• کوییز بخش Section Quiz

سیستم احراز هویت Full Stack Full Stack Authentication

• توضیح جریان کامل احراز هویت Full Stack Full Stack Auth Flow Explained

• صفحات و لایوت احراز هویت Auth Pages & Layout

• ساخت Auth Context Auth Context

• ثبت‌نام کاربر Register User

• ورود کاربر Login User

• لینک‌های ناوبری شرطی Conditional Nav Links

• خروج کاربر Logout User

• به‌روزرسانی توکن هنگام ریلود صفحه Refresh Token On Page Refresh

• ارسال توکن در درخواست‌ها با Axios Interceptor Send Token With Request Using Axios Interceptor

• تجدید توکن هنگام انقضا Refresh Token When It Expires

• مخفی کردن کنترل‌ها Hide Controls

• کوییز بخش Section Quiz

استقرار اپلیکیشن MERN MERN App Depoloyment

• آماده‌سازی برای استقرار Prepare For Deployment

• استقرار API بک‌اند Backend API Deployment

• استقرار فرانت‌اند Frontend Deployment

• کوییز بخش Section Quiz