لماذا React، أول مكوّن لك و JSX

اكتشف ما هو React، اكتب أول مكوّن لك على الإطلاق، وتعلّم القواعد الأساسية لـ JSX.

8 دقيقة · 3 أسئلة

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

const el = document.getElementById("title");
el.textContent = "Hello!";
el.style.color = "green";

هذه المقاربة تعمل، لكن بمجرّد أن تكبر الصفحة، عليك تتبّع كل عنصر، وتحديثه في اللحظة المناسبة، وألّا تنسى أياً منه أبداً... وسرعان ما يصبح الأمر غير قابل للإدارة. يقدّم React فكرة مختلفة: قسّم الواجهة إلى مكوّنات. المكوّن هو دالة JavaScript تصف جزءاً من الواجهة (زر، بطاقة، قائمة). مثل قطع الليغو، تجمعها لبناء صفحة كاملة، ويتكفّل React بإبقاء الشاشة محدّثة نيابة عنك.

import { createRoot } from "react-dom/client";

function Hello() {
  return <h1>Hello!</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<Hello />);

دالة Hello هي مكوّن: تُرجع ما يبدو مثل HTML مكتوباً مباشرة داخل JavaScript. تُسمّى هذه الصياغة JSX. ثلاث قواعد يجب تذكّرها: يُرجع المكوّن عنصراً أباً واحداً؛ بعض الخصائص تتغيّر أسماؤها (class تصبح className)؛ يجب إغلاق كل وسم (<img />، على سبيل المثال). لـ JSX قوّة خارقة: الأقواس المعقوفة { } تتيح لك إدراج أي قيمة JavaScript في الناتج.

function Welcome() {
  const firstName = "Sarah";
  return <h2>Welcome, {firstName}!</h2>;
}

اختبار المعرفة

تأكّد من أنك تذكّرت النقاط الأساسية في هذا الدرس.

1. ما هو React؟
   • لغة برمجة تحلّ محل JavaScript
   • مكتبة JavaScript لبناء واجهات المستخدم
   • أداة رسم لإنشاء نماذج أولية للمواقع
2. في React، ما هو المكوّن؟
   • دالة JavaScript تُرجع JSX
   • ملف CSS ينسّق تخطيط الموقع
   • قاعدة بيانات تخزّن الزوّار
3. لماذا تُستعمل الأقواس المعقوفة { } في JSX؟
   • لكتابة تعليق HTML
   • لإنشاء حلقة تكرار تلقائياً
   • لإدراج قيمة JavaScript في الناتج