آموزش React JS و Redux Bootcamp - Master React Web Development

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

معرفی Introduction

• آنچه از شرکت در این دوره به دست خواهید آورد What You’ll Get From Taking this Course

• بررسی 7 متری توسعه وب و React A 7m Overview of Web Development and React

• [مهم] مخزن دوره و نصب نرم افزار [IMPORTANT] Course Repo and Software Installations

• اختیاری برای ویندوز: زیرسیستم ویندوز را برای لینوکس و VSCode نصب کنید Optional For Windows: Install the Windows Subsystem for Linux and VSCode

به React خوش آمدید | اولین برنامه React Welcome to React | First React Application

• نمای کلی بخش | اولین برنامه React Section Overview | First React Application

• برنامه نمونه کارها را تنظیم کنید - بازبینی شده Set up the Portfolio App - Revised

• React App و React Project Structure - Revised را اجرا کنید Run the React App and the React Project Structure - Revised

• ReactDOM، Elements و JSX - تجدید نظر شده است ReactDOM, Elements, and JSX - Revised

• A React Component - تجدید نظر شده A React Component - Revised

• کلاس ها - بررسی اجمالی Classes - Overview

• کلاس‌ها، وراثت، و نگاهی دقیق‌تر به مؤلفه‌ها Classes, Inheritance, and a Closer Component Look

• حالت State

• SetState SetState

• یک قانون React: هرگز مستقیماً حالت را تغییر ندهید A React Rule: Never Directly Modify State

• ویژگی های کلاس و آغازگرها Class Properties and Initializers

• جزء 2: پروژه ها Component 2: Projects

• لوازم و مولفه پروژه Props and Project Component

• چالش: مولفه پروفایل های اجتماعی Challenge: Social Profiles Component

• کد: جزء پروفایل های اجتماعی Code: Social Profiles Component

• با میوه های حالت دار کم آویزان بپوشانید Wrap up with Low-Hanging Styling Fruit

• خلاصه بخش Section Summary

شکستن React | React و توسعه وب Breaking down React | React and Web Development

• نمای کلی بخش Section Overview

• واکنش از ابتدا - تجدید نظر شده است React from Scratch - Revised

• کامپایل، بسته بندی، و نگاهی دقیق تر به JSX - بازبینی شده Compiling, Bundling, and a Closer Look at JSX - Revised

• نمونه کارها را برای استفاده از بسته اصلاح کنید - اصلاح شده Refactor the Portfolio to use Parcel - Revised

• بررسی ضرورت باندلرها و ترانسپایلرها The Necessity of Bundlers and Transpilers Review

• DOM و DOM مجازی React The DOM and React’s Virtual DOM

• خلاصه بخش Section Summary

ادامه مفاهیم اصلی React Continued Main React Concepts

• پیش نمایش بخش Section Preview

• روش‌های چرخه حیات و componentDidMount Lifecycle Methods and componentDidMount

• ComponentWillUnmount ComponentWillUnmount

• [اختیاری] عنوان محو [Optional] Title Fade

• اجزای عملکردی بدون تابعیت Stateless Functional Components

• [اختیاری] نمای کلی HTTP [Optional] HTTP Overview

• کامپوننت واکشی و جوک Fetch and a Jokes Component

• چالش و کد: ده جوک دیگر Challenge and Code: Ten More Jokes

• Fetch Under the Hood: Promises Fetch Under the Hood: Promises

• React Router - تجدید نظر شده است React Router - Revised

• کامپوننت سرصفحه - اصلاح شده Header Component - Revised

• مولفه های مرتبه بالاتر - تجدید نظر شده Higher Order Components - Revised

• خلاصه بخش Section Summary

پروژه Core React: MusicMaster 2.0 Core React Project: MusicMaster 2.0

• پیش نمایش بخش و پروژه Section and Project Preview

• Music Master و الگوی برنامه React خودتان را تنظیم کنید - بازبینی شده Set up Music Master and Your Own React App Template - Revised

• ردیابی ورودی کاربر در ایالت Track User Input in the State

• چالش و کد: آهنگ های برتر یک هنرمند را جستجو کنید Challenge and Code: Search an Artist’s Top Tracks

• چالش و کد: جزء هنرمند Challenge and Code: Artist Component

• کامپوننت آهنگ Tracks Component

• جستجوی مؤلفه و وضعیت بالا بردن در پشتیبان تماس Search Component and Lifting State Up in Callback Props

• یک ظاهر طراحی شده لمس پایان Styling Finishing Touches

• شامل Music Master در نمونه کارها - اصلاح شده Include Music Master in Portfolio - Revised

• خلاصه بخش Section Summary

بررسی مفاهیم Core React Core React Concepts Review

• بررسی Core React Core React Review

