آموزش جامع مبانی ری‌اکت (React Foundations) اثر پیرسون - آخرین آپدیت

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

مقدمه Introduction

• مبانی ری‌اکت: مقدمه React foundations: Introduction

1. شروع کار با ری‌اکت 1. Getting Started with React

• ایجاد یک اپلیکیشن ساده ری‌اکت Creating a simple React application

• ایجاد یک رابط کاربری پیشرفته‌تر Creating a more ambitious user interface

• آزمایشگاه: شروع کار با ری‌اکت Lab: getting started with React

• درک مفاهیم Virtual DOM Understanding the virtual DOM

• مروری کلی بر ری‌اکت Overview of React

• ایجاد رابط کاربری داده‌محور Creating a data-driven user interface

• استفاده از Script Map برای سازماندهی Importها Using a script map to organize imports

• اهداف یادگیری Learning objectives

• پاسخ آزمایشگاه: شروع کار با ری‌اکت Lab solution: Getting started with React

2. ایجاد کامپوننت‌های مبتنی بر کلاس (Class Based) 2. Creating Class-Based Components

• تعریف و استفاده از کامپوننت‌های مبتنی بر کلاس Defining and using a class-based component

• پاسخ آزمایشگاه: ایجاد کامپوننت‌های مبتنی بر کلاس Lab solution: Creating class-based components

• آزمایشگاه: ایجاد کامپوننت‌های مبتنی بر کلاس Lab: creating class-based components

• ایجاد یک رابط کاربری پیشرفته‌تر Creating a more ambitious user interface

• ارسال Props به کامپوننت‌های مبتنی بر کلاس Passing properties to a class-based component

• ضرورت استفاده از کامپوننت‌ها The need for components

• اهداف یادگیری Learning objectives

3. ایجاد کامپوننت‌های تابعی (Functional) 3. Creating Functional Components

• پاسخ آزمایشگاه: ایجاد کامپوننت‌های تابعی Lab solution: Creating functional components

• ارسال Props به کامپوننت‌های تابعی Passing properties to a functional component

• مقدمه‌ای بر کامپوننت‌های تابعی Introduction to functional components

• تعریف کامپوننت‌های تابعی ساده Defining simple functional components

• آزمایشگاه: ایجاد کامپوننت‌های تابعی Lab: creating functional components

• اهداف یادگیری Learning objectives

• تکنیک Destructuring در Props Destructuring properties

• ایجاد یک رابط کاربری پیشرفته‌تر Creating a more ambitious user interface

4. استفاده از JSX 4. Using JSX

• اهداف یادگیری Learning objectives

• آزمایشگاه: استفاده از JSX Lab: using JSX

• تکنیک‌های تکمیلی JSX Additional JSX techniques

• ایجاد یک رابط کاربری ساده از طریق JSX Creating a simple user interface via JSX

• پاسخ آزمایشگاه: استفاده از JSX Lab solution: Using JSX

• شروع کار با JSX Getting started with JSX

• JSX داده‌محور Data-driven JSX

• ارزیابی عبارت‌های جاوا اسکریپت در JSX Evaluating JavaScript expressions in JSX

• ارسال Props به کامپوننت از طریق JSX Passing properties to a component via JSX

5. هوک‌ها (Hooks) 5. Hooks

• تعریف افکت‌ها با وابستگی‌ها (Dependencies) Defining effects with dependencies

• تعریف رفتار Cleanup برای افکت‌ها Defining cleanup behavior for an effect

• پاسخ آزمایشگاه: هوک‌ها Lab solution: Hooks

• مقدمه‌ای بر React.useEffect Introduction to React.useEffect

• آزمایشگاه: هوک‌ها Lab: Hooks

• شروع کار با هوک‌ها Getting started with hooks

• مقدمه‌ای بر React.useState Introduction to React.useState

• اهداف یادگیری Learning objectives

• مثال کاربردی از React.useState Realistic example of React.useState

6. فراخوانی سرویس‌های REST 6. Calling REST Services

• اهداف یادگیری Learning objectives

• مروری بر سرویس‌های REST Overview of REST services

• فراخوانی سرویس REST در لحظه (On Demand) Calling a REST service on-demand

• پیاده‌سازی یک سرویس REST ساده Implementing a simple REST service

• آزمایشگاه: فراخوانی سرویس‌های REST Lab: calling REST services

