لماذا React.js؟ ولماذا يجب أن تتعلمها لتبني واجهات الويب الحديثة؟

مرحباً أيها المطورون الطموحون! اليوم سنتعلم لماذا أصبحت React.js الخيار الأول لبناء واجهات الويب الحديثة، وكيف يمكنك البدء في استخدامها لإنشاء تطبيقات ويب تفاعلية وفعالة.

مقدمة سريعة إلى React.js

React.js هي مكتبة JavaScript مفتوحة المصدر لبناء واجهات المستخدم (UIs)، تم تطويرها وصيانتها بواسطة فيسبوك ومجتمع من المطورين. تتميز React بنهجها القائم على المكونات (Component-Based) والبرمجة التصريحية (Declarative Programming)، بالإضافة إلى استخدامها لـ Virtual DOM لتحسين الأداء.

Virtual DOM: هو نسخة خفيفة من الـ DOM الحقيقي يحتفظ بها React في الذاكرة. عندما تتغير حالة التطبيق، يقوم React بتحديث الـ Virtual DOM أولاً، ثم يقارنه بالـ Virtual DOM السابق لتحديد الحد الأدنى من التغييرات اللازمة في الـ DOM الحقيقي، مما يقلل من عمليات التحديث المكلفة ويزيد من سرعة التطبيق.

الخطوة 1: بناء أول مكون React (المكون الرئيسي App)

في React، كل شيء يدور حول المكونات. المكون هو جزء مستقل وقابل لإعادة الاستخدام من واجهة المستخدم. لنبدأ بإنشاء المكون الرئيسي لتطبيقنا، والذي عادة ما يكون اسمه App.

افترض أن لدينا ملف App.js. سنكتب فيه مكوناً وظيفياً (Functional Component) بسيطاً يعرض رسالة ترحيب.

// App.js
import React from 'react'; // استيراد مكتبة React الضرورية لبناء المكونات

function App() { // تعريف مكون وظيفي (Functional Component) باسم App
  return ( // دالة return تُعيد وصفاً لـ UI في صورة JSX
    <div className="App"> {/* عنصر div هو الحاوية الرئيسية للمكون، className بدلاً من class في HTML */}
      <h1>أهلاً بك في عالم React!</h1> {/* عنوان رئيسي */}
      <p>هذا هو أول مكون React لك.</p> {/* فقرة نصية */}
    </div>
  );
}

export default App; // تصدير المكون App لكي يمكن استيراده واستخدامه في ملفات أخرى

شرح الكود:

• نستورد React لأننا نستخدم JSX (وهي صيغة تشبه HTML داخل JavaScript).
• function App() { ... }: هذه هي طريقة تعريف مكون وظيفي. المكونات الوظيفية هي دوال JavaScript عادية تعيد JSX.
• return (...): داخلها نكتب JSX الذي يصف شكل واجهة المستخدم لهذا المكون.
• className="App": في JSX، نستخدم className بدلاً من class لتجنب التعارض مع الكلمة المحجوزة class في JavaScript.
• export default App;: هذه الجملة تجعل المكون App متاحاً للاستيراد في ملفات JavaScript أخرى، مثل index.js.

الخطوة 2: إنشاء مكون قابل لإعادة الاستخدام (WelcomeMessage)

إحدى أقوى ميزات React هي القدرة على تقسيم واجهة المستخدم إلى مكونات صغيرة قابلة لإعادة الاستخدام. لننشئ مكوناً منفصلاً لرسالة الترحيب.

افترض أن لدينا ملف WelcomeMessage.js.

// WelcomeMessage.js
import React from 'react'; // استيراد React

// تعريف مكون وظيفي يستقبل خاصية (prop) اسمها 'name'
function WelcomeMessage(props) {
  // استخدام خاصية 'name' لعرض رسالة ترحيب مخصصة
  return (
    <h2>مرحباً يا {props.name}!</h2> {/* عرض قيمة الخاصية name */}
  );
}

export default WelcomeMessage; // تصدير المكون

شرح الكود:

