آموزش از جلو به عقب واکنش نشان دهید

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

معرفی Introduction

• به دوره خوش آمدید! Welcome To The Course!

• React چیست؟ What Is React?

• راه اندازی محیط Environment Setup

• مخازن کد Code Repos

• پیوندها و منابع Links & Resources

معرفی Introduction

• به دوره خوش آمدید! Welcome To The Course!

• React چیست؟ What Is React?

• راه اندازی محیط Environment Setup

• مخازن کد Code Repos

• پیوندها و منابع Links & Resources

React Basics & JSX React Basics & JSX

• معرفی پروژه بازخورد Feedback Project Intro

• ایجاد React App Create React App

• راه اندازی React Initializing React

• معرفی JSX Intro To JSX

• ارزش ها و لیست های پویا در JSX Dynamic Values & LIsts in JSX

• شرایط در JSX Conditionals in JSX

React Basics & JSX React Basics & JSX

• معرفی پروژه بازخورد Feedback Project Intro

• ایجاد React App Create React App

• راه اندازی React Initializing React

• معرفی JSX Intro To JSX

• ارزش ها و لیست های پویا در JSX Dynamic Values & LIsts in JSX

• شرایط در JSX Conditionals in JSX

اجزاء، لوازم و وضعیت Components, Props & State

• ایجاد اولین مؤلفه و لوازم جانبی شما Creating Your First Component & Props

• اضافه کردن سبک به یک کامپوننت Adding Styles To A Component

• حالت و استفاده از حالت هوک State & useState Hook

• مدیریت دولت جهانی Managing Global State

• اجزای کارت و سبک های شرطی Card Component & Conditional Styles

• رویدادها و حفاری سرپایی Events & Prop Drilling

• FeedbackStats Component & Reactivity FeedbackStats Component & Reactivity

اجزاء، لوازم و وضعیت Components, Props & State

• ایجاد اولین مؤلفه و لوازم جانبی شما Creating Your First Component & Props

• اضافه کردن سبک به یک کامپوننت Adding Styles To A Component

• حالت و استفاده از حالت هوک State & useState Hook

• مدیریت دولت جهانی Managing Global State

• اجزای کارت و سبک های شرطی Card Component & Conditional Styles

• رویدادها و حفاری سرپایی Events & Prop Drilling

• FeedbackStats Component & Reactivity FeedbackStats Component & Reactivity

فرم ها، اعتبارسنجی و انیمیشن ساده Forms, Validation & Simple Animation

• ورودی و وضعیت فرم Form Input & State

• کامپوننت دکمه سفارشی Custom Button Component

• اعتبار سنجی بلادرنگ Real-Time Validation

• رتبه بندی جزء را انتخاب کنید Rating Select Component

• افزودن بازخورد Add Feedback

• انیمیشن محو شدن با حرکت فریم Fade Animation With Framer Motion

فرم ها، اعتبارسنجی و انیمیشن ساده Forms, Validation & Simple Animation

• ورودی و وضعیت فرم Form Input & State

• کامپوننت دکمه سفارشی Custom Button Component

• اعتبار سنجی بلادرنگ Real-Time Validation

• رتبه بندی جزء را انتخاب کنید Rating Select Component

• افزودن بازخورد Add Feedback

• انیمیشن محو شدن با حرکت فریم Fade Animation With Framer Motion

ایجاد مسیرها و پیوندها Creating Routes & Links

• ایجاد مسیرها (React Router 5) Creating Routes (React Router 5)

• ارتقا به روتر React 6 Upgrading To React Router 6

• ایجاد لینک (v5 و v6) Creating Links (v5 & v6)

• NavLink و useParams NavLink & useParams

• پیمایش و مسیرهای تودرتو Navigate & Nested Routes

ایجاد مسیرها و پیوندها Creating Routes & Links

• ایجاد مسیرها (React Router 5) Creating Routes (React Router 5)

• ارتقا به روتر React 6 Upgrading To React Router 6

• ایجاد لینک (v5 و v6) Creating Links (v5 & v6)

• NavLink و useParams NavLink & useParams

• پیمایش و مسیرهای تودرتو Navigate & Nested Routes

