قبل از React چه چیزهایی لازم است؟
اگر تابع، شیء، آرایه و رویداد در JavaScript برایتان آشنا باشد، شروع React روشن‌تر می‌شود. React به شما کمک می‌کند رابط را از کامپوننت‌ها بسازید و بر اساس داده نمایش دهید. کاربر دکمه را می‌زند، داده تغییر می‌کند و رابط از وضعیت جدید ساخته می‌شود.
یک کامپوننت معمولاً تابعی است که رابط را برمی‌گرداند. JSX شکل نوشتن این رابط در JavaScript است و برای اجرا به ابزار مناسب پروژه نیاز دارد. بنابراین نباید آن را بدون پردازش در یک فایل HTML عادی قرار دهید.
یک شمارنده قابل فهم
import { useState } from "react";
export default function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(c => c + 1)}>
تعداد: {count}
</button>
);
}useState مقدار فعلی و تابع تغییر آن را می‌دهد. در این مثال، onClick یک رویداد کاربر را به تغییر state وصل می‌کند. فرم تابعی setCount(c=>c+1) مقدار بعدی را از مقدار قبلی می‌سازد. اگر یک متغیر معمولی را تغییر دهید، الزاماً رندر تازه‌ای درخواست نمی‌شود.
داده ورودی را با وضعیت داخلی اشتباه نگیریم
props داده‌ای است که والد به کامپوننت می‌دهد. state وضعیت نگهداری‌شده توسط خود رابط است. اگر چند بخش به یک داده نیاز دارند، محل نگهداری آن را طوری انتخاب کنید که منبع حقیقت مشخص باشد. کپی‌کردن بی‌دلیل props به state می‌تواند دو نسخه ناسازگار از یک اطلاعات بسازد.
برای تمرین، شمارنده را طوری تغییر دهید که برچسب دکمه را از props بگیرد، ولی تعداد را در state نگه دارد. سپس دو شمارنده کنار هم بگذارید و بررسی کنید وضعیت آن‌ها مستقل است یا مشترک؛ این رفتار باید از طراحی شما بیاید.
رفتار را بررسی کنیم
- قبل از کلیک، مقدار اولیه نمایش داده شود.
- بعد از هر کلیک، مقدار درست تغییر کند.
- کنترل از صفحه‌کلید قابل استفاده باشد.
- برچسب طولانی و متن فارسی چیدمان را خراب نکند.
آزمون را بر اساس کاری بنویسید که کاربر انجام می‌دهد. وجود یک نام کلاس در DOM، به‌تنهایی نشان نمی‌دهد شمارنده درست کار می‌کند. برای داده شبکه‌ای، حالت در حال دریافت، خالی و خطا را هم به طرح اضافه کنید.
مطالعه و تمرین بعدی
بعد از شمارنده، یک فهرست قابل فیلتر بسازید. داده اولیه را کوچک نگه دارید و اول منطق فیلتر را به شکل یک تابع مستقل آزمایش کنید. سپس ورودی متن را به رابط وصل کنید. این ترتیب کمک می‌کند خطای منطق را از خطای نمایش جدا پیدا کنید.