دليل React للمبتدئين: مرجع عملي شامل لتعلّم أساسيات React

إذا كنت تبحث عن نقطة بداية واضحة لتعلّم React، فهذا الدليل صُمّم ليمنحك فهماً عملياً لأهم المفاهيم التي تحتاجها لبناء واجهات استخدام حديثة على الويب. ستتعرّف هنا على الفكرة العامة وراء React، وكيفية إنشاء التطبيقات، وصياغة الواجهات باستخدام JSX، ثم الانتقال إلى المكوّنات Components، والخصائص Props، وإدارة الحالة State، وصولاً إلى أساسيات Hooks.

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

ما هي React فعلياً؟

تُعرّف React رسمياً بأنها مكتبة JavaScript لإنشاء واجهات المستخدم. لكن هذا التعريف المختصر لا يوضّح الصورة كاملة. الفكرة الأساسية هي أن React تساعدك على بناء واجهات تفاعلية معقّدة بطريقة منظّمة وقابلة لإعادة الاستخدام.

بدلاً من كتابة واجهة التطبيق ككتلة واحدة كبيرة يصعب صيانتها، تسمح لك React بتقسيمها إلى أجزاء صغيرة تُسمّى Components. كل جزء يملك دوراً محدداً، ويمكن دمجه مع غيره لصناعة تطبيق متكامل.

لماذا يتجه المطورون إلى React؟

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

ماذا تحتاج قبل تعلّم React؟

حتى تبدأ بشكل صحيح، من المهم أن تمتلك أساساً جيداً في JavaScript. لا تحتاج إلى مستوى متقدم جداً، لكن ينبغي أن تكون مرتاحاً مع المفاهيم التالية:

• المتغيرات Variables.
• أنواع البيانات الأساسية.
• الشروط مثل if وswitch.
• المصفوفات والدوال الخاصة بها مثل map() وfilter().
• الدوال Functions.
• الوحدات البرمجية ES Modules.

إذا كانت React مبنية بـ JavaScript، فلماذا لا نستخدم JavaScript فقط؟

يمكنك بالطبع بناء واجهات باستخدام JavaScript وحدها، لكن React توفّر طبقة تنظيمية قوية تجعل بناء التطبيقات الكبيرة أسهل بكثير. فقد صُمّمت JavaScript في بداياتها لإضافة سلوك بسيط إلى صفحات الويب، بينما جاءت React لتساعد المطورين على بناء تطبيقات كاملة بواجهات ديناميكية متقدمة.

باختصار: JavaScript هي اللغة، أما React فهي أداة تنظّم طريقة استخدام تلك اللغة داخل الواجهة.

كيف تبدأ في إنشاء تطبيقات React؟

هناك أكثر من طريقة لبدء مشروع React، ويعتمد الاختيار على هدفك من التعلّم أو التطوير.

أشهر الطرق المتاحة

1. إضافة React داخل ملف HTML عبر سكربتات خارجية.
2. استخدام بيئة سحابية جاهزة مثل CodeSandbox.
3. إنشاء مشروع على جهازك باستخدام أدوات مخصّصة مثل Create React App.

ما الخيار الأنسب للمبتدئ؟

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

اختيار الأداة ليس هو العامل الأهم، بل فهمك العميق لطريقة عمل React نفسها.

فهم JSX: الصياغة التي تجعل الواجهة أوضح

JSX هي الطريقة الشائعة لكتابة عناصر الواجهة في React. تبدو شبيهة بـ HTML، لكنها ليست HTML خالصاً، بل صياغة خاصة تتحول لاحقاً إلى استدعاءات JavaScript.

أبسط مثال على عنصر JSX

<div>Hello React!</div>

هذا المثال يعبّر عن عنصر واجهة بسيط، لكن لكي يظهر داخل المتصفح يجب تمريره إلى عملية التصيير باستخدام ReactDOM.render() في الإصدارات التقليدية.

ما الفرق بين JSX وHTML؟

يمكنك كتابة عناصر شبيهة بـ HTML داخل JSX، لكن توجد فروق مهمة، منها:

• بعض الخصائص تُكتب بصيغة camelCase.
• الخاصية class تُكتب على شكل className.
• الأنماط style تُمرَّر ككائن object وليس كنص.

<div id="header">
  <h1 className="title">Hello React!</h1>
</div>

العناصر ذاتية الإغلاق في JSX

