آموزش دوره Ultimate React JS 2024: اصول اولیه برای Advanced React

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

معرفی React Introduction of React

• React چیست؟ What is React?

• آشنایی با DOM مجازی در React (مهم) Understanding Virtual DOM in React (Important)

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

• ساخت React Application Creating React Application

• بیایید قالب React را درک کنیم Let's understand the React template

• نوشتن کد از ابتدا Writing Code from Scratch

JavaScript ES6 Refresher (مفاهیم مهم جاوا اسکریپت) JavaScript ES6 Refresher (Important concepts of JavaScript )

• معرفی این بخش Introduction of this Section

• Var vs Let vs Const Var vs Let vs Const

• تابع پیکان Arrow Function

• دسترسی به اشیاء Accessing the Objects

• تخریب شی Object Destructuring

• روش نقشه [مهم] map method [IMPORTANT]

• روش فیلتر filter method

• اپراتور گسترش Spread Operator

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

• ماژول ها در جاوا اسکریپت [مهم] Modules in JavaScript [IMPORTANT]

• صادرات پیش‌فرض [مهم] Export Default [IMPORTANT]

• بخش 2 خلاصه JavaScript ES6 Section 2 JavaScript ES6 Summary

React Basics Concepts React Basics Concepts

• معرفی این بخش Introduction of this Section

• راه اندازی پروژه جدید Setting up New Project

• جزء خود را بسازید Build your own component

• تمرین برای ایجاد کامپوننت React Exercise for Creating React Component

• راه حل این تمرین Solution of this exercise

• JSX و Babel چگونه کار می کنند How JSX and Babel works

• افزودن عناصر در کامپوننت Adding Elements in Component

• عبارت جاوا اسکریپت در JSX JavaScript expression in JSX

• تنظیم ویژگی های عناصر Setting Elements Attributes

• رویدادها در React Events in React

• ایالت چیست؟ What is State?

• قلاب های React چیست؟ What are React hooks?

• از Hook State در React استفاده کنید useState hook in React

• مدیریت ورودی های کاربر Handling user inputs

• فهرست نقشه برداری Mapping List

• خلاصه بخش 3 - مفاهیم اولیه React Section 3 Summary - React Basics Concepts

پروژه 01 - برنامه TaskTrek Project 01 - TaskTrek Application

• معرفی این بخش Introduction of this Section

• بررسی اجمالی و برنامه ریزی پروژه Project Overview and Planning

• ایجاد طرح بندی وب سایت Creating the Website Layout

• ایجاد کامپوننت Task Form Creating Task Form Componen

• اضافه کردن سبک برای کامپوننت فرم Adding styles for Form Component

• ایجاد کامپوننت برچسب Creating Tag component

• Props در React Props in React

• ساخت جزء لیست وظایف Building Task List Component

• راه حل تمرین Solution of the Exercise

• ساخت مؤلفه TaskCard Building TaskCard Component

• بخش 04 - خلاصه Section 04 - Summary

پروژه 01 - افزودن قابلیت در برنامه TaskTrek Project 01 - Adding Functionality in TaskTrek Application

• معرفی این بخش Introduction of this Section

• فرم رسیدگی Handling Form

• ترفند میانبر برای رسیدگی به فرم های پیچیده Shortcut trick to handle complex form

• React Strict Mode React Strict Mode

• مدیریت انتخاب برچسب Handling Tag Selection

• نمایش برچسب انتخاب شده در UI Display selected Tag on UI

• نمایش کارت های وظیفه Displaying the Task Cards

• حذف تک کار Deleting single task

• ذخیره وظایف در Local Storage Saving tasks in Local Storage

• اصول استفاده از قلاب اثر Basics of useEffect hook

• اضافه کردن فونت های سفارشی Adding custom fonts

• اتمام پروژه Wrapping up Project

• بخش 05 - خلاصه Section 05 - Summary

پروژه 02 - ساخت اپلیکیشن MovieManiac Project 02 - Building MovieManiac Application

• معرفی این بخش Introduction of this Section

• راه اندازی پروژه و سبک طرح بندی جدید Setting up New Project & Layout Style

• اضافه کردن فونت های سفارشی Adding Custom Fonts

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

