آموزش React 18 Tutorial and Projects Course (2023)

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

معرفی Introduction

• React چیست؟ What is React?

• اهداف Goals

• ساختار Structure

• الزامات Requirements

• رفع تاری ویدیو Video Blur Fix

• بررسی دوره Course Review

محیط توسعه دهنده Dev Environment

• اطلاعات گردش کار Workflow Info

• مرورگر Browser

• کد VS VS Code

• پایانه Terminal

• Node.js Node.js

• Create-React-App Create-React-App

React Fundamentals React Fundamentals

• مقدمه Intro

• مخزن Github Github Repository

• ساختار پوشه Folder Structure

• دیگ بخار را بردارید Remove Boilerplate

• جزء اول First Component

• برنامه های افزودنی و تنظیمات Extensions and Settings

• ایجاد تابع عنصر Create Element Function

• قوانین JSX JSX Rules

• Nest Components Nest Components

• React Developer Tools React Developer Tools

• فهرست کتاب BookList

• CSS CSS

• تصاویر محلی (پوشه عمومی) Local Images (public folder)

• JSX - CSS JSX - CSS

• JSX - جاوا اسکریپت JSX - Javascript

• لوازم جانبی - راه اندازی اولیه Props - Basic Setup

• لوازم - راه اندازی تا حدودی پویا Props - Somewhat Dynamic Setup

• Props - رویکردهای چندگانه Props - Multiple Approaches

• پشتیبانی کودکان Children Prop

• لیست ساده Simple List

• فهرست مناسب Proper List

• پایه کلید Key Prop

• شی به عنوان یک پایه Object as a Prop

• مبانی رویداد Event Basics

• ارسال فرم Form Submission

• ارسال فرم - نمونه دکمه Form Submission - Button Example

• تابع ناشناس (پیکان) Anonymous Function (arrow)

• ویژگی اجزاء Components Feature

• حفاری پایه Prop Drilling

• مثال پیچیده - مقدمه Complex Example - Intro

• مثال پیچیده - اشکال Complex Example - Bug

• مثال پیچیده - رفع کنید Complex Example - Fix

• ماژول های ES6 ES6 Modules

• تصاویر محلی (پوشه src) Local Images (src folder)

• چالش اعداد Numbers Challenge

• چالش عنوان Title Challenge

• ساخت پوشه Build Folder

• گسترش Deployment

برنامه Backroads Backroads Application

• مقدمه Intro

• مخزن Github Github Repository

• برپایی Setup

• نصب Install

• دیگ بخار SRC SRC Boilerplate

• ساختار Structure

• اجزاء Components

• نشان‌واره Nav Nav Logo

• اسکرول صاف Smooth Scroll

• پیوندهای صفحه Page Links

• پیوندهای اجتماعی Social Links

• Hero و About Components Hero and About Components

• جزء عنوان Title Component

• جزء خدمات Services Component

• جزء تورها Tours Component

• کامپوننت پاورقی Footer Component

• رویکرد جایگزین - جزء پیوندهای صفحه Alternative Approach - Page Links Component

• رویکرد جایگزین - اجزای بیشتر Alternative Approach - More Components

• استقرار مداوم - راه اندازی Continuous Deployment - Setup

• استقرار مداوم - مزایا Continuous Deployment - Benefits

• استقرار مداوم "Gotcha" Continuous Deployment "Gotcha"

VITE VITE

• VITE - مقدمه VITE - Intro

• VITE - نصب/راه اندازی VITE - Install / Setup

React Hooks و Advanced Topics React Hooks and Advanced Topics

• مقدمه Intro

• مخزن Github Github Repository

• برپایی Setup

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

• مثال خطا Error Example

• UseState Fundamentals UseState Fundamentals

• رندر اولیه و رندرهای مجدد Initial Render and Re-renders

• قوانین کلی React Hooks General Rules of React Hooks

• مثال آرایه UseState - راه اندازی UseState Array Example - Setup

• مثال آرایه UseState - کامل UseState Array Example - Complete

• UseState - اطلاعات اضافی UseState - Extra Info

• مثال UseState Object - راه اندازی UseState Object Example - Setup

• اطلاعات دسته بندی خودکار Auto Batching Info

• مثال UseState Object - کامل UseState Object Example - Complete

• UseState Set Function "Gotcha" UseState Set Function "Gotcha"

• فرم به روز رسانی عملکردی UseState UseState Functional Update Form

• UseState - مثال SetTimeout UseState - SetTimeout Example

• پروژه تطبیق Matching Project

• مثال کد Code Example

• UseEffect - اصول UseEffect - Fundamentals

• UseEffect - جلوه های متعدد UseEffect - Multiple Effects

• چالش واکشی UseEffect - مقدمه UseEffect Fetch Challenge - Intro

• چالش واکشی UseEffect - کامل شد UseEffect Fetch Challenge - Complete

• UseEffect Clean Up Info UseEffect Clean Up Info

• بازگشت های متعدد Multiple Returns

