مقدمة إلى JSX في React

ما هو JSX؟

JSX (JavaScript XML) هو امتداد لكتابة واجهات React، وهو يشبه HTML ولكنه يعمل داخل JavaScript. يتيح JSX كتابة عناصر React بطريقة سهلة وقريبة من شكل HTML التقليدي، مما يجعل الكود أكثر وضوحًا وقابلية للفهم.

مثال على JSX:

const element = <h1>مرحبًا بك في React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

في هذا المثال، يتم إنشاء عنصر <h1> باستخدام JSX، ثم يتم عرضه داخل عنصر HTML باستخدام ReactDOM.render.

---

كيفية استخدام الأنماط (Styles) في JSX

يمكن تطبيق الأنماط في JSX بعدة طرق، مثل:

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

const MyComponent = () => {
  return <h1 className="title">مرحبًا بك!</h1>;
};

2. الأنماط المضمنة (Inline Styles)

const styles = {
  color: 'blue',
  fontSize: '20px',
  textAlign: 'center'
};

const MyComponent = () => {
  return <h1 style={styles}>مرحبًا بك في React!</h1>;
};

3. استخدام ملفات CSS خارجية

import './styles.css';

const MyComponent = () => {
  return <h1 className="title">مرحبًا بك!</h1>;
};

---

التعامل مع الكائنات (Objects) في JavaScript

الكائنات في JavaScript هي بنية بيانات تُستخدم لتخزين البيانات بطريقة منظمة.

1. إنشاء كائن بسيط

const person = {
  name: "أحمد",
  age: 30,
  city: "دمشق"
};

console.log(person.name); // أحمد

2. إضافة وحذف خصائص من الكائن

person.job = "مهندس برمجيات";
delete person.city;

console.log(person);

3. التكرار على خصائص الكائن

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

4. استخدام الكائنات في React

const user = {
  name: "سارة",
  age: 25,
  country: "مصر"
};

const UserProfile = () => {
  return (
    <div>
      <h2>الاسم: {user.name}</h2>
      <p>العمر: {user.age}</p>
      <p>الدولة: {user.country}</p>
    </div>
  );
};

---

خاتمة

JSX يسهل كتابة واجهات React بطريقة منظمة، بينما توفر JavaScript طرقًا متعددة للتعامل مع الأنماط والكائنات، مما يساعد في بناء تطبيقات ديناميكية وفعالة. استخدام الكائنات في React يمكن أن يكون مفيدًا لتمرير البيانات وإدارة الحالة بسهولة.