آموزش Advanced React: سیستم طراحی، الگوهای طراحی، عملکرد

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

معرفی Introduction

• نقطه شروع Starting Point

• دوره پیاده روی Course Walk-Through

• الزامات Requirements

الگوهای طراحی: اجزای طرح Design Patterns: Layout Components

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

• معرفی Introduction

• شکاف صفحه نمایش Screen Splitter

• بهبود شکاف صفحه نمایش Screen Splitter Enhancement

• لیست ها Lists

• انواع را فهرست می کند Lists Types

• مدال ها Modals

الگوهای طراحی: اجزای ظرف Design Patterns: Container Components

• معرفی Introduction

• راه اندازی سرور Server Setup

• مولفه لودر برای داده های کاربر فعلی Loader Component for CurrentUser Data

• کامپوننت لودر برای داده های کاربر Loader Component for User Data

• مولفه لودر برای داده های منبع Loader Component for Resource Data

• جزء منبع داده DataSource Component

• کامپوننت ظرف با الگوی Render Props Container Component with Render Props Pattern

• مؤلفه لودر داده ذخیره سازی محلی Local Storage Data Loader Component

الگوهای طراحی: اجزای کنترل شده و کنترل نشده Design Patterns: Controlled and Uncontrolled Components

• معرفی Introduction

• اجزای کنترل نشده Uncontrolled Components

• اجزای کنترل شده Controlled Components

• مدال های کنترل شده Controlled Modals

• جریان های کنترل نشده Uncontrolled Flows

• جمع آوری داده ها Collecting Data

• جریان های کنترل شده Controlled Flows

الگوهای طراحی: HOCs Design Patterns: HOCs

• معرفی Introduction

• بررسی لوازم با HOC Checking Props with HOC

• بارگیری داده ها با HOC Data Loading with HOC

• به روز رسانی داده ها با HOC Updating Data with HOC

• ساخت فرم ها با HOC Building Forms with HOC

• تقویت الگوی HOC Enhancing HOC Pattern

الگوهای طراحی: قلاب های سفارشی Design Patterns: Custom hooks

• معرفی Introduction

• واکشی کاربر با هوک سفارشی Fetching a user with Custom Hook

• واکشی کاربران با هوک سفارشی Fetching users with Custom Hook

• واکشی یک منبع با هوک سفارشی Fetching a Resource with Custom Hook

• یک قلاب سفارشی عمومی تر a More Generic Custom Hook

الگوهای طراحی: برنامه نویسی کاربردی در React Design Patterns: Functional Programming in React

• معرفی Introduction

• اجزای بازگشتی Recursive Components

• ترکیبات Compositions

• اجزای جزئی Partial Components

الگوهای طراحی: الگوهای بیشتر Design Patterns: More Patterns

• اجزای مرکب Compound Components

• الگوی مشاهده گر Observer Pattern

مفاهیم و قلاب های پیشرفته Advanced Concepts and Hooks

• React Portals React Portals

• ارجاعات ارسالی Forwarding Refs

• مرزهای خطا Error Boundaries

• کلیدها توضیح داده شده است Keys Explained

• شنوندگان رویداد Event Listeners

• useLayoutEffect useLayoutEffect

• useId useId

• useCallback As Ref useCallback As Ref

• استفاده از ImperativeHandle useImperativeHandle

• useDeferredValue useDeferredValue

• استفاده از انتقال useTransition

• روتر واکنش Async Async React Router

نکات کد پاک Clean Code Tips

• با استفاده از Element Prop Using Element Prop

• بهینه سازی Context API Optimizing Context API

• استفاده کمتر Less useEffects

معماری پروژه مقیاس پذیر Scalable Project Architecture

• معماری عمومی General Architecture

• اجزای مسیر Route Components

• محصور کردن اجزاء و منطق Encapsulating Components and Logics

لایه API و عملیات Async API Layer and Async Operations

• ساخت یک لایه API Building an API Layer

• ایالات API API States

• بهبود وضعیت های API Enhancing The API States

• اجتناب از سوسو زدن لودرها Avoiding Flickering Loaders

• انتزاع حالات API و واکشی منطق Abstracting API States and Fetching Logic

• افزودن منطق لغو درخواست Adding Request Abort Logic

• خطاهای ثبت نام Logging Errors

لایه API با React-Query API Layer with React-Query

• راه اندازی سرور و رفع سریع عملکرد withLogger Server Setup and a Quick Fix to withLogger Function

• واکشی داده با React-Query Fetching Data with React-Query

• به روز رسانی داده ها با React-Query Updating Data with React-Query

