أول تطبيق React لك — من JSX إلى المكونات 2026

في المقال السابق، قمنا بتثبيت React باستخدام Vite وتأكدنا من أن بيئة العمل جاهزة. الآن حان الوقت لكتابة أول تطبيق React لك وفهم الأساسيات.

في هذا الدليل العملي، سنأخذك خطوة بخطوة من JSX إلى المكونات، مع تمارين وحلول.

ما هو JSX؟

JSX هو اختصار لـ JavaScript XML. هو صيغة تسمح لك بكتابة HTML داخل JavaScript.

مثال:

const element = <h1>مرحباً بالعالم!</h1>;

هذا ليس HTML، وليس JavaScript — إنه JSX!

كيف يعمل JSX؟

JSX يُحوَّل إلى JavaScript عادي بواسطة Babel أو Vite:

// ما تكتبه (JSX):
const element = <h1>مرحباً!</h1>;

// ما يُحوَّل إليه (JavaScript):
const element = React.createElement("h1", null, "مرحباً!");

الفائدة: JSX أسهل للقراءة والكتابة من React.createElement.

لماذا JSX؟

• مألوف: يشبه HTML.
• قوي: يمكن تضمين تعبيرات JavaScript.
• آمن: يمنع هجمات XSS تلقائياً.
• واضح: يوضح بنية الواجهة.

قواعد JSX الأساسية

1. إرجاع عنصر واحد فقط

❌ خطأ:

return (
  <h1>عنوان</h1>
  <p>فقرة</p>
);

✅ صحيح:

return (
  <div>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </div>
);

أو باستخدام Fragment:

return (
  <>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </>
);

2. إغلاق جميع الوسوم

❌ خطأ:

<img src="logo.png">
<br>
<input type="text">

✅ صحيح:

<img src="logo.png" />
<br />
<input type="text" />

3. استخدام className بدلاً من class

❌ خطأ:

<div class="container">...</div>

✅ صحيح:

<div className="container">...</div>

السبب: class كلمة محجوزة في JavaScript.

4. استخدام htmlFor بدلاً من for

❌ خطأ:

<label for="name">الاسم:</label>

✅ صحيح:

<label htmlFor="name">الاسم:</label>

5. تضمين تعبيرات JavaScript بـ {}

const name = "أحمد";
const age = 25;

return (
  <div>
    <h1>مرحباً {name}!</h1>
    <p>عمرك {age} سنة</p>
    <p>بعد 5 سنوات: {age + 5} سنة</p>
  </div>
);

6. الشروط داخل JSX

const isLoggedIn = true;

return (
  <div>
    {isLoggedIn ? <p>مرحباً بك!</p> : <p>سجّل الدخول</p>}
  </div>
);

7. القوائم داخل JSX

const fruits = ["تفاح", "موز", "برتقال"];

return (
  <ul>
    {fruits.map((fruit) => (
      <li key={fruit}>{fruit}</li>
    ))}
  </ul>
);

⚠️ مهم: كل عنصر في القائمة يحتاج key فريد.

أول مكون React

المكوّن (Component) هو دالة JavaScript تُرجع JSX.

1. مكون بسيط

أنشئ ملف src/Hello.tsx:

function Hello() {
  return <h1>مرحباً من React!</h1>;
}

export default Hello;

2. استخدام المكون في App.tsx

افتح src/App.tsx:

import Hello from "./Hello";

function App() {
  return (
    <div>
      <Hello />
      <Hello />
      <Hello />
    </div>
  );
}

export default App;

النتيجة: ستظهر "مرحباً من React!" 3 مرات.

🎉 مبروك! لقد أنشأت أول مكون React!

المكونات مع Props

Props هي بيانات تُمرر للمكون.

1. تعريف Props

interface GreetingProps {
  name: string;
  age: number;
}

function Greeting({ name, age }: GreetingProps) {
  return (
    <div>
      <h2>مرحباً {name}!</h2>
      <p>عمرك {age} سنة</p>
    </div>
  );
}

export default Greeting;

2. استخدام Props

import Greeting from "./Greeting";

