آموزش جامع ReactJS - دوره مسترکلاس برای مبتدیان - آخرین آپدیت

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

مقدمه Introduction

• درس ۱ - مقدمه و پیش‌نیازهای دوره Lesson 1 - Introduction and Course Prerequisites

• درس ۲ - ساخت یک اپلیکیشن ساده ری‌اکت به سرعت Lesson 2 - Build a Simple React App - Fast

• درس ۳ - نهایی‌سازی اپلیکیشن سگ‌های تصادفی Lesson 3 - Finalizing the Random Dog App

مبانی ری‌اکت React Fundamentals

• درس ۱ - درک تفاوت روش‌های قدیمی و جدید ساخت وب‌اپلیکیشن (SPAs) Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs

• درس ۲ - انگیزه استفاده از ری‌اکت به عنوان راهکار جایگزین Vanilla JS Lesson 2 - Motivation for Using React as the Solution to Vanilla JS

• درس ۳ - ری‌اکت چیست و چگونه کار می‌کند Lesson 3 - What is ReactJS - How it Works

• درس ۴ - راه‌اندازی محیط توسعه (VS Code، مرورگر کروم و نصب Nodejs) Lesson 4 - Setup Dev Environment - VS Code-Chrome Browser & Install Nodejs

• درس ۵ - نصب افزونه‌های کاربردی برای VS Code Lesson 5 - Installing Important Extensions - VS Code

• درس ۶ - ایجاد و اجرای پروژه ری‌اکت با Vite (بررسی کامل) Lesson 6 - Create and Run a React Project with Vite - Full Overview

• درس ۷ - بررسی فایل‌ها و پوشه‌های پروژه ری‌اکت Lesson 7 - React Project File and Folder Walkthrough

• درس ۸ - ساخت اولین کامپوننت در ری‌اکت Lesson 8 - Create our First Component in React

• درس ۹ - بررسی JSX و نحوه تعامل ری‌اکت با DOM Lesson 9 - JSX and How React Treats the DOM - Overview

• درس ۱۰ - Babeljs و تبدیل JSX به جاوااسکریپت Lesson 10 - Babeljs - JSX Compiled to JavaScript

• درس ۱۱ - درک فایل‌های اصلی پروژه (app، main و index) Lesson 11 - Understanding the Main Files - app-main and index

• درس ۱۲ - نوشتن کدهای جاوااسکریپت درون JSX - کامپوننت کتاب Lesson 12 - Writing JavaScript Inside of JSX Code - Book Component

• درس ۱۳ - مقدمه‌ای بر Props و بازنویسی کامپوننت کتاب برای استفاده از آن‌ها Lesson 13 - Introduction to Props - Refactor Book Component to Use Props

• درس ۱۴ - افزودن آرایه‌ای از کتاب‌ها و دریافت داده‌ها به صورت دستی Lesson 14 - Adding an Array of Books & Pulling Data from that Array - Manually

• درس ۱۵ - استفاده از تابع Map برای پیمایش لیست کتاب‌ها و نمایش آن‌ها Lesson 15 - Using the Map Function to Loop Through a List of Books and Show Them

• درس ۱۶ - درک مفهوم Key در ری‌اکت Lesson 16 - Understanding the React Key Prop

• درس ۱۷ - بررسی Props و جریان یک‌طرفه داده‌ها (One-way Data Flow) Lesson 17 - Props and One-Way Data Flow - Overview

• درس ۱۸ - دیکانستراکشن (Destructuring) در Props Lesson 18 - Destructuring Props

• درس ۱۹ - خلاصه بخش اول - مقدمات و اصول ری‌اکت Lesson 19 - Section Summary - React Basics and Introduction

• درس ۲۰ - چالش کارت پروفایل کاربر و راه حل آن Lesson 20 - UserProfile Card Challenge and Solution

مدیریت استیت و استایل‌دهی در ری‌اکت React State and Styling

• درس ۱ - مقدمه‌ای بر مدیریت استیت، فرم‌ها و تعاملات در ری‌اکت Lesson 1 - Introduction to State Management, Forms and Interactivity in React

• درس ۲ - ساختاردهی مجدد پروژه - ایجاد پوشه Components و جدا کردن کامپوننت‌ها Lesson 2 - Restructuring the Project - Create a Components Folder and Add Book and UserProfile Components into Separate Files

• درس ۳ - فراخوانی داده‌های کتاب از فایل داده مجزا Lesson 3 - Pulling Book Data from a Different Data File

