مفهوم المكونات What is a Component

ما هو المكون في ريأكتمفهوم الـ Componentsتفكيك واجهات المستخدمإعادة استخدام الكودكورس React كاملالمكونات في ريأكت

جدول مرجعي سريع

مفهوم المكونات (What is a Component?) وفلسفة إعادة الاستخدام

المصطلح الهندسي	دور المكون في معمارية الواجهة	العائد المباشر على الإنتاجية
المكونات الوظيفية Functional Components	دوال جافا سكريبت نقية ترجع وسوم JSX وتستقبل البيانات ديناميكياً	تبسيط الأكواد وجعلها خفيفة الوزن وسهلة القراءة والاختبار البرمجي
إعادة الاستخدام Reusability	كتابة الكود لمرة واحدة وحقنه في أماكن متعددة بقيم مختلفة تماماً	توفير الوقت وتفادي التكرار وضمان تطابق التصميم في كل صفحات المنصة
تفكيك الواجهة Componentization	تقسيم التصميم المعقد ذي الآلاف الأسطر إلى ملفات صغيرة ومستقلة تماماً	تسهيل عملية تتبع الأخطاء وصيانة الأكواد وتوزيع المهام بين أعضاء الفريق

الشرح

إذا أردت معرفة السر الحقيقي وراء بناء منصات ضخمة بملايين الصفحات دون أن تتحول الأكواد إلى كابوس فوضوي، فإن الإجابة تتلخص في كلمة واحدة: المكونات (Components).

ريأكت جاءت لتقضي تماماً على فكرة "صفحة الويب الكاملة الجامدة"، واستبدلتها بفلسفة هندسية ممتعة تشبه اللعب بمكعبات الليجو (Lego)؛ حيث نقوم بتفكيك أي واجهة مستخدم معقدة إلى مكعبات برمجية صغيرة ومستقلة، ثم نركبها معاً لنصنع منها موقعاً متكاملاً وتفاعلياً.

1. ما هو المكون (Component) في ريأكت؟

بأبسط عبارة هندسية: المكون هو عبارة عن دالة جافا سكريبت عادية ونقية (Functional Component). هذه الدالة تقوم بمهمة محددة جداً؛ وهي إرجاع (return) وسم JSX يصف كيف يبدو هذا الجزء من الشاشة. المكون يدمج بداخله ثلاثة عناصر في كتلة واحدة ذكية ومستقلة:

المظهر (Structure): وسم الـ JSX الذي يحدد العناصر.
التنسيق (Styling): ملف الـ CSS المرتبط به.
المنطق (Logic): وظائف جافا سكريبت التفاعلية (مثل النقر، جلب البيانات).

2. فلسفة إعادة الاستخدام (Reusability)

تخيل أنك تبني متجراً إلكترونياً يحتوي على 100 منتج. في الويب التقليدي، كنت ستضطر لكتابة كود HTML الخاص ببطاقة المنتج 100 مرة، أو توليده برمجياً بطرق معقدة. في React، أنت تقوم ببناء مكون واحد فقط يُسمى <ProductCard/>. تكتب فيه التصميم والتنسيق لمرة واحدة في ملف مستقل، ثم تقوم باستدعائه وحقنه في أي صفحة تريدها بمجرد كتابة اسمه كـ وسم مخصص! يمكنك استدعاؤه مئات المرات، وسيقوم في كل مرة بعرض بيانات منتج مختلف تماماً بناءً على البيانات التي تمررها له (وهو ما سنشرحه بالتفصيل في درس الـ Props القادم).

الأكواد البرمجية والتطبيق العملي

دعنا نرى كيف ننشئ مكوناً فرعياً صغيراً (بطاقة منتج)، ثم نقوم بإعادة استخدامه وحقنه عدة مرات داخل المكون الرئيسي الأب (App):

1. ملف المكون الفرعي المفرز (ProductCard.jsx):

javascript

1	// تأكد دائماً أن اسم المكون يبدأ بحرف كبير (PascalCase) لتميزه ريأكت عن وسوم HTML العادية
2	function ProductCard() {
3	// بيانات تجريبية مؤقتة داخل المكون
4	const title = "دورة احتراف React.js";
5	const price = 49.99;
6
7	return (
8	<div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', margin: '10px' }}>
9	<h3>{title}</h3>
10	<p>السعر الفعلي: {price}$</p>
11	<button style={{ backgroundColor: '#673ab7', color: '#fff', border: 'none', padding: '8px 16px', borderRadius: '4px' }}>
12	اشترك الآن
13	</button>
14	</div>
15	);
16	}
17
18	// تصدير المكون لكي نتمكن من استيراده في الملفات الأخرى
19	export default ProductCard;

