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

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

---

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

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

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

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

---

2. أساسيات React

2.1 المكونات

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

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

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

2.2 الـ Virtual DOM & التوافق

• يحتفظ React بـ Virtual DOM لتحسين التحديثات.
• يتم مقارنة التغييرات ("التفريق") ويُطبَّق فقط الحد الأدنى من التحديثات على الـ DOM الحقيقي.

2.3 الحالة & الخصائص

• الخصائص → مدخلات من الأب إلى الابن.
• الحالة → بيانات محلية قابلة للتغيير داخل المكون.

import { useState } from "React";

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

2.4 معالجة الأحداث

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>مرحبًا، {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 دورة الحياة باستخدام المقاطع

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>;
}

---

٥. الخاتمة

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

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

---