شرح React للمبتدئين: دليلك الكامل لفهم Props و State وإدارة البيانات كمحترف

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

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

ما هي React؟ أساسيات لا غنى عنها

ببساطة، React هي مكتبة JavaScript مفتوحة المصدر، طورتها فيسبوك، متخصصة في بناء واجهات المستخدم (User Interfaces) التفاعلية والمعقدة. جوهر قوتها يكمن في فكرتين أساسيتين: المكونات والـ Virtual DOM.

المكونات (Components): قطع الليغو في عالم البرمجة

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

• مكون لشريط التنقل (Navbar).
• مكون لصندوق كتابة المنشور (Post Box).
• مكون لكل منشور في الصفحة (Post).
• مكون للزر “أعجبني” (Like Button).

هذا الأسلوب يجعل الكود منظماً، سهل الصيانة، ويسمح لفرق العمل الكبيرة بالعمل على أجزاء مختلفة من التطبيق في نفس الوقت. انظر لهذا المثال لمكون وظيفي (Functional Component) بسيط:

// هذا مكون وظيفي بسيط يعرض رسالة ترحيب
function WelcomeMessage() {
  return <h1>أهلاً وسهلاً في مكتبة أبو عمر</h1>;
}

// يمكننا استخدامه في أي مكان هكذا: <WelcomeMessage />

الـ Virtual DOM: سر سرعة React

عندما تتغير البيانات في تطبيقك (مثلاً، عند إضافة منتج للسلة)، تحتاج واجهة المستخدم للتحديث. التلاعب المباشر بالـ DOM (هيكل الصفحة الفعلي في المتصفح) عملية بطيئة ومكلفة.

React تحل هذه المشكلة بذكاء عبر استخدام “الـ DOM الافتراضي” (Virtual DOM). وهو نسخة طبق الأصل من الـ DOM الحقيقي موجودة في الذاكرة. عندما يتغير شيء ما، تقوم React بالتالي:

1. تُنشئ نسخة جديدة من الـ Virtual DOM بالتحديثات الجديدة.
2. تقارن النسخة الجديدة بالنسخة القديمة لتحديد الأجزاء التي تغيرت فقط.
3. تقوم بتحديث تلك الأجزاء المتغيرة فقط في الـ DOM الحقيقي.

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

السر الأعظم: الفرق الجوهري بين Props و State

هنا تبدأ المتعة الحقيقية. المكونات ليست مجرد قوالب جامدة، بل هي كيانات حية تتفاعل مع البيانات. فهم الفرق بين Props و State هو مفتاح احتراف React.

الـ Props: بيانات للقراءة فقط من الأب للابن

فكر في الـ Props (اختصار لـ Properties) كأنها تعليمات أو “هدايا” يقدمها مكون “أب” لمكون “ابن”. الابن يستقبل هذه الهدية ويستخدمها كما هي، لكن لا يمكنه تغييرها. هذا يضمن تدفق البيانات باتجاه واحد يمكن تتبعه بسهولة (من الأعلى للأسفل).

// المكون الابن: BookCard يستقبل بيانات الكتاب عبر props
function BookCard(props) {
  return (
    <div className="book">
      <h3>{props.title}</h3>
      <p>المؤلف: {props.author}</p>
    </div>
  );
}

// المكون الأب: App يمرر البيانات للمكون الابن
function App() {
  return (
    <div>
      {/* تمرير البيانات كـ props */}
      <BookCard title="مقدمة ابن خلدون" author="ابن خلدون" />
      <BookCard title="ألف ليلة وليلة" author="مؤلف غير معروف" />
    </div>
  );
}

الـ State: الذاكرة الداخلية للمكون

الـ State هي بيانات داخلية خاصة بالمكون نفسه، تمثل “ذاكرته” التي يمكنه القراءة منها وتعديلها. عندما يتغير الـ State، تقوم React تلقائياً بإعادة رسم (re-render) هذا المكون ليعكس التغيير على الشاشة.

لإدارة الـ State في المكونات الوظيفية، نستخدم أدوات من React تسمى “Hooks”، وأشهرها هو useState.

