آموزش React و اکوسیستم آن - راهنمای کامل مبتدیان

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

React Fundamentals React Fundamentals

• معرفی Introduction

• سلام دنیا Hello World

• ساختار پوشه Folder Structure

• اجزاء Components

• اجزای تابع Function Components

• اجزای کلاس Class Components

• به روز رسانی قلاب ها Hooks update

• JSX JSX

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

• حالت State

• setState setState

• ویرانگری تجهیزات و دولت Destructuring Props and State

• مدیریت رویداد Event Handling

• Binding Event Handlers Binding Event Handlers

• روش ها به عنوان ابزار Methods as Props

• رندر مشروط Conditional Rendering

• ارائه فهرست List Rendering

• لیست ها و کلیدها Lists and Keys

• شاخص به عنوان ضد الگوی کلیدی Index as Key Anti-pattern

• استایل و مبانی CSS Styling and CSS Basics

• مبانی مدیریت فرم Basics of Form Handling

• روش‌های چرخه حیات جزء Component Lifecycle Methods

• روش‌های چرخه عمر نصب قطعات Component Mounting Lifecycle Methods

• روش‌های چرخه حیات به‌روزرسانی مؤلفه Component Updating Lifecycle Methods

• منابع Resources

به موضوعات پیشرفته واکنش نشان دهید React Advanced Topics

• قطعات Fragments

• اجزای خالص Pure Components

• یادداشت memo

• مراجع Refs

• Refs با اجزای کلاس Refs with Class Components

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

• پورتال ها Portals

• مرز خطا Error Boundary

• اجزای مرتبه بالاتر - قسمت 1 Higher Order Components - Part 1

• اجزای مرتبه بالاتر - قسمت 2 Higher Order Components - Part 2

• اجزای مرتبه بالاتر - قسمت 3 Higher Order Components - Part 3

• Render Props - قسمت 1 Render Props - Part 1

• Render Props - قسمت 2 Render Props - Part 2

• زمینه - قسمت 1 Context - Part 1

• زمینه - قسمت 2 Context - Part 2

• زمینه - قسمت 3 Context - Part 3

• HTTP HTTP

• درخواست HTTP GET HTTP GET Request

• درخواست HTTP POST HTTP POST Request

React Hooks React Hooks

• معرفی Introduction

• استفاده از حالت هوک useState Hook

• useState با حالت قبلی useState with Previous State

• useState با Object useState with Object

• useState با آرایه useState with Array

• useEffect Hook useEffect Hook

• استفاده از افکت بعد از رندر useEffect after Render

• جلوه‌های اجرای مشروط Conditionally Run Effects

• اجرای افکت ها فقط یک بار Run Effects Only Once

• useEffect با پاکسازی useEffect with Cleanup

• useEffect با وابستگی نادرست useEffect with Incorrect Dependency

• واکشی داده ها با useEffect - قسمت 1 Fetching Data with useEffect - Part 1

• واکشی داده ها با useEffect - قسمت 2 Fetching Data with useEffect - Part 2

• واکشی داده ها با useEffect - قسمت 3 Fetching Data with useEffect - Part 3

• useContext Hook - قسمت 1 useContext Hook - Part 1

• useContext Hook - قسمت 2 useContext Hook - Part 2

• useContext Hook - قسمت 3 useContext Hook - Part 3

• استفاده از Reducer Hook useReducer Hook

• useReducer (Simple State & Action) useReducer (Simple State & Action)

• useReducer (وضعیت پیچیده و عمل) useReducer (Complex State & Action)

• Reducers چند منظوره Multiple useReducers

• useReducer با useContext useReducer with useContext

• واکشی داده ها با useReducer - قسمت 1 Fetching Data with useReducer - Part 1

• واکشی داده ها با useReducer - قسمت 2 Fetching Data with useReducer - Part 2

• useState در مقابل useReducer useState vs useReducer

• استفاده از قلاب برگشت تماس useCallback Hook

• استفاده از Memo Hook useMemo Hook

• useRef Hook - قسمت 1 useRef Hook - Part 1

• useRef Hook - قسمت 2 useRef Hook - Part 2

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

• useDocumentTitle قلاب سفارشی useDocumentTitle Custom Hook

• useCounter قلاب سفارشی useCounter Custom Hook

• useInput Custom Hook useInput Custom Hook

• منابع Resources

React و Redux React and Redux

• معرفی Introduction

• شروع شدن Getting Started

• سه مفهوم اصلی Three Core Concepts

• سه اصل Three Principles

• اقدامات Actions

• کاهنده ها Reducers

• فروشگاه Store

• کیک و بستنی Cakes and Ice Creams

