آموزش ضروری React و TypeScript - آخرین آپدیت

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

Introduction-فصل-1-مقدمه Introduction

• Welcome-ویدیو-1-1-خوش‌آمدید Welcome

• Prerequisites-ویدیو-1-2-پیش‌نیازها Prerequisites

Getting Started-فصل-2-شروع‌به‌کار Getting Started

• What is React?-ویدیو-2-1-React چیست؟ What is React?

• Setting Up the Development Environment-ویدیو-2-2-راه‌اندازی محیط توسعه Setting Up the Development Environment

• Creating Your First React App-ویدیو-2-3-ایجاد اولین برنامه React شما Creating Your First React App

• Overview of Project Structure-ویدیو-2-4-بررسی اجمالی ساختار پروژه Overview of Project Structure

• React Under The Hood-ویدیو-2-5-React در پشت صحنه React Under The Hood

React Components: Essential Lessons-فصل-3-کامپوننت‌های React: درس‌های ضروری React Components: Essential Lessons

• Introduction-ویدیو-3-1-مقدمه Introduction

• Create A React Component-ویدیو-3-2-ایجاد یک کامپوننت React Create A React Component

• React Fragments-ویدیو-3-3-فرگمنت‌های React React Fragments

• Displaying List of Data-ویدیو-3-4-نمایش لیست داده‌ها Displaying List of Data

• Conditional Rendering-ویدیو-3-5-رندرینگ شرطی Conditional Rendering

• Handling DOM Events-ویدیو-3-6-مدیریت رویدادهای DOM Handling DOM Events

• Working On Component State-ویدیو-3-7-کار با وضعیت کامپوننت Working On Component State

• Passing Data Via Props-ویدیو-3-8-انتقال داده‌ها از طریق Props Passing Data Via Props

• Passing Functions Via Props-ویدیو-3-9-انتقال توابع از طریق Props Passing Functions Via Props

• The Difference Between Props and State-ویدیو-3-10-تفاوت بین Props و State The Difference Between Props and State

• Passing Children To A Component-ویدیو-3-11-انتقال فرزندان به یک کامپوننت Passing Children To A Component

• Introducing the React Dev Tools-ویدیو-3-12-معرفی ابزارهای توسعه React Introducing the React Dev Tools

• Optional Props and Setting Default Prop Values-ویدیو-3-13-Props اختیاری و تنظیم مقادیر پیش‌فرض Prop Optional Props and Setting Default Prop Values

• Exercise: Build an Alert Banner - Starting Project-ویدیو-3-14-تمرین: ساخت بنر هشدار - شروع پروژه Exercise: Build an Alert Banner - Starting Project

• Exercise: Build an Alert Banner - Solution!-ویدیو-3-15-تمرین: ساخت بنر هشدار - راه حل! Exercise: Build an Alert Banner - Solution!

• React Components: Quiz-ویدیو-3-16-کامپوننت‌های React: آزمون React Components: Quiz

Adding Styles To Components-فصل-4-اضافه کردن استایل به کامپوننت‌ها Adding Styles To Components

• Introduction-ویدیو-4-1-مقدمه Introduction

• Styling with Vanilla CSS and Organizing Stylesheets-ویدیو-4-2-استایل‌دهی با CSS Vanilla و سازماندهی شیوه‌نامه‌ها Styling with Vanilla CSS and Organizing Stylesheets

• Fixing Style Conflicts with CSS Modules-ویدیو-4-3-رفع تداخلات استایل با ماژول‌های CSS Fixing Style Conflicts with CSS Modules

• Applying Inline CSS-ویدیو-4-4-اعمال CSS درون‌خطی Applying Inline CSS

• Styled Components in React-ویدیو-4-5-کامپوننت‌های استایل‌دار در React Styled Components in React

• Using CSS Frameworks-ویدیو-4-6-استفاده از فریم‌ورک‌های CSS Using CSS Frameworks

• React Icons and Other Assets-ویدیو-4-7-آیکون‌های React و سایر دارایی‌ها React Icons and Other Assets

• Exercise - Styling Cards-ویدیو-4-8-تمرین - استایل‌دهی کارت‌ها Exercise - Styling Cards

• Styling-ویدیو-4-9-استایل‌دهی Styling

• Assets-ویدیو-4-10-دارایی‌ها Assets

State Management-فصل-5-مدیریت State State Management

• Introduction-ویدیو-5-1-مقدمه Introduction

• Understanding the State Hook-ویدیو-5-2-درک State Hook Understanding the State Hook

