آموزش React و Redux پیشرفته

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

خوش آمدی! بیا شروع کنیم! Welcome! Let's Get Started!

• معرفی Introduction

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

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

آزمایش کردن Testing

• صفحه دیگ مورد نیاز - رد نشوید Required Boilerplate - DO NOT SKIP

• تولید پروژه Project Generation

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

• مقدمه ای بر جست Introduction to Jest

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

• نصب Dependencies Installing Dependencies

• React و Redux Design React and Redux Design

• چه چیزی را تست می کنیم؟ What Do We Test?

• شروع از صفر Starting from Scratch

• رندر کردن برنامه Rendering the App

• نمایش کامپوننت ها در برنامه Showing Components in the App

• نام فایل های آزمایشی معتبر Valid Test File Names

• ساختار تست Test Structure

• فریب واکنش با JSDOM Tricking React with JSDOM

• تأیید وجود مؤلفه Verifying Component Existence

• انتظارات آزمون Test Expectations

• محدود کردن دانش آزمون Limiting Test Knowledge

• تنظیم آنزیم Enzyme Setup

• رندرهای آنزیمی Enzyme Renderers

• انتظارات برای نمونه های مؤلفه Expectations for Component Instances

• زمان ورزش! Exercise Time!

• در انتظار لیست نظرات Expecting the Comment List

• واردات مسیر مطلق Absolute Path Imports

• استفاده مجدد از کد با BeforeEach Code Reuse with BeforeEach

• جزء جعبه نظر Comment Box Component

• پیاده سازی TextArea TextArea Implementation

• فایل تست CommentBox CommentBox Test File

• اثبات وجود عنصر Asserting Element Existence

• بعد از هر بیانیه AfterEach Statements

• شبیه سازی رویدادهای تغییر Simulating Change Events

• ارائه رویدادهای جعلی Providing Fake Events

• اجبار به‌روزرسانی‌های مؤلفه Forcing Component Updates

• بازیابی مقادیر Prop Retrieving Prop Values

• فرم ارسال تمرین Form Submit Exercise

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

• بیانیه ها را شرح دهید Describe Statements

• تنظیم Redux Redux Setup

• تگ ارائه دهنده The Provider Tag

• SaveComment Action Creator The SaveComment Action Creator

• باندینگ واکنش با Redux Bonding React with Redux

• خطاهای تست Redux Redux Test Errors

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

• کاهش دهنده های تست Testing Reducers

• رسیدگی به انواع ناشناخته Handling Unknown Types

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

• Wireup لیست نظرات Comment List Wireup

• دریافت داده ها در Redux Getting Data Into Redux

• حالت اولیه Redux Redux Initial State

• پرس و جوهای Cheerio Cheerio Queries

• یک ویژگی دیگر One More Feature

• واکشی یک منبع از راه دور Fetching a Remote Resource

• تجزیه فهرست نظرات Parsing Comment List

• تست های یکپارچه سازی Integration Tests

• تست های یکپارچه سازی در عمل Integration Tests in Action

• رفع تست شکستگی Fixing a Broken Test

• شبیه سازی کلیک دکمه ها Simulating Button Clicks

• چرا شکست؟ Why the Failure?

• جعل درخواست با Moxios Faking Requests with Moxios

• دلیل شکست The Reason for Failure

• معرفی یک مکث Introducing a Pause

• تابع انتظار Moxios Moxios's Wait Function

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

مولفه های مرتبه بالاتر Higher Order Components

• مقدمه ای بر مولفه های مرتبه بالاتر An Introduction to Higher Order Components

• اتصال - یک جزء مرتبه بالاتر Connect - A Higher Order Component

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

• اضافه شدن React Router Adding React Router

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

• Auth Reducer Auth Reducer

• رندر کردن هدر Rendering a Header

• حالت سیم کشی Wiring Up State

• تغییر وضعیت احراز هویت Changing Auth State

• مراحل ساخت HOC Steps for Building a HOC

• ناوبری اجباری با روتر React Forced Navigation with React Router

• ایجاد HOC Creating the HOC

• قرار دادن منطق قابل استفاده مجدد Placing Reusable Logic

• عبور از پروپ Passing Through Props

MIddlewares با Redux MIddlewares with Redux

• مقدمه ای بر Middlewares Introduction to Middlewares

• هدف از Redux Promise The Purpose of Redux Promise

• Async Middlewares چگونه کار می کند How Async Middlewares Work

