آموزش React - راهنمای کامل (از جمله Hooks، React Router، Redux)

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

شروع شدن Getting Started

• به دوره خوش آمدید! Welcome To The Course!

• React.js چیست؟ What is React.js?

• چرا به جای "فقط جاوا اسکریپت" واکنش نشان دهیم؟ Why React Instead Of "Just JavaScript"?

• ساخت اپلیکیشن های تک صفحه ای (SPA) با React Building Single-Page Applications (SPAs) with React

• کاوش جایگزین های React.js (Angular/Vue) Exploring React.js Alternatives (Angular / Vue)

• به انجمن آموزش آنلاین ما بپیوندید Join our Online Learning Community

• درباره این دوره و طرح کلی دوره About This Course & Course Outline

• دو راه (مسیر) گذراندن این دوره The Two Ways (Paths) Of Taking This Course

• بیشترین بهره را از این دوره ببرید Getting The Most Out Of This Course

• راه‌اندازی محیط برنامه‌نویس دوره (ویرایشگر کد) Setting Up The Course Dev Environment (Code Editor)

بازخوانی جاوا اسکریپت JavaScript Refresher

• معرفی ماژول Module Introduction

• درک "لذا" و "تقویت" Understanding "let" and "const"

• توابع پیکان Arrow Functions

• صادرات و واردات Exports and Imports

• درک کلاس ها Understanding Classes

• کلاس ها، ویژگی ها و روش ها Classes, Properties and Methods

• اپراتور Spread & Rest The Spread & Rest Operator

• در حال تخریب Destructuring

• Refresher انواع مرجع و اولیه Reference and Primitive Types Refresher

• روش‌های تازه‌سازی آرایه Refreshing Array Methods

• تمرین: روش های آرایه Exercise: Array Methods

• بسته شدن Wrap Up

• جاوا اسکریپت نسل بعدی - خلاصه Next-Gen JavaScript - Summary

• توابع آرایه JS JS Array Functions

React Basics و کار با کامپوننت ها React Basics & Working With Components

• معرفی ماژول Module Introduction

• کامپوننت ها چیست؟ و چرا React همه چیز درباره آنهاست؟ What Are Components? And Why Is React All About Them?

• React Code به صورت "اعلامی" نوشته شده است! React Code Is Written In A "Declarative Way"!

• ایجاد یک React Project جدید Creating a new React Project

• پروژه شروع The Starting Project

• تجزیه و تحلیل یک پروژه استاندارد React Analyzing a Standard React Project

• معرفی JSX Introducing JSX

• واکنش چگونه کار می کند How React Works

• تمرین: کار با کد JSX Exercise: Working with JSX Code

• ساخت اولین کامپوننت سفارشی Building a First Custom Component

• تمرین: ساختن اولین جزء Exercise: Building a First Component

• نوشتن کد JSX پیچیده تر Writing More Complex JSX Code

• اضافه کردن یک استایل پایه CSS Adding Basic CSS Styling

• خروجی داده های پویا و کار با عبارات در JSX Outputting Dynamic Data & Working with Expressions in JSX

• انتقال داده از طریق "props" Passing Data via "props"

• تمرین: انتقال داده از طریق "props" Exercise: Passing Data via "props"

• اضافه کردن منطق جاوا اسکریپت "عادی" به کامپوننت ها Adding "normal" JavaScript Logic to Components

• تقسیم کامپوننت ها به اجزای متعدد Splitting Components Into Multiple Components

• زمان تمرین: اصول واکنش و مؤلفه Time to Practice: React & Component Basics

• مفهوم "ترکیب" ("لوازم کودک") The Concept of "Composition" ("children props")

• اولین خلاصه A First Summary

• نگاهی دقیق تر به JSX A Closer Look At JSX

• سازماندهی فایل های کامپوننت Organizing Component Files

• نحو تابع جایگزین An Alternative Function Syntax

• بررسی یادگیری: React Basics، Components، Props و JSX Learning Check: React Basics, Components, Props & JSX

• منابع ماژول Module Resources

React State و کار با رویدادها React State & Working with Events

• معرفی ماژول Module Introduction

• گوش دادن به رویدادها و کار با مدیران رویداد Listening to Events & Working with Event Handlers

• تمرین: گوش دادن به رویدادها Exercise: Listening to Events

• نحوه اجرای توابع کامپوننت How Component Functions Are Executed

• کار با "دولت" Working with "State"

• تمرین: کار با "دولت" Exercise: Working with "State"

• نگاهی دقیق تر به قلاب "useState". A Closer Look at the "useState" Hook

• State را می توان به طرق مختلف به روز کرد! State can be updated in many ways!

• افزودن ورودی های فرم Adding Form Inputs

• گوش دادن به ورودی کاربر Listening to User Input

• کار با چندین ایالت Working with Multiple States

