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

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

بررسی اجمالی دوره Course Overview

• بررسی اجمالی دوره Course Overview

معرفی Intro

• طرح کلی دوره Course Outline

• این دوره برای چه کسی است؟ Who Is This Course For?

• تفاوت این دوره با دوره React و Flux چیست؟ How Is This Different from the React and Flux Course?

• چرا ردوکس؟ Why Redux?

• خلاصه Summary

ساخت محیط Environment Build

• معرفی Intro

• نصب گره Install Node

• پرونده های تمرینی اولیه را باز کنید Open Initial Exercise Files

• معرفی Visual Studio Code Visual Studio Code Intro

• Prettier Intro Prettier Intro

• پیکربندی Prettier Configure Prettier

• تنظیمات اولیه پروژه را مرور کنید Review Initial Project Setup

• ایجاد ساختار اولیه برنامه Create Initial App Structure

• بسته وب: مقدمه Webpack: Intro

• Webpack: تنظیمات اصلی پیکربندی Webpack: Core Config Settings

• Webpack: سرور توسعه دهنده Webpack: Dev Server

• Webpack: پلاگین ها Webpack: Plugins

• Webpack: لودرها Webpack: Loaders

• معرفی بابل Babel Intro

• Babel را پیکربندی کنید Configure Babel

• Webpack را از طریق اسکریپت npm شروع کنید Start Webpack via npm Script

• اشکال زدایی و نقشه های منبع Debugging and Sourcemaps

• مدیریت خطای EADDRINUSE Handling EADDRINUSE Error

• معرفی ESLint ESLint Intro

• ESLint را پیکربندی کنید Configure ESLint

• خلاصه Summary

رویکردهای مonلفه را واکنش نشان دهید React Component Approaches

• معرفی Intro

• چهار راه برای ایجاد م Reلفه های واکنش پذیر Four Ways to Create React Components

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

• جز Class کلاس Class Component

• م Funلفه عملکرد Function Component

• مctionلفه عملکرد پیکان Arrow Function Component

• مزایای اجزای عملکردی Functional Component Benefits

• چه زمانی از کلاس در مقابل اجزای عملکرد استفاده کنید When to Use Class vs. Function Components

• کانتینر در مقابل اجزای ارائه Container vs. Presentation Components

• خلاصه Summary

ساختار اولیه برنامه Initial App Structure

• معرفی Intro

• صفحه اصلی ایجاد کنید Create Home Page

• ایجاد درباره صفحه Create About Page

• پیکربندی نقطه ورود برنامه Configure App Entry Point

• طرح بندی برنامه را ایجاد کنید Create App Layout

• ایجاد سربرگ Create Header

• صفحه 404 ایجاد کنید Create 404 Page

• صفحه دوره ایجاد کنید Create Course Page

• خلاصه Summary

معرفی Redux Intro to Redux

• معرفی Intro

• آیا به Redux نیاز دارم؟ Do I Need Redux?

• چه زمانی Redux مفید است؟ When Is Redux Helpful?

• سه اصل اصلی Redux Three Core Redux Principles

• Flux در مقابل Redux Flux vs. Redux

• بررسی اجمالی جریان Redux Redux Flow Overview

• خلاصه Summary

اقدامات ، فروشگاهها و گیرنده ها Actions, Stores, and Reducers

• معرفی Intro

• اقدامات Actions

• فروشگاه Store

• تغییرناپذیری چیست؟ What Is Immutability?

• چرا تغییرناپذیری؟ Why Immutability?

• مدیریت تغییر ناپذیری Handling Immutability

• کاهنده ها Reducers

• خلاصه Summary

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

• معرفی Intro

• کانتینر در مقابل اجزای ارائه Container vs. Presentational Components

• معرفی React-Redux React-Redux Introduction

• mapStateToProps mapStateToProps

• mapDispatchToProps mapDispatchToProps

• گپ با Redux A Chat with Redux

• خلاصه Summary

جریان Redux Redux Flow

• معرفی Intro

• فرم افزودن دوره ساده را ایجاد کنید Create Simple Add Course Form

• صحافی در کلاسها Binding in Classes

• دسته ارسال Handle Submit

• اقدام دوره ایجاد کنید Create Course Action

• Course Reducer و Root Reducer ایجاد کنید Create Course Reducer and Root Reducer

• فروشگاه ایجاد کنید Create Store

• فروشگاه و ارائه دهنده فوری Instantiate Store and Provider

• کامپوننت کانتینر را وصل کنید Connect Container Component

• مرحله Redux Flow را رد کنید و Redux DevTools را امتحان کنید Step through Redux Flow and Try Redux DevTools

• mapDispatchToProps: نقشه برداری دستی mapDispatchToProps: Manual Mapping

• mapDispatchToProps: bindActionCreators mapDispatchToProps: bindActionCreators

