Blog

دورة React التعليمية: دليل المبتدئين

Audrey Lopez

Audrey Lopez

13 يونيو 2025

دورة React التعليمية: دليل المبتدئين

مرحباً بك، أيها المطور الطموح في React! لقد اتخذت خياراً رائعاً. React هي مكتبة JavaScript قوية وشائعة لبناء واجهات المستخدم، وتعلمها هو وسيلة مؤكدة لتعزيز مهاراتك في تطوير الويب. سيأخذك هذا الدليل الشامل خطوة بخطوة من الصفر إلى الاحتراف، مزوداً إياك بالمعرفة العملية التي تحتاجها لبدء بناء تطبيقات React الخاصة بك في عام 2025. سنركز على التطبيق العملي، وليس مجرد القراءة، لذا استعد لكتابة بعض الأكواد!

💡
هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API) تولد توثيقاً جميلاً لواجهات برمجة التطبيقات؟

هل تريد منصة متكاملة وشاملة لفريق المطورين الخاص بك للعمل معاً بأقصى قدر من الإنتاجية؟

Apidog يلبي جميع متطلباتك، ويحل محل Postman بسعر معقول أكثر بكثير!
button

لنقم بإعداد بيئة تطوير React الخاصة بك

قبل أن نتمكن من البدء في بناء واجهات مستخدم مذهلة، نحتاج إلى إعداد مكان للعمل. فكر في هذا على أنه تحضير ورشة عملك قبل بدء مشروع جديد.

تثبيت الأساسيات: Node.js و npm

يتم بناء تطبيقات React وإدارتها باستخدام Node.js ومدير الحزم الخاص به، npm (Node Package Manager).

للبدء، توجه إلى الموقع الرسمي لـ Node.js وقم بتنزيل أحدث إصدار دعم طويل الأجل (LTS). برنامج التثبيت بسيط ومباشر؛ فقط اتبع التعليمات التي تظهر على الشاشة. بمجرد التثبيت، سيكون لديك Node.js و npm جاهزين للاستخدام. يمكنك التحقق من التثبيت بفتح الطرفية (terminal) أو موجه الأوامر (command prompt) وكتابة:Bash

node -v
npm -v

يجب أن تطبع هذه الأوامر إصدارات Node.js و npm التي قمت بتثبيتها، على التوالي.

مشروعك الأول في React باستخدام Vite

في الماضي، كان create-react-app هو الأداة المفضلة لبدء مشروع React جديد. ومع ذلك، فإن مشهد تطوير الويب الحديث يتحرك بسرعة، وفي عام 2025، يعتبر Vite الخيار الموصى به لسرعته وكفاءته المذهلة.

لإنشاء مشروع React جديد باستخدام Vite، افتح الطرفية الخاصة بك وقم بتشغيل الأمر التالي:Bash

npm create vite@latest my-first-react-app -- --template react

دعنا نقسم هذا الأمر:

بمجرد انتهاء الأمر، سيكون لديك دليل جديد باسم مشروعك. انتقل إلى هذا الدليل:Bash

cd my-first-react-app

بعد ذلك، تحتاج إلى تثبيت تبعيات المشروع. هذه هي الحزم الأخرى التي يحتاجها تطبيق React الخاص بك ليعمل بشكل صحيح. قم بتشغيل هذا الأمر:Bash

npm install

أخيراً، لمشاهدة تطبيق React الجديد الخاص بك وهو يعمل، ابدأ خادم التطوير:Bash

npm run dev

ستعرض الطرفية الخاصة بك عنوان URL محلياً، عادةً http://localhost:5173. افتح هذا العنوان في متصفح الويب الخاص بك، وسترى تطبيق React الافتراضي الذي أنشأه Vite. تهانينا، لقد قمت للتو بإعداد مشروع React الأول الخاص بك!

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

الآن بعد أن أصبح لديك تطبيق React يعمل، دعنا نتعمق في المفاهيم الأساسية التي تجعل React قوية جداً: المكونات (components) و JSX.

ما هي المكونات (Components)؟

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

في مشروعك my-first-react-app، افتح مجلد src وستجد ملفاً باسم App.jsx. هذا هو مكون التطبيق الرئيسي الخاص بك. دعنا نبسط محتواه لفهم الأساسيات:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

