آموزش Modern React with Redux [به روز رسانی 2023]

Modern React with Redux [2023 Update]

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: Master React و Redux Toolkit. شامل پرس و جو RTK، هزاران قلاب سفارشی، و موارد دیگر! دوره 100% به روز شده در نوامبر 2022 ایجاد برنامه های وب پویا با استفاده از جدیدترین فناوری وب کسب مهارت های برنامه نویسی مورد نیاز برای به دست آوردن شغل مهندسی نرم افزار مهارت های خود را با بسیاری از پروژه ها، تمرین ها و آزمون های بزرگ تمرین کنید به مفاهیم اساسی پشت React و Redux مسلط شوید. زنجیره ابزاری که از React پشتیبانی می کند، شامل NPM، Webpack، Babel، و نحو جاوا اسکریپت ES6/ES2015 مهندسی باشید که نحوه عملکرد Redux را برای دیگران توضیح می دهد، زیرا اصول اولیه را به خوبی می دانید قدرت ساخت اجزای قابل استفاده مجدد را درک کنید. کامپیوتر ویندوز

تبریک می‌گویم! شما محبوب ترین، کامل ترین و به روزترین منبع آنلاین را برای یادگیری React و Redux پیدا کرده اید!

هزاران مهندس دیگر React و Redux را یاد گرفته‌اند و شما هم می‌توانید. این دوره از یک روش آزمایش‌شده و اثبات‌شده در زمان استفاده می‌کند تا مطمئن شود که دقیقاً نحوه عملکرد React و Redux را می‌دانید و به شما یک شغل جدید به عنوان مهندس نرم‌افزار می‌دهد یا به شما کمک می‌کند برنامه‌ای را بسازید که همیشه آرزویش را داشتید.

تفاوت بین این دوره و سایر دوره ها: الگوهای طراحی مورد استفاده توسط شرکت های برتر برای ساخت برنامه های وب بسیار محبوب را درک خواهید کرد.

React محبوب‌ترین کتابخانه جاوا اسکریپت در پنج سال گذشته است و بازار کار هنوز داغ‌تر از همیشه است. شرکت‌های بزرگ و کوچک نمی‌توانند مهندسانی را استخدام کنند که React و Redux را با سرعت کافی درک کنند، و حقوق مهندسان در تمام زمان‌ها بالاست. زمان بسیار خوبی برای یادگیری React است!

----------------------

چه چیزی خواهید ساخت؟

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

هر مبحثی که در این دوره گنجانده شده است به صورت تدریجی اضافه می شود تا مطمئن شوید که پایه و اساس محکمی از دانش دارید. بحث‌های زیادی به شما اضافه شده است تا به شما کمک کند دقیقاً بدانید چه زمانی و کجا از هر ویژگی React و Redux استفاده کنید.

تضمین من برای شما: هیچ دوره آنلاین دیگری وجود ندارد که ویژگی های React و Redux Toolkit را آموزش دهد. این جامع ترین منبع موجود است.


در زیر فهرستی جزئی از موضوعاتی که در این دوره خواهید یافت وجود دارد:

  • بر ویژگی‌های اساسی React، از جمله JSX، state و props مسلط شوید

  • از مربع اول، نحوه ساخت اجزای قابل استفاده مجدد را بیاموزید

  • به کد منبع Redux بروید تا نحوه عملکرد آن در پشت صحنه را درک کنید

  • دانش خود را بیازمایید و مهارت های خود را با تمرین های کدنویسی متعدد تقویت کنید

  • از کتابخانه های سبک محبوب برای ساخت برنامه های زیبا استفاده کنید

  • روش های مختلف ساخت UI را از طریق ترکیب اجزاء مشاهده کنید

  • همه این تکنیک‌ها را با چیت‌های کاملاً نوشته شده به خاطر بسپارید


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

این دوره‌ای است که وقتی برای اولین بار React را یاد گرفتم می‌خواستم بگذرانم: کامل، به‌روز و واضح.



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

