تسلط بر توسعه ری‌اکت (React) - هوک‌ها، مدیریت استیت و پروژه‌های واقعی [آموزشی] - آخرین آپدیت

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

مبانی ری‌اکت: مقدمه و JSX React Fundamentals: Introduction and JSX

• مقدمه‌ای بر ری‌اکت: درک فریم‌ورک‌های مدرن جاوااسکریپت Introduction to React: Understanding Modern JavaScript Framework

• وب قبل از ری‌اکت چگونه بود: توسعه وب سنتی How Web Worked Before React: Traditional Web Development

• ایجاد اولین پروژه ری‌اکت: شروع به کار Creating Your First React Project: Getting Started

• نصب Visual Studio Code: راه‌اندازی محیط توسعه Installing Visual Studio Code: Setting Up Your Development Environment

• کار با Visual Studio Code: پیکربندی IDE Moving to Visual Studio Code: Configuring Your IDE

• بررسی ساختار پروژه: درک سازماندهی فایل‌ها در ری‌اکت Exploring the Project Structure: Understanding React File Organization

• اولین پروژه ری‌اکت ما: ساخت اپلیکیشن اولیه Our First React Project: Building Your Initial Application

• مقدمه‌ای بر Vite و راه‌اندازی آن: ابزار بیلد مدرن Introduction to Vite and Setting It Up: Modern Build Tool

• انتقال به Visual Studio Code و تغییر پورت: تنظیمات توسعه Moving to Visual Studio Code and Changing Port: Development Configuration

• مقدمه‌ای بر سینتکس و قوانین JSX: مبانی JavaScript XML Introduction to JSX Syntax and Rules: JavaScript XML Fundamentals

• عبارات و اتریبیوت‌ها در JSX: محتوای پویا در ری‌اکت Expressions and Attributes with JSX: Dynamic Content in React

• رندرینگ شرطی در ری‌اکت: نمایش رابط کاربری پویا Conditional Rendering in React: Displaying Dynamic UI

• JSX و توابع: ترکیب منطق با مارک‌آپ JSX and Functions: Combining Logic with Markup

• کامنت‌ها در JSX: مستندسازی کد ری‌اکت Comments in JSX: Documenting Your React Code

کامپوننت‌های ری‌اکت، Props و مدیریت استیت React Components, Props, and State Management

• پروژه: ساخت وب‌سایت پورتفولیو با استفاده از ری‌اکت Project: Building a Portfolio Website Using React

• مقدمه‌ای بر کامپوننت‌ها و ساخت اولین کامپوننت Introduction to Components and Creating Your First Component

• کار عملی با کامپوننت‌ها: توسعه کاربردی کامپوننت Hands-On with Components: Practical Component Development

• درک Props: انتقال داده‌ها بین کامپوننت‌ها Understanding Props: Passing Data Between Components

• کار با Props متعدد: جریان داده‌های پیچیده Working with Multiple Props: Complex Data Flow

• مدیریت مقادیر Boolean و PropTypes: امنیت تایپ در ری‌اکت Managing Boolean Values and PropTypes: Type Safety in React

• ساختارشکنی (Destructuring) در Props: کدنویسی تمیزتر در کامپوننت Destructuring Props: Cleaner Component Code

• اعتبارسنجی Props با PropTypes در ری‌اکت: بررسی تایپ در زمان اجرا Validating Props with PropTypes in React: Runtime Type Checking

• استفاده از Props با آرایه‌ها: مدیریت داده‌های لیستی Using Props with Arrays: Handling List Data

• راه‌اندازی Callbacks: ارتباط بین والد و فرزند Setting Up Callbacks: Parent-Child Communication

• Props و سینتکس Spread: انتقال بهینه پراپ‌ها Props and the Spread Syntax: Efficient Prop Passing

• مقدمه‌ای بر React Hooks: توسعه مدرن ری‌اکت Introduction to React Hooks: Modern React Development

• درک State: مدیریت وضعیت کامپوننت Understanding State: Component State Management

• تنظیم استیت در کامپوننت‌های تابعی با هوک‌ها: بررسی عمیق useState Setting State in Functional Components with React Hooks: useState Deep Dive

• مدیریت متغیرهای استیت متعدد: سازماندهی وضعیت کامپوننت Managing Multiple State Variables: Organizing Component State

مدیریت استیت پیشرفته و هوک useEffect Advanced State Management and useEffect Hook

• درک ماهیت ناهمگام (Asynchronous) ری‌اکت: به‌روزرسانی‌های استیت Understanding the Asynchronous Nature of React: State Updates

• ارسال آرایه‌ها و اشیاء به استیت: ساختارهای پیچیده استیت Passing Arrays and Objects to State: Complex State Structures

