التصنيف react-js

الشرح المبسّط ملاحظة: داخل Product تأكد تستقبل الـ prop كذا: وعند عرض العناصر استخدم key مثل product.id داخل الـ map.

ما هي useReducer؟ هي هوك لإدارة الحالة (state) في React عندما تصبح منطقية التحديث معقّدة أو مترابطة. بدل ما تكتب useState كثيرة وتُبعثر منطق التحديث داخل مكوّناتك، تضع قواعد التحديث في دالة واحدة اسمها reducer. صيغة الاستخدام: تشريح الـ reducer…

🎯 ما هي Context API ؟ Context API هي طريقة في React لتمرير البيانات بين المكونات بدون الحاجة لتمرير props يدويًا عبر كل المستويات. يعني بدل ما تعمل: تقدر تستخدم context وتخلي كل المكونات تشوف نفس القيمة مباشرة، بدون تمرير…

ما هي useMemo؟ هو هوك يرجّع لك قيمة مُحاسَبة (computed value) مُخزّنة تُعاد حسابها فقط عندما تتغيّر الاعتمادات (dependencies). فكر فيها كـ “كاش” لنتيجة دالة غالية التكلفة. التوقيع: متى أستخدمها؟ أمثلة أساسية 1) حساب مكلف (Expensive Computation) 2) فلترة وفرز…

ما هي useRef؟ التوقيع: متى أستخدمه بدل useState؟ فروقات مهمة: useRef vs useState أفضل الممارسات أخطاء شائعة لمحة سريعة مع TypeScript (اختياري) أمثلة أساسية: 🧩 المثال 1 — تركيز تلقائي على input بعد الرندر 🧩 المثال 2 — حفظ القيمة…

🔹 أولًا: ما هي useEffect ؟ useEffect هي واحدة من أهم Hooks في React.تُستخدم لتنفيذ أكواد جانبية (Side Effects) داخل المكونات (Components). 🔹 ما معنى “Side Effect” ؟ الـ Side Effect هو أي شيء يحدث خارج عملية “الرندر” الأساسية مثل:…

ما هي Hooks في React؟ Hooks هي دوال جاهزة من React تسمح لك باستخدام الحالة (state)، التأثيرات (effects)، السياق (context) وغيرها داخل المكوّنات الدالّية من دون الحاجة لكتابة مكوّنات صنفية (class components). النتيجة: كود أبسط، قابل لإعادة الاستخدام، وأسهل للاختبار…

ما هي useState؟ هي Hook من رياكت تسمح لك بإضافة حالة (state) داخل المكوّنات الدالّية (Function Components).ترجّع مصفوفتين: التوقيع (Signature) القواعد الذهبية (Rules) 1) عدّاد بسيط (Basic Counter) الكود الشرح 2) حالة بدائية (Boolean Toggle) الكود الشرح 3) حالة كائن…

🔹 التعريف:JSX هي صيغة (Syntax) خاصّة تُستخدم في React.js لكتابة واجهات المستخدم بطريقة تشبه HTML داخل كود JavaScript.بكلمات بسيطة: JSX يسمح لك بكتابة كود يشبه HTML داخل JavaScript — لكن في الحقيقة هو تحويل إلى دوال JavaScript عند التنفيذ. 🧠…

React.js هي مكتبة جافاسكربت مفتوحة المصدر تُستخدم لبناء واجهات المستخدم التفاعلية، طوّرتها شركة فيسبوك، وتعتمد على مبدأ المكوّنات (Components) لتسهيل إنشاء واجهات قابلة لإعادة الاستخدام وسريعة الأداء. ميزات React.js ولماذا نتعلمها: 🧠 لماذا نتعلمها؟لأنها واحدة من أكثر التقنيات طلبًا في…