• State Structures-ویدیو-5-3-ساختارهای State State Structures

• Pure Components-ویدیو-5-4-کامپوننت‌های Pure Pure Components

• React Strict Mode-ویدیو-5-5-حالت سخت‌گیرانه React React Strict Mode

• Working with State - Updating Objects-ویدیو-5-6-کار با State - به‌روزرسانی اشیاء Working with State - Updating Objects

• Article: Spread Operator in JavaScript-ویدیو-5-7-مقاله: عملگر Spread در جاوااسکریپت Article: Spread Operator in JavaScript

• Working with State - Updating Nested Objects-ویدیو-5-8-کار با State - به‌روزرسانی اشیاء تودرتو Working with State - Updating Nested Objects

• Working with State - Updating Arrays-ویدیو-5-9-کار با State - به‌روزرسانی آرایه‌ها Working with State - Updating Arrays

• Working with State - Updating Array of Objects-ویدیو-5-10-کار با State - به‌روزرسانی آرایه‌ای از اشیاء Working with State - Updating Array of Objects

• Sharing States with Other Components-ویدیو-5-11-اشتراک‌گذاری States با سایر کامپوننت‌ها Sharing States with Other Components

• Extracting Interface Props-ویدیو-5-12-استخراج Props رابط Extracting Interface Props

• Using Immer To Simplify State Updates-ویدیو-5-13-استفاده از Immer برای ساده‌سازی به‌روزرسانی‌های State Using Immer To Simplify State Updates

• Exercise - Updating Object, Nested Object, Array-ویدیو-5-14-تمرین - به‌روزرسانی شیء، شیء تودرتو، آرایه Exercise - Updating Object, Nested Object, Array

Working with Forms in React-فصل-6-کار با فرم‌ها در React Working with Forms in React

• Introduction-ویدیو-6-1-مقدمه Introduction

• Building Forms and Handling Form Submissions-ویدیو-6-2-ساخت فرم‌ها و مدیریت ارسال فرم Building Forms and Handling Form Submissions

• Accessing Form Input Fields-ویدیو-6-3-دسترسی به فیلدهای ورودی فرم Accessing Form Input Fields

• Using the State Hook to Handle Input Fields-ویدیو-6-4-استفاده از State Hook برای مدیریت فیلدهای ورودی Using the State Hook to Handle Input Fields

• Quickly Build Forms Using React Hook Form-ویدیو-6-5-ساخت سریع فرم‌ها با استفاده از React Hook Form Quickly Build Forms Using React Hook Form

• Validating Form Inputs-ویدیو-6-6-اعتبارسنجی ورودی‌های فرم Validating Form Inputs

• Schema-Based Validation Using Zod-ویدیو-6-7-اعتبارسنجی مبتنی بر Schema با استفاده از Zod Schema-Based Validation Using Zod

• Enabling Form Controls When Validated-ویدیو-6-8-فعال‌سازی کنترل‌های فرم پس از اعتبارسنجی Enabling Form Controls When Validated

• Exercise - Login Form Validation-ویدیو-6-9-تمرین - اعتبارسنجی فرم ورود Exercise - Login Form Validation

Project - Building A Journaling App-فصل-7-پروژه - ساخت یک برنامه یادداشت‌برداری روزانه Project - Building A Journaling App

• Preview - Journaling App-ویدیو-7-1-پیش‌نمایش - برنامه یادداشت‌برداری روزانه Preview - Journaling App

• Scaffolding the App, Setting Up TailwindCSS Auto-Class Sorting-ویدیو-7-2-ایجاد ساختار اولیه برنامه، تنظیم مرتب‌سازی خودکار کلاس‌های TailwindCSS Scaffolding the App, Setting Up TailwindCSS Auto-Class Sorting

• Building the Tab Component (DaisyUI Tab Component)-ویدیو-7-3-ساخت کامپوننت Tab (کامپوننت Tab DaisyUI) Building the Tab Component (DaisyUI Tab Component)

• Building the Add Journal Entry Form Using DaisyUI Components-ویدیو-7-4-ساخت فرم اضافه کردن یادداشت روزانه با استفاده از کامپوننت‌های DaisyUI Building the Add Journal Entry Form Using DaisyUI Components

• Adding Input Validations to the Journal Entry Form-ویدیو-7-5-اضافه کردن اعتبارسنجی ورودی‌ها به فرم یادداشت روزانه Adding Input Validations to the Journal Entry Form

• Store the Journal Entry to the LocalStorage-ویدیو-7-6-ذخیره یادداشت روزانه در LocalStorage Store the Journal Entry to the LocalStorage

