فلش‌کارت‌های آموزشی ساخت محیط توسعه مدرن ری‌اکت با Vite و Webpack

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

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

عنوان دوره: دوره ساخت محیط توسعه مدرن ری‌اکت با Vite و Webpack

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

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

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

• 1. مقدمه‌ای بر ابزارهای ساخت پروژه در جاوا اسکریپت
• 2. آشنایی با Vite: مزایا و معماری
• 3. نصب و راه‌اندازی اولیه Vite
• 4. ساخت یک پروژه ری‌اکت ساده با Vite
• 5. پیکربندی Vite برای توسعه
• 6. استفاده از Hot Module Replacement (HMR) در Vite
• 7. بهینه‌سازی build در Vite
• 8. کار با Environment Variables در Vite
• 9. آشنایی با Webpack: معماری و مفاهیم کلیدی
• 10. نصب و پیکربندی اولیه Webpack
• 11. ساخت یک پروژه ری‌اکت با Webpack
• 12. Loaders در Webpack: پردازش فایل‌ها
• 13. Plugins در Webpack: افزودن قابلیت‌ها
• 14. مدیریت CSS در Webpack (CSS Loader, Style Loader)
• 15. مدیریت تصاویر و فایل‌های استاتیک در Webpack
• 16. Code Splitting در Webpack
• 17. Tree Shaking در Webpack
• 18. بهینه‌سازی Bundle در Webpack
• 19. مدیریت Environment Variables در Webpack
• 20. مقایسه Vite و Webpack
• 21. انتخاب ابزار مناسب برای پروژه
• 22. شروع با ری‌اکت: مفاهیم پایه
• 23. JSX: سینتکس و کاربرد
• 24. کامپوننت‌های تابعی (Functional Components)
• 25. کامپوننت‌های کلاسی (Class Components)
• 26. Props: انتقال داده به کامپوننت‌ها
• 27. State: مدیریت وضعیت داخلی کامپوننت
• 28. هوک‌های ری‌اکت: useState
• 29. هوک‌های ری‌اکت: useEffect
• 30. هوک‌های ری‌اکت: useContext
• 31. مدیریت رویدادها در ری‌اکت
• 32. کار با فرم‌ها در ری‌اکت
• 33. List Rendering در ری‌اکت
• 34. Conditional Rendering در ری‌اکت
• 35. Lifecycle Methods در کامپوننت‌های کلاسی
• 36. Hooks در کامپوننت‌های تابعی (مرور جامع)
• 37. Custom Hooks: ساخت هوک‌های سفارشی
• 38. Context API: مدیریت وضعیت سراسری
• 39. Redux: معرفی و مفاهیم پایه
• 40. Redux Toolkit: ساده‌سازی Redux
• 41. Actions, Reducers, Store در Redux
• 42. Dispatching Actions
• 43. Selectors در Redux
• 44. Asynchronous Operations در Redux (Thunks)
• 45. Routing در ری‌اکت با React Router DOM
• 46. تعریف مسیرها و لینک‌ها
• 47. Nested Routes
• 48. Dynamic Routes
• 49. Navigation Guards
• 50. Styling در ری‌اکت: CSS Modules
• 51. Styling در ری‌اکت: Styled Components
• 52. Styling در ری‌اکت: Inline Styles
• 53. Styling در ری‌اکت: Tailwind CSS
• 54. استفاده از کتابخانه‌های UI (مثال: Material-UI)
• 55. Fetching Data از API
• 56. مدیریت خطا در درخواست‌های API
• 57. Loading States
• 58. Caching Data
• 59. Server-Side Rendering (SSR) با React
• 60. Next.js: معرفی و مزایا
• 61. ساخت پروژه ری‌اکت با Next.js
• 62. Routing در Next.js
• 63. Data Fetching در Next.js (getServerSideProps, getStaticProps)
• 64. API Routes در Next.js
• 65. Styling در Next.js
• 66. Deployment با Next.js
• 67. Progressive Web Apps (PWAs) با ری‌اکت
• 68. Service Workers
• 69. Manifest File
• 70. Caching Strategies برای PWAs
• 71. Unit Testing در ری‌اکت با Jest
• 72. React Testing Library
• 73. Mocking API Calls
• 74. Integration Testing
• 75. End-to-End (E2E) Testing با Cypress
• 76. مدیریت خطا در ری‌اکت (Error Boundaries)
• 77. Performance Optimization در ری‌اکت
• 78. Code Splitting در ری‌اکت
• 79. Memoization (React.memo, useMemo, useCallback)
• 80. Virtualization (React Window, React Virtualized)
• 81. Accessibility (a11y) در ری‌اکت
• 82. ARIA Attributes
• 83. Semantic HTML
• 84. Keyboard Navigation
• 85. Internationalization (i18n) در ری‌اکت
• 86. کتابخانه‌های i18n (مثال: react-i18next)
• 87. مدیریت ترجمه‌ها
• 88. Type Checking با TypeScript
• 89. تنظیمات TypeScript برای ری‌اکت
• 90. Types برای Props و State
• 91. Types برای هوک‌ها
• 92. Type Safety در مدیریت رویدادها
• 93. Type Safety در Context API
• 94. Type Safety در Redux Toolkit
• 95. Type Safety در API Calls
• 96. Architecture Patterns در ری‌اکت
• 97. Modular Design
• 98. Folder Structure Best Practices
• 99. CI/CD Pipeline for React Apps
• 100. Security Best Practices in React Development