🧨 مدخل عملي إلى أداة Metasploit: دليلك لاختبار الاختراق الأخلاقي في 2025

🚀 مقدمة: ما هي React ولماذا أحدثت ثورة في عالم الويب؟

لقد تعلمت كيف تتلاعب بصفحة الويب باستخدام JavaScript مباشرة. هذا رائع للمهام البسيطة، ولكن تخيل أنك تبني تطبيقًا ضخمًا مثل فيسبوك أو انستغرام. ستصبح إدارة كل التغييرات في الصفحة (ماذا يظهر، متى يختفي، كيف يتحدث كل جزء مع الآخر) كابوسًا من الكود المعقد وغير المنظم.

هنا يأتي دور React. هي ليست لغة جديدة، بل هي مكتبة JavaScript متخصصة في بناء واجهات المستخدم (User Interfaces). مهمتها هي أن تجعل عملية بناء واجهات معقدة وتفاعلية أمراً سهلاً ومنظماً.

React تقوم بذلك عبر ثلاثة مبادئ أساسية:

1. بنية قائمة على المكونات (Component-Based): تقسيم واجهة المستخدم إلى قطع صغيرة، مستقلة، وقابلة لإعادة الاستخدام تسمى "مكونات" (مثل قطع الليغو).
2. واجهة مستخدم تصريحية (Declarative UI): أنت تصف لـ React كيف يجب أن تبدو الواجهة في حالة معينة، و React تتكفل بكل خطوات تحديث الصفحة للوصول إلى تلك الحالة.
3. الـ Virtual DOM: نسخة افتراضية سريعة من DOM الحقيقية، تسمح لـ React بتحديد أسرع طريقة لتحديث الواجهة، مما يعطي أداءً ممتازًا.

جدول المحتويات:

• تجهيز بيئة العمل (أسهل طريقة للمبتدئين)
• ما هو JSX؟ (الكتابة بأسلوب HTML داخل JS)
• المكونات (Components): قلب React النابض
• الـ Props: تمرير البيانات للمكونات
• الـ State والخطاف useState: ذاكرة المكون
• التعامل مع الأحداث (Handling Events)
• مشروع تطبيقي: بناء عداد تفاعلي
• أسئلة شائعة (FAQ)
• ما هي الخطوة التالية بعد أساسيات React؟

---

🛠️ تجهيز بيئة العمل (أسهل طريقة للمبتدئين)

لتشغيل React، تحتاج أولاً إلى تثبيت Node.js على جهازك (إذا لم تكن قد فعلت ذلك بالفعل)، والذي يأتي معه مدير الحزم npm.

أسهل وأسرع طريقة لبدء مشروع React جديد اليوم هي باستخدام أداة تسمى Vite. افتح الطرفية (Terminal أو Command Prompt) واكتب الأوامر التالية بالترتيب:

# 1. أنشئ مشروع React جديد (سيطلب منك اسم المشروع واختيار React)
npm create vite@latest

# 2. ادخل إلى مجلد المشروع الذي أنشأته
cd your-project-name

# 3. قم بتثبيت الحزم اللازمة
npm install

# 4. قم بتشغيل خادم التطوير المحلي
npm run dev

