آموزش با توسعه تست محور واکنش نشان دهید

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

معرفی Introduction

• معرفی Introduction

• روش شناسی Methodology

• ابزارهای توسعه Development Tools

• ایجاد پروژه Create Project

• کد منبع پروژه Project Source Code

• منابع Resources

ثبت نام Sign Up

• جزء اول First Component

• طرح بندی - فرم ثبت نام Layout - Sign Up Form

• تعاملات فرم Form Interactions

• درخواست Api - ثبت نام کنید Api Request - Sign Up

• کارگر خدمات مسخره و ساختگی (MSW) Mocking & Mock Service Worker (MSW)

• پروکسی Proxy

• طراحی ظاهر Styling

• شاخص پیشرفت Progress Indicator

• طرح بندی - ثبت نام با موفقیت Layout - Sign Up Success

• Refactor - Test Lifecycle & Async Await Refactor - Test Lifecycle & Async Await

اعتبار سنجی Validation

• نمایش خطاهای اعتبارسنجی Displaying Validation Errors

• Enable Button After Validation Error Enable Button After Validation Error

• Mock Service Worker - Override Handler Mock Service Worker - Override Handler

• جزء - ورودی Component - Input

• ورودی یک ظاهر طراحی شده Styling Input

• نمایش خطاها برای ورودی های باقی مانده Displaying Errors for Remaining Inputs

• اعتبار سنجی سمت مشتری Client-side Validation

• پنهان کردن خطاها Hiding Errors

بین المللی - i18n Internationalization - i18n

• بین المللی - i18n Internationalization - i18n

• انتخاب زبان Language Selection

• جزء - انتخابگر زبان Component - LanguageSelector

• ترجمه اعتبارسنجی Validation Translation

• هدر زبان را در درخواست Api بپذیرید Accept Language Header in Api Request

• Refactor - ماژول درخواست Api Refactor - Api Request Module

مسیریابی Routing

• مسیریابی سمت مشتری Client-side Routing

• طرح بندی - نوار نوار Layout - NavBar

• یک ظاهر طراحی شده NavBar Styling NavBar

• هشدار نسخه روتر React React Router Version Warning

• روتر واکنش React Router

• چرخه حیات کامپوننت Component Lifecycle

• مسیر برای AccountActivationPage Route for AccountActivationPage

• درخواست Api - فعال سازی حساب Api Request - Account Activation

• لیست وابستگی useEffect Dependency List of useEffect

• شاخص پیشرفت - فعال سازی حساب Progress Indicator - Account Activation

• کامپوننت - هشدار و اسپینر Component - Alert & Spinner

• Async/Await in useEffect Async/Await in useEffect

• جزء مرتبه بالاتر - HoC Higher Order Component - HoC

• قلاب Hooks

لیست کاربر و صفحه کاربر User List and User Page

• جزء - لیست کاربران Component - UserList

• صفحه بندی در ماژول تست Pagination in Test Module

• صفحه بعدی و قبلی Next & Previous Page

• پیوند به صفحه کاربری Link to UserPage

• کامپوننت - UserListItem Component - UserListItem

• کلید در حلقه Key in Loop

• ترجمه Translation

• نشانگر پیشرفت - بارگیری لیست کاربر Progress Indicator - Load User List

• درخواست طرح‌بندی و Api برای صفحه کاربری Layout & Api Request for UserPage

• نشانگر پیشرفت - بار کاربر Progress Indicator - Load User

• طرح بندی - کاربر پیدا نشد Layout - User Not Found

وارد شدن Login

• طرح بندی - صفحه ورود Layout - LoginPage

• تعاملات فرم Form Interactions

• درخواست Api - ورود Api Request - Login

• خطا احراز هویت Authentication Error

• ترجمه Translation

• مسیریابی پس از احراز هویت موفق Routing After Successful Authentication

• کامپوننت - ButtonWithProgress Component - ButtonWithProgress

مدیریت دولت مشتری Client State Management

• Layout - NavBar بعد از ورود - حالت بالا بردن Layout - NavBar After Login - Lifting State Up

• کامپوننت - نوار نوار Component - NavBar

• حفاری پایه Prop Drilling

• متن نوشته Context

• Refactor - تنظیمات زمینه و تست Refactor - Context & Test Setup

• Redux Redux

• از Redux در NavBar استفاده کنید Use Redux in NavBar

• از Redux در LoginPage استفاده کنید Use Redux in LoginPage

• Refactor - Redux Refactor - Redux

• ذخیره سازی وضعیت در LocalStorage Storing State in LocalStorage

• LocalStorage Abstraction LocalStorage Abstraction

• رمزگذاری LocalStorage LocalStorage Encryption

• ذخیره اعتبار Storing Credentials

درخواست های تایید شده Authenticated Requests

• طرح بندی - به روز رسانی کاربر Layout - User Update

• درخواست Api - به روز رسانی کاربر Api Request - User Update

• به روز رسانی با موفقیت Update Success

• لغو به‌روزرسانی Cancel Update

• رفع - بارگذاری مجدد کاربر پس از پیمایش Fix - Reload User After Navigation

• لیست کاربران آگاه احراز هویت Authentication Aware UserList

• خروج Logout

• Layout - دکمه حذف کاربر Layout - User Delete Button

• جزء - معین Component - Modal

• کاربر حذف لغو User Delete Cancel

• کاربر حذف تایید User Delete Confirm

• وضعیت جهانی پس از حذف کاربر Global State After Deleting User

• Redux - Action Creator Redux - Action Creator