إعادة البناء الكبيرة: موقعك في React

مهمتك

ستأخذ موقعك من المستويين 1–2 وتبنيه مجدداً في React. يبدو رجوعاً للخلف؟ ليس كذلك – إنه أفضل تدريب موجود: المحتوى والتصميم جاهزان عندك، فتركّز على التقنية الجديدة فقط. وفي النهاية سترى بوضوح لماذا يجد المحترفون الأمر مفيداً.

خطة إعادة البناء

1. قسّم الموقع إلى components. خذ ورقة وقلماً (جدياً!) وارسم موقعك كصناديق: Header، Gallery، Quiz، Footer… كل صندوق = ملف واحد في src/.

2. انقل HTML إلى الـ components. انسخ قطعة قطعة من ملفات .html القديمة إلى JSX. انتبه للفروق المألوفة: class → className، كل component يرجع عنصر غلاف واحد. انسخ صورك إلى مجلد public/ في مشروع Vite – ثم المسارات مثل /images/team.jpg تعمل بلا تغيير.

3. انقل CSS. انسخ محتوى style.css إلى src/App.css. يجب أن يعمل شبه بلا تغيير – CSS يبقى CSS.

4. اسحب البيانات إلى arrays. البطاقات، النتائج، صور المعرض – كل ما يتكرر، حوّله إلى array من objects + .map()، كما تعلّمت في درس الـ components.

5. أعد كتابة تعاويذ المستوى 2 كـ state. إليك جدول التحويل:

   المستوى 2 (JavaScript عادي)	React
   getElementById + textContent	state + {value} في JSX
   addEventListener("click", ...)	onClick={...}
   classList.toggle + CSS .hidden	state منطقي + {condition && (...)}
   عداد بمتغير	useState برقم

شاهد معي: الوضع الداكن على طريقة React

لنعد كتابة تعويذة معاً، لترى التحويل عملياً:

import { useState } from 'react';
import Header from './Header.jsx';
import Gallery from './Gallery.jsx';

function App() {
  const [dark, setDark] = useState(
    localStorage.getItem("mode") === "dark"
  );

  function toggleMode() {
    const newMode = !dark;
    setDark(newMode);
    localStorage.setItem("mode", newMode ? "dark" : "light");
  }

  return (
    <div className={dark ? "dark" : ""}>
      <Header onToggle={toggleMode} dark={dark} />
      <Gallery />
    </div>
  );
}

export default App;

وفي Header.jsx، الزر يستقبل دالة كـ prop:

function Header({ onToggle, dark }) {
  return (
    <header>
      <h1>My website</h1>
      <button onClick={onToggle}>{dark ? "☀️" : "🌙"}</button>
    </header>
  );
}

شيء أخير جديد: الـ prop يمكن أن يكون دالة أيضاً. App يملك الـ state ويعير طفله زراً لتبديله. هذا يسمى «الـ state يعيش في الأعلى»، وهو النمط الأشيع في React.

قائمة تحقق إعادة البناء

• الموقع مقسّم إلى 4 components على الأقل في ملفات منفصلة
• العناصر المتكررة (بطاقات، صور…) تولد من array عبر .map()
• موضعان تفاعليان على الأقل يعملان على useState
• الوضع الداكن يعمل ويُتذكَّر (localStorage)
• لا أخطاء في الـ console
• لا يوجد getElementById في أي مكان في الكود 😉

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

• إعادة البناء: قسّم إلى components → انقل HTML وCSS → البيانات إلى arrays → التعاويذ إلى state.
• الـ prop يمكن أن يكون دالة أيضاً – الأب يعير أبناءه أزراراً للتحكم بـ state الخاص به.
• نفس النتيجة، بنية أنظف: نسخ أقل، تغييرات أسهل. هذا تقدّم تراه فعلاً.

© 2026 Ing. Martin Polak / AlgoRhino · شروط استخدام المحتوى