مقدمة في رياكت React Js

React.js هي مكتبة جافاسكربت مفتوحة المصدر تُستخدم لبناء واجهات المستخدم التفاعلية، طوّرتها شركة فيسبوك، وتعتمد على مبدأ المكوّنات (Components) لتسهيل إنشاء واجهات قابلة لإعادة الاستخدام وسريعة الأداء.

ميزات React.js ولماذا نتعلمها:

  1. 🔹 السرعة والأداء العالي:
    بفضل تقنية Virtual DOM التي تحدّث فقط الأجزاء المتغيّرة من الصفحة دون إعادة تحميلها بالكامل.
  2. 🔹 المرونة وسهولة الاستخدام:
    يمكن استخدامها لتطوير مواقع ويب، تطبيقات موبايل (مع React Native)، ولوحات تحكم تفاعلية.
  3. 🔹 قابلة لإعادة الاستخدام:
    تعتمد على المكوّنات (Components)، مما يسمح ببناء واجهات منظمة وقابلة للتوسّع بسهولة.
  4. 🔹 مجتمع ضخم ودعم قوي:
    لديها موارد تعليمية، أدوات، ومكتبات جاهزة تسهّل التطوير وتقلل الأخطاء.
  5. 🔹 التعلم المنطقي والمنهجي:
    تعلّم React يساعد على فهم مفاهيم حديثة في تطوير الواجهات مثل state management، hooks، وrouting.

🧠 لماذا نتعلمها؟
لأنها واحدة من أكثر التقنيات طلبًا في سوق العمل، وتُستخدم في شركات كبرى (مثل Meta وNetflix وAirbnb)، كما أنها تُعطي مطوّر الويب القدرة على بناء تطبيقات حديثة وسريعة الاستجابة.

ميزات الـ Components (المكوّنات) في React.js:

  1. 🔹 إعادة الاستخدام (Reusability):
    يمكن استخدام نفس المكوّن في أكثر من مكان داخل المشروع دون الحاجة لكتابة الكود من جديد.
  2. 🔹 التنظيم (Organization):
    تقسيم واجهة المستخدم إلى أجزاء صغيرة يجعل الكود أسهل للفهم والصيانة.
  3. 🔹 الاستقلالية (Independence):
    كل مكوّن يعمل بشكل مستقل، وله منطق خاص به (state, props)، مما يقلل الأخطاء والتداخل بين الأجزاء.
  4. 🔹 سهولة الصيانة (Maintainability):
    عند وجود مشكلة أو تحديث، يمكن تعديل مكوّن واحد دون التأثير على باقي المكونات.
  5. 🔹 سهولة الاختبار (Testability):
    يمكن اختبار كل مكوّن على حدة (Unit Testing) مما يجعل المشروع أكثر استقرارًا.
  6. 🔹 قابلية التركيب (Composability):
    يمكن دمج مكونات صغيرة معًا لتشكيل مكونات أكبر وأكثر تعقيدًا.

🧩 باختصار:
المكوّنات هي الأساس في React لأنها تجعل تطوير الواجهات أسرع، أنظف، وأسهل في الإدارة على المدى الطويل.

SPA (Single Page Application) – التطبيق ذو الصفحة الواحدة

🔹 التعريف:
هو نوع من تطبيقات الويب يتم تحميله مرة واحدة فقط عند فتح الموقع، وبعدها يتم تحديث المحتوى داخل نفس الصفحة دون إعادة تحميل الصفحة بالكامل من الخادم (server).
تتحكم JavaScript (مثل React.js) في عرض الصفحات والمحتوى ديناميكيًا.

⚙️ كيف تعمل SPA؟

عند زيارة الموقع لأول مرة:

  1. يتم تحميل ملف HTML رئيسي واحد فقط.
  2. يتم تحميل كود JavaScript الذي يدير التطبيق (عادةً React أو Vue أو Angular).
  3. عندما ينتقل المستخدم بين الصفحات، لا يتم إرسال طلب كامل إلى الخادم، بل يتم تبديل المحتوى داخليًا باستخدام Routing من جانب العميل (Client-Side Routing).
