آموزش توسعه وب فول استک با ری اکت جی‌اس، انگولار و نود جی‌اس - آخرین آپدیت

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

Welcome Course-خوش آمدید به دوره Welcome Course:

• Built a Real-World Website with HTML and CSS-ساخت یک وب‌سایت واقعی با HTML و CSS Built a Real-World Website with HTML and CSS

• Project Files for HTML CSS Javascript, React JS, NodeJS, MongoDB-فایل‌های پروژه برای HTML، CSS، جاوا اسکریپت، React JS، NodeJS، MongoDB Project Files for HTML CSS Javascript, React JS, NodeJS, MongoDB

• General Terms-شرایط عمومی General Terms

• FAQ about Full Stack Web Development with React JS, Angular, NodeJS, MongoDB-سوالات متداول درباره توسعه وب فول استک با React JS، Angular، NodeJS، MongoDB FAQ about Full Stack Web Development with React JS, Angular, NodeJS, MongoDB

• How the Website Works?-وب‌سایت چگونه کار می‌کند؟ How the Website Works?

• What Is IDE?-IDE چیست؟ What Is IDE?

• First Webpage-اولین صفحه وب First Webpage

HTML Fundamentals-مبانی HTML HTML Fundamentals

• About the Section-درباره این بخش About the Section

• What is HTML?-HTML چیست؟ What is HTML?

• HTML Document Structure-ساختار سند HTML HTML Document Structure

• Text Element-عنصر متن Text Element

• Lists-لیست‌ها Lists

• Images-تصاویر Images

• Hyperlinks-پیوندها Hyperlinks

• Container Elements-عناصر کانتینر Container Elements

• What is Semantic HTML?-HTML معنایی چیست؟ What is Semantic HTML?

• Creating Tables with HTML-ایجاد جدول با HTML Creating Tables with HTML

• Colspan & Rowspan-Colspan و Rowspan Colspan & Rowspan

• Working With Form Elements-کار با عناصر فرم Working With Form Elements

• Checkbox-چک‌باکس Checkbox

• Input type; Radio & File-نوع ورودی: رادیو و فایل Input type; Radio & File

• Select & Option-انتخاب و گزینه Select & Option

• New Visual Studio Code Extensions-افزونه‌های جدید Visual Studio Code New Visual Studio Code Extensions

• Challenge-چالش Challenge

• Let’s Make the Challenges-چالش‌ها را انجام دهیم Let’s Make the Challenges

• Challenge Solutions Continue-ادامه راه‌حل چالش‌ها Challenge Solutions Continue

• Quiz-آزمون Quiz

CSS Fundamentals-مبانی CSS CSS Fundamentals

• About the Section-درباره این بخش About the Section

• What is CSS-CSS چیست؟ What is CSS

• Styling Methods-Inline, Internal and External-روش‌های استایل‌دهی: درون‌خطی، داخلی و خارجی Styling Methods-Inline, Internal and External

• Let’s Do Some Styling-بیایید مقداری استایل‌دهی کنیم Let’s Do Some Styling

• Combining Selectors-ترکیب انتخابگرها Combining Selectors

• Style Operation With Class and Id Assignment-عملیات استایل با تخصیص کلاس و ID Style Operation With Class and Id Assignment

• Order of Priority in CSS-ترتیب اولویت در CSS Order of Priority in CSS

• Working with Colors-کار با رنگ‌ها Working with Colors

• Working with Colors on Code-کار با رنگ‌ها در کد Working with Colors on Code

• Using Border in CSS-استفاده از حاشیه در CSS Using Border in CSS

• Pseudo-Class in CSS-کلاس‌های شبه در CSS Pseudo-Class in CSS

• Styling Hyperlinks With Pseudo-Class-استایل‌دهی به پیوندها با کلاس شبه Styling Hyperlinks With Pseudo-Class

• Crome DevTools-DevTools کروم Crome DevTools

• Important Advices for CSS-نکات مهم برای CSS Important Advices for CSS

• Challenge 1-چالش ۱ Challenge 1

• Box Model-مدل جعبه Box Model

• Margin & Padding-فاصله داخلی و خارجی Margin & Padding

• Let’s Start Using Margin & Padding-بیایید شروع به استفاده از Margin و Padding کنیم Let’s Start Using Margin & Padding

• Dimensioning with CSS-اندازه‌گیری با CSS Dimensioning with CSS

• Let’s Centre Our Page-صفحه خود را در مرکز قرار دهیم Let’s Centre Our Page

• Challenge 2-چالش ۲ Challenge 2

• Types of Boxes-انواع جعبه‌ها Types of Boxes

• Element Positioning with CSS-موقعیت‌دهی عناصر با CSS Element Positioning with CSS

• Use of Fixed and Sticky-استفاده از Fixed و Sticky Use of Fixed and Sticky

• Creating Shadow in CSS-ایجاد سایه در CSS Creating Shadow in CSS

• Challenge 3-چالش ۳ Challenge 3

• Quiz-آزمون Quiz