Context API، useContext Hook & Deployment Context API, useContext Hook & Deployment

• یک زمینه و ارائه دهنده ایجاد کنید Create a Context & Provider

• با استفاده از هوک useContext وضعیت جهانی را بدست آورید Get Global State With The useContext Hook

• انتقال توابع به متن Moving Functions To Context

• ویرایش رویداد بازخورد Edit Feedback Event

• عوارض جانبی با useEffect Side Effects With useEffect

• به روز رسانی مورد بازخورد Update Feedback Item

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

Context API، useContext Hook & Deployment Context API, useContext Hook & Deployment

• یک زمینه و ارائه دهنده ایجاد کنید Create a Context & Provider

• با استفاده از هوک useContext وضعیت جهانی را بدست آورید Get Global State With The useContext Hook

• انتقال توابع به متن Moving Functions To Context

• ویرایش رویداد بازخورد Edit Feedback Event

• عوارض جانبی با useEffect Side Effects With useEffect

• به روز رسانی مورد بازخورد Update Feedback Item

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

API ها و درخواست های HTTP APIs & HTTP Requests

• API ها و درخواست ها توضیح داده شده است APIs & Requests Explained

• راه اندازی JSON-Server Mock Backend Setting Up JSON-Server Mock Backend

• کلاینت و سرور را همزمان اجرا کنید Run Client & Server With Concurrently

• واکشی داده ها از JSON-Server Backend Fetch Data From JSON-Server Backend

• جزء اسپینر Spinner Component

• افزودن بازخورد و تنظیم یک پروکسی Add Feedback & Setting a Proxy

• به روز رسانی و حذف از JSON-Server Update & Delete From JSON-Server

API ها و درخواست های HTTP APIs & HTTP Requests

• API ها و درخواست ها توضیح داده شده است APIs & Requests Explained

• راه اندازی JSON-Server Mock Backend Setting Up JSON-Server Mock Backend

• کلاینت و سرور را همزمان اجرا کنید Run Client & Server With Concurrently

• واکشی داده ها از JSON-Server Backend Fetch Data From JSON-Server Backend

• جزء اسپینر Spinner Component

• افزودن بازخورد و تنظیم یک پروکسی Add Feedback & Setting a Proxy

• به روز رسانی و حذف از JSON-Server Update & Delete From JSON-Server

شروع پروژه GitHub Finder GitHub Finder Project Start

• معرفی پروژه GitHub Finder GitHub Finder Project Intro

• راه اندازی Tailwind & Daisy UI Setup Tailwind & Daisy UI

• کامپوننت نوار ناوبری Navbar Component

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

• صفحات و مسیرها Pages & Routes

شروع پروژه GitHub Finder GitHub Finder Project Start

• معرفی پروژه GitHub Finder GitHub Finder Project Intro

• راه اندازی Tailwind & Daisy UI Setup Tailwind & Daisy UI

• کامپوننت نوار ناوبری Navbar Component

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

• صفحات و مسیرها Pages & Routes

کار با GitHub API Working With The GitHub API

• Github API & Getting Token Github API & Getting Token

• جزء User List UserList Component

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

• نمایش کاربران Display Users

• تنظیمات Github Context Setup Github Context

• Reducer & useReducer Hook Reducers & useReducer Hook

• پاک کردن واکشی کاربران Clean Up Fetch Users

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

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

• پاک کردن کاربران Clear Users

کار با GitHub API Working With The GitHub API

• Github API & Getting Token Github API & Getting Token

• جزء User List UserList Component

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

• نمایش کاربران Display Users

• تنظیمات Github Context Setup Github Context

• Reducer & useReducer Hook Reducers & useReducer Hook

• پاک کردن واکشی کاربران Clean Up Fetch Users

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

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

• پاک کردن کاربران Clear Users

نمایه کاربر و هشدارها User Profile & Alerts

• متن هشدار و کاهش دهنده Alert Context & Reducer

• مؤلفه هشدار Alert Component

• دریافت کاربر مجرد Get Single User

• نمایه کاربر بالا User Profile Top

• آمار نمایه کاربر User Profile Stats

