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

React - The Complete Guide (incl Hooks, React Router, Redux)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: شیرجه بزنید و React.js را از ابتدا یاد بگیرید! Reactjs، Hooks، Redux، React Routing، Animations، Next.js و موارد دیگر را بیاموزید! برنامه های وب قدرتمند، سریع، کاربرپسند و واکنشی ایجاد کنید با استفاده از قدرت جاوا اسکریپت به آسانی تجربیات شگفت انگیزی را برای کاربر فراهم کنید. همه چیز را در مورد React Hooks و React Components بیاموزید پیش نیازها: اصول اساسی JavaScript + HTML + CSS کاملاً مورد نیاز است. برای موفقیت در این دوره لازم نیست متخصص جاوا اسکریپت باشید! دانش جاوا اسکریپت ES6+ مفید است، اما نیازی به React قبلی یا هر تجربه فریمورک JS دیگری نیست!

این دوره با React 18 (آخرین نسخه React) کاملاً به روز است!

کاملاً به‌روزرسانی شد و از ابتدا دوباره ضبط شد - آخرین نسخه React را با تمام ویژگی‌های اصلی و مدرنی که باید بدانید را آموزش می‌دهد!

---

این دوره همچنین دارای دو مسیر است که می توانید طی کنید: مسیر "کامل" (دوره کامل 40 ساعته) و مسیر "خلاصه" (ماژول خلاصه ~ 4 ساعت) - می توانید مسیری را انتخاب کنید که به بهترین وجه متناسب با نیازهای زمانی شما باشد! :-)

---

React.js محبوب‌ترین کتابخانه جاوا اسکریپتی است که این روزها می‌توانید برای ایجاد رابط‌های کاربری مدرن و واکنش‌پذیر برای وب استفاده کنید و یاد بگیرید.

این دوره آموزشی React را عمیقاً، از پایه، گام به گام با غواصی در تمام اصول اصلی، کاوش نمونه‌های فراوان و همچنین معرفی مفاهیم پیشرفته به شما می‌آموزد.

شما تمام تئوری ها، هزاران مثال و دمو، تکالیف و تمرین ها و هزاران دانش مهم را دریافت خواهید کرد که توسط اکثر منابع دیگر نادیده گرفته شده است - به هر حال، دلیلی وجود دارد که چرا این دوره بسیار بزرگ است! :)

و در صورتی که حتی نمی دانید چرا می خواهید React را یاد بگیرید و فقط به دلیل تبلیغات یا "الگوریتم" اینجا هستید - نگران نباشید: ReactJS یک فناوری کلیدی به عنوان یک توسعه دهنده وب است و در این زمینه البته من همچنین توضیح خواهم داد که چرا اینقدر مهم است!


به "React - The Complete Guide" خوش آمدید!

این دوره React.js را به روشی تمرین محور و با استفاده از آخرین الگوها و بهترین شیوه های مورد نیاز به شما آموزش می دهد. شما تمام اصول کلیدی و همچنین مفاهیم پیشرفته و موضوعات مرتبط را یاد خواهید گرفت تا شما را به یک توسعه دهنده React.js تبدیل کند.

این یک دوره آموزشی بزرگ است زیرا واقعاً همه چیزهایی را که برای تبدیل شدن به یک توسعه دهنده React.js باید بدانید و یاد بگیرید را پوشش می دهد!

مهم نیست که چیزی در مورد React نمی دانید یا قبلاً دانش اولیه React را دریافت کرده اید (لازم نیست اما مشکلی هم نیست)، اطلاعات و دانش مفیدی از این دوره دریافت خواهید کرد!

هدف من از این دوره این است که اطمینان حاصل کنم که از کار با React اطمینان دارید، به طوری که می توانید برای کارهای React درخواست دهید، از آن در پروژه های خود استفاده کنید یا به سادگی نمونه کارهای خود را به عنوان یک توسعه دهنده ارتقا دهید - هدف شما هر چه باشد: این دوره شما را به آنجا می رساند!