Layout on Webpage-چیدمان در صفحه وب Layout on Webpage

• About the Section-درباره این بخش About the Section

• 3 Ways to Create Layout on Web Pages-۳ روش برای ایجاد چیدمان در صفحات وب 3 Ways to Create Layout on Web Pages

• Float-Float Float

• Flexbox-Flexbox Flexbox

• Flexbox Overview-مروری بر Flexbox Flexbox Overview

• Let’s Keep Using Flexbox-به استفاده از Flexbox ادامه دهیم Let’s Keep Using Flexbox

• Flex-Wrap-Flex-Wrap Flex-Wrap

• Adding Flexbox to Our Project-اضافه کردن Flexbox به پروژه ما Adding Flexbox to Our Project

• Adding Flexbox to Our Project 2-اضافه کردن Flexbox به پروژه ما ۲ Adding Flexbox to Our Project 2

• Let’s Change the Page Layout with Flexbox-چیدمان صفحه را با Flexbox تغییر دهیم Let’s Change the Page Layout with Flexbox

• Introduction to CSS Grid-مقدمه‌ای بر CSS Grid Introduction to CSS Grid

• What Is CSS Grid?-CSS Grid چیست؟ What Is CSS Grid?

• Let’s Continue Examining CSS Grid Features-به بررسی ویژگی‌های CSS Grid ادامه دهیم Let’s Continue Examining CSS Grid Features

• Other Grid Features-سایر ویژگی‌های Grid Other Grid Features

• Quiz-آزمون Quiz

Media Query and CSS Animations-Media Query و انیمیشن‌های CSS Media Query and CSS Animations

• Section Overview-مرور بخش Section Overview

• Media Query and CSS Animations Code Samples-نمونه کدهای Media Query و انیمیشن‌های CSS Media Query and CSS Animations Code Samples

• Responsive Menu Making With Media Query-ساخت منوی واکنش‌گرا با Media Query Responsive Menu Making With Media Query

• CSS Animations-انیمیشن‌های CSS CSS Animations

• Making a Slider Menu With Transform-ساخت منوی اسلایدر با Transform Making a Slider Menu With Transform

• Keyframes-Keyframes Keyframes

• Animation Examples With Keyframes-مثال‌های انیمیشن با Keyframes Animation Examples With Keyframes

• Quiz-آزمون Quiz

Portfolio Website-وب‌سایت نمونه کار Portfolio Website

• Portfolio Website-وب‌سایت نمونه کار Portfolio Website

• Let’s Start Creating the Sections-شروع به ساخت بخش‌ها کنیم Let’s Start Creating the Sections

• Let’s Start With Header Creation-با ساخت هدر شروع کنیم Let’s Start With Header Creation

• Home Section-بخش خانه Home Section

• About Section-بخش درباره About Section

• Services Section-بخش خدمات Services Section

• Portfolio Section-بخش نمونه کار Portfolio Section

• Contact Section & Footer-بخش تماس و فوتر Contact Section & Footer

• Responsive Page Design-طراحی صفحه واکنش‌گرا Responsive Page Design

Bootstrap 5 Fundamentals-مبانی Bootstrap 5 Bootstrap 5 Fundamentals

• Bootstrap 5-Bootstrap 5 Bootstrap 5

• How to Integrate Bootstrap Into Applications-نحوه ادغام Bootstrap در برنامه‌ها How to Integrate Bootstrap Into Applications

• Container and Container Fluid-کانتینر و کانتینر سیال Container and Container Fluid

• Bootstrap 5 Typography Review-مروری بر تایپوگرافی Bootstrap 5 Bootstrap 5 Typography Review

• Text Features-ویژگی‌های متن Text Features

• Use of Colors-استفاده از رنگ‌ها Use of Colors

• Spacing-فاصله‌گذاری Spacing

• Border-حاشیه Border

• Display-نمایش Display

• Position Relative & Absolute-موقعیت نسبی و مطلق Position Relative & Absolute

• Position Fixed & Sticky-موقعیت ثابت و چسبنده Position Fixed & Sticky

• Sizing-اندازه‌گیری Sizing

• Buttons-دکمه‌ها Buttons

• Using Images Classes-استفاده از کلاس‌های تصویر Using Images Classes

• Other Bootstrap 5 Features-سایر ویژگی‌های Bootstrap 5 Other Bootstrap 5 Features

• Quiz-آزمون Quiz

Bootstrap 5 Advanced-Bootstrap 5 پیشرفته Bootstrap 5 Advanced

• Grid-گرید Grid

• Using Bootstrap Grid Structure on Different Screen Size-استفاده از ساختار گرید Bootstrap در اندازه‌های مختلف صفحه Using Bootstrap Grid Structure on Different Screen Size

• Aligning Columns and Gutters-تراز کردن ستون‌ها و گاترها Aligning Columns and Gutters

• Let's Start Using Flex with Bootstrap 5-شروع به استفاده از Flex با Bootstrap 5 کنیم Let's Start Using Flex with Bootstrap 5

