آموزش جامع React Hooks با مثال: یادگیری عملی React Hooks - آخرین آپدیت

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

Introduction-فصل-1-مقدمه Introduction

• Course Objectives-ویدیو-1-1-اهداف دوره Course Objectives

• Following this course on CodeSandbox-ویدیو-1-2-دنبال کردن این دوره در CodeSandbox Following this course on CodeSandbox

• ** Rules of Hooks **-ویدیو-1-3-قوانین هوک‌ها ** Rules of Hooks **

Learning about the useState Hook-فصل-2-آموزش هوک useState Learning about the useState Hook

• Example 1 - a simple counter-ویدیو-2-1-مثال-1-یک شمارنده ساده Example 1 - a simple counter

• Example 2 - Theme Toggle-ویدیو-2-2-مثال-2-تغییر تم Example 2 - Theme Toggle

• Example 3 - Simple Form-ویدیو-2-3-مثال-3-فرم ساده Example 3 - Simple Form

• Example 4 - Arrays in State - ToDo List-ویدیو-2-4-مثال-4-آرایه‌ها در State-لیست انجام کارها Example 4 - Arrays in State - ToDo List

• Example 5 - Objects in State - User Profile Form-ویدیو-2-5-مثال-5-اشیا در State-فرم پروفایل کاربر Example 5 - Objects in State - User Profile Form

• Example 6 - Previous Values from State-ویدیو-2-6-مثال-6-مقادیر قبلی از State Example 6 - Previous Values from State

• Example 7 - Conditional Rendering-ویدیو-2-7-مثال-7-رندر شرطی Example 7 - Conditional Rendering

• TEST YOUR KNOWLEDGE - useState Hook-ویدیو-2-8-دانش خود را بیازمایید-هوک useState TEST YOUR KNOWLEDGE - useState Hook

Learning the useEffect Hook-فصل-3-آموزش هوک useEffect Learning the useEffect Hook

• Intro to useEffect Hook-ویدیو-3-1-مقدمه ای بر هوک useEffect Intro to useEffect Hook

• Basic Example of useEffect Hook-ویدیو-3-2-مثال اساسی از هوک useEffect Basic Example of useEffect Hook

• Example 2 - Simple Counter-ویدیو-3-3-مثال-2-شمارنده ساده Example 2 - Simple Counter

• Example 3 - Changes from State-ویدیو-3-4-مثال-3-تغییرات از State Example 3 - Changes from State

• Gotchas with useEffect-ویدیو-3-5-نکات مهم در useEffect Gotchas with useEffect

• More Gotchas with useEffect-ویدیو-3-6-نکات مهم بیشتر در useEffect More Gotchas with useEffect

• And More Gotchas with useEffect-ویدیو-3-7-و نکات مهم باز هم بیشتر در useEffect And More Gotchas with useEffect

• Even More Gotchas with useEffect-ویدیو-3-8-حتی نکات مهم باز هم بیشتر در useEffect Even More Gotchas with useEffect

• Example 4 - Resizing Windows-ویدیو-3-9-مثال-4-تغییر اندازه پنجره‌ها Example 4 - Resizing Windows

• Example 5 - Polling API-ویدیو-3-10-مثال-5-نظرسنجی API Example 5 - Polling API

• Example 6 - Sync Local Storage-ویدیو-3-11-مثال-6-همگام‌سازی حافظه محلی Example 6 - Sync Local Storage

• Example 7 - Fetch Data on Prop Change-ویدیو-3-12-مثال-7-واکشی داده‌ها در تغییر Prop Example 7 - Fetch Data on Prop Change

• Example 8 - Conditions in useEffect-ویدیو-3-13-مثال-8-شرایط در useEffect Example 8 - Conditions in useEffect

• Example 9 - User Profile-ویدیو-3-14-مثال-9-پروفایل کاربر Example 9 - User Profile

• Example 10 - Conditional UseEffect-ویدیو-3-15-مثال-10-UseEffect شرطی Example 10 - Conditional UseEffect

• Example 11 - Pagination-ویدیو-3-16-مثال-11-صفحه بندی Example 11 - Pagination

