ما هو React Native وكيف يعمل؟

Question

Accepted Answer

**React Native** هو إطار عمل من Meta (Facebook) لبناء **تطبيقات جوال أصلية** (iOS و Android) باستخدام **React و JavaScript**. النهج المميز له هو تصيير **مكونات واجهة مستخدم أصلية حقيقية** (وليس webview)، مما يسمح لمطوري الويب و React ببناء تطبيقات أصلية من كود مشترك إلى حد كبير. ## ما هو React Native ```text React Native = build NATIVE mobile apps with React + JavaScript/TypeScript: → ONE codebase (mostly) for iOS AND Android → uses REACT (components, JSX, hooks, state) — familiar to web React developers → renders REAL NATIVE UI components (not a webview / not HTML) → native look & feel → by Meta; widely used (Instagram, Discord, Shopify, etc.) ``` ## كيف يعمل: JavaScript يقود واجهة المستخدم الأصلية ```text → You write React components in JavaScript → React Native maps them to REAL NATIVE views (a → a native UIView/ViewGroup; → native text) — NOT web/HTML elements → JS runs and communicates with the native side (historically via a "bridge"; the new architecture uses JSI for direct, faster communication) → The result is a genuinely native app, written in React/JS ``` ## الخصائص الرئيسية ```text ✓ NATIVE components → native performance and look/feel (vs webview-based frameworks) ✓ REACT model → components, JSX, hooks, state, props (web React skills transfer) ✓ Cross-platform → share most code across iOS/Android (some platform-specific code) ✓ FAST REFRESH → see changes instantly (like hot reload); large npm ecosystem ✓ Access native features via native modules / Expo ``` ## لماذا يهم فهم ما هو React Native وكيف يعمل هو أساسي لتطوير React Native وقيّم لفهم المشهد عبر الأنظمة الأساسية. React Native هو إطار عمل رئيسي لبناء **تطبيقات جوال أصلية باستخدام React و JavaScript** من قاعدة كود مشتركة إلى حد كبير — مما يعالج الحاجة المهمة لتجنب بناء تطبيقات iOS و Android منفصلة، مع السماح لمجموعة كبيرة من **مطوري الويب و React** بتطبيق مهاراتهم الحالية (المكونات و JSX و hooks والحالة) على الجوال، وهي ميزة رئيسية. الخاصية المحددة — أن React Native يصيّر **مكونات واجهة مستخدم أصلية حقيقية** (يربط مكونات React بطرق عرض أصلية فعلية وليس webview أو HTML) — من المهم فهمها لأنها تعطي التطبيقات **أداء وشعور/مظهر أصلي**، مما يميز React Native عن الأساليب المستندة إلى webview ويجعله حلاً تطبيق أصلي حقيقياً. فهم **كيفية عمله** (JavaScript يعمل ويقود واجهة المستخدم الأصلية، والتواصل مع الجانب الأصلي عبر الجسر تاريخياً أو JSI الأسرع في العمارة الجديدة) يوضح طبيعته الهجينة. فهم **الخصائص الرئيسية** — المكونات الأصلية (المظهر والأداء الأصليين)، نموذج React المألوف (نقل مهارات الويب)، مشاركة الكود عبر الأنظمة الأساسية، Fast Refresh (التحديثات الفورية)، نظام npm البيئي الكبير، والوصول إلى ميزات أصلية — يوضح سبب اعتماد React Native على نطاق واسع (يستخدمه Instagram و Discord و Shopify وآخرون كثيرون). بما أن React Native هو إطار عمل رئيسي عبر الأنظمة الأساسية (خاصة جذاب لمطوري React والويب) وفهم طبيعته (React و JS، المكونات الأصلية، عبر الأنظمة الأساسية) وكيفية عمله (قيادة واجهة مستخدم أصلية حقيقية) أساسي لعمل React Native وفهم الخيارات عبر الأنظمة الأساسية، فإن فهم ما هو React Native وكيف يعمل هو معرفة أساسية أساسية — نقطة البداية لتطوير React Native وسياق مهم لفهم كيفية ملاءمته بين التقنيات عبر الأنظمة الأساسية، وهو نهج مستخدم على نطاق واسع خاصة قيّم للاستفادة من مهارات React لبناء تطبيقات جوال أصلية.