function App() {
  return (
    <div>
      <Greeting name="أحمد" age={25} />
      <Greeting name="محمد" age={30} />
      <Greeting name="علي" age={22} />
    </div>
  );
}

export default App;

النتيجة: 3 بطاقات ترحيب بأسماء وأعمار مختلفة.

3. Props مع قيم افتراضية

interface ButtonProps {
  text?: string;
  color?: string;
}

function Button({ text = "اضغط", color = "blue" }: ButtonProps) {
  return (
    <button style={{ backgroundColor: color }}>
      {text}
    </button>
  );
}

إنشاء تطبيق "بطاقة شخصية"

دعنا نبني تطبيقاً يعرض بطاقات شخصية.

1. مكون Card.tsx

interface CardProps {
  name: string;
  role: string;
  image: string;
}

function Card({ name, role, image }: CardProps) {
  return (
    <div className="card">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>{role}</p>
    </div>
  );
}

export default Card;

2. استخدام Card في App.tsx

import Card from "./Card";

function App() {
  const people = [
    { name: "أحمد", role: "مطور ويب", image: "https://i.pravatar.cc/150?img=1" },
    { name: "محمد", role: "مصمم UI", image: "https://i.pravatar.cc/150?img=2" },
    { name: "علي", role: "مهندس بيانات", image: "https://i.pravatar.cc/150?img=3" },
  ];

  return (
    <div className="app">
      <h1>فريقنا</h1>
      <div className="cards">
        {people.map((person) => (
          <Card
            key={person.name}
            name={person.name}
            role={person.role}
            image={person.image}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

3. تصميم src/index.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  background: #f1f5f9;
  padding: 40px;
  direction: rtl;
}

.app h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #1e293b;
}

.cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.card {
  background: white;
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 200px;
}

.card img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-bottom: 16px;
}

.card h3 {
  color: #1e293b;
  margin-bottom: 8px;
}

.card p {
  color: #64748b;
  font-size: 14px;
}

🎉 مبروك! لديك تطبيق React كامل!

التعبيرات الشرطية في JSX

1. if خارج JSX

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  if (isLoggedIn) {
    return <h1>مرحباً بك!</h1>;
  }
  return <h1>سجّل الدخول</h1>;
}

2. Ternary Operator داخل JSX

function Greeting({ isLoggedIn }: { isLoggedIn: boolean }) {
  return (
    <h1>{isLoggedIn ? "مرحباً بك!" : "سجّل الدخول"}</h1>
  );
}

3. && للعرض الشرطي

function Inbox({ messages }: { messages: string[] }) {
  return (
    <div>
      <h1>صندوق الوارد</h1>
      {messages.length > 0 && (
        <p>لديك {messages.length} رسالة</p>
      )}
      {messages.length === 0 && <p>لا توجد رسائل</p>}
    </div>
  );
}

التعبيرات في JSX

1. استدعاء الدوال

function formatName(user: { firstName: string; lastName: string }) {
  return `${user.firstName} ${user.lastName}`;
}

const user = { firstName: "أحمد", lastName: "محمد" };

return <h1>مرحباً {formatName(user)}</h1>;

2. العمليات الحسابية

const price = 100;
const tax = 0.15;

return (
  <div>
    <p>السعر: {price}</p>
    <p>الضريبة: {price * tax}</p>
    <p>الإجمالي: {price + price * tax}</p>
  </div>
);

3. استخدام style ككائن

const styles = {
  color: "red",
  fontSize: "24px",
  fontWeight: "bold",
};

return <h1 style={styles}>عنوان ملوّن</h1>;

⚠️ ملاحظة: أسماء خصائص CSS في React تستخدم camelCase:

• font-size → fontSize
• background-color → backgroundColor
• text-align → textAlign

تمارين عملية

تمرين 1: مكون بسيط

أنشئ مكوناً Welcome يعرض "مرحباً بالعالم!".

الحل:

function Welcome() {
  return <h1>مرحباً بالعالم!</h1>;
}

export default Welcome;

تمرين 2: مكون مع Props

أنشئ مكوناً User يأخذ name و age و city.

الحل:

interface UserProps {
  name: string;
  age: number;
  city: string;
}

function User({ name, age, city }: UserProps) {
  return (
    <div>
      <h3>{name}</h3>
      <p>العمر: {age}</p>
      <p>المدينة: {city}</p>
    </div>
  );
}

export default User;

تمرين 3: قائمة

أنشئ مصفوفة أرقام واعرضها في قائمة.

الحل:

function NumberList() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <ul>
      {numbers.map((n) => (
        <li key={n}>{n}</li>
      ))}
    </ul>
  );
}

