آموزش کار با State های Refactoring, Deriving در ReactJS

مدیریت کل اعتبار کامل فرم به تمرین: فرم ها - مشکل برای تمرین: فرم ها - راه حل یک ورودی سفارشی housed hookreusing چالش سفارشی قلاب برای شما! استفاده از قلاب و دانش ما به یک formummarbonus جدید: با استفاده از usereducer ()

عنوان اصلی : Refactoring and Deriving States

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

پروژه تمرین: افزودن HTTP و فرم‌ها به برنامه سفارش غذا:
معرفی ماژول
انتقال داده های "غذاهای غذایی" به Backend
واکشی وعده های غذایی از طریق HTTP
مدیریت وضعیت بارگیری
رسیدگی به خطاها
افزودن فرم پرداخت
خواندن مقادیر فرم
افزودن اعتبار سنجی فرم
ارسال و ارسال اطلاعات سبد خرید
افزودن بازخورد بهتر کاربر
خلاصه

غواصی در Redux:
معرفی ماژول
نگاهی دیگر به وضعیت در React Apps
Redux در مقابل React Context
Redux چگونه کار می کند
کاوش در مفاهیم اصلی Redux
مبانی بیشتر Redux
آماده سازی یک پروژه جدید
ایجاد فروشگاه Redux برای React
ارائه فروشگاه
استفاده از Redux Data در React Components
توزیع اقدامات از اجزای داخلی
Redux با کامپوننت‌های مبتنی بر کلاس
پیوست کردن Payloads به Actions
کار با چندین ویژگی دولتی
نحوه کار با Redux State به درستی
چالش های Redux و معرفی Redux Toolkit
افزودن برش های حالت
اتصال وضعیت Redux Toolkit
انتقال همه چیز به Redux Toolkit
کار با چند برش
خواندن و ارسال از یک برش جدید
تقسیم کد ما
خلاصه

Redux پیشرفته:
معرفی ماژول
Redux و عوارض جانبی (و کد ناهمزمان)
تجدید / تمرین: قسمت 1
تجدید / تمرین: قسمت 2
کد Redux و Async
کد فرانتند در مقابل کد پشتیبان
منطق خود را کجا قرار دهیم
استفاده از useEffect() با Redux
مدیریت وضعیت HTTP و بازخورد با Redux
استفاده از Action Creator Thunk
شروع با واکشی داده ها
نهایی کردن منطق واکشی
کاوش در Redux DevTools
خلاصه

ساخت SPA چند صفحه ای با روتر React:
معرفی ماژول
مسیریابی چیست و چرا؟
نصب React Router
تعریف و استفاده از مسیرها
کار با پیوندها
استفاده از NavLinks
افزودن مسیرهای پویا با پارامترها
استخراج پارامترهای مسیر
استفاده از "Switch" و "exact" برای پیکربندی مسیرها
کار با مسیرهای تودرتو
هدایت مجدد کاربر
زمان تمرین: پیش به سوی یک پروژه جدید
هدایت مجدد و استخراج پارامترها را تمرین کنید
تمرین مسیرهای تودرتو
افزودن مولفه Layout Wrapper
افزودن داده های ساختگی و محتوای بیشتر
خروجی داده در صفحه "جزئیات".
افزودن صفحه "یافت نشد".
اجرای پیمایش برنامه ای (ضروری).
جلوگیری از انتقال احتمالی ناخواسته مسیر با مولفه "Prompt"
کار با پارامترهای Query
خلاقیت با مسیرهای تودرتو
نوشتن کد مسیریابی انعطاف پذیرتر
ارسال و دریافت داده های قیمت از طریق HTTP
افزودن ویژگی "نظرات".
ارتقا به روتر React نسخه 6

استقرار React Apps:
معرفی ماژول
مراحل استقرار
افزودن بارگیری تنبل
ایجاد کد برای تولید
شروع با استقرار (آپلود فایل ها)
بررسی مسائل مسیریابی و تکمیل استقرار

احراز هویت:
معرفی ماژول
چه، چگونه و چرا؟
شروع راه اندازی و مراحل اولیه
افزودن ثبت نام کاربر
نمایش بازخورد به کاربر
افزودن ورود کاربر
مدیریت وضعیت تأیید با زمینه
استفاده از رمز برای درخواست منابع محافظت شده
هدایت مجدد کاربر
افزودن خروج
محافظت از صفحات فرانت اند
تداوم وضعیت احراز هویت کاربر
افزودن خروج خودکار
مراحل پایان

مقدمه ای بر Next.js:
معرفی ماژول
NextJS چیست؟
ویژگی کلیدی 1: رندر داخلی سمت سرور (بهبود سئو)
ویژگی کلیدی 2: مسیریابی ساده با مسیریابی مبتنی بر فایل
ویژگی کلیدی 3: ساخت برنامه های Fullstack
ایجاد پروژه و برنامه Next.js جدید
تجزیه و تحلیل پروژه ایجاد شده
افزودن صفحات اول
افزودن مسیرها و صفحات تودرتو (مسیرهای تودرتو)
ایجاد صفحات پویا (با پارامترها)
استخراج مقادیر پارامترهای پویا
پیوند بین صفحات
به سمت پروژه بزرگتر
آماده سازی صفحات پروژه
خروجی لیستی از جلسات
افزودن فرم ملاقات جدید
فایل "_app.js" و بسته بندی چیدمان
استفاده از پیمایش برنامه‌ای (اجباری).
افزودن اجزای سفارشی و ماژول های CSS
پیش رندر چگونه کار می کند و با چه مشکلی روبرو هستیم
واکشی داده برای صفحات استاتیک
تولید سایت استاتیک (SSG)
کاوش رندر سمت سرور (SSR) با "getServerSideProps"
کار با Params برای واکشی داده SSG
آماده سازی مسیرها با "getStaticPaths" و کار با صفحات بازگشتی
معرفی مسیرهای API
کار با MongoDB
ارسال درخواست های HTTP به مسیرهای API ما
دریافت داده از پایگاه داده
دریافت اطلاعات جزئیات Meetup و آماده سازی صفحات
افزودن ابرداده "head".
استقرار پروژه های Next.js
استفاده از صفحات بازگشتی و استقرار مجدد
خلاصه