في هذا الكود:

فهم JSX: JavaScript XML

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

خلف الكواليس، تقوم أداة تسمى transpiler (في حالتنا، مدعومة بواسطة Vite) بتحويل JSX هذا إلى JavaScript عادي يمكن للمتصفحات فهمه.

دعنا نعدل ملف App.jsx الخاص بنا لنرى قوة JSX. يمكننا تضمين تعبيرات JavaScript مباشرة داخل JSX الخاص بنا باستخدام الأقواس المعقوفة {}.JavaScript

// src/App.jsx

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
    </div>
  );
}

export default App;

احفظ الملف، وسيقوم متصفحك بالتحديث تلقائياً لعرض المحتوى الجديد. هذه ميزة في Vite تسمى Hot Module Replacement (HMR)، وتوفر تجربة تطوير رائعة.

إنشاء أول مكون مخصص لك

دعنا ننشئ مكوناً خاصاً بنا. في مجلد src، أنشئ ملفاً جديداً باسم Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>This is a greeting from my custom component!</h2>
  );
}

export default Greeting;

الآن، دعنا نستخدم مكون Greeting الجديد هذا داخل مكون App.jsx الخاص بنا.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // استيراد مكون Greeting

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
      <Greeting /> {/* استخدام مكون Greeting */}
    </div>
  );
}

export default App;

باستيراد ثم استخدام <Greeting /> تماماً مثل وسم HTML عادي، قمنا بتكوين واجهة المستخدم الخاصة بنا من مكونات متعددة. هذا هو اللبنة الأساسية لتطبيقات React.

تمرير البيانات باستخدام Props

مكون Greeting الخاص بنا ثابت بعض الشيء. ماذا لو أردنا تحية أشخاص مختلفين؟ هنا يأتي دور props (اختصار لـ properties أو خصائص). Props هي الطريقة التي تمرر بها البيانات من مكون أب إلى مكون ابن.

جعل المكونات ديناميكية باستخدام Props

دعنا نعدل ملف Greeting.jsx الخاص بنا لقبول prop باسم name.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Hello, {props.name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

الآن، في App.jsx، يمكننا تمرير prop الاسم إلى مكونات Greeting الخاصة بنا.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

سترى الآن ثلاث تحيات مختلفة، كل منها باسم فريد. تتيح لنا Props إعادة استخدام المكونات ببيانات مختلفة، مما يجعل واجهة المستخدم الخاصة بنا مرنة بشكل لا يصدق.

ممارسة شائعة وحديثة في JavaScript هي تفكيك (destructure) كائن props مباشرة في قائمة معاملات الدالة. دعنا نعيد هيكلة Greeting.jsx:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Hello, {name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

يحقق هذا نفس النتيجة ولكن بكود أنظف وأكثر إيجازاً.

إدارة ذاكرة المكون باستخدام State

بينما تعتبر props رائعة لتمرير البيانات عبر شجرة المكونات، ماذا يحدث عندما يحتاج المكون إلى تذكر وإدارة بياناته الخاصة؟ هنا يأتي دور state (الحالة). الحالة هي البيانات التي تتم إدارتها داخل المكون. عندما تتغير حالة المكون، ستقوم React تلقائياً بإعادة عرض هذا المكون ليعكس الحالة الجديدة.

تقديم خطاف useState (Hook)

لإدارة الحالة في المكونات الوظيفية، نستخدم دالة خاصة من React تسمى Hook. الخطاف الأساسي هو useState.

دعنا نبني مكون عداد بسيط لفهم كيفية عمل useState. أنشئ ملفاً جديداً في مجلد src الخاص بك يسمى Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>لقد نقرت {count} مرة</p>
      <button onClick={() => setCount(count + 1)}>
        انقر هنا
      </button>
    </div>
  );
}

export default Counter;

دعنا نقسم هذا:

  1. count: القيمة الحالية للحالة (state).
  2. setCount: دالة يمكننا استخدامها لتحديث حالة count.

الآن، دعنا نضيف مكون Counter هذا إلى ملف App.jsx الخاص بنا:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>تطبيق React الرائع الخاص بي</h1>
      <Counter />
    </div>
  );
}

export default App;