• Vertical and Horizontal Alignment in Flex Structure-تراز عمودی و افقی در ساختار Flex Vertical and Horizontal Alignment in Flex Structure

• Other Flexbox Features-سایر ویژگی‌های Flexbox Other Flexbox Features

• List Group-گروه لیست List Group

• Form Classes-کلاس‌های فرم Form Classes

• Let's Continue Working with Form Elements-ادامه کار با عناصر فرم Let's Continue Working with Form Elements

• Other Input Features-سایر ویژگی‌های ورودی Other Input Features

• Creating Tables With Bootstrap 5-ایجاد جدول با Bootstrap 5 Creating Tables With Bootstrap 5

• Quiz-آزمون Quiz

Bootstrap Features Working With JavaScript-ویژگی‌های Bootstrap با جاوا اسکریپت Bootstrap Features Working With JavaScript

• Bootstrap Features Working With Javascript-ویژگی‌های Bootstrap با جاوا اسکریپت Bootstrap Features Working With Javascript

• Dropdown-دراپ‌داون Dropdown

• Modal-مودال Modal

• Carousel-اسلایدشو (کاروسل) Carousel

• Collapse & Accordion-کلاپس و آکاردئون Collapse & Accordion

• Quiz-آزمون Quiz

Bootstrap 5 Project-پروژه Bootstrap 5 Bootstrap 5 Project

• Project Presentation-معرفی پروژه Project Presentation

• Navbar-نوبار Navbar

• Let’s Start Creating Carousel-شروع به ساخت اسلایدشو (کاروسل) کنیم Let’s Start Creating Carousel

• Let’s Start Creating the Main Section-شروع به ساخت بخش اصلی کنیم Let’s Start Creating the Main Section

• Creation of Students and Questions Sections-ایجاد بخش‌های دانش‌آموزان و سوالات Creation of Students and Questions Sections

• Bootstrap Quiz-آزمون Bootstrap Bootstrap Quiz

• Creation of Contact and Footer Section-ایجاد بخش تماس و فوتر Creation of Contact and Footer Section

Introduction to JavaScript-مقدمه‌ای بر جاوا اسکریپت Introduction to JavaScript

• Javascript Setup Visual Studio Code-تنظیمات جاوا اسکریپت در Visual Studio Code Javascript Setup Visual Studio Code

• Adding js file-اضافه کردن فایل js Adding js file

Language Basics in Javascript-مبانی زبان در جاوا اسکریپت Language Basics in Javascript

• Variables and Data Types-متغیرها و انواع داده Variables and Data Types

• Type Coercion in Javascript-هم‌نوع‌سازی نوع در جاوا اسکریپت Type Coercion in Javascript

• Variable Mutation in Javascript-تغییر مقدار متغیر در جاوا اسکریپت Variable Mutation in Javascript

• Basic Operators in Javascript-عملگرهای پایه در جاوا اسکریپت Basic Operators in Javascript

• Boolean Logic in Javascript-منطق بولی در جاوا اسکریپت Boolean Logic in Javascript

• Logical Operators in Javascript-عملگرهای منطقی در جاوا اسکریپت Logical Operators in Javascript

Conditional Statements-دستورات شرطی Conditional Statements

• Conditional Statements in Javascript-دستورات شرطی در جاوا اسکریپت Conditional Statements in Javascript

• Code Quiz 1 Solution in Javascript-حل آزمون کد ۱ در جاوا اسکریپت Code Quiz 1 Solution in Javascript

• Ternary Operator in Javascript-عملگر سه‌تایی در جاوا اسکریپت Ternary Operator in Javascript

• Switch, case statements in Javascript-دستورات switch و case در جاوا اسکریپت Switch, case statements in Javascript

• Code Quiz 2 in Javascript-آزمون کد ۲ در جاوا اسکریپت Code Quiz 2 in Javascript

• Code Quiz 2 Solution-راه‌حل آزمون کد ۲ Code Quiz 2 Solution

Loops in Javascript-حلقه‌ها در جاوا اسکریپت Loops in Javascript

• Introduction to Loops in Javascript-مقدمه‌ای بر حلقه‌ها در جاوا اسکریپت Introduction to Loops in Javascript

• While Loops in Javascript-حلقه‌های while در جاوا اسکریپت While Loops in Javascript

• While Loops Quiz in Javascript-آزمون حلقه‌های while در جاوا اسکریپت While Loops Quiz in Javascript

• While Loops Quiz Solution in Javascript-راه‌حل آزمون حلقه‌های while در جاوا اسکریپت While Loops Quiz Solution in Javascript

• for Loops in Javascript-حلقه‌های for در جاوا اسکریپت for Loops in Javascript

• for Loops Quiz Solution in Javascript-راه‌حل آزمون حلقه‌های for در جاوا اسکریپت for Loops Quiz Solution in Javascript

• Continue and Break Statements in Javascript-دستورات continue و break در جاوا اسکریپت Continue and Break Statements in Javascript

Functions in Javascript-توابع در جاوا اسکریپت Functions in Javascript