• فراخوانی سرویس REST از طریق افکت‌های ری‌اکت Calling a REST service via a React effect

• پاسخ آزمایشگاه: فراخوانی سرویس‌های REST Lab solution: calling REST services

7. بهینه‌سازی و Memoization 7. Memoization

• آزمایشگاه: Memoization Lab: Memoization

• بهینه‌سازی (Memoize) یک بخش خاص از محتوا Memoizing a particular piece of content

• اهداف یادگیری Learning objectives

• ارائه تابع مقایسه‌ی سفارشی برای Props کامپوننت Providing a custom comparison function for component properties

• Memoization در کامپوننت‌های دریافت‌کننده Props Memoization of components that receive properties

• پاسخ آزمایشگاه: Memoization Lab solution: Memoization

• مقدمه‌ای بر Memoization Introduction to memo-ization

8. ساخت یک اپلیکیشن کامل ری‌اکت 8. Creating a Complete React Application

• اجرای اپلیکیشن در حالت توسعه (Development Mode) Running the application in development mode

• ایجاد اپلیکیشن ری‌اکت با استفاده از Vite Creating a React application by using Vite

• اهداف یادگیری Learning objectives

• تحلیل و درک کدهای برنامه Understanding the application code

• بیلد و اجرای برنامه در حالت تولید (Production Mode) Building and serving the application in production mode

• مرور کلی Overview

9. آشنایی با مسیریابی (Routing) 9. Introduction to Routing

• مروری بر اپلیکیشن‌های تک صفحه‌ای (SPA) و مسیریابی Overview of single page applications (SPAs) and routing

• اجرای یک برنامه نمونه با قابلیت مسیریابی Running a sample application that uses routing

• بررسی دقیق کامپوننت‌ها در برنامه نمونه Taking a closer look at the components in the example application

• پاسخ آزمایشگاه: مقدمه‌ای بر مسیریابی Lab solution: Introduction to routing

• آزمایشگاه: مقدمه‌ای بر مسیریابی Lab: introduction to routing

• تعریف یک Layout مشترک Defining a common layout

• تعریف مسیرها (Routes) Defining routes

• اهداف یادگیری Learning objectives

10. تکنیک‌های ورودی کاربر 10. User Input Techniques

• اهداف یادگیری Learning objectives

• دسترسی مستقیم به المان‌ها در درخت DOM Accessing elements in the DOM tree directly

• دسترسی به المان‌ها در کامپوننت‌های کنترل‌شده (Controlled) Accessing elements in a controlled component

• دسترسی به المان‌ها در کامپوننت‌های کنترل‌نشده (Uncontrolled) Accessing elements in an uncontrolled component

• آزمایشگاه: تکنیک‌های ورودی کاربر Lab: user input techniques

• پاسخ آزمایشگاه: تکنیک‌های ورودی کاربر Lab solution: User input techniques

• آماده‌سازی محیط Setting the scene

11. تکنیک‌های پیشرفته مسیریابی 11. Routing Techniques

• پاسخ آزمایشگاه: تکنیک‌های مسیریابی Lab solution: Routing techniques

• تعریف مسیرهای تودرتو (Nested Routes) Defining nested routes

• مرور کلی بر مسیریابی Recap of routing

• آزمایشگاه: تکنیک‌های مسیریابی Lab: Routing techniques

• مسیریابی برنامه‌نویسی شده (Programmatic Navigation) Navigating to a route programmatically

• تعریف مسیرهای پارامتریک Defining parameterized routes

• معرفی برنامه‌ای برای نمایش تکنیک‌های پیشرفته مسیریابی Introducing an application that illustrates additional routing techniques

• بارگذاری داده‌ها برای یک مسیر خاص Loading data for a route

• اهداف یادگیری Learning objectives

12. تعریف و استفاده از هوک‌های سفارشی (Custom Hooks) 12. Defining and Using Custom Hooks

• اهداف یادگیری Learning objectives

• مثال از هوک‌های سفارشی Example of custom hooks

• مروری بر هوک‌های سفارشی Overview of custom hooks

• مرور کلی بر هوک‌های داخلی (Built-in Hooks) Recap of built-in hooks

جمع‌بندی Summary

• مبانی ری‌اکت: جمع‌بندی نهایی React foundations: Summary