• ساخت مؤلفه فهرست فیلم Building MovieList Component

• ساخت مؤلفه MovieCard Building MovieCard Component

• سبک دادن به مؤلفه MovieCard Styling the MovieCard Component

• API چیست؟ | دوره واکنش What is an API? | React Course

• ثبت و تولید کلید API Register & Generating the API key

• فراخوانی API با استفاده از روش Fetch Calling API using Fetch Method

• تمرین برای فراخوانی API Exercise for calling API

• راه حل این تمرین Solution of this Exercise

• بخش 06 - خلاصه Section 06 - Summary

پروژه 02 - افزودن قابلیت هایی مانند فیلتر کردن، مرتب سازی و حالت تاریک Project 02 - Adding Functionality like Filtering, Sorting & Dark Mode

• معرفی این بخش Introduction of this Section

• فیلتر در مقابل مرتب سازی Filter vs Sort

• پیاده سازی ویژگی فیلتر Implementing Filter Feature

• ایجاد ویژگی فیلتر قابل استفاده مجدد Creating Reusable Filter Feature

• مدیریت انتخاب مرتب سازی Handling Sorting Selection

• اشکال زدایی برنامه React Debugging React Application

• پیاده سازی ویژگی مرتب سازی Implementing Sorting Feature

• اضافه کردن سوئیچ برای حالت تاریک Adding Switch for Dark-light Mode

• تغییر وضعیت آموزش سوئیچ با HTML و CSS Toggle Switch Tutorial with HTML and CSS

• پیاده سازی حالت تاریک Dark Mode Implementation

• ساختن مولفه MovieList قابل استفاده مجدد Making MovieList component Reusable

React Routing - اصول اولیه تا پیشرفته React Routing - Basics to Advanced

• معرفی این بخش Introduction of this Section

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

• اضافه کردن مسیریابی برای برنامه Adding Routing for Application

• افزودن صفحه یافت نشد Addingg Not-Found Page

• ساخت اپلیکیشن تک صفحه ای Making Single Page Application

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

• رشته پرس و جو Query String

• مسیریابی تودرتو در روتر React Nested Routing in React Router

• ناوبری برنامه نویسی Programmatically Navigation

• تمرین برای مسیریابی Exercise for Routing

• اضافه کردن مسیریابی به پروژه ما Adding Routing to our project

• تعریف پارامتر مسیر برای تک فیلم Defining Route Parameter for Single Movie

فراخوانی API و رسیدگی به خطا Calling an API & Error Handling

• معرفی این بخش Introduction of this Section

• استفاده از قلاب اثر در جزئیات useEffect hook in Details

• وابستگی های useEffect Dependencies of useEffect

• عملکرد پاکسازی useEffect useEffect Clean up Function

• اصول اولیه درخواست های HTTP Basics of HTTP Requests

• واکشی داده های فروشندگان Fetching Sellers data

• اضافه کردن نشانگر بارگذاری Adding Loading indicator

• رسیدگی به خطاها Handling Errors

• رسیدگی به Promise با Async در انتظار است Handling Promise with Async await

• افزودن فروشنده جدید Adding new Seller

• حذف فروشنده Deleting the Seller

• تمرین - برای فراخوانی API Exercise - for calling API

• راه حل - برای به روز رسانی فروشنده Solution - for updating the Seller

• ایجاد متغیر axios برای درخواست HTTP Making axios variable for HTTP request

پروژه 03 - ساخت اپلیکیشن تجارت الکترونیک Project 03 - Building e-Commerce application

• معرفی پروژه 03 Introduction of Project 03

• راه‌اندازی سبک پروژه و طرح‌بندی جدید Setting up new Project & Layout style

• ساخت مؤلفه نوار ناوبری Building Navbar Component

• افزودن پیوندهای نوار ناوبری Adding Navbar Links

• بخش قهرمان ساختمان برای خانه Building Hero Section for Home

• افزودن بخش محصولات ویژه Adding Featured Products section

• ایجاد کارت محصول Creating Product Card

• صفحه محصول ساخت Building Product Page

• ایجاد بخش لیست محصولات Creating Product List Section

• ایجاد مولفه واحد محصول Creating Single Product Component

• شی محصول را از اینجا کپی کنید Copy Product Object from here