• TEST YOUR KNOWLEDGE - useEffect Hook-ویدیو-3-17-دانش خود را بیازمایید-هوک useEffect TEST YOUR KNOWLEDGE - useEffect Hook

useContext Hook-فصل-4-هوک useContext useContext Hook

• What is Prop Drilling?-ویدیو-4-1-Prop Drilling چیست؟ What is Prop Drilling?

• Example 1 - useContext Hook Intro-ویدیو-4-2-مثال-1-معرفی هوک useContext Example 1 - useContext Hook Intro

• Example 2 - Theming with useContext-ویدیو-4-3-مثال-2-تم‌بندی با useContext Example 2 - Theming with useContext

• Example 3 - User Auth Profile-ویدیو-4-4-مثال-3-پروفایل احراز هویت کاربر Example 3 - User Auth Profile

• Example 4 - Language Selection - with Challenge-ویدیو-4-5-مثال-4-انتخاب زبان-با چالش Example 4 - Language Selection - with Challenge

• Language Selection Part 2 - Solution-ویدیو-4-6-انتخاب زبان قسمت 2-راه حل Language Selection Part 2 - Solution

• Example 5 - Shopping Cart Example-ویدیو-4-7-مثال-5-مثال سبد خرید Example 5 - Shopping Cart Example

• Example 6 - Nested Contexts Together - Login User Authentication-ویدیو-4-8-مثال-6-Contextهای تو در تو با هم-احراز هویت ورود کاربر Example 6 - Nested Contexts Together - Login User Authentication

useReducer Hook-فصل-5-هوک useReducer useReducer Hook

• Example 1 - ToDoList with useReducer-ویدیو-5-1-مثال-1-لیست انجام کارها با useReducer Example 1 - ToDoList with useReducer

• Example 2 - Shopping Cart with useReducer-ویدیو-5-2-مثال-2-سبد خرید با useReducer Example 2 - Shopping Cart with useReducer

• Example 3 - Login Form Submission-ویدیو-5-3-مثال-3-ارسال فرم ورود Example 3 - Login Form Submission

• Example 4 - Theme Toggle-ویدیو-5-4-مثال-4-تغییر تم Example 4 - Theme Toggle

• Example 5 - Simple Bank Account-ویدیو-5-5-مثال-5-حساب بانکی ساده Example 5 - Simple Bank Account

• Example 6 - Accordion-ویدیو-5-6-مثال-6-آکاردئون Example 6 - Accordion

• Example 7 - Step Wizard-ویدیو-5-7-مثال-7-جادوگر مرحله ای Example 7 - Step Wizard

useRef Hook-فصل-6-هوک useRef useRef Hook

• Intro to useRef Hook - Example 1 - Manipulate DOM Element-ویدیو-6-1-معرفی هوک useRef-مثال-1-دستکاری عنصر DOM Intro to useRef Hook - Example 1 - Manipulate DOM Element

• Example 2 - Timer with useRef Hook-ویدیو-6-2-مثال-2-تایمر با هوک useRef Example 2 - Timer with useRef Hook

• Example 3 - Tracking Previous State-ویدیو-6-3-مثال-3-پیگیری وضعیت قبلی Example 3 - Tracking Previous State

• Example 4 - Counting number of Renders-ویدیو-6-4-مثال-4-شمارش تعداد رندرها Example 4 - Counting number of Renders

• Example 5 - Simple Animation-ویدیو-6-5-مثال-5-انیمیشن ساده Example 5 - Simple Animation

• Example 6 - Debouncing InputBoxes-ویدیو-6-6-مثال-6-Debouncing جعبه‌های ورودی Example 6 - Debouncing InputBoxes

• Example 7 - Combining useRef with useEffect-ویدیو-6-7-مثال-7-ترکیب useRef با useEffect Example 7 - Combining useRef with useEffect

• Example 8 - Scroll Element into View-ویدیو-6-8-مثال-8-اسکرول عنصر به داخل دید Example 8 - Scroll Element into View

