آموزش راهنمای کامل الگوهای کامپوننت واکنش پیشرفته

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

معرفی Introduction

• (پاداش) PDF: الگوهای واکنش پیشرفته در دنیای واقعی: درس هایی از کتابخانه های سیستم عامل (Bonus) PDF:Advanced React Patterns in the Real World: Lessons from OS Libraries

• چرا الگوهای واکنش پیشرفته Why Advanced React Patterns

• کف زدن متوسط The Medium Clap

معرفی Introduction

• شروع با الگوهای پیشرفته Getting Started with Advanced Patterns

• شروع با الگوهای پیشرفته Getting Started with Advanced Patterns

• (پاداش) PDF: الگوهای واکنش پیشرفته در دنیای واقعی: درس هایی از کتابخانه های سیستم عامل (Bonus) PDF:Advanced React Patterns in the Real World: Lessons from OS Libraries

• چرا الگوهای واکنش پیشرفته Why Advanced React Patterns

• الگوهای طراحی و واکنش نشان دهید Design Patterns and React

• الگوهای طراحی و واکنش نشان دهید Design Patterns and React

• کف زدن متوسط The Medium Clap

The Medium Clap: مؤلفه دنیای واقعی برای مطالعه الگوهای واکنش پیشرفته The Medium Clap: Real-world Component for Studying Advanced React Patterns

• چرا باید کف زدن متوسط ​​را ساخت؟ Why build the medium clap?

• شروع به متحرک کردن کف زدن Beginning to animate the clap

• ایجاد و به روز رسانی جدول زمانی انیمیشن Creating and updating the animation timeline

• حل کردن مقیاس متحرک اشتباه Resolving wrong animated scale

• متحرک کردن تعداد کف زدن Animating the clap count

• متحرک کردن تعداد کل Animating the total count

The Medium Clap: مؤلفه دنیای واقعی برای مطالعه الگوهای واکنش پیشرفته The Medium Clap: Real-world Component for Studying Advanced React Patterns

• چرا باید کف زدن متوسط ​​را ساخت؟ Why build the medium clap?

• تنظیم محیط محلی شما Setting up your local environment

• تنظیم محیط محلی شما Setting up your local environment

• ویترین نمایشی چگونه کار می کند How the demo showcase works

• ویترین نمایشی چگونه کار می کند How the demo showcase works

• ساخت و مدل دادن به کف زدن متوسط Building and styling the medium clap

• ساخت و مدل دادن به کف زدن متوسط Building and styling the medium clap

• مدیریت تعامل با کاربر Handling user interactivity

• مدیریت تعامل با کاربر Handling user interactivity

• جمع بندی اجزای مرتبه بالاتر Higher order components recap

• جمع بندی اجزای مرتبه بالاتر Higher order components recap

• شروع به متحرک کردن کف زدن Beginning to animate the clap

• ایجاد و به روز رسانی جدول زمانی انیمیشن Creating and updating the animation timeline

• حل کردن مقیاس متحرک اشتباه Resolving wrong animated scale

• متحرک کردن تعداد کف زدن Animating the clap count

• متحرک کردن تعداد کل Animating the total count

• ایجاد انفجارهای متحرک! Creating animated bursts!

• ایجاد انفجارهای متحرک! Creating animated bursts!

قلاب های سفارشی: اولین الگوی بنیادی Custom Hooks: The first Foundational Pattern

• (پاداش) تازه وارد قلاب هستید؟ (Bonus) New to hooks?

• ساخت یک قلاب سفارشی انیمیشن Building an animation custom hook

• چرا قابلیت استفاده مجدد شکست می خورد - مهم است! Why reusability fails - important!

• قلاب ها و رفرنس های سفارشی Custom hooks and refs

قلاب های سفارشی: اولین الگوی بنیادی Custom Hooks: The first Foundational Pattern

• (پاداش) تازه وارد قلاب هستید؟ (Bonus) New to hooks?

• مقدمه ای بر قلاب های سفارشی Introduction to Custom Hooks

• مقدمه ای بر قلاب های سفارشی Introduction to Custom Hooks

• ساخت یک قلاب سفارشی انیمیشن Building an animation custom hook

• چرا قابلیت استفاده مجدد شکست می خورد - مهم است! Why reusability fails - important!

• قلاب ها و رفرنس های سفارشی Custom hooks and refs

• چه زمانی قلاب من احضار می شود؟ When is my hook invoked?

• چه زمانی قلاب من احضار می شود؟ When is my hook invoked?

الگوی اجزای مرکب The Compound Components Pattern

• اجزای مرکب به زبانی ساده و قابل دسترسی Compound components in plain approachable language

• Refactor to Compound Compound Refactor to Compound components

• فراخوانی callback useEffect فقط پس از نصب! Invoking the useEffect callback only after mount!

الگوی اجزای مرکب The Compound Components Pattern

• اجزای مرکب به زبانی ساده و قابل دسترسی Compound components in plain approachable language

• چرا اجزای مرکب؟ Why compound components?

• چرا اجزای مرکب؟ Why compound components?

• نحوه اجرای الگو How to implement the pattern

• نحوه اجرای الگو How to implement the pattern

• Refactor to Compound Compound Refactor to Compound components

• استراتژی جایگزین صادرات Alternative export strategy

• استراتژی جایگزین صادرات Alternative export strategy

• افشای وضعیت از طریق تماس برگشتی Exposing state via a callback