• بازگشت های متعدد - واکشی تنظیم داده ها Multiple Returns - Fetch Data Setup

• بازگشت های متعدد - واکشی داده ها Multiple Returns - Fetch Data

• خطای واکشی "Gotcha" Fetch Error "Gotcha"

• سفارش مهم است Order Matters

• واکشی موقعیت مکانی Fetch Function Location

• قوانین React Hooks React Hooks Rules

• Vanilla.js (اختیاری) Vanilla.js (Optional)

• اتصال کوتاه - نمای کلی Short Circuit - Overview

• اتصال کوتاه - مثالها Short Circuit - Examples

• اپراتور سه تایی Ternary Operator

• چالش را تغییر دهید Toggle Challenge

• چالش کاربر User Challenge

• عملکرد پاکسازی UseEffect - راه اندازی/چالش UseEffect Cleanup Function - Setup/Challenge

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

• UseEffect - مثال شنوندگان رویداد UseEffect - Event Listeners Example

• ممکن است نیازی به افکت نداشته باشید You Might Not Need an Effect

• پروژه های تطبیق Matching Projects

• ساختار پروژه - نمونه پوشه Project Structure - Folder Example

• ساختار پروژه - صادرات به نام Project Structure - Named Exports

• ساختار پروژه - گروه صادرات Project Structure - Export Group

• اهرم جاوا اسکریپت - مقدمه Leverage Javascript - Intro

• اهرم جاوا اسکریپت - چالش Leverage Javascript - Challenge

• جاوا اسکریپت اهرمی - کامل شد Leverage Javascript - Complete

• فرم ها - راه اندازی Forms - Setup

• ورودی های کنترل شده Controlled Inputs

• چالش کاربر - راه اندازی User Challenge - Setup

• چالش کاربر - اضافه کردن کاربر جدید User Challenge - Add New User

• چالش کاربر - حذف کاربر User Challenge - Remove User

• ورودی های چندگانه Multiple Inputs

• ورودی چک باکس Checkbox Input

• ورودی را انتخاب کنید Select Input

• FormData API FormData API

• پروژه های تطبیق Matching Projects

• useRef - گره DOM useRef - DOM Node

• useRef - رندر اولیه useRef - Initial Render

• پروژه های تطبیق Matching Projects

• قلاب های سفارشی - جابجایی Custom Hooks - Toggle

• قلاب های سفارشی - واکشی شخص Custom Hooks - Fetch Person

• قلاب های سفارشی - واکشی عمومی Custom Hooks - Generic Fetch

• Context API - چالش Context API - Challenge

• Context API - Prop Drilling Context API - Prop Drilling

• Context API - راه حل Context API - Solution

• Context API - Hook سفارشی Context API - Custom Hook

• Context API - تنظیم جهانی Context API - Global Setup

• پروژه های تطبیق Matching Projects

• UseReducer - مقدمه UseReducer - Intro

• UseReducer - چالش UseReducer - Challenge

• UseReducer - راه اندازی UseReducer - Setup

• مبانی کاهنده Reducer Basics

• اقدامات و حالت پیش فرض Actions and Default State

• بازنشانی لیست Reset List

• حذف شخص Remove Person

• واردات/صادرات Import/Export

• پروژه های تطبیق Matching Projects

• عملکرد - مقدمه Performance - Intro

• کامپوننت دوباره ارائه می شود Component Re-renders

• React Dev Tools React Dev Tools

• ایالت پایین Lower State

• حالت پایین - چالش Lower State - Challenge

• React.memo() React.memo()

• نارنجک ذهنی Mind Grenade

• از هوک برگشت تماس استفاده کنید UseCallback Hook

• UseCallback Hook - مورد معمول استفاده UseCallback Hook - Common Use Case

• UseMemo Hook UseMemo Hook

• از قلاب انتقال استفاده کنید UseTransition Hook

• React Suspense React Suspense

پروژه های بنیادی (با مراحل) Fundamental Projects (With Steps)

• مقدمه Intro

• برپایی Setup

• Birthday Buddy- Setup Birthday Buddy- Setup

• Birthday Buddy - لیست واردات Birthday Buddy - Import List

• Birthday Buddy - لیست رندر Birthday Buddy - Render List

• Birthday Buddy - پاک کردن لیست Birthday Buddy - Clear List

• Birthday Buddy - CSS (اختیاری) Birthday Buddy - CSS (Optional)

• تورها - راه اندازی Tours - Setup

• تورها - واکشی تورها Tours - Fetch Tours

• تورها - رندر تورها Tours - Render Tours

• تورها - حذف تور Tours - Remove Tour

• تورها - ادامه مطلب Tours - Read More

• تورها - بازیابی Tours - Refetch

• تورها - CSS (اختیاری) Tours - CSS (Optional)

• نظرات - راه اندازی Reviews - Setup

• نظرات - داده ها Reviews - Data

• نظرات - React Icons Reviews - React Icons