• Example 9 - useRef with 3rd party library-ویدیو-6-9-مثال-9-useRef با کتابخانه شخص ثالث Example 9 - useRef with 3rd party library

useMemo Hook and React.memo-فصل-7-هوک useMemo و React.memo useMemo Hook and React.memo

• Example 1 - Intro to useMemo Hook, memoizing a function-ویدیو-7-1-مثال-1-معرفی هوک useMemo-memoize کردن یک تابع Example 1 - Intro to useMemo Hook, memoizing a function

• Example 2 - Filtering a list of items-ویدیو-7-2-مثال-2-فیلتر کردن لیست آیتم‌ها Example 2 - Filtering a list of items

• Example 3 - Aggregate Function-ویدیو-7-3-مثال-3-تابع تجمعی Example 3 - Aggregate Function

• Example 4 - Memoizing Style Objects-ویدیو-7-4-مثال-4-Memoize کردن اشیاء Style Example 4 - Memoizing Style Objects

• Example 5 - Memoizing API Call-ویدیو-7-5-مثال-5-Memoize کردن فراخوانی API Example 5 - Memoizing API Call

• Example 6 - Avoiding Unnecessary Re-Renders-ویدیو-7-6-مثال-6-جلوگیری از رندرهای غیرضروری Example 6 - Avoiding Unnecessary Re-Renders

useCallback Hook-فصل-8-هوک useCallback useCallback Hook

• Example 1 - Intro to useCallback Hook - Memoizing a function-ویدیو-8-1-مثال-1-معرفی هوک useCallback-Memoize کردن یک تابع Example 1 - Intro to useCallback Hook - Memoizing a function

• Example 2: Stable Event Listener Function-ویدیو-8-2-مثال-2-تابع شنونده رویداد پایدار Example 2: Stable Event Listener Function

• Example 3: Memoized Function for Computational Logic-ویدیو-8-3-مثال-3-تابع Memoized برای منطق محاسباتی Example 3: Memoized Function for Computational Logic

• Example 4 - Interaction Between Functions-ویدیو-8-4-مثال-4-تعامل بین توابع Example 4 - Interaction Between Functions

• Example 5: Preventing Child Component Re-renders-ویدیو-8-5-مثال-5-جلوگیری از رندرهای مجدد کامپوننت فرزند Example 5: Preventing Child Component Re-renders

• Example 6: Parent-Child Data Passing with useCallback-ویدیو-8-6-مثال-6-انتقال داده والد-فرزند با useCallback Example 6: Parent-Child Data Passing with useCallback

• Example 7 - Difference between useMemo and useCallback-ویدیو-8-7-مثال-7-تفاوت بین useMemo و useCallback Example 7 - Difference between useMemo and useCallback

• Example 8 - Using useCallback and useMemo together-ویدیو-8-8-مثال-8-استفاده از useCallback و useMemo با هم Example 8 - Using useCallback and useMemo together

useImperativeHandle-فصل-9-useImperativeHandle useImperativeHandle

• Example 1 - Toggle Visibility of Child from Parent-ویدیو-9-1-مثال-1-تغییر دید فرزند از والد Example 1 - Toggle Visibility of Child from Parent

• Example 2 - Calling Child Methods from Parent-ویدیو-9-2-مثال-2-فراخوانی متدهای فرزند از والد Example 2 - Calling Child Methods from Parent

• Example 3 - Scroll to Element-ویدیو-9-3-مثال-3-اسکرول به عنصر Example 3 - Scroll to Element

useLayoutEffect-فصل-10-useLayoutEffect useLayoutEffect

• Example 1 - Avoiding Visual Jumps-ویدیو-10-1-مثال-1-جلوگیری از پرش‌های بصری Example 1 - Avoiding Visual Jumps

• Example 2 - Measuring Divs-ویدیو-10-2-مثال-2-اندازه گیری Div ها Example 2 - Measuring Divs

• Example 3 - Synchronised Scrolling-ویدیو-10-3-مثال-3-اسکرول همزمان Example 3 - Synchronised Scrolling

