دوره کامل توسعه‌دهنده React 19 (شامل Next.js 16)

آنچه یاد خواهید گرفت:

• راه‌اندازی پروژه‌های مدرن React 19 با استفاده از Vite، شامل بهترین شیوه‌های ساختار پوشه
• ساخت رابط‌های کاربری با JSX، props، رندر شرطی و لیست‌های پویا
• درک چگونگی کار Virtual DOM، رندرینگ و Reconciliation در React
• تسلط به مدیریت استیت با استفاده از useState ،useReducer، Context API ،Redux Toolkit و Zustand
• مدیریت صحیح رویدادهای کاربر، بروزرسانی‌های state، تعاملات فرم و انتشار رویداد
• ساخت کامپوننت‌های React قابل استفاده مجدد، قابل نگهداری و آماده برای تولید
• استفاده از هوک‌های پیشرفته React: useEffect ،useMemo، useCallback ،useRef و هوک‌های سفارشی
• یادگیری زمان و چگونگی بهینه‌سازی عملکرد React با استفاده از memoization و مجازی‌سازی
• درک چرخه رندر React: تریگر، رندر مجدد، batching، فاز commit
• ساخت ویژگی‌های تعاملی مانند drag و drop، تایمرها، سبدهای خرید، فیلترهای جستجو و انیمیشن‌ها
• مدیریت عملیات CRUD و پایداری داده‌ها با استفاده از localStorage و APIها
• مصرف REST APIها و مدیریت استیت‌های بارگذاری، موفقیت و خطا با React Query
• طراحی معماری مقیاس‌پذیر React مانند توسعه‌دهندگان ارشد، با استفاده از ساختار تمیز فایل و کامپوننت
• ساخت اپلیکیشن‌های فول‌استک با استفاده از Next.js 16 با SSR ،SSG ISR و streaming
• درک تفاوت بین Client Components و Server Components در Next.js
• استفاده از Next.js Server Actions برای mutation، مدیریت فرم و اعتبارسنجی داده‌
• پیاده‌سازی احراز هویت: ایمیل/رمز عبور، ورود با گوگل، ورود با گیت‌هاب، JWT و مسیرهای محافظت‌شده
• ساخت اپلیکیشن‌های بلادرنگ با استفاده از Next.js 16 Server-Sent Events (SSE)
• ادغام اپلیکیشن‌های React با پایگاه‌های داده Supabase، شامل دریافت داده، درج و بروزرسانی‌های بلادرنگ
• ساخت ویژگی‌های مدرن فول‌استک: پیام‌رسانی، صفحه‌بندی، بروزرسانی‌های خوش‌بینانه و نوتیفیکیشن ها
• پیاده‌سازی اعتبارسنجی فرم با استفاده از React Hook Form و Yup/Zod
• ساخت ویژگی‌های UI در سطح حرفه‌ای مانند حالت تاریک، پایداری تم و داشبوردهای مدیریت
• استفاده از React Router 7 برای مسیرهای تودرتو، طرح‌بندی‌ها، پارامترهای پویا و ناوبری برنامه‌نویسی‌شده
• نوشتن کد React تمیز و قابل تست با استفاده از React Testing Library و Jest.
• درک دیباگینگ، breakpoints، پروفایلینگ و ابزارهای توسعه‌دهنده مرورگر برای اپلیکیشن‌های React
• استقرار اپلیکیشن‌های React و Next.js در محیط‌های production
• ساخت یک پورتفولیوی قوی با 9 پروژه واقعی React 19 و Next.js 16
• کسب مهارت‌ها برای درخواست با اعتماد به نفس برای نقش‌های توسعه‌دهنده فرانت‌اند یا فول‌استک React
• پیروی از بهترین شیوه‌های مدرن React با استفاده از React 19، Next.js 16 و جدیدترین ابزارهای اکوسیستم
• یادگیری زمان استفاده از Context، زمان استفاده از Redux Toolkit یا Zustand و زمان نگه داشتن state به صورت محلی
• ساخت اپلیکیشن‌های فقط UI و فول‌استک، شامل احراز هویت و دسترسی به پایگاه داده
• درک رندر سمت سرور (SSR)، تولید استاتیک و revalidation در Next.js
• مدیریت محافظت از مسیرها با استفاده از میان‌افزار Next.js و بررسی‌های احراز هویت سمت سرور
• استفاده از Zod برای اعتبارسنجی امن و type-safe فرم و پاکسازی ورودی
• یادگیری Error Boundaries و Suspense برای اپلیکیشن‌های React امن‌تر و مقاوم‌تر
• ساخت اپلیکیشن‌های چت بلادرنگ با پیام‌رسانی زنده و بروزرسانی‌های UI خوش‌بینانه
• مدیریت تصاویر، فایل‌ها و محتوای پویای کاربر در اپلیکیشن‌های Next.js
• به‌کارگیری الگوهای طراحی کامپوننت پیشرفته: render props، کامپوننت‌های ترکیبی، props کنترل‌شده، الگوی state reducer و موارد دیگر

