آموزش Full-Stack React Development

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

اصول اولیه Firebase Auth Firebase Auth Basics

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

• معرفی Introduction

• ایجاد صفحات Creating Pages

• هدایت مجدد کاربران احراز هویت نشده Redirecting Unauthenticated Users

• ورود به سیستم با Firebase Auth Signing In With Firebase Auth

• گوش دادن به تغییرات Auth Listening for Auth Changes

• نتیجه Conclusion

داده های سمت سرور را در React بارگیری کنید Load Server-Side Data in React

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

• معرفی Introduction

• استراتژی اصلی تبدیل تمام پشته Basic Full-stack Conversion Strategy

• راه اندازی سرور تمام پشته Full-stack Server Setup

• "خواندن" نقاط پایانی سرور "Read" Server Endpoints

• تبدیل صفحات به استفاده از داده های سرور Converting Pages to Use Server Data

• تبدیل متن به استفاده از داده های سرور Converting Context to Use Server Data

• نتیجه Conclusion

ایجاد و تغییر داده های سمت سرور در React Create and Modify Server-Side Data in React

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

• معرفی Introduction

• "ایجاد" نقاط پایانی سرور "Create" Server Endpoints

• ایجاد درخواست های "ایجاد" از فرانت اند Making "Create" Requests from the Front-End

• "حذف" نقاط پایانی سرور "Delete" Server Endpoints

• ایجاد درخواست های "حذف" از Front-End Making "Delete" Requests from the Front-End

• "به روز رسانی" نقاط پایانی سرور "Update" Server Endpoints

• ایجاد درخواست های "به روز رسانی" از Front-end Making "Update" Requests from the Front-end

• نتیجه Conclusion

ایجاد حساب و مدیریت خطا در Firebase Auth Account-Creation and Error Handling in Firebase Auth

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

• معرفی Introduction

• شی کاربر Firebase The Firebase User Object

• اکانت های Firebase Auth ایجاد کنید Create Firebase Auth Accounts

• مدیریت خطای احراز هویت Auth Error Handling

• میله های ناوبری Auth-Conscious Auth-Conscious Navigation Bars

• نتیجه Conclusion

الگوهای پیشرفته Firebase Auth Advanced Firebase Auth Patterns

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

• معرفی Introduction

• ایجاد قلاب های سفارشی برای Auth Creating Custom Hooks for Auth

• استفاده از قلاب های سفارشی در داخل اجزا Using Custom Hooks Inside Components

• توابع داخل قلاب های سفارشی Functions Inside Custom Hooks

• ایجاد حساب در قلاب های سفارشی Creating Accounts In Custom Hooks

• خروج از سیستم در قلاب های سفارشی Logging Out In Custom Hooks

• نتیجه Conclusion

Firebase Auth در برنامه های Full-Stack Firebase Auth in Full-Stack Apps

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

• معرفی Introduction

• راه اندازی سرور اکسپرس Express Server Setup

• React Front-end Setup React Front-end Setup

• درخواست با توکن های Auth Making Requests with Auth Tokens

• نتیجه Conclusion

امنیت نقطه پایانی با Firebase Auth Endpoint Security with Firebase Auth

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

• معرفی Introduction

• محافظت از نقاط پایانی "به روز رسانی" و "حذف". Protecting "Update" and "Delete" Endpoints

• محافظت از "ایجاد" نقاط پایانی Protecting "Create" Endpoints

• استفاده از Auth Middleware Using Auth Middleware

• نتیجه Conclusion

Firebase Auth را به برنامه‌های React موجود اضافه کنید Add Firebase Auth to Existing React Apps

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

• معرفی Introduction

• افزودن صفحه ورود به برنامه های موجود Adding a Login Page to Existing Apps

• محصور کردن منطق تأیید با زمینه Encapsulating Auth Logic with Context

• افزودن Auth به نوار ناوبری Adding Auth to a Navigation Bar

• ایجاد قلاب های سفارشی برای زمینه Creating Custom Hooks for Context

• نتیجه Conclusion

Firebase Auth را به سرورهای Express موجود اضافه کنید Add Firebase Auth to Existing Express Servers

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

• معرفی Introduction

• مالکیت داده در Back-end Data Ownership on the Back-end

• گنجاندن خودکار توکن ها در درخواست ها Automatically Including Tokens In Requests

• حفاظت از داده های کاربر در نقاط پایانی Protecting User Data in Endpoints

• نتیجه Conclusion

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

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

• معرفی Introduction

• یک نقطه پایانی "Share Note" اضافه کنید Add a "Share Note" Endpoint

• درخواست های "اشتراک گذاری" را از Front-end انجام دهید Make "Share" Requests from the Front-end

• قابلیت "Unshare" را اضافه کنید Add "Unshare" Functionality

• بارگیری یادداشت های مشترک Load Shared Notes

• نتیجه Conclusion

ایجاد یک برنامه اشتراک گذاری یادداشت: مجوزهای کاربر را اضافه کنید Build A Note-Sharing App: Add User Permissions

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

• معرفی Introduction

• پنهان کردن عناصر بر اساس مالکیت Hide Elements Based On Ownership

• اضافه کردن سطوح مجوز به Back-end Add Permission Levels To the Back-end

• سطوح مجوز را به Front-end اضافه کنید Add Permission Levels To the Front-end

• به سایر کاربران اجازه ویرایش یادداشت ها را بدهید Allow Other Users to Edit Notes

• نتیجه Conclusion

ایجاد یک برنامه 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

ملزومات پشته MERN Essentials of the MERN Stack

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

• معرفی Introduction

• ساختار پشته اصلی MERN Basic MERN Stack Structure

• تنظیم جلویی Front-end Setup

• راه اندازی Back-end Back-end Setup

• ساخت یک React Front-end Building a React Front-end

• بارگیری داده ها از Back-end Loading Data from the Back-end

• ایجاد منابع Creating Resources

• به روز رسانی و حذف منابع Updating and Deleting Resources

• نتیجه Conclusion

مبانی پایگاه داده پشته MERN MERN Stack Database Basics

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

• معرفی Introduction

• مبانی MongoDB MongoDB Basics

• بهبود جریان توسعه Development Flow Improvements

• اتصال به MongoDB از Node Connecting to MongoDB from Node

• بارگیری داده ها از MongoDB Loading Data from MongoDB

• درج داده ها در MongoDB Inserting Data into MongoDB

• حذف داده ها در MongoDB Deleting Data in MongoDB

• به روز رسانی داده ها در MongoDB Updating Data in MongoDB

• نتیجه Conclusion