آموزش دوره جامع React JS به همراه هوش مصنوعی (Redux / Router / Tailwind CSS) - آخرین آپدیت

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

شروع کار Getting Started

• خوش آمدید! Welcome!

• دانلود منابع دوره Download Course Materials

• سلب مسئولیت Disclaimer

• راه‌اندازی محیط توسعه Set Up Development Environment

• پیکربندی VS Code Configure VS Code

• راهنمای گذراندن دوره How to Take the Course

مرور مبانی جاوااسکریپت Recapping the Basics of JS

• نحوه عملکرد توابع How Functions Work

• متد Find Find method (Метод find)

• ساختارشکنی (Destructuring) آرایه‌ها و اشیاء Destructuring Arrays and Objects

• عملگرهای Rest و Spread Rest & Spread Operators

• Template Literals Template Literals

• شرط If/Else و عملگر Ternary If/Else \ Ternary Operator

• عملگرهای منطقی (&&, ||, ??) Logical Operators (&&, ||, ??)

• زنجیره‌سازی اختیاری (Optional Chaining) Optional Chaining

• متد Map Map Method

• متد Filter Filter Method

• متد Reduce Reduce Method

• متد Sort Sort Method

• جاوااسکریپت ناهمگام — Promises Async JS – Promises

• جاوااسکریپت ناهمگام — Async/Await Async JS – Async/Await

مقدمه‌ای بر ری‌اکت: Props / Components / JSX Introduction to React: Props / Components / JSX

• ایجاد پروژه جدید ری‌اکت Creating a New React Project

• سلام ری‌اکت! Hello React!

• مقدمه‌ای بر کامپوننت‌ها Introduction to Components

• ایجاد عناصر ری‌اکت Create React Elements

• نحوه عملکرد JSX How JSX Works

• استفاده از JSX برای رندرینگ شرطی Using JSX for Conditional Rendering

• نحوه عملکرد CSS در ری‌اکت How CSS Works in React

• نحوه عملکرد مسیرها در Vite How Paths Work in Vite

• خلاصه: قوانین JSX Summary: JSX Rules

• نحوه عملکرد Props How Props Work

• تمرین: کار با Props Practice: Working with Props

• خلاصه: Props Summary: Props

• متد Map در ری‌اکت Map Method in React

• ساختارشکنی در Props Destructuring in Props

• ری‌اکت Fragment چیست What is React Fragment

• سه نوع رندرینگ شرطی Three Types of Conditional Rendering

• تمرین با عملگر Ternary Practice with Ternary Operator

• تمرین: کار با Props (بخش دوم) Practice: Working with Props (Part 2)

هوک useState و رویدادها useState & Events

• رویدادها در ری‌اکت Events in React

• نحوه عملکرد useState How useState Works

• به‌روزرسانی استیت بر اساس استیت قبلی Updating State Based on the Previous State

• تفاوت استیت و متغیرها State vs Variables

• برنامه‌نویسی Declarative در مقابل Imperative Declarative vs Imperative

• رندرینگ شرطی با useState Conditional Rendering with useState

• استفاده از onMouseEnter با useState onMouseEnter with useState

• ابزار React DevTools React DevTools

• تمرین: تب‌های استیت‌دار Practice: State Tabs

• تمرین: ماشین حساب Practice: Calculator

پروژه اول: لیست تسک‌ها Project #1: Task List

• بررسی کلی پروژه Project Overview

• ایجاد ساختار پروژه Creating the Project Structure

• رندرینگ شرطی برای باز و بسته کردن Conditional Rendering for Opening/Closing

• ایجاد آرایه تسک‌ها Creating Tasks Array

• ایجاد تسک‌های فعال Creating Active Tasks

• تکمیل قابلیت‌های تسک‌ها Finishing Up the Tasks Functionality

• ایجاد قابلیت مرتب‌سازی Creating the Sorting Functionality

ویژگی‌های مهم Props Important Features of Props

• ساختار فایل‌های یک اپلیکیشن ری‌اکت File Structure of a React Application

• ایجاد یک کامپوننت Universal Creating a Universal Component

• نحوه عملکرد PropTypes How PropTypes Work

• نحوه عملکرد Prop Children How the Children Prop Works

• مفهوم Prop Drilling چیست How Prop Drilling Works

• ترکیب کامپوننت‌ها (Component Composition) چیست What is Component Composition

• تکمیل کتابخانه UI Finishing the UI Library

• ارسال صریح کامپوننت Explicit Component Passing

• خلاصه بخش Section Summary

• تمرین: مودال جامع (Universal Modal) Practice: Universal Modal

هوک useEffect useEffect

• اتصال به API آب و هوا Connecting to Weather API

• استفاده از useState در منطق رندر useState in Render Logic

• اولین نگاه به useEffect A First Look at useEffect

• بررسی بیشتر منطق useEffect More useEffect Logic

• مدیریت خطا (بخش اول) Error Handling (Part 1)

• مدیریت خطا (بخش دوم) Error Handling (Part 2)

• استفاده از داده‌های API Using Data from API