• Core React - واژه نامه اصطلاحات کلیدی Core React - Glossary of Key Terms

Redux و Advanced React بیشتر Redux and more Advanced React

• پیش نمایش بخش و پروژه Section and Project Preview

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

• زوج یا شانس و فروشگاه Redux را تنظیم کنید - بازبینی شده است Set Up Evens or Odds and the Redux Store - Revised

• Reducers - تجدید نظر شده Reducers - Revised

• اقدامات - تجدید نظر شده است Actions - Revised

• Action Creators - تجدید نظر شده Action Creators - Revised

• به روز رسانی Root Reducer و اپراتور Spread - تجدید نظر شده است Root Reducer Update and the Spread Operator - Revised

• تقسیم لایه های Redux - تجدید نظر شده Split the Redux Layers - Revised

• React Components را به Redux متصل کنید - اصلاح شده Connect React Components to Redux - Revised

• UI مبتنی بر Redux Redux-based UI

• ارسال نقشه به Props Map Dispatch to Props

• چالش و کد: دستورالعمل های تعاملی Challenge and Code: Interactive Instructions

• واکشی دسته کارت Fetch Deck of Cards

• توجه: Deckofcardsapi خط مشی CORS خود را به روز کرد Note: The deckofcardsapi updated their CORS policy

• CORS و سیاست مبدا یکسان CORS and Same Origin Policy

• اقدامات همگام Async Actions

• Redux Middleware - تجدید نظر شده Redux Middleware - Revised

• دسته Fetch Cases Handle Fetch Cases

• تقسیم و ترکیب کاهنده ها | تجدید نظر شده است Split up and Combine Reducers | Revised

• جزء DrawCard DrawCard Component

• چالش و کد: رسم کارت Redux Flow Challenge and Code: Draw Card Redux Flow

• چالش و کد: جزء کارت Challenge and Code: Card Component

• چالش و کد: منطق و مؤلفه Redux را حدس بزنید | تجدید نظر شده است Challenge and Code: Guess Redux Logic and Component | Revised

• حدس های صحیح را پیگیری کنید Track Correct Guesses

• رکورد حدس صحیح و ذخیره محلی Correct Guess Record and Local Storage

• شامل زوج یا شانس در نمونه کارها | تجدید نظر شده است Include Evens or Odds in Portfolio | Revised

• خلاصه بخش Section Summary

پروژه Redux: Reaction Redux Project: Reaction

• پیش نمایش بخش و پروژه Section and Project Preview

• انتشار/اشتراک با Redux Publish/Subscribe with Redux

• برنامه Reaction را راه اندازی کنید Set Up the Reaction App

• کاوش PubNub PubNub Exploration

• کلاس PubSub و اتصال Redux PubSub Class and Redux Connection

• پیام های Redux Flow Messages Redux Flow

• انتشار مولفه پیام Publish Message Component

• React Context React Context

• Redux Devtools Redux Devtools

• چالش و کد: جزء تابلوی پیام Challenge and Code: Message Board Component

• چالش و کد: نام کاربری در Redux Challenge and Code: Username in Redux

• نام کاربری در پیام ها Username in Messages

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

• واکنش های Redux Flow Reactions Redux Flow

• واکنش را منتشر کنید Publish Reaction

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

• Reaction را در پورتفولیو قرار دهید Include Reaction in Portfolio

• خلاصه بخش Section Summary

بررسی Redux Redux Review

• بررسی Redux Redux Review

• Redux - واژه نامه اصطلاحات کلیدی Redux - Glossary of Key Terms

API های Backend را برای React Apps ایجاد کنید Create Backend APIs for React Apps

• نمای کلی بخش Section Overview

• برنامه News و سرور اکسپرس را تنظیم کنید Set Up News App and Express Server

• GET Stories و Nodemon GET Stories and Nodemon

• Express Middleware و CORS Express Middleware and CORS

• درخواست یک API در یک API Request an API within an API

• کنترل کننده خطا Error Handler

• موارد برتر داستان Top Story Items

• Spotlight: Deck of Cards و Spotify Wrapper API Spotlight: Deck of Cards and Spotify Wrapper APIs

• News React Client را راه اندازی کنید و یک React App را با Express ارائه دهید Set up News React Client and Serve a React App with Express

• چالش و کد: داستان‌ها را واکشی و نمایش دهید Challenge and Code: Fetch and Display Stories

• خلاصه بخش Section Summary

React App Deployment React App Deployment

• نمای کلی بخش Section Overview

• Github Walkthrough Github Walkthrough

• استقرار هیروکو Heroku Deployment

• خلاصه بخش Section Summary

• خلاصه بخش Section Summary

React Hooks بخش 1 - شیرجه رفتن به توسعه قلاب React Hooks Section 1 - Dive into Hooks Development