بیایید شیرجه بزنیم! Let's Dive In!

  • نحوه دریافت کمک How to Get Help

  • به انجمن ما بپیوندید! Join Our Community!

  • منابع دوره Course Resources

  • بیایید یک برنامه بسازیم! Let's Build an App!

  • سوالات انتقادی Critical Questions

  • مفاهیم اصلی Core Concepts

  • چند سوال انتقادی دیگر A Few More Critical Questions

  • تنظیم گره Node Setup

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

  • Create React App چیست؟ What is Create React App?

ایجاد محتوا با JSX Creating Content with JSX

  • نمایش محتوای اصلی Showing Basic Content

  • JSX چیست؟ What is JSX?

  • چاپ متغیرهای جاوا اسکریپت در JSX Printing JavaScript Variables in JSX

  • عبارات مختصر JS Shorthand JS Expressions

  • نمایش مقادیر جاوا اسکریپت در JSX Showing Javascript Values in JSX

  • بررسی اجمالی ورزش Exercise Overview

  • تمرین سریع با JSX Quick Practice with JSX

  • راه حل تمرین Exercise Solution

  • چیدمان اجزای معمولی Typical Component Layouts

  • سفارشی کردن عناصر با Props Customizing Elements with Props

  • تبدیل HTML به JSX Converting HTML to JSX

  • استفاده از Styling در JSX Applying Styling in JSX

  • اطلاعات بیشتر در مورد JSX More on JSX

  • تبدیل JSX را تمرین کنید Practice JSX Conversion

  • راه حل تمرین Exercise Solution

  • استخراج کامپوننت ها Extracting Components

  • بررسی اجمالی سیستم های ماژول Module Systems Overview

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

  • چیت شیت برای JSX Cheatsheet for JSX

ساختمان با اجزای قابل استفاده مجدد Building with Reusable Components

  • بررسی اجمالی پروژه Project Overview

  • ایجاد اجزای اصلی Creating Core Components

  • معرفی سیستم Props Introducing the Props System

  • تصویر حرکت داده ها Picturing the Movement of Data

  • افزودن لوازم جانبی Adding Props

  • استفاده از ساختارشکنی استدلال Using Argument Destructuring

  • با Props تمرین کنید Practice with Props

  • راه حل تمرین Exercise Solution

  • React Developer Tools The React Developer Tools

  • متداول ترین اشتباه پراپس The Most Common Props Mistake

  • برقراری ارتباط با لوازم جانبی Communicating With Props

  • تصاویر برای برنامه Images for the App

  • از جمله تصاویر Including Images

  • مدیریت قابلیت دسترسی به تصویر Handling Image Accessibility

  • بررسی نحوه عملکرد CSS Review on how CSS Works

  • افزودن کتابخانه های CSS با NPM Adding CSS Libraries with NPM

  • انبوهی از HTML! A Big Pile of HTML!

  • آخرین بیت از یک ظاهر طراحی شده Last Bit of Styling

وضعیت: چگونه برنامه خود را تغییر دهید State: How to Change Your App

  • نمای کلی برنامه App Overview

  • راه اندازی اولیه برنامه Initial App Setup

  • معرفی سیستم رویداد Introducing the Event System

  • رویدادها در جزئیات Events in Detail

  • تغییرات در رویداد Handlers Variations on Event Handlers

  • مسابقه در مورد رویدادها Quiz on Events

  • با رویدادها ورزش کنید Exercise with Events

  • راه حل تمرین Exercise Solution

  • معرفی سیستم دولتی Introducing the State System

  • بیشتر در مورد ایالت More on State

  • درک فرآیند رندر مجدد Understanding the Re-Rendering Process

  • این پنج امتیاز را گرفتید؟ Got These Five Points?

  • چرا تخریب آرایه؟ Why Array Destructuring?

  • بازگشت به برنامه Back to the App

  • انتخاب یک عنصر تصادفی Picking a Random Element

  • ساخت لیست در React List Building in React

  • تصاویر برای برنامه Images for the App

  • بارگیری و نمایش SVG ها Loading and Showing SVGs

  • افزایش اندازه تصویر Increasing Image Size

  • افزودن CSS سفارشی Adding Custom CSS

  • طراحی نهایی Finalizing Styling

  • جمع بندی و بررسی برنامه App Wrapup and Review