• mapDispatchToProps: فرم شیject mapDispatchToProps: Object Form

• ثابت نوع عمل Action Type Constants

• خلاصه Summary

Async در Redux Async in Redux

• معرفی Intro

• چرا Mock API؟ Why a Mock API?

• Mock API Setup Mock API Setup

• گزینه های Middleware و Async Library Middleware and Async Library Options

• مقدمه Thunk Thunk Introduction

• فرم مدیریت دوره داخلی را حذف کنید Remove Inline Manage Course Form

• First Thunk را اضافه کنید Add First Thunk

• مدیریت دوره های بارگیری در Reducer Handle Loading Courses in Reducer

• اعزام اقدامات در بار Dispatch Actions on Load

• ایجاد CourseList Create CourseList

• تمرین Redux Flow - بارگذاری و نمایش داده های نویسنده Practice Redux Flow - Load and Display Author Data

• دولت اولیه Redux را متمرکز کنید Centralize Initial Redux State

• خلاصه Summary

Async در Redux می نویسد Async Writes in Redux

• معرفی Intro

• صفحه مدیریت دوره را ایجاد کنید Create Manage Course Page

• فرم Object را از mapDispatchToProps پیاده سازی کنید Implement Object Form of mapDispatchToProps

• مسیریابی را برای ManageCoursePage پیکربندی کنید Configure Routing for ManageCoursePage

• تبدیل کامپوننت کلاس به م Funلفه عملکرد با قلاب Convert Class Component to Function Component with Hooks

• فرم دوره را ایجاد کنید Create Course Form

• اجزای قابل استفاده مجدد TextInput و SelectInput را ایجاد کنید Create Reusable TextInput and SelectInput Components

• با CourseForm در ManageCoursePage تماس بگیرید Call CourseForm on ManageCoursePage

• کنترل کننده تغییر متمرکز را پیاده سازی کنید Implement Centralized Change Handler

• Save Course Thunk و Action Creators را اضافه کنید Add Save Course Thunk and Action Creators

• ایجاد و به روز رسانی در Reducer Handle Creates and Updates in Reducer

• اعزام ایجاد و به روز رسانی Dispatch Create and Update

• تغییر مسیر از طریق کامپوننت Redirect روتر React Redirect via React Router's Redirect Component

• تغییر مسیر از طریق React Router's History Redirect via React Router's History

• فرم را از طریق mapStateToProps پر کنید Populate Form via mapStateToProps

• خلاصه Summary

وضعیت Async و مدیریت خطا Async Status and Error Handling

• معرفی Intro

• کامپوننت Spinner را ایجاد کنید Create Spinner Component

• ایجاد اقدامات وضعیت API Create API Status Actions

• با شروع API در Thunks تماس بگیرید Call Begin API in Thunks

• Spinner را به صفحات دوره اضافه کنید Add Spinner to Course Pages

• اضافه کردن فرم ارسال بار در حال بارگذاری Add Form Submission Loading Indicator

• خطاهای تأیید سمت سرور و API را مدیریت کنید Handle Server-side Validation and API Errors

• اعتبار سنجی سمت مشتری را پیاده سازی کنید Implement Client-side Validation

• خوش بین حذف می شود Optimistic Deletes

• Async/منتظر باشید Async/Await

• خلاصه Summary

آزمایش React Testing React

• معرفی Intro

• آزمایش چارچوب ها و کتابخانه ها Testing Frameworks and Libraries

• Jest را پیکربندی کنید Configure Jest

• با آزمایشات عکس فوری عکس العمل نشان دهید Test React with Jest Snapshot Tests

• با آنزیم واکنش نشان دهید Test React with Enyzme

• با کتابخانه تست واکنش واکنش نشان دهید Test React with React Testing Library

• خلاصه Summary

در حال آزمایش Redux Testing Redux

• معرفی Intro

• بررسی اجمالی: آزمایش اجزای واکنش متصل Overview: Testing Connected React Components

• تست اجزای واکنش متصل Testing Connected React Components

• آزمایش سازندگان اقدام Testing Action Creators

• درحال آزمایش Thunks Testing Thunks

• تست گیرنده ها Testing Reducers

• در حال آزمایش فروشگاه Testing the Store

• خلاصه Summary

تولید ایجاد می کند Production Builds

• معرفی Intro

• بررسی اجمالی طرح ساخت تولید Production Build Plan Overview

• فروشگاه تولید Redux را راه اندازی کنید Set up Production Redux Store

• Webpack را تنظیم کنید Set up Webpack

• npm اسکریپت ها را تنظیم کنید Set up npm Scripts

• ساخت تولید و بررسی محتوای بسته نرم افزاری Run Production Build and Review Bundle Content

• برنامه تولید را به صورت محلی اجرا کنید Run Production App Locally

• چالش های نهایی Final Challenges