مقدمة في React

💡 تشبيه بسيط:

تخيّل أنك تبني منزل من Lego. كل قطعة Lego هي مكون صغير (مثل الزر أو العنوان أو القائمة). يمكنك دمج هذه القطع معاً لإنشاء بناء معقد. React يعمل بنفس الطريقة: تبني واجهة المستخدم من المكونات الصغيرة القابلة لإعادة الاستخدام.

💡 تشبيه بسيط:

فكّر في المكونات مثل الجداول والأثاث في غرفة. كل قطعة أثاث لها وظيفة محددة: الطاولة للأكل، الكرسي للجلوس، الخزانة للتخزين. يمكنك نقل أي قطعة إلى غرفة أخرى. المكونات في React كذلك — قطع قابلة لإعادة الاستخدام يمكنك نقلها بين الصفحات.

💡 تشبيه DOM الافتراضي:

تخيّل أنك تكتب مسودة قبل النسخ النهائي. بدلاً من تعديل الكتاب الأصلي مباشرة (بطيء ومحفوف بالمخاطر)، تكتب مسودة أولاً، ثم تقارنها مع النسخة الأصلية، ثم تنقّل فقط التغييرات. React يفعل الشيء نفسه: يُنشئ مسودة في الذاكرة (DOM الافتراضي)، يقارنها مع DOM الحقيقي، ثم يحدث فقط الأجزاء المتغيرة. هذا يجعله أسرع بكثير.

💡 ملاحظة مهمة:

Vite (يُنطق "فايت") أسرع بكثير من الأدوات القديمة مثل Create React App. يبدأ خادم التطوير في ثوانٍ معدودة بدلاً من دقائق. جميع مشاريع React الحديثة تستخدم Vite.

💡 تشبيه بسيط:

JSX مثل كتابة رسالة بريد إلكتروني. يمكنك كتابة النص العادي (JavaScript)، لكنك تستخدم تنسيقاً خاصاً مثل <strong> للنص العريض و <a> للروابط. JSX يسمح لك بكتابة عناصر HTML داخل كود JavaScript.

💡 ملاحظة:

JSX ليس HTML! هناك بعض الفروقات: تستخدم className بدلاً من class، و htmlFor بدلاً من for، وتكتب السلوكيات مثل onClick بدل onclick.

💡 تشبيه بسيط:

المكون مثل دالة حاسبة. أنت تعطيها مدخلات (الخصائص/props)، وهي تُخرج نتيجة (واجهة المستخدم). المكون لا يُغيّر مدخلاته — فقط يعرضها بشكل جميل.

💡 هل تعلم؟:

يمكنك رؤية DOM الافتراضي بنفسك! اضغط F12 في المتصفح وانتقل إلى تبويب Components (في React Developer Tools). سترى شجرة المكونات وكيف يحدّث React كل مكون.