آموزش React JS Masterclass - Go From Zero to Job Ready [ویدئو]

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

مقدمه و منابع Introduction and Resources

• معرفی دوره Course Introduction

• منابع (مهم) Resources (Important)

React Basics و Setup React Basics and Setup

• React Introduction React Introduction

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

• برنامه React ایجاد کنید Create React App

• در پشت صحنه واکنش نشان دهید React Behind the Scene

• React Boilerplate/005 React Boilerplate / 005

• اجزاء: بر اساس کلاس و عملکرد/006 Components: Class- and Function-Based / 006

• JSX: In-Depth Introduction/007 JSX: In-Depth Introduction / 007

• تمرین: ساختار الگوی پایه/008 Practice: Basic Template Structure / 008

ایالات و استفاده از ایالت States and useState

• چرا ما به ایالات نیاز داریم؟/009 Why We Need States? / 009

• معرفی وضعیت: useState/010 State Introduction: useState / 010

• useState: به روز رسانی های متعدد/011 useState: Multiple Updates / 011

• useState: Array State Value/012 useState: Array State Value / 012

• useState: Array setState Value/013 useState: Array setState Value / 013

• الگوهای شرطی/014 Conditional Templates / 014

• مشاوره سریع هوک/015 Quick Hook Advice / 015

اجزاء و لوازم جانبی Components and Props

• اجزا و قطعات چندگانه/016 Multiple Components and Fragments / 016

• Props: In-Depth Introduction/017 Props: In-Depth Introduction / 017

• لوازم جانبی: کودکان/018 Props: Children / 018

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

Styling React Application Styling React Application

• یک ظاهر طراحی سطح جهانی/020 Global Level Styling / 020

• یک ظاهر طراحی سطح مؤلفه/021 Component Level Styling / 021

• یک ظاهر طراحی سطح درون خطی/022 Inline Level Styling / 022

• یک ظاهر طراحی سطح پویا/023 Dynamic Level Styling / 023

• استایل سطح ماژول/024 Module Level Styling / 024

ورودی کاربر، رویدادها و useRef User Input, Events, and useRef

• فرم ها و ورودی/025 Forms and Input / 025

• رویداد onChange/026 onChange Event / 026

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

• onSubmit Event/028 onSubmit Event / 028

• افزودن وظیفه جدید/029 Add New Task / 029

• useRef Hook/030 useRef Hook / 030

useEffects، useCallback و Custom Hooks useEffects, useCallback, and Custom Hooks

• سرور JSON/031 JSON Server / 031

• useEffect Hook/032 useEffect Hook / 032

• React StrictMode React StrictMode

• خروجی لیست/035 List Output / 035

• رویداد onClick/036 onClick Event / 036

• useCallback Hook/037 useCallback Hook / 037

• هوک سفارشی (useFetch)/038 Custom Hook (useFetch) / 038

• حالت بارگیری/039 Loading State / 039

• رسیدگی به خطاها (سعی/گرفتن)/040 Handling Errors (try/catch) / 040

• لغو درخواست واکشی/041 Aborting Fetch Request / 041

• حلقه های بی نهایت/042 Infinite Loops / 042

پروژه: TaskMate Project: TaskMate

• نسخه ی نمایشی TaskMate TaskMate Demo

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

• اجزاء/045 Components / 045

• وضعیت: tasklist و setTasklist/046 State: tasklist and setTasklist / 046

• عملکرد: ویرایش و حذف/047 Function: Edit and Delete / 047

• هشدار: مقدار تعریف نشده/048 Warning: Undefined Value / 048

• دکمه به روز رسانی/049 Update Button / 049

• محل ذخیره سازی: ذخیره همه وظایف/050 Local Storage: Store All Tasks / 050

• موضوع: تغییر پس زمینه/051 Theme: Change Background / 051

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

روتر واکنش React Router

• معرفی روتر React/053 React Router Introduction / 053

• راه اندازی روتر React/054 React Router Setup / 054

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

• ناوبری/056 Navigation / 056

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

• مسیر پیدا نشد/058 No Route Found / 058

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

• بازسازی پروژه/060 Project Restructuring / 060

دوره CSS CSS Tailwind Tailwind CSS Crash Course

• معرفی و نسخه ی نمایشی Introduction and Demo

• خواص مشترک Common Properties

• شناور، فوکوس، و وضعیت های دیگر Hover, Focus, and Other States

• طراحی تعاملی Responsive Design

