مقدمة إلى React

الدرس الأول: مقدمة إلى React

في هذا الدرس، سنتعرف على React، وهو مكتبة JavaScript شائعة لبناء واجهات المستخدم (UIs). سنتناول تاريخ React وكيفية تطوره، وكذلك الفرق بين React و Angular و Vue. في النهاية، سنتعلم كيفية إنشاء أول تطبيق React باستخدام أداة create-react-app وشرح الهيكل الأساسي للمشروع.

1. ما هو React؟

React هو مكتبة مفتوحة المصدر من تطوير Facebook (حاليًا Meta) لبناء واجهات المستخدم (User Interfaces) في تطبيقات الويب وتطبيقات الهواتف المحمولة. React يسمح للمطورين بإنشاء تطبيقات تفاعلية من خلال استخدام المكونات (Components)، مما يسهل من عملية البناء والصيانة. تتيح React التحديث الفوري لواجهة المستخدم عندما تتغير البيانات، مما يجعلها سريعة وفعالة.

المزايا الرئيسية لـ React:

• التفاعل المسبق: تسمح React بتحديث الأجزاء المتغيرة فقط من الصفحة بدلًا من إعادة تحميل الصفحة بأكملها، مما يحسن الأداء.
• المكونات القابلة لإعادة الاستخدام: يمكن تقسيم التطبيق إلى مكونات صغيرة وقابلة لإعادة الاستخدام.
• إدارة الحالة: React توفر أساليب مرنة لإدارة الحالة داخل التطبيقات باستخدام useState و Context API.
• التركيب القوي: يستخدم React JSX (JavaScript XML)، وهي طريقة لكتابة HTML داخل JavaScript مما يسهل من الكتابة والصيانة.

2. تاريخ React وكيفية تطوره

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

تطور React عبر الزمن:

• 2013: تم إطلاق React لأول مرة في Facebook كأداة لبناء واجهات المستخدم.
• 2015: إطلاق React Native، وهو إطار عمل يستخدم React لبناء تطبيقات الجوال عبر iOS و Android.
• 2016: تم إطلاق React Router لإدارة التنقل بين الصفحات في تطبيقات React.
• 2018: إضافة Hooks إلى React، مما مكن المطورين من استخدام الحالة وإدارة الآثار الجانبية بدون الحاجة إلى كتابة class components.
• 2020: التحسينات في أداء React مع Concurrent Mode و Suspense.

3. الفرق بين React و Angular و Vue

React و Angular و Vue هي جميعها أدوات لبناء واجهات المستخدم، ولكنها تختلف في عدة جوانب. إليك مقارنة بين هذه الأدوات:

الميزة	React	Angular	Vue
نوع الأداة	مكتبة (Library)	إطار عمل (Framework)	إطار عمل (Framework)
التعلم	سهل نسبياً	معقد قليلاً بسبب كثرة الميزات	سهل نسبياً
التوثيق	توثيق جيد جداً	توثيق شامل وكامل	توثيق ممتاز ومبسط
التفاعل مع DOM	Virtual DOM	Real DOM	Virtual DOM
المرونة	مرن جداً ويمكن استخدامه مع مكتبات أخرى	صعب تغيير البنية الأساسية	مرن ويوفر خيارات متعددة
الاستخدام	يستخدم في التطبيقات الكبيرة والصغيرة	يستخدم في التطبيقات الكبيرة	يستخدم في التطبيقات الصغيرة والمتوسطة

• React هي مكتبة تركز على UI فقط، مما يعني أنها تتيح لك مرونة أكبر في دمجها مع أدوات أخرى.
• Angular هو إطار عمل كامل يتضمن كل شيء لبناء تطبيقات كبيرة ومعقدة من البداية.
• Vue هو إطار عمل خفيف ومرن يشبه React في طريقة العمل ولكنه يتضمن بعض الميزات المدمجة مثل توجيه الـ router وإدارة الحالة.

4. إنشاء أول تطبيق React باستخدام create-react-app

create-react-app هو أداة تسهل بدء مشروع React جديد دون الحاجة إلى إعدادات معقدة. يقوم بتثبيت جميع الأدوات اللازمة لتشغيل React وتوفير هيكل مشروع جاهز.

الخطوات لإنشاء أول تطبيق React:

1. تثبيت Node.js: قبل البدء، يجب أن يكون لديك Node.js مثبتًا على جهازك. يمكنك تنزيله من موقع Node.js الرسمي.
2. إنشاء مشروع React باستخدام create-react-app: قم بتشغيل الأمر التالي في سطر الأوامر (terminal) لإنشاء تطبيق React جديد: npx create-react-app my-first-app هذا سيقوم بإنشاء مشروع جديد باسم my-first-app. عملية الإنشاء قد تستغرق بعض الوقت حيث سيتم تثبيت جميع الحزم والمكتبات اللازمة.
3. الدخول إلى مجلد المشروع وتشغيل الخادم: بعد أن يتم إنشاء المشروع، يمكنك الانتقال إلى مجلد المشروع وتشغيله: cd my-first-app npm start سيتم فتح التطبيق تلقائيًا في المتصفح على http://localhost:3000 حيث يمكنك رؤية تطبيق React الافتراضي.

الهيكل الأساسي للمشروع:

عند إنشاء تطبيق React باستخدام create-react-app، سيكون لديك الهيكل التالي:

my-first-app/
├── node_modules/      # مجلد يحتوي على جميع الحزم المثبتة
├── public/
│   ├── index.html     # ملف HTML الأساسي
│   └── ...
├── src/
│   ├── App.js         # مكون React الرئيسي
│   ├── index.js       # نقطة الدخول للتطبيق
│   └── ...
├── package.json       # ملف إعدادات المشروع
└── README.md          # ملف قراءة توجيهية للمشروع

الشرح:

• public/index.html: هو ملف HTML الأساسي الذي يحتوي على العنصر الذي سيتم تحميل تطبيق React فيه. يحتوي على علامة <div id="root"></div> التي سيتم تحميل التطبيق داخلها.
• src/index.js: هو نقطة دخول التطبيق. في هذا الملف، يتم استيراد مكون App ويضاف إلى الصفحة باستخدام ReactDOM.render().
• src/App.js: هو المكون الرئيسي للتطبيق. يمكن تعديل هذا الملف لبدء بناء واجهات المستخدم الخاصة بك.

5. كتابة الكود داخل App.js

افتح src/App.js وستجد الكود التالي:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to React!</h1>
      </header>
    </div>
  );
}

export default App;

الشرح:

• function App(): هذا هو المكون الأساسي الذي يتم عرضه في الواجهة.
• <h1>Welcome to React!</h1>: هذا هو النص الذي يتم عرضه على الصفحة.
• export default App;: يُستخدم لتصدير المكون بحيث يمكن استخدامه في ملفات أخرى.

6. الختام

في هذا الدرس:

• تعرفنا على React ومزاياه.
• تعلمنا عن تاريخ React وكيف تطور.
• قمنا بمقارنة React مع Angular و Vue.
• تعلمنا كيفية إنشاء أول تطبيق React باستخدام create-react-app.
• شرحنا الهيكل الأساسي للمشروع الذي تم إنشاؤه.

React هو مكتبة قوية لبناء واجهات المستخدم، وتعتبر من الأدوات الأساسية التي يستخدمها المطورون لإنشاء تطبيقات ويب ديناميكية.