آموزش کامل توسعه MERN Stack 2021

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

معرفی Introduction

• مقدمه ای بر دوره Introduction to the Course

• نصب ویرایشگرهای متن Installing the Text Editors

گره js Node js

• Node js چیست؟ What is Node js?

• نصب گره JS Installing Node js

• اصول Command Prompt Command Prompt basics

• ماژول های داخلی Node js The Inbuilt modules of Node js

بیان js Express js

• مقدمه ای برای اکسپرس Introduction to Express

• شروع سرور localhost با استفاده از Express Starting the localhost server using Express

• درخواست و پاسخ Request and Response

• نصب Nodemon (بسته npm) Installing the Nodemon (npm package)

• مسیریابی در بیان Routing in express

• پاسخ دادن به درخواست با یک فایل HTML Responding the request with a HTML file

• ماژول تجزیه کننده بدن body parser module

• پروژه گره و اکسپرس Node and express project

api API

• معرفی API Introduction to the API

• معرفی JSON - روشی برای برقراری ارتباط Introducing JSON - a way of communicating

• ساخت وب سایت پیش بینی هوا Making a weather forecasting website

• درخواست JSON را دریافت کنید GET request for JSON

• تجزیه JSON parsing the JSON

• دریافت داده های API زنده Getting live API data

• تجزیه کننده بدن برای ارسال درخواست به سرور-1 body parser to post request to the server-1

• تجزیه کننده بدن برای ارسال درخواست به سرور -2 body parser to post request to the server-2

MongoDB MongoDB

• نصب MongoDB Installing MongoDB

• همه چیز در مورد MongoDB Everything about MongoDB

REST API REST API

• معرفی REST API Introduction to the REST API

• کار با ROBO 3T Working with ROBO 3T

• بیایید یک چالش SET UP را انجام دهیم Let's do a SET UP challenge

• روش GET (همه) - قسمت - 1 GET(all) method - part - 1

• روش GET (همه) - قسمت - 2 GET(all) method - part - 2

• روش POST POST method

• روش حذف (همه) DELETE(all) method

• دریافت (یک) روش GET(one) method

• حذف روش (یک) DELETE(one) method

عکس العمل نشان دهید React

• React چیست؟ و این مزایا است What is React? and it's advantages

• ایجاد اولین برنامه واکنش ما Creating our very first react app

• با استفاده از codesandbox و یادگیری واکنش نشان می دهند using codesandbox and learning react

• مقدمه ای بر برنامه های React jsx Introduction to React apps jsx

• واکنش به چالش برنامه React app challenge

• اطلاعات بیشتر در مورد JSX more about JSX

• چالش های بیشتر در JSX More challenges on JSX

• ویژگی های JSX و یک ظاهر طراحی شده عناصر JSX attributes and styling the elements

• یک ظاهر طراحی شده برای عناصر واکنش دهنده Inline styling for react elements

• واکنش به ملفه ها React components

• واکنش به چالش اجزای سازنده React components challenge

• Javascript es6: واردات عملکرد صادرات Javascript es6: Import export function

• وسایل در واکنش نشان می دهند props in react

• عکس العمل های لوازم جانبی را واکنش نشان دهید React props practice

• نگاشت داده ها به م componentsلفه ها Mapping data to components

• نکاتی در مورد استفاده از ابزار React tips on using React tools

• ارائه شرطی Conditional Rendering

• React روتر و Project React router and Project

• کمی بیشتر در مورد React روترها A little bit more about React routers

• تفسیر روتر در مقابل تفاوت ملفه روتر Router render vs Router Component difference

• useParams در روترهای React useParams in React routers

• استفاده از مکان useLocation

• useHistory در روترهای واکنش دهنده useHistory in react routers

• یادگیری React قلاب ها و پیشخوان پروژه Learning React hooks and counter project

• واکنش به چالش هوک ها React Hooks challenge

• استفاده کنید useEffect

• مدیریت رویداد و فرم ها Event Handling and forms

• دست زدن به اجزای فرم Handling form components

• واکنش axios ، async انتظار و Pokemon API React axios,async await and Pokemon API

• تغییر وضعیت پیچیده JSX changing complex state JSX

• اپراتور گسترش ES6 ES6 spread operator

• پروژه لیست Todo Todo list project

• Context API با اجزای عملکردی Context API with functional components

• مشکل موجود problem at hand

• قلاب استفاده کنید useContext hook

• پروژه کوچک Context API small Context API project

• React redux مقدمه React redux Introduction

• ایجاد برنامه Redux ما Creating our redux app