• درس ۴ - مقدمه‌ای بر استیت (State) و روش اشتباه تغییر آن Lesson 4 - Introduction to State in React - The Wrong Way to Change State

• درس ۵ - استفاده از هوک useState برای رفع مشکل مدیریت استیت Lesson 5 - Using React Hook useState to Fix the State Management Issue

• درس ۶ - بررسی کلی نحوه عملکرد استیت در ری‌اکت Lesson 6 - Overview of How State Works in React

• درس ۷ - راه‌اندازی اپلیکیشن نقل‌قول تصادفی Lesson 7 - Random Quote App - Setup

• درس ۸ - تکمیل نهایی اپلیکیشن نقل‌قول تصادفی Lesson 8 - RandoQuote App - Thorough Setup - Final Product

• درس ۹ - مرور نحوه عملکرد استیت در ری‌اکت Lesson 9 - How State Works in React - Review

• درس ۱۰ - استایل‌دهی به کامپوننت‌ها - بررسی فایل‌های CSS پروژه Lesson 10 - Styling our Components - Overview of CSS Files in our Project

• درس ۱۱ - نصب Bootstrap و استفاده از آن در اپلیکیشن نقل‌قول Lesson 11 - Installing Bootstrap and Using it in Quotes App

• درس ۱۲ - افزودن استیت جدید (رنگ تصادفی) Lesson 12 - Adding Another Piece of State - Random Color

• درس ۱۳ - بالا بردن استیت (Lifting State Up) و بررسی الگوهای ری‌اکت Lesson 13 - Lifting State Up - React Pattern Overview

• درس ۱۴ - تمرین عملی بالا بردن استیت در اپلیکیشن نقل‌قول Lesson 14 - Lifting State Up - Hands-On - RandomQuote

• درس ۱۵ - تمرین عملی بالا بردن استیت در یک شمارنده ساده Lesson 15 - Lift State Up - Hands-On - Simple Counter

فرم‌ها و تعاملات - اپلیکیشن لیست خرید Forms and Interactivity - Grocery List App

• درس ۱ - فرم‌ها Lesson 1 - Forms

• درس ۲ - راه‌اندازی فرم و ورودی ساده Lesson 2 - Setup a Simple Form and Input

• درس ۳ - فرم و متد preventDefault Lesson 3 - Form and preventDefault Method

• درس ۴ - فرم و عناصر کنترل شده (Controlled Elements) Lesson 4 - Form - Controlled Elements

• درس ۵ - افزودن داده‌های ورودی به لیست استیت و نمایش آن‌ها Lesson 5 - Adding Form Input Data into a State List and Show the List Items on Page

• درس ۶ - راه‌اندازی فرم چند ورودی - تمرین عملی Lesson 6 - Multi-Input Form Setup - Hands-On

• درس ۷ - تنظیم داده‌های فرم چند ورودی و مدیریت رویداد handleChange Lesson 7 - Setting Up Multi-Form Input Data and the handleChange Event Handler

• درس ۸ - مدیریت Submit و افزودن اعتبار سنجی و نمایش کارت اطلاعات کاربر Lesson 8 - OnHandle Submit - Add Simple Validation and Show the Card with Person Data

• درس ۹ - معرفی پروژه: ساخت اپلیکیشن لیست خرید Lesson 9 - Hands-On: What We'll Be Building - GroceryList App - Demo

• درس ۱۰ - تمرین عملی: کامپوننت لیست خرید و نمایش داده‌های آزمایشی Lesson 10 - Hands-On - GroceryList Component - Adding Fake Data and Showing a List

• درس ۱۱ - ساخت کامپوننت‌های فوتر و نوبار Lesson 11 - Creating the Footer and Nav Components

• درس ۱۲ - استایل‌دهی به آیتم‌های لیست خرید Lesson 12 - Styling the GroceryList Item

• درس ۱۳ - افزودن فرم لیست خرید Lesson 13 - Add Grocery Form

• درس ۱۴ - رفع مشکلات پاکسازی فرم Lesson 14 - Fixing Clear Form Issues

• درس ۱۵ - افزودن آیکون‌های Bootstrap Lesson 15 - Adding Bootstrap Icon

• درس ۱۶ - ارسال تابع toggleBought به عنوان Prop - بخش اول Lesson 16 - Passing the toggleBought as a Prop - Part 1