• Repos کاربر را دریافت کنید Get User Repos

• اقلام مخزن Repo Items

نمایه کاربر و هشدارها User Profile & Alerts

• متن هشدار و کاهش دهنده Alert Context & Reducer

• مؤلفه هشدار Alert Component

• دریافت کاربر مجرد Get Single User

• نمایه کاربر بالا User Profile Top

• آمار نمایه کاربر User Profile Stats

• Repos کاربر را دریافت کنید Get User Repos

• اقلام مخزن Repo Items

Refactoring Context & Actions Refactoring Context & Actions

• SearchUsers را به فایل Actions منتقل کنید Move SearchUsers To Actions File

• getUser را به فایل Actions منتقل کنید Move getUser To Actions File

• پاکسازی اقدامات و Axios ما Cleaning Up Our Actions & Axios

• استقرار در Vercel Deploy To Vercel

Refactoring Context & Actions Refactoring Context & Actions

• SearchUsers را به فایل Actions منتقل کنید Move SearchUsers To Actions File

• getUser را به فایل Actions منتقل کنید Move getUser To Actions File

• پاکسازی اقدامات و Axios ما Cleaning Up Our Actions & Axios

• استقرار در Vercel Deploy To Vercel

قلاب‌های واکنش پیشرفته‌تر More Advanced React Hooks

• بخش معرفی Section Intro

• useRef مثال 1 - ایجاد مرجع DOM useRef Example 1 - Create DOM Reference

• useRef مثال 2 - وضعیت قبلی را دریافت کنید useRef Example 2 - Get Previous State

• useRef مثال 3 - رفع خطای نشت حافظه useRef Example 3 - Memory Leak Error Fix

• useMemo مثال useMemo Example

• استفاده از Callback مثال useCallback Example

• قلاب سفارشی 1 - useFetch Custom Hook 1 - useFetch

• هوک سفارشی 2 - استفاده ازLocalStorage Custom Hook 2 - useLocalStorage

قلاب‌های واکنش پیشرفته‌تر More Advanced React Hooks

• بخش معرفی Section Intro

• useRef مثال 1 - ایجاد مرجع DOM useRef Example 1 - Create DOM Reference

• useRef مثال 2 - وضعیت قبلی را دریافت کنید useRef Example 2 - Get Previous State

• useRef مثال 3 - رفع خطای نشت حافظه useRef Example 3 - Memory Leak Error Fix

• useMemo مثال useMemo Example

• استفاده از Callback مثال useCallback Example

• قلاب سفارشی 1 - useFetch Custom Hook 1 - useFetch

• هوک سفارشی 2 - استفاده ازLocalStorage Custom Hook 2 - useLocalStorage

شروع پروژه هاوس مارکت House Marketplace Project Start

• معرفی پروژه بازار خانه House Marketplace Project Intro

• راه اندازی برنامه و فایربیس App & FIrebase Setup

• احراز هویت و ایجاد قوانین را فعال کنید Enable Authentication & Create Rules

• داده ها و شاخص های ساختگی Dummy Data & Indexes

• صفحات و مسیرها Pages & Routes

• کامپوننت نوار ناوبری Navbar Component

شروع پروژه هاوس مارکت House Marketplace Project Start

• معرفی پروژه بازار خانه House Marketplace Project Intro

• راه اندازی برنامه و فایربیس App & FIrebase Setup

• احراز هویت و ایجاد قوانین را فعال کنید Enable Authentication & Create Rules

• داده ها و شاخص های ساختگی Dummy Data & Indexes

• صفحات و مسیرها Pages & Routes

• کامپوننت نوار ناوبری Navbar Component

احراز هویت و نمایه Firebase Firebase Authentication & Profile

• فرم های ورود و ثبت نام Sign In & Sign Up Forms

• ثبت نام کاربر Register User

• ذخیره کاربر در Firestore Save User To Firestore

• ورود کاربر User Sign In

• هشدار با React Toastify Alerts With React Toastify

• خروج کاربر User Logout

• نمایش و به روز رسانی جزئیات کاربر Display & Update User Details

• کامپوننت PrivateRoute و استفاده از هوکAuthStatus PrivateRoute Component & useAuthStatus Hook