• نظرات - اول شخص Reviews - First Person

• نظرات - قبلی و بعدی Reviews - Prev and Next

• نظرات - شماره را بررسی کنید Reviews - Check Number

• نظرات - شخص تصادفی Reviews - Random Person

• نظرات - اپراتور مدول Reviews - Modulus Operator

• نظرات - CSS (اختیاری) Reviews - CSS (Optional)

• سوالات - راه اندازی Questions - Setup

• سوالات - فهرست ارائه Questions - Render List

• سؤالات - اطلاعات را تغییر دهید Questions - Toggle Info

• سوالات - راه اندازی جایگزین Questions - Alternative Setup

• سوالات - CSS (اختیاری) Questions - CSS (Optional)

• منو - راه اندازی Menu - Setup

• منو - جزء عنوان Menu - Title Component

• منو - رندر موارد Menu - Render Items

• منو - دسته بندی های منحصر به فرد Menu - Unique Categories

• منو - نمایش دسته ها Menu - Display Categories

• منو - موارد فیلتر Menu - Filter Items

• منو - CSS (اختیاری) Menu - CSS (Optional)

• زبانه ها - راه اندازی Tabs - Setup

• زبانه ها - واکشی مشاغل Tabs - Fetch Jobs

• زبانه ها - کار نمایش Tabs - Display Job

• برگه ها - وظایف و کتابخانه UUID Tabs - Duties and UUID Library

• زبانه ها - ظرف دکمه Tabs - Button Container

• زبانه ها - مورد فعلی Tabs - Current Item

• برگه ها - CSS (اختیاری) Tabs - CSS (Optional)

• لغزنده - راه اندازی Slider - Setup

• لغزنده - ساختار Slider - Structure

• اسلایدر - CSS Slider - CSS

• لغزنده - منطق اولیه Slider - Initial Logic

• لغزنده - مورد فعلی و قبلی/بعدی Slider - Current Item and Prev/Next

• اسلایدر - اسلاید خودکار (پخش خودکار) Slider - Autoslide (autoplay)

• اسلایدر - اطلاعات کتابخانه Slider - Library Info

• Slider - React Slick Setup Slider - React Slick Setup

• Slider - React Slick Complete Slider - React Slick Complete

• Lorem Ipsum - راه اندازی Lorem Ipsum - Setup

• لورم ایپسوم - ساختار Lorem Ipsum - Structure

• Lorem Ipsum - فرم ارسال Lorem Ipsum - Submit Form

• Lorem Ipsum - کتابخانه نانویی Lorem Ipsum - Nanoid Library

• Lorem Ipsum - CSS (اختیاری) Lorem Ipsum - CSS (Optional)

• مولد رنگ - راه اندازی Color Generator - Setup

• مولد رنگ - ساختار فرم Color Generator - Form Structure

• مولد رنگ - ورودی رنگ HTML Color Generator - HTML Color Input

• Color Generator - کتابخانه Values.js Color Generator - Values.js Library

• مولد رنگ - فهرست رندر Color Generator - Render List

• مولد رنگ - React Toastify Color Generator - React Toastify

• مولد رنگ - تغییر/افزودن رنگ Color Generator - Change/Add Color

• Color Generator - Clipboard API Color Generator - Clipboard API

• مولد رنگ - CSS (اختیاری) Color Generator - CSS (Optional)

• غنچه مواد غذایی - راه اندازی Grocery Bud - Setup

• غنچه مواد غذایی - جزء فرم Grocery Bud - Form Component

• غنچه مواد غذایی - اضافه کردن آیتم Grocery Bud - Add Item

• غنچه مواد غذایی - رندر آیتم ها Grocery Bud - Render Items

• غنچه مواد غذایی - تک مورد Grocery Bud - Single Item

• غنچه مواد غذایی - حذف مورد Grocery Bud - Remove Item

• غنچه مواد غذایی - انبار محلی Grocery Bud - Local Storage

• Grocery Bud - ویرایش مورد (راه اندازی جهانی) Grocery Bud - Edit Item (Global Setup)

• Grocery Bud - React Toastify Grocery Bud - React Toastify

• Grocery Bud - CSS (اختیاری) Grocery Bud - CSS (Optional)

• نوار ناوبری - راه اندازی Navbar - Setup

• نوار ناوبری - داده Navbar - Data

• نوار ناوبری - راه اندازی اولیه Navbar - Initial Setup

• نوار ناوبری - راه اندازی اولیه CSS Navbar - Initial Setup CSS

• نوار ناوبری - راه اندازی ثابت Navbar - Fixed Setup

• نوار ناوبری - تنظیم پویا Navbar - Dynamic Setup

• Navbar - سوال Navbar - Question

• نوار نوار - برنامه کامل Navbar - Complete App

• نوار کناری/مدال - راه اندازی Sidebar/Modal - Setup

• نوار کناری/مدال - اجزا Sidebar/Modal - Components

• نوار کناری/مدال - زمینه جهانی Sidebar/Modal - Global Context