• درس ۱۷ - پیاده‌سازی قابلیت انتخاب و تست در کنسول Lesson 17 - Implementing the Toggling - Testing in the Console - It Works

• درس ۱۸ - تغییر رنگ دایره و خط‌خوردگی متن هنگام کلیک Lesson 18 - Changing the Circle Color and Item Text When Clicked - Strikethrough

• درس ۱۹ - افزودن تابع handleRemoveItem برای حذف آیتم‌ها Lesson 19 - Adding the handleRemoveItem Prop and Function to Remove an Item

• درس ۲۰ - افزودن آمار در کامپوننت فوتر Lesson 20 - Adding Stats in the Footer Component

• درس ۲۱ - جمع‌بندی مبحث فرم‌ها Lesson 21 - Form - Section Summary

اتصال به بک‌اند - استفاده از APIها - هوک UseEffect Connecting to the Backend - Consuming APIs - UseEffect Hook

• درس ۱ - اتصال به بک‌اند - درک عوارض جانبی، هوک‌ها و useEffect Lesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - Overview

• درس ۲ - روش اشتباه دریافت داده از سرور Lesson 2 - Fetching Data from a Server the Wrong Way

• درس ۳ - روش صحیح دریافت داده از بک‌اند با استفاده از هوک useEffect Lesson 3 - Fetching Data from the Backend the Right Way with useEffect Hook

• درس ۴ - تنظیم وضعیت بارگذاری (Loading State) Lesson 4 - Setting Up Loading State

• درس ۵ - استفاده از آرایه وابستگی (Dependency Array) و مدیریت عوارض جانبی Lesson 5 - Use Dependency Array and Adding Values that Control Side Effects - Hands-On

ساخت اپلیکیشن جستجوی کتاب Build a BookSearch App

• درس ۱ - مقدمه‌ای بر فرم‌ها در ری‌اکت Introduction to Forms in React - Overview

• درس ۲ - تنظیم کامپوننت نوبار Lesson 2 - Setup NavBar Component

• درس ۳ - ایجاد کامپوننت فوتر Lesson 3 - Create Footer Component

• درس ۴ - فراخوانی کتاب‌ها از API Lesson 4 - Pulling in Books from API

• درس ۵ - تنظیم جستجوی URL Lesson 5 - Setup the URL Search Query

• درس ۶ - تنظیم نوار جستجو و Props Lesson 6 - Setup SearchBar and Props

• درس ۷ - اطمینان از به‌روزرسانی صحیح جستجو - عیب‌یابی Lesson 7 - Making Sure The SearchTerm is Updating Correctly - Debugging

• درس ۸ - نمایش کتاب‌ها در صفحه Lesson 8 - Showing Books on Screen

• درس ۹ - افزودن وضعیت بارگذاری Lesson 9 - Adding Loading State

• درس ۱۰ - پاکسازی فرم جستجو Lesson 10 - Clearing the Search Form

• درس ۱۱ - تنظیم فایل api client و پیاده‌سازی fetchBooks Lesson 11 - Setup the api-client File and Implementing fetchBooks

• درس ۱۲ - هوک‌های سفارشی و ساخت هوک useBooks Lesson 12 - Custom Hooks and Creating a Custom Hook - useBooks

• درس ۱۳ - افزودن رابط AbortController Lesson 13 - Adding the AbortController Interface

• درس ۱۴ - کامپوننت جزئیات کتاب - بخش اول Lesson 14 - Book Detail Component - Part 1

• درس ۱۵ - رندر شرطی با عملگر && و تست کتاب انتخابی Lesson 15 - Conditional Rendering with && - Testing SelectedBook

• درس ۱۶ - نمایش جزئیات کتاب در مودال Lesson 16 - Show Book Details in a Modal - Working

• درس ۱۷ - مدیریت فیلدهای خالی در API کتاب‌ها Lesson 17 - Handling Missing Books API Missing Fields

استقرار و انتشار پروژه Deployment

• درس ۱ - ساخت و راه‌اندازی Vercel و انتشار اپلیکیشن Lesson 1 - Build and Setup Vercel and Deploy the App

• درس ۲ - اتصال به مخزن GitHub و خودکارسازی استقرار Lesson 2 - Connecting to GitHub Repo and Automate Deployment

• درس ۳ - اپلیکیشن کتابخانه و جمع‌بندی بخش Lesson 3 - Bookshelf App and Section Summary

جمع‌بندی نهایی Wrap Up

• جمع‌بندی نهایی دوره Course Wrap Up