React Lists

20 دقیقه Article

لیست‌ها و کلیدها (Lists & Keys) 📋

برای تکرار روی داده‌ها و ساخت لیست، از متد .map() آرایه‌ها استفاده می‌کنیم.

اهمیت Key

هر آیتم در لیست باید یک key منحصر به فرد داشته باشد. این کلید به React کمک می‌کند تا بفهمد کدام آیتم تغییر کرده، اضافه شده یا حذف شده است.

{code_block('const listItems = numbers.map((number) =>\n

{number.value}

\n);')}

در این بخش یاد گرفتید که چگونه منطق برنامه را کنترل کنید و ظاهر آن را تغییر دهید. ترکیب قدرت جاوااسکریپت با انعطاف‌پذیری CSS در React به شما اجازه می‌دهد تجربه‌های کاربری خلاقانه‌ای بسازید.

مدیریت وضعیت (State Management) 🧠

در React، داده‌ها همیشه از بالا به پایین (Top-Down) جریان دارند. اما وقتی برنامه‌ها پیچیده می‌شوند، مدیریت این جریان دشوار می‌شود. اینجاست که ابزارهایی مثل Context API و Redux وارد می‌شوند.

نکته امنیتی: هرگز اطلاعات حساس (مثل رمز عبور یا کلید API) را در کدهای کلاینت‌ساید ذخیره نکنید. کدهای React در مرورگر کاربر قابل مشاهده هستند.

تمرین‌های عملی

برای تثبیت یادگیری این درس تمرین‌های زیر را حل کنید

لیست میوه‌ها Medium

سوال تمرین

آرایه fruits را مپ کنید و به ازای هر کدام یک li با کلید مناسب برگردانید.

پاسخ تمرین

const listItems = fruits.map((fruit, index) =>
  <li key={index}>{fruit}</li>
);

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید

ParsRepo