• نوار کناری/مدال - کامپوننت صفحه اصلی Sidebar/Modal - Home Component

• نوار کناری/مدال - جزء معین Sidebar/Modal - Modal Component

• نوار کناری/مدال - کامپوننت نوار کناری JSX Sidebar/Modal - Sidebar Component JSX

• نوار کناری/مدال - نوار کناری CSS Sidebar/Modal - Sidebar CSS

• نوار کناری/مدال - تعویض نوار کناری Sidebar/Modal - Sidebar Toggle

• Strapi - راه اندازی Strapi - Setup

• Strapi - داده Strapi - Data

• Strapi - زمینه جهانی Strapi - Global Context

• Strapi - اجزاء Strapi - Components

• Strapi - Navbar CSS Strapi - Navbar CSS

• استراپی - قهرمان Strapi - Hero

• Strapi - نوار کناری JSX Strapi - Sidebar JSX

• Strapi - نوار کناری CSS Strapi - Sidebar CSS

• Strapi - NavLinks Strapi - NavLinks

• Strapi - PageId Logic Strapi - PageId Logic

• Strapi - منوی فرعی JSX Strapi - Submenu JSX

• Strapi - زیر منوی CSS Strapi - Submenu CSS

• Strapi - پنهان کردن منوی فرعی (قسمت 1) Strapi - Hide Submenu (Part 1)

• Strapi - پنهان کردن منوی فرعی (قسمت 2) Strapi - Hide Submenu (Part 2)

• سبد خرید - معرفی Cart - Intro

• سبد خرید - راه اندازی Cart - Setup

• سبد خرید - زمینه جهانی Cart - Global Context

• سبد خرید - راه اندازی UseReducer Cart - UseReducer Setup

• سبد خرید - اقدامات راه اندازی Cart - Setup Actions

• سبد خرید - ساختارهای داده Cart - Data Structures

• سبد خرید - شی نقشه Cart - Map Object

• سبد خرید - تغییر به نقشه () Cart - Switch to Map()

• سبد خرید - پاک کردن سبد خرید Cart - Clear Cart

• سبد خرید - حذف مورد Cart - Remove Item

• سبد خرید - افزایش مبلغ Cart - Increase Amount

• سبد خرید - کاهش مقدار Cart - Decrease Amount

• سبد خرید - محاسبه مجموع Cart - Calculate Totals

• سبد خرید - ساختار واکشی Cart - Fetch Structure

• سبد خرید - واکشی کامل Cart - Fetch Complete

• سبد خرید - CSS (اختیاری) Cart - CSS (Optional)

React Router 6 React Router 6

• مقدمه Intro

• برپایی Setup

• صفحات اول First Pages

• اجزای صفحه Page Components

• مولفه پیوند Link Component

• صفحه خطا Error Page

• نوار ناوبری Navbar

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

• طرح بندی مشترک Shared Layout

• صفحات فهرست Index Pages

• NavLink NavLink

• پارامترهای URL - راه اندازی URL Params - Setup

• صفحه محصول واحد Single Product Page

• useNavigate() useNavigate()

• مسیر محافظت شده Protected Route

• Refactor صفحه محصولات Products Page Refactor

کتابخانه HTTP Axios Axios HTTP Library

• مقدمه Intro

• برپایی Setup

• دریافت درخواست GET Request

• تنظیم سرصفحه ها Setup Headers

• درخواست ارسال POST Request

• پیش فرض جهانی Global Default

• نمونه سفارشی Custom Instance

• رهگیرها Interceptors

Cocktails API Project Cocktails API Project

• کوکتل - معرفی Cocktails - Intro

• کوکتل - اطلاعات اضافی Cocktails - Additional Info

• کوکتل - بررسی اجمالی راه اندازی Cocktails - Setup Overview

• به روز رسانی React Router 6!!! React Router 6 Update !!!

• کوکتل - راه اندازی روتر React Cocktails - React Router Setup

• کوکتل - Navbar Cocktails - Navbar

• کوکتل - درباره و خطا Cocktails - About and Error

• کوکتل - تنظیمات API زمینه Cocktails - Context API Setup

• کوکتل - نمای کلی API Cocktails - API Overview

• کوکتل - نوشیدنی بیاورید Cocktails - Fetch Drinks

• کوکتل - لیست نمایش Cocktails - Display List

• کوکتل - فرم جستجو Cocktails - Search Form

• کوکتل - صفحه کوکتل تک Cocktails - Single Cocktail Page

• کوکتل - Refactor to React Router 6 Cocktails - Refactor to React Router 6

• میزبانی (Netlify) - کشیدن و رها کردن Hosting (Netlify) - Drag and Drop

• میزبانی (Netlify) - استقرار مداوم Hosting (Netlify) - Continuous Deployment

پروژه های اضافی Extra Projects

• پروژه های اضافی Extra Projects

پروژه تجارت الکترونیک E-Commerce Project

• مقدمه Intro

