آموزش همه آنچه باید بدانید MERN Stack with Practical Project

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

معرفی Introduction

• بررسی اجمالی دوره Course Overview

• Nodejs چیست؟ What is Nodejs

• Nodejs چگونه کار می کند How Nodejs Work

• Nodejs را روی سیستم عامل ویندوز نصب کنید Install Nodejs on Windows OS

• Nodejs را روی سیستم عامل مک نصب کنید Install Nodejs on Mac OS

• Nodejs را روی سیستم عامل لینوکس نصب کنید Install Nodejs on Linux OS

ماژول و شی جهانی Module and Global Object

• نحوه اجرای کد Nodejs How to Run Nodejs Code

• شی جهانی Global Object

• ماژول چیست؟ What is Module

• نحوه صادرات و واردات در Nodejs How to Do Export and Import in Nodejs

• تابع ماژول Wrapper چیست؟ What is Module Wrapper Function

ماژول هسته در Nodejs Core Module in Nodejs

• معرفی ماژول اصلی Core Module Introduction

• ماژول مسیر Path Module

• ماژول سیستم عامل OS Module

• ماژول FS قسمت 1 FS Module Part 1

• ماژول FS قسمت 2 FS Module Part 2

• ماژول رویداد قسمت 1 Event Module Part 1

• ماژول رویداد قسمت 2 Event Module Part 2

• ماژول HTTP HTTP Module

معرفی بخار و بافر Steam and Buffer Introduction

• معرفی بخار و بافر Steam and Buffer Introduction

• جریان را بخوانید Read Stream

• جریان را بنویسید Write Stream

• استریم با پایپ Stream with Pipe

چارچوب اکسپرس Express Framework

• معرفی چارچوب اکسپرس Express Framework Introduction

• راه اندازی اولیه پروژه Basic Project Setup

• سرور اکسپرس اول First Express Server

• ماژول Nodemon Nodemon Module

• روش درخواست Request Method

• نگاهی به پستچی Take a Look About Postman

• متن درخواست ورودی را تجزیه کنید Parse Incoming Request Body

• Params Object Params Object

• رشته پرس و جو Query String

• مسیر فرعی Sub Route

• بیسکویت ها Cookies

• درخواست معرفی شی Request Object Introduction

• درخواست شی قسمت 2 Request Object Part 2

• معرفی شی پاسخ Response Object Introduction

• روش پاسخگویی Response Method

• نمایش موتور و پاسخ Html View Engine and Html Response

• فرمت پاسخ Response Format

• کد وضعیت پاسخ Http Http Response Status Code

• Middleware چیست؟ What is Middleware

• نحوه استفاده از Middleware How to Use Middleware

• خطا در مدیریت میان افزار Error Handling Middleware

• رسیدگی به خطا Error Handling

MongoDb و Mongoose MongoDb and Mongoose

• معرفی پایگاه داده Database Introduction

• MongoDB را روی سیستم عامل ویندوز نصب کنید MongoDB Install on Windows OS

• نصب MongoDB در سیستم عامل مک MongoDB Install on Mac OS

• نصب MongoDB بر روی سیستم عامل لینوکس MongoDB Install on Linux OS

• اتصال پایگاه داده را ایجاد کنید Establish Database Connection

• افزودن به پایگاه داده قسمت 1 Add to Database Part 1

• افزودن به پایگاه داده قسمت 2 Add to Database Part 2

• سند واحد را از پایگاه داده بیابید Find Single Document from Database

• چندین سند را از پایگاه داده بیابید Find Multiple Document from Database

• به روز رسانی سند واحد Update Single Document

• به روز رسانی چندین سند Update Multiple Document

• حذف سند واحد Delete Single Document

• حذف چند سند Delete Multiple Document

• ODM چیست؟ What is ODM

• اتصال پایگاه داده با استفاده از Mongoose Database Connection Using Mongoose

• طرحواره را تعریف کنید Schema Define

• با استفاده از Mongoose سند واحد را اضافه کنید Add Single Document Using Mongoose

• با استفاده از Mongoose چندین سند اضافه کنید Add Multiple Document Using Mongoose

• به روز رسانی سند واحد با استفاده از Mongoose Update Single Document Using Mongoose

• با استفاده از Mongoose چندین سند را به روز کنید Update Multiple Document Using Mongoose

• با استفاده از Mongoose یک سند را پیدا کنید Find Single Document Using Mongoose

• با استفاده از Mongoose چندین سند را پیدا کنید Find Multiple Document Using Mongoose

• حذف سند واحد با استفاده از Mongoose Delete Single Document Using Mongoose

• حذف چندین سند با استفاده از Mongoose Delete Multiple Document Using Mongoose

• به ابزار GUI MongoDB Compass نگاهی بیندازید Take a Look MongoDB Compass GUI Tool

پروژه Todo Project Todo

• بررسی اجمالی پروژه Project Overview

• راه اندازی پروژه Initialize Project

• پروژه را به Github اضافه کنید Add Project to Github

• با پایگاه داده ارتباط برقرار کنید Connect with Database

• فهرست کار صفحه List Todo Page

