آموزش کار با کامپوننت ها در React 18

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

پیاده سازی کامپوننت ها در React Apps Implementing Components in React Apps

• خوش آمدی Welcome

• کامپوننت ها چیست؟ What Are Components?

• شیرجه عمیق به یک جزء Deep Dive into a Single Component

• چندین روش برای انتقال پارامترها به کامپوننت ها Multiple Ways to Pass Parameters to Components

• اضافه کردن سفر در زمان (تغییرات وضعیت) به یک جزء Adding Time Travel (State Changes) to a Component

• انتظارات دوره Course Expectations

کاوش برنامه React ما Exploring Our React Application

• معرفی Introduction

• منبع برنامه در GitHub The App Source in GitHub

• بالا و در حال اجرا با کد ویژوال استودیو Up and Running with Visual Studio Code

• مبانی Next.js Toolchain The Next.js Toolchain Basics

• نحوه عملکرد برنامه Todo را مرور کنید Review How the Todo App Works

• بررسی کد برنامه Todo ما Code Review of Our Todo App

• آشنایی با لایه داده Todo Apps Understanding the Todo Apps Data Layer

• غذای آماده Takeaways

به اشتراک گذاری وضعیت جهانی و زمینه واکنش Global State Sharing and React Context

• معرفی Introduction

• سه راه برای انتشار حالت بین اجزا Three Ways to Propagate State Between Components

• عبور حالت به عنوان پایه بین اجزا Passing State as props Between Components

• اشتراک گذاری حالت با React Context Sharing State with React Context

• پیاده سازی React Context در Layout Component ما Implementing React Context in Our Layout Component

• متن React را به یک مؤلفه اختصاصی منتقل کنید Move React Context into a Dedicated Component

• ایجاد زمینه را به جایی که استفاده می شود ارتقا دهید Promote Context Creation to Where It Is Used

• کامپوننت ها را با HOC (اجزای مرتبه بالاتر) تقویت کنید Enhance Components with HOCs (Higher Order Components)

• کد یک جزء مرتبه بالاتر (HOC) Code a Higher Order Component (HOC)

• حالت جزء را با HOC ها به اشتراک بگذارید Share Component State with HOCs

• مقایسه روش‌های به اشتراک گذاشتن حالت بین مؤلفه‌ها Comparing Ways to Share State Between Components

مدیریت خطاها و اشکال زدایی مولفه ها Handling Errors and Debugging Components

• معرفی Introduction

• انگیزه برای React Debug Tooling Motivation for React Debug Tooling

• کار با React Dev Tools Component Tab Working with the React Dev Tools Component Tab

• UseDebugValue Hook Basics The useDebugValue Hook Basics

• ادغام useDebugValue در قلاب تم سفارشی Integrating useDebugValue into Custom Theme Hook

• استفاده پیشرفته از useDebugValue An Advanced Use of useDebugValue

• کار با React Dev Tools Profiler Tab Working with the React Dev Tools Profiler Tab

• بررسی رندرهای کامپوننت با ابزار React Dev Inspecting Component Renders with React Dev Tools

• افزودن مرزهای خطا برای کشف خطاها در تولید Adding Error Boundaries for Catching Errors in Production

• بهبود رابط کاربری خطای مرزی React ما Improving Our React Boundary Error UI

• غذای آماده Takeaways

بهبود عملکرد رابط کاربری کامپوننت Improving Component UI Performance

• معرفی Introduction

• رفع مشکلات عملکرد رندر Fixing over Rendering Performance Problems

• React.memo می تواند مشکلات رندر را حل کند React.memo Can Solve over Rendering Problems

• پیاده سازی React.memo برای حل مشکل رندر مجدد ما Implementing React.memo to Solve Our Re-rendering Problem

• استفاده پیشرفته از React.memo با یک تابع سفارشی Advanced Usage of React.memo with a Custom Function

• به تعویق انداختن به‌روزرسانی‌های رابط کاربری با useDeferredValue Deferring UI Updates with useDeferredValue

• useDeferredValue را در برنامه Todo پیاده سازی کنید Implement useDeferredValue in the Todo App

• اولویت بندی به روز رسانی های حالت در کامپوننت ها با useTransition Prioritizing State Updates in Components with useTransition

• useTransition را در برنامه Todo پیاده سازی کنید Implement useTransition in the Todo App

• تأیید setTransition مطابق انتظار کار می کند Verifying setTransition Is Working as Expected

• غذای آماده Takeaways

معرفی اجزای سرور Introducing Server Components

• معرفی اجزای سرور Introducing Server Components

• مولفه های رندر و سرور همزمان Concurrent Rendering and Server Components

• جریان اجزای سرور The Flow of Server Components

• چی، بدون کد؟ What, No Code?

• حرکت به جلو با اجزای سرور Going Forward with Server Components

غذای آماده دوره Course Takeaways

• غذای آماده دوره Course Takeaways