• اطلاعات Info

• شروع نصب Starter Install

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

• اجزای سبک - مبانی Styled Components - Basics

• به روز رسانی React Router 6!!! React Router 6 Update !!!

• React Router - راه اندازی React Router - Setup

• نوار ناوبری Navbar

• دکمه های سبد خرید Cart Buttons

• پاورقی Footer

• نوار کناری Sidebar

• راه اندازی زمینه محصولات Products Context Setup

• تغییر نوار کناری Sidebar Toggle

• صفحه خطا Error Page

• درباره، صفحه پرداخت About, Checkout Page

• صفحه اصلی - قهرمان Home Page - Hero

• صفحه اصلی - خدمات Home Page - Services

• صفحه اصلی - تماس Home Page - Contact

• Formspree Formspree

• اطلاعات API API Info

• بررسی اجمالی محصولات واکشی Fetch Products Overview

• واکشی محصولات کامل شد Fetch Products Complete

• محصولات ویژه Featured Products

• قیمت فرمت Format Price

• واکشی محصول واحد Fetch Single Product

• محصول واحد - بارگیری، خطا Single Product - Loading, Error

• تک محصول - بازگشت پایه Single Product - Base Return

• تک محصول - تصاویر محصول Single Product - Product Images

• محصول واحد - ستاره (رویکرد دستی) Single Product - Stars (manual approach)

• محصول واحد - ستاره ها (رویکرد آرایه) Single Product - Stars (array approach)

• تک محصول - افزودن به سبد خرید - رنگ Single Product - Add To Cart - Colors

• تک محصول - افزودن به سبد خرید - دکمه های مقدار Single Product - Add To Cart - Amount Buttons

• تنظیم زمینه فیلتر Filter Context Setup

• صفحه محصولات - نمای شبکه Products Page - Grid View

• صفحه محصولات - نمایش فهرست Products Page - List View

• مرتب سازی کامپوننت - راه اندازی اولیه Sort Component - Basic Setup

• کامپوننت مرتب سازی - دکمه های مشاهده Sort Component - View Buttons

• جزء مرتب سازی - ورودی کنترل شده Sort Component - Controlled Input

• قابلیت مرتب سازی Sort Functionality

• فیلترها - مقادیر پیش فرض Filters - Default Values

• فیلترها - متن Filters - Text

• فیلترها - مقادیر منحصر به فرد Filters - Unique Values

• فیلترها - دسته بندی ها Filters - Categories

• فیلترها - شرکت ها Filters - Companies

• فیلترها - رنگها Filters - Colors

• فیلترها - قیمت Filters - Price

• فیلترها - حمل و نقل و پاک کردن فیلترها Filters - Shipping and Clear Filters

• عملکرد فیلتر - راه اندازی و ورودی متن Filter Functionality - Setup and Text Input

• عملکرد فیلتر - بقیه فیلترها Filter Functionality - Rest of the Filters

• تنظیم زمینه سبد خرید Cart Context Setup

• AddToCart - راه اندازی AddToCart - Setup

• AddToCart Reducer - آیتم جدید AddToCart Reducer - New Item

• AddToCart Reducer - مورد موجود AddToCart Reducer - Existing Item

• راه اندازی صفحه سبد خرید Cart Page Setup

• محل ذخیره سازی localStorage

• محتوای سبد خرید Cart Content

• ستون های سبد خرید Cart Columns

• مجموع سبد خرید Cart Totals

• کالای سبد خرید Cart Item

• سبد خرید - حذف مورد و پاک کردن سبد خرید Cart - Remove Item and Clear Cart

• سبد خرید - تغییر مقدار Cart - Toggle Amount

• سبد خرید - محاسبه مجموع Cart - Calculate Totals

• اطلاعات اضافی Auth0 Additional Auth0 Info

• Auth0 - راه اندازی Auth0 - Setup

• Auth0 - ارائه دهنده Auth0 - Provider

• useContext Setup useContext Setup

• Auth0 - دکمه های ورود/خروج Auth0 - Login/Logout Buttons

• Auth0 - تغییر مقادیر Auth0 - Toggle Values

• Auth0 - مخفی کردن پرداخت Auth0 - Hide Checkout

• Auth0 - مسیر خصوصی Auth0 - Private Route

• محتوای اضافی Extra Content

• ارتقا به آخرین استارت Upgrade To Latest Starter

• AuthWrapper AuthWrapper

• رفع هشدارها Fix Warnings

• اکانت های Stripe و Netlify Stripe and Netlify Accounts

• اطلاعات اضافی NetLIFY-CLI Additional NETLIFY-CLI Info

• netlify-cli را نصب و راه اندازی کنید Install and Setup netlify-cli

• اولین تابع Netlify First Netlify Function

• Stripe Checkout - راه اندازی Stripe Checkout - Setup

• Stripe Checkout - واردات Stripe Checkout - Imports

• Stripe Checkout - متغیرهای حالت Stripe Checkout - State Variables

