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

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

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

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

معرفی Intro

• معرفی Intro

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

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

• چرا واکنش نشان می دهیم؟ Why React?

• بررسی اجمالی فناوری Tech Overview

• React Router Overview React Router Overview

• بررسی اجمالی شار Flux Overview

• انتخاب یک محیط توسعه Picking a Development Environment

• بررسی اجمالی گره و npm Node and npm Overview

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

• بررسی اجمالی بسته وب Webpack Overview

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

• خلاصه Summary

تنظیم محیط Environment Setup

• معرفی Intro

• نصب گره Install Node

• VS Code را نصب کنید Install VS Code

• پیکربندی VS Code Extensions: Prettier و ESLint Configure VS Code Extensions: Prettier and ESLint

• برنامه ایجاد عکس العمل را اجرا کنید Run create-react-app

• Flux ، React Router و Bootstrap را نصب کنید Install Flux, React Router, and Bootstrap

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

• Mock API ایجاد کنید Create Mock API

• خلاصه Summary

واکنش به مفاهیم اصلی React Core Concepts

• معرفی Intro

• واکنش در برابر MVC React vs. MVC

• مقدمه JSX JSX Introduction

• DOM مجازی Virtual DOM

• بازنگری در مورد جدایی نگرانی ها Rethinking Separation of Concerns

• چهار راه برای اعلام مonلفه ها Four Ways to Declare Components

• کلاس در مقابل اجزای عملکرد Class vs. Function Components

• خلاصه Summary

ایجاد کامپوننت های React Creating React Components

• معرفی Intro

• نسخه ی نمایشی: مولفه عملکرد ایجاد کنید Demo: Create Function Component

• نسخه ی نمایشی: نقطه ورود برنامه را ایجاد کنید Demo: Create App Entry Point

• نسخه ی نمایشی: کامپوننت کلاس ایجاد کنید Demo: Create Class Component

• نسخه ی نمایشی: مسیریابی ساده Demo: Simple Routing

• خلاصه Summary

Props ، حالت ، روش های چرخه زندگی و کلیدها Props, State, Lifecycle Methods, and Keys

• معرفی Intro

• لوازم و دولت Props and State

• روش های چرخه زندگی Lifecycle Methods

• نسخه ی نمایشی: روش های چرخه زندگی و حالت Demo: Lifecycle Methods and State

• نسخه ی نمایشی: آرایه را از طریق نقشه در جدول نمایش دهید Demo: Display Array in a Table via Map

• کلیدها Keys

• خلاصه Summary

قلاب ، ترکیب کامپوننت و انواع اولیه آن Hooks, Component Composition, and PropTypes

• معرفی Intro

• قلاب Hooks

• نسخه ی نمایشی: قلاب Demo: Hooks

• ترکیب قطعات Composing Components

• نسخه ی نمایشی: نماهای کنترل کننده Demo: Controller Views

• انواع PropPypes و پیش فرض های پیش فرض PropTypes and Default Props

• خلاصه Summary

React Router React Router

• معرفی Intro

• بررسی اجمالی: اجزای کلیدی Overview: Key Components

• نسخه ی نمایشی: پیکربندی اولیه Demo: Initial Configuration

• نسخه ی نمایشی: اعلام مسیرها Demo: Declaring Routes

• پیوندها و NavLinks Links and NavLinks

• نسخه ی نمایشی: پیوندها Demo: Links

• نسخه ی نمایشی: NavLinks Demo: NavLinks

• سوئیچ و 404s Switch and 404s

• نسخه ی نمایشی: 404s Demo: 404s

• تغییر مسیر می دهد Redirects

• نسخه ی نمایشی: تغییر مسیرها Demo: Redirects

• پارامترهای URL و Querystrings URL Parameters and Querystrings

• نسخه ی نمایشی: پارامترهای URL Demo: URL Parameters

• سریع انتقال Prompt on Transition

• نسخه ی نمایشی: اعلان انتقال Demo: Prompt on Transition

• خلاصه Summary

تشکیل می دهد Forms

• معرفی Intro

• دکمه Add Course را ایجاد کنید Create Add Course Button

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

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

• دولت و فرم کنترل کننده ها را تغییر دهید Form State and Change Handlers

• اعلام كننده های تغییر وضعیت Declaring State Change Handlers

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

• مصرف ورودی های قابل استفاده مجدد Consuming Reusable Inputs

• ذخیره داده Saving Data

• هدایت برنامه ای با React Router Programmatic Redirects with React Router

• اعلان ها از طریق جز Party شخص ثالث Notifications via a Third Party Component

• اعتبار سنجی ورودی و انواع نمونه ها Input Validation and PropTypes

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

• خلاصه Summary

شار Flux

• معرفی Intro

• شار چیست؟ What Is Flux?

• سه مفهوم اصلی شار Three Core Flux Concepts

• اقدامات Actions

• دیسپچر Dispatcher

• مغازه ها Stores

• نماهای کنترل کننده Controller Views

• Flux Flow و گپ با Flux Flux Flow and a Chat With Flux

• Flux API Flux API

• خلاصه Summary

نسخه های نمایشی شار Flux Demos

• معرفی Intro

• دیسپچر Dispatcher

• اقدامات Actions

• فروشگاه ها: شنوندگان را تغییر دهید Stores: Change Listeners

• فروشگاه ها: ثبت نام Stores: Registration

• فروشگاه ها: ذخیره سازی خصوصی Stores: Private Storage

• فروشگاهها: تعاملات Stores: Interactions

• فروشگاهها: مقداردهی اولیه Stores: Initialization

• جریان دوره را با Flux به روز کنید Update Course Flow with Flux

• افزودن شنوندگان فروشگاه Adding Store Listeners

• حذف دوره از طریق Flux Delete Course via Flux

• خلاصه: قدم زدن در Flux Summary: Stepping through Flux

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