• صفحه بندی با React-Query Pagination with React-Query

• اسکرول بی نهایت با React-Query Infinite scroll with React-Query

• لغو پرس و جو با React-Query Query Cancellation with React-Query

الگوهای مدیریت دولتی State Management Patterns

• به روز رسانی های تغییرناپذیر با useImmer Immutable updates with useImmer

• کاهش دهنده پاک کننده با useImmerReducer Cleaner reducer with useImmerReducer

بهینه سازی عملکرد Performance Optimization

• تقسیم کد و بارگذاری تنبل Code-Splitting and Lazy-Loading

• از قلاب برگشت تماس برای حفظ یکپارچگی ارجاع استفاده کنید useCallback hook to preserve referential integrity

• اجتناب از رندر مجدد با useMemo Avoiding re-renders with useMemo

• تجمیع ایالت State Collocation

• جلوگیری از رندر مجدد با بالا بردن اجزاء Preventing re-renders by lifting components up

• گاز دادن Throttling

• منحرف کننده Debouncing

سیستم طراحی: مفاهیم اصلی Design System: Core Concepts

• سیستم طراحی چیست؟ What is a design system

• اهمیت داشتن سیستم طراحی The importance of having a design system

• ضلع های پایین سیستم های طراحی Down sides of design systems

• ساختار تیم Team Structure

• مخاطبان سیستم های طراحی Audience of design systems

• یک مثال واقعی A real-life example

• مفاهیم کلیدی سیستم های طراحی The key concepts of design systems

• چک لیست عملی A practical checklist

• اشتباهاتی که باید اجتناب کرد Mistakes to avoid

سیستم طراحی: اجزای ساختمان با استفاده از Figma Design System: Building Components Using Figma

• نمای کلی بخش Section Overview

• پالت رنگ دستی در Figma Hands-on Color Palette in Figma

• تمرین عملی ساخت دکمه Hands-on Button Building Practice

• طراحی عملی یک مودال Hands-on Designing a Modal

سیستم طراحی: توسعه کامپوننت ها در React Design System: Developing Components in React

• پایه های توسعه پذیر Extensible Foundations

• ایجاد کامپوننت دکمه Creating Button Component

• ساخت مدال Building a Modal

• قابلیت استفاده مجدد و سبک های کپسوله سازی Reusability and Encapsulating Styles

سیستم طراحی: سبک های محصور کننده Design System: Encapsulating Styles

• ترکیب بندی های سبک Style Compositions

• سبک های محصور کننده Encapsulating Styles

سیستم طراحی: الگوهایی برای فاصله Design System: Patterns for Spacing

• بررسی اجمالی Overview

• الگوی لایه ها Layers Pattern

• الگوی تقسیم Split Pattern

• الگوی ستون Column Pattern

• الگوی شبکه Grid Pattern

• الگوی Inline-Bundle Inline-Bundle Pattern

• الگوی درون خطی Inline Pattern

سیستم طراحی: الگوهایی برای سبک های پیچیده تر Design System: Patterns for More Complex Styles

• بررسی اجمالی Overview

• الگوی پد Pad Pattern

• الگوی مرکزی Center Pattern

• الگوی لفاف رسانه Media-Wrapper Pattern

• الگوی جلد Cover Pattern

• بازبینی مدال Revisiting the Modal

سیستم طراحی: پروژه نهایی Design System: Final Project

• واگذاری پروژه Project Assignment

• راه حل ساخت نوار ناوبری با منو و سربرگ Solution Building a Navbar with Menu and Header

• راه حل ایجاد منوی نوار کناری Solution Building a Sidebar Menu

• راه حل ساخت فرم Solution Building the Form

• دکمه های پایان راه حل Solution Finishing Buttons

تایپ اسکریپت پیشرفته: مقدمه Advanced Typescript: Introduction

• الزامات Requirements

تایپ اسکریپت پیشرفته: قلاب های تایپ Advanced Typescript: Typing Hooks

• استفاده از ایالت useState

• حالت بدون حالت اولیه State without initial state

• ایالت ها و رویدادهای گذرا قسمت 1 Passing States and Events Part1

• ایالت ها و رویدادهای گذرا قسمت 2 Passing States and Events Part2

• بازسازی وضعیت ها و رویدادهای عبوری Refactoring Passing States and Events

• در حال تایپ userRef Typing useRef

• تایپ کردن مقادیر برگشتی یک هوک سفارشی Typing Returned Values of a Custom Hook

• تایپ ایالات پیچیده Typing Complex States

• تایپ حالت های پیچیده قسمت 2 Typing Complex States Part2

