انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #2 من درس: منهجية التفكير بطريقة React خطوة بخطوة

Step Two Build Static Version الخطوة 2 بناء النسخة الساكنة

طبّق المنهجية الهندسية الرسمية المكونة من 5 خطوات في React لتحويل أي تصميم واجهة إلى شجرة مكونات منظمة بأقل حالة ممكنة وتصفية مشتقة وتدفق أحداث عكسي.
3 صفوف تعليمية
ReactJS
0 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

الخطوة 2 — بناء النسخة الساكنة أولاً: قبل إضافة أي متغير حالة تفاعلي، ابنِ شجرة المكونات لتعرض البيانات التجريبية عبر الخصائص Props فقط دون استدعاء useState() على الإطلاق.

يفصل المهندسون هذه المرحلة عمداً لأن كتابة الهيكل الساكن تحتاج طباعة سريعة بلا تعقيد ذهني، بينما تحتاج إضافة التفاعل تفكيراً معمارياً هادئاً بأسطر قليلة.

الصف 2 كود برمجي
HTML 
function StaticCatalog({ courses }) {
  return (
    <div className="card">
      <input placeholder="Search..." readOnly />
      {courses.map((c) => (
        <p key={c.id}>{c.title}</p>
      ))}
    </div>
  );
}
جرّب بنفسك
الصف 3 معاينة حية

جميع فقرات هذا الدرس (منهجية التفكير بطريقة React خطوة بخطوة)