كيف تعمل المكونات وJSX في React Native؟

Question

Accepted Answer

React Native يستخدم **نموذج المكونات وJSX من React** — بناء واجهات المستخدم من **مكونات** قابلة لإعادة الاستخدام تُرجع JSX. إذا كنت تعرف React للويب، فهذا ينتقل مباشرة؛ الفرق الرئيسي هو استخدام مكونات أصلية بدلاً من عناصر HTML. ## المكونات وJSX ```jsx // a functional component returns JSX describing the UI (using RN core components) function Greeting({ name }) { // receives props return ( Hello, {name}! {/* JSX with an embedded expression */} ); } // compose components (like React for web) function App() { return ( {/* reuse the component */} ); } ``` المكونات عبارة عن قطع واجهة المستخدم القابلة لإعادة الاستخدام (وظائف تُرجع JSX)؛ تأخذ **props** (مدخلات) وتتكون في أشجار — تماماً مثل React للويب، لكن مع مكونات أصلية. ## Props والحالة (مفاهيم React) ```jsx import { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); // STATE (useState hook) return ( setCount(count + 1)}> Count: {count} {/* re-renders when state changes */} ); } ``` **Props** تمرر البيانات إلى المكونات؛ **الحالة** (عبر `useState`) تحتفظ بالبيانات المتغيرة التي تُطلق إعادة التصيير — نفس نموذج React كما هو على الويب. ## معرفة React تنتقل ```text ✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys — all the same as React for web ✓ The main difference: native components (View/Text) instead of HTML; styling differs → React developers can apply most of their knowledge directly to React Native. ``` ## لماذا هذا مهم فهم كيفية عمل المكونات وJSX في React Native أمر أساسي لأن **React Native مبني على نموذج مكونات React**، لذا فهم ذلك ضروري، والميزة الرئيسية هي أن **معرفة React تنتقل مباشرة**. المكونات (قطع واجهة المستخدم القابلة لإعادة الاستخدام التي تُرجع JSX، وتأخذ props كمدخلات، وتتكون في أشجار) وJSX (الصيغة التي تصف واجهة المستخدم مع التعبيرات المدمجة) هي أساس تطوير React Native — نفس الشيء مثل React للويب. فهم **props** (تمرير البيانات إلى المكونات) و**الحالة** (عبر hook `useState`، التي تحتفظ بالبيانات المتغيرة التي تُطلق إعادة التصيير) ضروري لأن هذه مفاهيم React هي كيفية استقبال مكونات React Native للبيانات وإدارة التغيير — مماثلة تماماً لـ React على الويب. الفكرة الرئيسية هي أن **معرفة React تنتقل**: المكونات وJSX وprops والحالة والhooks (useState وuseEffect وغيرها) والتكوين والمفاتيح تعمل بنفس الطريقة كما في React للويب، مع الاختلافات الرئيسية كونها استخدام المكونات الأصلية (View وText) بدلاً من HTML والأسلوب المختلف. هذه القابلية للنقل هي سبب رئيسي لجاذبية React Native — مجموعة كبيرة من مطوري React/الويب يمكنهم تطبيق معظم معرفتهم الموجودة مباشرة على بناء تطبيقات محمول أصلية، مع منحنى تعلم صغير نسبياً يركز على المكونات الأصلية والتفاصيل الخاصة بالمنصة. بما أن React Native هي في الأساس React (المكونات وJSX وprops والحالة والhooks) مطبقة على واجهة المستخدم الأصلية، وفهم هذا النموذج ضروري لبناء تطبيقات React Native مع الاعتراف بأن معرفة React تنتقل مباشرة (ميزة رئيسية)، فهم المكونات وJSX في React Native هو معرفة أساسية وضرورية — نموذج البرمجة الأساسي لـ React Native، ضروري لبناء التطبيقات، وخاصة قيمة في تسليط الضوء على كيفية تطبيق مهارات React/الويب مباشرة على تطوير الجوال في React Native.