• آرایه وابستگی‌ها (Dependency Array) در useEffect Dependency Array in useEffect

• استفاده از useEffect بدون آرایه وابستگی useEffect without Dependency Array

• افزودن منطق شرطی Adding Conditional Logic

• افزودن قابلیت مکان‌یابی (Geolocation) Adding Geolocation Functionality

• Side Effect چیست؟ What is a Side Effect?

• تابع Cleanup Cleanup Function

• وضعیت Race Condition Race Condition

• رویدادها برای کار با Side Effects Events for Working with Side Effects

• تمرین: تبدیل ارز (ساده) Practice: Currency Exchange (Simple)

• تمرین: لیست تسک‌ها همراه با تایمر Practice: Task List with Timer

پروژه دوم: ماشین حساب تبدیل ارز Project #2: Currency Exchange Calculator

• بررسی کلی پروژه Project Overview

• ساخت تبدیل ارز (بخش اول) Creating a Currency Exchange (Part 1)

• ساخت تبدیل ارز (بخش دوم) Creating a Currency Exchange (Part 2)

• ساخت تبدیل ارز (بخش سوم) Creating a Currency Exchange (Part 3)

تئوری‌های ضروری Necessary Theory

• بررسی کلی بخش Section Overview

• تفاوت کامپوننت‌های Class و Functional Class vs Functional Components

• کامپوننت‌ها، نمونه‌ها (Instances) و عناصر Components, Instances, Elements

• رندرینگ (Rendering) چیست What is Rendering

• DOM مجازی (Virtual DOM) چیست What is Virtual DOM

• درخت Fiber چیست What is Fiber Tree

• طرح رندرینگ Rendering Scheme

• مفهوم Memoization Memoization

• فاز Commit چیست What is Commit Phase

• نحوه عملکرد Prop Key How the Key Prop Works

• دسته‌بندی به‌روزرسانی‌های استیت (Batching) Batching State Updates

• مفاهیم Mount و Unmount Mount & Unmount

• تفاوت فریمورک و کتابخانه Framework vs Library

هوک useRef و هوک‌های سفارشی useRef & Custom Hooks

• مقایسه متغیر، useState و useRef Variable vs useState vs useRef

• استفاده از useRef برای دسترسی به عناصر useRef for Accessing Elements

• خلاصه useRef useRef Summary

• نحوه ساخت یک هوک سفارشی (Custom Hook) How to Create a Custom Hook

مسیریاب ری‌اکت (React Router) React Router

• راه‌اندازی پروژه Setting Up Project

• تنظیم مسیرهای صفحات (Routes) Setting Up Page Routes

• نحوه ایجاد لینک‌های مسیر How to Create Route Links

• نحوه عملکرد NavLink How NavLink Works

• تفاوت بین کامپوننت‌ها و صفحات Difference Between Components and Pages

• مسیرهای مطلق (Absolute) در مقابل نسبی (Relative) Absolute vs Relative Paths

• روش دوم رندر کردن کامپوننت در صفحه Second Way to Render a Component on a Page

• نحوه عملکرد کامپوننت Outlet How the Outlet Component Works

• نحوه عملکرد ویژگی Index How Index Attribute Works

• هوک useParams useParams Hook

• رندرینگ شرطی: محصول Conditional Rendering: Product

• نحوه عملکرد هوک useSearchParams How useSearchParams Hook Works

• استفاده از Query String در پروژه Using Query String in Our Project

• نحوه عملکرد هوک useLocation How useLocation Hook Works

• نحوه عملکرد هوک useNavigate How useNavigate Hook Works

• نحوه عملکرد کامپوننت <Navigate /> How the <Navigate /> Component Works

• ویژگی‌های اضافی لینک Additional Link Attributes

• مقایسه Link ، Navigate و useNavigate Link vs Navigate vs useNavigate

• سینتکس قدیمی در مقابل سینتکس جدید Old Syntax vs New Syntax

• تمرین: React Router DOM Practice: React Router DOM

تایل‌ویند و CSS Modules Tailwind & CSS Modules

• بررسی کلی بخش Section Overview

• نحوه عملکرد CSS Modules How CSS Modules Work

• راه‌اندازی Tailwind Setting Up Tailwind

• رنگ‌ها در Tailwind Colors in Tailwind

• نحوه ایجاد پالت رنگ شخصی How to Create Your Own Color Palette

• کار با متن‌ها Working with Text

• Padding / Margin / Height / Width Padding / Margin / Height / Width

• Display و فاصله‌گذاری فرزندان Display & Child Spacing

• Flexbox در Tailwind Flexbox in Tailwind

• CSS Grid در Tailwind Grid CSS in Tailwind

• جای‌گذاری مطلق (Absolute Positioning) Absolute Positioning

• گرادینت‌ها و سفارشی‌سازی تم Gradients & Customizing Theme

• ترکیب کلاس‌ها با استفاده از @apply Combining Classes Using @apply

• ایجاد کامپوننت‌های UI به جای @apply Creating UI Components Instead of @apply

• شیء State در NavLink NavLink State Object

• افزودن فونت‌های سفارشی Adding Custom Fonts