• المكون WelcomeMessage يقبل كائن props كوسيط. الـ props (اختصار لـ "properties") هي طريقة لتمرير البيانات من مكون أب إلى مكون ابن.
• نصل إلى البيانات الممررة عبر props.name.
• هذا المكون الآن عام ويمكن استخدامه عدة مرات مع أسماء مختلفة.

الآن، لنستخدم هذا المكون داخل App.js:

// App.js (تحديث)
import React from 'react';
import WelcomeMessage from './WelcomeMessage'; // استيراد المكون WelcomeMessage الذي أنشأناه

function App() {
  return (
    <div className="App">
      <h1>أهلاً بك في عالم React!</h1>
      <WelcomeMessage name="محمد" /> {/* استخدام المكون WelcomeMessage وتمرير خاصية 'name' له */}
      <WelcomeMessage name="فاطمة" /> {/* استخدام آخر لنفس المكون مع اسم مختلف */}
      <p>هذا هو أول مكون React لك.</p>
    </div>
  );
}

export default App;

شرح التحديث:

• قمنا باستيراد WelcomeMessage من ملفه الخاص.
• استخدمنا المكون كعلامة HTML عادية: <WelcomeMessage name="محمد" />.
• مررنا خاصية name بقيمة "محمد" و"فاطمة" لكل استخدام للمكون.

الخطوة 3: إدارة الحالة (State) باستخدام Hook (useState)

التطبيقات الحديثة تحتاج إلى التفاعل مع المستخدم وتغيير واجهة المستخدم بناءً على الأحداث. هذا هو المكان الذي تأتي فيه "الحالة" (State). في React، نستخدم Hooks مثل useState لإدارة الحالة في المكونات الوظيفية.

لنضيف عداداً بسيطاً إلى تطبيقنا يزيد عند النقر على زر.

// App.js (تحديث)
import React, { useState } from 'react'; // استيراد useState Hook
import WelcomeMessage from './WelcomeMessage';

function App() {
  // تعريف حالة جديدة باسم 'count' وقيمتها الأولية 0
  // 'count' هو المتغير الذي يحمل القيمة الحالية
  // 'setCount' هي الدالة التي نستخدمها لتحديث قيمة 'count'
  const [count, setCount] = useState(0);

  // دالة لمعالجة حدث النقر على الزر
  const handleIncrement = () => {
    setCount(count + 1); // تحديث قيمة count بزيادتها بمقدار 1
  };

  return (
    <div className="App">
      <h1>أهلاً بك في عالم React!</h1>
      <WelcomeMessage name="مطور React" />
      <p>هذا هو أول مكون React لك.</p>

      <h3>عداد بسيط:</h3>
      <p>القيمة الحالية للعداد: <strong>{count}</strong></p> {/* عرض قيمة العداد الحالية */}
      <button onClick={handleIncrement}>زيادة العداد</button> {/* زر عند النقر عليه يستدعي handleIncrement */}
    </div>
  );
}

export default App;

شرح التحديث:

• import React, { useState } from 'react';: نستورد useState من React.
• const [count, setCount] = useState(0);: هذا هو استخدام useState.
  • count: المتغير الذي سيحتوي على القيمة الحالية للحالة (في هذه الحالة، قيمة العداد).
  • setCount: دالة نستخدمها لتحديث قيمة count. عندما تستدعيها، سيتم إعادة عرض المكون بقيمته الجديدة.
  • useState(0): القيمة الأولية للحالة هي 0.
• handleIncrement: دالة بسيطة تقوم بزيادة count بمقدار 1 عن طريق استدعاء setCount.
• <button onClick={handleIncrement}>: نربط دالة handleIncrement بحدث onClick للزر. عندما ينقر المستخدم على الزر، سيتم استدعاء الدالة.

ملاحظة تقنية: عند تحديث الحالة باستخدام دالة التحديث (مثل setCount)، تقوم React بإعادة عرض المكون (re-render) تلقائياً لتعكس التغييرات في واجهة المستخدم. هذه هي طبيعة React التفاعلية والتصريحية.