• تفاوت State و Props: تفاوت‌های کلیدی و زمان استفاده از هرکدام State vs. Props: Key Differences and When to Use Each

• پروژه: مدیریت ورودی‌های فرم با useState در ری‌اکت Project: Managing Form Inputs with useState in React

• پروژه: ساخت اپلیکیشن انتخاب رنگ (Color Picker) Project: Building Your Own Color Picker App

• مقدمه‌ای بر useEffect: اثرات جانبی (Side Effects) در ری‌اکت Introduction to useEffect: Side Effects in React

هوک‌های ری‌اکت: useEffect، useRef و Context API React Hooks: useEffect, useRef, and Context API

• درک اهمیت آرایه وابستگی‌ها (Dependency Array) در useEffect Understanding the Importance of the Dependency Array: useEffect Dependencies

• پروژه: ساخت ردیاب موس با هوک useEffect Project: Building a Mouse Tracker with the useEffect Hook

• استفاده از توابع Cleanup در هوک useEffect: جلوگیری از نشت حافظه Using Cleanup Functions with React's useEffect Hook: Preventing Memory Leaks

• پروژه: ساخت اپلیکیشن ساعت دیجیتال Project: Creating a Digital Clock Application

• مقدمه‌ای بر useRef: حفظ مقادیر در طول رندرهای مختلف Introduction to useRef: Persisting Values Across Renders

• استفاده از useRef با المان‌های HTML: دستکاری DOM در ری‌اکت Using useRef with HTML Elements: DOM Manipulation in React

• Prop Drilling چیست: درک مشکل انتقال پراپ‌ها در سطوح مختلف What is Prop Drilling: Understanding the Problem

• مقدمه‌ای بر useContext: استیت سراسری بدون Prop Drilling Introduction to useContext: Global State Without Prop Drilling

• پیاده‌سازی Provider: راه‌اندازی Context API Implementing a Provider: Context API Setup

هوک‌های سفارشی (Custom Hooks) و اتصال به API در ری‌اکت Custom Hooks and API Integration in React

• به‌روزرسانی مقدار Context: مدیریت پویای کانتکست Updating the Value of Context: Dynamic Context Management

• درک محدوده Context: داخل در مقابل خارج از Provider Understanding Context Scope: Inside vs. Outside the Provider

• مقدمه‌ای بر Custom Hooks: ایجاد منطق‌های قابل استفاده مجدد Introduction to Custom Hooks: Creating Reusable Logic

• به‌روزرسانی یک هوک سفارشی: ارتقای قابلیت‌های هوک Updating a Custom Hook: Enhancing Hook Functionality

• کار با APIها در ری‌اکت: دریافت داده‌های خارجی Working with APIs in React: Fetching External Data

• مدیریت Loading و خطاها: اتصال به API به صورت پایدار Handling Loading and Errors: Robust API Integration

• برقرار کردن تماس‌های API با Axios: کتابخانه HTTP Client Making API Calls with Axios: HTTP Client Library

• ارسال چندین درخواست GET به صورت همزمان: فراخوانی‌های موازی API Making Multiple GET Requests Simultaneously: Parallel API Calls

• ارسال درخواست‌های POST: ایجاد داده‌ها با API Sending POST Requests: Creating Data with APIs

Axios پیشرفته و فرم‌های ری‌اکت Advanced Axios and React Forms

• استفاده از Interceptors در Axios: مدیریت درخواست و پاسخ Using Interceptors in Axios: Request and Response Handling

• ایجاد یک نمونه (Instance) سفارشی از Axios: پیکربندی HTTP قابل استفاده مجدد Creating a Custom Axios Instance: Reusable HTTP Configuration

• ارتقای نمونه سفارشی Axios با Interceptors: الگوهای پیشرفته Enhancing a Custom Axios Instance with Interceptors: Advanced Patterns

• مقدمه‌ای بر فرم‌ها در ری‌اکت: مبانی مدیریت فرم Introduction to Forms in React: Form Handling Fundamentals

• مشکلات رایج در فرم‌های ساده: درک چالش‌های فرم Common Issues in Basic Forms: Understanding Form Challenges

• مقدمه‌ای بر React Hook Form: مدیریت ساده‌شده فرم‌ها Introduction to React Hook Form: Simplified Form Management

• مانیتور کردن مقادیر در React Hook Form: نظارت لحظه‌ای بر فرم Watching Values in React Hook Form: Real-Time Form Monitoring

• پیاده‌سازی اعتبارسنجی با React Hook Form: الگوهای اعتبارسنجی فرم Implementing Validations with React Hook Form: Form Validation Patterns

• مقایسه عملکرد: فرم‌های ساده در مقابل React Hook Form Performance Comparison: Basic Forms vs. React Hook Form