• Introduction to Functions in Javascript-مقدمه‌ای بر توابع در جاوا اسکریپت Introduction to Functions in Javascript

• Function Decleration in Javascript-اعلام تابع در جاوا اسکریپت Function Decleration in Javascript

• Function with Arguments in Javascript-تابع با آرگومان در جاوا اسکریپت Function with Arguments in Javascript

• Function return in Javascript-بازگشت مقدار از تابع در جاوا اسکریپت Function return in Javascript

• Function Expression in Javascript-عبارت تابع در جاوا اسکریپت Function Expression in Javascript

• Function Quiz in Javascript-آزمون تابع در جاوا اسکریپت Function Quiz in Javascript

• Function Quiz Solution-راه‌حل آزمون تابع Function Quiz Solution

• Function Scope-دامنه تابع Function Scope

Arrays in Javascript-آرایه‌ها در جاوا اسکریپت Arrays in Javascript

• Introduction to arrays in Javascript-مقدمه‌ای بر آرایه‌ها در جاوا اسکریپت Introduction to arrays in Javascript

• Array Features in Javascript-ویژگی‌های آرایه در جاوا اسکریپت Array Features in Javascript

• Array Methods in Javascript-متدهای آرایه در جاوا اسکریپت Array Methods in Javascript

• Array Quiz in Javascript-آزمون آرایه در جاوا اسکریپت Array Quiz in Javascript

• Array Quiz Solution-راه‌حل آزمون آرایه Array Quiz Solution

• Array Iteration-پیمایش آرایه Array Iteration

• Array Iteration Quiz-آزمون پیمایش آرایه Array Iteration Quiz

• Array Iteration Quiz Solution-راه‌حل آزمون پیمایش آرایه Array Iteration Quiz Solution

Objects in Javascript-اشیاء در جاوا اسکریپت Objects in Javascript

• Introduction to objects in Javascript-مقدمه‌ای بر اشیاء در جاوا اسکریپت Introduction to objects in Javascript

• Object update in Javascript-به‌روزرسانی شیء در جاوا اسکریپت Object update in Javascript

• Complex Data Structures-ساختارهای داده پیچیده Complex Data Structures

• Object Quiz-آزمون شیء Object Quiz

• Object Quiz Solution-راه‌حل آزمون شیء Object Quiz Solution

• Object Methods-متدهای شیء Object Methods

• this Keyword-کلمه کلیدی this this Keyword

DOM in Javascript-DOM در جاوا اسکریپت DOM in Javascript

• Introduction to DOM-مقدمه‌ای بر DOM Introduction to DOM

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

• Select and Change in Javascript-انتخاب و تغییر در جاوا اسکریپت Select and Change in Javascript

• Select Methods in Javascript-متدهای انتخاب در جاوا اسکریپت Select Methods in Javascript

• Manipulation Methods in Javascript-متدهای دستکاری در جاوا اسکریپت Manipulation Methods in Javascript

• innerHTML and textContext-innerHTML و textContext innerHTML and textContext

• Attribute Manipulation-دستکاری ویژگی‌ها Attribute Manipulation

Event Handlers in Javascript-مدیریت‌کننده‌های رویداد در جاوا اسکریپت Event Handlers in Javascript

• Introduction to Event Handlers-مقدمه‌ای بر مدیریت‌کننده‌های رویداد Introduction to Event Handlers

• Event Handler Codequiz in Javascript-آزمون کد مدیریت‌کننده رویداد در جاوا اسکریپت Event Handler Codequiz in Javascript

• Codequiz Solution in Javascript-راه‌حل آزمون کد در جاوا اسکریپت Codequiz Solution in Javascript

• callback Function in Javascript-تابع callback در جاوا اسکریپت callback Function in Javascript

• Different Event Types in Javascript-انواع مختلف رویداد در جاوا اسکریپت Different Event Types in Javascript

What Is React and Why Should We Use React?-ری‌اکت چیست و چرا باید از ری‌اکت استفاده کنیم؟ What Is React and Why Should We Use React?

• Todolist Quiz Solution in Javascript-راه‌حل آزمون Todolist در جاوا اسکریپت Todolist Quiz Solution in Javascript

• Why a Library or Framework Is Needed-چرا به یک کتابخانه یا فریم‌ورک نیاز است Why a Library or Framework Is Needed

• What is React?-ری‌اکت چیست؟ What is React?

• Why Should we use React-چرا باید از ری‌اکت استفاده کنیم Why Should we use React

• quiz-آزمون quiz

First Look at React-اولین نگاه به ری‌اکت First Look at React

• React vs Vanilla JavaScript-ری‌اکت در مقابل جاوا اسکریپت وانیلی React vs Vanilla JavaScript

• Setting up our Development environment-راه‌اندازی محیط توسعه ما Setting up our Development environment.

• Look at React Official Documentation-نگاهی به مستندات رسمی ری‌اکت Look at React Official Documentation

• Pure React-ری‌اکت خالص Pure React

• Setting up a project with create-react-app-راه‌اندازی پروژه با create-react-app Setting up a project with create-react-app