• حالت تاریک Dark Mode

• پیکربندی سفارشی/206 Custom Configuration / 206

• نسخه ی نمایشی پروژه/207 Project Demo / 207

• بخش هدر و قهرمان/208 Header and Hero Section/ 208

• پاورقی/209 Footer / 209

• صفحه نمایش پاسخگو و ابزارهای مؤلفه/210 Responsive Screen and Component Tools / 210

پروژه API فیلم: سینما Movie API Project: Cinemate

• دمو سینما Cinemate Demo

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

• Tailwind Introduction/063 Tailwind Introduction / 063

• TMDB API: Documentation/064 TMDB API: Documentation / 064

• طراحی رابط کاربری (Tailwind and Flowbite)/065 UI Design (Tailwind and Flowbite) / 065

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

• ادغام حالت تاریک/067 Dark Mode Integration / 067

• ساختار فهرست فیلم/068 Movie List Structure / 068

• API Fetch: فهرست فیلم/069 API Fetch: Movie List / 069

• هوک سفارشی: useFetch/070 Custom Hook: useFetch / 070

• API Fetch: Movie Search/071 API Fetch: Movie Search / 071

• سفارشی سازی Tailwind CSS/072 Tailwind CSS Customization / 072

• صفحه یافت نشد/073 Page Not Found / 073

• اطلاعات فیلم فردی/074 Individual Movie Information / 074

• بازیابی اسکرول: به بالا/075 بروید Scroll Restoration: Scroll to Top / 075

• عنوان صفحه پویا/076 Dynamic Page Title / 076

• به روز رسانی سبک/077 Style Update / 077

• استقرار پروژه/078 Project Deployment / 078

• شعبه توسعه در Git و GitHub Development Branch on Git and GitHub

• حل شد: خطای Netlify/079 Solved: Netlify Error / 079

تکلیف: سبد خرید Assignment: Shopping Cart

• بیانیه تکلیف و نسخه ی نمایشی/080 Assignment Statement and Demo / 080

• راه حل: راه اندازی پروژه Solution: Project Setup

• راه حل: اجزاء/082 Solution: Components / 082

• راه حل: صفحات/083 Solution: Pages / 083

• استقرار تکلیف Assignment Deployment

پروژه زمینه و کاهش دهنده ها: سبد خرید Context and Reducers Project: Shopping Cart

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

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

• زمینه/087 Context / 087

• کاهنده/088 Reducer / 088

• روش ها/089 Methods / 089

• استقرار پروژه/090 Project Deployment / 090

پروژه Redux: سبد خرید Redux Project: Shopping Cart

• معرفی Redux Redux Introduction

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

• Slice and Action/092 Slice and Action / 092

• کاهش دهنده ها: افزودن و حذف/093 Reducers: Add and Remove / 093

• Redux Store State/094 Redux Store State / 094

• استقرار پروژه/095 Project Deployment / 095

پروژه تجارت الکترونیک: کتاب کد ECommerce Project: Codebook

• نسخه ی نمایشی کتاب کد/097 Codebook Demo / 097

• تاسیسات/098 Installations / 098

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

• کامپوننت سرصفحه - I/100 Header Component - I / 100

• کامپوننت سرصفحه - II/101 Header Component - II / 101

• صفحه اصلی/102 Home Page / 102

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

• API: لیست محصولات/104 API: Product List / 104

• جزء رتبه بندی/105 Rating Component / 105

• جزء محصول فردی/106 Individual Product Component / 106

• حالت تاریک/107 Dark Mode / 107

• مؤلفه ScrollToTop/108 ScrollToTop Component / 108

• جستجوی محصول/109 Product Search / 109

• عنوان پویا/110 Dynamic Title / 110

• Filter: Context and Reducers/111 Filter: Context and Reducers / 111

• فیلتر: فهرست محصولات اولیه/112 Filter: Initial Product List / 112

• فیلتر: خواص/113 Filter: Properties / 113

• پاک کردن فیلتر/114 Clear Filter / 114

• گزینه کشویی/115 Dropdown Option / 115

• حساب کاربری و سبد خرید User Account and Cart

• صفحه ورود و ثبت نام/118 Login and Registration Page / 118

• React-Toastify/119 React-Toastify / 119

• API: Login/Register Endpoint/120 API: Login/Register Endpoint / 120

• ذخیره سازی جلسه/121 Session Storage / 121