استفاده از API با React Using an API with React

  • نمای کلی برنامه App Overview

  • راه اندازی پروژه Project Setup

  • مسیر رو به جلو The Path Forward

  • مروری بر درخواست های HTTP Overview of HTTP Requests

  • آشنایی با API Understanding the API

  • ایجاد یک درخواست HTTP Making an HTTP Request

  • [اختیاری] استفاده از Async: Await [Optional] Using Async:Await

  • پاکسازی واکشی داده Data Fetching Cleanup

  • تفکر در مورد جریان داده Thinking About Data Flow

  • ارتباط کودک با والدین Child to Parent Communication

  • پیاده سازی ارتباط کودک با والدین Implementing Child to Parent Communication

  • ارتباط صعودی Upward Communication

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

  • مدیریت عناصر ورودی Handling Input Elements

  • [اختیاری] خوب اما چرا؟ [Optional] OK But Why?

  • ایجاد یک ورودی کنترل شده Creating a Controlled Input

  • راه حل تمرین Exercise Solution

  • اجرای جستجو Running the Search

  • یادآوری در Async: در انتظار Reminder on Async:Await

  • ارتباط فهرست تصاویر پایین است Communicating the List of Images Down

  • ساخت فهرستی از تصاویر Building a List of Images

  • مدیریت به روز رسانی لیست Handling List Updates

  • یادداشت ها در مورد کلیدها Notes on Keys

  • نمایش تصاویر Displaying Images

  • لمس یک ظاهر طراحی شده A Touch of Styling

  • جمع بندی برنامه App Wrapup

نحوه رسیدگی به فرم ها How to Handle Forms

  • نمای کلی برنامه App Overview

  • راه اندازی اولیه Initial Setup

  • موقعیت مکانی State Location

  • یادآوری در رویداد Handlers Reminder on Event Handlers

  • CSS اضافی Extra CSS

  • دریافت عناوین جدید Receiving New Titles

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

  • وضعیت به روز رسانی Updating State

  • آن حالت را تغییر ندهید! Don't Mutate That State!

  • به روز رسانی ایالت - برگه تقلب State Updates - Cheat Sheet

  • [اختیاری] افزودن عناصر به شروع یا پایان [Optional] Adding Elements to the Start or End

  • افزودن عناصر Adding Elements

  • [اختیاری] راه حل تمرین [Optional] Exercise Solution

  • [اختیاری] درج عناصر [Optional] Inserting Elements

  • درج عناصر Inserting Elements

  • [اختیاری] راه حل تمرین [Optional] Exercise Solution

  • [اختیاری] حذف عناصر [Optional] Removing Elements

  • حذف عناصر Removing Elements

  • [اختیاری] راه حل تمرین [Optional] Exercise Solution

  • [اختیاری] اصلاح عناصر [Optional] Modifying Elements

  • [فوق العاده اختیاری] چرا نحو خاص؟ [Super Optional] Why the Special Syntax?

  • اصلاح عناصر Modifying Elements

  • [اختیاری] راه حل تمرین [Optional] Exercise Solution

  • [اختیاری] افزودن، تغییر یا حذف ویژگی های شی [Optional] Adding, Changing, or Removing Object Properties

  • چیت شیت برای تغییرات ایالت Cheatsheet for State Changes

  • اضافه کردن یک کتاب، برای واقعی! Adding a Book, For Real!

  • تولید شناسه های تصادفی Generating Random ID's

  • نمایش لیست Displaying the List

  • حذف رکوردها Deleting Records

  • تغییر حالت نمایش فرم Toggling Form Display

  • مقادیر فرم پیش فرض Default Form Values

  • به روز رسانی عنوان Updating the Title

  • بستن فرم هنگام ارسال Closing the Form on Submit

  • راه حل بهتر! A Better Solution!

  • درهم ریختن دو هندلر در یک Collapsing Two Handlers into One

  • افزودن تصاویر Adding Images