• نحو دیوانه میان افزار Crazy Middleware Syntax

• اقدامات حمل و نقل Forwarding Actions

• در انتظار حل و فصل وعده Waiting for Promise Resolution

• مشاهده میان افزار Observing the Middleware

• میان افزار اعتبار سنجی دولتی State Validation Middleware

• طرحواره JSON JSON Schema

• ایجاد طرحواره JSON Generating JSON Schema

• ایجاد میان افزار Middleware Creation

• انتشار هشدارها Emitting Warnings

راه اندازی سرور - احراز هویت Server Setup - Authentication

• مقدمه ای بر احراز هویت Introduction to Authentication

• کوکی ها در مقابل توکن ها Cookies vs Tokens

• معماری مقیاس پذیر Scalable Architecture

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

• تنظیمات بیشتر سرور More Server Setup

• Express Middleware Express Middleware

• کنترل کننده مسیر اکسپرس Express Route Handler

• مدل های مونگوس Mongoose Models

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

• بازرسی پایگاه داده Inspecting the Database

• کنترل کننده احراز هویت Authentication Controller

• جستجو برای کاربران Searching for Users

• ایجاد سوابق کاربر Creating User Records

• رمزگذاری رمزهای عبور با Bcrypt Encrypting Passwords with Bcrypt

• نمک زدن رمز عبور Salting a Password

• بررسی اجمالی JWT JWT Overview

• ایجاد JWT Creating a JWT

• نصب پاسپورت Installing Passport

• استراتژی های پاسپورت Passport Strategies

• استفاده از استراتژی ها با پاسپورت Using Strategies with Passport

• ایجاد یک درخواست احراز هویت Making an Authenticated Request

• ورود به سیستم با استراتژی محلی Signing in with Local Strategy

• هدف استراتژی محلی Purpose of Local Strategy

• دایره کامل Bcrypt Bcrypt Full Circle

• محافظت از مسیر ورود Protecting Signin Route

• ورود کاربران به Signing Users In

• بررسی سرور Server Review

تایید سمت مشتری Client Side Auth

• صفحه دیگ مورد نیاز - رد نشوید Required Boilerplate - DO NOT SKIP

• نمای کلی مشتری Client Overview

• Lib نصب می کند Lib Installs

• مؤلفه برنامه The App Component

• ایجاد هدر Creating the Header

• سیم کشی روتر React Wiring Up React Router

• داربست کردن فرم ثبت نام Scaffolding the Signup Form

• از جمله Redux Including Redux

• ReduxForm برای ثبت نام ReduxForm for Signup

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

• سیم کشی میان افزار Wiring Up Middleware

• مبانی Redux Thunk Basics of Redux Thunk

• فراخوانی API Calling the API

• پاکسازی کد با Compose Code Cleanup with Compose

• CORS به طور خلاصه CORS in a Nutshell

• راه حل برای خطاهای CORS Solution to CORS Errors

• عملیات اعزام Dispatching Actions

• نمایش خطاهای احراز هویت Displaying Auth Errors

• تغییر مسیر در ثبت نام Redirect on Signup

• جزء ویژگی Feature Component

• نیاز به Auth HOC The Require Auth HOC

• مرجع - کد HOC Reference - HOC Code

• وضعیت ورود مداوم Persisting Login State

• خروج از سیستم کاربر Signing Out a User

• خروج خودکار Automatic Sign Out

• مؤلفه ورود The Signin Component

• Signin Action Creator The Signin Action Creator

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

• یک ظاهر طراحی هدر Header Styling

• Auth Wrapup Auth Wrapup

نکته مهم - البته نسخه قدیمی - React v14 Important - OLD VERSION OF COURSE - React v14

• یادداشت در مورد سخنرانی های زیر Note on the Following Lectures

• توجه داشته باشید Note

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

• مشخصات اول A First Spec

• تست هسته - توصیف، آن، انتظار Core Testing - Describe, It, Expect

• هدف از توصیف، آن و انتظار Purpose of Describe, It, and Expect

• گزارش تست Test Reporting

• ساختار تست Test Structure

• مدل های ویژه Feature Mockups

• تنظیم ساختار تست Test Structure Setup

• تست های جعبه نظر Comment Box Tests

• تست اسامی کلاس ها Testing Class Names

• استفاده از BeforeEach برای فشرده سازی تست ها Using beforeEach to Condense Tests

• انتظار عناصر کودک Expecting Child Elements