• quiz-آزمون quiz

Working With Components Props and JSX-کار با کامپوننت‌ها، Props و JSX Working With Components Props and JSX

• Rendering the root component-رندر کردن کامپوننت ریشه Rendering the root component

• Debugging-اشکال‌زدایی Debugging

• Creating and reusing a component-ایجاد و استفاده مجدد از یک کامپوننت Creating and reusing a component

• What is JSX-JSX چیست؟ What is JSX

• Creating more component-ایجاد کامپوننت‌های بیشتر Creating more component

• JavaScript logic in component-منطق جاوا اسکریپت در کامپوننت JavaScript logic in component

• Separation of concerns-جداسازی دغدغه‌ها Separation of concerns

• Styling React applications-استایل‌دهی به برنامه‌های ری‌اکت Styling React applications

• Props-Props Props

• Props & one-way data flow-Props و جریان داده یک‌طرفه Props & one-way data flow

• Rendering list-رندر کردن لیست Rendering list

• Conditional Rendering 1-رندر شرطی ۱ Conditional Rendering 1

• Conditional Rendering 2-رندر شرطی ۲ Conditional Rendering 2

• Extraction JSX into a new component-استخراج JSX به یک کامپوننت جدید Extraction JSX into a new component

• Destructuring props-دمارکتینگ props Destructuring props

• React fragments-قطعات ری‌اکت React fragments

• Dynamic Classes-کلاس‌های پویا Dynamic Classes

• quiz-آزمون quiz

State, Events, and Forms-حالت، رویدادها و فرم‌ها State, Events, and Forms

• Section Overview-مرور بخش Section Overview

• Let’s build a new project-یک پروژه جدید بسازیم Let’s build a new project

• Handling Events-مدیریت رویدادها Handling Events

• What is state?-حالت چیست؟ What is state?

• Creating a state with useState-ایجاد حالت با useState Creating a state with useState

• Set state manually!-تنظیم دستی حالت! Set state manually!

• Adding open-close button-اضافه کردن دکمه باز و بسته کردن Adding open-close button

• React Developer Tools-ابزارهای توسعه‌دهنده ری‌اکت React Developer Tools

• Updating state based on current state-به‌روزرسانی حالت بر اساس حالت فعلی Updating state based on current state

• quiz-آزمون quiz

Shopping List and Fundamentals of State Management-لیست خرید و مبانی مدیریت حالت Shopping List and Fundamentals of State Management

• Introduction of the Application-معرفی برنامه Introduction of the Application

• Creating the layout-ایجاد چیدمان Creating the layout

• Rendering a list component-رندر کردن کامپوننت لیست Rendering a list component

• Rendering a form component-رندر کردن کامپوننت فرم Rendering a form component

• Controlled Elements-عناصر کنترل شده Controlled Elements

• Let’s think about state-بیایید به حالت فکر کنیم Let’s think about state

• Lifting state up-بالا بردن حالت Lifting state up

• Deleting an item-حذف یک آیتم Deleting an item

• Updating an item-به‌روزرسانی یک آیتم Updating an item

• Calculating package quantities-محاسبه مقادیر بسته Calculating package quantities

Sample Application – Language Card-نمونه برنامه – کارت زبان Sample Application – Language Card

• Shorting items-مرتب‌سازی آیتم‌ها Shorting items

• Application Introduction-معرفی برنامه Application Introduction

• Project Setup-راه‌اندازی پروژه Project Setup

• Components Structure-ساختار کامپوننت‌ها Components Structure

• Let’s start using data-شروع به استفاده از داده‌ها کنیم Let’s start using data

• Let’s start Creating the card structure-شروع به ساخت ساختار کارت کنیم Let’s start Creating the card structure

Class-Based Component and LifeCycles Hooks-کامپوننت مبتنی بر کلاس و هوک‌های چرخه حیات Class-Based Component and LifeCycles Hooks

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

• Counter example with Class-Based component-مثال شمارنده با کامپوننت مبتنی بر کلاس Counter example with Class-Based component

• Working with event handlers-کار با مدیریت‌کننده‌های رویداد Working with event handlers

• Class-Based component vs Functional component-کامپوننت مبتنی بر کلاس در مقابل کامپوننت تابعی Class-Based component vs Functional component

• Quiz-آزمون Quiz

useEffect Hook and Data Fetching-هوک useEffect و واکشی داده useEffect Hook and Data Fetching

• useEffect Hook-هوک useEffect useEffect Hook

• Counter example with useEffect hook-مثال شمارنده با هوک useEffect Counter example with useEffect hook

• Dependency Array-آرایه وابستگی Dependency Array

• Clean-Up function-تابع پاک‌سازی Clean-Up function

• useState + useEffect + Data fetching-useState + useEffect + واکشی داده useState + useEffect + Data fetching

• Project Structure-ساختار پروژه Project Structure

• Component structure & styling-ساختار و استایل کامپوننت Component structure & styling

• Using an async function & axios-استفاده از تابع async و axios Using an async function & axios