پایداری داده با درخواست های API Data Persistence with API Requests

  • افزودن ماندگاری داده Adding Data Persistence

  • راه اندازی سرور Server Setup

  • چه اتفاقی افتاده؟ What Just Happened?

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

  • معرفی REST Client Introducing the REST Client

  • خطاهای ECONNREFUSED 127.0.0.1:3001 در VSCode ECONNREFUSED 127.0.0.1:3001 Errors in VSCode

  • با استفاده از REST Client Using the REST Client

  • ایجاد یک رکورد جدید Creating a New Record

  • واکشی فهرستی از رکوردها Fetching a List of Records

  • معرفی useEffect Introducing useEffect

  • useEffect در اکشن useEffect in Action

  • بیشتر در مورد useEffect More on useEffect

  • چه زمانی اجرا می شود؟ When Does it Run?

  • به روز رسانی یک رکورد Updating a Record

  • فکر کردن در مورد به روز رسانی Thinking About Updates

  • حذف یک رکورد Deleting a Record

ارتباط با استفاده از سیستم زمینه Communication Using the Context System

  • معرفی زمینه Introducing Context

  • زمینه در عمل Context in Action

  • تغییر مقادیر زمینه Changing Context Values

  • بیشتر در مورد تغییر زمینه More on Changing Context

  • برنامه در مقابل حالت جزء Application vs Component State

  • Refactoring برای استفاده از زمینه Refactoring to Use Context

  • بازسازی برنامه Refactoring the App

  • یادداشت سریع Quick Note

  • یادآوری در مورد اشتراک گذاری با زمینه Reminder on Sharing with Context

  • لوازم و زمینه با هم Props and Context Together

  • آخرین بیت از Refactoring Last Bit of Refactoring

  • طعم کوچک قلاب های قابل استفاده مجدد A Small Taste of Reusable Hooks

شیرجه رفتن عمیق تر به قلاب! Deeper Dive into Hooks!

  • بازگشت به useEffect Return to useEffect

  • یادداشت سریع Quick Note

  • درک موضوع Understanding the Issue

  • اعمال رفع مشکل Applying the Fix

  • ESLint خوب است، اما مراقب باشید! ESLint is Good, but be Careful!

  • ارجاعات پایدار با useCallback Stable References with useCallback

  • رفع اشکالات با useCallback Fixing Bugs with useCallback

  • رفع اشکالات UseEffect Fixing UseEffect Bugs

  • استفاده از توابع پاکسازی اثر useEffect Cleanup Functions

  • هدف از عملکردهای پاکسازی The Purpose of Cleanup Functions

سیستم های ناوبری و مسیریابی سفارشی Custom Navigation and Routing Systems

  • اطلاعات مهم درباره بخش ها و سخنرانی های زیر Important Info About the Following Sections and Lectures

  • بررسی اجمالی پروژه Project Overview

  • راه اندازی پروژه Project Setup

  • برخی نظریه دکمه ها Some Button Theory

  • عناصر زیربنایی Underlying Elements

  • حمایت از کودکان The Children Prop

  • طراحی لوازم جانبی Props Design

  • اعتبار سنجی Props با PropTypes Validating Props with PropTypes

  • PropTypes در عمل PropTypes in Action

  • معرفی TailwindCSS Introducing TailwindCSS

  • نصب Tailwind Installing Tailwind

  • نحوه استفاده از Tailwind How to use Tailwind

  • نقد و بررسی در مورد استایلینگ Review on Styling

  • کتابخانه ClassNames The ClassNames Library

  • ساختن برخی از تغییرات Building Some Variations

  • نهایی کردن تغییرات Finalizing the Variations

  • استفاده از آیکون ها در پروژه های React Using Icons in React Projects

  • مشکلات مربوط به مدیریت رویداد Issues with Event Handlers

  • عبور لوازم از طریق Passing Props Through

  • رسیدگی به پرونده Special ClassName Handling the Special ClassName Case

