دوره آموزش ری‌اکت (React) ۲۰۲۵ برای مبتدیان - آخرین آپدیت

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

استراتژی React، 3 طراحی نابغه، ناحیه "آماده سازی" و JSX The React Strategy, the 3 Genius Designs, the "Prep" Area, and JSX

• راه اندازی یک پروژه جدید React و درک استراتژی بروزرسانی React Setup A New React Project and Understand the React Update Strategy

• درک سلسله مراتب فایل React و سه طراحی نابغه آن Understand the React File Hierarchy and Its Three Genius Designs

• "رهگیری" State در میانه راه برای ایجاد مقادیر بهتر "Intercept" the State Halfway to Create BETTER Values

• State Setter و انواع موقعیت های "تیز" The State Setter and All kinds of "Edgy" Situations

• فریب React! FOOL React!

• JSX: هر تگ HTML توسط یک کامپوننت داخلی شبیه سازی می شود JSX: Every HTML Tag is Simulated by a Built-in Component

• چالش: ایجاد یک لیست از یک آرایه یا Object Challenge: Create a List from an Array or Object

ایجاد لیست و کنترل آیتم های لیست به روش های مختلف Create Lists and Control List Items in All Kinds of Ways

• کاربرد در دنیای واقعی: ایجاد یک لیست برای NoSQL Query Real-life Application: Create a List for NoSQL Query

• قانون طلایی React: برای نمایش چیزی جدید، ابتدا یک State جدید تنظیم کنید! The Golden React Rule: To Display Something New, Set A New State First!

• تمرین 1: پین کردن یک آیتم لیست به بالا Practice 1: Pin a List Item to the Top

• تمرین 2: کنترل ترتیب آیتم های لیست به صورت جداگانه Practice 2: Control the Order of List Items Individually

• چالش: ایجاد لیستی از منوها که بتوان آنها را باز یا بسته کرد Challenge: Create a List of Menus that Can Be Opened or Closed

باشگاه مغز شما 1: ایجاد یک لیست "بی نهایت" با استفاده از Recursion The Gym for Your Brain 1: Create an "Infinite" List using Recursion

• درک Recursion برای همیشه! Understand Recursion for Good!

• ایجاد یک لیست بی نهایت Create an Infinite List

• چالش: باز و بسته کردن زیرلیست ها به صورت جداگانه Challenge: Open and Close Sublists Individually

• چالش اضافی: جمع آوری وضعیت هر زیرلیست Extra Challenge: Collect the Status of Every Sublist

باشگاه مغز شما 2: 3 ابزار React برای باهوش تر کردن شما! The Gym for Your Brain 2: 3 React Gadgets to Make You Smarter!

• ابزار 1: ساعت دیجیتال Gadget 1: Digital Clock

• ابزار 2: کرنومتر Gadget 2: Stopwatch

• چالش: کرنومتر + لیست Challenge: Stopwatch + List

• ابزار 3: شمارش معکوس Gadget 3: Countdown

• پیدا کردن راه حل با توصیف مسئله با کلمات مختلف! Find the Solution by Describing the Problem in Different Words!

• Closure: حفظ داده ها برای استفاده بعدی Closure: Preserve Data for Later Use

تئوری نارگیل و قلاب های React بیشتر: useMemo، useCallback و useEffects The Coconut Theory and More React Hooks: useMemo, useCallback, and useEffects

• دو قلاب جدید و آرایه Dependency Two New Hooks and the Dependency Array

• useEffect و تئوری نارگیل useEffect and The Coconut Theory

• بازیابی و نمایش داده های از راه دور Retrieve and Display Remote Data

• Race Hazard و راه حل (کاربرد Closure) Race Hazard and Solution (Application of Closure)

• تمرین و چالش: ارسال چندین درخواست با هم Practice and Challenge: Send Multiple Requests Together

کامپوننت های چندگانه: تبادل داده و کارایی بهتر Multiple Components: Data Exchange and Better Efficiency

• سه نوع Props Three Types of Props

• کاربرد: ایجاد یک دکمه سفارشی Application: Create a Custom Button

• کارایی بهتر: lazy، memo، Suspense، useCallback Better Efficiency: lazy, memo, Suspense, useCallback

• کاربرد lazy، memo، Suspense و useCallback Application of lazy, memo, Suspense, and useCallback

Transition: به کاربران اجازه دهید نظر خود را تغییر دهند Transition: Let Users Change Their Minds