• نحوه عملکرد طراحی ریسپانسیو How Responsive Design Works

• Pseudo classes و کلاس Group Pseudo-classes and the Group Class

• نحوه عملکرد کلاس Peer How the Peer Class Works

• انیمیشن‌ها در Tailwind Animations in Tailwind

• نحوه استفاده از پلاگین‌ها How to Use Plugins

• تکمیل پروژه Finishing the Project

• تکمیل پروژه (بخش دوم) Finishing the Project (Part 2)

• تکمیل پروژه (بخش سوم) Finishing the Project (Part 3)

مسیریاب همراه با بارگذاری داده‌ها Router with Data Loading

• بارگذاری داده‌ها قبل از Router 6.4 Data Loading Before Router 6.4

• روش جدید بارگذاری داده‌ها New Way of Data Loading

• روش جدید مدیریت خطاها New Way of Error Handling

• استفاده از useNavigation برای وضعیت Loading useNavigation for Loading State

• ارسال داده‌ها با Action Sending Data with Action

• تمرین: بارگذاری داده‌های Router (بخش اول) Practice: Router Data Loading (Part 1)

• تمرین: بارگذاری داده‌های Router (بخش دوم) Practice: Router Data Loading (Part 2)

• تمرین: بارگذاری داده‌های Router (بخش سوم) Practice: Router Data Loading (Part 3)

سیستم Context API Context API

• جمع‌بندی نتایج دوره Summing Up the Course Results

• نحوه عملکرد Context API How the Context API Works

• تمرین: Context API در لیست تسک‌ها Practice: Context API with Task List

• ترکیب Context API و Prop Children Context API + Children Prop

• اشتباهات رایج احتمالی A Small Mistake You Might Make

• هوک سفارشی برای useContext Custom Hook for useContext

هوک useReducer useReducer Hook

• نحوه عملکرد عملگر Switch How the Switch Operator Works

• پیاده‌سازی مدل useState useState Variant Implementation

• اولین نگاه به هوک useReducer First Look at useReducer Hook

• آموزش گام به گام useReducer useReducer Step by Step

• مفهوم Payload در Dispatch Payload in Dispatch

• استفاده از شیء در Initial State Object in Initial State

• بررسی بیشتر منطق useReducer More useReducer Logic

• تمرین: هوک useReducer Practice: useReducer Hook

• استفاده از useReducer با بارگذاری داده‌ها (بخش اول) useReducer with Data Loading (Part 1)

• استفاده از useReducer با بارگذاری داده‌ها (بخش دوم) useReducer with Data Loading (Part 2)

• استفاده از useReducer با بارگذاری داده‌ها (بخش سوم) useReducer with Data Loading (Part 3)

• استفاده از useReducer با بارگذاری داده‌ها (بخش چهارم) useReducer with Data Loading (Part 4)

• استفاده از useReducer با بارگذاری داده‌ها (بخش پنجم) useReducer with Data Loading (Part 5)

رداکس همراه با Thunks Redux with Thunks

• بررسی کلی پروژه Project Overview

• استیت اولیه و تابع Reducer Initial State & Reducer Function

• مفهوم Store و Provider Store & Provider

• استفاده از تابع Dispatch Using Dispatch Function

• هوک useSelector useSelector Hook

• بازنویسی (Refactoring) تابع Action Refactoring Action Function

• اکشن حذف کاربران Deleting Users Action

• نحوه عملکرد Redux Thunk How Redux Thunk Works

• استفاده از چندین Reducer در اپلیکیشن Many Reducers in the App

رداکس مدرن با RTK RTK Modern Redux

• نصب Redux Toolkit Installing Redux Toolkit

• ایجاد Store (JS) Creating Store (JS)

• ایجاد اولین Slice Creating the First Slice

• استفاده از Actionها در RTK Using Actions in RTK

• تمرین: افزودن قابلیت‌ها Practice: Adding Functionality

• افزونه Redux Dev برای مرورگر Redux Dev Extension for Browser

• بارگذاری کاربران با createAsyncThunk Loading Users with createAsyncThunk

• مدیریت خطا با createAsyncThunk Error Handling with createAsyncThunk

• قابلیت‌های اضافی createAsyncThunk Additional Capabilities of createAsyncThunk

• تمرین: تکمیل اپلیکیشن Practice: Finishing the App

بهینه‌سازی عملکرد Performance Optimization

• ابزارهای توسعه: Profiler Dev Tools: Profiler

• نحوه عملکرد هوک useMemo How the useMemo Hook Works

• نحوه عملکرد هوک useCallback How the useCallback Hook Works

• استفاده از Prop Children در تابع Memo The Children Prop inside the Memo Function

• بارگذاری تنبل (Lazy Loading) Lazy Loading

• استفاده از Suspense برای نمایش وضعیت Loading Suspense for Displaying the Loading Status

استقرار پروژه (Deployment) Project Deployment

• هش کردن تصاویر (Image Hashing) Image Hashing

• دستور npm run build npm run build

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

پایان The end

• در درس‌ها می‌بینمتان! See you in the lessons!