Components: طقم بناء للويب

ابنِ أول مكوناتك المخصصة واجمع صفحة منها كـ LEGO.

شاهد معي: أول component مخصص لك

الـ component دالة بحرف أول كبير ترجع JSX. من المعتاد وضع كل واحد في ملفه. أنشئ الملف src/Header.jsx:

function Header() {
  return (
    <header>
      <h1>FC Riverside</h1>
      <nav>
        <a href="#team">Team</a>
        <a href="#results">Results</a>
      </nav>
    </header>
  );
}

export default Header;

واستخدمه في src/App.jsx:

import Header from './Header.jsx';

function App() {
  return (
    <div>
      <Header />
      <main>
        <p>Welcome to our club's website!</p>
      </main>
    </div>
  );
}

export default App;

import ... from ... – «استعِر component من ملف آخر.» يقترن مع export default.
<Header /> – وسم مخصص! الحرف الكبير يقول لـ React: هذا ليس HTML، إنه componentي.

تتذكّر ألم المستوى 1 – القائمة منسوخة على كل صفحة؟ اختفت للتو. الرأس موجود مرة واحدة، في ملف واحد.

شاهد معي: component ببيانات قابلة للتبديل (props)

ختم بحروف قابلة للتبديل – البيانات تُمرَّر إلى الـ component كـ props (خصائص). الملف src/PlayerCard.jsx:

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

export default PlayerCard;

الاستخدام في App.jsx:

import PlayerCard from './PlayerCard.jsx';

<PlayerCard name="Jake" position="goalkeeper" number={1} />
<PlayerCard name="Alex" position="midfield" number={8} />
<PlayerCard name="Tom" position="forward" number={9} />

الـ props تُكتب كسمات HTML. النص بين علامات اقتباس، والأرقام وJavaScript داخل {}. الـ component يفكّكها في ({ name, position, number }) ويستخدمها.

شاهد معي: قائمة من array

ثلاث بطاقات يدوياً – حسناً. لكن ماذا لو كانت عشرين؟ ضع البيانات في array واستخدم .map():

const players = [
  { name: "Jake", position: "goalkeeper", number: 1 },
  { name: "Matt", position: "defense", number: 4 },
  { name: "Alex", position: "midfield", number: 8 },
  { name: "Tom", position: "forward", number: 9 },
];

function App() {
  return (
    <div className="cards">
      {players.map((player) => (
        <PlayerCard
          key={player.number}
          name={player.name}
          position={player.position}
          number={player.number}
        />
      ))}
    </div>
  );
}

.map() يمرّ على الـ array وينشئ بطاقة لكل عنصر. إضافة لاعب = إضافة صف إلى الـ array. لا يُنسخ HTML. (key مجرد مساعد لـ React لتمييز البطاقات – ضع أي شيء فريد هناك.)

دورك الآن 💪

ابنِ طقم components لمشروعك في مشروع React:

component اسمه Header باسم موقعك والقائمة.
component بطاقة بـ props تناسب مشروعك: 🏫 TeacherCard (الاسم، المادة) · 🙋 HobbyCard (الاسم، الوصف) · 🌍 TripCard (المكان، الوصف) · ⚽ PlayerCard (الاسم، المركز، الرقم).
ضع البيانات في array وارسمها بـ .map() – 4 عناصر على الأقل.
انسخ أنماط بطاقاتك من موقعك القديم إلى src/App.css – معرفتك بـ CSS تنتقل بلا تغيير!

✅

تحقق من نفسك: الصفحة مجمّعة من وسومك الخاصة (<Header />، <PlayerCard />…)، والبطاقات تولد من array بيانات، وإضافة عنصر إلى الـ array تضيف بطاقة إلى الصفحة. هكذا بالضبط تُبنى التطبيقات الحقيقية.

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

Component = ملف + دالة بحرف كبير + export default؛ يُستخدم عبر import و<Tag />.
Props = بيانات قابلة للتبديل للـ component: <Card name="Jake" number={1} />.
القوائم تُرسم بـ array.map() – البيانات تقود الشاشة.