مقدمة في React

ما هي React؟

React مكتبة JavaScript طوّرتها شركة Meta (فيسبوك) لبناء واجهات المستخدم التفاعلية. هي اليوم الأكثر استخدامًا في العالم لبناء تطبيقات الويب.

ظهرت React عام 2013، وأحدثت نقلة في طريقة بناء الواجهات: بدل تعديل الصفحة يدويًا عند كل تغيير، تصف أنت الشكل النهائي للواجهة، وتتكفّل React بتحديث ما تغيّر فقط بكفاءة عالية.

⚠️ React ليست لغة جديدة — هي مكتبة مبنية على JavaScript. لذلك أتقن أساسيات جافاسكريبت أولًا.

لماذا React؟

• المكوّنات (Components): قسّم الواجهة إلى قطع صغيرة قابلة لإعادة الاستخدام.
• التحديث التلقائي: عند تغيّر البيانات، تُحدّث React الواجهة تلقائيًا.
• سوق عمل ضخم: من أكثر المهارات طلبًا للمطوّرين.
• نظام بيئي غني: آلاف المكتبات الجاهزة وأُطُر مبنية عليها مثل Next.js.

أين تُستخدم React؟

• تطبيقات الويب الحديثة: لوحات التحكّم والمتاجر والشبكات الاجتماعية.
• تطبيقات الجوال: عبر React Native بنفس المفاهيم.
• المواقع السريعة: عبر أُطُر مثل Next.js.

فكرة React الأساسية

في React نصف كيف يجب أن تبدو الواجهة بناءً على البيانات، وهي تتكفّل بالباقي:

function Welcome() {
  return <h1>أهلًا بك في React!</h1>;
}

هذا مكوّن (Component): دالة تُعيد واجهة بصيغة تُسمّى JSX.

مكوّن يعرض بيانات

function Greeting({ name }) {
  return <h1>أهلًا يا {name} 👋</h1>;
}

// الاستخدام: <Greeting name="براء" />

لاحظ كيف مرّرنا بيانات إلى المكوّن عبر ما يُسمّى props — وهي طريقة تمرير القيم بين المكوّنات.

كيف تبدأ مشروع React؟

أشهر طريقة اليوم هي عبر أداة Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

أسئلة شائعة

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

هل React لغة أم مكتبة؟ هي مكتبة JavaScript لبناء الواجهات، وليست لغة مستقلّة.

ما الفرق بين React و Next.js؟ React مكتبة لبناء الواجهات، بينما Next.js إطار مبني عليها يضيف التوجيه والعرض من الخادم وتحسينات جاهزة.

🎯 التالي: المكوّنات و JSX — حجر الأساس في React.