پیش‌نیازهای دوره

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

توضیحات دوره

بوت‌کمپ کامل React 19 و Next.js 16 – از صفر تا توسعه‌دهنده فول‌استک

تسلط به React 19 ،Next.js 16 ،React Router 7 ،Redux Toolkit ،React Query، Zustand، Supabase، احراز هویت، بهینه‌سازی عملکرد، Drag و drop، حالت تاریک، ویژگی‌های بلادرنگ، تست‌نویسی و موارد دیگر - با ساخت پروژه‌های حرفه‌ای واقعی به صورت گام‌به‌گام

چرا این دوره متفاوت است؟

React به پرتقاضاترین کتابخانه فرانت‌اند در جهان تبدیل شده است. اکنون، با React 19 و Next.js 16، ری‌اکت به سطح جدیدی رسیده است و فرانت‌اند، بک‌اند، ارتباطات بلادرنگ، ادغام پایگاه داده، Server Actions، احراز هویت و streaming را در یک فریم‌ورک فول‌استک قدرتمند ترکیب می‌کند.

اکثر دوره‌ها هنوز با چالش‌هایی روبرو هستند:

• آن‌ها نسخه‌های قدیمی React را آموزش می‌دهند.
• آن‌ها بر تئوری بدون پروژه‌های واقعی تمرکز دارند.
• آن‌ها اپلیکیشن‌های ساده to-do را نشان می‌دهند که به استخدام شما کمکی نمی‌کنند.
• آن‌ها آموزش نمی‌دهند که چیزها واقعاً در پشت صحنه چگونه کار می‌کنند.
• آن‌ها هرگز ویژگی‌های React 19 ،React Router 7 یا ویژگی‌های مدرن فول‌استک Next.js 16 را پوشش نمی‌دهند.

این دوره متفاوت است. شما فقط "React 19 را یاد نخواهید گرفت"، بلکه با استفاده از رویکرد مبتنی بر پروژه، کاملاً بر آن مسلط خواهید شد و هم توسعه فرانت‌اند و هم توسعه فول‌استک React را پوشش خواهید داد. این شامل موارد زیر است:

• ویژگی‌های مدرن Next.js 16
• احراز هویت و پایگاه‌های داده
• کامپوننت‌های سرور و streaming
• Error boundaries
• چت بلادرنگ
• مدیریت امن فرم

شما اپلیکیشن‌های در سطح حرفه‌ای خواهید ساخت، از جمله یک اپلیکیشن املاک، یک وب‌سایت پورتفولیو، یک برد کانبان شبیه Trello، یک اپلیکیشن آزمون رانندگی، یک اپلیکیشن آب‌وهوا، یک بازی کارتی، یک پلتفرم مجموعه داستان فول‌استک و یک اپلیکیشن چت بلادرنگ با احراز هویت. در پایان، شما برای شغل‌های دنیای واقعی، پروژه‌های فریلنسری یا راه‌اندازی استارتاپ SaaS خود آماده خواهید بود.

رویکرد آموزشی:

در طول دوره، شما نه تنها "چگونگی"، بلکه "چرایی" را خواهید آموخت - شما درک خواهید کرد که React واقعاً چگونه کار می‌کند:

• چرخه‌های رندر مجدد، batching و خلوص کامپوننت
• Virtual DOM و reconciliation
• فازهای Commit و بروزرسانی‌های state
• چرا React 19 سریع‌تر و هوشمندتر است؟
• چرا الگوهای خاصی از باگ‌ها جلوگیری می‌کنند و عملکرد را افزایش می‌دهند؟
• چه زمانی از useEffect، useRef، Context یا Reducer استفاده کنیم - و چه زمانی استفاده نکنیم؟
• چگونه ساختار اپلیکیشن‌های مقیاس‌پذیر React را مانند توسعه‌دهندگان ارشد طراحی کنیم؟

