باعتبارك مطور React / JS، ربما كانت لديك فكرة "هل يجب أن أتعلم React Native؟" إنه سؤال عادل وقد طرحته على نفسي قبل بضع سنوات . اتضح أن تعلم React Native كان بالتأكيد القرار الصحيح. وهذا ما جعلني أتولى دوري كمساعد مطور أول لدى Amazon، حيث أستخدم الآن React Native لإنشاء تطبيقات عبر أجهزة Android وFire TV والأجهزة اللوحية.

إذا كنت تناقش ما إذا كنت تريد الانتقال إلى ما هو أبعد من تطبيقات الويب، فإليك بعض الأفكار حول السبب الذي يجعل الأمر يستحق التفكير:

لماذا نتعلم React Native؟

• تمتد فلسفة "التعلم مرة واحدة، والكتابة في أي مكان" إلى ما هو أبعد من iOS وAndroid فقط - فهي تشمل الآن منصات مثل tvOS، وVisionOS، وحتى بيئات سطح المكتب مثل أجهزة macos التفاعلية الأصلية

• أهمية الصناعة : تعتمد جميع الشركات الكبرى مثل Amazon وMeta وMicrosoft React Native. لماذا؟ إمكانية إعادة استخدام الكود، وفعالة من حيث التكلفة وتسمح لك ببناء منصة مشتركة.

• دعم مجتمعي قوي : لدى React Native أكثر من 100 ألف نجم و24 ألف تفرع على GitHub، مع تحديثات منتظمة وتطوير نشط.

• رضا مرتفع للمطورين: وفقًا لاستطلاع حالة React Native، فإن 90% من المطورين سيستخدمون React Native مرة أخرى!

• النظام البيئي الموحد: يتجمع مجتمع React Native حول Expo، مما يؤدي إلى تحسينات أسرع، ومكتبات خارجية متكاملة بشكل جيد، وموارد مشتركة وفيرة.

• تجربة مألوفة للمطورين

React vs React Native: أوجه التشابه والاختلاف

العمارة والتجميع

التشابه:

يستخدم كلاهما عملية تسوية يُشار إليها غالبًا باسم "DOM الافتراضي". تقوم هذه العملية بتمييز شجرة عن أخرى لتحديد أجزاء واجهة المستخدم التي تحتاج إلى التحديث. ونتيجة لذلك، يدعم كلاهما التحديث السريع، مما يتيح لك رؤية تغييرات واجهة المستخدم في الوقت الفعلي.

الاختلافات:

يتم تجميع React للعرض في متصفحات الويب، مع الاستفادة من DOM وواجهات برمجة تطبيقات الويب. حتى عند الوصول إليها عبر متصفحات الهاتف المحمول، فإنها لا تزال مقيدة بقدرات المتصفح والوصول المحدود إلى ميزات الجهاز الأصلية.

من ناحية أخرى، يقوم React Native بالتجميع إلى التعليمات البرمجية الأصلية، مما يسمح بالوصول المباشر إلى واجهات برمجة التطبيقات والميزات الخاصة بالنظام الأساسي. وهذا يعني أن تطبيقات React Native يمكنها الاستفادة من إمكانات الجهاز مثل الوصول إلى الكاميرا ودفع الإشعارات وتوفير تجربة مستخدم أصلية. ونتيجة لهذا، فإنه يتخذ نهجًا مختلفًا في بنيته، مع ما يسمى بالهندسة المعمارية "بدون جسر"، وبدلاً من DOM، فهو يحتوي على مكونات أصلية. يستخدم وحدة Turbo الأصلية ويستفيد من واجهة JavaScript (JSI) مما يسمح بالاتصال المباشر بين JavaScript والتعليمات البرمجية الأصلية. هذه البنية جديدة وقد تسمع مصطلح "الهندسة المعمارية الجديدة" يتم طرحه. إذا كنت مهتمًا بمعرفة المزيد فقد قمت بتغطية هذا في مقال سابق.

JSX والخطافات

التشابه

كلاهما يستخدم JSX لوصف واجهة المستخدم ويدعم خطافات React (useState، useEffect، وما إلى ذلك). يتيح لك ذلك الحفاظ على أسلوب ترميز متسق ونهج إدارة الحالة عبر كلتا المكتبتين.

عناصر

التشابه

يتبع كل من React و React Native بنية قائمة على المكونات وتتبع المكونات نفس أساليب دورة الحياة تحت الغطاء.

الاختلافات:

1. استيراد المكونات: في React Native، يمكنك استيراد مكونات واجهة المستخدم من رد الفعل الأصلي، على عكس React حيث تتوفر عناصر HTML عالميًا. هذا الاختلاف هو في الواقع أحد الأشياء المفضلة لدي في React Native حيث يمكنك الوصول إلى مجموعة من المكونات المعدة مسبقًا خارج الصندوق، على سبيل المثال. عرض، نص، صورة، TextInput، ScrollView.
2. المكونات الخاصة بالنظام الأساسي: يقدم React Native أيضًا مكونات وواجهة برمجة تطبيقات مصممة خصيصًا لنظامي التشغيل iOS وAndroid.
3. معالجة النص: في React Native، يجب تغليف كل النص في مكون ، على عكس React حيث يمكن وضع النص مباشرة في العديد من العناصر. وهذا يضمن التصميم والسلوك المناسبين للنص عبر الأنظمة الأساسية المختلفة، مما يحسن الاتساق وإمكانية الوصول.
4. التعامل مع الأحداث: يستخدم React أحداث onClick لأحداث النقر، بينما يستخدم React Native onPress لتفاعلات اللمس، مما يعكس الطبيعة المختلفة للتفاعلات.

