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

دانلود Modern React From The Beginning

نکته: ممکن هست محتوای این صفحه بروز نباشد ولی دانلود دوره آخرین آپدیت می باشد.
نمونه ویدیوها:
توضیحات دوره: ری‌اکت را از پایه تا پیشرفته همراه با محیط‌های مدرن مانند React Router v7، TanStack، MERN و موارد دیگر بیاموزید. تسلط بر مفاهیم بنیادی ری‌اکت (کامپوننت‌ها، State، Hookها، Context API و بیشتر) ساخت پروژه‌های عملی (وب‌سایت پورتفولیو، اپلیکیشن یادداشت، رابط کاربری سبد خرید، اپلیکیشن اشتراک ایده‌ها و موارد دیگر) بررسی React Router v7 - حالت Declarative و Framework Mode به همراه SSR استفاده از TanStack Router و TanStack Query برای مدیریت APIها طراحی وب‌سایت پورتفولیو با ادغام Strapi Headless CMS ساخت اپلیکیشن Full Stack MERN با سیستم احراز هویت Refresh Tokens آموزش جامع هوک‌هایی مانند useState، useEffect، useRef، useContext مناسب برای سطوح مبتدی و متوسط پیش نیازها: آشنایی با مفاهیم پایه زبان جاوا اسکریپت

با این دوره جامع و کاربرپسند، پتانسیل کامل ری‌اکت در سال ۲۰۲۵ را آزاد کنید. این دوره فراتر از مبانی است و چه برای کسانی که تازه با ری‌اکت آشنا شده‌اند و چه کسانی که می‌خواهند درک عمیق‌تری از ویژگی‌های مدرن آن داشته باشند، مهارت‌های عملی لازم برای ساخت اپلیکیشن‌های واقعی را با استفاده از بهترین متدهای روز دنیا فراهم می‌کند.

شما یادگیری را با مفاهیم بنیادی ری‌اکت در قالبی ساختاریافته و قابل فهم شروع خواهید کرد و همزمان با یادگیری، پروژه‌های مختلفی را پیاده‌سازی می‌کنید.


مفاهیمی که در این دوره خواهید آموخت:


  • مبانی: JSX، کامپوننت‌ها، Props، State و Eventها

  • چرخه کامل حیات (Lifecycle) یک کامپوننت ری‌اکت

  • تمامی هوک‌های اصلی ری‌اکت – useState, useEffect, useRef, useContext و بیشتر

  • بهترین متدها برای کامپوننت‌های Functional در ری‌اکت مدرن

  • الگوهای رندرینگ شرطی (Ternary vs &&)

  • سازماندهی فایل‌ها، کامپوننت‌های قابل استفاده مجدد و معماری تمیز (Clean Architecture)

  • مسیریابی پیشرفته با React Router v7 شامل حالت Declarative و Framework Mode با SSR

  • دریافت داده‌ها و کشینگ با TanStack Query

  • دیباگینگ در محیط واقعی با استفاده از React DevTools، Network Tab و Logging

  • احراز هویت امن با Access و Refresh Tokens با استفاده از HTTP-only cookies

  • توسعه Full Stack با استک MERN

  • استقرار (Deployment) با استفاده از Vercel (فرانت‌اند) و Render (بک‌اند)


مستندات پریمیوم:

شما به مستندات جامع دسترسی خواهید داشت که در واقع کل دوره را به فرمت متنی/Markdown ارائه می‌دهد.


پروژه‌های دوره:

این دوره شامل مجموعه‌ای از پروژه‌های کوچک تا متوسط برای تقویت پورتفولیو شماست:


- رابط کاربری امتیازدهی/بازخورد - یک UI ساده برای یادگیری مبانی، Eventها، Props و State

- اپلیکیشن یادداشت - ایجاد و حذف یادداشت‌ها از Local Storage و یادگیری فرم‌ها و State

- تستگاه چرخه حیات - محیطی برای یادگیری Lifecycle کامپوننت و هوک useEffect

- تایمر ساده - یادگیری هوک useRef و حفظ داده‌ها در هنگام ریلود صفحه

- جستجوی گیت‌هاب - استفاده از TanStack Query برای تبادل داده با API گیت‌هاب

- داشبورد کریپتو - استفاده از API CoinGecko برای ساخت داشبورد قیمت‌ها و اطلاعات ارزهای دیجیتال

- IdeaDrop - یک اپلیکیشن Full Stack MERN با TanStack Router در فرانت‌اند

- The Friendly Dev - وب‌سایت پورتفولیو و وبلاگ ساخته شده با React Router v7 و Strapi Headless CMS



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

مقدمه و شروع به کار 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

نمایش نظرات

آموزش جامع و مدرن ری‌اکت از صفر تا صد
جزییات دوره
25.5 hours
227
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
7,317
4.8 از 5
دارد
دارد
دارد
Brad Traversy
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Brad Traversy Brad Traversy

توسعه دهنده وب Full Stack و مدرس در Traversy Media