🧩 Components و JSX

📖 سلسلة تعلم React و Next.js | المقال 3

🧩 Components & JSX

Components هي اللبنات الأساسية في React. تعلمها وستفهم كل شيء!

🤔 ما هو Component؟

Component = دالة تُرجع HTML (JSX)

// src/app/page.tsx

export default function Home() {
  return (
    <div>
      <h1>مرحباً بالعالم! 👋</h1>
      <p>أول تطبيق React</p>
    </div>
  );
}

✨ ما هو JSX؟

JSX = JavaScript + XML
تستطيع كتابة HTML داخل JavaScript!

قواعد JSX:

1️⃣ استخدام className بدل class

<div className="container">  ✅
<div class="container">        ❌

2️⃣ إغلاق العناصر الفارغة

<img src="photo.jpg" />  ✅
<img src="photo.jpg">     ❌

3️⃣ عنصر جذر واحد

// ✅ صحيح
return (
  <div>
    <h1>العنوان</h1>
    <p>النص</p>
  </div>
);

// ❌ خطأ
return (
  <h1>العنوان</h1>
  <p>النص</p>
);

🧩 إنشاء Component مخصص

أنشئ ملف جديد: src/components/Navbar.tsx

// src/components/Navbar.tsx

export default function Navbar() {
  return (
    <nav className="bg-gray-900 text-white p-4">
      <div className="container mx-auto flex justify-between">
        
        {/* Logo */}
        <div className="text-xl font-bold">
          MyApp
        </div>
        
        {/* Links */}
        <div className="flex gap-6">
          <a href="/">Home</a>
          <a href="/about">About</a>
        </div>
        
      </div>
    </nav>
  );
}

📥 استخدام Component

// src/app/page.tsx

import Navbar from '@/components/Navbar';

export default function Home() {
  return (
    <>
      <Navbar />
      
      <div className="p-8">
        <h1>مرحباً! 👋</h1>
      </div>
    </>
  );
}

🎯 Props - تمرير البيانات

Props = خصائص تمررها للـ Component

// Component مع Props
function UserCard({ name, email }: { name: string; email: string }) {
  return (
    <div className="p-4 border rounded">
      <h3 className="font-bold">{name}</h3>
      <p className="text-gray-600">{email}</p>
    </div>
  );
}

// استخدام
<UserCard name="Ahmed" email="ahmed@example.com" />

📊 ملخص

المفهوم	الشرح
Component	دالة تُرجع JSX
JSX	HTML داخل JavaScript
Props	بيانات تُمرر للـ Component
className	بدل class في JSX

📌 تسميات: React Components JSX

✨ ← المقال السابق | المقال التالي → ✨

سلسلة تعلم React و Next.js مع Ahmed Issa