آموزش Modern React برای مبتدیان

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

مفاهیم و نحو اولیه React Basic React Concepts & Syntax

• بررسی اجمالی Overview

• معرفی Introduction

• مزایای React Benefits of React

• یک React App ایجاد و اجرا کنید Create and Run a React App

• ساختار پروژه React React Project Structure

• مبانی JSX Basics of JSX

• درج متغیرها در JSX Inserting Variables Into JSX

• ایجاد و رندر کامپوننت ها Creating and Rendering Components

• نتیجه Conclusion

ایجاد و استفاده مجدد از React Components Create and Reuse React Components

• بررسی اجمالی Overview

• معرفی Introduction

• واردات و صادرات قطعات Importing and Exporting Components

• یک ظاهر طراحی کامپوننت پایه Basic Component Styling

• React Fragments React Fragments

• مقدمه ای بر Component Props Introduction to Component Props

• قطعات قابل استفاده مجدد Reusable Components

• نتیجه Conclusion

Type-Checking و Event-Handling در React Type-Checking and Event-Handling in React

• بررسی اجمالی Overview

• معرفی Introduction

• PropTypes PropTypes

• مدیریت رویداد پایه Basic Event Handling

• سبک های محدوده با ماژول های CSS Scoping Styles with CSS Modules

• ایجاد اجزای قابل استفاده مجدد بیشتر Creating more reusable components

• React Dev-tools React Dev-tools

• نتیجه Conclusion

مقدمه ای بر حالت جزء Introduction to Component State

• بررسی اجمالی Overview

• معرفی Introduction

• نحوه اضافه کردن حالت به کامپوننت ها How to Add State to Components

• چگونه حالت را به کامپوننت ها اضافه نکنیم How NOT to Add State to Components

• نمایش و پنهان کردن کامپوننت ها Showing and Hiding Components

• استفاده از حالت برای تغییر استایل Using State to Change Styling

• به اشتراک گذاری حالت بین کامپوننت ها Sharing State Between Components

• عبور توابع به عنوان Props Passing Functions as Props

• نتیجه Conclusion

لیست ها و قابلیت استفاده مجدد کامپوننت Lists and Component Reusability

• بررسی اجمالی Overview

• معرفی Introduction

• نمایش لیست ها Displaying Lists

• شکستن اجزای بزرگ Breaking up Large Components

• ایجاد یک کامپوننت برچسب Creating a Tag Component

• وضعیت پایدار در LocalStorage Persisting State in LocalStorage

• سایر گزینه های تداوم ایالتی Other State Persistence Options

• نتیجه Conclusion

مقدمه ای بر React Routing Introduction to React Routing

• بررسی اجمالی Overview

• معرفی Introduction

• مسیریابی اولیه با React-Router-Dom Basic Routing with React-Router-Dom

• ایجاد یک نوار ناوبری Creating a Navigation Bar

• پیاده سازی اجزای صفحه Implementing Page Components

• پارامترهای URL URL Parameters

• پیمایش به صورت برنامه ای Navigating Programmatically

• نتیجه Conclusion

برنامه های Refactor React Refactor React Applications

• بررسی اجمالی Overview

• معرفی Introduction

• اضافه کردن لوازم چند منظوره Adding Multiple Function Props

• افزایش قابلیت استفاده مجدد کامپوننت Increasing Component Reusability

• ارسال لوازم جانبی به صفحات Passing Props to Pages

• افزایش قابلیت استفاده مجدد کامپوننت (دوباره) Increasing Component Reusability (Again)

• افزودن PropType به صفحات Adding PropTypes to Pages

• پنهان نگه داشتن عناصر پنهان Keeping Hidden Elements Hidden

• نتیجه Conclusion

مقدمه ای بر React Context Introduction to React Context

• بررسی اجمالی Overview

• معرفی Introduction

• مبانی زمینه Basics of Context

• ایجاد و دسترسی به متن Creating and Accessing Context

• عبور توابع از طریق زمینه Passing Functions through Context

• کپسوله کردن منطق در یک مؤلفه ارائه دهنده Encapsulating Logic in a Provider Component

• نحوه کار فرم ها در React How Forms work in React

• نتیجه Conclusion

React Form Basics React Form Basics

• بررسی اجمالی Overview

• معرفی Introduction

• ایجاد پیوندهای دوطرفه فرم Creating Two-Way Form Bindings

• تغییر از Static به Dynamic Data با Context Switching from Static to Dynamic Data with Context

• اتصال فرم ها با زمینه Connecting Forms with Context

• وضعیت زمینه ماندگار Persisting Context State

• نتیجه Conclusion

فرم های قابل استفاده مجدد در React Reusable Forms in React

• بررسی اجمالی Overview

• معرفی Introduction

• نحوه استفاده مجدد از فرم ها How to Make Forms Reusable

• از پیش پر کردن فرم ها با داده ها Pre-Populating Forms with Data

• استفاده از فرم ها در چندین صفحه Using Forms Across Multiple Pages

• انتقال چندین عمل به کامپوننت ها Passing Multiple Actions to Components

• روش های ویرایش داده ها Methods For Editing Data

• به روز رسانی انواع پایه Updating Prop Types

• نتیجه Conclusion

نحوه رندرینگ React چگونه کار می کند How React Rerendering Works

• بررسی اجمالی Overview

• معرفی Introduction

• فرآیند رندر React React's Rendering Process

• قانون رندر شماره 1 Rerendering Rule #1

• قانون شماره 2 بازپرداخت Rerendering Rule #2

• قانون شماره 3 بازپرداخت Rerendering Rule #3

• جلوگیری از رندرینگ با حافظه Preventing Rerendering with Memoization

• قانون شماره 4 بازپرداخت Rerendering Rule #4

• بازپردازی لیست ها Rerendering Lists

• نتیجه Conclusion

واکنش درونی React Inner Workings

• بررسی اجمالی Overview

• معرفی Introduction

• مبانی چرخه حیات کامپوننت Component Lifecycle Basics

• موارد استفاده از useEffect Hook Uses of the useEffect Hook

• JSX پشت صحنه JSX Behind the Scenes

• JSX و Cross-Site Scripting JSX and Cross-Site Scripting

• نتیجه Conclusion