من ابتدا این دوره را در سال 2017 ایجاد کردم و از آن زمان آن را به روز نگه داشته ام - آن را از ابتدا در سال 2021 دوباره انجام دادم. و البته من خود را به به روز نگه داشتن این دوره اختصاص داده ام - تا بتوانید به این دوره برای یادگیری React به بهترین شکل ممکن اعتماد کنید!

در این دوره آموزشی چیست؟

  • معرفی کامل برای React.js (چیست و چرا از آن استفاده می کنید؟)

  • همه اصول اولیه: React چگونه کار می کند، ساخت کامپوننت ها با React UI ساختمان با React

  • قطعات، اتصالات دینامیک داده‌ها

  • کار با رویدادها و وضعیت های کاربر برای ایجاد برنامه های کاربردی تعاملی

  • نگاهی (کامل) به پشت صحنه برای درک نحوه عملکرد React در زیر کاپوت

  • توضیحات مفصل در مورد نحوه کار با لیست ها و محتوای مشروط

  • React Hooks (در عمق)!

  • کار با هوک های داخلی و ساختن قلاب های سفارشی

  • نحوه اشکال زدایی برنامه های React

  • Styled React برنامه‌ها با "Styled Components" و "CSS Modules"

  • کار با "Pragments" "Portals"

  • مقابله با عوارض جانبی

  • مولفه‌های مبتنی بر کلاس و اجزای عملکردی

  • ارسال درخواست‌های Http برای رسیدگی به وضعیت‌های انتقالی + پاسخ‌ها

  • بررسی فرم‌ها و ورودی کاربر (از جمله اعتبارسنجی)

  • جعبه ابزار Redux Redux

  • مسیریابی با روتر React

  • معرفی عمیق به Next.js

  • استقرار React Apps

  • اجرای احراز هویت

  • آزمون های واحد

  • ترکیب React با TypeScript

  • افزودن انیمیشن

  • انبوهی از نمونه‌ها و پروژه‌های نمایشی به طوری که می‌توانید همه چیزهایی را که آموخته‌اید در پروژه‌های واقعی اعمال کنید

  • و خیلی چیزهای دیگر - برنامه درسی کامل را در این صفحه بررسی کنید!

این واقعاً "راهنمای کامل" است - قول داده شده است!

و از همه بهتر؟

شما به هیچ دانش قبلی React نیاز ندارید!

این دوره با فرض صفر شروع می شود! تنها چیزی که شما نیاز دارید توسعه پایه وب و دانش جاوا اسکریپت است (اگرچه این دوره حتی شامل یک بازنگری مختصر جاوا اسکریپت است تا اطمینان حاصل شود که همه ما در یک صفحه هستیم!).

برنامه درسی کامل، ویدئوهای پیش نمایش رایگان را بررسی کنید و به لطف 30 روز ضمانت بازگشت وجه، بدون ریسک به دوره بپیوندید!


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

شروع شدن 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

نمایش نظرات

Udemy (یودمی)

یودمی یکی از بزرگ‌ترین پلتفرم‌های آموزشی آنلاین است که به میلیون‌ها کاربر در سراسر جهان امکان دسترسی به دوره‌های متنوع و کاربردی را فراهم می‌کند. این پلتفرم امکان آموزش در زمینه‌های مختلف از فناوری اطلاعات و برنامه‌نویسی گرفته تا زبان‌های خارجی، مدیریت، و هنر را به کاربران ارائه می‌دهد. با استفاده از یودمی، کاربران می‌توانند به صورت انعطاف‌پذیر و بهینه، مهارت‌های جدیدی را یاد بگیرند و خود را برای بازار کار آماده کنند.

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش React - راهنمای کامل (از جمله Hooks، React Router، Redux)
جزییات دوره
48 hours
512
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
711,579
4.6 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Maximilian Schwarzmüller Maximilian Schwarzmüller

دارای گواهینامه AWS، توسعه دهنده وب و مدرس حرفه ای

Academind by Maximilian Schwarzmüller Academind by Maximilian Schwarzmüller

آموزش آنلاین