شرح صفوف ومحتوى الفقرة
عند استلام تصميم واجهة جديد وعينة بيانات JSON، لا يبدأ مهندس React المتمرس بنثر استدعاءات useState() عشوائياً في ملف ضخم واحد، بل يتبع المنهجية الهندسية المنظمة المكونة من خمس خطوات والمعروفة باسم التفكير بطريقة React.
الخطوة 1 — تقسيم الواجهة إلى شجرة مكونات هرمية: ارسم حدوداً واضحة حول كل جزء يؤدي مسؤولية واحدة محددة. في كتالوج الدورات التفاعلي تتشكل الشجرة طبيعياً من الحاضن FilterableCatalog وبداخله SearchBar وCourseTable الذي يعرض صفوف CourseRow.
HTML
function CourseRow({ course }) {
return (
<tr>
<td>{course.title}</td>
<td>{course.free ? 'Free' : 'Pro'}</td>
</tr>
);
}