آموزش React از پایه تا ساخت اپلیکیشن واقعی

<div class='lesson-rich-content'> <h2>جلسه 1: React چیست و چرا component؟</h2> <h3>تمرکز جلسه</h3> <p> JSX، component، props و تفاوت UI مبتنی بر component با DOM مستقیم. </p> <h3>چرا این مبحث مهم است؟</h3> <p> React ساخت رابط‌های پیچیده را با componentهای قابل استفاده مجدد ساده می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک صفحه دوره را به Header، CourseCard و CourseList تقسیم کنید. </p> <h3>اشتباه رایج</h3> <p> قرار دادن تمام UI در یک component بزرگ. </p> <h3>چالش جلسه</h3> <p> یک صفحه سه‌بخشی بسازید و مرز مسئولیت componentها را مشخص کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 2: JSX و rendering</h2> <h3>تمرکز جلسه</h3> <p> expression، شرط، list rendering و key. </p> <h3>چرا این مبحث مهم است؟</h3> <p> JSX اتصال خوانایی کد JavaScript و ساختار UI را فراهم می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> لیست دوره‌ها را از یک آرایه در JSX نمایش دهید. </p> <h3>اشتباه رایج</h3> <p> استفاده از index به عنوان key در لیست‌های قابل تغییر. </p> <h3>چالش جلسه</h3> <p> لیست دوره‌ای بسازید که key پایدار از id داده دریافت کند. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 3: Props و طراحی API کامپوننت</h2> <h3>تمرکز جلسه</h3> <p> انتقال داده، default value و children. </p> <h3>چرا این مبحث مهم است؟</h3> <p> API مناسب componentها از coupling زیاد جلوگیری می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> CourseCard را طوری طراحی کنید که عنوان، تصویر، سطح و CTA را از props بگیرد. </p> <h3>اشتباه رایج</h3> <p> قرار دادن داده ثابت داخل component عمومی. </p> <h3>چالش جلسه</h3> <p> یک component کارت بسازید که در سه context مختلف قابل استفاده باشد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 4: State و useState</h2> <h3>تمرکز جلسه</h3> <p> state، setter، event و تفاوت state با variable معمولی. </p> <h3>چرا این مبحث مهم است؟</h3> <p> State تغییرات UI را به شکل قابل پیش‌بینی مدیریت می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> جستجو و باز/بسته شدن پنل سرفصل را با state پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> تغییر مستقیم state یا نگهداری state مشتق‌شده غیرضروری. </p> <h3>چالش جلسه</h3> <p> یک filter UI بسازید که state آن فقط داده ضروری را نگه دارد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 5: useEffect و چرخه دریافت داده</h2> <h3>تمرکز جلسه</h3> <p> effect، dependency و cleanup. </p> <h3>چرا این مبحث مهم است؟</h3> <p> دریافت داده و اتصال به سرویس‌ها نیاز به مدیریت lifecycle دارد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> دوره‌ها را هنگام mount از API دریافت کنید و loading را نمایش دهید. </p> <h3>اشتباه رایج</h3> <p> dependency array اشتباه و effectهای تکرارشونده. </p> <h3>چالش جلسه</h3> <p> یک fetch effect با cleanup و حالت خطا طراحی کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 6: Fetch API در React</h2> <h3>تمرکز جلسه</h3> <p> loading، success، error و credentials در درخواست‌ها. </p> <h3>چرا این مبحث مهم است؟</h3> <p> frontend واقعی باید رفتار API را مدیریت کند نه فقط پاسخ موفق را. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> صفحه دوره را به endpoint واقعی متصل کنید. </p> <h3>اشتباه رایج</h3> <p> فرض کردن پاسخ همیشه JSON موفق است. </p> <h3>چالش جلسه</h3> <p> سه حالت loading، empty و error را در UI جداگانه نمایش دهید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 7: Form و Controlled Components</h2> <h3>تمرکز جلسه</h3> <p> value، onChange، submit و validation. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Controlled form امکان اعتبارسنجی و کنترل دقیق state را می‌دهد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> فرم ثبت‌نام دوره را controlled پیاده کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده از ref برای تمام ورودی‌ها بدون نیاز. </p> <h3>چالش جلسه</h3> <p> فرم چهار فیلدی با validation و پیام خطا بسازید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 8: React Router و مسیرهای واقعی</h2> <h3>تمرکز جلسه</h3> <p> Routes، Route، Link، Navigate و پارامتر slug. </p> <h3>چرا این مبحث مهم است؟</h3> <p> در یک سایت آموزشی navigation بخشی از معماری اصلی است. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> صفحه لیست و جزئیات دوره را با slug متصل کنید. </p> <h3>اشتباه رایج</h3> <p> ساخت لینک‌های دستی و ناسازگار با router. </p> <h3>چالش جلسه</h3> <p> مسیر /courses و /courses/:slug را کامل پیاده کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 9: Context و state سراسری</h2> <h3>تمرکز جلسه</h3> <p> Context، Provider و مدیریت داده مشترک. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Context برای داده‌های واقعاً مشترک از prop drilling جلوگیری می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> تم سایت یا وضعیت کاربر را با Context مدیریت کنید. </p> <h3>اشتباه رایج</h3> <p> قرار دادن همه stateها در Context. </p> <h3>چالش جلسه</h3> <p> تشخیص دهید کدام state باید local و کدام shared باشد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 10: Custom Hook و reusable logic</h2> <h3>تمرکز جلسه</h3> <p> ساخت hook اختصاصی برای fetch یا form. </p> <h3>چرا این مبحث مهم است؟</h3> <p> Custom hook منطق تکراری را از UI جدا می‌کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک useCourses برای دریافت و نگهداری دوره‌ها بسازید. </p> <h3>اشتباه رایج</h3> <p> ساخت hook فقط برای پیچیده کردن پروژه. </p> <h3>چالش جلسه</h3> <p> منطق fetch دوره‌ها را از component به hook منتقل کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 11: احراز هویت و route guard</h2> <h3>تمرکز جلسه</h3> <p> cookie-based auth، /api/auth/me، credentials و مسیر محافظت‌شده. </p> <h3>چرا این مبحث مهم است؟</h3> <p> امنیت frontend باید با backend هماهنگ باشد و صرفاً به state محلی تکیه نکند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک صفحه پروفایل را فقط برای کاربر واردشده نمایش دهید. </p> <h3>اشتباه رایج</h3> <p> نگهداری صرف وضعیت admin در localStorage به عنوان منبع حقیقت. </p> <h3>چالش جلسه</h3> <p> Auth gate طراحی کنید که با API وضعیت واقعی session را بررسی کند. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 12: مدیریت خطا و UX حرفه‌ای</h2> <h3>تمرکز جلسه</h3> <p> error boundary، fallback، retry و empty state. </p> <h3>چرا این مبحث مهم است؟</h3> <p> خطای شبکه نباید کاربر را به صفحه شکسته یا بن‌بست هدایت کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> برای صفحه دوره loading، خطا و retry طراحی کنید. </p> <h3>اشتباه رایج</h3> <p> نمایش پیام فنی خام backend به کاربر. </p> <h3>چالش جلسه</h3> <p> یک صفحه resilient بسازید که با خطای API امکان تلاش مجدد داشته باشد. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 13: Performance و React rendering</h2> <h3>تمرکز جلسه</h3> <p> memoization، lazy loading، key و جلوگیری از render اضافه. </p> <h3>چرا این مبحث مهم است؟</h3> <p> با رشد داده، renderهای اضافه می‌توانند تجربه را کند کنند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> لیست بزرگ دوره‌ها را با lazy route و rendering کنترل‌شده بهینه کنید. </p> <h3>اشتباه رایج</h3> <p> استفاده افراطی از useMemo و useCallback بدون اندازه‌گیری. </p> <h3>چالش جلسه</h3> <p> یک صفحه را با React DevTools بررسی و یک bottleneck واقعی را اصلاح کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 14: ساختار پروژه React حرفه‌ای</h2> <h3>تمرکز جلسه</h3> <p> feature-based folders، service، hooks، components و styles. </p> <h3>چرا این مبحث مهم است؟</h3> <p> ساختار پوشه باید پیدا کردن و تغییر featureها را آسان کند. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> ساختار یک پروژه آموزشی React را بازطراحی کنید. </p> <h3>اشتباه رایج</h3> <p> ساختاردهی بر اساس نوع فایل بدون توجه به feature. </p> <h3>چالش جلسه</h3> <p> ساختار پروژه را برای course، auth و admin تعریف کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>

<div class='lesson-rich-content'> <h2>جلسه 15: پروژه نهایی React؛ پلتفرم دوره</h2> <h3>تمرکز جلسه</h3> <p> ترکیب Router، API، auth، component، form، search و state. </p> <h3>چرا این مبحث مهم است؟</h3> <p> پروژه نهایی مهارت اتصال اجزای React به backend واقعی را نشان می‌دهد. </p> <h3>در عمل چه کار می‌کنیم؟</h3> <p> یک mini learning platform با لیست دوره، جزئیات، ثبت‌نام و پنل کاربر بسازید. </p> <h3>اشتباه رایج</h3> <p> ساخت UI زیبا بدون مدیریت loading، error و auth. </p> <h3>چالش جلسه</h3> <p> نسخه نهایی را با API واقعی، route guard و UX کامل اجرا و تست کنید. </p> <h3>ارتباط با پروژه نهایی</h3> <p> این مبحث در ادامه دوره در پروژه نهایی استفاده می‌شود. هدف این است که مفهوم جلسه فقط به یک مثال آموزشی محدود نماند و بتوانید آن را در یک مسئله واقعی به کار بگیرید. </p> </div>