شرح صفوف ومحتوى الفقرة
في البرمجة اليدوية التقليدية لشجرة المتصفح تكتب كوداً أمرياً (Imperative) يسرد على المتصفح تعليمات تفصيلية متتابعة: ابحث عن العنصر الفلاني، واحذف منه الكلاس القديم، وأضف الكلاس الجديد، ثم غيّر نص الزر. ومع تزايد حالات الشاشة تتشابك هذه الأوامر وتظهر أعطال نسيان تحديث بعض العناصر.
تقلب React هذه المعادلة إلى البرمجة التصريحية (Declarative UI)؛ فبدلاً من ملاحقة خطوات التغيير اليدوية، تصرّح فقط بالشكل النهائي المطلوب للواجهة في كل حالة، وتتكفل React بمطابقة المتصفح مع وصفك بدقة.
HTML
function SeatStatus() {
const seatsLeft = 4;
return (
<div className="seat-card">
<h3>Bootcamp Cohort Status</h3>
<p>{seatsLeft > 0 ? 'Enrollment Open' : 'Cohort Full'}</p>
</div>
);
}