في JSX يجب إغلاق العناصر التي لا تحتوي على محتوى داخلي مثل input وimg وbr باستخدام الشرطة المائلة الختامية.

<input type="email" />

العناصر الثنائية تحتاج وسم إغلاق واضح

إذا كان العنصر من النوع الذي يفتح ويغلق، مثل div أو button، فلا بد من كتابة وسم الإغلاق الكامل.

<button>Click me</button>

تنسيق العناصر داخل JSX

عند استخدام style داخل JSX، يجب تمرير القيم في كائن، وتُكتب أسماء الخصائص بصيغة camelCase.

<h1 style={{ color: "blue", fontSize: 22, padding: "0.5em 1em" }}>
  Hello React!
</h1>

لاحظ أن القيم الرقمية لبعض الخصائص مثل fontSize يمكن كتابتها كأرقام مباشرة بدلاً من نصوص منتهية بـ px.

العرض الشرطي داخل JSX

من المزايا المهمة في React أنك تستطيع الاستفادة من منطق JavaScript للتحكم فيما يظهر للمستخدم.

const isAuthUser = true;

if (isAuthUser) {
  return <div>Hello user!</div>;
} else {
  return <button>Login</button>;
}

غالباً ما يوضع هذا النوع من المنطق داخل مكوّن React، وليس بشكل منفصل.

لماذا لا يفهم المتصفح JSX مباشرة؟

لأن JSX ليست لغة قياسية يفهمها المتصفح. هي صياغة تُحوَّل إلى استدعاءات دوال مثل React.createElement().

React.createElement("div", null, "Hello React!")

لهذا نحتاج إلى أداة تحويل مثل Babel لكي يتمكن المتصفح من تنفيذ الشيفرة.

المكوّنات في React: حجر الأساس لكل تطبيق

المكوّن Component هو وحدة مستقلة تمثل جزءاً من واجهة المستخدم. وغالباً ما يُكتب كمجرد دالة JavaScript تُرجع JSX.

function Greeting() {
  return <div>Hello React!</div>;
}

لماذا نستخدم المكوّنات؟

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

كيف نعرض مكوّناً داخل التطبيق؟

import React from 'react';
import ReactDOM from 'react-dom';

function Greeting() {
  return <div>Hello React!</div>;
}

ReactDOM.render(<Greeting />, document.getElementById("root"));

في هذا المثال، يجري عرض المكوّن Greeting داخل العنصر الذي يحمل المعرّف root.

ماذا يمكن أن يُرجع المكوّن؟

لا يشترط أن يُرجع المكوّن عناصر JSX فقط. يمكنه أيضاً إعادة:

• نصوص strings.
• أرقام.
• قيم منطقية.
• القيمة null.
• مصفوفات أو fragments.

استخدام null شائع عندما تريد أن يمتنع المكوّن عن عرض أي شيء.

function Greeting() {
  if (isAuthUser) {
    return "Hello again!";
  } else {
    return null;
  }
}

قاعدة العنصر الأب الواحد

عند إرجاع أكثر من عنصر داخل JSX، يجب تغليفها بعنصر أب واحد، أو استخدام Fragment.

function Greeting() {
  const isAuthUser = true;

  if (isAuthUser) {
    return (
      <>
        <h1>Hello again!</h1>
        <button>Logout</button>
      </>
    );
  } else {
    return null;
  }
}

المكوّنات يمكن أن تحتوي مكوّنات أخرى

واحدة من أقوى مزايا React هي إمكانية تركيب الواجهة من مكوّنات متداخلة.

import React from 'react';
import ReactDOM from 'react-dom';
import Layout from './components/Layout';
import Navbar from './components/Navbar';
import Aside from './components/Aside';
import Main from './components/Main';
import Footer from './components/Footer';