• ساختار پرونده برای redux واکنش File structure for react redux

• طراحی م cartلفه سبد خرید ما Designing our cart component

• ایجاد اقدام برای وب سایت ما Creating the action for our website

• ایجاد کاهنده ها Creating reducers

• ایجاد ظروف Creating containers

• جریان Redux کامل Complete Redux flow

• افزودن مقدار به سبد خرید Adding the value to the cart

• به اشتراک گذاری داده ها بین اجزا Sharing data between components

• حذف از قابلیت چرخ دستی Removing from the cart functionality

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

• شروع پروژه Project start

• ایجاد م componentsلفه های پروژه Creating components for project

• ایجاد فروشگاه و کاهنده ها creating store and reducers

• دریافت داده از REST API Receiving data from REST API

• عیب یابی مجدد کد Refactoring the code

• ایجاد م addلفه addContact Creating the addContact component

• افزودن اطلاعات تماس با استفاده از useDispatch Adding the contact details using useDispatch

• رفع هشدارها و ایجاد ساختار پرونده Fixing warnings and creating a file structure

• افزودن عملکرد مخاطب ویرایش Adding the edit contact Function

• مخاطب فردی را حذف کنید Delete an individual Contact

• تکمیل پروژه ما Completing our project

• معرفی Redux thunk و middleware Introduction to Redux thunk and middlewares

• لینک Github برای پروژه Github link for the project

• راه اندازی پروژه ما Setting up our project

• پروژه Redux thunk Redux thunk project

وب سایت رسانه های اجتماعی Social Media Website

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

• شروع پروژه ما Starting up our Project

• بیایید در مورد Middlewares بیاموزیم Lets learn about Middlewares

• راه اندازی سرور ما Setting up our server

• ایجاد طرحواره Creating the Schema

• اتصال به پایگاه داده ابری MongoDB Connecting to MongoDB cloud database

• هش کردن رمزهای عبور Hashing passwords

• ایجاد مسیر ورود به سیستم Creating a Log in route

• JWT چیست؟ What is JWT?

• با استفاده از JWT Using the JWT

• ایجاد Middleware Creating Middleware

• ایجاد طرح (پست) Creating the Schema(post)

• ایجاد مسیر GET (همه) Creating the GET(all) route

• پست های ایجاد شده توسط مسیر کاربر Posts created by user route

• راه اندازی برنامه React (جلوی جلویی) Setting up the React application (Front end)

• ایجاد صفحه ثبت نام و ورود به سیستم Creating the Sign up and Sign in page

• UI صفحه پروفایل Profile page UI

• رابط کاربری صفحه اصلی The Home page UI

• ایجاد یک پست Creating a Post

• ارسال اطلاعات به سرور Posting data to the Server

• ویژگی ورود به سیستم Sign in feature

• ایجاد قابلیت بارگذاری Creating the upload functionality

• استفاده از نشانه ها برای بارگذاری تصویر Using tokens to upload the image

• افزودن Context API Adding Context API

• پیوندهای مورد نیاز را در نوار nav نشان می دهد showing the required links in the nav bar

• نمایش تمام پست ها در صفحه اصلی Showing all the posts on home page

• ویژگی خروج از سیستم Log out feature

• اطلاعات کاربر در صفحه نمایه User info in the profile page

• ویژگی را دوست دارم و برعکس Like and unlike feature

• ویژگی مانند و مانند آن (قسمت جلویی) Like and unlike feature (front end)

• ویژگی نظر (باطن) Comment feature (backend)

• ویژگی نظر (Frontend) Comment feature (Frontend)

• در حال حذف پست Deleting the post

• صفحه پروفایل سایر کاربران Profile page of other users

• صفحه پروفایل سایر کاربران (قسمت جلویی) Profile page of other users(front end)

• دنبال کردن و لغو دنبال کردن ویژگی (پایان پشت) Follow and unfollow feature(back end)

• دنبال کردن و لغو دنبال کردن ویژگی (قسمت جلویی) Follow and unfollow feature ( front end)

• رفع اشکالات Fixing bugs

• رفع اشکال پیروان نامحدود Fixing the unlimited followers bug

• نمایش پست دنبال کردن (باطن) Showing the post of following(backend)

• نمایش پست دنبال کردن (جلوی جلویی) Showing the post of following(front end)

• هنگام ثبت نام ، عکس نمایه را بارگذاری می کنید Uploading profile picture while sigining up

اعزام به هروکو Deploying to Heroku

• بیایید وب سایت خود را در Heroku مستقر کنیم Let's deploy our website to Heroku