تسلط بر فرآیند طراحی دولتی Mastering the State Design Process

  • سازمان پروژه Project Organization

  • بازسازی با سازمان Refactoring with Organization

  • بررسی اجمالی مؤلفه Component Overview

  • راه اندازی کامپوننت Component Setup

  • یادآوری لیست های ساختمان Reminder on Building Lists

  • یادداشت سریع Quick Note

  • بررسی اجمالی فرآیند طراحی حالت State Design Process Overview

  • پیدا کردن آیتم گسترش یافته Finding the Expanded Item

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

  • گردانندگان رویداد درون خطی Inline Event Handlers

  • تنوع در رویداد Handlers Variation on Event Handlers

  • رندر آیکون شرطی Conditional Icon Rendering

  • نمایش آیکون ها Displaying Icons

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

  • تغییر حالت کوچک کردن پانل Toggling Panel Collapse

  • یادداشت سریع Quick Note

  • [اختیاری] به‌روزرسانی‌های وضعیت با تأخیر [Optional] Delayed State Updates

  • [اختیاری] به روز رسانی های حالت عملکردی [Optional] Functional State Updates

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

  • کنترل کننده رویداد با لیست ها Event Handlers with Lists

  • راه حل تمرین Exercise Solution

تمرین لوازم و طراحی حالت Practicing Props and State Design

  • بررسی اجمالی مؤلفه Component Overview

  • طراحی لوازم جانبی Designing the Props

  • ایجاد کامپوننت Component Creation

  • [اختیاری] طراحی حالت بیشتر [Optional] More State Design

  • بالاخره ... اجرا! Finally... Implementation!

  • یادآوری در مورد مدیریت رویداد در Maps Reminder on Event Handlers in Maps

  • کشویی به عنوان یک جزء کنترل شده Dropdown as a Controlled Component

  • پیاده سازی کامپوننت کنترل شده Controlled Component Implementation

  • کمک کننده بررسی وجود Existence Check Helper

  • کنوانسیون جامعه با نام های Props Community Convention with Props Names

  • کنترل فرم - کنوانسیون نامگذاری پروپ Form Controls - Prop Naming Convention

  • راه حل تمرین Exercise Solution

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

  • جزء پنل The Panel Component

  • ایجاد پنل قابل استفاده مجدد Creating the Reusable Panel

  • یک ویژگی اضافی چالش برانگیز A Challenging Extra Feature

  • کنترل کننده های کلیک گسترده در سند Document-Wide Click Handlers

  • رویداد ضبط و حباب Event Capture and Bubbling

  • همه اش را بگذار کنار هم Putting it All Together

  • چرا Capture Phase Handler؟ Why a Capture Phase Handler?

  • یادآوری در مورد تابع useEffect Reminder on the useEffect Function

  • یادآوری در مورد پاکسازی useEffect Reminder on useEffect Cleanup

  • مسائل مربوط به مراجع عنصر Issues with Element References

  • useRef در عمل useRef in Action

  • بررسی مکان کلیک کنید Checking Click Location

ساخت ناوبری قابل استفاده مجدد Making Navigation Reusable

  • ناوبری مرورگر سنتی Traditional Browser Navigation

  • نظریه ناوبری در React Theory of Navigation in React

  • استخراج صفحه بازشو Extracting the DropdownPage

  • پاسخ به سوالات انتقادی Answering Critical Questions

  • تابع PushState The PushState Function

  • مدیریت کلیک های لینک Handling Link Clicks

  • دست زدن به عقب: دکمه های جلو Handling Back:Forward Buttons

  • زمینه ناوبری Navigation Context

  • گوش دادن به کلیک های جلو و عقب Listening to Forward and Back Clicks

  • ناوبری برنامه ای Programmatic Navigation

  • یک مؤلفه پیوند A Link Component

  • یک جزء مسیر A Route Component

  • کنترل کلیدهای فرمان و کنترل Handling Control and Command Keys

  • سبک پیوند Link Styling

  • قلاب ناوبری سفارشی Custom Navigation Hook

  • افزودن کامپوننت نوار کناری Adding a Sidebar Component

  • برجسته کردن لینک فعال Highlighting the Active Link

  • جمع بندی ناوبری Navigation Wrapup

