آموزش React Hooks - Master React Hooks Development

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

معرفی Introduction

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

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

معرفی Introduction

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

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

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

• مورد نیاز: نصب نرم افزار و دوره آموزشی Required: Software Installations and Course Repo

• مورد نیاز: نصب نرم افزار و دوره آموزشی Required: Software Installations and Course Repo

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

پروژه یک - شیرجه رفتن به توسعه قلاب Project One - Dive into Hooks Development

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

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

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

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

پروژه یک - شیرجه رفتن به توسعه قلاب Project One - Dive into Hooks Development

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

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

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

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

• UseEffect UseEffect

• UseEffect UseEffect

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

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

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

قلاب زیر کاپوت Hooks Under the Hood

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

قلاب زیر کاپوت Hooks Under the Hood

• پیش نمایش بخش - قلاب های زیر سرپوش Section Preview - 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

• UseState Under the Hood UseState Under the Hood

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

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

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

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

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

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

Project One ادامه دارد - React Hooks را بیشتر بیاموزید Project One Continued - Learn More React Hooks

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

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

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

Project One ادامه دارد - React Hooks را بیشتر بیاموزید Project One Continued - Learn More React Hooks

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

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

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

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

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

انعکاس در هوک - چرا Reflection on Hooks - the Why

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

انعکاس در هوک - چرا Reflection on Hooks - the Why

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

پروژه دوم - توسعه استاد قلاب Project Two - Master Hooks Development

• پیش نمایش پروژه دو Project Two Preview

• نمای کلی الگوی کاهش دهنده The Reducer Pattern Overview

• UseReducer for Tasks | قسمت 1 UseReducer for Tasks | Part 1

• UseReducer for Tasks | قسمت 2 UseReducer for Tasks | Part 2

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

• چالش و کد: کامپوننت MessageBoard Challenge and Code: MessageBoard Component

• UseContext و یک قلاب زمینه سفارشی UseContext and a Custom Context Hook

• معماری PubSub و Reducer The PubSub and Reducer Architecture

• PubNub را کاوش کنید Explore PubNub

• نام کاربری را تنظیم کنید Set Username

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

• خلاصه بخش و کد بخش Section Summary and Section Code

پروژه دوم - توسعه استاد قلاب Project Two - Master Hooks Development

• پیش نمایش پروژه دو Project Two Preview

• نمای کلی الگوی کاهش دهنده The Reducer Pattern Overview

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

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

• حالت کاهش دهنده واکنش ها Reactions Reducer State

• حالت کاهش دهنده واکنش ها Reactions Reducer State

• UseReducer for Tasks | قسمت 1 UseReducer for Tasks | Part 1

• UseReducer for Tasks | قسمت 2 UseReducer for Tasks | Part 2

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

• چالش و کد: کامپوننت MessageBoard Challenge and Code: MessageBoard Component

• UseContext و یک قلاب زمینه سفارشی UseContext and a Custom Context Hook

• معماری PubSub و Reducer The PubSub and Reducer Architecture

• PubNub را کاوش کنید Explore PubNub

• عملکرد PubSub و اتصال Reducer PubSub Function and Reducer Connection

• عملکرد PubSub و اتصال Reducer PubSub Function and Reducer Connection

• نام کاربری را تنظیم کنید Set Username

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

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

• جریان کاهش دهنده واکنش ها Reactions Reducer flow

• جریان کاهش دهنده واکنش ها Reactions Reducer flow

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

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

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

• خلاصه بخش و کد بخش Section Summary and Section Code

• خلاصه بخش و کد بخش Section Summary and Section Code

محتوای مرجع اختیاری: مرور کلی مگا جاوا اسکریپت Optional Reference Content: Mega JavaScript Overview

• قسمت 1 مروری بر مگا جاوا اسکریپت اختیاری Optional Mega JavaScript Overview Part 1

• قسمت 2 مروری بر مگا جاوا اسکریپت اختیاری Optional Mega JavaScript Overview Part 2

محتوای مرجع اختیاری: مرور کلی مگا جاوا اسکریپت Optional Reference Content: Mega JavaScript Overview

• قسمت 1 مروری بر مگا جاوا اسکریپت اختیاری Optional Mega JavaScript Overview Part 1

• قسمت 2 مروری بر مگا جاوا اسکریپت اختیاری Optional Mega JavaScript Overview Part 2

نتیجه Conclusion

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

نتیجه Conclusion

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

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

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