• Example 4 - Implementing Tooltips-ویدیو-10-4-مثال-4-پیاده سازی Tooltip ها Example 4 - Implementing Tooltips

• Example 5 - Sync Animation State-ویدیو-10-5-مثال-5-همگام سازی وضعیت انیمیشن Example 5 - Sync Animation State

REACT 18 - useID Hook-فصل-11-REACT 18-هوک useID REACT 18 - useID Hook

• Example 1 - useID with Form-ویدیو-11-1-مثال-1-useID با فرم Example 1 - useID with Form

• Example 2- useID with Composite Key-ویدیو-11-2-مثال-2-useID با کلید ترکیبی Example 2- useID with Composite Key

• Example 3 - useID uniqueness-ویدیو-11-3-مثال-3-منحصر به فرد بودن useID Example 3 - useID uniqueness

• Example 4 - useID for Aria attributes-ویدیو-11-4-مثال-4-useID برای ویژگی های Aria Example 4 - useID for Aria attributes

REACT 18 - useTransition Hook-فصل-12-REACT 18-هوک useTransition REACT 18 - useTransition Hook

• Example 1 - Loading Progress with useTransition-ویدیو-12-1-مثال-1-نمایش پیشرفت بارگذاری با useTransition Example 1 - Loading Progress with useTransition

• Example 2 - Conditional Delayed Rendering-ویدیو-12-2-مثال-2-رندر شرطی با تاخیر Example 2 - Conditional Delayed Rendering

• Example 3 - Conditional Rending with Lists-ویدیو-12-3-مثال-3-رندر شرطی با لیست‌ها Example 3 - Conditional Rending with Lists

REACT 18 - useDeferredValue Hook-فصل-13-REACT 18-هوک useDeferredValue REACT 18 - useDeferredValue Hook

• Example 1 - Debounced Input-ویدیو-13-1-مثال-1-ورودی Debounced Example 1 - Debounced Input

• Example 2 - Image Gallery-ویدیو-13-2-مثال-2-گالری تصاویر Example 2 - Image Gallery

• Example 3 - Deferring Long Lists-ویدیو-13-3-مثال-3-به تعویق انداختن لیست های طولانی Example 3 - Deferring Long Lists

• Example 4 - Expensive Calculations-ویدیو-13-4-مثال-4-محاسبات سنگین Example 4 - Expensive Calculations

• Example 5 - Filtering Lists with Expensive Calculations-ویدیو-13-5-مثال-5-فیلتر کردن لیست ها با محاسبات سنگین Example 5 - Filtering Lists with Expensive Calculations

REACT 18 - useSyncExternalStore Hook-فصل-14-REACT 18-هوک useSyncExternalStore REACT 18 - useSyncExternalStore Hook

• Example 1 - Subscription with external stores-ویدیو-14-1-مثال-1-اشتراک با فروشگاه های خارجی Example 1 - Subscription with external stores

REACT 18 - useInsertionEffect Hook-فصل-15-REACT 18-هوک useInsertionEffect REACT 18 - useInsertionEffect Hook

• Example 1 - CSS with JS-ویدیو-15-1-مثال-1-CSS با JS Example 1 - CSS with JS

• Example 2 - useInsertionEffect for Smooth Animation-ویدیو-15-2-مثال-2-useInsertionEffect برای انیمیشن روان Example 2 - useInsertionEffect for Smooth Animation

• Example 3 - Theme Switcher-ویدیو-15-3-مثال-3-تغییر دهنده تم Example 3 - Theme Switcher

• Example 4 - Dynamic Fonts-ویدیو-15-4-مثال-4-فونت های پویا Example 4 - Dynamic Fonts

• Example 5 - Dynamic CSS Transitions-ویدیو-15-5-مثال-5-انتقال های CSS پویا Example 5 - Dynamic CSS Transitions

• Example 6 - Critical Styles-ویدیو-15-6-مثال-6-استایل های حیاتی Example 6 - Critical Styles

REACT 19 Hooks-فصل-16-هوک های REACT 19 REACT 19 Hooks