آنچه خواهید آموخت (و واقعاً خواهید ساخت):

1. اصول React 19 و JSX - ساخت یک اصول قوی

• راه‌اندازی React 19 با Vite (محیط توسعه مدرن و سریع)
• بررسی عمیق JSX - نوشتن UI با ترکیب جاوااسکریپت و HTML
• ارسال props، مدیریت رویدادها و نوشتن منطق شرطی
• رندر کردن لیست‌ها با prop کلید- اشتباهاتی که باید از آن‌ها اجتناب کرد
• استایل‌دهی به اپلیکیشن‌های React - ماژول‌های CSS ،Tailwind و استایل‌های درون‌خطی
• درک کامپوننت‌های خالص و نوشتن منطق بدون باگ در React
• مصورسازی UI شما به عنوان یک درخت - مدل ذهنی React

پروژه 1: اجاره کمبریج (اپلیکیشن املاک)

یک اپلیکیشن حرفه‌ای مبتنی بر UI برای نمایش لیست املاک با استفاده از کامپوننت‌ها.

• شما خواهید ساخت: هدر، فوتر، کارت‌های ملک، ویژگی‌های ملک، نشان‌ها، آیکون‌ها، معماری تمیز کامپوننت و ساختار فایل مانند اپلیکیشن‌های واقعی تولیدی
• این پروژه آموزش می‌دهد: ترکیب کامپوننت، props، کامپوننت‌های قابل استفاده مجدد و بهترین شیوه‌های JSX

2. افزودن تعامل‌پذیری - پویا کردن واقعی اپلیکیشن‌های React

• مدیریت کلیک‌ها، رویدادهای ورودی و رویدادهای فرم
• درک bubbling رویداد و متوقف کردن انتشار 
• بروزرسانی آرایه‌ها و آبجکت ها در state
• React state batching - چگونه React چندین تغییر state را به طور کارآمد بروزرسانی می‌کند؟
• Virtual DOM → Trigger → Re-render → Commit → UI Update
• مینی پروژه: سبد خرید با منطق افزودن/حذف

پروژه 2: مدیریت لیست کارها (LocalStorage + CRUD)

• افزودن، ویرایش، حذف تسک ها، تغییر استیت تکمیل
• پایداری داده‌ها با localStorage
• ایجاد کامپوننت‌های ماژولار و تفکیک دغدغه‌ها
• این پروژه اعتماد به نفس شما را در کار با عملیات CRUD، پایداری و شکستن کامپوننت‌ها می‌سازد.

3. بررسی عمیق useReducer - مدیریت state پیچیده

• چه زمانی به جای useState از useReducer استفاده کنیم؟
• منطق Reducer، ارسال اکشن‌ها و payloads
• اجتناب از تغییر استیت و طراحی توابع reducer خالص
• بهترین شیوه‌ها، دیباگینگ و الگوها

پروژه 3: اپلیکیشن آزمون رانندگی انگلستان - ساخته شده با useReducer

• ناوبری سوالات، ردیابی پیشرفت
• محاسبه امتیاز، نمایش نتیجه، مدیریت تمیز state
• این پروژه سیستم‌های تست دنیای واقعی را شبیه‌سازی می‌کند و از reducerها برای مدیریت گردش های کاری چندمرحله‌ای استفاده می‌کند.

4. React Context - استیت سراسری بدون Prop Drilling

• چه زمانی از context استفاده کنیم و چه زمانی استفاده نکنیم؟
• ایجاد context providers و consumers
• ترکیب Context + Reducer (منطق شبیه Redux)

پروژه 4: وب‌سایت پورتفولیو با حالت تاریک/روشن (Context)

• پایداری تم، ناوبری مبتنی بر اسکرول
• UI واکنش‌گرا، نظرات مشتریان، فیلتر کردن پروژه، طراحی انیمیشن‌دار
• ایده‌آل برای وب‌سایت پورتفولیوی شخصی شما یا مشتریان فریلنسری

5. درک useRef - کنترل مسئولانه DOM