• Quiz-آزمون Quiz

Custom Hook and Refs-هوک سفارشی و Refs Custom Hook and Refs

• Section Overview-مرور بخش Section Overview

• Refs-Refs Refs

• Why we use useRef Hook-چرا از هوک useRef استفاده می‌کنیم Why we use useRef Hook

• Refs to select DOM elements-Refs برای انتخاب عناصر DOM Refs to select DOM elements

• What is this Custom Hook-این هوک سفارشی چیست What is this Custom Hook

• Custom Hook counter example-مثال شمارنده هوک سفارشی Custom Hook counter example

• Quiz-آزمون Quiz

React Router-React Router React Router

• Section Overview-مرور بخش Section Overview

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

• Creating a regular application-ایجاد یک برنامه معمولی Creating a regular application

• Adding a React-Router to the project-اضافه کردن React Router به پروژه Adding a React-Router to the project

• Link & NavLink-Link و NavLink Link & NavLink

• Server side rendering & Client side rendering-رندر سمت سرور و رندر سمت کلاینت Server side rendering & Client side rendering

• Creation of components & Application layout-ایجاد کامپوننت‌ها و چیدمان برنامه Creation of components & Application layout

• Component & Pages Layout and Styling-چیدمان و استایل کامپوننت‌ها و صفحات Component & Pages Layout and Styling

• Component & Pages Layout and Styling 2-چیدمان و استایل کامپوننت‌ها و صفحات ۲ Component & Pages Layout and Styling 2

• Personnel Page-صفحه پرسنل Personnel Page

• Dynamic routing-مسیریابی پویا Dynamic routing

• useParams & useLocation-useParams و useLocation useParams & useLocation

• PersonnelDetail Page-صفحه جزئیات پرسنل PersonnelDetail Page

• useNavigate vs Link-useNavigate در مقابل Link useNavigate vs Link

• notFound page & Navigate-صفحه پیدا نشد و Navigate notFound page & Navigate

• Error handling-مدیریت خطا Error handling

• Loading-بارگذاری Loading

• Nested Routes-مسیرهای تودرتو Nested Routes

• Absolute Path & Relative Path-مسیر مطلق و مسیر نسبی Absolute Path & Relative Path

• Private Router-روتر خصوصی Private Router

• Quiz-آزمون Quiz

RecipeApp Project-پروژه برنامه دستور پخت RecipeApp Project

• Project Introduction & API source-مقدمه پروژه و منبع API Project Introduction & API source

• File structure-ساختار فایل File structure

• Creation of Routes-ایجاد مسیرها Creation of Routes

• Let’s start creating the pages-شروع به ساخت صفحات کنیم Let’s start creating the pages

• Navbar-نوبار Navbar

• Home Page-صفحه اصلی Home Page

• Header-هدر Header

• Card-کارت Card

• Detail Page-صفحه جزئیات Detail Page

• Login & Logout-ورود و خروج Login & Logout

React Router v6.4+-React Router v6.4+ React Router v6.4+

• Section Overview-مرور بخش Section Overview

• Setting up a file structure-راه‌اندازی ساختار فایل Setting up a file structure

• React Router v6.4+-React Router v6.4+ React Router v6.4+

• Building the App Layout & Nested Routes-ساخت چیدمان برنامه و مسیرهای تودرتو Building the App Layout & Nested Routes

• Fetching data with loaders-واکشی داده با loader ها Fetching data with loaders

• useNavigation-useNavigation useNavigation

• Error Handling-مدیریت خطا Error Handling

• Dynamic Path-مسیر پویا Dynamic Path

Angular Introduction-مقدمه‌ای بر Angular Angular Introduction

• Quiz-آزمون Quiz

• What is Angular-Angular چیست؟ What is Angular

• Angular Versions-نسخه‌های Angular Angular Versions

• Development Environment-محیط توسعه Development Environment

• Notes for Lecture 189: First Application-نکات مربوط به درس ۱۸۹: اولین برنامه Notes for Lecture 189: First Application

• First Application in Angular-اولین برنامه در Angular First Application in Angular

• Angular App Structure-ساختار برنامه Angular Angular App Structure

• First Project Edit in Angular-اولین ویرایش پروژه در Angular First Project Edit in Angular

• Using Bootstrap for Styling in Angular-استفاده از Bootstrap برای استایل‌دهی در Angular Using Bootstrap for Styling in Angular

TypeScript-TypeScript TypeScript

• Angular Quiz-آزمون Angular Angular Quiz

• What is TypeScript-TypeScript چیست؟ What is TypeScript

• First Use of TypeScript-اولین استفاده از TypeScript First Use of TypeScript

• Variable Types-انواع متغیر Variable Types

• Variable Types-2-انواع متغیر-۲ Variable Types-2

• Functions in TypeScript-توابع در TypeScript Functions in TypeScript

• Classes in TypeScript-کلاس‌ها در TypeScript Classes in TypeScript

• Inheritance in TypeScript-وراثت در TypeScript Inheritance in TypeScript