• تغییر حالت کشویی (پنهان کردن)/122 Toggle Dropdown (Hide) / 122

• رابط سبد خرید/123 Cart Interface / 123

• سبد خرید: زمینه و کاهنده/124 Cart: Context and Reducers / 124

• سبد خرید: ارائه دهنده/125 Cart: Provider / 125

• افزودن به سبد خرید/126 Add to Cart / 126

• بررسی وضعیت: از قبل در سبد خرید/127 Condition Check: Already in Cart / 127

• محصولات خارج از انبار/128 Out of Stock Products / 128

• مسیرهای حفاظت شده/129 Protected Routes / 129

• پرداخت مدال/130 Checkout Modal / 130

• اخطار مقدار تعریف نشده/131 Undefined Value Warning / 131

• تابع ارسال سفارش/132 Order Submit Function / 132

• صفحه سفارش/133 Order Page / 133

• داشبورد: وضعیت 1/134 Dashboard: Condition 1 / 134

• داشبورد: وضعیت 2/135 Dashboard: Condition 2 / 135

• سرویس Auth: API End Points/136 Auth Service: API End Points / 136

• سرویس داده: API Endpoints/137 Data Service: API Endpoints / 137

• خدمات محصول: API End Points/138 Product Service: API End Points / 138

• صفحه یافت نشد/139 Page Not Found / 139

• عنوان صفحه پویا/140 Dynamic Page Title / 140

• رسیدگی به خطا/141 Error Handling / 141

• ENV/142 ENV / 142

• استقرار Frontend/143 Frontend Deployment / 143

• استقرار Backend/144 Backend Deployment / 144

• به روز رسانی متغیرهای محیطی/145 Update Environment Variables / 145

• به عنوان مهمان وارد شوید Login as Guest

• حل شد: Netlify Errors/147 Solved: Netlify Errors / 147

تکلیف: کلمه شمار Assignment: Word Counter

• بیانیه و دمو/157 Statement and Demo / 157

• راه حل: WordCount/158 Solution: WordCount / 158

React Testing Library و Jest React Testing Library and Jest

• مقدمه تست/148 Testing Introduction / 148

• React Testing Library and Jest/149 React Testing Library and Jest / 149

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

• ساختار آزمون/151 Testing Structure / 151

• تست: رندر کامپوننت/152 Test: Component Rendering / 152

• تست: رویدادهای آتش و رویدادهای کاربر/153 Test: Fire Events and User Events / 153

• پرس و جو، نوع، انتظار، و بیشتر/154 Queries, Type, Expect, and More / 154

• تست: API Async Loading/155 Test: API Async Loading / 155

• تست: Page Component Wrapper/156 Test: Page Component Wrapper / 156

دوره سقوط Firebase Firebase Crash Course

• معرفی Firebase Firebase Introduction

• راه اندازی پک وب/252 Webpack Setup / 252

• راه اندازی Firebase/253 Firebase Setup / 253

• اتصال Firebase/254 Firebase Connection / 254

• واکشی اسناد - I/255 Fetching Documents - I / 255

• واکشی اسناد- II/256 Fetching Documents- II / 256

• افزودن و حذف اسناد/257 Adding and Deleting Documents / 257

• عکس های فوری/258 Snapshots / 258

• پرسش های فایرستور/259 Firestore Queries / 259

• داده های سفارش/260 Ordering Data / 260

• به روز رسانی اسناد/261 Updating Documents / 261

• واکشی سند فردی/262 Fetching Individual Document / 262

• احراز هویت - I/263 Authentication - I / 263

• احراز هویت - II/264 Authentication - II / 264

پروژه وبلاگ: WriteNode Blog Project: WriteNode

• WriteNode Demo/159 WriteNode Demo / 159

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

• استایلینگ پروژه/161 Project Styling / 161

• صفحه اصلی/162 Homepage / 162

• راه اندازی Firebase/163 Firebase Setup / 163

• پیکربندی Firebase/164 Firebase Configuration / 164

• سربرگ احراز هویت مشروط/165 Conditional Auth Header / 165

• ایجاد پست وبلاگ/167 Create Blog Post / 167

• خطا: Object Fetch/168 Error: Object Fetch / 168

• تغییر وضعیت به روز رسانی/169 Toggle Update / 169

• عنوان صفحه پویا Dynamic Page Title

• React Loading Skeleton React Loading Skeleton

• استقرار پروژه/172 Project Deployment / 172