• چه زمانی از refs استفاده کنیم؟ (و چه زمانی استفاده نکنیم)
• ساخت تایمرها، دسترسی به گره‌های DOM، فوکوس کردن روی ورودی‌ها
• ذخیره مقادیر قابل تغییر بدون رندر مجدد

پروژه 5: بازی تطبیق کارت (useRef)

• الگوریتم بر هم زدن Fisher-Yates
• استفاده از useRef برای مدیریت منطق برگرداندن کارت
• افکت‌های صوتی و انیمیشن‌ها، کاغذ رنگی در هنگام پیروزی
• قابلیت بازنشانی بازی
• این پروژه درک شما را از دستکاری DOM ،refs و منطق بازی در React می‌سازد.

پروژه 6: اپلیکیشن آب‌وهوا - useEffect + APIs

• API آب‌وهوای زنده با استفاده از Open-Meteo
• دریافت، تبدیل و نمایش داده‌
• کامپوننت‌های نمایشی قابل استفاده مجدد
• وابستگی‌های useEffect و پاکسازی 
• یاد بگیرید چگونه فراخوانی‌های API و رندر داده‌ها را به درستی مدیریت کنید.

پروژه 7: اپلیکیشن مجموعه داستان (React Router + Context + Supabase)

• پشتیبانی چند زبانه، ادغام Supabase
• React Router 7 با طرح‌بندی‌های تودرتو
• دریافت داده، نمایش، اسکرول‌بارهای سفارشی، صفحه‌بندی
• شما درک خواهید کرد که چگونه با React و Supabase اپلیکیشن‌های فول‌استک بسازید.

پروژه 8: بورد کانبان (Drag و Drop شبیه Trello)

• Drag و drop با استفاده از HTML5 DnD API
• Zustand برای استیت سراسری
• ستون‌ها و تسک های قابل ویرایش
• حالت تاریک، اسکرول‌بارهای سفارشی، پایداری در localStorage
• این پروژه UX، طراحی state و ساخت محصول واقعی را آموزش می‌دهد.

6. هوک‌های سفارشی، الگوهای پیشرفته و عملکرد

• هوک‌های سفارشی: یاد بگیرید هوک‌های خود را در React 19 ایجاد کنید.
• الگوهای پیشرفته React: ساخت کامپوننت‌های سطح سازمانی با استفاده از الگوی Render Props، کامپوننت‌های ترکیبی، الگوی State Reducer، کنترل‌شده در مقابل کنترل‌نشده، HOCs (کامپوننت‌های مرتبه بالا)، الگوی تابع به عنوان فرزند و توابع ماژول Context
• بهینه‌سازی عملکرد: سریع کردن React با React.memo ،useCallback useMemo، مجازی‌سازی، پروفایلر و Lazy Loading و Suspense

7. مسیریابی، فرم‌ها و مدیریت State

• مسیریابی با React Router 7 (آماده برای React 19): مسیریابی مبتنی بر فایل و طرح‌بندی، پارامترهای پویا و رشته‌های کوئری، مسیرهای احراز هویت، تقسیم کد و بارگذاری تنبل مسیرهای تودرتو و مدیریت خطا.
• فرم‌ها و اعتبارسنجی پیشرفته: ورودی‌های کنترل‌شده و کنترل‌نشده، React Hook Form، اعتبارسنجی طرح‌واره با Yup، کامپوننت‌های ورودی سفارشی و مدیریت خطاها و فیلدهای پویا.
• دریافت داده و مدیریت State (استک مدرن): React Query (TanStack Query) برای کش کردن، دریافت مجدد و mutation؛ Zustand برای استیت سراسری سبک؛ Redux Toolkit؛ Error boundaries؛ و Suspense برای UI ناهمزمان

8. تست اپلیکیشن‌های React (React Testing Library)

• تست‌های واحد، تست‌های یکپارچه‌سازی، تست Snapshot
• تست دریافت داده ناهمزمان
• تست فرم‌ها و تعاملات کاربر
• مدیریت استیت‌های بارگذاری و خطا
• در پایان، تست‌نویسی ساده و طبیعی به نظر خواهد رسید.

9. React فول‌استک با Next.js 16 - آینده توسعه React

یاد بگیرید چگونه React 19 را با استفاده از Next.js 16 به یک فریم‌ورک فول‌استک کامل تبدیل کنید. شما بر موارد زیر مسلط خواهید شد:

• مسیریابی مبتنی بر فایل و طرح‌بندی‌های تودرتو
• SSR در مقابل SSG در مقابل ISR در مقابل Streaming
• Server Actions
• Client vs. Server Components
• مسیرهای API داخلی
• پیام‌رسانی بلادرنگ (SSE ،WebSockets)
• احراز هویت (ایمیل، گوگل، گیت‌هاب) و مسیرهای محافظت‌شده (نقش‌های کاربر/ادمین)
• ادغام پایگاه داده و کوئری گرفتن
• صفحه‌بندی، بروزرسانی‌های UI خوش‌بینانه و امنیت میان‌افزار

پروژه نهایی 9: چت بلادرنگ فول‌استک با Next.js 16 Server-sent Events (SSE)

• اتاق‌های چت بلادرنگ
• احراز هویت + مجوز (JWT + OAuth)، دسترسی مبتنی بر نقش (ادمین/کاربر)
• اعتبارسنجی Zod، پخش زنده پیام
• بروزرسانی‌های حذف/ویرایش خوش‌بینانه
• Error boundaries و Suspense
• این پروژه تجربه فول‌استک در سطح تولید را به شما می‌دهد.

نتایج کلیدی:

در پایان این دوره، شما قادر خواهید بود:

• اپلیکیشن‌های مدرن، زیبا و آماده برای تولید با React و Next.js بسازید.
• React را در سطحی عمیق و حرفه‌ای درک کنید.
• به React 19، هوک‌ها، reducerها، context، عملکرد و الگوها مسلط شوید.
• اپلیکیشن‌های فول‌استک Next.js با احراز هویت و پایگاه داده بسازید.
• معماری‌های مقیاس‌پذیری را طراحی کنید که در شغل‌ها و شرکت‌های واقعی استفاده می‌شوند.
• استیت سراسری را با استفاده از Redux Toolkit ،Zustand و React Query مدیریت کنید.
• با استفاده از React Testing Library با اطمینان تست بنویسید.
• اپلیکیشن‌های بلادرنگ با WebSockets و SSE بسازید.
• یک پورتفولیوی قوی شامل 8+ پروژه واقعی ایجاد کنید تا به کارفرمایان ارائه دهید.
• برای مشاغل توسعه‌دهنده React، فریلنسری یا شروع محصول SaaS خود اقدام کنید.

این دوره برای چه کسانی است؟

• مبتدیان کامل که به دنبال تبدیل شدن به توسعه‌دهندگان React هستند.
• توسعه‌دهندگان React که می‌خواهند به Redux ،Context، عملکرد و تست مسلط شوند.
• توسعه‌دهندگان جاوااسکریپت که آماده حرکت به سمت فرانت‌اند یا فول‌استک هستند.
• توسعه‌دهندگانی که برای مصاحبه‌های شغلی React یا فریلنسری آماده می‌شوند.
• هر کسی که می‌خواهد اپلیکیشن‌های قدرتمند و واقعی با React بسازد.

بدون تجربه؟ مشکلی نیست. این دوره از اصول اولیه شروع می‌شود و به تدریج دانش شما را می‌سازد - همه این‌ها از طریق پروژه‌های سرگرم‌کننده و واقعی.

نکته: این دوره از فناوری Codepion استفاده می‌کند که شامل صداگذاری مبتنی بر هوش مصنوعی و تایپ سریع است و به دانش‌پذیران کمک می‌کند تا مفاهیم را تا 5 برابر سریع‌تر از طریق توضیحات شفاف و نمایش کدنویسی سریع و بلادرنگ یاد بگیرند. برخلاف دوره‌های سنتی، مجبور نخواهید بود منتظر تایپ کند بمانید یا تماشاگر مبارزه مدرسان با کدهای طولانی باشید - یادگیری سریع، روان و بدون اشتباه است.

این دوره برای چه کسانی مناسب است؟

• مبتدیانی که می‌خواهند React را گام‌به‌گام یاد بگیرند.
• توسعه‌دهندگانی که از جاوااسکریپت به React مدرن تغییر مسیر می‌دهند.
• دانشجویانی که برای مصاحبه‌های توسعه‌دهنده فرانت‌اند آماده می‌شوند.
• هر کسی که هدفش ساخت وب اپلیکیشن‌های واقعی با React 19 و Next.js 16 است.