• افشای وضعیت از طریق تماس برگشتی Exposing state via a callback

• فراخوانی callback useEffect فقط پس از نصب! Invoking the useEffect callback only after mount!

الگوهایی برای ساخت سبک های قابل استفاده مجدد Patterns for Crafting Reusable Styles

• مقدمه ای بر سبک های قابل استفاده مجدد Introduction to reusable styles

الگوهایی برای ساخت سبک های قابل استفاده مجدد Patterns for Crafting Reusable Styles

• مقدمه ای بر سبک های قابل استفاده مجدد Introduction to reusable styles

• گسترش سبک ها از طریق یک استایل پایه Extending styles via a style prop

• گسترش سبک ها از طریق یک استایل پایه Extending styles via a style prop

• گسترش سبک ها از طریق کلاسName prop Extending styles via a className prop

• گسترش سبک ها از طریق کلاسName prop Extending styles via a className prop

الگوی Control Props The Control Props Pattern

• پیاده سازی الگو Implementing the pattern

• استفاده عملی از تجهیزات کنترلی Practical usage of control props

الگوی Control Props The Control Props Pattern

• مشکلی که باید حل شود The Problem to be solved

• مشکلی که باید حل شود The Problem to be solved

• لوازم کنترلی چیست؟ What is control props?

• لوازم کنترلی چیست؟ What is control props?

• پیاده سازی الگو Implementing the pattern

• استفاده عملی از تجهیزات کنترلی Practical usage of control props

قلاب های سفارشی: نگاهی عمیق تر به الگوی اساسی Custom Hooks: A Deeper Look at the Foundational Pattern

قلاب های سفارشی: نگاهی عمیق تر به الگوی اساسی Custom Hooks: A Deeper Look at the Foundational Pattern

• معرفی Introduction

• معرفی Introduction

• از DOMRef استفاده کنید useDOMRef

• از DOMRef استفاده کنید useDOMRef

• از ClapState استفاده کنید useClapState

• از ClapState استفاده کنید useClapState

• useEffectAfterMount useEffectAfterMount

• useEffectAfterMount useEffectAfterMount

• یک استفاده کاربردی و سرگرم کننده A practical and fun usage

• یک استفاده کاربردی و سرگرم کننده A practical and fun usage

الگوی مجموعه Props The Props Collection Pattern

• استراتژی صادرات جایگزین An alternative export strategy

• اجرای مجموعه های لوازم جانبی Implementing props collections

الگوی مجموعه Props The Props Collection Pattern

• استراتژی صادرات جایگزین An alternative export strategy

• مجموعه های پروپوز چیست؟ What are props collections?

• مجموعه های پروپوز چیست؟ What are props collections?

• اجرای مجموعه های لوازم جانبی Implementing props collections

• مجموعه‌های دسترسی و لوازم Accessibility and props collections

• مجموعه‌های دسترسی و لوازم Accessibility and props collections

الگوی Props Getters The Props Getters Pattern

• گیرنده های غرفه چیست؟ What are props getters

• از مجموعه ها گرفته تا دریافت کننده ها From collections to getters

الگوی Props Getters The Props Getters Pattern

• گیرنده های غرفه چیست؟ What are props getters

• از مجموعه ها گرفته تا دریافت کننده ها From collections to getters

• از کیس برای گیرنده های پایه استفاده کنید Use cases for prop getters

• از کیس برای گیرنده های پایه استفاده کنید Use cases for prop getters

الگوی آغازگر دولتی The State Initialiser Pattern

• رسیدگی به تنظیم مجدد Handling resets

• نحوه استفاده از Previous How usePrevious works

الگوی آغازگر دولتی The State Initialiser Pattern

• مقداردهی اولیه کننده حالت چیست؟ What are state initializers?

• مقداردهی اولیه کننده حالت چیست؟ What are state initializers?

• الزام الگوی اول First pattern requirement

• الزام الگوی اول First pattern requirement

• رسیدگی به تنظیم مجدد Handling resets

• مدیریت عوارض جانبی تنظیم مجدد Handling reset side effects

• مدیریت عوارض جانبی تنظیم مجدد Handling reset side effects

• نحوه استفاده از Previous How usePrevious works

الگوی کاهش دهنده حالت The State Reducer Pattern

• الگوی کاهنده حالت The state reducer pattern

• عبور از کاهنده سفارشی کاربر Passing a user custom reducer

الگوی کاهش دهنده حالت The State Reducer Pattern

• الگوی کاهنده حالت The state reducer pattern

• 02 از useState به useReducer 02 From useState to useReducer

• 02 از useState به useReducer 02 From useState to useReducer

• عبور از کاهنده سفارشی کاربر Passing a user custom reducer

• افشای کاهنده داخلی و انواع Exposing the internal reducer and types

• افشای کاهنده داخلی و انواع Exposing the internal reducer and types

(پاداش) طبقه بندی الگوها: نحوه انتخاب بهترین API (Bonus) Classifying the Patterns: How to choose the best API

(پاداش) طبقه بندی الگوها: نحوه انتخاب بهترین API (Bonus) Classifying the Patterns: How to choose the best API

• نحوه کار طبقه بندی How the classification works

• نحوه کار طبقه بندی How the classification works

• انتخاب درست API Making the right API choice

• انتخاب درست API Making the right API choice

نتیجه Conclusion

• متشکرم! Thank you!

نتیجه Conclusion

• متشکرم! Thank you!