ایجاد پورتال با ReactDOM Creating Portals with ReactDOM

  • بررسی اجمالی اجزای معین Modal Component Overview

  • تغییر وضعیت دید Toggling Visibility

  • در نگاه اول، آسان! At First Glance, Easy!

  • ما خوش شانس هستیم که اصلا کار می کند! We're Lucky it Works At All!

  • رفع مودال با پورتال Fixing the Modal with Portals

  • بستن Modal Closing the Modal

  • سفارشی کردن Modal Customizing the Modal

  • یک ظاهر طراحی اضافی Additional Styling

  • یک اشکال کوچک One Small Bug

  • جمع بندی معین Modal Wrapup

یک جدول با ویژگی های کامل بسازید! Make a Feature-Full Data Table!

  • ایجاد جدول قابل استفاده مجدد Creating a Reusable table

  • انتقال داده ها به جدول Communicating Data to the Table

  • یادآوری در ساختار HTML جدول Reminder on Table HTML Structure

  • ساخت ردیف ها Building the Rows

  • استایل بهتر Better Styling

  • انجام شده! اما قابل استفاده مجدد نیست Done! But It's Not Reusable

  • ایده اینجاست Here's the Idea

  • هدرهای جدول پویا Dynamic Table Headers

  • رندر کردن سلول های فردی Rendering Individual Cells

  • مقادیر سلول ثابت Fixed Cell Values

  • نقشه های تو در تو Nested Maps

  • رفع رنگ Fixing the Color

  • اضافه کردن یک تابع کلیدی Adding a Key Function

هوشمند شدن با مرتب سازی داده ها Getting Clever with Data Sorting

  • اضافه کردن مرتب سازی به جدول Adding Sorting to the Table

  • یادآوری مرتب سازی در جاوا اسکریپت Reminder on Sorting in JavaScript

  • مرتب سازی رشته ها Sorting Strings

  • مرتب سازی اشیاء Sorting Objects

  • پیاده سازی مرتب سازی شی Object Sort Implementation

  • ترتیب مرتب سازی معکوس Reversing Sort Order

  • مرتب سازی اختیاری Optional Sorting

  • یک ویژگی کوچک اضافی A Small Extra Feature

  • سفارشی سازی سلول های سرصفحه Customizing Header Cells

  • React Fragments React Fragments

  • فاش شدن بزرگ The Big Reveal

  • اضافه کردن SortableTable Adding SortableTable

  • تماشای کلیک‌های سلول سرصفحه Watching for Header Cell Clicks

  • طراحی حالت سریع Quick State Design

  • اضافه کردن حالت مرتب سازی Adding Sort State

  • Yessssss، این کار کرد! Yessssss, It Worked!

  • تعیین مجموعه آیکون Determining Icon Set

  • شکل دادن به سلول های سرصفحه Styling Header Cells

  • بازنشانی ترتیب مرتب سازی Resetting Sort Order

  • جمع بندی میز Table Wrapup

قلاب های سفارشی در عمق Custom Hooks In Depth

  • کاوش استفاده مجدد از کد Exploring Code Reuse

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

  • ایجاد مؤلفه آزمایشی Creating the Demo Component

  • ایجاد قلاب سفارشی Custom Hook Creation

  • یادداشت سریع Quick Note

  • فرآیند ایجاد قلاب در عمق Hook Creation Process in Depth

  • ساخت قلاب مرتب سازی قابل استفاده مجدد Making a Reusable Sorting Hook

به دنیای کاهنده ها Into the World of Reducers

  • نمای کلی برنامه App Overview

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

  • بیشتر در فرم More on the Form

  • useReducer در عمل useReducer in Action

  • قوانین توابع کاهنده Rules of Reducer Functions

  • درک اکشن اشیاء Understanding Action Objects

  • انواع کنش ثابت Constant Action Types

  • Refactoring به یک سوئیچ Refactoring to a Switch

  • افزودن به‌روزرسانی‌های ایالتی جدید Adding New State Updates

  • چند ملاحظات طراحی در مورد کاهنده ها A Few Design Considerations Around Reducers

  • چند سوال در مورد کاهنده ها A Few Questions on Reducers

  • معرفی Immer Introducing Immer

  • غوطه ور در عمل Immer in Action

