آموزش کدنویسی React, React Hooks, React Redux

با مشاهده این کورس آموزشی از طریق انجام پروژه های واقعی و به زبانی بسیار ساده مطالب فراوانی را در رابطه با ری اکت یاد می گیرید.

عنوان اصلی : React - The Complete Guide (includes Hooks, React Router, and Redux) [2021 Updated] - Second Edition

سرفصل ها :

شروع شدن:
به دوره خوش آمدید!
React.js چیست؟
چرا به جای فقط جاوا اسکریپت واکنش نشان دهیم؟
ساخت اپلیکیشن های تک صفحه ای (SPA) با React
کاوش جایگزین های React.js (Angular/Vue)
درباره این دوره و طرح کلی دوره
دو راه (مسیر) گذراندن این دوره
بیشترین بهره را از این دوره ببرید
تنظیم محیط برنامه نویس دوره
اختیاری: JavaScript Refresher:
معرفی ماژول
درک "لذا" و "تقویت"
توابع پیکان
صادرات و واردات
درک کلاس ها
کلاس ها، ویژگی ها و روش ها
اپراتور Spread and Rest
در حال تخریب
Refresher انواع مرجع و اولیه
تازه کردن توابع آرایه
بسته شدن
React Basics و کار با کامپوننت ها:
معرفی ماژول
کامپوننت ها چیست؟ و چرا React همه چیز درباره آنهاست؟
React Code به صورت اعلامی نوشته شده است
ایجاد یک پروژه React جدید
تجزیه و تحلیل یک پروژه استاندارد React
معرفی JSX
چگونه واکنش کار می کند
ساخت اولین کامپوننت سفارشی
نوشتن کد JSX پیچیده تر
اضافه کردن یک استایل پایه CSS
خروجی داده های پویا و کار با عبارات در JSX
انتقال داده از طریق "props"
اضافه کردن منطق جاوا اسکریپت "عادی" به کامپوننت ها
تقسیم کامپوننت ها به کامپوننت های متعدد
زمان تمرین: مبانی واکنش و مؤلفه - مسئله
زمان تمرین: مبانی واکنش و مؤلفه - راه حل
مفهوم "ترکیب" ("لوازم کودک")
اولین خلاصه
به JSX نگاه کنید
سازماندهی فایل های کامپوننت
یک نحو تابع جایگزین
React State و کار با رویدادها:
معرفی ماژول
گوش دادن به رویدادها و کار با گردانندگان رویداد
نحوه اجرای توابع کامپوننت
کار با "دولت"
A r به قلاب "useState" نگاه کنید
افزودن ورودی های فرم
گوش دادن به ورودی کاربر
کار با چندین ایالت
استفاده از یک حالت به جای آن (و چه چیزی بهتر است)
به روز رسانی حالتی که به حالت قبلی بستگی دارد
رسیدگی به ارسال فرم
افزودن اتصال دو طرفه
ارتباط مؤلفه کودک با والدین
بالا بردن دولت
زمان تمرین: کار با رویدادها و وضعیت - مشکل
زمان تمرین: کار با رویدادها و وضعیت - راه حل
مولفه های کنترل شده در مقابل مولفه های کنترل نشده و مولفه های بدون حالت در مقابل مولفه های حالت دار
فهرست های رندر و محتوای مشروط:
معرفی ماژول
رندر کردن لیست داده ها
استفاده از لیست های Stateful
درک "کلیدها"
زمان تمرین: کار با لیست ها - مشکل
زمان تمرین: کار با لیست ها - راه حل
خروجی محتوای مشروط
افزودن بیانیه های بازگشت مشروط
زمان تمرین: محتوای مشروط - مشکل
زمان تمرین: محتوای مشروط - راه حل
برنامه آزمایشی: اضافه کردن نمودار
اضافه کردن سبک های پویا
جمع بندی و مراحل بعدی
Styling React Components:
معرفی ماژول
تنظیم سبک های درون خطی پویا
تنظیم کلاس های CSS به صورت پویا
معرفی Styled Components
اجزای سبک و لوازم دینامیک
کامپوننت های سبک و پرسش های رسانه ای
استفاده از ماژول های CSS
سبک های پویا با ماژول های CSS
اشکال زدایی برنامه های React:
معرفی ماژول
درک پیام های خطای React
تجزیه و تحلیل جریان کد و هشدارها
کار با نقاط شکست
با استفاده از React DevTools
زمان برای تمرین: یک پروژه تمرین کامل:
معرفی ماژول
افزودن کامپوننت "کاربر".
اضافه کردن یک جزء "کارت" قابل استفاده مجدد
اضافه کردن یک جزء "دکمه" قابل استفاده مجدد
مدیریت وضعیت ورودی کاربر
اضافه کردن اعتبارسنجی و بازنشانی منطق
اضافه کردن یک جزء لیست کاربران
مدیریت فهرست کاربران از طریق State
افزودن مؤلفه «ErrorModal».
مدیریت وضعیت خطا
غواصی عمیق تر: کار با قطعات، پورتال ها، و "Refs":
معرفی ماژول
محدودیت ها و راه حل های JSX
ایجاد یک کامپوننت Wrapper
React Fragments
معرفی React Portal
کار با پورتال ها
کار با "رفع"
اجزای کنترل شده در مقابل اجزای کنترل نشده
پیشرفته: مدیریت عوارض جانبی، استفاده از کاهش دهنده ها، و استفاده از Context API:
معرفی ماژول
"عوارض جانبی" و معرفی useEffect () چیست؟
با استفاده از ()useEffect Hook
useEffect() و Dependencies
با استفاده از تابع ()useEffect Cleanup
خلاصه useEffect().
معرفی useReducer() و Reducer به طور کلی
با استفاده از قلاب useReducer().
useReducer() و useEffect()
useReducer() در مقابل useState() برای مدیریت ایالت
معرفی React Context
با استفاده از React Context API
با قلاب useContext() روی Context ضربه بزنید
ایجاد متن پویا
ساخت و استفاده از یک مؤلفه ارائه دهنده زمینه سفارشی
محدودیت های زمینه واکنش
آموزش "قوانین قلاب"
Refactoring یک جزء ورودی
غواصی در "داوران جلو"
پروژه تمرین: ساخت اپلیکیشن سفارش غذا:
معرفی ماژول
راه اندازی راه اندازی
اضافه کردن کامپوننت "هدر".
افزودن مولفه دکمه "سبد خرید".
اضافه کردن یک جزء "غذاها".
افزودن اقلام غذایی فردی و نمایش آنها
افزودن فرم
کار بر روی مولفه "سبد خرید".
اضافه کردن یک Modal از طریق یک React Portal
مدیریت سبد خرید و حالت مدال
افزودن زمینه سبد خرید
با استفاده از زمینه
افزودن کاهش دهنده سبد خرید
کار با Refs و Forward Refs
خروجی اقلام سبد خرید
کار بر روی یک منطق کاهش دهنده پیچیده تر
ساخت اقلام قابل جابجایی
با استفاده از ()useEffect Hook
نگاهی به پشت صحنه تکنیک های واکنش و بهینه سازی:
معرفی ماژول
چگونه واکنش واقعا کار می کند
به‌روزرسانی‌های مؤلفه در عمل
نگاهی به ارزیابی مجدد اجزای کودک
جلوگیری از ارزیابی مجدد غیر ضروری با React.memo()
جلوگیری از بازآفرینی عملکرد با useCallback()
useCallback() و وابستگی های آن
اولین خلاصه
نگاهی به وضعیت و اجزاء
درک زمان بندی و دسته بندی ایالت
بهینه سازی با useMemo()
روشی جایگزین برای ساخت اجزاء: اجزای کلاس محور:
معرفی ماژول
چی و چرا
افزودن مولفه First Class-Based
کار با ایالت و رویدادها
چرخه عمر مؤلفه (فقط مؤلفه های مبتنی بر کلاس)
روش های چرخه حیات در عمل
مولفه ها و زمینه های مبتنی بر کلاس
مولفه های مبتنی بر کلاس در مقابل مولفه های عملکردی: خلاصه
معرفی مرزهای خطا
ارسال درخواست HTTP:
معرفی ماژول
نحوه اتصال به پایگاه داده
برنامه شروع و Backend ما
ارسال درخواست GET
استفاده از async/wait
مدیریت وضعیت بارگذاری و داده
مدیریت خطاهای HTTP
استفاده از useEffect() برای درخواست ها
آماده سازی پروژه برای مراحل بعدی
ارسال درخواست POST
بسته شدن
ساخت قلاب‌های واکنش سفارشی:
معرفی ماژول
"قلاب های سفارشی" چیست؟
ایجاد یک تابع React Hook سفارشی
استفاده از قلاب های سفارشی
پیکربندی قلاب های سفارشی
در ادامه به یک مثال واقعی تر
ساخت یک هوک HTTP سفارشی
با استفاده از هوک سفارشی HTTP
تنظیم منطق هوک سفارشی
استفاده از هوک سفارشی در اجزای بیشتر
کار با فرم ها و ورودی کاربر:
معرفی ماژول
راه اندازی شروع ما
چه چیزی در مورد فرم ها پیچیده است؟
رسیدگی به ارسال فرم و دریافت مقادیر ورودی کاربر
افزودن اعتبارسنجی پایه
ارائه بازخورد اعتبارسنجی
رسیدگی به حالت "لمس شد".
به تمرکز از دست رفته واکنش نشان دهید
احیاء و استخراج ایالات
مدیریت اعتبار کلی فرم
زمان تمرین: فرم ها - مشکل
زمان تمرین: فرم ها - راه حل
اضافه کردن یک قلاب ورودی سفارشی
استفاده مجدد از هوک سفارشی
یک چالش برای شما!
استفاده از قلاب و دانش ما در یک فرم جدید
خلاصه
امتیاز: استفاده از useReducer()
پروژه تمرین: اضافه کردن HTTP و فرم ها به برنامه سفارش غذا:
معرفی ماژول
انتقال داده های "غذاهای غذایی" به Backend
واکشی وعده های غذایی از طریق HTTP
رسیدگی به وضعیت بارگیری
رسیدگی به خطاها
افزودن فرم پرداخت
خواندن مقادیر فرم
افزودن اعتبار سنجی فرم
ارسال و ارسال اطلاعات سبد خرید
افزودن بازخورد بهتر کاربر
خلاصه
غواصی در Redux:
معرفی ماژول
نگاهی دیگر به State در 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
تعریف و استفاده از مسیرها
کار با لینک ها
با استفاده از NavLinks
اضافه کردن مسیرهای پویا با پارامترها
استخراج پارامترهای مسیر
استفاده از "Switch" و "exact" برای پیکربندی مسیرها
کار با مسیرهای تودرتو
تغییر مسیر کاربر
زمان تمرین: پیش به سوی یک پروژه جدید
تغییر مسیر و استخراج پارامترها را تمرین کنید
تمرین مسیرهای تودرتو
افزودن مولفه Layout Wrapper
افزودن داده های ساختگی و محتوای بیشتر
خروجی داده ها در صفحه "جزئیات".
افزودن صفحه "یافت نشد".
پیاده سازی ناوبری برنامه ای (اجباری).
جلوگیری از انتقال احتمالی ناخواسته مسیر با مولفه "Prompt".
کار با پارامترهای Query
خلاقیت با مسیرهای تودرتو
نوشتن کد مسیریابی انعطاف پذیرتر
ارسال و دریافت داده های نقل قول از طریق HTTP
افزودن ویژگی "نظرات".
استقرار React Apps:
معرفی ماژول
مراحل استقرار
اضافه کردن Lazy Loading
ایجاد کد برای تولید
شروع با استقرار (آپلود کردن فایل ها)
بررسی مسائل مسیریابی و تکمیل استقرار
احراز هویت:
معرفی ماژول
چه، چگونه و چرا؟
شروع راه اندازی و مراحل اولیه
افزودن ثبت نام کاربر
نمایش بازخورد به کاربر
افزودن ورود کاربر
مدیریت وضعیت تأیید با زمینه
استفاده از توکن برای درخواست منابع محافظت شده
تغییر مسیر کاربر
اضافه کردن خروج
محافظت از صفحات فرانت اند
تداوم وضعیت احراز هویت کاربر
افزودن خروج خودکار
مراحل پایان
مقدمه ای بر Next.js:
معرفی ماژول
NextJS چیست؟
ویژگی کلیدی 1: رندر داخلی سمت سرور (سئوی بهبود یافته)
ویژگی کلیدی 2: مسیریابی ساده با مسیریابی مبتنی بر فایل
ویژگی کلیدی 3: ساخت برنامه های Fullstack
ایجاد یک پروژه و برنامه Next.js جدید
تجزیه و تحلیل پروژه ایجاد شده
افزودن صفحات اول
افزودن مسیرها و صفحات تو در تو (مسیرهای تودرتو)
ایجاد صفحات پویا (با پارامترها)
استخراج مقادیر پارامترهای پویا
پیوند بین صفحات
به سمت پروژه بزرگتر
آماده سازی صفحات پروژه
خروجی لیستی از جلسات
افزودن فرم جدید Meetup
فایل "_app.js" و بسته بندی طرح بندی
استفاده از ناوبری برنامه ای (ضروری).
اضافه کردن اجزای سفارشی و ماژول های CSS
پیش رندر چگونه کار می کند و با کدام مشکل روبرو هستیم
واکشی داده برای صفحات استاتیک
تولید سایت ایستا (SSG)
کاوش رندر سمت سرور (SSR) با "getServerSideProps"
کار با Params برای واکشی داده های SSG
آماده سازی مسیرها با "getStaticPaths" و کار با صفحات بازگشتی
معرفی مسیرهای API
کار با MongoDB
ارسال درخواست های HTTP به مسیرهای API ما
دریافت داده از پایگاه داده
دریافت داده های جزئیات Meetup و آماده سازی صفحات
اضافه کردن ابرداده "سر".
استقرار پروژه های Next.js
استفاده از صفحات بازگشتی و استقرار مجدد
خلاصه
متحرک سازی برنامه های React:
معرفی ماژول
آماده سازی پروژه آزمایشی
استفاده از CSS Transitions
استفاده از انیمیشن های CSS
CSS انتقال و محدودیت های انیمیشن
با استفاده از 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 بیشتر
اجزای لفاف ساختمان با لوازم.کودکان
افزودن فرم
دریافت ورودی کاربر و رسیدگی به ارسال فرم
آماده سازی برنامه برای HTTP
ارسال درخواست POST
پیمایش برنامه ای
شروع با واکشی داده ها
با استفاده از ()useEffect Hook
معرفی React Context
منطق زمینه و روش های مختلف به روز رسانی حالت
استفاده از Context در Components
استفاده بیشتر از زمینه
خلاصه
جمع بندی دوره:
حالا چی؟ گام های بعدی که می توانید بردارید!
اکوسیستم React را کاوش کنید!
افکار پایانی