• Show A Success Dialog After Publish-ویدیو-7-7-نمایش یک دیالوگ موفقیت پس از انتشار Show A Success Dialog After Publish

• Displaying Journal Entries in a Grid Format-ویدیو-7-8-نمایش یادداشت‌های روزانه در قالب Grid Displaying Journal Entries in a Grid Format

• Improve Journal List User-Experience and Use Custom Font-ویدیو-7-9-بهبود تجربه کاربری لیست یادداشت‌ها و استفاده از فونت سفارشی Improve Journal List User-Experience and Use Custom Font

• View the Journal Entry - Part 1-ویدیو-7-10-مشاهده یادداشت روزانه - قسمت 1 View the Journal Entry - Part 1

• View the Journal Entry - Part 2-ویدیو-7-11-مشاهده یادداشت روزانه - قسمت 2 View the Journal Entry - Part 2

• Delete the Journal Entry-ویدیو-7-12-حذف یادداشت روزانه Delete the Journal Entry

React Router - Building A Single Page Application (SPA)-فصل-8-React Router - ساخت یک برنامه تک صفحه‌ای (SPA) React Router - Building A Single Page Application (SPA)

• Introduction-ویدیو-8-1-مقدمه Introduction

• Installing and Setting Up React Router-ویدیو-8-2-نصب و راه‌اندازی React Router Installing and Setting Up React Router

• Building Router Navigation-ویدیو-8-3-ساخت مسیریابی Router Building Router Navigation

• Route Parameters-ویدیو-8-4-پارامترهای Route Route Parameters

• Managing Document Head, Title and Meta Tags-ویدیو-8-5-مدیریت Head سند، عنوان و Meta Tags Managing Document Head, Title and Meta Tags

• Using React Helmet For Document Head-ویدیو-8-6-استفاده از React Helmet برای Head سند Using React Helmet For Document Head

Connecting to a Back-End API-فصل-9-اتصال به یک API Back-End Connecting to a Back-End API

• Introduction-ویدیو-9-1-مقدمه Introduction

• Understanding the Effect Hook-ویدیو-9-2-درک Effect Hook Understanding the Effect Hook

• The useEffect Dependencies-ویدیو-9-3-وابستگی‌های useEffect The useEffect Dependencies

• useEffect Clean Up-ویدیو-9-4-useEffect Clean Up useEffect Clean Up

• Fetching Data From Remote API-ویدیو-9-5-واکشی داده‌ها از API راه دور Fetching Data From Remote API

• Understanding the HTTP Requests-ویدیو-9-6-درک درخواست‌های HTTP Understanding the HTTP Requests

• Error Handling-ویدیو-9-7-مدیریت خطا Error Handling

• Async and Await-ویدیو-9-8-Async و Await Async and Await

• Cancelling An HTTP Request-ویدیو-9-9-لغو یک درخواست HTTP Cancelling An HTTP Request

• Show A Page Loader-ویدیو-9-10-نمایش Page Loader Show A Page Loader

• Delete Data with HTTP DELETE Request-ویدیو-9-11-حذف داده‌ها با درخواست HTTP DELETE Delete Data with HTTP DELETE Request

• Creating Data with POST Request-ویدیو-9-12-ایجاد داده‌ها با درخواست POST Creating Data with POST Request

• Updating Data with PATCH Request-ویدیو-9-13-به‌روزرسانی داده‌ها با درخواست PATCH Updating Data with PATCH Request

• Creating A Reusable API Client-ویدیو-9-14-ایجاد یک API Client قابل استفاده مجدد Creating A Reusable API Client

• Creating A User Service-ویدیو-9-15-ایجاد یک سرویس User Creating A User Service

• Creating A Global HTTP Service-ویدیو-9-16-ایجاد یک سرویس HTTP سراسری Creating A Global HTTP Service

• Creating A Custom Hook For Data Fetching-ویدیو-9-17-ایجاد یک Custom Hook برای واکشی داده‌ها Creating A Custom Hook For Data Fetching

Deploying To Production-فصل-10-استقرار در Production Deploying To Production

• Introduction-ویدیو-10-1-مقدمه Introduction

• Deploying To Vercel-ویدیو-10-2-استقرار در Vercel Deploying To Vercel

• Deploying To VPS Server With Automatic Deployments via Github Actions-ویدیو-10-3-استقرار در سرور VPS با استقرارهای خودکار از طریق Github Actions Deploying To VPS Server With Automatic Deployments via Github Actions