آموزش الگوهای طراحی در ری‌اکت (React Design Patterns) - آخرین آپدیت

سرفصل ها و درس ها

مقدمه Introduction

• ویدیو معرفی Intro video

• الگوهای طراحی چیستند؟ What are design patterns?

1. کامپوننت‌های لایوت (Layout Components) 1. Layout Components

• راهکار: انواع مختلف لیست‌ها Solution: Different list types

• کامپوننت‌های لایوت چیستند؟ What are layout components?

• کامپوننت‌های تقسیم صفحه (Split Screen) Split-screen components

• کامپوننت‌های مودال (Modal) Modal components

• کامپوننت‌های لیست و آیتم List and item components

• بهبود کامپوننت تقسیم صفحه Split-screen component improvements

2. کامپوننت‌های کانتینر (Container Components) 2. Container Components

• بارگذاری کاربر فعلی Loading the current user

• کامپوننت ResourceLoader ResourceLoader component

• کامپوننت UserLoader UserLoader component

• دستورالعمل‌های سرور Server instructions

• راهکار: بارگذاری داده‌ها از localStorage Solution: Loading data from localStorage

• کامپوننت‌های کانتینر چیستند؟ What are container components?

• کامپوننت DataLoader DataLoader component

• کامپوننت CurrentUserLoader CurrentUserLoader component

3. کامپوننت‌های کنترل‌شده و کنترل‌نشده 3. Controlled and Uncontrolled Components

• مقایسه کامپوننت‌های کنترل‌شده و کنترل‌نشده Controlled vs. uncontrolled components

• فرم‌های کنترل‌نشده Uncontrolled forms

• فرم‌های کنترل‌شده Controlled forms

• جریان‌های Onboarding کنترل‌نشده Uncontrolled onboarding flows

• مودال‌های کنترل‌شده و کنترل‌نشده Controlled and uncontrolled modals

4. کامپوننت‌های مرتبه بالاتر (HOCs) 4. Higher-Order Components

• کامپوننت‌های مرتبه بالاتر (HOCs) چیستند؟ What are higher-order components (HOCs)?

• افزودن JSX با استفاده از HOCها Adding JSX with HOCs

• بارگذاری داده‌ها با HOCها Loading data with HOCs

• چاپ Props با استفاده از HOCها Printing props with HOCs

5. الگوهای هوک‌های سفارشی (Custom Hooks) 5. Custom Hooks Patterns

• هوک useDataSource useDataSource Hook

• هوک useResource useResource Hook

• هوک useCurrentUser useCurrentUser Hook

• هوک‌های سفارشی چیستند؟ What are custom hooks?

• هوک useUser useUser Hook

• راهکار: هوک UseLocalStorage Solution: UseLocalStorage Hook

6. برنامه‌نویسی تابعی و ری‌اکت 6. Functional Programming and React

• کامپوننت‌های بازگشتی (Recursive) Recursive components

• کامپوننت‌های Partial Applied Partially applied components

• ترکیب کامپوننت‌ها (Component Composition) Component composition

• مثالی از Partial Application Partial application example

• راهکار: پوشه‌های بازگشتی Solution: Recursive folders

• برنامه‌نویسی تابعی چیست؟ What is functional programming?

جمع‌بندی Conclusion

• گام‌های بعدی در مسیر یادگیری ری‌اکت Next steps in your React journey

پیوست Appendix

• گشتی در CoderPad Tour of CoderPad