• مدیریت Reset فرم: پاک‌سازی وضعیت فرم Managing Form Reset: Clearing Form State

• افزودن اعتبارسنجی سفارشی: قوانین اعتبارسنجی شخصی‌سازی شده Adding Custom Validation: Custom Validation Rules

• پیاده‌سازی اعتبارسنجی‌های سفارشی پیشرفته: منطق‌های پیچیده اعتبارسنجی Implementing Advanced Custom Validations: Complex Validation Logic

ری‌اکت با Tailwind CSS: استایل‌دهی به اپلیکیشن‌های مدرن React with Tailwind CSS: Styling Modern Applications

• مقدمه‌ای بر Tailwind CSS: فریم‌ورک CSS با رویکرد Utility-First Introduction to Tailwind CSS: Utility-First CSS Framework

• راه‌اندازی یک پروژه HTML ساده با Tailwind CSS: شروع به کار Setting Up a Simple HTML Project with Tailwind CSS: Getting Started

• راه‌اندازی پروژه ری‌اکت با Tailwind CSS: راهنمای ادغام Setting Up a React Project with Tailwind CSS: Integration Guide

• پیشرفت در Tailwind CSS در ری‌اکت: طراحی ریسپانسیو و تم‌های سفارشی Advancing with Tailwind CSS in React: Responsive Design and Custom Themes

• پروژه: پیاده‌سازی حالت تاریک (Dark Mode) با استفاده از Tailwind CSS Project: Implementing Dark Mode Using Tailwind CSS

React Router: ساخت اپلیکیشن‌های تک‌صفحه‌ای React Router: Building Single Page Applications

• مقدمه‌ای بر مسیریابی (Routing) در ری‌اکت: مبانی ناوبری Introduction to Routing with React: Navigation Fundamentals

• تنظیم مسیرها: پیکربندی React Router Setting Up Routes: Configuring React Router

• افزودن ناوبری به اپلیکیشن: ساخت منوهای ناوبری Adding Navigation to Your Application: Building Navigation Menus

• مسیرهای تودرتو (Nested Routes): ایجاد ناوبری سلسله‌مراتبی Nested Routes: Creating Hierarchical Navigation

• ساخت صفحه 404 (یافت نشد): مدیریت مسیرهای نامعتبر Building a 404 Page (Not Found): Handling Invalid Routes

هوک‌های React Router: تکنیک‌های پیشرفته ناوبری React Router Hooks: Advanced Navigation Techniques

• هوک useLocation: دسترسی به اطلاعات مسیر فعلی useLocation Hook: Accessing Current Route Information

• هوک useNavigate: ناوبری برنامه‌نویسی شده در ری‌اکت useNavigate Hook: Programmatic Navigation in React

• هوک useSearchParams و URLSearchParams: مدیریت پارامترهای کوئری useSearchParams Hook and URLSearchParams: Managing Query Parameters

مدیریت استیت با Redux: راهکارهای استیت در سطح سازمانی Redux State Management: Enterprise-Level State Solutions

• مقدمه‌ای بر Redux: مدیریت استیت متمرکز Introduction to Redux: Centralized State Management

• شروع کار با Redux: راه‌اندازی اولین Store Getting Started with Redux: Setting Up Your First Store

• تعریف Actionها: ایجاد Action Creatorها در Redux Defining Actions: Creating Action Creators in Redux

• تعریف Reducer: منطق به‌روزرسانی استیت در Redux Defining Reducer: State Update Logic in Redux

• تعریف Store: پیکربندی استور Redux Defining a Store: Configuring Redux Store

• ساخت شمارنده: ایجاد اپلیکیشن Counter با Redux Creating the Counter: Building a Counter Application with Redux

• افزودن کامپوننت نمایش برای درک اشتراک‌گذاری داده‌ها: جریان داده در Redux Adding Display Component to Understand Sharing of Data: Redux Data Flow

• ارتقای تنظیمات استور به Redux Toolkit: توسعه مدرن Redux Upgrading Store Setup to Redux Toolkit: Modern Redux Development

• مقدمه‌ای بر Redux DevTools: دیباگ کردن اپلیکیشن‌های Redux Introduction to Redux DevTools: Debugging Redux Applications

• ساختارشکنی و به‌روزرسانی استیت در جاوااسکریپت: به‌روزرسانی‌های Immutable Destructuring and Updating State in JavaScript: Immutable State Updates

• پروژه: دریافت داده‌ها از API خارجی و مدیریت استیت با Redux Project: Fetching Data from Remote API and State Management Using Redux

• مقایسه Redux Toolkit در مقابل روش سنتی createStore: مقایسه الگوهای Redux Redux Toolkit vs. Traditional createStore Approach: Comparing Redux Patterns