به جعبه ابزار Redux شیرجه بزنید Dive Into Redux Toolkit

  • به دنیای Redux Into the World of Redux

  • Redux vs Redux Toolkit Redux vs Redux Toolkit

  • نمای کلی برنامه App Overview

  • مسیر رو به جلو The Path Forward

  • زمان اجرا! Implementation Time!

  • درک فروشگاه Understanding the Store

  • وضعیت اولیه فروشگاه The Store's Initial State

  • درک برش ها Understanding Slices

  • درک اکشن سازندگان Understanding Action Creators

  • اتصال React به Redux Connecting React to Redux

  • به روز رسانی حالت از یک مؤلفه Updating State from a Component

  • دسترسی به حالت در یک جزء Accessing State in a Component

  • حذف محتوا Removing Content

  • وضعیت به روز رسانی را تمرین کنید! Practice Updating State!

  • ایالت دسترسی را تمرین کنید! Practice Accessing State!

  • حتی بیشتر به روز رسانی دولت! Even More State Updating!

  • حالت بازنشانی Resetting State

  • به روز رسانی های چندگانه ایالتی Multiple State Updates

  • درک جریان عمل Understanding Action Flow

  • مراقب اقدامات دیگر Watching for Other Actions

  • دریافت یک Action Creator's Type Getting an Action Creator's Type

  • ایجاد اکشن دستی Manual Action Creation

  • ساختار فایل و پوشه File and Folder Structure

  • بازسازی ساختار پروژه Refactoring the Project Structure

  • لینک پروژه تکمیل شده Link to Completed Project

مدیریت برش های متعدد با Redux Toolkit Managing Multiple Slices with Redux Toolkit

  • بررسی اجمالی پروژه Project Overview

  • اضافه کردن کامپوننت دیگ بخار Adding Component Boilerplate

  • تفکر در مورد حالت مشتق شده Thinking About Derived State

  • فکر کردن به طراحی Redux Thinking About Redux Design

  • افزودن برش فرم Adding the Form Slice

  • نگهداری یک مجموعه با یک برش Maintaining a Collection with a Slice

  • ایجاد فروشگاه Creating the Store

  • مقادیر فرم برای به روز رسانی وضعیت Form Values to Update State

  • دریافت هزینه Receiving the Cost

  • ارسال در طول ارسال فرم Dispatching During the Form Submission

  • کلیدهای دوتایی ناجور Awkward Double Keys

  • فهرست کردن رکوردها Listing the Records

  • حذف رکوردها Deleting Records

  • فایل CSS برای دانلود CSS File for Download

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

  • بازنشانی فرم هنگام ارسال Form Reset on Submission

  • یادآوری ExtraReducers Reminder on ExtraReducers

  • افزودن ورودی جستجو Adding a Searching Input

  • حالت مشتق شده در useSelector Derived State in useSelector

  • کل هزینه خودرو Total Car Cost

  • برجسته کردن خودروهای موجود Highlighting Existing Cars