• Example 1 - useActionState - Simple Form-ویدیو-16-1-مثال-1-useActionState-فرم ساده Example 1 - useActionState - Simple Form

• Example 2 - useFormStatus - Simple Form-ویدیو-16-2-مثال-2-useFormStatus-فرم ساده Example 2 - useFormStatus - Simple Form

• Example 3 - useFormStatus - Validation of Form-ویدیو-16-3-مثال-3-useFormStatus-اعتبارسنجی فرم Example 3 - useFormStatus - Validation of Form

Learn all about Custom Hooks in React-فصل-17-همه چیز درباره هوک های سفارشی در React بیاموزید Learn all about Custom Hooks in React

• Build a simple custom hook-ویدیو-17-1-ساخت یک هوک سفارشی ساده Build a simple custom hook

• Build a custom useFetch hook-ویدیو-17-2-ساخت یک هوک سفارشی useFetch Build a custom useFetch hook

• Custom Hook for Data Fetching-ویدیو-17-3-هوک سفارشی برای واکشی داده Custom Hook for Data Fetching

• Custom Hook with Axios for Data Fetching-ویدیو-17-4-هوک سفارشی با Axios برای واکشی داده Custom Hook with Axios for Data Fetching

• Custom Hook with Axios POST Request-ویدیو-17-5-هوک سفارشی با درخواست POST در Axios Custom Hook with Axios POST Request

• Custom Hook with Axios with Optimistic POST-ویدیو-17-6-هوک سفارشی با Axios و POST خوش‌بینانه Custom Hook with Axios with Optimistic POST

• Custom Hook with Axios with Optimistic PUT and DELETE-ویدیو-17-7-هوک سفارشی با Axios و PUT و DELETE خوش‌بینانه Custom Hook with Axios with Optimistic PUT and DELETE

• Custom Hook with Axios and USEOPTIMISTIC React 19 Hook for Updates-ویدیو-17-8-هوک سفارشی با Axios و USEOPTIMISTIC React 19 Hook برای بروزرسانی‌ها Custom Hook with Axios and USEOPTIMISTIC React 19 Hook for Updates

• Customer Hook with Axios USEOPTIMISTIC Demonstration-ویدیو-17-9-نمایش هوک سفارشی با Axios USEOPTIMISTIC Customer Hook with Axios USEOPTIMISTIC Demonstration

• Customer Hook with Axios USEOPTIMISTIC with SetTransition-ویدیو-17-10-هوک سفارشی با Axios USEOPTIMISTIC با SetTransition Customer Hook with Axios USEOPTIMISTIC with SetTransition

• Custom Hook with Axios Await/Async Pattern-ویدیو-17-11-هوک سفارشی با الگوی Await/Async در Axios Custom Hook with Axios Await/Async Pattern

• Creating a useForm hook for Controlled Components-ویدیو-17-12-ایجاد هوک useForm برای کامپوننت‌های کنترل‌شده Creating a useForm hook for Controlled Components

• Custom Hook for Debouncing an Input-ویدیو-17-13-هوک سفارشی برای Debouncing ورودی Custom Hook for Debouncing an Input

• Combining Custom Hooks - Hook Composition-ویدیو-17-14-ترکیب هوک های سفارشی-ترکیب هوک Combining Custom Hooks - Hook Composition

• Custom Hook for RealTime WebSocket Events-ویدیو-17-15-هوک سفارشی برای رویدادهای WebSocket بلادرنگ Custom Hook for RealTime WebSocket Events

• Custom Hook to Sync Local Storage-ویدیو-17-16-هوک سفارشی برای همگام‌سازی حافظه محلی Custom Hook to Sync Local Storage

• Custom Hook Factory-ویدیو-17-17-کارخانه هوک سفارشی Custom Hook Factory

• Custom Hook for Capturing Key Presses-ویدیو-17-18-هوک سفارشی برای گرفتن فشار کلیدها Custom Hook for Capturing Key Presses

• User Authentication Custom Hook with Finite State Pattern-ویدیو-17-19-هوک سفارشی احراز هویت کاربر با الگوی Finite State User Authentication Custom Hook with Finite State Pattern