آموزش تسلط بر ری‌اکت: از مفاهیم پایه تا پروژه‌های واقعی - آخرین آپدیت

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

مقدمه‌ای بر ری‌اکت Introduction to React

• مقدمه Introduction

• ری‌اکت چیست؟ What is React

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

• ساخت اپلیکیشن ری‌اکت Creating React Application

• ساختار اپلیکیشن Application Structure

• پاک‌سازی اپلیکیشن Cleaning Up Application

• ابزارهای توسعه‌دهنده (DevTools) Developer Tools

ساخت کامپوننت Creating Component

• مقدمه: ساخت کامپوننت‌های ری‌اکت Introduction: Creating React Components

• اولین کامپوننت ری‌اکت شما Your First React Component

• وارد کردن و صادر کردن کامپوننت‌ها Importing and Exporting Components

• نوشتن ساختار با JSX Writing Markup with JSX

• استفاده از متغیرها در JSX Using Variables in JSX

افزودن تعاملات Adding Interactivity

• مقدمه: افزودن تعاملات Introduction: Adding Interactivity

• ارسال Props به یک کامپوننت Passing Props to a Component

• دستکاری Props کامپوننت Component Props Manipulations

• پاسخ به رویدادها Responding to Events

• رندر کردن لیست‌ها Rendering List

• کامپوننت Fragment Fragment Component

• رندرینگ شرطی Conditional Rendering

استایل‌دهی در ری‌اکت Styling in React

• مقدمه: استایل‌دهی در ری‌اکت Introduction: Styling in React

• استفاده از استایل‌های Inline Using Inline Styles

• استفاده از فایل‌های CSS Using CSS Files

• استفاده از CSS Modules Using CSS Modules

• استفاده از استایل‌های CSS سراسری Using Global CSS Styles

• گزینه‌های جایگزین برای استایل‌دهی Alternative Styling Options

مدیریت استیت (State) Managing State

• مقدمه: مدیریت استیت Introduction: Managing State

• چرخه حیات کامپوننت و استیت Component life-cycle and state

• مقایسه استیت کامپوننت با متغیرهای محلی Component state vs local variables

• استفاده از هوک useState Using useState hook

• به‌روزرسانی دسته‌ای در useState Batch updating of useState

مدیریت استیت‌های پیچیده Managing Complex State

• مقدمه: مدیریت استیت‌های پیچیده Introduction: Managing Complex State

• به‌روزرسانی اشیاء در استیت Updating Objects in State

• افزودن و حذف آیتم‌ها در استیت آرایه Adding/Deleting items in Array State

• به‌روزرسانی آیتم‌ها در استیت آرایه Updating items in Array State

کار با کنترل‌های فرم Working with Form Controls

• راه‌اندازی اپلیکیشن جدید با Vite Setting Up New Application via Vite

• طراحی لایه اپلیکیشن برای لیست انجام کارها Create Application Layout for To-Do List

• ساخت فرم برای افزودن کارهای جدید Creating a Form to Add New To-Do’s

• ساختاردهی و استایل‌دهی به فیلدهای فرم Structuring and Styling Form Fields

• مدیریت ارسال فرم با onSubmit Handling Form Submission with onSubmit

• ذخیره داده‌های فرم در استیت Storing Form Data in the State

نمایش لیست انجام کارها Displaying To-Do List

• باز و بسته کردن فیلدهای اضافی فرم Expanding/Collapsing Additional Form Fields

• ساخت و نمایش لیست انجام کارها Creating and Displaying To-Do List

• ساختاردهی و استایل‌دهی به لیست Structuring and Styling To-Do List

• انتقال داده‌های استاتیک اولویت‌ها به متغیرها Move Static Data about Priorities into Variables

• به‌روزرسانی وضعیت کارها با کامپوننت‌های کنترل‌شده Updating To-Do Status with Controlled Components

پیشرفته کردن قابلیت‌های لیست انجام کارها Advancing To-Do List Functionality

• آماده‌سازی کامپوننت‌ها برای قابلیت ویرایش Preparing Components for Editing functionality

• نمایش فرم ویرایش برای کارهای لیست Displaying an Edit Form for To-Do’s

• اجازه ویرایش آیتم‌های لیست به کاربر Allowing User to Edit Items in a List

• افزودن قابلیت حذف برای پاک کردن آیتم‌ها Adding Delete Functionality to Remove Items

• نمایش گزینه‌های فیلترینگ برای لیست Display Filtering Options for To-Do List