ارتباط با API با استفاده از Async Thunks Interfacing with API's Using Async Thunks

  • نمای کلی برنامه App Overview

  • اضافه کردن چند وابستگی Adding a Few Dependencies

  • برنامه اولیه Boilerplate Initial App Boilerplate

  • راه اندازی سرور API API Server Setup

  • فایل های کامپوننت Component Files

  • اضافه کردن چند کامپوننت Adding a Few Components

  • ایجاد فروشگاه Redux Creating the Redux Store

  • تفکر در مورد ساختار داده Thinking About Data Structuring

  • یادآوری کنوانسیون های درخواستی Reminder on Request Conventions

  • تکنیک های واکشی داده ها Data Fetching Techniques

  • بخش Thunks Async اختیاری Optional Async Thunks Section

  • اضافه کردن حالت برای بارگذاری داده ها Adding State for Data Loading

  • درک Async Thunks Understanding Async Thunks

  • مراحل اضافه کردن Thunk Steps for Adding a Thunk

  • بیشتر در مورد افزودن Thunks More on Adding Thunks

  • جمع کردن Thunk Wrapping up the Thunk

  • با استفاده از حالت بارگذاری Using Loading State

  • اضافه کردن مکث برای تست Adding a Pause for Testing

  • اضافه کردن اسکلت لودر Adding a Skeleton Loader

  • انیمیشن با TailwindCSS Animations with TailwindCSS

  • ارائه لیست کاربران Rendering the List of Users

  • ایجاد کاربران جدید Creating New Users

  • وضعیت بارگیری غیرمنتظره Unexpected Loading State

  • استراتژی برای حالت بارگیری ریز دانه Strategies for Fine-Grained Loading State

  • حالت بارگیری ریز دانه محلی Local Fine-Grained Loading State

  • اطلاعات بیشتر در مورد وضعیت بارگیری More on Loading State

  • مدیریت خطاها با ایجاد کاربر Handling Errors with User Creation

  • ایجاد یک Thunk Hook قابل استفاده مجدد Creating a Reusable Thunk Hook

  • ایجاد کامپوننت دکمه Fetch-Aware Creating a Fetch-Aware Button Component

  • نمایش اسکلت بهتر Better Skeleton Display

  • Thunk برای حذف یک کاربر A Thunk to Delete a User

  • به روز رسانی Slice Updating the Slice

  • بازسازی کامپوننت Refactoring the Component

  • حذف کاربر Deleting the User

  • رفع خطای حذف Fixing a Delete Error

  • نمای کلی ویژگی های آلبوم Album Feature Overview

  • اجزای اضافی Additional Components

  • اضافه شدن ExpandablePanel Adding the ExpandablePanel

  • بسته بندی ExpandablePanel Wrapping Up the ExpandablePanel

  • افزودن لیست آلبوم ها Adding the Albums Listing

Async مدرن با Query Redux Toolkit Modern Async with Redux Toolkit Query

  • به این بخش پرش می کنید؟ Skipping to this Section?

  • [اختیاری] گرفتار شدن [Optional] Getting Caught Up

  • معرفی Redux Toolkit Query Introducing Redux Toolkit Query

  • ایجاد یک RTK Query API Creating a RTK Query API

  • ایجاد نقطه پایانی Creating an Endpoint

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

  • چند یادداشت فوری A Few Immediate Notes

  • ارائه لیست Rendering the List

  • تغییر داده ها با جهش Changing Data with Mutations

  • تفاوت بین کوئری ها و جهش ها Differences Between Queries and Mutations

  • گزینه هایی برای بازیابی داده ها Options for Refetching Data

  • درخواست حذف مجدد Request De-Duplication

  • برخی موارد داخلی Query Redux Toolkit Some Internals of Redux Toolkit Query

  • واکشی مجدد با برچسب ها Refetching with Tags

  • اعتبار سنجی برچسب ریز Fine-Grained Tag Validation

  • رفع یک ظاهر طراحی شده Styling Fixups

  • اضافه کردن مکث برای تست Adding a Pause for Testing

  • پیاده سازی Delete Endpoints Implementing Delete Endpoints

  • اصلاح مجدد فهرست Refactoring the List

  • حذف پیاده سازی Remove Implementation

  • باطل کردن آسان تگ Easy Tag Invalidation

  • هوشمند شدن با برچسب های کش Getting Clever with Cache Tags

  • پیاده سازی هوشمندانه تگ بیشتر More Clever Tag Implementation

  • نمای کلی ویژگی عکس ها Photos Feature Overview

  • راه اندازی تعداد زیادی عکس! Lots of Photos Setup!

  • اضافه کردن نقاط پایانی Adding the Endpoints

  • ایجاد عکس Creating the Photo

  • نمایش لیست عکس ها Showing the List of Photos

  • اضافه کردن موارد حذف شده با ماوس Adding Mouse-Over Deletes

  • افزودن بازیابی خودکار داده ها Adding Automatic Data Refetching

جایزه! Bonus!

  • جایزه! Bonus!

نمایش نظرات

Udemy (یودمی)

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

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

آموزش Modern React with Redux [به روز رسانی 2023]
جزییات دوره
37.5 hours
410
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
293,672
4.7 از 5
دارد
دارد
دارد
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

Stephen Grider Stephen Grider

معمار مهندسی