JSX و React: تعلم كيفية كتابة كود قابل للصيانة – بطاقة مرجعية

مرحبًا بكم في React استكشاف! في هذه المقالة، سنغطي قيمة React في عام 2025 ونوضح الأساسيات بصيغة دليل سريع. توقع وجود أمثلة كود موثقة، شروحات، ومرجعات سريعة لمساعدتك على كتابة كود React نظيف وقابل للصيانة. 🚀

---

1. قيمة React في عام 2025

React لا يزال أحد أكثر مكتبات الواجهة الأمامية هيمنة بفضل:

• المرونة (مكتبة، وليس إطار عمل كامل).
• بيئة ضخمة (Redux Toolkit, Zustand, React Router, TanStack Query).
• الميزات الحديثة: Hooks، التصيير المتزامن، Suspense، ومكونات الخادم.
• الاعتماد على المدى الطويل وطلب الوظائف.

👉 إذا كنت مطور ويب، تعلم React لا يزال يستحق الجهد.

---

2. أساسيات React

2.1 المكونات

الوحدات الأساسية لتطبيقات React.

• المكونات الوظيفية (مفضلة)
• مكونات الفئة (قديمة، نادرًا ما تحتاجها)

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

2.2 Virtual DOM & Reconciliation

• React يحافظ على Virtual DOM لتحسين التحديثات.
• يتم مقارنة التغييرات (“diffed”) ويتم تطبيق تحديثات محدودة فقط على الـ DOM الحقيقي.

2.3 State & Props

• Props → مدخلات من الأب إلى الطفل.
• State → بيانات محلية قابلة للتغيير داخل المكون.

import { useState } from "React";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

2.4 Event Handling

function ButtonClick() {
  function handleClick() {
    console.log("Button clicked!");
  }
  return <button onClick={handleClick}>Click me</button>;
}

---

3. شرح JSX

3.1 الصيغة الأساسية

const element = <h1>Hello, world!</h1>;

3.2 تضمين التعبيرات

const name = "John";
const element = <h1>Hello, {name}!</h1>;

3.3 الخصائص & بروبز

const image = <img src="scenery.jpg" alt="A beautiful scenery" />;

⚡ ملاحظة: استخدم camelCase للخصائص (className, onClick).

3.4 الأطفال & العلامات المغلقة ذاتياً

const element = (
  <div>
    <h1>Welcome</h1>
    <p>This is JSX</p>
  </div>
);

const img = <img src="pic.jpg" alt="scenery" />;

3.5 المكونات & JSX

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}

---

4. React أساسيات ملخص سريع

4.1 التصيير في React 18+

import React from "React";
import ReactDOM from "React-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

4.2 بروبز

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>;
}
<Welcome name="Jane" />;

4.3 الحالة

import { useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());
  return <div>{date.toLocaleTimeString()}</div>;
}

4.4 دورة الحياة مع Hooks

import { useEffect, useState } from "React";

function Clock() {
  const [date, setDate] = useState(new Date());

  useEffect(() => {
    const timer = setInterval(() => setDate(new Date()), 1000);
    return () => clearInterval(timer); // cleanup
  }, []);

  return <div>{date.toLocaleTimeString()}</div>;
}

4.5 العرض الشرطي

function Greeting({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
}

---

5. Conclusion

JSX يدمج JavaScript + ترميز واجهة المستخدم في تركيب واحد قابل للصيانة. مع ميزات React الحديثة مثل Hooks, Suspense, و Server Components, كتابة كود نظيف وقابل للصيانة لم تكن أسهل من أي وقت مضى.

✅ احتفظ بهذا الدليل السريع جاهزًا عند بناء مشروع React القادم!

---