• تاپل ها با قلاب های سفارشی Tuples with Custom Hooks

تایپ اسکریپت پیشرفته: کاهش دهنده های تایپ Advanced Typescript: Typing Reducers

• کاهش دهنده های تایپ Typing Reducers

• گذراندن اعزام به عنوان قسمت 1 Passing Dispatch as a Prop Part1

• گذراندن اعزام به عنوان قسمت دوم Passing Dispatch as a Prop Part2

• انواع تحت اللفظی الگو Template Literal Types

• انواع عمل و کاهش دهنده Action and Reducer Types

تایپ اسکریپت پیشرفته: Typing Context API Advanced Typescript: Typing Context API

• Context API با Types Context API with Types

تایپ اسکریپت پیشرفته: استفاده از Generics Advanced Typescript: Using Generics

• انواع ابزار Utility types

• ژنریک با الگوهای واقعی Generics with Template Literals

• اطلاعات بیشتر در مورد Generics More on Generics

• ساختن زمینه با Generics Building a Context with Generics

• مصرف یک زمینه سفارشی Consuming a Custom Context

• ساخت تایپ Helper Building a Type Helper

• نوع دیگری کمک کننده Another Type Helper

• محدودیت های عمومی Generic Constrains

• تایپ قلاب با Generics Typing a Hook with Generics

• استنتاج انواع عمومی Inferring Generic Types

• اجزای عمومی Generic Components

• انتقال انواع به کامپوننت ها Passing Types to Components

• بازنگری در ژنریک Reconsidering Generics

تایپ اسکریپت پیشرفته: بیشتر در مورد تایپ اسکریپت Advanced Typescript: More on Typescript

• انواع در مقابل رابط ها Types vs interfaces

• اضافه بار عملکرد Function overloads

تایپ اسکریپت پیشرفته: الگوهای مؤلفه Advanced Typescript: Component Patterns

• اجزای مرتبه بالاتر قسمت 1 Higher Order components Part1

• اجزای مرتبه بالاتر قسمت 2 Higher Order components Part2

• Render Props Render Props

• قلاب های سفارشی Custom Hooks

• محدود کردن ترکیب پروپ Limiting Prop Composition

• نیاز به ترکیب پایه Requiring prop Composition

جایزه Bonus

• Render Props Render Props

• جزء بسته بندی Wrapper Component

• جزء چند شکلی Polymorphic Component

ضمیمه الف - مبانی تایپ اسکریپت Appendix A - Typescript Basics

• تایپ اسکریپت از طریق Intellisense Typescript via Intellisense

• تعریف نوع لوازم جانبی Defining Type of Props

• مهاجرت از JS به TS Exercise Migrating From JS to TS Exercise

• تعریف انواع برای کودکان Defining Types for Children

• گسترش لوازم جانبی با کمک کنندگان Extending Props with Helpers

• لوازم با انواع مختلف Props with Variant Types

• نیاز به لوازم جانبی Requiring Props

• لوازم متمایز کننده Differentiating Props

• Empty Object به عنوان Type Empty Object as Type

• شی خالی و لوازم مورد نیاز Empty Object and Requiring Props

• آشنایی با ReactNode Understanding ReactNode

• انواع پیوند Linking Types

• تکمیل خودکار جزئی Partial Autocomplete

• استخراج انواع با عنوان const Extracting Types with as const

• لوازم پویا Dynamic Props

--- میراث --- بهینه سازی عملکرد ---LEGACY--- Performance Optimization

• پروژه دمو The demo project

• راه اندازی و اجرا با کدهای نمایشی Getting up and running with the demo codes

• معرفی React Profiler Introduction to the React Profiler

• مقدمه ای بر React Rendering Introduction to React Rendering

• DOM مجازی The Virtual DOM

• جلوگیری از رندرهای هدر رفته در یک کامپوننت ساده Preventing Wasted Renders in a Simple Component

• جلوگیری از هدر رفتن رندرها در اجزای عملکردی Preventing Wasted Renders in Functional Components

• جلوگیری از هدر رفتن رندر هنگام برخورد با لوازم پیچیده Preventing Wasted Renders When Dealing With Complex Props

• استفاده از داده های تغییرناپذیر به منظور امکان مقایسه Using Immutable Data in Order to Allow for Comparisons

• جلوگیری از رندرهای هدر رفته در کامپوننت های مکرر Preventing Wasted Renders in Repeated Components

• منابع Resources

• گرفتن عملیات گران قیمت Catching Expensive Operations

• کاهش اندازه باندل Reducing Bundle Sizes

• کامپوننت های بارگذاری تنبل Lazy Loading Components

• منابع Resources