2. ملف المكون الأب الرئيسي (App.jsx):

javascript

1	// استيراد المكون الفرعي من مساره
2	import ProductCard from './ProductCard';
3
4	function App() {
5	return (
6	<div className="container">
7	<h2>مرحباً بك في منصة نوفيل البرمجية</h2>
8	<p>اختر الدورة المناسبة لك وابدأ التعلم فوراً:</p>
9
10	{/* إعادة استخدام المكون الفرعي وحقنه ثلاث مرات متتالية بكود نظيف جداً */}
11	<ProductCard />
12	<ProductCard />
13	<ProductCard />
14	</div>
15	);
16	}
17
18	export default App;

نصائح احترافية

—يجب حتماً ولزاماً أن يبدأ اسم المكون بحرف كبير (Capital Letter / PascalCase) مثل ProductCard وليس productCard.
—السبب وراء هذه الصرامة البرمجية هو أن المترجم (Babel) عندما يرى وسماً يبدأ بحرف صغير (مثل <div> أو <button>)، فإنه يعتبره وسماً داخلياً قياسياً تابعاً لمتصفحات الويب الحقيقية ويترجمه كنص.
—أما عندما يرى وسمًا يبدأ بحرف كبير (مثل <ProductCard/>)، فإنه يدرك فوراً أن هذا مكون مخصص كتبته أنت برمجياً، فيذهب ويبحث عن الدالة التي تحمل هذا الاسم ليقوم بتشغيل منطقها وحقن مخرجاتها

الدرس السابق

تنسيق Inline Styles في React باستخدام (Objects)

الدرس التالي

تمرير البيانات إلى المكونات باستخدام الـ Props

المصطلح الهندسي

دور المكون في معمارية الواجهة

العائد المباشر على الإنتاجية

المكونات الوظيفية Functional Components

دوال جافا سكريبت نقية ترجع وسوم JSX وتستقبل البيانات ديناميكياً

تبسيط الأكواد وجعلها خفيفة الوزن وسهلة القراءة والاختبار البرمجي

إعادة الاستخدام Reusability

كتابة الكود لمرة واحدة وحقنه في أماكن متعددة بقيم مختلفة تماماً

توفير الوقت وتفادي التكرار وضمان تطابق التصميم في كل صفحات المنصة

تفكيك الواجهة Componentization

تقسيم التصميم المعقد ذي الآلاف الأسطر إلى ملفات صغيرة ومستقلة تماماً

تسهيل عملية تتبع الأخطاء وصيانة الأكواد وتوزيع المهام بين أعضاء الفريق

1. ما هو المكون (Component) في ريأكت؟

المظهر (Structure): وسم الـ JSX الذي يحدد العناصر.

التنسيق (Styling): ملف الـ CSS المرتبط به.

المنطق (Logic): وظائف جافا سكريبت التفاعلية (مثل النقر، جلب البيانات).

2. فلسفة إعادة الاستخدام (Reusability)

الأكواد البرمجية والتطبيق العملي

1. ملف المكون الفرعي المفرز (ProductCard.jsx):

javascript

1	// تأكد دائماً أن اسم المكون يبدأ بحرف كبير (PascalCase) لتميزه ريأكت عن وسوم HTML العادية
2	function ProductCard() {
3	// بيانات تجريبية مؤقتة داخل المكون
4	const title = "دورة احتراف React.js";
5	const price = 49.99;
6
7	return (
8	<div style={{ border: '1px solid #ccc', padding: '15px', borderRadius: '8px', margin: '10px' }}>
9	<h3>{title}</h3>
10	<p>السعر الفعلي: {price}$</p>
11	<button style={{ backgroundColor: '#673ab7', color: '#fff', border: 'none', padding: '8px 16px', borderRadius: '4px' }}>
12	اشترك الآن
13	</button>
14	</div>
15	);
16	}
17
18	// تصدير المكون لكي نتمكن من استيراده في الملفات الأخرى
19	export default ProductCard;

2. ملف المكون الأب الرئيسي (App.jsx):

javascript

1	// استيراد المكون الفرعي من مساره
2	import ProductCard from './ProductCard';
3
4	function App() {
5	return (
6	<div className="container">
7	<h2>مرحباً بك في منصة نوفيل البرمجية</h2>
8	<p>اختر الدورة المناسبة لك وابدأ التعلم فوراً:</p>
9
10	{/* إعادة استخدام المكون الفرعي وحقنه ثلاث مرات متتالية بكود نظيف جداً */}
11	<ProductCard />
12	<ProductCard />
13	<ProductCard />
14	</div>
15	);
16	}
17
18	export default App;