• پرداخت راه راه - بازگشت اولیه Stripe Checkout - Basic Return

• تابع Netlify -/create-payment-setup Netlify Function - /create-payment-setup

• Stripe Checkout - Client Secret را دریافت کنید Stripe Checkout - Get Client Secret

• Stripe Checkout - کامل شد Stripe Checkout - Complete

• Refactor To React Router 6 Refactor To React Router 6

• مستقر در Netlify Deploy To Netlify

Comfy Sloth و Setup Airtable را سفارشی کنید Customize Comfy Sloth and Setup Airtable

• مقدمه Intro

• برپایی Setup

• CSS پیش فرض Default CSS

• فونت ها Fonts

• رنگ ها Colors

• لوگو Logo

• فاویکون Favicon

• تصاویر اصلی Main Images

• راه اندازی تصاویر محصول Setup Product Images

• هوا پذیر Airtable

• اولین محصول First Product

• همه محصولات - اختیاری !!!! All Products - Optional !!!!

• کلید ای پی ای API KEY

• گوچا ایرتابل Airtable Gotcha

• دو عملکرد دیگر بدون سرور Two More Serverless Functions

• کتابخانه Airtable-Node Airtable-Node Library

• واکشی محصولات Fetch Products

• Refactor و Return Products Refactor and Return Products

• تک محصول - ساختار Single Product - Structure

• واکشی محصول واحد Fetch Single Product

• راه اندازی ویترین Showcase Setup

آموزش قدیمی Redux Old Redux Tutorial

• اطلاعات Info

جعبه ابزار Redux Redux Toolkit

• مقدمه Intro

• Github Github

• برپایی Setup

• نصب Install

• فروشگاه Store

• برش اول First Slice

• Redux Dev Tools Redux Dev Tools

• استفاده از انتخابگر useSelector

• نمادهای قهرمان Hero Icons

• اقلام سبد خرید - داده های محلی Cart Items - Local Data

• ظرف سبد خرید Cart Container

• کالای سبد خرید Cart Item

• Reducers - پاک کردن سبد خرید Reducers - Clear Cart

• Reducers - Return State Reducers - Return State

• Reducers - حذف مورد Reducers - Remove Item

• کاهنده ها - افزایش و کاهش Reducers - Increase and Decrease

• Reducers - محاسبه مجموع Reducers - Calculate Totals

• راه اندازی مدل Model Setup

• مدال کامل شد Modal Complete

• createAsyncThunk createAsyncThunk

• createAsyncThunk - گزینه های بیشتر createAsyncThunk - More Options

• Builder Callback Notation Builder Callback Notation

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

• مقدمه Intro

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

• مخزن Github Github Repository

• برپایی Setup

• ایجاد اپلیکیشن جدید Create New Application

• عنوان و فاویکون Title and Favicon

• Normalize.css و سبک های پیش فرض Normalize.css and Default Styles

پروژه Jobster - صفحه فرود Jobster Project - Landing Page

• صفحه فرود - راه اندازی Landing Page - Setup

• صفحه فرود - ساختار Landing Page - Structure

• اجزای سبک - مبانی Styled Components - Basics

• صفحه فرود سبک Style Landing Page

صفحه خطا Error Page

• پوشه Wrappers Wrappers Folder

• لوگو و تصاویر Logo and Images

• جزء لوگو Logo Component

• راه اندازی صفحات Setup Pages

• React Router - راه اندازی React Router - Setup

• صفحه خطا Error Page

• واردات خودرو Auto Imports

پروژه Jobster - صفحه ثبت نام Jobster Project - Register Page

• صفحه ثبت نام - نمای کلی Register Page - Overview

• صفحه ثبت نام - راه اندازی Register Page - Setup

• Switch To React 18 Switch To React 18

• کامپوننت FormRow FormRow Component

• تعویض عضو Toggle Member

• تغییر و ارزش های خالی را مدیریت کنید Handle Change and Empty Values

• React Toastify React Toastify

• برش کاربر - راه اندازی User Slice - Setup

• ثبت نام و ورود به مکان Register and Login Placeholders

• روش های HTTP HTTP Methods

• Jobs API Jobs API

• نمونه CustomFetch Axios Axios CustomFetch Instance

• ثبت تست - درخواست HTTP(AJAX). Testing Register - HTTP(AJAX) Request

• ثبت نام کاربر - درخواست HTTP(AJAX). Register User - HTTP(AJAX) Request

• ورود کاربر - درخواست HTTP(AJAX). Login User - HTTP(AJAX) Request

• محل ذخیره سازی Local Storage

• به صورت برنامه نویسی به داشبورد بروید Programmatically Navigate To Dashboard

راه اندازی داشبورد Dashboard Setup

• راه اندازی صفحات داشبورد Setup Dashboard Pages

• SharedLayout را کامل کنید Complete SharedLayout

نوار نوار و نوار کناری Navbar and Sidebar

• منطق CSS نوار کناری Sidebar CSS Logic