• صفحه رمز عبور را فراموش کرده اید Forgot Password Page

• Google OAuth Google OAuth

احراز هویت و نمایه Firebase Firebase Authentication & Profile

• فرم های ورود و ثبت نام Sign In & Sign Up Forms

• ثبت نام کاربر Register User

• ذخیره کاربر در Firestore Save User To Firestore

• ورود کاربر User Sign In

• هشدار با React Toastify Alerts With React Toastify

• خروج کاربر User Logout

• نمایش و به روز رسانی جزئیات کاربر Display & Update User Details

• کامپوننت PrivateRoute و استفاده از هوکAuthStatus PrivateRoute Component & useAuthStatus Hook

• صفحه رمز عبور را فراموش کرده اید Forgot Password Page

• Google OAuth Google OAuth

دریافت و ایجاد لیست Get & Create Listings

• کاوش صفحه Explore Page

• واکشی لیست ها از Firebase Fetch Listings From Firebase

• جزء مورد فهرست Listing Item Component

• صفحه پیشنهادات Offers Page

• ایجاد صفحه فهرست را شروع کنید Start Create Listing Page

• ایجاد فرم لیست Create Listing Form

• Coords را با Geocoding API دریافت کنید Get Coords With Geocoding API

• آپلود تصاویر در فایربیس Uploading Images To FIrebase

• لیست ها را در Firestore ذخیره کنید Save Listings To Firestore

• یادداشت و تغییر سریع Quick Note & Change

دریافت و ایجاد لیست Get & Create Listings

• کاوش صفحه Explore Page

• واکشی لیست ها از Firebase Fetch Listings From Firebase

• جزء مورد فهرست Listing Item Component

• صفحه پیشنهادات Offers Page

• ایجاد صفحه فهرست را شروع کنید Start Create Listing Page

• ایجاد فرم لیست Create Listing Form

• Coords را با Geocoding API دریافت کنید Get Coords With Geocoding API

• آپلود تصاویر در فایربیس Uploading Images To FIrebase

• لیست ها را در Firestore ذخیره کنید Save Listings To Firestore

• یادداشت و تغییر سریع Quick Note & Change

لیست های تک، نقشه، لغزنده و ویرایش Single Listings, Map, Slider & Edit

• واکشی فهرست واحد Fetch Single Listing

• جزئیات لیست Listing Details

• با صفحه صاحبخانه تماس بگیرید Contact Landlord Page

• نقشه بروشور Leaflet Map

• لغزان صفحه لیست ها Listings Page Slider

• اسلایدر را کاوش کنید Explore Slider

• لیست پروفایل و حذف Profile Listings & Delete

• بارگذاری صفحه بندی بیشتر Load More Pagination

• ویرایش نماد فهرست Edit Listing Icon

• ویرایش فهرست Edit Listing

• پاک کردن هشدارهای کنسول Clear Up Console Warnings

• استقرار در Vercel Deploy To Vercel

لیست های تک، نقشه، لغزنده و ویرایش Single Listings, Map, Slider & Edit

• واکشی فهرست واحد Fetch Single Listing

• جزئیات لیست Listing Details

• با صفحه صاحبخانه تماس بگیرید Contact Landlord Page

• نقشه بروشور Leaflet Map

• لغزان صفحه لیست ها Listings Page Slider

• اسلایدر را کاوش کنید Explore Slider

• لیست پروفایل و حذف Profile Listings & Delete

• بارگذاری صفحه بندی بیشتر Load More Pagination

• ویرایش نماد فهرست Edit Listing Icon

• ویرایش فهرست Edit Listing

• پاک کردن هشدارهای کنسول Clear Up Console Warnings

• استقرار در Vercel Deploy To Vercel

شروع، API و تأیید اعتبار پروژه MERN MERN Project Start, API & Backend Authentication

• معرفی پروژه Project Intro

• پشته MERN چیست؟ What Is The MERN Stack?

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

• ساختار فایل سرور Server File Stucture

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

• مسیرها و کنترلر را اضافه کنید Add Routes & Controller

• رسیدگی به خطا و استثنا Error & Exception Handling

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

