جاري التحميل...
جاري التحميل...
بناء واجهات من مكونات مستقلة
المكونات هي اللبنات الأساسية لأي تطبيق React. تسمح لك بتقسيم واجهات المستخدم المعقدة إلى أجزاء صغيرة قابلة لإعادة الاستخدام يمكن إدارتها بشكل مستقل.
💡 تشبيه بسيط:
المكونات مثل الجداول والأثاث في غرفة. كل قطعة لها وظيفة محددة: الطاولة للأكل، الكرسي للجلوس. يمكنك نقل أي قطعة إلى غرفة أخرى واستخدامها هناك. المكونات في React كذلك — قطع قابلة لإعادة الاستخدام يمكنك نقلها بين الصفحات.
أنواع المكونات:
لإنشاء مكون في React، أنشئ ببساطة دالة تُرجع JSX. يجب أن يبدأ اسم الدالة بحرف كبير.
قواعد مهمة:
UserProfile وليس userProfile)💡 تشبيه بسيط:
المكون مثل دالة حاسبة. أنت تعطيها مدخلات (الخصائص/props)، وهي تُخرج نتيجة (واجهة المستخدم). المكون لا يُغيّر مدخلاته — فقط يعرضها بشكل جميل.
الخصائص (Props) هي البيانات المنسوبة من مكون أصل إلى مكون فرعي. تسمح لك بجعل المكونات ديناميكية وقابلة لإعادة الاستخدام.
💡 تشبيه بسيط:
الخصائص مثل معاملات الدالة. عندما تستدعي دالة في JavaScript، تمرر لها قيم: greet('Ahmed'). في React، المكون الأصل يمرر بيانات لل ابن عن طريق الخصائص: <Greeting name='Ahmed' />.
خصائص الخصائص:
لاستخدام الخصائص في مكون، اقرأها من معامل الدالة. يمكنك بعد ذلك استخدامها في JSX.
أنواع الخصائص:
name='Ahmed'age={'{'}25{'}'}isActive={'{'}true{'}'}user={'{'}{'{'}name: 'Ahmed', age: 25{'}'}{'}'}onClick={'{'}handleClick{'}'}يمكنك تعيين قيم افتراضية للخصائص في حال عدم تقديمها. هذا يجعل مكوناتك أكثر متانة.
💡 تشبيه بسيط:
الخصائص الافتراضية مثل الإعدادات الافتراضية في الهاتف. عندما تشترى هاتفاً جديداً، يأتي بإعدادات افتراضية (صوت، سطح مكتب، خلفية). يمكنك تغييرها لاحقاً، لكن الهاتف يعمل بشكل جيد حتى بدون تغيير.
الطريقتان لتعيين القيم الافتراضية:
function Greeting({'{'}name = 'عالم'{'}'}) {'{'}...{'}'}name {'||'} 'عالم'خاصية children هي خاصية خاصة تحتوي على المحتوى بين علامتي البداية والنهاية للمكون.
💡 تشبيه بسيط:
children مثل محتوى صندوق. المكون هو الصندوق نفسه، و children هو كل ما داخله. يمكنك وضع أي شيء داخل الصندوق: نص، صور، مكونات أخرى.
يمكن أن يكون children:
تركيب المكونات هو ممارسة بناء واجهات المستخدم المعقدة عن طريق دمج المكونات البسيطة. هذه هي واحدة من أقوى ميزات React.
💡 تشبيه بسيط:
التركيب مثل بناء منزل من Lego. كل قطعة Lego بسيطة بمفردها، لكن عندما تجمعها معاً، تُنشئ بناءً معقداً وجميلاً. المكونات في React كذلك.
فوائد التركيب:
عندما تمرر خصائص لمكون، يحدث ما يلي:
<Greeting name='Ahmed' />{'{'}name: 'Ahmed'{'}'} وينقله للابنprops.name ويعرض 'Ahmed'props.name، سيحصل على خطأهناك أخطاء يقع فيها المبتدئون كثيراً:
key فريدة لكل مكونuser={'{'}{'{'}name: 'Ahmed'{'}'}{'}'}اتبع هذه الممارسات:
props.name، اكتب {'{'}name, age{'}'}UserProfile وليس Boxما هي الخصائص (props) في React؟
كيف تمرر خاصية name لمكون Greeting؟
ماذا يحدث إذا حاول المكون الابن تعديل prop؟
أنشئ مكون UserProfile يقبل الاسم والعمر والبريد الإلكتروني كخصائص ويعرضها. وأنشئ أيضاً مكون UserList يعرض عدة مكونات UserProfile.
الحل:
function UserProfile({ name, role, bio }) {
return (
<div>
<h2>{name}</h2>
<p>{role}</p>
<p>{bio}</p>
</div>
);
}
function SkillList({ skills }) {
return (
<ul>
{skills.map((skill, index) => (
<li key={index}>{skill}</li>
))}
</ul>
);
}
function App() {
return (
<div>
<UserProfile name="أحمد" role="مطور" bio="مطور React" />
<SkillList skills={["JavaScript", "React", "CSS"]} />
</div>
);
}المفاهيم الأساسية:
الأوامر:
ما الفرق بين Props و State؟
الإجابة:
الخصائص تأتي من المكون الأصل (للقراءة فقط)، الحالة داخل المكون (قابلة للتغيير).
لماذا نستخدم key في القوائم؟
الإجابة:
React يستخدم key لمعرفة العناصر التي تغيرت وأيها أُضيفت أو حُذفت، مما يحسن الأداء.
ما هي children props؟
الإجابة:
خاصية خاصة تحتوي على المحتوى بين علامتي البداية والنهاية للمكون.
استخدم Object Destructuring
بدلاً من props.name و props.age، اكتب {name, age} في توقيع الدالة
لا تدمّر Props
لا تُنشئ متغيرات جديدة من Props unless必需 — استخدمها مباشرة