يجب أن ترى الآن عداداً في متصفحك. في كل مرة تنقر فيها على الزر، يزداد الرقم. تقوم React بإعادة عرض مكون Counter في كل مرة تتغير حالته.

الاستجابة لإجراءات المستخدم: التعامل مع الأحداث (Events)

التفاعل هو في قلب تطبيقات الويب الحديثة. توفر React طريقة بسيطة ومتسقة للتعامل مع الأحداث مثل النقرات، إرسال النماذج، وإدخال لوحة المفاتيح.

لقد رأينا بالفعل معالج أحداث أساسي في مكون Counter الخاص بنا باستخدام onClick. دعنا نستكشف هذا بشكل أكبر من خلال بناء نموذج بسيط يأخذ مدخلات المستخدم.

أنشئ ملف مكون جديد باسم NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

function NameForm() {
  const [name, setName] = useState('');

  const handleSubmit = (event) => {
    event.preventDefault(); // يمنع السلوك الافتراضي لإرسال النموذج
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        الاسم:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">إرسال</button>
    </form>
  );
}

export default NameForm;

دعنا نحلل مكون النموذج هذا:

أضف مكون NameForm هذا إلى ملف App.jsx الخاص بك لترى كيف يعمل.

عرض المعلومات: العرض الشرطي (Conditional Rendering) والقوائم (Lists)

تحتاج التطبيقات الواقعية غالباً إلى إظهار أو إخفاء المحتوى بناءً على شروط معينة، وكثيراً ما تحتاج إلى عرض قوائم من البيانات.

الإظهار والإخفاء باستخدام العرض الشرطي (Conditional Rendering)

دعنا ننشئ مكوناً يعرض رسالة مختلفة اعتماداً على ما إذا كان المستخدم مسجلاً الدخول أم لا. أنشئ ملفاً باسم LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>مرحباً بعودتك!</h2>;
  }
  return <h2>يرجى تسجيل الدخول.</h2>;
}

export default LoginMessage;

يمكننا أيضاً استخدام العامل الثلاثي (ternary operator) لعرض شرطي أكثر إيجازاً.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>مرحباً بعودتك!</h2> : <h2>يرجى تسجيل الدخول.</h2>}
    </div>
  );
}

export default LoginMessage;

يمكنك بعد ذلك استخدام هذا المكون في App.jsx وتمرير prop isLoggedIn لرؤية الرسائل المختلفة.

عرض قوائم البيانات

لعرض قائمة من العناصر، ستستخدم عادةً طريقة المصفوفة map(). دعنا ننشئ مكوناً لعرض قائمة بالفواكه. أنشئ ملفاً باسم FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>فواكهي المفضلة:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

هنا، نقوم بعملية map على مصفوفة fruits، ولكل فاكهة، نعيد عنصراً من نوع <li>.

ستلاحظ الخاصية key={index}. عندما تقوم بعرض قائمة من العناصر، تحتاج React إلى key فريد لكل عنصر لتحديث القائمة بكفاءة عند تغييرها. استخدام فهرس المصفوفة كـ key مقبول للقوائم البسيطة والثابتة. ومع ذلك، بالنسبة للقوائم الديناميكية التي يمكن إضافة العناصر إليها أو إزالتها أو إعادة ترتيبها، من الأفضل استخدام معرف فريد من بياناتك إذا كان متاحاً.

إضافة نمط (Style) إلى تطبيقك

التطبيق الرائع يحتاج إلى مظهر جيد. هناك عدة طرق لتنسيق مكونات React الخاصة بك.

أوراق أنماط CSS (CSS Stylesheets)

الطريقة الأكثر وضوحاً هي استخدام ملفات CSS العادية. في مجلد src، ستجد ملفاً باسم App.css. يمكنك إضافة أنماطك هناك.

على سبيل المثال، لتنسيق مكون FruitList الخاص بنا، يمكنك إضافة هذا إلى App.css:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

بعد ذلك، في ملف FruitList.jsx الخاص بك، يمكنك استخدام فئات CSS هذه.JavaScript

// src/FruitList.jsx
import './App.css'; // تأكد من استيراد ملف CSS

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>فواكهي المفضلة:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

لاحظ أننا نستخدم className بدلاً من class في JSX، لأن class كلمة محجوزة في JavaScript.