• ثبت نام کاربر Register User

• ورود و ایجاد JWT Login & Create JWT

• از مسیرها و احراز هویت محافظت کنید Protect Routes & Authentication

شروع، API و تأیید اعتبار پروژه MERN MERN Project Start, API & Backend Authentication

• معرفی پروژه Project Intro

• پشته MERN چیست؟ What Is The MERN Stack?

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

• ساختار فایل سرور Server File Stucture

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

• مسیرها و کنترلر را اضافه کنید Add Routes & Controller

• رسیدگی به خطا و استثنا Error & Exception Handling

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

• ثبت نام کاربر Register User

• ورود و ایجاد JWT Login & Create JWT

• از مسیرها و احراز هویت محافظت کنید Protect Routes & Authentication

احراز هویت Frontend Frontend Authentication

• راه اندازی پوشه Frontend Frontend Folder Setup

• سرصفحه و صفحات اولیه Header & Initial Pages

• صفحه اصلی، ورود و ثبت نام UI Home, Login & Register UI

• Redux Setup & Auth Slice Redux Setup & Auth Slice

• فرم ثبت نام قلاب به Redux Hook Register Form To Redux

• ثبت نام کاربر Register User

• خروج کاربر Logout User

• ورود کاربر User Login

احراز هویت Frontend Frontend Authentication

• راه اندازی پوشه Frontend Frontend Folder Setup

• سرصفحه و صفحات اولیه Header & Initial Pages

• صفحه اصلی، ورود و ثبت نام UI Home, Login & Register UI

• Redux Setup & Auth Slice Redux Setup & Auth Slice

• فرم ثبت نام قلاب به Redux Hook Register Form To Redux

• ثبت نام کاربر Register User

• خروج کاربر Logout User

• ورود کاربر User Login

عملکرد بلیط Tickets Functionality

• مدل بلیط و مسیرها Ticket Model & Routes

• دریافت و ایجاد بلیط (پشت زمینه) Get & Create Tickets (Backend)

• بلیط تکی، به روز رسانی و حذف (بکاند) Single Ticket, Update & Delete (Backend)

• نگهبان مسیر Route Guard

• فرم جدید بلیط New Ticket Form

• بلیط را به Redux اضافه کنید Add Tickets To Redux

• ایجاد عملکرد بلیط Create Ticket Functionality

• واکشی بلیط از Backend Fetch Tickets From Backend

• لیست بلیط ها در UI Listing Tickets In UI

• نمایش تک بلیط Single Ticket Display

• بستن عملکرد بلیط Close Ticket Functionality

عملکرد بلیط Tickets Functionality

• مدل بلیط و مسیرها Ticket Model & Routes

• دریافت و ایجاد بلیط (پشت زمینه) Get & Create Tickets (Backend)

• بلیط تکی، به روز رسانی و حذف (بکاند) Single Ticket, Update & Delete (Backend)

• نگهبان مسیر Route Guard

• فرم جدید بلیط New Ticket Form

• بلیط را به Redux اضافه کنید Add Tickets To Redux

• ایجاد عملکرد بلیط Create Ticket Functionality

• واکشی بلیط از Backend Fetch Tickets From Backend

• لیست بلیط ها در UI Listing Tickets In UI

• نمایش تک بلیط Single Ticket Display

• بستن عملکرد بلیط Close Ticket Functionality

یادداشت ها عملکرد و استقرار Notes Functionality & Deploy

• پشتیبان یادداشت ها Notes Backend

• واکشی یادداشت ها از طریق Redux Fetch Notes Through Redux

• نمایش یادداشت ها Display Notes

• توجه فرم مدال Note Form Modal

• یک یادداشت ارسال کنید Submit a Note

• اعزام به Heroku Deploy To Heroku

یادداشت ها عملکرد و استقرار Notes Functionality & Deploy

• پشتیبان یادداشت ها Notes Backend

• واکشی یادداشت ها از طریق Redux Fetch Notes Through Redux

• نمایش یادداشت ها Display Notes

• توجه فرم مدال Note Form Modal

• یک یادداشت ارسال کنید Submit a Note

• اعزام به Heroku Deploy To Heroku