• افزودن بخش جزئیات برای محصول Adding Details Section for Product

• ساخت مؤلفه CartPage Building CartPage component

• ایجاد جزء جدول مشترک Creating Common Table Component

• اصلاح مولفه صفحه سبد خرید Modify Cart Page Component

• ساخت صفحه MyOrder Building MyOrder Page

پروژه 03 - فرم پیشرفته در React Project 03 - Advanced Form in React

• معرفی این بخش Introduction of this Section

• فرم ورود ساختمان Building Login Form

• درک userRef قلاب Understanding useRef hook

• رسیدگی به فرم با استفاده از قلاب userRef Handling Form using useRef hook

• رسیدگی به فرم با استفاده از قلاب حالت Handling Form using State hook

• مدیریت FForm با React Hook Form Managing FForm with React Hook Form

• اعتبار سنجی فرم Form Validation

• اعتبار سنجی فرم بر اساس طرحواره Form Validation based on Schema

• تمرین برای فرم ها Exercise for Forms

• راه حل این تمرین Solution of this Exercise

• مدیریت آپلود تصویر Handling Image Upload

پروژه 03 - اتصال به Backend، صفحه بندی و پیمایش بی نهایت Project 03 - Connection to the Backend, Pagination & Infinite Scrolling

• معرفی این بخش Introduction of this Section

• نصب MongoDB Compass در ویندوز Installing MongoDB Compass in Windows

• نصب MongoDB Compass در مک Installing MongoDB Compass in Mac

• راه اندازی Backend Setting up Backend

• پیاده سازی مسیریابی در برنامه ما Implementing Routing in our Application

• واکشی محصولات Fetching Producs

• ساخت پویا کارت محصول Making Product Card Dynami

• واکشی دسته ها Fetching Categories

• ایجاد قلاب سفارشی واکشی Creating Fetching Custom Hook

• اضافه کردن اسکلت بارگیری Adding Loading skeleton

• واکشی محصولات بر اساس دسته بندی Fetching Products by category

• صفحه بندی در React Pagination in React

• ایجاد رابط کاربری صفحه‌بندی Creatingg Pagination UI

• اسکرول بی نهایت در React Infinite Scrolling in React

• تمرین- صفحه محصول واحد Exercise- Single Product Page

• راه حل این تمرین Solution of this Exercise

پروژه 03 - احراز هویت - ثبت نام، ورود و خروج Project 03 - Authentication - Signup, Login and Logout

• معرفی این بخش Introduction of this section

• ثبت نام کاربر جدید API Register new user API

• اتصال صفحه ثبت نام با API Connecting Signup Page with API

• رسیدگی به خطاها برای ثبت نام Handling Errors for Signup

• وارد API کاربر شوید Login a user API

• اتصال صفحه ورود با API Connecting Login Page with API

• JWT چیست و چگونه کار می کند؟ What is JWT & How it works?

• ذخیره سازی JSON Web Token Storing the JSON Web Token

• گرفتن کاربر از Token Getting user from Token

• مخفی کردن/نمایش مولفه بسته به کاربر Hide/Show component depending on User

• پیاده سازی عملکرد خروج Implementing Logout functionality

• کد را ساده کنید Simplify the code

پروژه 03 - فراخوانی APIهای محافظت شده و مسیرهای محافظت شده Project 03 - Calling Protected APIs & Protected Routes

• معرفی این بخش Introduction of this Section

• درک ویژگی افزودن به سبد خرید Understanding Add to cart Feature

• افزودن به سبد خرید کارکرد Add to cart Functionality

• Calling Protected API Calling Protected API

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

• واکشی سبد کاربر از Backend Fetching User Cart From Backend

• useContext hook useContext hook

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

• حذف اقلام از سبد خرید Removing Items from Cart

• افزایش و کاهش مقدار محصول Increase and Decrease Product Quantity

• افزودن به سبد خرید در کارت محصول Add to Cart in Product Card

• فراخوانی API برای پرداخت Calling API for Checkout

• تمرین - گرفتن سفارشات کاربران Exercise - getting users orders

• راه حل این تمرین Solution for this exercise

• ایجاد مسیرهای محافظت شده Creating Protected Routes