• استفاده از یک حالت به جای آن (و چه بهتر) Using One State Instead (And What's Better)

• به روز رسانی حالتی که به حالت قبلی بستگی دارد Updating State That Depends On The Previous State

• تمرین: استفاده از حالت با ورودی های فرم Exercise: Using State with Form Inputs

• تمرین: به روز رسانی وضعیت بر اساس وضعیت قدیمی تر Exercise: Updating State Based On Older State

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

• افزودن اتصال دو طرفه Adding Two-Way Binding

• ارتباط مؤلفه کودک با والدین (از پایین به بالا) Child-to-Parent Component Communication (Bottom-up)

• بالا بردن دولت Lifting The State Up

• زمان تمرین: کار با رویدادها و وضعیت ها Time to Practice: Working with Events & State

• مولفه های کنترل شده در مقابل مولفه های کنترل نشده و مولفه های بدون تابعیت در مقابل مولفه های دارای وضعیت Controlled vs Uncontrolled Components & Stateless vs Stateful Components

• بررسی یادگیری: کار با رویدادها و وضعیت Learning Check: Working with Events & State

• منابع ماژول Module Resources

فهرست‌های رندر و محتوای مشروط Rendering Lists & Conditional Content

• معرفی ماژول Module Introduction

• ارائه لیست داده ها Rendering Lists of Data

• تمرین: ارائه لیست داده ها Exercise: Rendering Lists of Data

• استفاده از لیست های Stateful Using Stateful Lists

• درک "کلیدها" Understanding "Keys"

• زمان تمرین: کار با لیست ها Time to Practice: Working with Lists

• خروجی محتوای مشروط Outputting Conditional Content

• تمرین: خروجی محتوای مشروط Exercise: Outputting Conditional Content

• افزودن بیانیه های بازگشت مشروط Adding Conditional Return Statements

• زمان تمرین: محتوای مشروط Time to Practice: Conditional Content

• برنامه آزمایشی: اضافه کردن نمودار Demo App: Adding a Chart

• اضافه کردن سبک های پویا Adding Dynamic Styles

• جمع بندی و مراحل بعدی Wrap Up & Next Steps

• رفع یک اشکال کوچک Fixing a Small Bug

• بررسی یادگیری: خروجی لیست ها و محتوای مشروط Learning Check: Outputting Lists & Conditional Content

• منابع ماژول Module Resources

Styling React Components Styling React Components

• معرفی ماژول Module Introduction

• تنظیم سبک های درون خطی پویا Setting Dynamic Inline Styles

• تمرین: سبک های پویا Exercise: Dynamic Styles

• تنظیم کلاس های CSS به صورت پویا Setting CSS Classes Dynamically

• تمرین: کلاس های پویا CSS Exercise: Dynamic CSS Classes

• معرفی Styled Components Introducing Styled Components

• اجزای سبک و لوازم دینامیک Styled Components & Dynamic Props

• کامپوننت های سبک و پرسش های رسانه ای Styled Components & Media Queries

• استفاده از ماژول های CSS Using CSS Modules

• سبک های پویا با ماژول های CSS Dynamic Styles with CSS Modules

• منابع ماژول Module Resources

اشکال زدایی React Apps Debugging React Apps

• معرفی ماژول Module Introduction

• درک پیام های خطای React Understanding React Error Messages

• تمرین: رفع خطاها Exercise: Fix Errors

• تجزیه و تحلیل جریان کد و هشدارها Analyzing Code Flow & Warnings

• کار با Breakpoints Working with Breakpoints

• با استفاده از React DevTools Using the React DevTools

• منابع ماژول Module Resources

زمان برای تمرین: یک پروژه تمرین کامل Time to Practice: A Complete Practice Project

• معرفی ماژول Module Introduction

• افزودن کامپوننت "کاربر". Adding a "User" Component

• افزودن یک جزء "کارت" قابل استفاده مجدد Adding a re-usable "Card" Component

• افزودن یک جزء "دکمه" قابل استفاده مجدد Adding a re-usable "Button" Component

• مدیریت وضعیت ورودی کاربر Managing the User Input State

• اضافه کردن اعتبارسنجی و بازنشانی منطق Adding Validation & Resetting Logic

• اضافه کردن یک جزء لیست کاربران Adding a Users List Component

• مدیریت فهرست کاربران از طریق State Managing a List Of Users via State

• افزودن مؤلفه «ErrorModal». Adding The "ErrorModal" Component

• مدیریت وضعیت خطا Managing the Error State

• منابع ماژول Module Resources

غواصی عمیق تر: کار با قطعات، پورتال ها و "Refs" Diving Deeper: Working with Fragments, Portals & "Refs"

• معرفی ماژول Module Introduction

• محدودیت ها و راه حل های JSX JSX Limitations & Workarounds

• ایجاد یک کامپوننت Wrapper Creating a Wrapper Component

• React Fragments React Fragments

• معرفی React Portal Introducing React Portals

• کار با پورتال ها Working with Portals

• کار با "ref" ها Working with "ref"s

• اجزای کنترل شده در مقابل اجزای کنترل نشده Controlled vs Uncontrolled Components

• منابع ماژول Module Resources

پیشرفته: مدیریت عوارض جانبی، استفاده از کاهش دهنده ها و استفاده از Context API Advanced: Handling Side Effects, Using Reducers & Using the Context API

• معرفی ماژول Module Introduction

• "عوارض جانبی" و معرفی useEffect چیست What are "Side Effects" & Introducing useEffect

• با استفاده از قلاب useEffect(). Using the useEffect() Hook

• useEffect و Dependencies useEffect & Dependencies

• چه چیزهایی را باید اضافه کرد و به عنوان وابستگی اضافه نکرد What to add & Not to add as Dependencies

• با استفاده از عملکرد پاکسازی useEffect Using the useEffect Cleanup Function

• خلاصه useEffect useEffect Summary

• معرفی useReducer & Reducer به طور کلی Introducing useReducer & Reducers In General

• با استفاده از قلاب useReducer(). Using the useReducer() Hook

• useReducer و useEffect useReducer & useEffect

• افزودن ویژگی های تودرتو به عنوان وابستگی برای استفاده از افکت Adding Nested Properties As Dependencies To useEffect

• useReducer در مقابل useState برای مدیریت دولتی useReducer vs useState for State Management

• معرفی React Context (Context API) Introducing React Context (Context API)

• با استفاده از React Context API Using the React Context API

• با قلاب useContext روی Into Context ضربه بزنید Tapping Into Context with the useContext Hook

• ایجاد متن پویا Making Context Dynamic

• ساخت و استفاده از یک مؤلفه ارائه‌دهنده زمینه سفارشی Building & Using a Custom Context Provider Component

• React Context Limiteds React Context Limitations

• آموزش "قوانین قلاب" Learning the "Rules of Hooks"

• Refactoring یک جزء ورودی Refactoring an Input Component

• غواصی در "داوران جلو" Diving into "Forward Refs"

• منابع ماژول Module Resources

پروژه تمرین: ساخت اپلیکیشن سفارش غذا Practice Project: Building a Food Order App

• معرفی ماژول Module Introduction

• راه اندازی راه اندازی Starting Setup

• اضافه کردن کامپوننت "هدر". Adding a "Header" Component

• اضافه کردن مولفه دکمه "سبد خرید". Adding the "Cart" Button Component

• اضافه کردن یک جزء "غذاها". Adding a "Meals" Component

• افزودن اقلام غذایی فردی و نمایش آنها Adding Individual Meal Items & Displaying Them

• افزودن فرم Adding a Form

• رفع شناسه های ورودی فرم Fixing Form Input IDs

• کار بر روی مولفه "سبد خرید". Working on the "Shopping Cart" Component

• افزودن یک Modal از طریق پورتال React Adding a Modal via a React Portal

• مدیریت سبد خرید و حالت مدال Managing Cart & Modal State

• افزودن زمینه سبد خرید Adding a Cart Context

• با استفاده از زمینه Using the Context

• اضافه کردن یک کاهش دهنده سبد خرید Adding a Cart Reducer

• کار با Refs & Forward Refs Working with Refs & Forward Refs

• خروجی اقلام سبد خرید Outputting Cart Items

• کار بر روی یک منطق کاهش دهنده پیچیده تر Working on a More Complex Reducer Logic

• ساخت اقلام قابل جابجایی Making Items Removable

• با استفاده از useEffect Hook Using the useEffect Hook

• منابع ماژول Module Resources

نگاهی به پشت صحنه تکنیک‌های واکنش و بهینه‌سازی A Look Behind The Scenes Of React & Optimization Techniques

• معرفی ماژول Module Introduction

• چگونه واکنش واقعا کار می کند How React Really Works

• به روز رسانی کامپوننت در عمل Component Updates In Action

• نگاهی دقیق تر به ارزیابی مجدد اجزای کودک A Closer Look At Child Component Re-Evaluation

• جلوگیری از ارزیابی مجدد غیر ضروری با React.memo() Preventing Unnecessary Re-Evaluations with React.memo()

• جلوگیری از ایجاد مجدد تابع با useCallback() Preventing Function Re-Creation with useCallback()

• useCallback() و وابستگی های آن useCallback() and its Dependencies

• اولین خلاصه A First Summary

• نگاهی دقیق تر به وضعیت و اجزاء A Closer Look At State & Components

• درک زمانبندی و دسته بندی ایالت Understanding State Scheduling & Batching

• بهینه سازی با useMemo() Optimizing with useMemo()

• منابع ماژول Module Resources

روشی جایگزین برای ساخت اجزاء: اجزای کلاس محور An Alternative Way Of Building Components: Class-based Components

• معرفی ماژول Module Introduction

• چی چرا What & Why

• اضافه کردن یک جزء مبتنی بر کلاس اول Adding a First Class-based Component

• کار با State & Events Working with State & Events

• چرخه عمر مؤلفه (فقط مؤلفه های مبتنی بر کلاس!) The Component Lifecycle (Class-based Components Only!)

• روش های چرخه حیات در عمل Lifecycle Methods In Action

• مؤلفه‌ها و زمینه‌های مبتنی بر کلاس Class-based Components & Context

• مولفه های مبتنی بر کلاس در مقابل مولفه های عملکردی: خلاصه Class-based vs Functional Components: A Summary

• معرفی مرزهای خطا Introducing Error Boundaries

• منابع ماژول Module Resources

ارسال درخواست Http (به عنوان مثال اتصال به پایگاه داده) Sending Http Requests (e.g. Connecting to a Database)

• معرفی ماژول Module Introduction

• نحوه (نه) اتصال به یک پایگاه داده How To (Not) Connect To A Database

• با استفاده از Star Wars API Using the Star Wars API

• برنامه شروع ما و Backend Our Starting App & Backend

• ارسال درخواست GET Sending a GET Request

• استفاده از async/await Using async / await

• مدیریت وضعیت بارگیری و داده Handling Loading & Data States

• مدیریت خطاهای Http Handling Http Errors

• استفاده از useEffect() برای درخواست ها Using useEffect() For Requests

• آماده سازی پروژه برای مراحل بعدی Preparing The Project For The Next Steps

• ارسال درخواست POST Sending a POST Request

• بسته شدن Wrap Up

• منابع ماژول Module Resources

ساخت قلاب‌های واکنش سفارشی Building Custom React Hooks

• معرفی ماژول Module Introduction

• "قلاب های سفارشی" چیست؟ What are "Custom Hooks"?

• ایجاد یک تابع React Hook سفارشی Creating a Custom React Hook Function

• استفاده از قلاب های سفارشی Using Custom Hooks

• پیکربندی قلاب های سفارشی Configuring Custom Hooks

• به پیش به یک مثال واقعی تر Onwards To A More Realistic Example

• ساخت یک هوک Http سفارشی Building a Custom Http Hook

• با استفاده از هوک Http سفارشی Using the Custom Http Hook

• تنظیم منطق هوک سفارشی Adjusting the Custom Hook Logic

• استفاده از قلاب سفارشی در اجزای بیشتر Using The Custom Hook In More Components

• منابع ماژول Module Resources

کار با فرم ها و ورودی کاربر Working with Forms & User Input

• معرفی ماژول Module Introduction

• راه اندازی شروع ما Our Starting Setup

• چه چیزی در مورد فرم ها پیچیده است؟ What's So Complex About Forms?

• رسیدگی به ارسال فرم و دریافت مقادیر ورودی کاربر Dealing With Form Submission & Getting User Input Values

• افزودن اعتبارسنجی پایه Adding Basic Validation

• ارائه بازخورد اعتبارسنجی Providing Validation Feedback

• رسیدگی به حالت "لمس شد". Handling the "was touched" State

• واکنش به تمرکز از دست رفته React To Lost Focus

• احیاء و استخراج ایالات Refactoring & Deriving States

• مدیریت اعتبار فرم کلی Managing The Overall Form Validity

• زمان تمرین: فرم ها Time to Practice: Forms

• اضافه کردن یک قلاب ورودی سفارشی Adding A Custom Input Hook

• استفاده مجدد از قلاب سفارشی Re-Using The Custom Hook

• یک چالش برای شما! A Challenge For You!

• استفاده از قلاب و دانش ما در یک فرم جدید Applying Our Hook & Knowledge To A New Form

• خلاصه Summary

• امتیاز: استفاده از useReducer() Bonus: Using useReducer()

• منابع ماژول Module Resources

پروژه تمرین: اضافه کردن Http و فرم ها به برنامه سفارش غذا Practice Project: Adding Http & Forms To The Food Order App

• معرفی ماژول Module Introduction

• انتقال داده های "غذاهای غذایی" به باطن Moving "Meals" Data To The Backend

• واکشی وعده های غذایی از طریق Http Fetching Meals via Http

• رسیدگی به وضعیت بارگیری Handling the Loading State

• رسیدگی به خطاها Handling Errors

• افزودن فرم پرداخت Adding A Checkout Form

• خواندن مقادیر فرم Reading Form Values

• افزودن اعتبار سنجی فرم Adding Form Validation

• ارسال و ارسال اطلاعات سبد خرید Submitting & Sending Cart Data

• افزودن بازخورد بهتر کاربر Adding Better User Feedback

• خلاصه Summary

• منابع ماژول Module Resources

غواصی در Redux (یک جایگزین برای Context API) Diving into Redux (An Alternative To The Context API)

• معرفی ماژول Module Introduction

• نگاهی دیگر به وضعیت در React Apps Another Look At State In React Apps

• Redux vs React Context Redux vs React Context

• Redux چگونه کار می کند How Redux Works

• باید بخوانید: Redux createStore() منسوخ شده است MUST READ: Redux createStore() is (not) deprecated

• کاوش در مفاهیم اصلی Redux Exploring The Core Redux Concepts

• اصول اولیه Redux بیشتر More Redux Basics

• در حال آماده سازی یک پروژه جدید Preparing a new Project

• ایجاد یک فروشگاه Redux برای React Creating a Redux Store for React

• ارائه فروشگاه Providing the Store

• استفاده از Redux Data در React Components Using Redux Data in React Components

• ارسال اقدامات از داخل کامپوننت ها Dispatching Actions From Inside Components

• Redux با اجزای کلاس محور Redux with Class-based Components

• پیوست کردن Payloads به Actions Attaching Payloads to Actions

• کار با چندین ویژگی دولتی Working with Multiple State Properties

• نحوه کار با Redux State به درستی How To Work With Redux State Correctly

• چالش های Redux و معرفی Redux Toolkit Redux Challenges & Introducing Redux Toolkit

• افزودن برش های حالت Adding State Slices

• اتصال وضعیت Redux Toolkit Connecting Redux Toolkit State

• مهاجرت همه چیز به Redux Toolkit Migrating Everything To Redux Toolkit

• کار با چند برش Working with Multiple Slices

• خواندن و ارسال از یک برش جدید Reading & Dispatching From A New Slice

• تقسیم کد ما Splitting Our Code

• خلاصه Summary

• منابع ماژول Module Resources

Redux پیشرفته Advanced Redux

• معرفی ماژول Module Introduction

• Redux و عوارض جانبی (و کد ناهمزمان) Redux & Side Effects (and Asynchronous Code)

• تجدید/تمرین: قسمت 1/2 Refresher / Practice: Part 1/2

• تجدید/تمرین: قسمت 2/2 Refresher / Practice: Part 2/2

• کد Redux و Async Redux & Async Code

• کد فرانت اند در مقابل کد پشتیبان Frontend Code vs Backend Code

• کجا منطق خود را قرار دهیم Where To Put Our Logic

• استفاده از useEffect با Redux Using useEffect with Redux

• مشکل در useEffect() A Problem with useEffect()

• مدیریت وضعیت Http و بازخورد با Redux Handling Http States & Feedback with Redux

• استفاده از Action Creator Thunk Using an Action Creator Thunk

• شروع با واکشی داده ها Getting Started with Fetching Data

• نهایی کردن منطق واکشی Finalizing the Fetching Logic

• کاوش Redux DevTools Exploring the Redux DevTools

• خلاصه Summary

• منابع ماژول Module Resources

ساخت SPA چند صفحه ای با روتر React Building a Multi-Page SPA with React Router

• معرفی ماژول Module Introduction

• مسیریابی: چندین صفحه در برنامه های تک صفحه ای Routing: Multiple Pages in Single-Page Applications

• راه اندازی پروژه و نصب روتر React Project Setup & Installing React Router

• تعریف مسیرها Defining Routes

• افزودن مسیر دوم Adding a Second Route

• کاوش یک روش جایگزین برای تعریف مسیرها Exploring an Alternative Way of Defining Routes

• پیمایش بین صفحات دارای پیوند Navigating between Pages with Links

• طرح‌بندی‌ها و مسیرهای تودرتو Layouts & Nested Routes

• نمایش صفحات خطا با errorElement Showing Error Pages with errorElement

• کار با پیوندهای ناوبری (NavLink) Working with Navigation Links (NavLink)

• پیمایش به صورت برنامه ای Navigating Programmatically

• تعریف و استفاده از مسیرهای پویا Defining & Using Dynamic Routes

• افزودن لینک برای مسیرهای پویا Adding Links for Dynamic Routes

• درک مسیرهای نسبی و مطلق Understanding Relative & Absolute Paths

• کار با مسیرهای شاخص Working with Index Routes

• به بعد به یک راه اندازی پروژه جدید Onwards to a new Project Setup

• زمان تمرین: مشکل Time to Practice: Problem

• زمان تمرین: راه حل Time to Practice: Solution

• واکشی داده با لودر() Data Fetching with a loader()

• استفاده از داده از یک لودر در کامپوننت مسیر Using Data From A Loader In The Route Component

• بیشتر loader() استفاده از داده More loader() Data Usage

• کد loader() کجا باید ذخیره شود؟ Where Should loader() Code Be Stored?

• توابع loader() چه زمانی اجرا می شوند؟ When Are loader() Functions Executed?

• انعکاس وضعیت ناوبری فعلی در رابط کاربری Reflecting The Current Navigation State in the UI

• بازگرداندن پاسخ ها در لودر()ها Returning Responses in loader()s

• کدام نوع کد وارد لودر()ها می شود؟ Which Kind Of Code Goes Into loader()s?

• مدیریت خطا با خطاهای سفارشی Error Handling with Custom Errors

• استخراج داده های خطا و پرتاب پاسخ ها Extracting Error Data & Throwing Responses

• تابع json() Utility The json() Utility Function

• مسیرهای پویا و لودر()ها Dynamic Routes & loader()s

• قلاب useRouteLoaderData() و دسترسی به داده ها از مسیرهای دیگر The useRouteLoaderData() Hook & Accessing Data From Other Routes

• برنامه ریزی ارسال داده ها Planning Data Submission

• کار با توابع () action Working with action() Functions

• ارسال داده ها به صورت برنامه ای Submitting Data Programmatically

• به روز رسانی وضعیت رابط کاربری بر اساس وضعیت ارسال Updating the UI State Based on the Submission Status

• اعتبارسنجی ورودی و خروجی کاربر خطاهای اعتبارسنجی Validating User Input & Outputting Validation Errors

• استفاده مجدد از اقدامات از طریق روش‌های درخواست Reusing Actions via Request Methods

• پشت صحنه کار با useFetcher() Behind-the-Scenes Work with useFetcher()

• به تعویق انداختن واکشی داده با defer() Deferring Data Fetching with defer()

• کنترل اینکه کدام داده ها باید به تعویق بیفتند Controlling Which Data Should Be Deferred

• خلاصه ماژول Module Summary

• ارتقا از React Router v5 Upgrading from React Router v5

• منابع ماژول Module Resources

• سخنرانی های قدیمی Old Lectures

افزودن احراز هویت به برنامه های React Adding Authentication To React Apps

• معرفی ماژول Module Introduction

• احراز هویت چگونه کار می کند How Authentication Works

• راه اندازی پروژه و راه اندازی مسیر Project Setup & Route Setup

• کار با پارامترهای پرس و جو Working with Query Parameters

• اجرای Auth Action Implementing the Auth Action

• اعتبارسنجی ورودی و خروجی کاربر خطاهای اعتبارسنجی Validating User Input & Outputting Validation Errors

• افزودن ورود کاربر Adding User Login

• پیوست کردن توکن‌های تأیید اعتبار به درخواست‌های خروجی Attaching Auth Tokens to Outgoing Requests

• افزودن خروج کاربر Adding User Logout

• به روز رسانی UI بر اساس وضعیت Auth Updating the UI Based on Auth Status

• مهم: loader()ها باید null یا هر مقدار دیگری را برگردانند Important: loader()s must return null or any other value

• افزودن Route Protection Adding Route Protection

• اضافه کردن خروج خودکار Adding Automatic Logout

• مدیریت انقضای توکن Managing the Token Expiration

• منابع ماژول Module Resources

استقرار React Apps Deploying React Apps

• معرفی ماژول Module Introduction

• مراحل استقرار Deployment Steps

• درک بارگذاری تنبل Understanding Lazy Loading

• اضافه کردن Lazy Loading Adding Lazy Loading

• ایجاد کد برای تولید Building the Code For Production

• مثال استقرار Deployment Example

• مسیریابی سمت سرور و پیکربندی مورد نیاز Server-side Routing & Required Configuration

• منابع ماژول Module Resources

مقدمه (Pretty Deep Dive) Next.js A (Pretty Deep Dive) Introduction to Next.js

• معرفی ماژول Module Introduction

• NextJS چیست؟ What is NextJS?

• ویژگی کلیدی 1: رندر داخلی سمت سرور (سئو بهبود یافته!) Key Feature 1: Built-in Server-side Rendering (Improved SEO!)

• ویژگی کلیدی 2: مسیریابی ساده با مسیریابی مبتنی بر فایل Key Feature 2: Simplified Routing with File-based Routing

• ویژگی کلیدی 3: ساخت برنامه های Fullstack Key Feature 3: Build Fullstack Apps

• ایجاد یک پروژه و برنامه Next.js جدید Creating a New Next.js Project & App

• تجزیه و تحلیل پروژه ایجاد شده Analyzing the Created Project

• افزودن صفحات اول Adding First Pages

• افزودن مسیرها و صفحات تو در تو (مسیرهای تودرتو) Adding Nested Paths & Pages (Nested Routes)

• ایجاد صفحات پویا (با پارامترها) Creating Dynamic Pages (with Parameters)

• استخراج مقادیر پارامترهای پویا Extracting Dynamic Parameter Values

• پیوند بین صفحات Linking Between Pages

• پیش به سوی یک پروژه بزرگتر! Onwards to a bigger Project!

• آماده سازی صفحات پروژه Preparing the Project Pages

• خروجی لیستی از جلسات Outputting a List of Meetups

• افزودن فرم جدید Meetup Adding the New Meetup Form

• بسته بندی فایل و طرح بندی "_app.js". The "_app.js" File & Layout Wrapper

• استفاده از ناوبری برنامه ای (ضروری). Using Programmatic (Imperative) Navigation

• افزودن مولفه های سفارشی و ماژول های CSS Adding Custom Components & CSS Modules

• نحوه عملکرد پیش رندر و مشکلی که ما با آن روبرو هستیم How Pre-rendering Works & Which Problem We Face

• واکشی داده برای صفحات استاتیک Data Fetching for Static Pages

• اطلاعات بیشتر در مورد تولید سایت استاتیک (SSG) More on Static Site Generation (SSG)

• کاوش رندر سمت سرور (SSR) با "getServerSideProps" Exploring Server-side Rendering (SSR) with "getServerSideProps"

• کار با Params برای SSG Data Fetching Working with Params for SSG Data Fetching

• آماده سازی مسیرها با "getStaticPaths" و کار با صفحات بازگشتی Preparing Paths with "getStaticPaths" & Working With Fallback Pages

• معرفی مسیرهای API Introducing API Routes

• کار با MongoDB Working with MongoDB

• ارسال درخواست های Http به مسیرهای API ما Sending Http Requests To Our API Routes

• دریافت داده از پایگاه داده Getting Data From The Database

• دریافت اطلاعات جزئیات Meetup و آماده سازی صفحات Getting Meetup Details Data & Preparing Pages

• افزودن ابرداده "سر". Adding "head" Metadata

• استقرار پروژه های Next.js Deploying Next.js Projects

• استفاده از صفحات بازگشتی و استقرار مجدد Using Fallback Pages & Re-deploying

• خلاصه Summary

• منابع ماژول Module Resources

متحرک سازی برنامه های React Animating React Apps

• معرفی ماژول Module Introduction

• آماده سازی پروژه آزمایشی Preparing the Demo Project

• استفاده از CSS Transitions Using CSS Transitions

• استفاده از انیمیشن های CSS Using CSS Animations

• محدودیت‌های انتقال CSS و انیمیشن‌ها CSS Transition & Animations Limitations

• با استفاده از ReactTransitionGroup Using ReactTransitionGroup

• استفاده از مولفه انتقال Using the Transition Component

• بسته بندی مولفه انتقال Wrapping the Transition Component

• زمان بندی انیمیشن Animation Timings

• رویدادهای انتقالی Transition Events

• مولفه CSSTransition The CSSTransition Component

• سفارشی کردن نام کلاس های CSS Customizing CSS Classnames

• لیست های متحرک Animating Lists

• بسته های انیمیشن جایگزین Alternative Animation Packages

• بسته شدن Wrap Up

• منابع ماژول Module Resources

جایگزینی Redux با React Hooks Replacing Redux with React Hooks

• معرفی ماژول Module Introduction

• واکنش 18 و این بخش React 18 & This Section

• شروع پروژه و چرا باید Redux را جایگزین کنید Starting Project & Why You Would Replace Redux

• جایگزین: استفاده از Context API Alternative: Using the Context API

• تغییر موارد دلخواه با Context API Toggling Favorites with the Context API

• خلاصه Context API (و چرا نباید از آن به جای Redux استفاده کرد) Context API Summary (and why NOT to use it instead of Redux)

• شروع کار با یک قلاب سفارشی به عنوان فروشگاه Getting Started with a Custom Hook as a Store

• اتمام قلاب فروشگاه Finishing the Store Hook

• ایجاد فروشگاه بتن Creating a Concrete Store

• با استفاده از فروشگاه سفارشی Using the Custom Store

• خلاصه فروشگاه هوک سفارشی Custom Hook Store Summary

• بهینه سازی فروشگاه هوک سفارشی Optimizing the Custom Hook Store

• امتیاز: مدیریت برش های چندگانه با قلاب فروشگاه سفارشی Bonus: Managing Multiple State Slices with the Custom Store Hook

• بسته شدن Wrap Up

• منابع ماژول Module Resources

آزمایش برنامه‌های React (تست‌های واحد) Testing React Apps (Unit Tests)

• معرفی ماژول Module Introduction

• چی چرا؟ What & Why?

• درک انواع مختلف آزمون ها Understanding Different Kinds Of Tests

• چه چیزی را تست کنیم و چگونه تست کنیم What To Test & How To Test

• آشنایی با تنظیمات فنی و ابزارهای مرتبط Understanding the Technical Setup & Involved Tools

• اجرای اولین تست Running a First Test

• نوشتن اولین آزمون ما Writing Our First Test

• گروه بندی تست ها با مجموعه های تست Grouping Tests Together With Test Suites

• تست تعامل و وضعیت کاربر Testing User Interaction & State

• تست اجزای متصل Testing Connected Components

• تست کد ناهمزمان Testing Asynchronous Code

• کار با مسخره کردن Working With Mocks

• خلاصه و منابع بیشتر Summary & Further Resources

• منابع ماژول Module Resources

React + TypeScript React + TypeScript

• معرفی ماژول Module Introduction

• چی چرا؟ What & Why?

• نصب و استفاده از TypeScript Installing & Using TypeScript

• بررسی انواع پایه Exploring the Base Types

• کار با آرایه و انواع شی Working with Array & Object Types

• درک نوع استنتاج Understanding Type Inference

• استفاده از Union Types Using Union Types

• آشنایی با نام مستعار نوع Understanding Type Aliases

• توابع و انواع توابع Functions & Function Types

• شیرجه به ژنریک Diving Into Generics

• نگاهی دقیق تر به ژنریک A Closer Look At Generics

• ایجاد یک پروژه React + TypeScript Creating a React + TypeScript Project

• کار با کامپوننت ها و تایپ اسکریپت Working with Components & TypeScript

• کار با Props و TypeScript Working with Props & TypeScript

• افزودن مدل داده Adding a Data Model

• زمان تمرین: زمان ورزش! Time to Practice: Exercise Time!

• فرم های ارسالی در پروژه های TypeScript Form Submissions In TypeScript Projects

• کار با refs & useRef Working with refs & useRef

• کار با "Function Props" Working with "Function Props"

• مدیریت State & TypeScript Managing State & TypeScript

• اضافه کردن یک ظاهر طراحی شده Adding Styling

• زمان برای تمرین: حذف یک Todo Time to Practice: Removing a Todo

• Context API & TypeScript The Context API & TypeScript

• خلاصه Summary

• امتیاز: کاوش tsconfig.json Bonus: Exploring tsconfig.json

• منابع ماژول Module Resources

اختیاری: React Hooks Introduction & Summary Optional: React Hooks Introduction & Summary

• معرفی ماژول Module Introduction

• React Hooks چیست؟ What Are React Hooks?

• پروژه شروع The Starting Project

• واکنش 18 و این بخش React 18 & This Section

• شروع کار با useState() Getting Started with useState()

• اطلاعات بیشتر در مورد useState() & State Updating More on useState() & State Updating

• تخریب آرایه Array Destructuring

• ایالت های متعدد Multiple States

• قوانین قلاب Rules of Hooks

• انتقال داده های حالت از طریق مؤلفه ها Passing State Data Across Components

• زمان تمرین: اصول اولیه قلاب Time to Practice: Hooks Basics

• ارسال درخواست Http Sending Http Requests

• useEffect() و بارگذاری داده ها useEffect() & Loading Data

• درک وابستگی های useEffect(). Understanding useEffect() Dependencies

• اطلاعات بیشتر در مورد useEffect() More on useEffect()

• useCallback() چیست؟ What's useCallback()?

• کار با Refs و userRef() Working with Refs & useRef()

• پاکسازی با useEffect() Cleaning Up with useEffect()

• حذف مواد تشکیل دهنده Deleting Ingredients

• خطاهای بارگیری و دسته بندی حالت Loading Errors & State Batching

• اطلاعات بیشتر در مورد State Batching & State Updates More on State Batching & State Updates

• درک useReducer() Understanding useReducer()

• استفاده از useReducer() برای حالت Http Using useReducer() for the Http State

• کار با useContext() Working with useContext()

• بهینه سازی عملکرد با useMemo() Performance Optimizations with useMemo()

• شروع کار با قلاب های سفارشی Getting Started with Custom Hooks

• به اشتراک گذاری داده ها بین قلاب ها و اجزای سفارشی Sharing Data Between Custom Hooks & Components

• با استفاده از قلاب سفارشی Using the Custom Hook

• بسته شدن Wrap Up

• منابع ماژول Module Resources

اختیاری: React Summary & Core Feature Walkthrough Optional: React Summary & Core Feature Walkthrough

• معرفی ماژول Module Introduction

• React چیست و چرا از آن استفاده می کنید؟ What Is React & Why Would You Use It?

• React Projects - Requirements React Projects - Requirements

• ایجاد پروژه های React Creating React Projects

• شروع پروژه Out Starting Project

• درک نحوه عملکرد React Understanding How React Works

• ساختن اولین کامپوننت سفارشی Building A First Custom Component

• خروجی مقادیر پویا Outputting Dynamic Values

• استفاده مجدد از کامپوننت ها Reusing Components

• انتقال داده به کامپوننت ها با Props Passing Data to Components with Props

• استایل CSS و ماژول های CSS CSS Styling & CSS Modules

• ورزش و جزء دیگر Exercise & Another Component

• آماده سازی برنامه برای مدیریت دولتی Preparing the App For State Management

• اضافه کردن شنوندگان رویداد Adding Event Listeners

• کار با دولت Working with State

• وضعیت بالا بردن Lifting State Up

• ویژه "کودکان" Prop The Special "children" Prop

• محتوای حالت و مشروط State & Conditional Content

• افزودن سرصفحه مشترک و مدیریت حالت بیشتر Adding a Shared Header & More State Management

• اضافه کردن دکمه های فرم Adding Form Buttons

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

• به روز رسانی وضعیت بر اساس وضعیت قبلی Updating State Based On Previous State

• خروجی داده های لیست Outputting List Data

• اضافه کردن Backend به React SPA Adding a Backend to the React SPA

• ارسال یک درخواست HTTP POST Sending a POST HTTP Request

• مدیریت عوارض جانبی با useEffect() Handling Side Effects with useEffect()

• وضعیت بارگیری دسته Handle Loading State

• درک و اضافه کردن مسیریابی Understanding & Adding Routing

• اضافه کردن مسیرها Adding Routes

• کار با Layout Routes Working with Layout Routes

• Refactoring Route Components & More Nesting Refactoring Route Components & More Nesting

• پیوند و پیمایش Linking & Navigating

• واکشی داده ها از طریق لودر()ها Data Fetching via loader()s

• ارسال داده با ()عمل‌ها Submitting Data with action()s

• مسیرهای پویا Dynamic Routes

• خلاصه ماژول Module Summary

• منابع ماژول Module Resources

خلاصه دوره Course Roundup

• حالا چی؟ گام های بعدی که می توانید بردارید! What Now? Next Steps You Could Take!

• اکوسیستم React را کاوش کنید! Explore The React Ecosystem!

• افکار پایانی Finishing Thoughts

• خلاصه دوره Course Roundup

• جایزه! Bonus!

این دوره به روز شد This Course Got Updated!

• به روز رسانی دوره مرور کلی، توضیح و راهنمای مهاجرت Course Update Overview, Explanation & Migration Guide

• به روز رسانی دوره و راهنمای مهاجرت Course Update & Migration Guide

• دانلود مطالب دوره قدیمی Old Course Content Download