• Interfaces in TypeScript-اینترفیس‌ها در TypeScript Interfaces in TypeScript

• Generics in TypeScript-ژنریک‌ها در TypeScript Generics in TypeScript

• Modules in TypeScript-ماژول‌ها در TypeScript Modules in TypeScript

Angular Basic Features-ویژگی‌های پایه Angular Angular Basic Features

• Angular Apps Loaded and Started-برنامه‌های Angular بارگذاری و راه‌اندازی شده‌اند Angular Apps Loaded and Started

• Components in Angular-کامپوننت‌ها در Angular Components in Angular

• Creating New Component in Angular-ایجاد کامپوننت جدید در Angular Creating New Component in Angular

• Creating New Component With CLI-ایجاد کامپوننت جدید با CLI Creating New Component With CLI

• Working with Template in Components-کار با قالب در کامپوننت‌ها Working with Template in Components

• Working with Styles in Component-کار با استایل‌ها در کامپوننت Working with Styles in Component

• Using Selector in Angular-استفاده از Selector در Angular Using Selector in Angular

• Data Binding in Angular-اتصال داده در Angular Data Binding in Angular

• String Interpolition in Angular-درون‌یابی رشته در Angular String Interpolition in Angular

• Property Binding in Angular-اتصال ویژگی در Angular Property Binding in Angular

• Event Binding in Angular-اتصال رویداد در Angular Event Binding in Angular

• Two Way Binding in Angular-اتصال دو طرفه در Angular Two Way Binding in Angular

Angular Data Binding-اتصال داده Angular Angular Data Binding

• Angular Quiz-آزمون Angular Angular Quiz

• Creating the New Project in Angular-ایجاد پروژه جدید در Angular Creating the New Project in Angular

• Creating Class for Data Binding-ایجاد کلاس برای اتصال داده Creating Class for Data Binding

• Creating New Component-ایجاد کامپوننت جدید Creating New Component

• Property Binding in Angular-اتصال ویژگی در Angular Property Binding in Angular

• Class Binding in Angular-اتصال کلاس در Angular Class Binding in Angular

• Style Binding in Angular-اتصال استایل در Angular Style Binding in Angular

• Event Binding in Angular-اتصال رویداد در Angular Event Binding in Angular

• KeyUp Event in Angular-رویداد KeyUp در Angular KeyUp Event in Angular

• Two Way Binding in Angular-اتصال دو طرفه در Angular Two Way Binding in Angular

• Pipes in Angular-Pipes در Angular Pipes in Angular

• Custom Pipes in Angular-Pipes سفارشی در Angular Custom Pipes in Angular

Directives-دستورالعمل‌ها Directives

• Angular Quiz-آزمون Angular Angular Quiz

• What is Directive-دستورالعمل چیست؟ What is Directive

• Working With ngIf-کار با ngIf Working With ngIf

• Working With ngSwitch-کار با ngSwitch Working With ngSwitch

• Working With ngFor-کار با ngFor Working With ngFor

• Change Detection-تشخیص تغییر Change Detection

• ngTemplateOutlet-ngTemplateOutlet ngTemplateOutlet

• Custom Directive-دستورالعمل سفارشی Custom Directive

Handling Template-driven Forms-مدیریت فرم‌های مبتنی بر تمپلیت Handling Template-driven Forms

• Angular Quiz-آزمون Angular Angular Quiz

• Preparing the Form-آماده‌سازی فرم Preparing the Form

• Validation with NgModel-اعتبارسنجی با NgModel Validation with NgModel

• Validation Rule to Controls Adding-اضافه کردن قانون اعتبارسنجی به کنترل‌ها Validation Rule to Controls Adding

• Validation Messages Demonstration-نمایش پیام‌های اعتبارسنجی Validation Messages Demonstration

• Customized Error Messages-پیام‌های خطای سفارشی Customized Error Messages

• Method of Validation Messages Demonstration with-روش نمایش پیام‌های اعتبارسنجی با Method of Validation Messages Demonstration with

• Validation with NgForm-اعتبارسنجی با NgForm Validation with NgForm

• Adding a Validation Rule to the Form-اضافه کردن قانون اعتبارسنجی به فرم Adding a Validation Rule to the Form

• Showing Summary Messages-نمایش پیام‌های خلاصه Showing Summary Messages

• Disabling the Submit Button-غیرفعال کردن دکمه ارسال Disabling the Submit Button

Handling - Reactive Forms-مدیریت - فرم‌های واکنشی Handling - Reactive Forms

• Angular Quiz-آزمون Angular Angular Quiz

• آماده‌سازی فرم واکنشی Preparation of Reactive Form

• FormControl FormControl

• FormGroup FormGroup

• اعتبارسنجی با فرم واکنشی Validation with Reactive Form

• خطاهای اعتبارسنجی خاص Specific Validation Errors

• ایجاد قانون اعتبارسنجی سفارشی Customized Validation Rule Creating

سرویس HTTP HTTP Service

• آزمون انگولار Angular Quiz

