State: تطبيق يتذكّر

تعلّم useState – ذاكرة الـ component. تطبيقك يبدأ بالتفاعل مع النقرات على طريقة React.

لماذا المتغير العادي لا يكفي

في المستوى 2، بنيت عداداً بإعادة كتابة نص الزر بنفسك بعد كل نقرة. React يفعل الأمر مختلفاً: تغيّر البيانات، وReact يعيد رسم الشاشة. لكن يجب أن تسلّم البيانات لصندوق خاص يسمى state – وإلا لن يلاحظ React التغيير.

شاهد معي: عداد في React

import { useState } from 'react';

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

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked: {count}×
    </button>
  );
}

export default Counter;

نفكّك أهم سطر – const [count, setCount] = useState(0);:

useState(0) – «React، أعدّ لي صندوقاً بقيمة بداية 0.»
count – القيمة الحالية في الصندوق (للقراءة فقط).
setCount – الطريقة الصحيحة الوحيدة لتغيير القيمة. عندما تستدعي setCount(5)، React يحفظ القيمة الجديدة ويعيد رسم كل مكان يُستخدم فيه count، وحده.

وonClick={...} نسخة React من addEventListener("click", ...) – مباشرة داخل JSX.

لاحظ ما ليس في الكود: لا getElementById، لا textContent. لا تقول كيف تغيّر الشاشة – تقول ما هو صحيح الآن (count الآن 5)، والشاشة ترتّب نفسها وحدها.

شاهد معي: الـ state يتحكم بما يظهر

الـ state ليس بالضرورة رقماً فقط. قسم قابل للطيّ على طريقة React:

import { useState } from 'react';

function Menu() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(!open)}>
        {open ? "Hide the menu ▲" : "Show the menu ▼"}
      </button>

      {open && (
        <ul>
          <li>Monday: tomato soup with pasta</li>
          <li>Tuesday: chicken with rice</li>
          <li>Wednesday: pancakes with jam</li>
        </ul>
      )}
    </div>
  );
}

حيلتان جديدتان في JSX:

condition ? A : B – اختصار if/else مباشرة داخل HTML: «إن كان مفتوحاً اعرض هذا، وإلا ذاك.»
condition && (...) – «ارسم هذا فقط إن كان الشرط صحيحاً.» عندما يكون open خطأ، القائمة ببساطة لا توجد.

و!open يعني «العكس» – يحوّل true إلى false والعكس. سطر واحد = مفتاح.

دورك الآن 💪

أضف شيئين بـ state إلى تطبيقك:

قسم قابل للطيّ (state من نوع true/false) يناسب مشروعك: 🏫 قائمة غداء قابلة للطيّ · 🙋 «أظهر/أخفِ ألعابي المفضّلة» · 🌍 قائمة دول قابلة للطيّ · ⚽ قائمة لاعبين قابلة للطيّ.
عداد أو تصويت (state رقمي): 🏫 صوّت لرحلة الصف · 🙋 «كم شخص حيّاني اليوم» · 🌍 عداد دول زرتها · ⚽ لوحة نتيجة بأزرار +1 home / +1 away (حالتان!).

حل مكافأة: لوحة نتيجة بحالتين

import { useState } from 'react';

function Score() {
  const [home, setHome] = useState(0);
  const [away, setAway] = useState(0);

  return (
    <div className="card">
      <h3>Riverside {home} : {away} Lakeside</h3>
      <button onClick={() => setHome(home + 1)}>Home goal ⚽</button>
      <button onClick={() => setAway(away + 1)}>Away goal 😤</button>
      <button onClick={() => { setHome(0); setAway(0); }}>New match</button>
    </div>
  );
}

export default Score;

الـ component يمكنه امتلاك ما يشاء من الصناديق – كل useState واحد.

✅

تحقق من نفسك: تطبيقك فيه موضعا تفاعل على الأقل، ولا يوجد getElementById في أي مكان في الكود. إن أتقنت هذا التحوّل الذهني («أغيّر البيانات لا الشاشة»)، فقد أتقنت أصعب جزء في React.

ما ستخرج به من هذا الدرس

const [value, setValue] = useState(start) – ذاكرة الـ component.
غيّره فقط عبر setValue(...) – ثم React يعيد الرسم وحده.
في JSX: onClick={...}، والشروط ? : و&& تتحكم بما يظهر.