الآن افتح المتصفح على العنوان الذي يظهر في الطرفية (عادة http://localhost:5173) وسترى أول تطبيق React لك!

---

📝 ما هو JSX؟ (الكتابة بأسلوب HTML داخل JS)

JSX هو امتداد لبناء الجملة في JavaScript يسمح لك بكتابة ما يشبه HTML مباشرة داخل ملفات JavaScript. إنها ليست HTML، ولكنها تجعل كتابة واجهات المستخدم أسهل وأكثر قابلية للقراءة.

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

أهم ملاحظتين في JSX:

• بدلاً من استخدام class كما في HTML، نستخدم className.
• يمكنك إدراج أي تعبير JavaScript داخل JSX بوضعه بين قوسي مجموعة { }.

const userName = "Ali";
const element = <h1>Welcome, {userName}</h1>; // سيتم عرض: Welcome, Ali

---

🧱 المكونات (Components): قلب React النابض

المكون هو ببساطة دالة JavaScript تقوم بإرجاع (return) جزء من واجهة المستخدم على شكل JSX. المكونات هي ما يسمح لنا بتقسيم التطبيق إلى قطع صغيرة ومنظمة.

قواعد المكونات:

• يجب أن يبدأ اسم أي مكون بحرف كبير (e.g., Header, UserProfile).
• المكون يجب أن يعيد قطعة واحدة فقط من JSX. إذا كان لديك عدة عناصر، يجب أن تغلفها في عنصر أب واحد (مثل <div> أو <>).

// هذا مكون بسيط اسمه Welcome
function Welcome() {
  return <h1>Hello from the Welcome component!</h1>;
}

// يمكنك استخدامه في مكون آخر مثل هذا
function App() {
  return (
    <div>
      <Welcome />
      <Welcome />
    </div>
  );
}

---

📥 الـ Props: تمرير البيانات للمكونات

الـ Props (اختصار لـ properties) هي الطريقة التي تتواصل بها المكونات مع بعضها. تسمح لك بتمرير بيانات من مكون "أب" (Parent) إلى مكون "ابن" (Child)، تمامًا مثل تمرير وسائط (arguments) لدالة.

الـ props هي للقراءة فقط (read-only)؛ لا يمكن للمكون الابن تغيير الـ props التي استقبلها.

// 1. في المكون الابن، نستقبل props كـ argument
function Greeting(props) {
  return <h1>Hello, {props.name}! You are {props.age} years old.</h1>;
}

// 2. في المكون الأب، نمرر البيانات عند استخدام المكون
function App() {
  return <Greeting name="Sara" age={25} />;
}

---

💾 الـ State والخطاف useState: ذاكرة المكون

إذا كانت الـ props هي بيانات تأتي من الخارج، فإن الـ State هي بيانات يمتلكها المكون ويديرها بنفسه. إنها "ذاكرة" المكون. عندما تتغير قيمة الـ State، تقوم React بإعادة رسم (re-render) المكون ليعكس هذا التغيير.

لإضافة State إلى مكون، نستخدم "خطافًا" (Hook) يسمى useState.

useState يرجع مصفوفة تحتوي على قيمتين:

1. القيمة الحالية للـ State.
2. دالة (function) لتحديث هذه القيمة.

import { useState } from 'react';

function Counter() {
  // 1. نعلن عن متغير state جديد اسمه count
  const [count, setCount] = useState(0); // 0 هي القيمة الابتدائية

  return (
    <div>
      <p>You clicked {count} times</p>
      {/* هنا سنضيف الزر لاحقًا */}
    </div>
  );
}

---

🖱️ التعامل مع الأحداث (Handling Events)

التعامل مع الأحداث في React يشبه HTML، ولكن بأسماء camelCase (مثل onClick بدلاً من onclick) ونقوم بتمرير دالة كمعالج للحدث.

هنا تظهر قوة State + Events معًا لخلق تفاعلية حقيقية.

---

🚀 مشروع تطبيقي: بناء عداد تفاعلي

لنكمل مثال العداد السابق بإضافة زر يقوم بتحديث الـ State عند النقر عليه.

لقد نقرت 0 مرات

هذا هو الكود الكامل للمكون الذي ينتج الشكل أعلاه:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  // دالة سيتم استدعاؤها عند النقر
  function handleClick() {
    setCount(count + 1); // نطلب من React تحديث الـ state
  }

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={handleClick}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

---

❓ أسئلة شائعة (FAQ)

ما الفرق الجوهري بين Props و State؟

Props (خصائص) تشبه إعدادات المكون التي يتم تمريرها من الأب ولا يمكن للمكون تغييرها. State (الحالة) هي الذاكرة الداخلية للمكون التي يمكنه تغييرها بنفسه، وعندما تتغير، يتم تحديث واجهة المستخدم.

هل React مكتبة أم إطار عمل (Framework)؟

بشكل دقيق، React هي مكتبة (Library) لأنها تركز فقط على بناء واجهة المستخدم. إطار العمل (مثل Angular) يكون أكثر شمولاً ويفرض عليك هيكلية معينة للمشروع بأكمله. مرونة React تسمح لك بدمجها مع مكتبات أخرى (مثل React Router للتنقل).

ما هي الـ Hooks؟

الـ Hooks هي دوال خاصة (مثل useState) تسمح لك بـ "التعلق" أو استخدام ميزات React مثل الـ State ودورة حياة المكون داخل المكونات الدالية (Functional Components)، والتي هي الطريقة الحديثة لكتابة مكونات React.

---

🎓 ما هي الخطوة التالية بعد أساسيات React؟

تهانينا! لقد فهمت الآن كيف تفكر React وكيف تبني مكونات بسيطة وتفاعلية. لقد فتحت الباب لعالم ضخم من الإمكانيات. خطوتك التالية يمكن أن تكون تعلم:

• المزيد من الـ Hooks: خصوصًا useEffect للتعامل مع التأثيرات الجانبية (مثل جلب البيانات من API).
• التنقل بين الصفحات: باستخدام مكتبة شهيرة مثل React Router.
• إدارة الحالة المتقدمة: لمشاركة الـ State بين مكونات كثيرة باستخدام أدوات مثل Redux Toolkit أو Zustand.
• التواصل مع APIs: لربط تطبيق React الخاص بك بواجهة خلفية (Backend) وجلب بيانات حقيقية.

رحلة ممتعة في عالم React المثير! ✨