التصميم

التشابه

يقدم كل من React و React Native أساليب مرنة لمكونات التصميم. كلاهما يدعم التصميم المضمن، مما يسمح لك بتطبيق الأنماط مباشرة على المكونات. بالإضافة إلى ذلك، كلاهما يتيح إنشاء كائنات نمط قابلة لإعادة الاستخدام.

الاختلافات

1. لغة التصميم: يستخدم React عادةً مكتبات CSS أو CSS-in-JS للتصميم بينما يستخدم React Native نظام تصميم قائم على كائنات JavaScript مع بعض الاختلافات:
   • أسماء الخصائص: يستخدم React Native CamelCase لأسماء الخصائص (على سبيل المثال، حجم الخط بدلاً من حجم الخط).
   • وحدات القيمة: في React Native لا تحتاج إلى وحدات لخصائص مثل العرض أو الارتفاع أو حجم الخط، فهي تفترض تلقائيًا أن الأبعاد في وحدات بكسل مستقلة عن الكثافة.
2. StyleSheet API: يوفر React Native طريقة StyleSheet.create() لإنشاء كائنات النمط. تعمل واجهة برمجة التطبيقات هذه على تحسين الأداء من خلال تقليل الحاجة إلى إعادة إنشاء كائنات النمط في كل عرض.
3. تطبيق النمط: على عكس React حيث يمكن استخدام أسماء الفئات لتطبيق الأنماط، يطبق React Native الأنماط مباشرة على المكونات باستخدام خاصية النمط.
4. مجموعة فرعية محدودة من CSS: يدعم React Native فقط مجموعة فرعية من خصائص CSS، مع التركيز على تلك التي تكون منطقية للتخطيطات المختلفة. وهذا يعني أن بعض الخصائص الخاصة بالويب (مثل float) غير متوفرة، في حين أن خصائص أخرى (مثل flex) قد تتصرف بشكل مختلف.

المكتبات والأدوات

التشابه

يتشارك React وReact Native في العديد من المكتبات الأساسية. يمكنك استخدام نفس مكتبات إدارة الحالة مثل Redux وMobX ومكتبات جلب البيانات مثل Axios أو Fetch API.

الاختلافات

التنقل: بينما في React قد تستخدم عادةً React Router للتنقل عبر الويب، فإن React Native لديه مكتبة React Navigation الخاصة به. وذلك لأن React (الويب) يستخدم عادةً التنقل المستند إلى عنوان URL، حيث يتم عرض المكونات المختلفة بناءً على مسار عنوان URL الحالي. بينما يستخدم React Native التنقل القائم على المكدس، لمحاكاة تجربة تطبيق الهاتف المحمول الأصلي. يتم "تكديس" الشاشات فوق بعضها البعض، حيث تدفع التحولات الشاشات الجديدة إلى المكدس أو "تفرقعها".

؟ ملاحظة: تذكر تسمية المجلد الخاص بك "الشاشات" بدلاً من "الصفحات" عند تنظيم تطبيقك.

الاختبار: تظل المفاهيم متشابهة عبر كلتا المكتبتين، مع التركيز على عرض المكونات ومحاكاة الأحداث، لكن مكتبات الاختبار المحددة تختلف. تستخدم React مكتبة اختبار React، بينما تستخدم React Native مكتبة اختبار React Native (RNTL)، ولكن لا تؤجل لأن RNTL توفر فقط وظائف مساعدة خفيفة أعلى React Test Renderer.

؟ قد لا تكون بعض مكتبات React متوافقة مع جميع منصات React Native بسبب تبعيات DOM، ومع ذلك يمكنك التحقق من توافق النظام الأساسي لجميع المكتبات على: (https://reactnative.directory)

سد الفجوة باستخدام تطبيقات Universal React

إذا كنت لا تزال على الحياد، فإن ظهور Universal React Apps يعد مجالًا مثيرًا حقًا يعمل على سد الفجوة بين React وReact Native. تتيح لك مكتبات وأدوات React العالمية، التي يتم تشغيلها عادةً بواسطة الويب التفاعلي الأصلي، إنشاء تطبيقات مشتركة بين الأنظمة الأساسية تعمل على أنظمة iOS وAndroid والويب، كل ذلك من قاعدة تعليمات React Native المشتركة. يتيح لك ذلك مشاركة التنقل والتصميم وإدارة الحالة ومنطق الأعمال مما يوفر لك الوقت والجهد مع احترام الاتفاقيات الفريدة لكل نوع جهاز.

لذا مع استمرار طمس الخطوط الفاصلة بين DOM والجهاز، فإن تبني React Native يفتح الأبواب أمام عالم مثير لتطوير التطبيقات متعددة المنصات!

إذا كنت مستعدًا للبدء، فراجع التعليقات الخاصة بمواردي المفضلة أو قم بالتعليق عليها أدناه ⬇️