آموزش ReactJS - Masterclass مبتدی [ویدئو]

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

معرفی Introduction

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

• درس 2 - ساخت یک برنامه واکنش ساده - سریع Lesson 2 - Build a Simple React App - Fast

• درس 3 - نهایی کردن برنامه Random Dog Lesson 3 - Finalizing the Random Dog App

React Fundamentals React Fundamentals

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

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

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

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

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

• درس 6 - ایجاد و اجرای یک React Project با Vite - نمای کلی Lesson 6 - Create and Run a React Project with Vite - Full Overview

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

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

• درس 9 - JSX و نحوه برخورد با DOM - بررسی اجمالی Lesson 9 - JSX and How React Treats the DOM - Overview

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

• درس 11 - درک فایل های اصلی - app-main و index Lesson 11 - Understanding the Main Files - app-main and index

• درس 12 - نوشتن جاوا اسکریپت در داخل کد JSX - جزء کتاب Lesson 12 - Writing JavaScript Inside of JSX Code - Book Component

• درس 13 - مقدمه ای بر Props - کتاب Refactor Component to Use Props Lesson 13 - Introduction to Props - Refactor Book Component to Use Props

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

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

• درس 16 - درک React Key Prop Lesson 16 - Understanding the React Key Prop

• درس 17 - لوازم و جریان یک طرفه داده - بررسی اجمالی Lesson 17 - Props and One-Way Data Flow - Overview

• درس 18 - تخریب سازه ها Lesson 18 - Destructuring Props

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

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

React State و Styling React State and Styling

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

• درس 2 - بازسازی پروژه - یک پوشه کامپوننت ایجاد کنید و اجزای کتاب و پروفایل کاربر را به فایل های جداگانه اضافه کنید Lesson 2 - Restructuring the Project - Create a Components Folder and Add Book and UserProfile Components into Separate Files

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

• درس 4 - مقدمه ای بر حالت در React - روش اشتباه برای تغییر حالت Lesson 4 - Introduction to State in React - The Wrong Way to Change State

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

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

• درس 7 - برنامه نقل قول تصادفی - راه اندازی Lesson 7 - Random Quote App - Setup

• درس 8 - برنامه RandoQuote - راه اندازی کامل - محصول نهایی Lesson 8 - RandoQuote App - Thorough Setup - Final Product

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

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

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

• درس 12 - اضافه کردن یک حالت دیگر - رنگ تصادفی Lesson 12 - Adding Another Piece of State - Random Color

• درس 13 - وضعیت بالا بردن - بررسی اجمالی الگوی واکنش Lesson 13 - Lifting State Up - React Pattern Overview

• درس 14 - حالت بلند کردن به بالا - دست روی - نقل قول تصادفی Lesson 14 - Lifting State Up - Hands-On - RandomQuote

• درس 15 - حالت لیفت بالا - دست روی - شمارنده ساده Lesson 15 - Lift State Up - Hands-On - Simple Counter

فرم ها و تعامل - برنامه لیست مواد غذایی Forms and Interactivity - Grocery List App

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

• درس 2 - یک فرم ساده و ورودی تنظیم کنید Lesson 2 - Setup a Simple Form and Input

• درس 3 - روش پیش‌فرض را شکل دهید و جلوگیری کنید Lesson 3 - Form and preventDefault Method

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

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

• درس 6 - تنظیم فرم چند ورودی - Hands-On Lesson 6 - Multi-Input Form Setup - Hands-On

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

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

• درس 9 - عملی: آنچه خواهیم ساخت - برنامه GroceryList - نسخه نمایشی Lesson 9 - Hands-On: What We'll Be Building - GroceryList App - Demo

• درس 10 - عملی - جزء لیست مواد غذایی - افزودن داده های جعلی و نمایش فهرست Lesson 10 - Hands-On - GroceryList Component - Adding Fake Data and Showing a List

• درس 11 - ایجاد اجزای پاورقی و Nav Lesson 11 - Creating the Footer and Nav Components

• درس 12 - سبک دادن به آیتم لیست مواد غذایی Lesson 12 - Styling the GroceryList Item

• درس 13 - فرم خرید مواد غذایی را اضافه کنید Lesson 13 - Add Grocery Form

• درس 14 - رفع مشکلات فرم شفاف Lesson 14 - Fixing Clear Form Issues

• درس 15 - اضافه کردن نماد بوت استرپ Lesson 15 - Adding Bootstrap Icon

• درس 16 - عبور از ضامن خرید به عنوان یک وسیله - قسمت 1 Lesson 16 - Passing the toggleBought as a Prop - Part 1

• درس 17 - پیاده سازی Toggling - تست در کنسول - کار می کند Lesson 17 - Implementing the Toggling - Testing in the Console - It Works

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

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

• درس 20 - افزودن آمار در مؤلفه پاورقی Lesson 20 - Adding Stats in the Footer Component

• درس 21 - فرم - خلاصه بخش Lesson 21 - Form - Section Summary

اتصال به Backend - مصرف APIها - UseEffect Hook Connecting to the Backend - Consuming APIs - UseEffect Hook

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

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

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

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

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

یک برنامه جستجوی کتاب بسازید Build a BookSearch App

• مقدمه ای بر فرم ها در React - مرور کلی Introduction to Forms in React - Overview

• درس 2 - تنظیم مولفه NavBar Lesson 2 - Setup NavBar Component

• درس 3 - ایجاد مؤلفه پاورقی Lesson 3 - Create Footer Component

• درس 4 - برداشتن کتاب ها از API Lesson 4 - Pulling in Books from API

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

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

• درس 7 - اطمینان از اینکه عبارت جستجو درست به روز می شود - اشکال زدایی Lesson 7 - Making Sure The SearchTerm is Updating Correctly - Debugging

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

• درس 9 - اضافه کردن حالت بارگذاری Lesson 9 - Adding Loading State

• درس 10 - پاک کردن فرم جستجو Lesson 10 - Clearing the Search Form

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

• درس 12 - قلاب های سفارشی و ایجاد قلاب سفارشی - useBooks Lesson 12 - Custom Hooks and Creating a Custom Hook - useBooks

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

• درس 14 - جزء جزئیات کتاب - قسمت 1 Lesson 14 - Book Detail Component - Part 1

• درس 15 - رندر شرطی با && - Testing SelectedBook Lesson 15 - Conditional Rendering with && - Testing SelectedBook

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

• درس 17 - Handling Missing Books API Missing Fields Lesson 17 - Handling Missing Books API Missing Fields

گسترش Deployment

• درس 1 - ساخت و راه اندازی Vercel و استقرار برنامه Lesson 1 - Build and Setup Vercel and Deploy the App

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

• درس 3 - برنامه قفسه کتاب و خلاصه بخش Lesson 3 - Bookshelf App and Section Summary

بسته شدن Wrap Up

• پایان دوره Course Wrap Up