• صفحه Todo را اضافه کنید Add Todo Page

• صفحه Todo را به روز کنید Update Todo Page

• صفحه Todo را حذف کنید Delete Todo Page

• افزودن فایل CSS خارجی Adding External CSS File

• همه پیوندها قابل کلیک هستند All Link Clickable

• مفهوم جزئی EJS EJS Partials Concept

• عنوان پویا صفحه Page Dynamic Title

• طرحواره مدل Todo Todo Model Schema

• Todo را اضافه کنید Add Todo

• لیست کار List Todo

• فرمت تاریخ Date Format

• بازآفرینی کد قسمت 1 Code Refactoring Part 1

• کد بازسازی قسمت 2 Code Refactoring Part 2

• بازسازی کد قسمت 3 Code Refactoring Part 3

• بازسازی کد قسمت 4 Code Refactoring Part 4

• بازسازی کد قسمت 5 Code Refactoring Part 5

• متغیر محیطی Environment Variable

• تست بعد از Refactor Test After Refactor

• Todo را به روز کنید Update Todo

• Todo را حذف کنید Delete Todo

• برنامه تست Test App

• این مخزن را شبیه سازی کنید Clone This Repository

Project Blog RESTful APIs Project Blog RESTful APIs

• تجزیه و تحلیل نیازمندی های پروژه Project Requirement Analysis

• RESTful API چیست؟ What is RESTful API

• راه اندازی اولیه پروژه Initial Project Setup

• اتصال پایگاه داده Connect Database

• پایگاه داده ابری Cloud Database

• مدل کاربر User Model

• مسیر ثبت نام Signup Route

• تست مسیر ثبت نام Test Signup Route

• پایگاه داده تست در مرورگر Test Database in the Browser

• ماژول مورگان Morgan Module

• فرمت پاسخ Response Format

• خطا در مدیریت میان افزار Error Handling Middleware

• خطای تست میان افزار مدیریت کنید Test Error Handle Middleware

• مسیر یافت نشد Not Found Route

• اعتبار سنجی ثبت نام قسمت 1 Signup Validation Part 1

• اعتبار سنجی ثبت نام قسمت 2 Signup Validation Part 2

• اعتبار سنجی ثبت نام قسمت 3 Signup Validation Part 3

• رمز عبور هش شده Hashed Password

• مسیر ورود به سیستم Signin Route

• توکن تولید کنید Generate Token

• کد تایید ایمیل Email Verification Code

• ایمیل تایید بفرست Send Verification Email

• افزودن متغیر محیطی Add Environment Variable

• تأیید کاربر User Verification

• ارسال کد رمز فراموش شده Send Forgot Password Code

• بازیابی رمز عبور Recover Password

• احراز هویت میان افزار Authenticate Middleware

• رمز عبور را تغییر دهید Change Password

• بروزرسانی پروفایل Update Profile

• مدل دسته بندی Category Model

• اضافه کردن دسته Add Category

• Admin Middleware است Is Admin Middleware

• به روز رسانی دسته Update Category

• حذف دسته Delete Category

• جستجوی دسته ها Search Categories

• دسته بندی صفحه بندی Categories Pagination

• دسته بندی جزئیات Detail Category

• معرفی ماژول فایل File Module Introduction

• آپلود فایل Upload File

• نام فایل Filename

• فیلتر فایل File Filter

• آپلود فایل چندگانه Upload Multiple File

• راه اندازی سطل AWS S3 AWS S3 Bucket Setup

• مدل فایل File Model

• ذخیره سازی مولتر حافظه Multer Memory Storage

• فایل را در S3 آپلود کنید Upload File to S3

• افزودن فایل به پایگاه داده Add File to Database

• آدرس اینترنتی امضا شده Signed Url

• حذف فایل Delete File

• به روز رسانی تصویر پروفایل Update Profile Picture

• کاربر فعلی Current User

• مدل پست Post Model

• اضافه کردن پست Add Post

• به روز رسانی پست Update Post

• حذف پست Delete Post

• لیست پست Post List

• جزئیات پست Detail Post

• فیلتر کردن پست بر اساس دسته Filter Post by Category

React Introduction React Introduction

• React چیست What is React

• Virtual DOM چیست؟ What is Virtual DOM

• راه اندازی یک React Project Setup a React Project

JSX Element و Rendering JSX Element JSX Element and Rendering JSX Element

• عنصر JSX چیست؟ What is JSX Element

• JSX جزئیات بیشتر JSX More Detail

• رندر کردن عنصر JSX Rendering JSX Element

جزء و لوازم جانبی Component and Props

• کامپوننت چیست What is Component

• Props چیست What is Props

• جزء صادرات و واردات Export and Import Component

• کامپوننت ریشه Root Component

• اموال کودکان Children Property

• کامپوننت مبتنی بر کلاس Class Based Component

حالت و روش چرخه زندگی State and Life Cycle Method

• ایالت چیست What is State

• اطلاعات بیشتر درباره ایالت More About State

• کامپوننت نصب شد Component Did Mount

• وضعیت به روز رسانی Update State