تمرين 4: شرط

أنشئ مكوناً يعرض "صيف" إذا كان الشهر 6-8، وإلا يعرض "شتاء".

الحل:

function Season({ month }: { month: number }) {
  const isSummer = month >= 6 && month <= 8;
  return <h1>{isSummer ? "☀️ صيف" : "❄️ شتاء"}</h1>;
}

تمرين 5: بطاقة منتج

أنشئ مكون Product يأخذ name, price, image.

الحل:

interface ProductProps {
  name: string;
  price: number;
  image: string;
}

function Product({ name, price, image }: ProductProps) {
  return (
    <div className="product">
      <img src={image} alt={name} />
      <h3>{name}</h3>
      <p>{price} $</p>
    </div>
  );
}

تمرين 6: عداد بسيط

أنشئ مكوناً يعرض عدد النقرات (بدون state، فقط عرض).

الحل:

function StaticCounter() {
  const count = 5;
  return <p>العدد: {count}</p>;
}

⚠️ ملاحظة: العداد الحقيقي يحتاج useState — سنتعلمه في المقال الرابع.

حل المشاكل الشائعة

🔴 المشكلة 1: Adjacent JSX elements must be wrapped

السبب: إرجاع عدة عناصر بدون غلاف.

الحل: استخدم <div> أو <>...</>:

return (
  <>
    <h1>عنوان</h1>
    <p>فقرة</p>
  </>
);

🔴 المشكلة 2: className بدلاً من class

السبب: استخدام class في JSX.

الحل: استخدم className.

🔴 المشكلة 3: key مفقود في القائمة

السبب: عدم وجود key فريد.

الحل: أضف key={item.id} أو key={index}.

🔴 المشكلة 4: Cannot read property of undefined

السبب: الوصول لخاصية غير موجودة.

الحل: استخدم ?. (Optional Chaining):

<p>{user?.name}</p>

🔴 المشكلة 5: Objects are not valid as a React child

السبب: محاولة عرض كائن مباشرة.

الحل: اعرض خاصية من الكائن:

<p>{user.name}</p>  {/* ✅ */}
<p>{user}</p>       {/* ❌ */}

جدول قواعد JSX

القاعدة	❌ خطأ	✅ صحيح
عنصر واحد	<h1>...</h1><p>...</p>	<div>...</div>
إغلاق الوسوم	<img>	<img />
Class	class="..."	className="..."
For	for="..."	htmlFor="..."
تعبيرات	name	{name}

قائمة تحقق نهائية

المهمة	الحالة
فهم JSX وقواعده	⬜
إنشاء أول مكون React	⬜
استخدام Props	⬜
عرض القوائم	⬜
الشروط في JSX	⬜
بناء تطبيق البطاقات	⬜
حل التمارين الستة	⬜

ماذا بعد هذا المقال؟

الآن بعد أن فهمت JSX والمكونات، أنت جاهز للمقال التالي:

1. المكونات المتقدمة — تعمق في المكونات.
2. State — إدارة البيانات المتغيرة.
3. الأحداث — التعامل مع تفاعل المستخدم.

الخلاصة

في هذا المقال، تعلمت:

• ✅ ما هو JSX وقواعده.
• ✅ إنشاء أول مكون React.
• ✅ استخدام Props لتمرير البيانات.
• ✅ عرض القوائم بـ map.
• ✅ الشروط في JSX.
• ✅ التعبيرات في JSX.
• ✅ حل 6 تمارين عملية.

تذكر: JSX هو قلب React. أتقن قواعده، وستصبح مبرمج React محترف.

هل بنيت أول تطبيق React؟ شاركنا في التعليقات!