الكود النهائي الكامل

لنفترض أن لديك مشروع React مُعد مسبقاً (باستخدام Vite أو Create React App). هذه هي الملفات الرئيسية:

public/index.html (أو ما يعادله)

ملف HTML الأساسي الذي يستضيف تطبيق React الخاص بك:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>تطبيق React الخاص بي</title>
</head>
<body>
    <div id="root"></div> <!-- هذا هو العنصر الذي سيقوم React بتحميل التطبيق بداخله -->
    <script type="module" src="/src/index.js"></script> <!-- نقطة الدخول لتطبيق React -->
</body>
</html>

src/index.js (نقطة الدخول الرئيسية)

هذا الملف يقوم بتحميل المكون App وعرضه في الـ DOM:

// src/index.js
import React from 'react'; // استيراد React
import ReactDOM from 'react-dom/client'; // استيراد ReactDOM لربط React بالـ DOM
import App from './App'; // استيراد المكون الرئيسي App

// الحصول على العنصر الذي سيتم تحميل تطبيق React بداخله (عادة ما يكون div ذو id="root")
const root = ReactDOM.createRoot(document.getElementById('root'));

// عرض المكون App داخل العنصر root
root.render(
  <React.StrictMode> {/* React.StrictMode هو مكون يساعد في اكتشاف المشاكل المحتملة في التطبيق */}
    <App /> {/* عرض المكون الرئيسي App */}
  </React.StrictMode>
);

src/WelcomeMessage.js

مكون رسالة الترحيب القابل لإعادة الاستخدام:

// src/WelcomeMessage.js
import React from 'react';

function WelcomeMessage(props) {
  return (
    <h2>مرحباً يا {props.name}!</h2>
  );
}

export default WelcomeMessage;

src/App.js (المكون الرئيسي الكامل)

المكون الرئيسي الذي يجمع كل ما تعلمناه:

// src/App.js
import React, { useState } from 'react'; // استيراد React و useState Hook
import WelcomeMessage from './WelcomeMessage'; // استيراد مكون WelcomeMessage

function App() {
  const [count, setCount] = useState(0); // تعريف حالة العداد بقيمة أولية 0

  const handleIncrement = () => { // دالة لزيادة العداد
    setCount(count + 1); // تحديث الحالة
  };

  return ( // هيكل الـ UI للمكون
    <div className="App" style={{ textAlign: 'center', fontFamily: 'Arial, sans-serif' }}> {/* تنسيقات بسيطة */}
      <h1>أهلاً بك في عالم React!</h1>
      <WelcomeMessage name="مطور React" /> {/* استخدام مكون WelcomeMessage */}
      <WelcomeMessage name="زائر الموقع" /> {/* استخدام آخر لنفس المكون */}
      <p>هذا هو عرض عملي لمكونات React وإدارة الحالة.</p>

      <h3>عداد بسيط وتفاعلي:</h3>
      <p>القيمة الحالية للعداد: <strong>{count}</strong></p>
      <button 
        onClick={handleIncrement} 
        style={{ 
          padding: '10px 20px', 
          fontSize: '16px', 
          cursor: 'pointer', 
          backgroundColor: '#61dafb', 
          color: 'white', 
          border: 'none', 
          borderRadius: '5px' 
        }}
      >
        زيادة العداد
      </button>
    </div>
  );
}

export default App;

النتيجة المتوقعة

بعد تشغيل تطبيق React هذا، ستظهر لك صفحة ويب تحتوي على عنوان رئيسي "أهلاً بك في عالم React!". ستجد أيضاً رسالتي ترحيب مختلفتين: "مرحباً يا مطور React!" و "مرحباً يا زائر الموقع!". أسفل ذلك، سيظهر عداد قيمته الأولية 0، وبجواره زر "زيادة العداد". عند كل نقرة على الزر، ستزداد قيمة العداد المعروضة على الشاشة تلقائياً، مما يوضح كيفية عمل إدارة الحالة (State Management) في React وتحديث واجهة المستخدم بشكل تفاعلي.

الفهرسالتالي →