توسعه کامل فرانت‌اند وب با React JS (React 19)

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

• ساخت اپلیکیشن های فرانت‌اند مدرن و واکنش‌گرا با استفاده از React 19 و بهترین شیوه‌های صنعتی
• درک مبانی React شامل کامپوننت ها، JSX، پراپ‌ها، استیت و مدل رندرینگ در React.
• کار با اطمینان با هوک‌های React مانند useState ،useEffect ،useContext و هوک‌های سفارشی 
• مدیریت مؤثر استیت اپلیکیشن و جریان داده در اپلیکیشن های واقعی React
• پیاده‌سازی مسیریابی و ناوبری برای ایجاد اپلیکیشن های تک‌صفحه‌ای (SPA) چندصفحه‌ای.
• مدیریت یکپارچه‌سازی API، واکشی داده ناهمگام و مدیریت خطا در اپلیکیشن های React
• به‌کارگیری الگوهای مدرن رابط کاربری (UI)، کامپوننت های قابل استفاده مجدد و ساختار پروژه تمیز برای آماده‌سازی اپلیکیشن های React جهت ارائه در محیط عملیاتی

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

• دانش اولیه از +JavaScript ES6

توضیحات دوره

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

بخش 1: معرفی دوره و نقشه راه یادگیری

بخش 2: اصول React JS – مفاهیم اصلی که باید بدانید

• معرفی React JS و راه‌اندازی پروژه (راهنمای مبتدیان)
• JSX در React: مبانی رندرینگ عناصر
• عبارات JSX در React: رندرینگ متغیرها، آرایه‌ها و آبحکت ها
• رندرینگ لیست‌ها در React با استفاده از متد ()map
• رندرینگ شرطی در اپلیکیشن های React
• توضیح کامپوننت های تابعی و پراپ‌ها در React
• استایل دهی اپلیکیشن های React با CSS، ماژول‌های CSS و Bootstrap
• مدیریت رویدادها در React: توضیح تعاملات کاربر
• انتشار رویداد و کامپوننت های کنترل‌شده در فرم‌های React
• کامپوزیشن کامپوننت ها در React برای رابط کاربری قابل استفاده مجدد

بخش 3: فرم‌ها و مدیریت ورودی کاربر در React (راهنمای کامل)

• فرم‌ها در React در مقایسه با فرم‌های سنتی HTML
• کامپوننت های کنترل‌شده در React (مدیریت ورودی‌ها با استیت)
• کامپوننت های کنترل‌نشده در React (با استفاده از useRef)
• مدیریت ورودی کاربر و ارسال فرم در React
• کار با ورودی‌های عددی و فیلدهای Textarea
• مدیریت چک‌باکس‌ها و دکمه‌های رادیویی در React
• منوهای کشویی انتخابی و لیست گزینه‌ها در React
• مدیریت ورودی بارگذاری فایل در React
• مدیریت چندین ورودی فرم با یک آبجکت استیت واحد
• اعتبارسنجی اولیه فرم و نمایش پیام‌های خطا

بخش 4: ناوبری سمت کاربر با React Router DOM

• توضیح React Router DOM - چیست، چرا و چگونه؟
• مبانی React Router: یادگیری BrowserRouter، Routes و Route
• نوار ناوبری در React با React Router: Link و NavLink
• مسیرهای تو در تو و مسیرهای ایندکس در React Router (پیشرفته)
• مسیرهای پویا در React با استفاده از هوک useParams
• پارامترهای جستجو در React Router با useSearchParams
• بارگذاری تنبل مسیرها و تقسیم کد در React
• صفحه 404 در React Router و ارسال پراپ‌ها به مسیرها
• ناوبری برنامه‌ای در React Router با استفاده از useNavigate

بخش 5: تسلط بع هوک‌های React برای استیت و عملکرد