متحرک سازی برنامه های React:
معرفی ماژول
آماده سازی پروژه آزمایشی
استفاده از CSS Transitions
استفاده از انیمیشن های CSS
CSS Transition و محدودیت های انیمیشن ها
استفاده از ReactTransitionGroup
استفاده از مولفه انتقال
پیچیدن مولفه انتقال
زمان بندی انیمیشن
رویدادهای گذار
مؤلفه CSSTransition
سفارشی کردن نام کلاس های CSS
متحرک کردن لیست ها
بسته های انیمیشن جایگزین
بپیچید

جایگزینی Redux با React Hooks:
معرفی ماژول
شروع پروژه و چرا باید Redux را جایگزین کنید
جایگزین: استفاده از Context API
تغییر موارد دلخواه با Context API
خلاصه Context API
شروع با یک هوک سفارشی به عنوان فروشگاه
اتمام قلاب فروشگاه
ایجاد فروشگاه بتن
استفاده از فروشگاه سفارشی
خلاصه فروشگاه هوک سفارشی
بهینه سازی فروشگاه هوک سفارشی
بپیچید

تست برنامه‌های React:
معرفی ماژول
چی و چرا؟
درک انواع مختلف تست ها
چه چیزی را تست کنیم و چگونه تست کنیم
درک تنظیمات فنی و ابزارهای مرتبط
اجرای اولین تست
نوشتن اولین آزمون ما
گروه‌بندی تست‌ها به همراه مجموعه‌های تست
آزمایش تعامل و وضعیت کاربر
آزمایش اجزای متصل
تست کد ناهمزمان
کار با Mocks
خلاصه و منابع بیشتر

React و TypeScript:
معرفی ماژول
چی و چرا؟
نصب و استفاده از TypeScript
کاوش در انواع پایه
کار با آرایه و انواع شی
درک نوع استنتاج
استفاده از Union Types
آشنایی با نام مستعار نوع
توابع و انواع توابع
غواصی در Generics
ایجاد پروژه React + TypeScript
کار با کامپوننت ها و TypeScript
کار با Props و TypeScript
افزودن یک مدل داده
زمان تمرین: زمان ورزش!
فرم های ارسالی در پروژه های TypeScript
کار با refs و userRef()
کار با "Function Props"
مدیریت State و TypeScript
افزودن استایل
زمان تمرین: حذف یک Todo
Context API و TypeScript
خلاصه
پاداش: کاوش tsconfig.json

اختیاری: معرفی و خلاصه React Hooks:
معرفی ماژول
React Hooks چیست؟
پروژه شروع
شروع با useState()
اطلاعات بیشتر در مورد useState() و State Updating
تخریب آرایه
حالت های چندگانه
قوانین قلاب
انتقال داده‌های حالت از میان مؤلفه‌ها
زمان تمرین: اصول قلاب - مشکل
زمان تمرین: اصول قلاب - راه حل
ارسال درخواست های HTTP
useEffect() و Loading Data
درک وابستگی های useEffect().
اطلاعات بیشتر در مورد useEffect()
useCallback() چیست؟
کار با Refs و userRef()
پاکسازی با useEffect()
حذف مواد تشکیل دهنده
خطاهای بارگیری و دسته بندی حالت
آشنایی با useReducer()
استفاده از useReducer() برای وضعیت HTTP
کار با useContext()
بهینه سازی عملکرد با useMemo()
شروع با قلاب های سفارشی
به اشتراک گذاری داده ها بین قلاب ها و اجزای سفارشی
استفاده از هوک سفارشی
بپیچید

اختیاری: React Summary و Core Feature Walkthrough:
معرفی ماژول
React چیست؟
چرا واکنش نشان دهیم؟
ساختمان SPA (برنامه های تک صفحه ای)
روشهای جایگزین
ایجاد یک پروژه React
راه اندازی یک ویرایشگر کد
غواصی در پروژه ایجاد شده
واکنش چگونه کار می کند و درک مؤلفه ها
کار و استایل‌سازی بیشتر با کامپوننت‌ها با کلاس‌های CSS
ساخت و استفاده مجدد از یک جزء دیگر
کار با "props" و محتوای پویا
رسیدگی به رویدادها
افزودن اجزای بیشتر
معرفی دولت
کار با "Event Props" (عملکرد عبور به عنوان Props)
افزودن مسیریابی
افزودن پیوندها و پیمایش
استایل دهی با ماژول های CSS
خروجی لیست داده ها
افزودن اجزای React بیشتر
اجزای لفاف ساختمان با props.children
افزودن فرم
دریافت ورودی کاربر و رسیدگی به ارسال فرم
آماده سازی برنامه برای HTTP
ارسال یک درخواست POST
پیمایش برنامه‌ای
شروع با واکشی داده ها
استفاده از قلاب useEffect().
معرفی React Context
منطق متن و روش های مختلف به روز رسانی حالت
استفاده از Context در Components
استفاده از زمینه بیشتر
خلاصه

خلاصه دوره:
حالا چی؟ گام های بعدی که می توانید بردارید!
اکوسیستم React را کاوش کنید!
افکار نهایی