لماذا يستخدم المحترفون React · البرمجة مع مارتن

ستتذكّر الألم من المستوى 1 – وتفهم لماذا اُخترعت components. درس للقراءة فقط.

تتذكّر نسخ تلك القائمة?

في المستوى 1، كان لديك رأس مع قائمة على كل صفحة. وكلما أضفت صفحة جديدة، كان عليك نسخ القائمة – وإصلاحها في كل مكان مع كل تغيير. مزعج مع ثلاث صفحات، كابوس مع ثلاثين. وهذا الألم بالضبط حيث تبدأ قصتنا.

Components: اكتب مرة، استخدم في كل مكان

فكّر المحترفون: ماذا لو كانت القائمة قطعة كود واحدة تُ«تُدرج» على كل صفحة? غيّرها في مكان واحد – تتغيّر في كل مكان. قطعة كهذه تسمى component.

وليس القائمة فقط. انظر موقعك بعيون مجموعة مكعبات:

بطاقة لاعب (لديكها 4× – وتختلف فقط بالاسم والمركز)،
صورة في المعرض (10× – الصورة فقط تختلف)،
زر (في كل مكان – النص فقط يختلف).

موقع المحترف ليس كومة ملفات HTML. إنه صندوق LEGO: handful من blocks مخصصة (components) تُجمّع في تطبيق كامل.

ما هو React

React أداة (مكتبة) لـ JavaScript تتولى هذا التجميع. اُخترع في Facebook، مجاني، وجزء ضخم من الإنترنت مبني عليه: Facebook، Instagram، Netflix، Airbnb… component في React يبدو هكذا – لا تقلق، ننظر فقط الآن:

function PlayerCard({ name, position, jerseyNumber }) {
  return (
    <div className="card">
      <h3>{name} · #{jerseyNumber}</h3>
      <p>{position}</p>
    </div>
  );
}

ويُستخدم كوسم HTML مخصص:

<PlayerCard name="Jake" position="goalkeeper" jerseyNumber={1} />
<PlayerCard name="Alex" position="midfield" jerseyNumber={8} />

تتعرف على هذا? function (من المستوى 2) ترجع HTML. البطاقة تُكتب مرة وتُستخدم ببيانات مختلفة – كختم مطاطي بحروف قابلة للتبديل.

القوة الخارقة الثانية: React يتولى إعادة الرسم

في المستوى 2 كتبت: “أوجد العنصر، غيّر نصه، أضف class…” في التطبيقات الكبيرة، هذا الترتيب اليدوي كثير لدرجة أنك تضيع. React يقلب الأمر:

تصف كيف يجب أن تبدو الصفحة لبيانات معيّنة. عندما تتغيّر البيانات، React يكتشف وحده ماذا يعيد رسمه.

النتيجة تتغيّر من 0 إلى 1? لا تبحث عن عنصر – فقط غيّر الرقم، وReact يعيد رسم ما يلزم. ستراه في درس state.

ما قادم في هذا المستوى

ستثبت أدوات المحترف: Terminal وNode.js (الدرس القادم).
ستُعدّ أول تطبيق React بـ Vite.
ستتعلّم components، props، وstate.
ستعيد بناء موقع المستوى 1 في React.
ستبني خادم Node.js خاصاً وتوصل سجل زوار.

💡

لا يجب أن تفهم كل شيء من درس اليوم. خذ جملة واحدة: React = components (مكعبات LEGO) + إعادة رسم تلقائية. الباقي عملياً في الدروس القادمة.

ما ستخرج به من هذا الدرس

نسخ نفس الكود لأماكن متعددة فخ – اكتشفت ذلك في المستوى 1 بنفسك.
Component function ترجع قطعة من صفحة. اكتبها مرة، استخدمها مرات ببيانات مختلفة.
React يعيد رسم الصفحة لك: تغيّر البيانات، يغيّر الشاشة.