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

React 18 Tutorial and Projects Course (2023)

نکته: آخرین آپدیت رو دریافت میکنید حتی اگر این محتوا بروز نباشد.
نمونه ویدیوها:
توضیحات دوره: آموزش React با ساخت 25+ پروژه جالب ساخت پروژه های عالی با استفاده از React پیشها: دانش قوی HTML، CSS، JS الزامی است. ES6 اختیاری است.

React یک کتابخانه جاوا اسکریپت برای ساخت رابط کاربری است. این توسط فیس بوک توسعه یافته و نگهداری می شود و اغلب برای ساخت برنامه های کاربردی تک صفحه ای و برنامه های تلفن همراه استفاده می شود.

یکی از دلایل یادگیری React این است که یک فناوری محبوب و پرتقاضا است، بنابراین یادگیری آن می تواند آینده شغلی شما را بهبود بخشد و پیدا کردن کار به عنوان یک توسعه دهنده فرانت اند را آسان تر کند. React همچنین انتخاب خوبی برای ساخت برنامه‌های کاربردی وب مدرن است زیرا کارآمد، مقیاس‌پذیر و سریع است و از DOM مجازی (نمایشی سبک وزن از DOM واقعی در حافظه) برای به حداقل رساندن تعداد دستکاری‌های DOM مورد نیاز استفاده می‌کند. ساخت برنامه های کاربردی با کارایی بالا آسان تر است.

یک دلیل دیگر برای یادگیری React این است که یک کتابخانه خوب طراحی شده و منعطف است که ساخت اجزای قابل استفاده مجدد را که می توانند برای ساخت رابط های کاربری پیچیده ساخته شوند، آسان می کند. این کار حفظ و به‌روزرسانی پایگاه کد خود را در طول زمان آسان‌تر می‌کند، زیرا می‌توانید از مؤلفه‌ها در مکان‌های مختلف استفاده مجدد کنید، نه اینکه یک کد را چندین بار بازنویسی کنید.

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

در طول دوره ما از آخرین نسخه React - React 18 استفاده خواهیم کرد.

در مورد مفاهیمی که قرار است پوشش دهیم

- React Fundamentals

- useState hook

- قلاب useEffect

- رندر شرطی

- فرم ها

- قلاب useRef

- useReducer hook

- حفاری پایه

- api متن

- قلاب های سفارشی

- استفاده از قلاب برگشت تماس

- از قلاب یادداشت استفاده کنید

- React Router 6

- کتابخانه http axios

- redux-toolkit


همه معرفی‌های پروژه برای پیش‌نمایش در دسترس هستند.

در اینجا برخی از پروژه‌هایی که قرار است در این دوره بسازیم وجود دارد

1. یادآوری تولد

2. تورها

3. نظرات

4. آکاردئون

5. منو

6. برگه ها

7. لغزنده

8. لورم ایپسوم

9. مولد رنگ

10. غنچه مواد غذایی

11. نوار ناوبری

12. نوار کناری و Modal

13. منوی راه راه

14. سبد خرید

15. کوکتل

16. پیش نمایش Markdown

17. شخص تصادفی

18. صفحه بندی

19. عکس های استوک

20. حالت تاریک

21. فیلم DB

22. اخبار هکر

23. امتحان

24. کاربران Github

25. تجارت الکترونیک

26. Jobster




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

معرفی 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

نمایش نظرات

Udemy (یودمی)

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

یکی از ویژگی‌های برجسته یودمی، کیفیت بالای دوره‌ها و حضور استادان مجرب و با تجربه در هر حوزه است. این امر به کاربران اعتماد می‌دهد که در حال دریافت آموزش از منابع قابل اعتماد و معتبر هستند و می‌توانند به بهترین شکل ممکن از آموزش‌ها بهره ببرند. به طور خلاصه، یودمی به عنوان یکی از معتبرترین و موثرترین پلتفرم‌های آموزشی آنلاین، به افراد امکان می‌دهد تا به راحتی و با کیفیت، مهارت‌های مورد نیاز خود را ارتقا دهند و به دنبال رشد و پیشرفت شغلی خود باشند.

آموزش React 18 Tutorial and Projects Course (2023)
جزییات دوره
67.5 hours
665
Udemy (یودمی) Udemy (یودمی)
(آخرین آپدیت)
51,050
4.7 از 5
ندارد
دارد
دارد
John Smilga
جهت دریافت آخرین اخبار و آپدیت ها در کانال تلگرام عضو شوید.

Google Chrome Browser

Internet Download Manager

Pot Player

Winrar

John Smilga John Smilga

مربی