• کامپوننت Unmount می شود Component will Unmount

• حالت در مولفه عملکردی State in Functional Component

• مدیریت رویداد Event Handler

• انتقال پارامتر به رویداد Handler Passing Parameter to Event Handler

فهرست و کلید رندر شرطی Conditional Rendering List and Key

• رندر شرطی چیست What is Conditional Rendering

• رندر مشروط جزئیات بیشتر Conditional Rendering More Detail

• فهرست کنید List

• لوازم کلیدی را فهرست کنید List Key Props

• برنامه پیشخوان Counter App

React Form React Form

• فرم کنترل شده در مقابل فرم کنترل نشده Controlled Form vs Uncontrolled Form

• عنصر ورودی Input Element

• عنصر ورودی Textarea Textarea Input Element

• عنصر را انتخاب کنید Select Element

• عنصر ورودی چک باکس Checkbox Input Element

• عنصر ورودی رادیویی Radio Input Element

• ارسال ورودی Submit Input

• فرم ثبت نام Registration Form

جزء مرتبه بالاتر Higher Order Component

• مولفه مرتبه بالاتر چیست؟ What is Higher Order Component

• نحوه ایجاد مؤلفه مرتبه بالاتر How to Create Higher Order Component

• نحوه استفاده از کامپوننت مرتبه بالاتر How to Use Higher Order Component

Render Props Pattern Render Props Pattern

• Render Props چیست؟ What is Render Props

• Render Props مثال Render Props Example

• Render Props Variation Render Props Variation

Context API Context API

• حفاری حفاری Props Drilling

• Context API چیست؟ What is Context API

• ایجاد زمینه سفارشی Create Custom Context

• نحوه استفاده از متن How to Use Context

• ساخته شده در زمینه Built in Context

• useContext Hook useContext Hook

واکنش هوک React Hook

• معرفی React Hook React Hook Introduction

• UseEffect Hook چیست What is useEffect Hook

• مثال تایمر Timer Example

• عملکرد پاکسازی Cleanup Function

• واکشی داده از درخواست API Fetch Data from API Request

• React Memo و استفاده از Callback Hook React Memo and useCallback Hook

• استفاده از Memo Hook useMemo Hook

• useRef Hook useRef Hook

• استفاده از Reducer Hook useReducer Hook

• پیشخوان پیچیده Complex Counter

• نمونه لیست پست را واکشی کنید Fetch Post List Example

• واکشی لیست پست ها توسط useReducer Hook Fetch Post List by useReducer Hook

• هوک سفارشی Custom Hook

React CSS React CSS

• React Stylesheet React Stylesheet

• سبک CSS در Html CSS Style in Html

• CSS درون خطی Inline CSS

• ماژول CSS CSS Module

• CSS پویا Dynamic CSS

روتر واکنش React Router

• React Router چیست؟ What is React Router

• پیکربندی مسیر Route Configuring

• پیوند ناو Nav Link

• لینک فعال Active Link

• به صورت برنامه ای پیمایش کنید Navigate Programmatically

• مسیر یافت نشد Not Found Route

• مسیر پویا Dynamic Route

• URL Params Url Params

• جستجوی پارامترها Search Params

• مسیر تو در تو Nested Route

• پیوند نسبی Relative Link

• کد منبع Source Code

پروژه وبلاگ React React Blog Project

• تجزیه و تحلیل نیازمندی های پروژه Project Requirement Analysis

• راه اندازی React App Initiating React App

• طرح بندی و مسیریابی پروژه Project Layout and Routing

• فرم ثبت نام Signup Form

• اعتبار سنجی فرم ثبت نام Signup Form Validation

• یکپارچه سازی API ثبت نام Signup API Integration

• Cors Middleware Cors Middleware

• آدرس پایه Base Url

• پیام نان تست Toast Message

• ورود به سیستم یکپارچه سازی API Signin API Integration

• ذخیره اطلاعات در محل ذخیره سازی Store Information to Local Storage

• زمینه تأیید اعتبار Auth Context

• عملکرد خروج Logout Functionality

• ماژول دسته همه صفحات Category Module All Pages

• اضافه کردن دسته Add Category

• توکن را به سرصفحه های درخواست اضافه کنید Add Token to Request Headers

• فهرست دسته Category List

• صفحه بندی فهرست دسته ها Category List Pagination

• جستجوی دسته Search Category

• به روز رسانی دسته Update Category

• Modal Confirmation را حذف کنید Delete Confirmation Modal

• حذف دسته Delete Category

• پست ماژول همه صفحات Post Module All Pages

• افزودن پست جدید Add New Post

• آپلود فایل Upload File

• لیست پست Post List

• جزئیات ارسال Post Detail

• ارسال به روز رسانی Post Update

• حذف پست Post Delete

• صفحه نخست Home Page

• بروزرسانی پروفایل Update Profile

• رمز عبور را تغییر دهید Change Password

• تایید کاربر Verify User

• نقش چند کاربر Multi User Role

• بازیابی رمز عبور Recover Password

• بسته شدن Wrapup

بعدش چی What Next

• بعدش چی What Next