نظرة شاملة على مكتبة React

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

ما هي مكتبة React؟

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

الميزات الأساسية لـ React

المكونات (Components)

المكونات هي اللبنات الأساسية في React. كل مكون يمكن أن يحتوي على مكونات أخرى ويُستخدم لإعادة استخدام الكود وتنظيمه بطريقة أفضل.

مثال:

import React from 'react';
function Welcome(props) {
return <h1>مرحباً، {props.name}</h1>;
}
export default Welcome;

DOM الظاهري (Virtual DOM)

React يستخدم DOM الظاهري لتحسين الأداء. بدلاً من التفاعل مع DOM الحقيقي مباشرة، تقوم React بإنشاء نسخة افتراضية من DOM ومقارنتها مع الحالة الحالية لتحديد الحد الأدنى من التغييرات المطلوبة، ومن ثم تطبيق تلك التغييرات فقط على DOM الحقيقي.

البيانات (State) والدوال الموجهة (Props)

الـ State هي كائن يحتوي على بيانات المكون والتي يمكن أن تتغير مع مرور الوقت. الدوال الموجهة (Props) هي طريقة لتمرير البيانات من مكون إلى آخر.

مثال:

import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>لقد قمت بالنقر {count} مرات</p>
<button onClick={() => setCount(count + 1)}>انقر هنا</button>
</div>
);
}
export default Counter;

كيفية البدء مع React

إعداد بيئة العمل

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

خطوات الإنشاء:

تثبيت Create React App:

npx create-react-app my-app

الدخول إلى مجلد المشروع وتشغيله:

cd my-app
npm start

هيكل المشروع

عند إنشاء مشروع باستخدام Create React App، سيكون لديك هيكل مشروع مشابه لهذا:

my-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── App.js
│ ├── index.js
│ └── ...
├── package.json
└── …

بناء تطبيق React بسيط

مثال:

لنبني تطبيق React بسيط يعرض قائمة من العناصر:

إنشاء مكون لعرض قائمة العناصر:

import React from 'react';
function ItemList(props) {
return (
<ul>
{props.items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
}
export default ItemList;

استخدام المكون في التطبيق الرئيسي:

import React from 'react';
import ItemList from './ItemList';
function App() {
const items = ['عنصر 1', 'عنصر 2', 'عنصر 3'];
return (
<div>
<h1>قائمة العناصر</h1>
<ItemList items={items} />
</div>
);
}
export default App;