راهنمای کامل React شامل Router, Redux و Hooks

** این دوره اکنون برای آخرین نسخه React - React 18 **
React.js محبوب ترین کتابخانه JavaScript است که می توانید این روزها برای ساختن رابط های کاربر مدرن و واکنشی برای وب استفاده کنید ، به روز شده است. React.js را به روشی تمرین گرا ، با استفاده از آخرین الگوهای و بهترین شیوه های مورد نیاز خود بیاموزید. شما تمام اصول اصلی و همچنین مفاهیم پیشرفته و مباحث مرتبط را یاد خواهید گرفت تا شما را به یک توسعه دهنده React.js تبدیل کنید. مؤلفه ها و UI ها ، غرفه ها و داده های پویا. سپس ، ما به سمت کار با رویدادهای کاربر ، قلاب های واکنش ، قطعات و درگاه ها خواهیم پرداخت و یاد خواهیم گرفت که با عوارض جانبی ، اجزای مبتنی بر کلاس و مؤلفه های کاربردی مقابله کنیم. دانش عمیق در مورد رسیدگی به فرم ها و ورودی کاربر ، Redux و Redux Toolkit ، Next.js ، ترکیب واکنش با TypeScript و موارد دیگر کسب کنید. این یک دوره بزرگ است زیرا واقعاً همه چیزهایی را که باید بدانید و یاد بگیرید که تبدیل به یک توسعه دهنده React.js شوید!
اطلاعات مفیدی را از این دوره دریافت خواهید کرد. هدف از این دوره اطمینان از احساس اطمینان از کار با React است تا بتوانید برای مشاغل React درخواست کنید ، از آن در پروژه های خود استفاده کنید یا به سادگی نمونه کارها خود را به عنوان یک توسعه دهنده تقویت کنید. هدف شما هرچه باشد ، این دوره شما را به آنجا می رساند!
تا پایان این دوره ، شما به یک توسعه دهنده React.js تبدیل خواهید شد. React --- the-complete-guide-hooks-react-router-and-redux-second-edition

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

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