• سرویس چیست؟ What is Service?

• درخواست Http Get Http Get Request

• درخواست Http Post Http Post Request

• درخواست Http Put و Patch Http Put and Patch Request

• درخواست Http Delete Http Delete Request

• استفاده از متدها با سرویس Use of Methods with the Service

• بررسی خطا Error Checking

مسیر‌یابی Routing

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

• طرحواره مسیر‌یابی Routing Schema

• لینک‌های مسیریاب Router Links

• پیمایش برنامه‌نویسی Navigating Programmatically

• پارامترهای مسیر Route Parameters

• پارامترهای مسیر قابل مشاهده Observable Route Parameters

• پارامتر پرس و جو Query Parametre

• مسیرهای فرعی (تو در تو) Child (Nested) Routes

• دریافت صفحه متفاوت از نمودار مسیر Different Page Of The Route Chart Receiving

• آزمون انگولار Angular Quiz

• آزمون انگولار Angular Quiz

Node JS Node JS

• Node JS چیست؟ What is Node JS

• نصب Node JS Installing Node JS

• فایل‌های پروژه NodeJS Project Files NodeJS

• موتور V8 V8 Engine

• Node JS Globals Node JS Globals

• توابع Functions

• ماژول و Require Module and Require

• الگوهای صادرات ماژول Module exports patterns

• Event Emitter Event Emitter

• اطلاعات بیشتر در مورد Event Emitters More about Event Emitters

• خواندن و نوشتن فایل‌ها Reading and Writing Files

• ایجاد و حذف دایرکتوری‌ها Creating and Removing Directories

• آزمون توسعه وب فول استک، ری‌اکت، انگولار، نود جی‌اس، MongoDB Quiz Full stack web development, react, angular, nodejs, mongodb

سرور Server

• کلاینت‌ها و سرورها Clients & Servers

• ایجاد سرور Creating Server

• آزمون Quiz

جریان‌ها و بافرها Streams and Buffers

• جریان‌ها و بافرها Streams and Buffers

• جریان خواندنی Readable Stream

• جریان نوشتنی Write Stream

• Pipe Pipe

• ارائه HTML Serving HTML

• ارائه داده‌های JSON Serving JSON Data

• مسیر‌یابی Routing

• آزمون توسعه وب فول استک، React JS، NodeJS و MongoDB Quiz Full Stack Web Development, React JS, NodeJS and MongoDB

Mongo DB Mongo DB

• MongoDB چیست؟ What is MongoDB

• فایل‌های پروژه MongoDB Project Files MongoDB

• راه‌اندازی OSX OSX Setup

• OSX – Robomongo OSX – Robomongo

• راه‌اندازی ویندوز Windows Setup

• ویندوز – Robomongo Windows – Robomongo

تجربه تست محور Test Driven Experience

• آزمون quiz

• آخرین تنظیمات قبل از شروع پروژه Last Setup Before the Project Start

• معرفی پروژه Introduction to Project

• شروع پروژه Start to Project

• Mongoose Connection Helper 1 Mongoose Connection Helper 1

• مدل‌های Mongoose Models of Mongoose

• شروع تست با Mocha Start to test with Mocha

• ایجاد و ذخیره مدل‌ها Creating and Saving Models

• چگونه می‌توانیم مجموعه‌ها را حذف کنیم؟ How we can drop collections?

• ویژگی isNew در Mongoose isNew Property in Mongoose

• Query find() find() Query

• ویژگی _id The _id Property

• تست خودکار Testing Automatically

• Query findOne() findOne() Query

• حذف رکوردها Deleting Records

• به‌روزرسانی رکوردها (1) Updating Records (1)

• به‌روزرسانی رکوردها (2) Updating Records (2)

عملگرها Operators

• آزمون quiz

• به‌روزرسانی عملگرها Updating Operators

• عملگر $mul به عنوان مثال $mul Operator as an example

• اعتبارسنجی Mongoose (1) Mongoose Validation (1)

• اعتبارسنجی Mongoose (2) Mongoose Validation (2)

• اعتبارسنجی Mongoose (3) Mongoose Validation (3)

• مدیریت خطاها Handling Errors

مدیریت داده‌های رابطه‌ای Handling Relational Data

• آزمون quiz

• تعبیه اسناد Embedding Documents

• تست با Subdocuments Test with Subdocuments

• افزودن Subdocument جدید Adding New Subdocument

• حذف Subdocument Removing Subdocument

• انواع مجازی (1) Virtual Types (1)

• انواع مجازی (2) Virtual Types (2)

طراحی اسکیما Schema Design

• آزمون quiz

• توسعه منابع تو در تو Developing Nested Resources

• استفاده از ref برای انجمن‌ها Using ref for associations

• تست انجمن Testing Association

• Promise.all Promise.all

• اصلاح‌کننده‌ها Modifiers

• Populate تو در تو Nested Populate

• آزمون quiz

متفرقه Extra

• توسعه وب فول استک با React JS، Angular و NodeJS Full Stack Web Development with React JS, Angular and NodeJS