function App() {
  return (
    <Layout>
      <Navbar />
      <Main />
      <Aside />
      <Footer />
    </Layout>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

هذا النمط يجعل الشيفرة أكثر وضوحاً، لأن اسم كل مكوّن يعبّر عن وظيفته ومكانه داخل التطبيق.

استخدام JavaScript داخل JSX

يمكنك إدراج القيم الديناميكية داخل JSX باستخدام الأقواس المعقوفة {}. وهذا يسمح لك بعرض متغيرات أو نواتج تعبيرات برمجية بشكل مباشر.

function Greeting() {
  const isAuthUser = true;
  return <div>{isAuthUser ? "Hello!" : null}</div>;
}

تذكّر أن JSX تقبل القيم البسيطة مثل النصوص والأرقام والقيم المنطقية، لكنها لا تعرض الكائنات العادية plain objects بشكل مباشر.

فهم Props: تمرير البيانات بين المكوّنات

Props هي الآلية الأساسية لتمرير البيانات من مكوّن إلى آخر. ويمكنك النظر إليها على أنها مدخلات المكوّن.

ReactDOM.render(<Greeting username="John!" />, document.getElementById("root"));

function Greeting(props) {
  return <h1>Hello {props.username}</h1>;
}

ملاحظات مهمة حول Props

• تصل دائماً إلى المكوّن على هيئة كائن object.
• هي للقراءة فقط داخل المكوّن الابن.
• لا يجب تعديلها مباشرة.

function Header(props) {
  props.username = "Doug";
  return <h1>Hello {props.username}</h1>;
}

المثال السابق غير صحيح من الناحية المفاهيمية، لأن تعديل props يكسر مبدأ نقاء المكوّنات pure functions.

الخاصية الخاصة children

الخاصية children مفيدة جداً عندما تريد أن يعمل مكوّن ما كغلاف لبقية المكوّنات، مثل مكوّن التخطيط Layout.

function Layout(props) {
  return <div className="container">{props.children}</div>;
}

function IndexPage() {
  return (
    <Layout>
      <Header />
      <Hero />
      <Footer />
    </Layout>
  );
}

function AboutPage() {
  return (
    <Layout>
      <About />
      <Footer />
    </Layout>
  );
}

الميزة هنا أن كل تنسيق أو سلوك مشترك داخل Layout سيُطبّق تلقائياً على المحتوى الداخلي.

التعامل مع القوائم والمفاتيح Keys

عند عرض بيانات متكررة، مثل قائمة مستخدمين أو مقالات، تعتمد React عادة على الدالة map() لتحويل عناصر المصفوفة إلى عناصر واجهة.

const people = ["John", "Bob", "Fred"];
const peopleList = people.map((person) => <p>{person}</p>);

كما يمكن استخدام map() مع المكوّنات أيضاً.

function App() {
  const people = ["John", "Bob", "Fred"];

  return (
    <ul>
      {people.map((person) => (
        <Person name={person} />
      ))}
    </ul>
  );
}

function Person({ name }) {
  return <p>This person's name is: {name}</p>;
}

لماذا تُعد key مهمة جداً؟

كل عنصر ناتج داخل قائمة يجب أن يمتلك خاصية key فريدة. تستخدم React هذه الخاصية للتعرّف على العناصر وتحديث ما تغيّر فقط بدلاً من إعادة بناء القائمة كاملة.

function App() {
  const people = [
    { id: "Ksy7py", name: "John" },
    { id: "6eAdl9", name: "Bob" },
    { id: "8fTr21", name: "Fred" },
  ];

  return (
    <ul>
      {people.map((person) => (
        <Person key={person.id} name={person.name} />
      ))}
    </ul>
  );
}

أفضل ممارسة هنا هي استخدام معرف فريد وثابت من البيانات نفسها، لا ترتيب العنصر داخل المصفوفة إلا عند الضرورة القصوى.

ما المقصود بـ State في React؟

State تمثل البيانات المتغيرة داخل المكوّن مع مرور الوقت. وهي العنصر الذي يمنح تطبيقك التفاعل والحيوية. فبدونها، ستبقى الواجهة مجرد عناصر ثابتة لا تستجيب لما يفعله المستخدم.

أين نستخدم State عادة؟

• عند تتبّع قيمة حقل داخل نموذج form.
• عند تخزين بيانات جرى جلبها من API.
• عند تحديث محتوى الواجهة بناءً على أفعال المستخدم.
• عند الحاجة لتغيير بيانات يجب ألا تُعدَّل مباشرة داخل props.

مدخل إلى Hooks مع useState

في المكوّنات الوظيفية الحديثة، يجري إنشاء الحالة باستخدام useState. وهي واحدة من أشهر React Hooks.

الـ Hook هي دالة خاصة تتيح لك الوصول إلى ميزات داخل React من داخل المكوّنات الوظيفية. أما useState فتُستخدم لإنشاء حالة محلية وإدارتها.

import React from 'react';

function Greeting() {
  const state = React.useState("Hello React");
  return <div>{state[0]}</div>;
}

كيف تعمل useState؟

تستقبل useState قيمة ابتدائية، ثم تعيد مصفوفة تحتوي على عنصرين:

1. قيمة الحالة الحالية.
2. دالة لتحديث تلك الحالة.

وغالباً نستخدم تفكيك المصفوفة array destructuring لكتابة أوضح.

import React from 'react';

function Greeting() {
  const [title] = React.useState("Hello React");
  return <div>{title}</div>;
}

تحديث الحالة باستخدام الدالة المخصّصة

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

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" />
    </div>
  );
}