• شبیه سازی رویدادها Simulating Events

• تست اجزای کنترل شده Testing Controlled Components

• فرم ارسال رویداد Form Submit Event

• فهرست نظرات خرد Stub Comment List

• انتظارات در مورد محتوا Expectations on Content

• اظهارات با لیست ها Assertions with Lists

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

• میانبرهای Action Creator Action Creator Shortcuts

• کاهش دهنده نظرات TDD TDD Comments Reducer

• خرابی مشخصات پس از تغییر کد Spec Failures After Code Change

• هدف چای و موکا Purpose of Chai and Mocha

• بررسی برنامه App Review

• تست کمکی از ابتدا Test Helper From Scratch

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

• راه اندازی بیشتر JSDom More JSDom Setup

• کتابخانه TestUtils TestUtils Library

• تعریف RenderComponent Defining RenderComponent

• در حال تکمیل RenderComponent Helper Finishing RenderComponent Helper

• شبیه سازی Helper Simulate Helper

• بررسی کمکی تست Test Helper Review

• جزء مرتبه بالاتر چیست؟ What is a Higher Order Component?

• اتصال و ارائه دهنده Connect and Provider

• بررسی اجمالی HOC احراز هویت Authentication HOC Overview

• تنظیم سرصفحه Header Setup

• راه اندازی روتر React React Router Setup

• کاهش دهنده احراز هویت Authentication Reducer

• Action Creator Hookup Action Creator Hookup

• مؤلفه مرتبه بالاتر احراز هویت Authentication Higher Order Component

• کد داربست HOC HOC Scaffold Code

• تودرتو مولفه های مرتبه بالاتر Nesting Higher Order Components

• دسترسی به React Router در زمینه Accessing React Router on Context

• ویژگی های سطح کلاس Class Level Properties

• رسیدگی به موارد لبه HOC Handling HOC Edge Cases

• بررسی اجزای سفارش بالاتر Higher Order Components Review

• بررسی اجمالی میان افزار Middleware Overview

• طرح ساخت اپلیکیشن App Building Plan

• کاهش دهنده کاربران Users Reducer

• Static Users Action Creator Static Users Action Creator

• ارائه فهرستی از کاربران Rendering a List of Users

• پاکسازی CSS CSS Cleanup

• دردهای بدون میان افزار Pains Without Middleware

• پشته میان افزار Middleware Stack

• میان افزارهای داخلی Middleware Internals

• رسیدگی به اقدامات نامرتبط Handling Unrelated Actions

• رسیدگی به وعده ها Handling Promises

• بررسی میان افزار Middleware Review

• راه اندازی مشتری Client Setup

• معماری اپلیکیشن App Architecture

• طراحی مولفه و حالت Component and State Design

• کامپوننت هدر Header Component

• داربست کردن فرم ثبت نام Scaffolding the Signin Form

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

• اکشن خالق با مسئولیت های فراوان Action Creator with Many Responsibilities

• معرفی Redux Thunk Introducing Redux Thunk

• Signin Action Creator Signin Action Creator

• CORS به طور خلاصه CORS In a Nutshell

• راه حل سرور برای CORS Serverside Solution for CORS

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

• در حال به روز رسانی Auth State Updating Auth State

• تنفس و بررسی Breather and Review

• LocalStorage و JWT LocalStorage and JWT

• Auth Error Messaging Auth Error Messaging

• نمایش خطاها Displaying Errors

• منطق سرصفحه Header Logic

• خروج از کامپوننت Signout Component

• از Action Creator خارج شوید Signout Action Creator

• جزء ثبت نام Signup Component

• داربست فرم ثبت نام Signup Form Scaffolding

• اعتبار سنجی فرم Redux Redux Form Validation

• پیاده سازی منطق اعتبارسنجی Implementing Validation Logic

• بیشتر در مورد اعتبار سنجی More On Validation

• Signup Action Creator Signup Action Creator

• تکمیل ثبت نام Finish Up Signup

• ایمن سازی مسیرهای فردی Securing Individual Routes

• Root IndexRoute Root IndexRoute

• احراز هویت خودکار کاربران Automatically Authenticating Users

• ایجاد درخواست های API احراز هویت شده Making Authenticated API Requests

• مدیریت داده ها از درخواست های احراز هویت شده Handling Data from Authenticated Requests

• جمع بندی احراز هویت Authentication Wrapup

موارد اضافی Extras

• جایزه! Bonus!