import React, { useState } from 'react';

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

  return (
    <div>
      <p>لقد ضغطت {count} مرات</p>
      {/* عند الضغط، نستدعي setCount لزيادة الـ count بواحد */}
      <button onClick={() => setCount(count + 1)}>
        اضغط هنا
      </button>
    </div>
  );
}

مثال عملي: لنبني “مكتبة أبو عمر” خطوة بخطوة

التطبيق العملي هو أفضل طريقة للتعلم. لنبني نسخة مصغرة من متجر كتب باستخدام المفاهيم التي شرحناها.

الخطوة 1: مكون الكتاب (Book) واستقبال الـ Props

سننشئ مكون Book بسيط يستقبل تفاصيل الكتاب عبر props ويعرضها. لاحظ أننا سنمرر دالة onAddToCart أيضاً كـ prop، وهي وظيفة سيستدعيها المكون عند الضغط على الزر.

// src/components/Book.js
function Book({ book, onAddToCart }) {
  return (
    <div className="book-card">
      <img src={book.image} alt={book.title} />
      <h3>{book.title}</h3>
      <p>المؤلف: {book.author}</p>
      <p>السعر: ${book.price}</p>
      <button onClick={() => onAddToCart(book)}>أضف إلى السلة</button>
    </div>
  );
}

export default Book;

الخطوة 2: عرض قائمة الكتب (BookList)

الآن، سننشئ مكون BookList الذي يأخذ مصفوفة من الكتب (كـ prop) ويعرضها باستخدام مكون Book لكل عنصر في المصفوفة. استخدام key={book.id} ضروري لمساعدة React على تتبع العناصر بكفاءة.

// src/components/BookList.js
import Book from './Book';

function BookList({ books, onAddToCart }) {
  return (
    <div className="book-list">
      {books.map(book => (
        <Book key={book.id} book={book} onAddToCart={onAddToCart} />
      ))}
    </div>
  );
}

export default BookList;

الخطوة 3: إدارة الحالة المركزية بالـ State

هنا يأتي دور المكون الرئيسي App.js. سيكون هذا المكون هو “مصدر الحقيقة” (Single Source of Truth) والمسؤول عن إدارة الحالة (State) العامة للتطبيق، مثل قائمة الكتب وسلة التسوق.

// src/App.js
import React, { useState } from 'react';
import BookList from './components/BookList';
import Cart from './components/Cart'; // مكون لعرض عدد عناصر السلة

const initialBooks = [
  { id: 1, title: 'حياة في الإدارة', author: 'غازي القصيبي', price: 15, image: 'url-to-image.jpg' },
  { id: 2, title: 'ذاكرة الجسد', author: 'أحلام مستغانمي', price: 20, image: 'url-to-image.jpg' },
];

function App() {
  const [books, setBooks] = useState(initialBooks);
  // state لإدارة عناصر سلة التسوق
  const [cartItems, setCartItems] = useState([]);

  // دالة لإضافة كتاب إلى السلة
  const handleAddToCart = (bookToAdd) => {
    setCartItems(prevItems => [...prevItems, bookToAdd]);
  };

  return (
    <div className="app">
      <header>
        <h1>مكتبة أبو عمر</h1>
        <Cart itemCount={cartItems.length} />
      </header>
      <main>
        <BookList books={books} onAddToCart={handleAddToCart} />
      </main>
    </div>
  );
}

export default App;

الخطوة 4: نمط “رفع الحالة للأعلى” (Lifting State Up)

هل لاحظت ما فعلناه؟ المكون Book يحتاج إلى تعديل سلة التسوق، لكن حالة السلة cartItems موجودة في المكون الأب App. لحل هذه المشكلة:

1. أنشأنا دالة handleAddToCart في المكون الأب (App)، فهي الوحيدة القادرة على تعديل cartItems.
2. مررنا هذه الدالة كـ prop إلى BookList.
3. BookList بدوره مررها كـ prop إلى كل مكون Book.
4. عندما يضغط المستخدم على الزر في Book، فإنه يستدعي الدالة التي وصلته عبر الـ props، مما يؤدي إلى تحديث الـ State في المكون الأب.