• کاهنده های چندگانه Multiple Reducers

• کاهنده ها را ترکیب کنید Combine Reducers

• میان افزار Middleware

• اقدامات همگام Async Actions

• Redux Thunk Middleware Redux Thunk Middleware

• React Redux Setup React Redux Setup

• اقدامات Actions

• کاهنده ها Reducers

• فروشگاه Store

• متصل شود connect

• واکنش Redux با هوک React Redux with Hooks

• استفاده از انتخابگر هوک useSelector Hook

• از Dispatch Hook استفاده کنید useDispatch Hook

• کیک و بستنی Cakes and Ice Creams

• Logger Middleware Logger Middleware

• برنامه افزودنی Redux Devtool Redux Devtool Extension

• Action Payload Action Payload

• mapStateToProps mapStateToProps

• mapDispatchToProps mapDispatchToProps

• اقدامات همگام Async Actions

• درخواست Redux Thunk GET Redux Thunk GET Request

• منابع Resources

واکنش عملی Practical React

• معرفی Introduction

• نمادها Icons

• اعلان های نان تست Toast Notifications

• معین Modal

• راهنمای ابزار Tooltip

• CountUp CountUp

• تایمر بیکار Idle Timer

• انتخاب کننده رنگ Color Picker

• کارت های اعتباری Credit Cards

• انتخابگر تاریخ Date Picker

• عرشه های ارائه Presentation Decks

• دستگاه پخش ویدئو Video Player

• نشانگرهای بارگذاری Loading Indicators

• نمودار Charts

واکنش فرمیک React Formik

• معرفی Introduction

• فرم ساده Simple Form

• از فورمیک هوک استفاده کنید useFormik Hook

• مدیریت حالت فرم Managing Form State

• رسیدگی به ارسال فرم Handling Form Submission

• اعتبار سنجی فرم Form Validation

• تابع اعتبارسنجی Validation Function

• نمایش پیام های خطا Displaying Error Messages

• فیلدهای بازدید شده Visited Fields

• بهبود اعتبارسنجی UX Improving Validation UX

• اعتبار سنجی طرحواره با Yup Schema Validation with Yup

• کاهش دیگ بخار Reducing Boilerplate

• کامپوننت فورمیک Formik Component

• جزء فرم Form Component

• جزء فیلد Field Component

• مؤلفه پیام خطا ErrorMessage Component

• سفر تا کنون Journey So Far

• فیلد بازبینی شد Field Revisited

• ErrorMessage Revisited ErrorMessage Revisited

• اشیاء تو در تو Nested Objects

• آرایه ها Arrays

• کامپوننت FieldArray FieldArray Component

• کامپوننت FastField FastField Component

• اعتبارسنجی چه زمانی اجرا می شود؟ When does Validation Run?

• اعتبار سنجی سطح فیلد Field Level Validation

• احراز هویت دستی Manually Trigerring Validation

• غیرفعال کردن ارسال - قسمت 1 Disabling Submit - Part 1

• غیرفعال کردن ارسال - قسمت 2 Disabling Submit - Part 2

• بارگیری داده های ذخیره شده Load Saved Data

• بازنشانی داده های فرم Reset Form Data

• ساخت کنترل‌های فورمیک قابل استفاده مجدد Building Reusable Formik Controls

• کامپوننت FormikControl FormikControl Component

• ورودی Input

• Textarea Textarea

• انتخاب کنید Select

• دکمه های رادیویی Radio Buttons

• گروه چک باکس Checkbox Group

• انتخابگر تاریخ Date Picker

• فرم ورود Login Form

• فرم ثبت نام Registration Form

• فرم ثبت نام دوره Course Enrollment Form

• سیم‌کشی کتابخانه UI Wiring up a UI Library

• ورودی چاکرا ChakraInput

• بسته بندی Wrapping Up

• منابع Resources

React Render and Optimization React Render and Optimization

• معرفی Introduction

• تفسیر Rendering

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

• استفاده از کاهش دهنده useReducer

• تغییرناپذیری حالت State Immutability

• پدر و مادر و فرزند Parent and Child

• مرجع همان عنصر Same Element Reference

• یادداشت واکنش نشان دهید React memo

• سوالات بهینه سازی Questions on Optimziation

• یادداشت نادرست با کودکان Incorrect memo with children

• یادداشت نادرست با Impure Component Incorrect memo with Impure Component

• یادداشت نادرست با props مرجع Incorrect memo with props Reference

• useMemo و useCallback useMemo and useCallback

• متن نوشته Context

• زمینه و یادداشت Conext and memo

• مرجع متن و همان عنصر Context and Same Element Reference

• منابع Resources