• معرفی Transition Transition Introduction

• کاربرد Transition Application of Transition

Context: راهی کارآمدتر برای انتقال داده به کامپوننت های فرزند Context: A More Efficient to Pass Data to Child Components

• معرفی Context Context Introduction

• کاربرد Context 1: تنظیم حالت شب/روز Context Application 1: Set the Night/Day Mode

• Context به صورت عمیق Context in Depth

• کاربرد Context 2 Context Application 2

useReducer: کنترل کننده های رویداد خود را بهبود بخشید useReducer: Enhance Your Event Handlers

• معرفی Reducer Reducer Introduction

• کاربرد Reducer در دنیای واقعی Real-life Application of Reducer

• استفاده از Reducer و Context با هم! Use Reducer and Context Together!

Custom Hook: انتقال منطق به خارج از کامپوننت Custom Hook: Move Logic Out of Component

• معرفی Custom Hook Custom Hook Introduction

• کاربرد 1: ایجاد انیمیشن Fade-in با استفاده از یک Custom Hook قسمت 1 Application 1: Create a Fade-in Animation Using a Custom Hook Part 1

• کاربرد 1: ایجاد انیمیشن Fade-in با استفاده از یک Custom Hook قسمت 2 Application 1: Create a Fade-in Animation Using a Custom Hook Part 2

• ایجاد یک انیمیشن Fade-out با استفاده از یک Custom Hook Create a Fade-out Animation Using a Custom Hook

• چالش: ایجاد Fade-in و Fade-out با استفاده از یک Custom Hook Challenge: Create Fade-in and Fade-out Using One Custom Hook

تمرین نهایی: همه چیز را با هم قرار دهید! Final Practice: Put EVERYTHING Together!

• آماده سازی: یاد بگیرید چگونه از requestAnimationFrame() استفاده کنید Preparation: Learn How to Use requestAnimationFrame()

• در مورد اینکه تابع Component چه چیزی می تواند ارائه دهد، دوباره فکر کنید Rethink What the Component Function Can Offer

• چالش: Fade-out و Fade-in با هم! Challenge: Fade-out and Fade-in TOGETHER!

چالش و تمرین سطح BOSS BOSS-Level Challenge & Practice

• اضافه کردن انیمیشن های Fade-out به آیتم های لیست Add Fade-out Animations to List Items

• ایجاد برخی بهبودها Make Some Improvements

• "معکوس" کردن انیمیشن Fade-out لغو شده "Reverse" the Canceled Fade-out Animation

• حذف چندین آیتم با هم Delete Multiple Items Together

React Router React Router

• مقدمه: React Router چه کاری برای ما انجام می دهد؟ Introduction: What does the React Router Do for US?

• راه اندازی React Router و مفاهیم اساسی React Router Setup and Basic Concepts

• Routes تودرتو (از جمله Layout Route و Prefix Route) Nested Routes (including the Layout Route and the Prefix Route)

• Dynamic Routes: جاسازی داده ها در URL Dynamic Routes: Embed Data in the URL

• روش دیگر جاسازی داده ها در URL: Query String یا Search Parameters The Other Way of Embedding Data in the URL: Query String or Search Parameters

• تمرین میان دوره Mid-term Practice

• Loader Loader

• UI در حال انتظار و نحوه مدیریت صحیح خطاهای درخواست The Pending UI and How to Properly Handle Request Errors

• Action Action

• بیشتر درباره Action More About Action

• useSubmit useSubmit

• Fetcher Fetcher

• Lazy loading Lazy loading

بخش جایزه: با Native Reducer تفریح کنید Bonus Section: Have Fun with the Native Reducer

• معرفی Reducer Introduction to Reducer

• "تکثیر" در مقابل "کاهش" ''Duplicating" vs. "Reducing"

• یافتن xxx ترین عنصر یا عناصر Finding the most xxx element or elements

• یافتن بالاترین قیمت و جمع آوری گران ترین محصولات با هم Finding the highest price and collecting the most expensive products together

• یافتن پرتکرارترین آیتم Finding the most frequently occurring item

• انجام "غیرممکن" Do the "IMPOSSIBLE"

• IF "نامرئی" The "INVISIBLE" IF

ویدیوهای قدیمی Legacy videos

• ایجاد یک پروژه جدید React و بررسی سه طراحی نابغه آن Create A New React Project And Explore Its Three Genius Designs

• ابزار 3: شمارش معکوس Gadget 3: Countdown