لكن المثال السابق لا يحدّث الحالة بعد. لكي يحدث التغيير، نحتاج إلى التعامل مع الأحداث.

الأحداث في React وكيفية التقاط تفاعل المستخدم

الأحداث Events هي الطريقة التي نحصل بها على معلومات حول أفعال المستخدم داخل التطبيق. من أكثر الأحداث شيوعاً:

• onClick للنقر.
• onChange عند تغيير قيمة حقل إدخال.
• onSubmit عند إرسال نموذج.

import React from "react";

function Greeting() {
  const [title] = React.useState("Hello React");

  function handleInputChange(event) {
    console.log("input changed!", event);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

كلما كتب المستخدم داخل حقل الإدخال، ستُستدعى الدالة handleInputChange ويُمرَّر إليها كائن الحدث event.

تحديث State فعلياً باستخدام useState

لجعل الحقل يغيّر عنوان الترحيب مباشرة، نستخدم دالة التحديث المرتبطة بالحالة.

import React from "react";

function Greeting() {
  const [title, setTitle] = React.useState("Hello React");

  function handleInputChange(event) {
    setTitle(event.target.value);
  }

  return (
    <div>
      <h1>{title}</h1>
      <input placeholder="Update title" onChange={handleInputChange} />
    </div>
  );
}

في هذا المثال، تؤخذ القيمة الجديدة من event.target.value وتُمرَّر إلى setTitle. وبمجرد تحديث الحالة، تعيد React تصيير المكوّن re-render ليظهر التغيير فوراً على الشاشة.

لماذا تُعد إعادة التصيير مهمة؟

لأنها الآلية التي تجعل الواجهة تستجيب للبيانات الجديدة. فإذا تغيّرت الحالة ولم تُعد React بناء الجزء المتأثر من الواجهة، فلن يلاحظ المستخدم أي تحديث بصري.

خطواتك التالية بعد تعلّم الأساسيات

بعد استيعاب المبادئ السابقة، يمكنك الانتقال إلى موضوعات أعمق تساعدك على تطوير تطبيقات أكثر احترافية، مثل:

• إنشاء Custom Hooks لإعادة استخدام المنطق البرمجي.
• التعمق في Props وأنماط تمرير البيانات.
• جلب البيانات من الخوادم باستخدام fetch أو مكتبات مخصّصة.
• إدارة التوجيه داخل التطبيق باستخدام React Router.
• فهم أوسع لإدارة الحالة على مستوى التطبيق.
• بناء تطبيقات كاملة تتكامل مع Node.js وواجهات API.

نصائح عملية لتعلّم React بسرعة أكبر

• لا تكتفِ بالقراءة، بل طبّق كل مفهوم في مشروع صغير.
• درّب نفسك على تقسيم الواجهة إلى مكوّنات من البداية.
• ركّز على فهم تدفق البيانات بين Props وState.
• راجع أخطاءك في console باستمرار، فهي مصدر تعلّم مهم.
• تجنّب حفظ الأمثلة دون فهم منطقها.

الخلاصة التقنية

React ليست مجرد مكتبة لعرض العناصر على الشاشة، بل نموذج تفكير كامل لبناء واجهات تفاعلية بطريقة منظمة وقابلة للتوسع. عندما تفهم جيداً مفاهيم JSX، والمكوّنات، وProps، وState، وuseState، فأنت تضع أساساً قوياً لأي مشروع حديث يعتمد على الواجهة الأمامية. من الناحية التقنية، السر الحقيقي في إتقان React ليس كثرة الأدوات، بل فهم تدفق البيانات وإعادة التصيير وكيفية تصميم مكوّنات نظيفة وسهلة الصيانة.