• پیش نمایش پروژه یک Project One Preview

• راه اندازی پروژه یک | تجدید نظر شده است Set Up Project One | Revised

• هوک اول: useState | تجدید نظر شده است First Hook: useState | Revised

• useEffect useEffect

• چالش و کد: کامپوننت داستان ها با UseEffect | تجدید نظر شده است Challenge and Code: Stories Component with UseEffect | Revised

• ساخت یک قلاب سفارشی: useFetch Build a Custom Hook: useFetch

• [اختیاری] کلمه کلیدی تابع در مقابل توابع پیکان [Optional] Function Keyword vs Arrow Functions

React Hooks بخش 2 - Hooks Under the Hood React Hooks Section 2 - Hooks Under the Hood

• پیش نمایش بخش - قلاب های زیر سرپوش Section Preview - Hooks Under the Hood

• React Runtime و How React Applies Hooks The React Runtime and How React Applies Hooks

• UseState Under the Hood UseState Under the Hood

• مولفه وظایف بخش 1: قلاب های حالت چند منظوره Tasks Component Part 1: Multiple useState hooks

• بخش وظایف بخش 2 Tasks Component Part 2

• ترتیب استفاده از وضعیت The Order of UseState

• فضای ذخیره‌سازی محلی برای Tasks Local Storage for Tasks

• قلاب با فاصله Hooks with an Interval

• جلوه ها با پاکسازی Effects with Cleanup

• تاخیر و افزایش دینامیک Dynamic Delay and Increment

• چالش و کد: جزء ماتریس Challenge and Code: Matrix Component

• ساخت یک قلاب سفارشی: useDynamicTransition Build a Custom Hook: useDynamicTransition

React Hooks بخش 3 - تأملی در مورد چرایی قلاب ها React Hooks Section 3 - Reflection on the Why of Hooks

• چرا قلاب The Why of Hooks

محتوای عمقی جاوا اسکریپت اختیاری Optional In-Depth JavaScript Content

• کنسول، اپراتورها و متغیرها The Console, Operators, and Variables

• Booleans و Conditionals Booleans and Conditionals

• نحو - نقطه ویرگول و نظرات Syntax - Semicolons and Comments

• تعریف نشده و ابتدایی Undefined and Primitives

• آرایه ها Arrays

• اشیاء Objects

• حلقه ها و تکرار Loops and Iteration

• توابع - اعلان ها در مقابل عبارات Functions - Declarations vs. Expressions

• توابع پیکان Arrow Functions

• روش ها و کلمه کلیدی «این». Methods and the `this` Keyword

• بیشتر در مورد "این" و عبارات تابع در مقابل توابع پیکان More on `this` and Function Expressions vs. Arrow functions

• سوال مصاحبه | کلمه کلیدی "این". Interview Question | The `this` Keyword

• تماس های تلفنی Callbacks

• سوال مصاحبه | تماس های تلفنی Interview Question | Callbacks

• زبان پویا و انواع A Dynamic Language and Types

• تقریباً همه چیز یک شی است Almost Everything is an Object

• مساوات و نوع اجبار Equality and Type Coercion

• تهی در مقابل تعریف نشده Null vs. Undefined

• تبدیل نوع صریح Explicit Type Conversion

• سوال مصاحبه | انواع جاوا اسکریپت Interview Question | JavaScript Types

• Let، Const و Mutability Let, Const, and Mutability

• Let، Const، Var و Scope Let, Const, Var, and Scope

• Var and Function Hoisting Var and Function Hoisting

• سوال مصاحبه | دامنه و بالا بردن Interview Question | Scope and Hoisting

• Template Literals و Tenary Operators Template Literals and Ternary Operators

• مختصر نویسی و واگذاری ساختاری The Property Shorthand and Destructuring Assignment

• روش های شی Object methods

• نحو را گسترش دهید Spread Syntax

• Object.is، References و Shallow Clone Object.is, References, and Shallow Clone

• JSON.parse، JSON.stringify، و تلاش برای شبیه‌سازی عمیق JSON.parse, JSON.stringify, and an Attempt at Deep Cloning

• سفارشی و Lodash CloneDeep Custom and Lodash CloneDeep

• سوال مصاحبه | شبیه سازی یک شی Interview Question | Cloning an Object

• بسته شدن Closures

• کارخانجات عملکردی Function Factories

• توابع مرتبه بالاتر Higher Order Functions

• سوال مصاحبه | بسته شدن، توابع درجه بالاتر، و پاسخ به تماس Interview Question | Closures, Higher-Order Functions, and Callbacks

نتیجه Conclusion

• تبریک و اظهارات پایانی Congratulations and Final Remarks

• محتوای پاداش! Bonus Content!