اپلیکیشن اندرویدی فلش‌کارت آموزشی React Native: Advanced Layout Techniques with Flexbox and Grid

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

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

عنوان دوره: دوره React Native: Advanced Layout Techniques with Flexbox and Grid

موضوع کلی: برنامه نویسی

موضوع میانی: ری‌اکت نیتیو (React Native)

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

• 1. مقدمه ای بر React Native و اکوسیستم آن
• 2. Flexbox: مبانی و مفاهیم اصلی
• 3. درک محور اصلی و محور فرعی (Main Axis & Cross Axis)
• 4. مقادیر `flex-direction`: row, column, row-reverse, column-reverse
• 5. ویژگی `justify-content`: تنظیم محتوا در محور اصلی
• 6. ویژگی `align-items`: تنظیم محتوا در محور فرعی
• 7. ویژگی `align-self`: تنظیم هر آیتم به صورت جداگانه
• 8. ویژگی `flex-wrap`: مدیریت آیتم‌های اضافی در یک ردیف یا ستون
• 9. ویژگی `flex`: رشد، کوچک شدن و اندازه پایه آیتم
• 10. موقعیت دهی نسبی (Relative Positioning) در React Native
• 11. موقعیت دهی مطلق (Absolute Positioning) در React Native
• 12. استفاده از `zIndex` برای لایه‌بندی عناصر
• 13. ایجاد طرح‌بندی‌های پیچیده با Flexbox
• 14. طراحی یک نوار بالایی (Header) با Flexbox
• 15. طراحی یک نوار پایینی (Footer) با Flexbox
• 16. ساخت یک لیست عمودی (Vertical List) با Flexbox
• 17. ساخت یک لیست افقی (Horizontal List) با Flexbox
• 18. ریسپانسیو کردن طرح‌بندی با Flexbox (Responsive Layout)
• 19. مقدمه ای بر Grid Layout در React Native
• 20. تفاوت‌های کلیدی بین Flexbox و Grid
• 21. تعریف ردیف‌ها و ستون‌ها در Grid
• 22. ویژگی `grid-template-rows`: تعریف ارتفاع ردیف‌ها
• 23. ویژگی `grid-template-columns`: تعریف عرض ستون‌ها
• 24. واحد اندازه گیری `fr` (Fractional Unit) در Grid
• 25. ویژگی `grid-gap` برای ایجاد فاصله بین ردیف‌ها و ستون‌ها
• 26. ویژگی‌های `grid-row-start`, `grid-row-end`, `grid-column-start`, `grid-column-end`: تعیین محل قرارگیری آیتم‌ها
• 27. میانبرهای `grid-row` و `grid-column`
• 28. ویژگی `grid-area`: تعیین محل قرارگیری با استفاده از نام
• 29. ویژگی `justify-items`: تنظیم محتوا در محور اصلی Grid
• 30. ویژگی `align-items`: تنظیم محتوا در محور فرعی Grid
• 31. ویژگی `place-items`: ترکیب `justify-items` و `align-items`
• 32. ویژگی `justify-content`: توزیع فضا در محور اصلی Grid
• 33. ویژگی `align-content`: توزیع فضا در محور فرعی Grid
• 34. ویژگی `place-content`: ترکیب `justify-content` و `align-content`
• 35. استفاده از `minmax()` برای ایجاد ردیف‌ها و ستون‌های با اندازه حداقل و حداکثر
• 36. استفاده از `auto` برای اندازه گیری خودکار ردیف‌ها و ستون‌ها
• 37. ساخت یک طرح‌بندی ساده با Grid
• 38. ساخت یک طرح‌بندی پیچیده با Grid
• 39. ترکیب Flexbox و Grid برای ایجاد طرح‌بندی‌های قوی
• 40. ریسپانسیو کردن طرح‌بندی با Grid (Responsive Layout)
• 41. پیاده سازی Breakpointها در React Native
• 42. استفاده از `useWindowDimensions` برای دریافت ابعاد صفحه نمایش
• 43. استفاده از کتابخانه‌های ریسپانسیو (Responsive Libraries)
• 44. طراحی طرح‌بندی‌های Adaptable برای اندازه‌های مختلف صفحه نمایش
• 45. ساخت یک کامپوننت Navigation با Flexbox
• 46. ساخت یک کامپوننت Card با Flexbox
• 47. ساخت یک کامپوننت Form با Flexbox
• 48. ساخت یک کامپوننت Modal با Flexbox
• 49. بهینه سازی Flexbox برای عملکرد بهتر
• 50. بهینه سازی Grid برای عملکرد بهتر
• 51. اجتناب از رندر مجدد غیر ضروری (Unnecessary Re-renders)
• 52. استفاده از `React.memo` برای بهینه سازی کامپوننت‌ها
• 53. استفاده از `useCallback` برای بهینه سازی توابع
• 54. استفاده از `useMemo` برای بهینه سازی محاسبات
• 55. کار با لیست‌های طولانی و مجازی‌سازی (Virtualization)
• 56. استفاده از `FlatList` برای لیست‌های اسکرول‌پذیر
• 57. استفاده از `SectionList` برای لیست‌های بخش‌بندی شده
• 58. پیاده سازی Lazy Loading برای تصاویر و محتوا
• 59. استایل دهی شرطی (Conditional Styling)
• 60. استفاده از Ternary Operator برای استایل دهی
• 61. استفاده از Stylesheets.create برای بهبود عملکرد استایل
• 62. استفاده از Theme Provider برای مدیریت تم‌ها
• 63. استفاده از TypeScript با React Native Layout
• 64. Type Safety در Flexbox و Grid
• 65. Component Composition و Pattern های طراحی
• 66. HOC (Higher-Order Components)
• 67. Render Props
• 68. Custom Hooks برای منطق Layout
• 69. بررسی و دیباگ کردن Layout مشکلات
• 70. استفاده از React Native Debugger
• 71. استفاده از Chrome Developer Tools
• 72. استفاده از Layout Inspector
• 73. تست Unit برای Layout Component ها
• 74. تست End-to-End برای Layout Component ها
• 75. استفاده از Snapshot Testing
• 76. بهترین روش ها در React Native Layout
• 77. نوشتن کد تمیز و خوانا
• 78. مستندسازی Layout Component ها
• 79. به اشتراک گذاری Layout Component ها
• 80. استفاده از Layout Component ها در پروژه های مختلف
• 81. چالش های رایج در React Native Layout
• 82. حل مشکلات تداخل Flexbox و Grid
• 83. مدیریت Layout در سیستم عامل های مختلف (iOS و Android)
• 84. پیاده سازی انیمیشن های ساده با Flexbox
• 85. پیاده سازی انیمیشن های ساده با Grid
• 86. استفاده از `Animated API` برای انیمیشن های پیچیده تر
• 87. ادغام Flexbox و Grid با انیمیشن ها
• 88. بررسی کتابخانه های UI رایج (UI Libraries)
• 89. NativeBase
• 90. React Native Elements
• 91. UI Kitten
• 92. Ant Design Mobile
• 93. جمع بندی Flexbox و Grid در React Native
• 94. منابع و مراجع بیشتر برای یادگیری React Native Layout
• 95. پروژه عملی: طراحی یک صفحه اصلی (Home Screen)
• 96. پروژه عملی: طراحی یک صفحه پروفایل (Profile Screen)
• 97. پروژه عملی: طراحی یک صفحه تنظیمات (Settings Screen)
• 98. پروژه عملی: طراحی یک صفحه محصول (Product Screen)
• 99. پروژه عملی: طراحی یک اپلیکیشن کامل با Flexbox و Grid
• 100. ارائه نکات و ترفندهای پیشرفته در React Native Layout