شروع به کار:
به دوره خوش آمدید!
React.js چیست؟
چرا به جای فقط جاوا اسکریپت واکنش نشان دهیم؟
ساخت اپلیکیشن های تک صفحه ای (SPA) با React
کاوش گزینه های React.js (Angular/Vue)
درباره این دوره و طرح کلی دوره
دو راه (مسیر) گذراندن این دوره
بیشترین بهره را از این دوره ببرید
تنظیم محیط برنامه نویس دوره
اختیاری: JavaScript Refresher:
معرفی ماژول
درک "let" و "const"
توابع پیکان
صادرات و واردات
کلاس های درک
کلاس ها، ویژگی ها و روش ها
اپراتور Spread and Rest
تخریب
Reference و نوع اولیه Refresher
بازسازی توابع آرایه
بپیچید
مبانی واکنش و کار با کامپوننت ها:
معرفی ماژول
کامپوننت ها چیست؟ و چرا React همه چیز درباره آنهاست؟
React Code به صورت اعلانی نوشته شده است
ایجاد یک پروژه React جدید
تجزیه و تحلیل یک پروژه استاندارد React
معرفی JSX
واکنش چگونه کار می کند
ساخت اولین کامپوننت سفارشی
نوشتن کد JSX پیچیده تر
افزودن استایل پایه CSS
خروجی داده های پویا و کار با عبارات در JSX
انتقال داده از طریق "props"
افزودن منطق جاوا اسکریپت "عادی" به کامپوننت ها
تقسیم مؤلفه ها به مؤلفه های متعدد
زمان تمرین: مبانی واکنش و مؤلفه - مسئله
زمان تمرین: مبانی واکنش و مؤلفه - راه حل
مفهوم "ترکیب" ("لوازم کودک")
اولین خلاصه
A r به JSX نگاه کنید
سازماندهی فایل های مؤلفه
یک نحو تابع جایگزین
وضعیت واکنش و کار با رویدادها:
معرفی ماژول
گوش دادن به رویدادها و کار با مدیران رویداد
چگونه توابع مؤلفه اجرا می شوند
کار با "State"
A r به قلاب "useState" نگاه کنید
افزودن ورودی های فرم
گوش دادن به ورودی کاربر
کار با چندین ایالت
استفاده از یک حالت به جای آن (و چه چیزی بهتر است)
به روز رسانی حالتی که به حالت قبلی بستگی دارد
رسیدگی به ارسال فرم
افزودن اتصال دو طرفه
ارتباط مؤلفه فرزند به والدین
افزایش وضعیت
زمان تمرین: کار با رویدادها و وضعیت - مشکل
زمان تمرین: کار با رویدادها و وضعیت - راه حل
مولفه های کنترل شده در مقابل مولفه های کنترل نشده و مولفه های بدون حالت در مقابل مولفه های حالت دار
فهرست های رندر و محتوای مشروط:
معرفی ماژول
نمایش لیست داده ها
استفاده از لیست های Stateful
درک "کلیدها"
زمان تمرین: کار با لیست ها - مشکل
زمان تمرین: کار با لیست ها - راه حل
خروجی محتوای مشروط
افزودن بیانیه های بازگشت مشروط
زمان تمرین: محتوای مشروط - مشکل
زمان تمرین: محتوای مشروط - راه حل
برنامه نمایشی: افزودن نمودار
افزودن سبک های پویا
تکمیل و مراحل بعدی
Styling React Components:
معرفی ماژول
تنظیم سبک های درون خطی پویا
تنظیم کلاس های CSS به صورت پویا
معرفی مولفه های سبک
اجزای سبک و لوازم دینامیک
مؤلفه‌های سبک‌شده و پرسش‌های رسانه
استفاده از ماژول های CSS
سبک های پویا با ماژول های CSS
اشکال‌زدایی برنامه‌های React:
معرفی ماژول
درک پیام های خطای React
تجزیه و تحلیل جریان کد و هشدارها
کار با نقاط شکست
با استفاده از React DevTools
زمان تمرین: یک پروژه تمرینی کامل:
معرفی ماژول
افزودن یک مؤلفه «کاربر».
افزودن یک جزء "کارت" قابل استفاده مجدد
افزودن یک جزء "دکمه" قابل استفاده مجدد
مدیریت وضعیت ورودی کاربر
افزودن اعتبارسنجی و بازنشانی منطق
افزودن یک جزء لیست کاربر
مدیریت فهرستی از کاربران از طریق ایالت
افزودن مؤلفه «ErrorModal».
مدیریت وضعیت خطا
غواصی عمیق‌تر: کار با قطعات، پورتال‌ها و «مقایسه‌ها»:
معرفی ماژول
محدودیت ها و راه حل های JSX
ایجاد کامپوننت Wrapper
React Fragments
معرفی React Portal
کار با پورتال
کار با "refs"
اجزای کنترل شده در مقابل مولفه های کنترل نشده
پیشرفته: مدیریت عوارض جانبی، استفاده از Reducerها و استفاده از Context API:
معرفی ماژول
"عوارض جانبی" و معرفی useEffect () چیست؟
استفاده از قلاب useEffect().
useEffect() و Dependencies
با استفاده از تابع ()useEffect Cleanup خلاصه
useEffect().
معرفی useReducer() و Reducer به طور کلی
استفاده از قلاب useReducer().
useReducer() و useEffect()
useReducer() در مقابل useState() برای مدیریت ایالت
معرفی React Context
استفاده از React Context API
با قلاب useContext() به Context ضربه بزنید
پویا کردن زمینه
ساخت و استفاده از یک مؤلفه ارائه دهنده زمینه سفارشی
محدودیت های زمینه واکنش
آموزش "قوانین قلاب"
بازسازی یک جزء ورودی
غواصی در "داوران جلو"
پروژه تمرین: ساخت اپلیکیشن سفارش غذا:
معرفی ماژول
شروع راه اندازی
افزودن مولفه "هدر".
افزودن جزء دکمه "سبد خرید".
افزودن جزء "غذاها".
افزودن اقلام غذایی فردی و نمایش آنها
افزودن فرم
کار بر روی مؤلفه "سبد خرید".
افزودن Modal از طریق پورتال React
مدیریت سبد خرید و حالت مدال
افزودن زمینه سبد خرید
استفاده از زمینه
افزودن یک کاهش دهنده سبد خرید
کار با Refs و Forward Refs
خروجی اقلام سبد خرید
کار بر روی یک منطق کاهش دهنده پیچیده تر
جداسازی اقلام
استفاده از قلاب useEffect().
نگاهی به پشت صحنه تکنیک‌های واکنش و بهینه‌سازی:
معرفی ماژول
چگونه واکنش واقعا کار می کند
به‌روزرسانی‌های مؤلفه در عمل
نگاهی به ارزیابی مجدد اجزای کودک
جلوگیری از ارزیابی مجدد غیر ضروری با 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:
معرفی ماژول
نگاهی دیگر به وضعیت در React Apps
Redux در مقابل React Context
Redux چگونه کار می کند
کاوش در مفاهیم اصلی Redux
مبانی بیشتر Redux
در حال آماده سازی یک پروژه جدید
ایجاد فروشگاه Redux برای React
ارائه فروشگاه
استفاده از داده های Redux در 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 Router v6
استقرار 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
Wiکامپوننت ها و 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 Alternatives
ایجاد یک پروژه React
راه اندازی یک ویرایشگر کد
غواصی در پروژه ایجاد شده
چگونه واکنش نشان می دهد و درک مؤلفه ها
کار و استایل سازی بیشتر با کامپوننت ها با کلاس های CSS
ساخت و استفاده مجدد از یک جزء دیگر
کار با "props" و محتوای پویا
رسیدگی به رویدادها
افزودن اجزای بیشتر
معرفی دولت
کار با "Event Props" (عملکرد عبور به عنوان Props)
افزودن مسیریابی
افزودن پیوندها و پیمایش
استایل دهی با ماژول های CSS
خروجی لیست داده ها
افزودن اجزای React بیشتر
اجزای لفاف ساختمان با props.children
افزودن فرم
دریافت ورودی کاربر و رسیدگی به ارسال فرم
آماده سازی برنامه برای HTTP
ارسال یک درخواست POST
پیمایش برنامه‌ای
شروع با واکشی داده ها
استفاده از قلاب useEffect().
معرفی React Context
منطق متن و روش های مختلف به روز رسانی حالت
استفاده از Context در Components
استفاده از زمینه بیشتر
خلاصه
خلاصه دوره:
حالا چی؟ گام های بعدی که می توانید بردارید!
اکوسیستم React را کاوش کنید!
افکار نهایی