فلش‌کارت‌های آموزشی به‌روزرسانی حالت (State) در React با استفاده از UseState: پیاده‌سازی بازی دوز

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره به‌روزرسانی حالت (State) در React با استفاده از UseState: پیاده‌سازی بازی دوز

موضوع کلی: توسعه وب با استفاده از چارچوب‌های مدرن

موضوع میانی: برنامه‌نویسی با کتابخانهٔ React

📋 سرفصل‌های دوره

• 1. مقدمه‌ای بر توسعهٔ وب مدرن
• 2. آشنایی با کتابخانهٔ React
• 3. مفاهیم اصلی React: کامپوننت‌ها
• 4. JSX: نحو و کاربرد
• 5. Props: انتقال داده به کامپوننت‌ها
• 6. State: مدیریت وضعیت داخلی کامپوننت
• 7. useState: اولین گام در مدیریت State
• 8. کاربرد useState در کامپوننت‌های تابعی
• 9. مقایسه useState با کلاس کامپوننت‌ها
• 10. چرا useState؟ سادگی و خوانایی
• 11. بازی دوز: طراحی اولیه
• 12. ساختار فایل‌ها و پوشه‌ها در پروژهٔ دوز
• 13. کامپوننت Board: نمایش صفحهٔ بازی
• 14. کامپوننت Square: نمایش یک خانهٔ بازی
• 15. مدیریت State در کامپوننت Square
• 16. ارسال State از Board به Square
• 17. رویداد کلیک در Square
• 18. بروزرسانی State هنگام کلیک
• 19. تغییر State در والد (Board)
• 20. نحوهٔ بروزرسانی State در React
• 21. اصول بروزرسانی State: عدم تغییر مستقیم
• 22. استفاده از تابع setter در useState
• 23. مثال عملی: بروزرسانی یک عدد
• 24. مثال عملی: بروزرسانی یک رشته
• 25. مثال عملی: بروزرسانی یک شیء (Object)
• 26. بروزرسانی آرایه‌ها (Arrays) در State
• 27. چالش‌های بروزرسانی آرایه‌ها
• 28. روش نادرست: تغییر مستقیم آرایه
• 29. روش صحیح: ایجاد یک کپی از آرایه
• 30. متد `slice()` برای کپی آرایه
• 31. متد `concat()` برای اضافه کردن به آرایه
• 32. متد `map()` برای تبدیل آرایه
• 33. متد `filter()` برای حذف از آرایه
• 34. استفاده از Spread Operator (...) برای کپی
• 35. Spread Operator برای اضافه کردن عنصر
• 36. Spread Operator برای به‌روزرسانی عنصر
• 37. Spread Operator برای حذف عنصر
• 38. پیاده‌سازی بروزرسانی State در بازی دوز
• 39. مدیریت State برد بازی
• 40. تشخیص برد در بازی دوز
• 41. نمایش پیام برد
• 42. بازنشانی بازی
• 43. مدیریت وضعیت نوبت بازیکن
• 44. نمایش نوبت فعلی
• 45. تغییر نوبت پس از هر حرکت
• 46. بررسی وضعیت خانه‌های خالی
• 47. پیاده‌سازی منطق بازی دوز
• 48. توابع کمکی برای منطق بازی
• 49. تابع محاسبهٔ برنده
• 50. تابع بررسی وضعیت بازی
• 51. بررسی تساوی (Draw)
• 52. نمایش پیام تساوی
• 53. مدیریت State تاریخچهٔ حرکات
• 54. ذخیرهٔ State هر حرکت
• 55. نمایش تاریخچهٔ بازی
• 56. قابلیت بازگشت به حرکات قبلی (Time Travel)
• 57. پیاده‌سازی دکمهٔ بازگشت
• 58. مدیریت State حرکت فعلی در تاریخچه
• 59. نشان دادن حرکت فعلی در تاریخچه
• 60. استفاده از `key` در لیست‌ها
• 61. اهمیت `key` در React
• 62. مدیریت State پیشرفته‌تر
• 63. کاربرد `useReducer` برای State پیچیده
• 64. مقدمه‌ای بر `useReducer`
• 65. مقایسه `useReducer` با `useState`
• 66. مثال ساده با `useReducer`
• 67. پیاده‌سازی `useReducer` برای بازی دوز (اختیاری)
• 68. مدیریت فرم‌ها در React
• 69. مفهوم فرم‌های کنترل‌شده (Controlled Components)
• 70. مدیریت State ورودی‌های فرم
• 71. اعتبارسنجی ورودی‌های فرم
• 72. مفاهیم پیشرفته‌تر React
• 73. Context API برای مدیریت State سراسری
• 74. مقدمه‌ای بر Context API
• 75. استفاده از `createContext`
• 76. استفاده از `useContext`
• 77. مدیریت State با Redux (اختیاری)
• 78. مقدمه‌ای بر Redux
• 79. Action, Reducer, Store
• 80. اتصال React به Redux
• 81. کاربرد hooks در React
• 82. `useEffect`: مدیریت side effects
• 83. `useRef`: ارجاع به عناصر DOM
• 84. `useCallback`: بهینه‌سازی توابع
• 85. `useMemo`: بهینه‌سازی محاسبات
• 86. اصول طراحی کامپوننت در React
• 87. کامپوننت‌های خالص (Pure Components)
• 88. بازدهی و بهینه‌سازی در React
• 89. ابزارهای توسعهٔ React
• 90. React Developer Tools
• 91. مستندسازی کد
• 92. اصول تست‌نویسی در React
• 93. تست واحد (Unit Testing)
• 94. تست یکپارچه‌سازی (Integration Testing)
• 95. مقدمه‌ای بر Jest و React Testing Library
• 96. نوشتن تست برای کامپوننت Square
• 97. نوشتن تست برای کامپوننت Board
• 98. نوشتن تست برای منطق بازی
• 99. مباحث تکمیلی و پروژه‌های عملی
• 100. معماری برنامه‌های React