نحوه ایجاد یک برنامه Full Stack React با آموزش MERN Stack

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

ایجاد یک برنامه Note-Share: یک Simple React Front-End ایجاد کنید Build a Note-Sharing App: Create a Simple React Front-End

• بررسی اجمالی Overview

• معرفی Introduction

• نقشه از برنامه Map Out the App

• ایجاد صفحات و تنظیم مسیرها Create Pages and Set Up Routes

• صفحه و فهرست یادداشت ها را بسازید Build the Notes Page and List

• صفحه جزئیات یادداشت را بسازید Build the Note Detail Page

• نتیجه Conclusion

یک برنامه اشتراک‌گذاری یادداشت بسازید: مدیریت داده‌های فرانت‌اند Build a Note-Sharing App: Front-end Data Management

• بررسی اجمالی Overview

• معرفی Introduction

• داده‌های یادداشت را در یک ارائه‌دهنده زمینه ذخیره کنید Store Note Data Inside A Context Provider

• یک مودال ایجاد یادداشت اضافه کنید Add A Create Note Modal

• ایجاد یادداشت های جدید در زمینه Creating New Notes in Context

• حذف یادداشت ها در زمینه Deleting Notes in Context

• به روز رسانی یادداشت ها در زمینه Updating Notes in Context

• نتیجه Conclusion

یک برنامه اشتراک گذاری یادداشت بسازید: یک استایل اضافه کنید Build a Note-Sharing App: Add Styling

• بررسی اجمالی Overview

• معرفی Introduction

• Styling را به برنامه اضافه کنید Add Styling to the App

• یک جزء "X" قابل استفاده مجدد ایجاد کنید Create A Reusable "X" Component

• یک نوار ناوبری ایجاد کنید Create A Navigation Bar

• Markdown را در React رندر کنید Render Markdown in React

• نتیجه Conclusion

ایجاد یک برنامه به اشتراک گذاری یادداشت: یک Back-end با Node و Express ایجاد کنید Build a Note-Sharing App: Create a Back-end with Node and Express

• بررسی اجمالی Overview

• معرفی Introduction

• راه اندازی پروژه تمام پشته Full-Stack Project Setup

• یک نقطه پایانی "خوانده" ایجاد کنید و داده ها را از سمت مشتری بارگیری کنید Create a "Read" Endpoint And Load Data From the Client-Side

• یک نقطه پایانی "ایجاد" اضافه کنید و از سمت مشتری درخواست کنید Add a "Create" Endpoint And Make Requests From the Client-Side

• نقاط پایانی "به روز رسانی" و "حذف" را اضافه کنید Add "Update" And "Delete" Endpoints

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: یک پایگاه داده اضافه کنید Build A Note-Sharing App: Add a Database

• بررسی اجمالی Overview

• معرفی Introduction

• MongoDB را به Back-end اضافه کنید Add MongoDB to the Back-end

• نقاط پایانی را به استفاده از MongoDB تبدیل کنید Convert Endpoints to Use MongoDB

• سرورهای اکسپرس را به چندین فایل تقسیم کنید Split Express Servers Into Multiple Files

• MongoDB را در فایل های مختلف در دسترس قرار دهید Make MongoDB Available in Different Files

• برای افزایش کارایی مسیرها را بازنویسی کنید Rewrite Routes To Increase Performance

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: احراز هویت کاربر را به Front-end اضافه کنید Build A Note-Sharing App: Add User Authentication to the Front-end

• بررسی اجمالی Overview

• معرفی Introduction

• ایجاد ورود و ایجاد فرم های حساب Create Login and Create Account Forms

• اضافه کردن ورود و ایجاد صفحات حساب Add Login and Create Account Pages

• طراحی صفحات ورود و ایجاد حساب کاربری Styling the Login and Create Account Pages

• Firebase Auth را به Front-end اضافه کنید Add Firebase Auth to the Front-end

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: احراز هویت کاربر را به Back-end اضافه کنید Build A Note-Sharing App: Add User Authentication to the Back-end

• بررسی اجمالی Overview

• معرفی Introduction

• Firebase Admin را نصب و راه اندازی کنید Install and Set Up Firebase Admin

• چگونه باید پایگاه داده خود را سازماندهی کنیم؟ How Should We Organize Our Database?

• تبدیل نقاط پایانی برای مالکیت Convert Endpoints for Ownership

• مالکیت داده در ایجاد و حذف نقاط پایانی Data Ownership in Create and Delete Endpoints

• نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: Refactoring Front-end Build A Note-Sharing App: Front-end Refactoring

• بررسی اجمالی Overview

• معرفی Introduction

• در Auth State Changes مشترک شوید Subscribe to Auth State Changes

• از مسیرها با معیارهای دلخواه محافظت کنید Protect Routes with Arbitrary Criteria

• یک userUser Hook ایجاد کنید Create a useUser Hook

• توکن های کاربران را در درخواست ها لحاظ کنید Include Users' Tokens in Requests

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: از داده های کاربران محافظت کنید Build A Note-Sharing App: Protect Users' Data

• بررسی اجمالی Overview

• معرفی Introduction

• محافظت از داده های کاربران در برابر دسترسی ناخواسته Protect Users' Data from Unwanted Access

• جلوگیری از حذف اطلاعات سایر کاربران توسط کاربران Prevent Users From Deleting Other Users' Data

• جلوگیری از تغییر داده های غیرمجاز Prevent Unauthorized Data Modification

• حفاظت را به نقطه پایانی Create Note اضافه کنید Add Protection to the Create Note Endpoint

• از میان افزار برای کاهش تکرار استفاده کنید Use Middleware to Reduce Repetition