• مقدمه‌ای بر هوک‌های React و مدیریت استیت با useState
• مدیریت افکت های جانبی در React با استفاده از هوک useEffect
• مدیریت استیت سراسری با هوک useContext
• مدیریت پیشرفته استیت با استفاده از هوک useReducer
• بهینه‌سازی عملکرد با هوک useMemo
• جلوگیری از رندرهای مجدد غیرضروری با useCallback و React.memo
• دسترسی به عناصر DOM و مقادیر تغییرپذیر با هوک useRef
• جایگزینی Redux با useReducer و useContext (رویکرد عملی)

بخش 6: یکپارچه‌سازی API در دنیای واقعی و پروژه‌های CRUD در React

• مقدمه‌ای بر APIها و مفاهیم RESTful API
• درک نقش JSON در RESTful APIها
• واکشی داده از یک API جعلی با استفاده از Fetch
• واکشی داده از یک سرور JSON محلی
• ساخت یک رابط CRUD کامل در React
• ایجاد داده با درخواست‌های POST با استفاده از Fetch API
• بروزرسانی داده با درخواست‌های PUT با استفاده از Fetch API
• حذف داده با درخواست‌های DELETE با استفاده از Fetch API
• استفاده از Fetch API با سینتکس Async و Await
• جایگزینی Fetch با Axios برای فراخوانی‌های API
• یکپارچه‌سازی React با APIهای بک‌اند (مانند Spring Boot)
• نمایش داده‌ API در قالب طرح بندی کارتی 

بخش 7: موارد جدید در React 19 – توضیح آخرین ویژگی‌ها

• نصب و ارتقاء پروژه‌ها به React 19
• درک اکشن‌های فرم در React 19 و چگونگی استفاده از آن‌ها
• مدیریت استیت فرم با هوک ()useFormState
• ردیابی وضعیت ارسال فرم با ()useFormStatus
• مدیریت اکشن‌های سرور با هوک ()useActionState
• استفاده از هوک ()use برای واکشی داده (مثال Fetch)
• استفاده از هوک ()use با Context برای اشتراک‌گذاری استیت
• بروزرسانی‌های خوش‌بینانه با استفاده از هوک ()useOptimistic
• مدیریت دانلود فایل با هوک ()useTransition
• ساخت یک نوار پیشرفت دانلود با استفاده از ()useTransition و ()useOptimistic
• مدیریت فراداده (Metadata) در React 19 (عنوان، برچسب‌های Meta و CSS)

بخش 8: ماژول جایزه: سوالات و پاسخ‌های مصاحبه با تمرکز بر استخدام

• سوالات مصاحبه React JS همراه با پاسخ
• مثال‌های کد جامع React JS

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

• مبتدیانی که می‌خواهند React JS را از ابتدا با یک نقشه راه شفاف و گام‌به‌گام یاد بگیرند.
• دانشجویان و افراد تازه‌کار که برای نقش‌های توسعه‌دهنده فرانت‌اند و مصاحبه‌های مبتنی بر React آماده می‌شوند.
• توسعه‌دهندگان جاوااسکریپت که به دنبال انتقال به توسعه مدرن React هستند.
• توسعه‌دهندگان فرانت‌اند که به دنبال یک اوصل قوی در کامپوننت ها، هوک‌ها و مسیریابی React هستند.
• توسعه‌دهندگانی که تجربه عملی با فرم‌ها، اعتبارسنجی و مدیریت ورودی کاربر در دنیای واقعی می‌خواهند.
• یادگیرندگانی که علاقه‌مند به ساخت اپلیکیشن های کاربردی دنیای واقعی با استفاده از REST APIها و عملیات CRUD هستند.
• توسعه‌دهندگانی که به آخرین ویژگی‌های React 19 ارتقاء می‌یابند شامل Server Actions، هوک‌های جدید و بهینه‌سازی‌های عملکرد.
• علاقه‌مندان به فول‌استک که می‌خواهند React را با APIهای بک‌اند مانند Spring Boot یکپارچه کنند.
• خودآموزان که به دنبال یک دوره React عملی و پروژه‌محور به جای آموزش‌های صرفاً تئوری هستند.

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

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