• نمادهای واکنش React Icons

• ساختار نوار ناوبری Navbar Structure

• نوار کناری را تغییر دهید Toggle Sidebar

• کشویی خروج از سیستم را تغییر دهید Toggle Logout Dropdown

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

• مسیر محافظت شده Protected Route

• نوار کناری کوچک - راه اندازی Small Sidebar - Setup

• نوار کناری کوچک - تغییر وضعیت Small Sidebar - Toggle

• داده های پیوندها Links Data

• نوار کناری کوچک - پیوندهای ناوبری Small Sidebar - Nav Links

• کامپوننت NavLinks NavLinks Component

• نوار کناری بزرگ Big Sidebar

صفحه نمایه Profile Page

• صفحه پروفایل - معرفی Profile Page - Intro

• صفحه نمایه - راه اندازی Profile Page - Setup

• بررسی اجمالی درخواست تأییدیه Auth Request Overview

• به روز رسانی کاربر - کامل شد Update User - Complete

• خطا احراز هویت Authentication Error

• Refactor User Slice Refactor User Slice

افزودن صفحه کار - مرحله اول Add Job Page - First Stage

• مقدمه Intro

• Job Slice Job Slice

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

• ساختار Structure

• FormRow را انتخاب کنید FormRow Select

• HandleChange Reducer HandleChange Reducer

• کاهش دهنده ClearValues ClearValues Reducer

• ایجاد درخواست شغل - نمای کلی Create Job Request - Overview

• ایجاد درخواست شغل - تکمیل Create Job Request - Complete

• مکان کاربر User Location

• پیام خروج Logout Message

همه مشاغل - مرحله اول All Jobs - First Stage

• مقدمه Intro

• AllJobs Slice - راه اندازی AllJobs Slice - Setup

• ساختار صفحه همه مشاغل AllJobs Page Structure

• راه اندازی کانتینر Container Setup

• درخواست GetAllJobs - بررسی اجمالی GetAllJobs Request - Overview

• درخواست GetAllJobs - کامل شد GetAllJobs Request - Complete

• ساختار اجزای شغل Job Component Structure

• مؤلفه اطلاعات شغلی Job Info Component

• Moment.js Moment.js

• بارگیری را تغییر دهید Toggle Loading

افزودن صفحه کار - تکمیل Add Job Page - Complete

• حذف درخواست کار Delete Job Request

• تنظیم کار ویرایش Set Edit Job

• ویرایش درخواست کار Edit Job Request

برنامه Refactor Refactor App

• Job Thunk Job Thunk

• سربرگ مجوز - رویکرد فایل Authorization Header - File Approach

• سربرگ مجوز - رویکرد Utils Authorization Header - Utils Approach

• سربرگ مجوز - رویکرد رهگیرهای Axios Authorization Header - Axios Interceptors Approach

• تست کاربر Test User

صفحه آمار Stats Page

• درخواست ShowStats ShowStats Request

• ساختار صفحه آمار Stats Page Structure

• کانتینر آمار Stats Container

• مورد آمار Stat Item

• کانتینر نمودارها Charts Container

• Recharts به روز رسانی کتابخانه !!! Recharts Library Update !!!

• کتابخانه Recharts Recharts Library

• نمودارها کامل شد Charts Complete

صفحه همه مشاغل - کامل شد All Jobs Page - Complete

• کانتینر جستجو - راه اندازی Search Container - Setup

• کانتینر جستجو - کامل شد Search Container - Complete

• مدیریت تغییر و پاک کردن فیلترها Handle Change and Clear Filters

• صفحه بندی - راه اندازی Pagination - Setup

صفحه بندی Pagination

• PageBtnContainer - ساختار PageBtnContainer - Structure

• تغییر عملکرد صفحه Change Page Functionality

• پارامترهای پرس و جو - نمای کلی Query Params - Overview

• پارامترهای پرس و جو - کامل شد Query Params - Complete

• صفحه در حال بارگذاری را تغییر دهید Change Page an isLoading

• Refactor AllJobs Refactor AllJobs

• پاک کردن فروشگاه Clear Store

• خطای غیرمجاز Unauthorized Error

• Refactor Extra Reducers To Builder Notation Refactor Extra Reducers To Builder Notation

تابع عقب نشینی Debounce Function

• Debounce - مقدمه Debounce - Intro

• Debounce - Vanilla JS Debounce - Vanilla JS

• Refactor به LocalSearch Refactor to LocalSearch

• راه اندازی Debounce Setup Debounce

• دوره کامل شد Course Complete

پروژه های عملی Practical Projects

• اطلاعات Info

• Markdown - مقدمه Markdown - Intro

• Markdown - راه اندازی Markdown - Setup

• Markdown - کامل شد Markdown - Complete

• کاربر تصادفی - معرفی Random User - Intro

• کاربر تصادفی - راه اندازی Random User - Setup

• کاربر تصادفی - واکشی کاربر Random User - Fetch User