• میان افزار بیشتر اضافه کنید Add More Middleware

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: مدیریت حساب کاربری Build A Note-Sharing App: User Account Management

• بررسی اجمالی Overview

• معرفی Introduction

• نمایش تفکیک داده ها Data Segregation Demonstration

• ایجاد حساب کاربری User Account Creation

• خطاهای ورود و ایجاد حساب کاربری را مدیریت کنید Handle Login and Create Account Errors

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: اشتراک گذاری یادداشت را به Front-end اضافه کنید Build A Note-Sharing App: Add Note-Sharing to the Front-end

• بررسی اجمالی Overview

• معرفی Introduction

• یک صفحه برای ویرایش تنظیمات اشتراک‌گذاری ایجاد کنید Create a Page for Editing Sharing Settings

• یک لیست ایمیل های مشترک ایجاد کنید Create a Shared Emails List

• منطق اشتراک گذاری اولیه Front-end Basic Front-end Sharing Logic

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: اصول تأیید ایمیل Build A Note-Sharing App: Email Verification Basics

• بررسی اجمالی Overview

• معرفی Introduction

• اصول تأیید ایمیل Email Verification Basics

• یک صفحه «لطفاً تأیید ایمیل» ایجاد کنید Create a "Please Verify Email" Page

• ایجاد جریان حساب را دوباره فاکتور کنید Refactor the Create Account Flow

• ارسال ایمیل از یک Node Server Send Emails From A Node Server

• نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: تأیید ایمیل پیشرفته Build A Note-Sharing App: Advanced Email Verification

• بررسی اجمالی Overview

• معرفی Introduction

• یک صفحه فرود تأیید ایمیل ایجاد کنید Create an Email Verification Landing Page

• یک مسیر سرور تأیید ایمیل ایجاد کنید Create an Email Verification Server Route

• از مسیرهای سرور در برابر کاربران تایید نشده محافظت کنید Protect Server Routes from Unverified Users

• جلوگیری از ورود کاربران تایید نشده Prevent Unverified Users from Logging In

• نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: اشتراک‌گذاری لینک Build A Note-Sharing App: Link Sharing

• بررسی اجمالی Overview

• معرفی Introduction

• یک بخش فعال/غیرفعال ایجاد کنید Create an Enable/Disable Section

• یک نقطه پایانی برای فعال کردن اشتراک گذاری لینک ایجاد کنید Create an Endpoint for Enabling Link Sharing

• یک نقطه پایانی برای غیرفعال کردن اشتراک گذاری لینک ایجاد کنید Create an Endpoint for Disabling Link Sharing

• بارگیری یادداشت های پیوند مشترک از سرور Load Link-Shared Notes from the Server

• نتیجه Conclusion

یک برنامه اشتراک گذاری یادداشت بسازید: ارتباطات بلادرنگ Build A Note-Sharing App: Real-Time Communication

• بررسی اجمالی Overview

• معرفی Introduction

• Web-Sockets را به Express اضافه کنید Add Web-Sockets to Express

• Web-Sockets را به React اضافه کنید Add Web-Sockets to React

• ارسال داده از طریق سوکت وب Send Data Through a Web-Socket

• درخواست های "بار" را به سوکت های وب تبدیل کنید Convert "Load" Requests to Web-Sockets

• نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: محافظت از سوکت‌های وب Build A Note-Sharing App: Web-Socket Protection

• بررسی اجمالی Overview

• معرفی Introduction

• میان افزار "User Can Edit Note" را ایجاد کنید Create "User Can Edit Note" Middleware

• تبدیل Express Middleware به Socket.io Convert Express Middleware to Socket.io

• میان افزار برای رویدادهای فردی Middleware for Individual Events

• خطاهای سوکت در قسمت جلویی را مدیریت کنید Handle Socket Errors on the Front-end

• یک هوک سفارشی برای سوکت های وب ایجاد کنید Create a Custom Hook for Web-Sockets

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: استراتژی های سازمان وب سوکت Build A Note-Sharing App: Web-Socket Organization Strategies

• بررسی اجمالی Overview

• معرفی Introduction

• منطق وب سوکت را به طور موثر سازماندهی کنید Organize Web-Socket Logic Effectively

• کنترل کننده رویداد را در فایل های جداگانه تعریف کنید Define Event Handlers in Separate Files

• منطق اتصال اولیه را تعریف کنید Define Initial Connection Logic

• Socket Middleware را اضافه کنید Add Socket Middleware

• نتیجه Conclusion

ایجاد یک برنامه اشتراک‌گذاری یادداشت: سوکت‌های وب در عمق Build A Note-Sharing App: Web-Sockets In-Depth

• بررسی اجمالی Overview

• معرفی Introduction

• داده های مشتری را همزمان نگه دارید Keep Client Data In Sync

• جلوگیری از حلقه های سوکت بی نهایت Prevent Infinite Socket Loops

• نقش ها را به داده های وب سوکت اضافه کنید Add Roles to Web-Socket Data

• از اتاق های وب سوکت استفاده کنید Use Web-Socket Rooms

• نتیجه Conclusion

یک برنامه اشتراک‌گذاری یادداشت بسازید: سوکت‌های وب و نقاط پایانی را ترکیب کنید Build A Note-Sharing App: Combine Web-Sockets and Endpoints

• بررسی اجمالی Overview

• معرفی Introduction

• چند نوع اتصال وب سوکت Multiple Web-Socket Connection Types

• اتصالات جدید سوکت وب را مدیریت کنید Handle New Web-Socket Connections

• بارگیری داده ها از طریق سوکت های وب Loading Data Via Web-Sockets

• داده های سمت مشتری را فوراً به روز کنید Update Client-Side Data Immediately

• نتیجه Conclusion