هذا النمط يسمى “رفع الحالة إلى الأعلى” (Lifting State Up)، وهو من أهم الأنماط في React للحفاظ على تدفق بيانات منظم.

نصيحة من أبو عمر: تذكر القاعدة الذهبية: البيانات (Props) تتدفق للأسفل، والأحداث (Events) تتدفق للأعلى. هذا هو سر الحفاظ على كود منظم يمكن تتبعه بسهولة.

الخطوة 5: التعامل مع الآثار الجانبية بـ useEffect

ماذا لو أردنا تنفيذ شيء معين بعد أن يتغير الـ State؟ مثلاً، نريد تحديث عنوان تبويب المتصفح ليعكس عدد الكتب في السلة. هنا يأتي دور الـ Hook الثاني المهم: useEffect.

useEffect يسمح لك بتنفيذ “آثار جانبية” (Side Effects) في مكوناتك، مثل طلب البيانات من سيرفر، أو تعديل الـ DOM مباشرة.

// في مكون App.js
import React, { useState, useEffect } from 'react';
// ...

function App() {
  // ... نفس الـ state والدوال السابقة

  // هذا الـ Hook سيعمل في كل مرة تتغير فيها قيمة `cartItems`
  useEffect(() => {
    if (cartItems.length > 0) {
      document.title = `لديك ${cartItems.length} كتب في السلة`;
    } else {
      document.title = 'مكتبة أبو عمر';
    }
  }, [cartItems]); // [cartItems] هي مصفوفة الاعتماديات (dependency array)

  // ... باقي الكود
}

مصفوفة الاعتماديات [cartItems] تخبر React أن يعيد تنفيذ هذا الـ “Effect” فقط عندما تتغير قيمة cartItems. إذا كانت المصفوفة فارغة []، سيعمل الـ Effect مرة واحدة فقط بعد أول عملية رسم.

الخلاصة: طريقك لإتقان React

إذا وصلت إلى هنا، فقد قطعت شوطاً كبيراً في فهم قلب React النابض. دعنا نلخص ما تعلمناه:

• المكونات (Components): هي وحدات بناء واجهة المستخدم، معزولة وقابلة لإعادة الاستخدام.
• الـ Virtual DOM: هو سر سرعة React وكفاءتها في تحديث الواجهة.
• الـ Props: بيانات للقراءة فقط، تتدفق من الأب للابن لتمرير البيانات والوظائف.
• الـ State: ذاكرة المكون الداخلية القابلة للتغيير، تستخدم لإدارة البيانات التفاعلية.
• Hooks (useState, useEffect): أدواتك لإضافة State وآثار جانبية لمكوناتك الوظيفية.
• التدفق: البيانات (Props) للأسفل، والأحداث (Events) للأعلى عبر دوال الـ callback.

ماذا بعد؟ خطواتك التالية في عالم React

الآن بعد أن أتقنت الأساسيات، إليك بعض المواضيع التي يمكنك استكشافها لتعميق معرفتك:

• React Router: مكتبة لإضافة التنقل بين الصفحات (Routing) في تطبيقات الصفحة الواحدة (SPA).
• إدارة الحالة المتقدمة (Advanced State Management): عندما يصبح “رفع الحالة للأعلى” معقداً في التطبيقات الكبيرة، تأتي أدوات مثل Context API (المدمجة في React) أو مكتبات مثل Redux و Zustand لتوفير حلول أكثر قوة.
• إنشاء Hooks مخصصة (Custom Hooks): يمكنك استخلاص المنطق المتكرر (مثل طلب البيانات) في دوال Hooks خاصة بك لإعادة استخدامها عبر المكونات.
• التعامل مع النماذج (Forms): تعلم أفضل الطرق لإدارة حقول الإدخال والتحقق من صحة البيانات.

نصيحتي الأخيرة لك: طبّق بيدك. خذ هذا المثال، أضف ميزة حذف من السلة، أو صفحة تفاصيل الكتاب، أو فلترة حسب السعر. اكسر الكود وحاول إصلاحه. هذه هي أسرع وأفضل طريقة للتعلم الحقيقي.