آموزش شروع کار با React Hooks

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

معرفی Introduction

• به React Hooks خوش آمدید Welcome to React Hooks

• راه اندازی پروژه ایجاد-واکنش-برنامه جدید Setup New create-react-app Project

UseState Hook The useState Hook

• اختیاری - بررسی: اجزای عملکردی بدون تابعیت OPTIONAL - REVIEW: Stateless Functional Components

• اختیاری - مرور: مؤلفه‌های React مبتنی بر کلاس OPTIONAL - REVIEW: Class-based React Components

• اختیاری - بررسی: تخریب آرایه OPTIONAL - REVIEW: Array Destructuring

• فراخوانی useState Hook Invoking the useState Hook

• تخریب ساختار و استفاده از مقدار بازگشت useState Destructuring and Using the useState Return Value

• استفاده از UseState Hook برای ساخت شمارنده Using the useState Hook to Build a Counter

• چالش: اضافه کردن کنترل کننده های کلیک بیشتر CHALLENGE: Adding More Click Handlers

• قلاب useState با آرگومان شی The useState Hook with an Object Argument

• کار با چند تکه حالت در یک جزء مبتنی بر قلاب Working with Multiple Pieces of State in a Hooks-Based Component

قلاب useEffect The useEffect Hook

• اختیاری - مرور: روش‌های چرخه حیات در مؤلفه‌های مبتنی بر کلاس OPTIONAL - REVIEW: Lifecycle Methods on Class-based Components

• فراخوانی useEffect Hook Invoking the useEffect Hook

• پاکسازی توسط بازگرداندن یک تابع از افکت I Cleaning Up by by Returning a Function from the Effect I

• پاکسازی توسط بازگرداندن یک تابع از Effect II Cleaning Up by by Returning a Function from the Effect II

• محدود کردن useEffect به Mounting و Unmounting Limiting useEffect to Mounting and Unmounting

• دومین استدلال برای useEffect Hook The Second Argument to the useEffect Hook

• اختیاری - مرور: شنوندگان رویداد OPTIONAL - REVIEW: Event Listeners

• مثال دیگر useEffect: ورودی کاربر Another useEffect Example: User Input

قلاب useContext The useContext Hook

• اختیاری - بررسی: زمینه واکنش OPTIONAL - REVIEW: React Context

• فراخوانی useContext Hook Invoking the useContext Hook

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

• تعریف یک هوک سفارشی (فشردن کلید کاربر) Define a Custom Hook (User Keypresses)

• نمونه قلاب سفارشی دیگر (شمارگر) Another Custom Hook Example (Counter)

• چالش: استفاده مجدد از قلاب های سفارشی در چندین مؤلفه CHALLENGE: Reusing Custom Hooks in Multiple Components

نتیجه Conclusion

• نتیجه Conclusion

• جایزه! Bonus!