آموزش React 2024: راهنمای عملی با TypeScript و MERN Stack
React 2024: A Practical Guide with TypeScript & MERN Stack
این دوره شامل ساخت دو برنامه پیشرفته از ابتدا خواهد بود.
پروژه 1:
ما یک برنامه React با استفاده از TypeScript ایجاد خواهیم کرد. ما React Router Dom 6 را راه‌اندازی می‌کنیم و یک فروشگاه Redux Toolkit با داده‌های ساختگی از یک فایل JSON ایجاد می‌کنیم. در کنار این، ما قصد داریم رابط ها را تعریف کنیم و قلاب های سفارشی را برای ساده کردن مدیریت داده ها و تعامل ایجاد کنیم. پیکربندی یک سرور JSON برای مدیریت داده ها شامل خواهد شد. پس از این، تماس‌های API را با هم ادغام کرده و داده‌ها را در Redux Toolkit با استفاده از createApi و useDataQuery مدیریت می‌کنیم. علاوه بر این، ما قابلیت های جستجو، فیلتر و مرتب سازی را در صفحه اصلی پیاده سازی خواهیم کرد. علاوه بر این، اقدامات سبد خرید مانند افزودن اقلام به سبد خرید و دریافت کل سبد خرید، مدیریت عملکرد اجزای اقلام سبد خرید (افزایش و کاهش تعداد، پاک کردن سبد خرید و حذف موارد از سبد خرید) و ادغام اعلان‌های متحرک را انجام خواهیم داد. p>
پروژه 2:
ما با پیکربندی Express با MongoDB با استفاده از Mongoose شروع خواهیم کرد. ما با استفاده از JWT، Bcrypt و Express-Validator بر احراز هویت ایمن کاربر تأکید خواهیم کرد. در حال پیشرفت، عملیات CRUD قوی را برای مدل داستانی اجرا خواهیم کرد و از مدیریت یکپارچه داده ها اطمینان حاصل خواهیم کرد. با ادغام مولتر، آپلود بدون زحمت فایل در برنامه را فعال می کنیم. با تغییر تمرکز به سمت جلو، React (بدون TypeScript) را با React Router Dom 6 به دقت راه‌اندازی می‌کنیم و مسیریابی کارآمد را در برنامه امکان‌پذیر می‌کنیم. علاوه بر این، ما احراز هویت رمز را مدیریت خواهیم کرد، پاسخ‌های خطا را به خوبی مدیریت می‌کنیم، و کاربران را قادر می‌سازیم تا داستان‌هایی را با آپلود فایل ایجاد کنند و تعامل را افزایش دهیم. در نهایت، ما برنامه را با اجرای به‌روزرسانی و حذف قابلیت‌های داستان‌ها و ترکیب کنترل دسترسی مبتنی بر نویسنده برای حفظ امنیت و یکپارچگی داده‌ها به پایان می‌رسانیم.
مقدمه و بررسی اجمالی Introduction and Overview
-
معرفی Introduction
-
بررسی اجمالی ویژگی های برنامه ها Apps Features Overview
پیاده سازی Frontend و مدیریت داده ها Frontend Implementation and Data Handling
-
راه اندازی React با TypeScript، React Router 6، Redux Toolkit و JSON Server Setting Up React with TypeScript, React Router 6, Redux Toolkit, and JSON Server
-
ادغام تماس‌های API و مدیریت داده در Redux Toolkit Integrating API Calls and Data Handling in Redux Toolkit
-
یک ظاهر طراحی صفحه اصلی، پیاده سازی فیلتر و دسته بندی عملکردهای داده Styling Home Page, Implementing Filter and Sorting Data Functionalities
افزایش تجربه کاربری Enhancing User Experience
-
اجرای اقدامات سبد خرید addToCart و cartTotal Implementing Cart Actions addToCart and cartTotal
-
اجرای اقدامات مؤلفه CartItem و افزودن اعلان های متحرک Implementing CartItem Component Actions, and Adding Animated Notifications
توسعه Backend و یکپارچه سازی API Backend Development and API Integration
-
راه اندازی Express با MongoDB با استفاده از Mongoose Setting Up Express with MongoDB Using Mongoose
-
اجرای احراز هویت کاربر با JWT، Bcrypt و Express-Validator Implementing User Authentication with JWT, Bcrypt, and Express-Validator
-
ایجاد عملیات CRUD، پیاده سازی کنترلرها، مسیرها و ایمن سازی نقاط پایانی Creating CRUD Operations, Implementing Controllers, Routes & Securing Endpoints
-
پیاده سازی مولتر برای آپلود پوستر Implementing Multer for Poster Uploads
توسعه تمام پشته پیشرفته Advanced Full-Stack Development
-
راه اندازی برنامه React، اجرای همزمان سرور-کلینت، و پیکربندی روتر Setting Up React App, Concurrent Server-Client Execution, & Router Configuration
-
تنظیم Slice احراز هویت با Redux Toolkit Authentication Slice Setup with Redux Toolkit
-
مدیریت توکن، احراز هویت کاربر، رندر شرطی و عملکرد خروج Token Management, User Authentication, Conditional Rendering & Logout Function
-
رسیدگی به پاسخ های خطا Handling Error Responses
-
ایجاد داستان با آپلود فایل و واکشی داده Story Creation with File Uploads and Data Fetching
-
پیاده سازی به روز رسانی و حذف برای داستان ها با کنترل دسترسی مبتنی بر نویسنده Implementing Update and Delete for Stories with Author-Based Access Control
https://donyad.com/d/7c45dd
Sameh Manai
مربی
نمایش نظرات