🌟 مميزات تطبيقات SPA:
  1. سرعة عالية:
    لا حاجة لإعادة تحميل الصفحة بالكامل في كل تنقّل.
  2. تجربة مستخدم سلسة (Smooth UX):
    الانتقالات بين الصفحات تبدو فورية مثل تطبيقات الجوال.
  3. تقليل استهلاك الخادم:
    يتم جلب البيانات فقط وليس صفحات HTML كاملة.
  4. سهولة تطوير واجهات تفاعلية:
    باستخدام مكتبات مثل React.js أو Vue.js.
  5. إمكانية العمل كتطبيق موبايل:
    يمكن تحويل SPA بسهولة إلى تطبيق موبايل باستخدام تقنيات مثل React Native أو PWA.
⚠️ عيوب SPA:
  1. السيو (SEO) صعب:
    لأن المحتوى يُنشأ ديناميكيًا بالـ JavaScript، فيصعب على محركات البحث قراءته أحيانًا.
  2. تحميل أولي بطيء قليلًا:
    يتم تحميل كل ملفات التطبيق في البداية.
  3. تعقيد إدارة الحالة والتنقّل:
    يحتاج مطوّرون إلى أدوات مثل React Router وRedux.
🧠 لماذا نستخدمها مع React.js؟

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

قبل البدء في تعلم React.js، من المهم أن تمتلك بعض الخبرات والمهارات الأساسية في تطوير الويب حتى تفهم المفاهيم بسهولة وتطبّقها عمليًا. إليك ما تحتاجه:

🧱 1. أساسيات لغات الويب (HTML وCSS)
  • فهم بنية صفحات الويب باستخدام HTML (العناوين، الفقرات، القوائم، النماذج…).
  • معرفة CSS لتصميم الصفحات وتنسيق العناصر (الألوان، الخطوط، التخطيط، Flexbox، Grid).
  • التعامل مع الوسوم (tags) والخصائص (attributes) والكلاسات (classes).
⚙️ 2. لغة JavaScript (بمستوى متوسط على الأقل)

React تعتمد بشكل كامل على JavaScript، لذلك يجب أن تكون مرتاحًا مع المفاهيم التالية:

  • المتغيرات (let, const)
  • الدوال (العادية والسهمية () => {})
  • المصفوفات (map, filter, forEach)
  • الكائنات (objects) والتفكيك (destructuring)
  • الجمل الشرطية (if, switch, ternary ? :)
  • الاستيراد والتصدير (import / export)
  • ES6+ (النسخة الحديثة من JavaScript)
  • المفهوم الأساسي للـ DOM وكيفية التعامل معه.
🧰 3. أساسيات بيئة Node.js و npm
  • معرفة بسيطة بكيفية تثبيت Node.js وnpm (أو yarn) لإدارة الحزم.
  • القدرة على تشغيل الأوامر في الطرفية (Terminal) مثل: npm install npm start npm run dev
🧩 4. مفاهيم أساسية في البرمجة
  • التفكير المنطقي (Logical Thinking).
  • فهم كيفية تقسيم المشروع إلى أجزاء صغيرة (Modular Thinking).
  • معرفة ما هو API وكيفية جلب البيانات باستخدام fetch.
🌐 5. مهارات إضافية مفيدة
  • استخدام Git وGitHub لإدارة الأكواد والإصدارات.
  • معرفة مبادئ البرمجة الكائنية (OOP) بشكل عام.
  • فهم مبسط لكيفية عمل الويب (HTTP requests, JSON, REST API).
🎯 باختصار:

إذا كنت تتقن HTML + CSS + JavaScript (ES6)، وتعرف استخدام Node.js و npm، فأنت جاهز تمامًا للبدء في تعلم React.js بثقة.