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

شروع کار با اصول اولیه ری‌اکت Get Started with React Fundamentals

• آماده‌سازی زمینه یادگیری Context Setting

• ایجاد یک برنامه ساده ری‌اکت با استفاده از React Elements Create a Simple React Program Using React Elements​

• مشاهده و تکرار: React Hello World Watch and Repeat : React Hello World

• مشاهده و تکرار: المان جدول در ری‌اکت Watch and Repeat : React Table Element

• ساخت و رندر کامپوننت‌های بدون وضعیت (Stateless) با استفاده از توابع جاوااسکریپت Build and Render Stateless Components Using JavaScript Functions

• مشاهده و تکرار: کامپوننت‌های تابعی (Functional Component) در ری‌اکت Watch and Repeat : React Functional Component

• رندر کردن کامپوننت‌های ری‌اکت بر اساس شرایط Render React Components Based on Conditions​

• مشاهده و تکرار: رندرینگ شرطی در ری‌اکت Watch and Repeat : React Conditional Rendering

• رندر کردن چندین کامپوننت با استفاده از لیست‌ها و کلیدها (Lists and Keys) Render Multiple Components Using Lists and Keys​

• مشاهده و تکرار: لیست‌ها و کلیدها در ری‌اکت Watch and Repeat : React List and Keys

• خلاصه تمرین Practice Brief

• مرور و تحلیل تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation

ساخت کامپوننت‌های دارای وضعیت (Stateful) با استفاده از ری‌اکت Build Stateful Components using React

• آماده‌سازی زمینه یادگیری Context Setting

• ساخت کامپوننت‌های کلاس Stateful با استفاده از سینتکس ES6 Build Stateful Class Components Using ES6 Syntax

• مشاهده و تکرار: کامپوننت‌های Stateful در ری‌اکت با استفاده از React Class Watch and Repeat : React Stateful Components Using React Class

• مدیریت وضعیت با مدیریت رویدادها در React Elements Manage State by Handling Events With React Elements

• مشاهده و تکرار: مدیریت رویدادها (Event Handling) در ری‌اکت Watch and Repeat : React Event Handling

• توضیح مفاهیم Reconciliation و Virtual DOM Explain Reconciliation and Virtual DOM

• ایجاد نماهای خواناتر با استفاده از JSX Create More Readable Views Using JSX

• مشاهده و تکرار: عبارت‌های JSX Watch and Repeat : JSX expressions

• مشاهده و تکرار: رندرینگ شرطی و مدیریت رویداد با استفاده از JSX Watch and Repeat : Conditional Rendering and Event Handling using JSX

• خلاصه تمرین Practice Brief

• مرور و تحلیل تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation

تجزیه رابط کاربری به سلسله‌مراتب کامپوننت Break the UI into a Component Hierarchy

• آماده‌سازی زمینه یادگیری Context Setting

• تعریف انتزاع (Abstraction) و کپسوله‌سازی (Encapsulation) Define Abstraction and Encapsulation

• اعمال اصول تجزیه رابط کاربری (UI) به کامپوننت‌ها Apply the Principles Used to Break Down the User Interface (UI) into Components

• اعمال اصول تجزیه رابط کاربری (UI) به کامپوننت‌ها Apply the Principles Used to Break Down the User Interface (UI) into Components

• مشاهده و تکرار: ایجاد پروژه ری‌اکت با ابزار Create React App Watch and Repeat : Create React Project using Create-React-App tool

• مشاهده و تکرار: وارد کردن (Import) و خروجی گرفتن (Export) ماژول‌ها Watch and Repeat : Import and Export Modules

• انتقال داده در درخت کامپوننت با استفاده از Context Pass data through Component Tree Using Context​

• مشاهده و تکرار: بالا بردن وضعیت در ری‌اکت (Lift State up) Watch and Repeat : React Lift State up

• مشاهده و تکرار: Context در ری‌اکت Watch and Repeat : React Context

• استفاده مجدد از کد بین کامپوننت‌ها با استفاده از ترکیب‌بندی (Composition) Reuse Code between Components Using React Composition​

• مشاهده و تکرار: ترکیب‌بندی کامپوننت در ری‌اکت Watch and Repeat : React Component Composition

• خلاصه تمرین Practice Brief

• مرور و تحلیل تمرین Practice Debrief

• خلاصه چالش Challenge Brief

• مرور و تحلیل چالش Challenge Debrief

• جمع‌بندی یادگیری Learning Consolidation

مدیریت وضعیت اپلیکیشن با استفاده از متدهای چرخه حیات (Life Cycle) Manage Application State using Life Cycle Methods

• آماده‌سازی زمینه یادگیری Context Setting

• بازنویسی (Override) متدهای چرخه حیات کامپوننت ری‌اکت Override React Component's Life Cycle Methods

• مشاهده و تکرار: مرحله Mount در چرخه حیات ری‌اکت Watch and Repeat : Mounting Phase in React Life Cycle Method

• مشاهده و تکرار: مراحل Update و Unmount در چرخه حیات ری‌اکت Watch and Repeat : Updating and UnMounting Phase in React Life Cycle Method

• تعریف Error Boundaries برای مدیریت خطاهای جاوااسکریپت Define Error Boundaries to Catch JavaScript Errors

• مشاهده و تکرار: مرز خطا (Error Boundary) Watch and Repeat : Error Boundary

• انجام درخواست‌های HTTP با استفاده از Axios برای ارتباط با سرورها Make HTTP Requests with Axios API to Communicate With Servers

• مشاهده و تکرار: کار با Axios API Watch and Repeat : Axios API

• خلاصه تمرین Practice Brief

• مرور و تحلیل تمرین Practice Debrief

• خلاصه چالش Challenge Brief

• مرور و تحلیل چالش Challenge Debrief

• جمع‌بندی یادگیری Learning Consolidation

تست کامپوننت‌های کلاس ری‌اکت با استفاده از Jest Test React Class Components using Jest

• آماده‌سازی زمینه یادگیری Context Setting

• توضیح تست واحد (Unit Testing) Explain Unit testing​

• تست با استفاده از Jest Test Using Jest​

• نمایش الگوهای رایج تست‌نویسی Demonstrate Common Testing Patterns

• مشاهده و تکرار: تست واحد کامپوننت Greetings Watch and Repeat : Unit test Greetings component

• نمایش تست رویدادها (Event Testing) Demonstrate Event Testing

• مشاهده و تکرار: تست واحد کامپوننت Color Watch and Repeat : Unit Test Color Component

• ساخت Mockها با متدهای Jest Create Mocks with Jest Methods

• مشاهده و تکرار: تست واحد کامپوننت PrimaryColor Watch and Repeat : Unit Test PrimaryColor Component

• مشاهده و تکرار: تست واحد کامپوننت CompositeColor Watch and Repeat : Unit Test CompositeColor Component

• مشاهده و تکرار: تست واحد کامپوننت ColorPalette Watch and Repeat : Unit Test ColorPalette Component

• مشاهده و تکرار: تست واحد کامپوننت ColorChanger Watch and Repeat : Unit Test ColorChanger Component

• نمایش تست اسنپ‌شات (Snapshot Testing) Demonstrate Snapshot Testing

• مشاهده و تکرار: تست واحد کامپوننت Message Watch and Repeat : Unit Test Message Component

• بررسی سایر کتابخانه‌های تست Examine Other Testing Libraries​

• خلاصه تمرین Practice Brief

• مرور و تحلیل تمرین Practice Debrief

• جمع‌بندی یادگیری Learning Consolidation