وحدات CSS (CSS Modules)

بالنسبة للتطبيقات الأكبر، توفر وحدات CSS طريقة لتحديد نطاق الأنماط لمكون معين، مما يمنع تعارض الأنماط. يتم تسمية ملف وحدة CSS بامتداد .module.css.

دعنا ننشئ ملف FruitList.module.css:CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

الآن، في ملف FruitList.jsx، تقوم باستيراد الأنماط ككائن:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>فواكهي المفضلة (منسقة بوحدات CSS):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

سيقوم Vite تلقائياً بإنشاء أسماء فئات فريدة، مما يضمن أن الأنماط في FruitList.module.css تنطبق فقط على مكون FruitList.

التنقل في تطبيقك باستخدام React Router

تحتوي معظم تطبيقات الويب على صفحات متعددة. للتعامل مع التنقل بين هذه "الصفحات" في تطبيق صفحة واحدة (SPA) مثل التطبيق المبني باستخدام React، نستخدم مكتبة تسمى React Router.

إعداد React Router

أولاً، تحتاج إلى تثبيت React Router:Bash

npm install react-router-dom

إنشاء صفحاتك

دعنا ننشئ مكونين بسيطين للصفحات: HomePage.jsx و AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>الصفحة الرئيسية</h1>
      <p>مرحباً بك في الصفحة الرئيسية لتطبيقنا المذهل!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>صفحة حول</h1>
      <p>هذا كل شيء عن تطبيقنا المذهل.</p>
    </div>
  );
}

export default AboutPage;

تكوين الموجه (Router)

الآن، سنقوم بتكوين مساراتنا (routes) في App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">الرئيسية</Link>
            </li>
            <li>
              <Link to="/about">حول</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

دعنا نقسم المكونات الجديدة من React Router:

الآن، عندما تنقر على روابط "الرئيسية" و "حول"، سيتغير المحتوى دون إعادة تحميل كاملة للصفحة. لقد قمت بتنفيذ التوجيه من جانب العميل (client-side routing) بنجاح!

المضي قدماً: خطاف useEffect

خطاف useState مخصص لإدارة الحالة التي تؤثر مباشرة على ما يتم عرضه. ولكن ماذا عن الآثار الجانبية (side effects)، مثل جلب البيانات من واجهة برمجة تطبيقات (API)، إعداد الاشتراكات، أو تغيير DOM يدوياً؟ لهذا، نستخدم خطاف useEffect.

يتم تشغيل خطاف useEffect بعد كل عملية عرض (render) بشكل افتراضي. دعنا نراه عملياً من خلال إنشاء مكون يجلب البيانات من واجهة برمجة تطبيقات وهمية.

أنشئ ملفاً جديداً باسم DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // سيتم استدعاء هذه الدالة بعد عرض المكون
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // مصفوفة التبعية الفارغة مهمة!

  if (loading) {
    return <p>جار التحميل...</p>;
  }

  return (
    <div>
      <h3>البيانات التي تم جلبها:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

مفتاح فهم useEffect هنا هو المعامل الثاني: مصفوفة التبعية (dependency array).

أضف DataFetcher إلى ملف App.jsx الخاص بك لترى كيف يجلب ويعرض البيانات عند تحميل المكون.

الخلاصة والخطوات التالية

لقد قطعت شوطاً طويلاً! لقد تعلمت كيفية:

هذا إنجاز ضخم، ولديك الآن أساس متين للبناء عليه. عالم React واسع ومثير. فيما يلي بعض الموضوعات التي قد ترغب في استكشافها لاحقاً:

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

مرحباً بك في مجتمع React. ترميز سعيد!

💡
هل تريد أداة رائعة لاختبار واجهات برمجة التطبيقات (API) تولد توثيقاً جميلاً لواجهات برمجة التطبيقات؟

هل تريد منصة متكاملة وشاملة لفريق المطورين الخاص بك للعمل معاً بأقصى قدر من الإنتاجية؟

Apidog يلبي جميع متطلباتك، ويحل محل Postman بسعر معقول أكثر بكثير!
button

ممارسة تصميم API في Apidog

اكتشف طريقة أسهل لبناء واستخدام واجهات برمجة التطبيقات

التسجيل مجانًاتحميل