• کاربر تصادفی - دکمه ها Random User - Buttons

• صفحه بندی - مقدمه Pagination - Intro

• صفحه بندی - راه اندازی Pagination - Setup

• صفحه بندی - فهرست واکشی Pagination - Fetch List

• صفحه بندی - صفحه بندی Pagination - Paginate

• صفحه بندی - نمایش یک صفحه Pagination - Display Single Page

• صفحه بندی - دکمه ها Pagination - Buttons

• صفحه بندی - قبلی و بعدی Pagination - Prev and Next

• سهام عکس - اطلاعات Stock Photos - Info

• حالت تاریک - مقدمه Dark Mode - Intro

• حالت تاریک - راه اندازی Dark Mode - Setup

• حالت تاریک - Moment.js Dark Mode - Moment.js

• حالت تاریک - تغییر موضوع Dark Mode - Toggle Theme

• حالت تاریک - ذخیره سازی محلی Dark Mode - Local Storage

• فیلم دی بی - معرفی Movies DB - Intro

• فیلم DB - راه اندازی Movies DB - Setup

• فیلم DB - کلید API Movies DB - API Key

• Movies DB - React Router Update Movies DB - React Router Update

• Movies DB - React Router Movies DB - React Router

• فیلم DB - Initial Fetch Movies DB - Initial Fetch

• Movies DB - Movies Component Movies DB - Movies Component

• فیلم DB - فرم جستجو Movies DB - Search Form

• فیلم دی بی - تک فیلم Movies DB - Single Movie

• فیلم DB - Refactor Movies DB - Refactor

• Movies DB - React Router Refactor Movies DB - React Router Refactor

• هکر نیوز - معرفی Hacker News - Intro

• هکر نیوز - راه اندازی Hacker News - Setup

• Hacker News - مروری بر API Hacker News - API Overview

• هکر نیوز - ساختار اولیه Hacker News - Initial Structure

• اخبار هکر - دریافت داستان Hacker News - Get Stories

• اخبار هکر - نمایش داستان Hacker News - Display Stories

• هکر نیوز - حذف استوری Hacker News - Remove Story

• هکر نیوز - فرم جستجو Hacker News - Search Form

• اخبار هکر - دکمه های قبلی و بعدی Hacker News - Prev and Next Buttons

• مسابقه - مقدمه Quiz - Intro

• امتحان - راه اندازی Quiz - Setup

• امتحان - API Quiz - API

• امتحان - تنظیمات زمینه Quiz - Context Setup

• امتحان - واکشی سوالات Quiz - Fetch Questions

• امتحان - نمایش سوال Quiz - Display Question

• آزمون - سوال بعدی Quiz - Next Question

• امتحان - بررسی پاسخ Quiz - Check Answer

• مسابقه - معین Quiz - Modal

• آزمون - ساختار فرم Quiz - Form Structure

• امتحان - کنترل تغییر Quiz - Handle Change

• امتحان - رسیدگی به ارسال Quiz - Handle Submit

• آزمون - پاسخ تصادفی Quiz - Random Answer

جستجوی کاربران Github Search Github Users

• مقدمه Intro

• پروژه شروع کننده Starter Project

• اطلاعات راه اندازی Setup Info

• React Router - به روز رسانی React Router - Update

• React Router - راه اندازی React Router - Setup

• روتر واکنش - صفحه خطا React Router - Error Page

• صفحه خطا Error Page

• صفحه ورود Login Page

• متن نوشته Context

• داده های ساختگی Mock Data

• مؤلفه اطلاعات Info Component

• جزء کارت Card Component

• جزء فالوور Follower Component

• راه اندازی Repos Repos Setup

• نمودارهای فیوژن - مقدمه Fusion Charts - Intro

• نمودار اول First Chart

• نمودار فیوژن Fusion Chart

• گزینه های پیکربندی Configuration Options

• نمودار دایره ای Pie Chart

• محاسبه بیشترین استفاده Calculate Most Used

• راه اندازی پاسخگو Responsive Setup

• نمودار دونات Doughnut Chart

• محبوب ترین ها را محاسبه کنید Calculate Most Popular

• نمودارهای ستونی و میله ای Column and Bar Charts

• عملکرد ستاره ها و چنگال ها Stars and Forks Functionality

• کامپوننت جستجو Search Component

• درخواست ها Requests

• خطا Error

• جستجوی کاربر Search User

• در حال بارگذاری اسپینر Loading Spinner

• مخازن و فالوورها Repos and Followers

• همه حل شد allSettled

• Auth0 - مقدمه Auth0 - Intro

• Auth0 - راه اندازی Auth0 - Setup

• داخل شدن و خارج شدن Login - Logout

• مسیر خصوصی Private Route

• لفاف Wrapper

• محل ذخیره سازی Local Storage

• React Router - Refactor React Router - Refactor

• Gotchas را مستقر کنید Deploy Gotchas

• استقرار پروژه Deploy Project

جایزه Bonus

• جایزه Bonus