• انتقال داده‌های استاتیک فیلترها به متغیرها Move Static Data about Filters into Variables

• اجازه فیلتر کردن آیتم‌های لیست به کاربر Allowing User to Filter Items in List

اعتبارسنجی داده‌های فرم Validating Form Data

• شروع کار با اعتبارسنجی فرم Getting Started with Form Validation

• استفاده از کتابخانه React Hook Form Using React Hook Form Library

• نمایش پیام‌های خطای اعتبارسنجی Displaying Validation Error Messages

• استایل‌دهی به پیام‌های خطای اعتبارسنجی Styling Validation Error Messages

• ساخت قوانین اعتبارسنجی با Yup Creating Validation Rules with Yup

• ارائه اعتبارسنجی سفارشی برای ددلاین با Yup Provide Custom Validation for Deadline with Yup

دستکاری داده‌ها از طریق API Manipulating Data via API

• درک REST APIها و متدهای آن‌ها Understanding REST APIs and Methods

• عملیات ناهمگام (Asynchronous) و Promiseها Asynchronous Operations and Promises

• دریافت کلید API برای ابزار MockAPI Getting API key for MockAPI tool

• راه‌اندازی یک API جعلی با ابزار MockAPI Setting Up a Fake API with MockAPI tool

• دریافت لیست کارها از API با fetch و useEffect Fetching Todo’s via API using fetch and useEffect

• ایجاد، به‌روزرسانی و حذف کارها از طریق API Creating, Updating and Deleting Todo via API Call

• فیلتر کردن کارها از طریق فراخوانی API Filtering Todo’s via API Call

تکنیک‌های پیشرفته استفاده از API Advanced Techniques for API usage

• سازماندهی فراخوانی‌های API در فایل‌های مجزا Organizing API Calls in Separate Files

• ساده‌سازی درخواست‌های HTTP با Axios Simplifying HTTP Requests with Axios

• مدیریت خطاهای API با Try...Catch و Async/Await Handle API Errors with Try...Catch and Async/Await

• استفاده از Custom Hook ری‌اکت برای سازماندهی APIها Use React Custom Hook to organise API Calls

• نمایش پیام‌های خطای API در بنر هشدار Display API Error Messages in the Alert Banner

• پیاده‌سازی اسپینر (لودینگ) هنگام فراخوانی API Implementing Spinners During API Calls

اشتباهات مبتدیان: نحو JSX Beginner Mistakes - JSX syntax

• مقدمه: آنچه در این بخش خواهید آموخت Introduction: What You’ll Learn Here

• برگرداندن چندین المان (Multiple Elements) Returning Multiple Elements

• عدم تولید کلیدهای منحصر‌به‌فرد (Unique Keys) Not Generating Unique Keys

• رندر کردن تصادفی عدد صفر Rendering Zero by Mistake

• فراموش کردن فضای خالی در JSX Missing Whitespace in JSX

• فراموش کردن کروشه در استایل‌ها Missing Curly Brackets in Styles

• استفاده از class به جای className Using class instead of className

• نادیده گرفتن نحوه عملکرد Virtual DOM Ignoring how Virtual DOM Works

اشتباهات مبتدیان: هوک useState Beginner Mistakes - useState hook

• ترکیب اشتباه استیت و Props Mixing Up State and Props

• تغییر مستقیم استیت (Mutation) Mutating State Directly

• خواندن استیت بلافاصله پس از به‌روزرسانی Reading State Right After Update

• فراموش کردن به‌روزرسانی‌های تابعی (Functional Updates) Forgetting Functional Updates

• استفاده از هوک‌ها داخل حلقه‌ها یا شرط‌ها Using Hooks Inside Loops or Conditions

• تغییر اشتباه از حالت Uncontrolled به Controlled Switching From Uncontrolled to Controlled

اشتباهات مبتدیان: هوک useEffect Beginner Mistakes - useEffect hook

• فراموش کردن آرایه وابستگی‌ها در useEffect Forgetting Dependency Arrays in useEffect

• جا انداختن وابستگی‌ها در useEffect Missing Dependencies from useEffect 

• ایجاد حلقه‌های بی‌نهایت با useEffect Creating Infinite Loops with useEffect

• افزودن همه موارد به آرایه وابستگی‌ها Adding Everything to the Dependency Array

• پاک‌سازی نادرست افکت‌ها (Cleanup) Not Cleaning Up Effects Properly

• استفاده از توابع Async داخل useEffect Using Async Functions Inside useEffect