• پس از ورود به صفحه محافظت شده قبلی هدایت شوید Redirect to previous Protected Page after login

پروژه 03 - تکمیل و استقرار Project 03 - Wrapping up and Deployment

• معرفی این بخش Introduction of this Section

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

• واکشی محصولات با پرس و جوی جستجو Fetching Products by Search Query

• پیشنهاد خودکار در نوار جستجو Auto Suggestion in Search Bar

• پیمایش برای پیشنهاد خودکار Navigation for Auto Suggestion

• روش انحرافی برای فراخوانی پیشنهادات API Debouncing Method for Calling Suggestions API

• مرتب سازی لیست محصولات Sorting Product List

• آغاز استقرار Beginning of Deployment

• افزودن ابر MongoDB Adding MongoDB cloud

• نحوه آپلود پروژه ها در Github How to upload projects on Github

• استقرار Backend Deploying Backend

• در حال آماده سازی برنامه React ما برای استقرار Preparing our React application for deployment

• استقرار برنامه React Deploying React application

بهبود عملکرد و مدیریت کد با استفاده از React Hooks Improving Performance and Code Management using React Hooks

• معرفی این بخش Introduction of this Section

• درک useMemo hook Understanding useMemo hook

• تمرین برای استفاده از قلاب یادداشت Exercise for useMemo hook

• درک استفاده از قلاب برگشت تماس Understanding useCallback hook

• نحوه استفاده از قلاب useCallback How to use useCallback hook

• تمرین برای استفاده از قلاب برگشت تماس Exercise for useCallback hook

• استفاده از قلاب کاهش دهنده useReducer hook

• تمرین برای استفاده Reducer hook Exercise for useReducer hook

• اقدامات پیچیده در useReducer hook Complex Actions in useReducer hook

تسلط بر پرس و جو واکنش پیشرفته [Caching و Mutations] Mastering Advanced React Query [Caching and Mutations]

• معرفی این بخش Introduction of this section

• React Query چیست و چرا به آن نیاز داریم؟ What is React Query and Why we need it?

• راه اندازی React Query در پروژه ما Setting up React Query in our Project

• واکشی داده های فروشندگان Fetching Sellers Data

• مدیریت خطا و بارگیری Error Handling & Loading

• ایجاد قلاب سفارشی با React Query Creating custom hook with React Query

• افزودن React Query DevTools Adding React Query DevTools

• ویژگی های React Query ما را سفارشی کنید Customize our React Query Properties

• تمرین برای واکشی داده ها Exercise for Fetching Data

• درک پارامترهای Query در React Query Understanding Query Params in React Query

• صفحه بندی در React Query Pagination in React Query

• اسکرول بی نهایت در React Query Infinite Scrolling in React Query

• استفاده از قلاب Mutation برای Mutation useMutation hook for Mutation

• فروشندگان را حذف و به روز کنید Delete and Update Sellers

• مدیریت خطا در جهش Handling Error in Mutation

• نمایش پیشرفت در طول جهش Showing Progress During Mutations

• به روز رسانی خوش بینانه در React Query Optimistic update in React Query

• قلاب سفارشی برای AddSellers Mutation Custom hook for AddSellers Mutation

بهبود عملکرد وب سایت با React Query Improving Website Performance with React Query

• معرفی این بخش Introduction of this section

• آیا واقعاً برای پروژه خود به React Query نیاز دارید؟ Do you really need React Query for your Project?

• راه اندازی React Query Setting up React Query

• واکشی داده با استفاده از useQuery Fetching Data using useQuery

• پیاده سازی Infinite Query Implementing Infinite Query

• آیا باید حافظه پنهان را در AutoSuggestions اضافه کنیم؟ Should we add caching in AutoSuggestions?

• کد برای پیشنهادات خودکار با ذخیره سازی Code for Auto Suggestions with Caching

• در حال به روز رسانی درخواست getCart Updating getCart Query

• جهش برای افزودن به سبد خرید Mutation for Add to Cart

• جهش برای حذف از سبد خرید Mutation for Remove from Cart

• جهش برای افزایش و کاهش Mutation for Increase and Decrease

• بعد چه می شود؟ What's Next?

• پاداش برای شما Bonus For YOU