افتح تطبيق Notes على هاتفك واسحب إصبعك نزولًا على قائمة طويلة. الارتداد عند أعلى القائمة، وطريقة ظهور مقابض تحديد النص، والتمرير الذي يواصل الانزلاق بعد أن ترفع إصبعك: كل ذلك من كود نظام التشغيل نفسه. ووعد React Native أن يحصل تطبيقك على السلوك نفسه، لأنه يستخدم الـ views نفسها.
\nنبني في هذه الدورة Trailhead، وهو سجلّ لرحلات المشي. في النهاية سيكون لديك قائمة بالرحلات السابقة، وشاشات لتفاصيل كل درب، ونموذج لتسجيل رحلة جديدة، وتتبّع بالـ GPS، وصور، وتذكيرات، وتخزين دون اتصال، وbuild يعمل على هاتف حقيقي. وكل درس يضيف قطعة واحدة.
\nعلى الويب، تحوّل React الـ components إلى عُقد DOM، ثم يرسمها المتصفّح. أما React Native فيستبدل الطبقة السفلى. أنت تكتب components باستخدام <View> و<Text> و<Image>؛ وتحسب React ما الذي تغيّر؛ ثم يُنشئ مُصيِّر React Native الـ native views (عناصر الواجهة الأصلية للمنصّة) أو يحدّثها: UIView على iOS، وandroid.view.View على Android.
import { Text, View } from 'react-native';\n\nexport default function Home() {\n return (\n <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>\n <Text>Trailhead</Text>\n </View>\n );\n}لا HTML، ولا ملف CSS، ولا DOM. كائن style يشبه CSS، وهذا مقصود، لكنه كائن JavaScript يقرؤه محرّك التخطيط في React Native (واسمه Yoga) ليحدّد أماكن الـ native views.
يعمل كود JavaScript في Hermes، وهو محرّك JavaScript صُمّم لـ React Native، على thread خاص به. أما الـ UI thread الخاص بالمنصّة فيرسم الـ views ويستقبل اللمسات. وفصلهما هو ما يجعل التمرير الأصلي سلسًا بينما يعمل كودك، وهو أيضًا ما يجعل الأزرار تبدو ميتة عندما تشغّل حلقة تكرار متزامنة طويلة في JavaScript: اللمسة تصل، لكن لا أحد متفرّغ لمعالجتها.
\nستعود إلى هذا في درس الأداء. أما الآن فتذكّر القاعدة العملية: أبقِ الـ JS thread متفرّغًا أثناء الإيماءات والحركات.
\nلسنوات، كانت JavaScript والكود الأصلي يتواصلان عبر «جسر» (bridge) يحوّل الرسائل إلى JSON ويرسلها على دفعات. ثم حلّت محلّه الـ New Architecture (المعمارية الجديدة):
\nأصبحت المعمارية الافتراضية في React Native 0.76، والخيار الوحيد بدءًا من 0.82. لن تضبط أيًّا منها بنفسك؛ فمشاريع Expo تستخدمها مباشرة. لكنها تهمّ عند اختيار المكتبات: أي مكتبة تثبّتها يجب أن تدعمها، والمكتبات التي تخضع للصيانة تدعمها.
\n\nالـ components والـ props والـ state والـ hooks والـ context والـ keys: كلها كما هي. وميزات React 19 تعمل أيضًا. ما يتغيّر هو كل ما يحيط بـ React: العناصر الأساسية (View بدلًا من div)، والتنسيق (لا cascade، وflexbox يبدأ بالاتجاه العمودي)، والتنقّل (stacks وtabs بدلًا من عناوين URL في شريط)، وواجهات الجهاز (أذونات قد يرفضها المستخدم)، والإطلاق (مراجعة المتجر بدلًا من deploy).
في الدرس التالي ستنشئ مشروع Trailhead باستخدام Expo وتشغّله على هاتفك.
\n","toc":[{"id":"sec-1","text":"عناصر أصلية تصفها React","level":2},{"id":"sec-2","text":"خيطان (threads) يهمّانك","level":2},{"id":"sec-3","text":"الـ New Architecture باختصار","level":2},{"id":"sec-4","text":"ما الذي ينتقل من React وما الذي لا ينتقل","level":2}],"takeaways":["يرسم React Native عناصر واجهة أصلية حقيقية مثل UIView على iOS وandroid.view.View على Android؛ فلا متصفّح ولا DOM.","يعمل كود JavaScript في محرّك Hermes على thread خاص به، بينما يرسم الـ UI thread الخاص بالمنصّة البكسلات ويستقبل اللمسات.","الـ New Architecture (أي JSI ومُصيِّر Fabric والـ TurboModules) هي المعمارية الوحيدة منذ React Native 0.82.","معرفتك بـ React تنتقل كما هي؛ والذي يتغيّر هو مجموعة العناصر الأساسية والتنسيق والتنقّل وطريقة الإطلاق."],"further":[{"title":"Core Components and Native Components","url":"https://reactnative.dev/docs/intro-react-native-components"},{"title":"About the New Architecture","url":"https://reactnative.dev/architecture/landing-page"}],"quiz":[{"q":"يقول زميلك إن «React Native مجرد WebView بواجهة برمجية أجمل». ما التصحيح الأدق؟
","options":[{"text":"إنه يرسم HTML، لكنه يحوّله إلى كود أصلي مسبقًا قبل التشغيل.","why":"لا يوجد HTML في أي مرحلة. أنت تكتب components من React مثل<View> و<Text>، ولا تكتب <div> أبدًا."},{"text":"الـ components التي تكتبها تصبح views حقيقية من المنصّة؛ JavaScript تصف الواجهة والكود الأصلي يرسمها.","why":"صحيح. مُصيِّر React Native ينشئ الـ native views ويحدّثها، ولهذا يبدو التمرير وإدخال النص كما في أي تطبيق آخر."},{"text":"يستخدم WebView على Android وviews أصلية على iOS.","why":"المنصّتان تحصلان على views أصلية. Android ليس هدفًا من الدرجة الثانية يعتمد على متصفّح كحلّ احتياطي."}],"answer":1},{"q":"يشغّل Trailhead حلقة تكرار ثقيلة في JavaScript لمدة ثانيتين. ما الذي سيلاحظه المستخدم على الأرجح؟
","options":[{"text":"لا شيء، لأن JavaScript تعمل على الـ UI thread ولها الأولوية.","why":"JavaScript لا تعمل على الـ UI thread. وهذا الفصل بالذات هو ما يجعلها قادرة على التأخّر دون أن يلاحظ نظام التشغيل."},{"text":"ينهار التطبيق فورًا بخطأ نفاد الذاكرة.","why":"الحلقة الطويلة تحجب التنفيذ، ولا تحجز ذاكرة بلا حدود. سترى تجمّدًا، لا انهيارًا."},{"text":"تتوقّف الاستجابة للمسات والتحديثات التي تقودها JavaScript حتى تنتهي الحلقة، مع أن نظام التشغيل يُبقي التطبيق حيًّا.","why":"صحيح. الـ JS thread مشغول، فلا يستطيع الاستجابة للأحداث أو جدولة عمليات render. أما العمل الذي يقوده الكود الأصلي، مثل التمرير الذاتي لـ ScrollView، فقد يستمر."}],"answer":2},{"q":"ما الذي يمنحك إياه JSI، وهو جزء من الـ New Architecture؟
","options":[{"text":"استدعاءات مباشرة بين JavaScript وC++ دون تحويل كل رسالة إلى JSON.","why":"صحيح. كان الـ bridge القديم يجمع رسائل JSON ويرسلها بشكل غير متزامن؛ أما JSI فيتيح لـ JavaScript الاحتفاظ بمراجع لكائنات أصلية واستدعاءها مباشرة."},{"text":"طريقة لكتابة الواجهة بـ Swift وKotlin بدلًا من JSX.","why":"ما زلت تكتب الواجهة بـ React. JSI طبقة توصيل تحت السطح، ونادرًا ما تتعامل معها بنفسك."},{"text":"محرّك JavaScript يحلّ محلّ Hermes.","why":"ما زال Hermes هو المحرّك. JSI هي الواجهة التي تكشفها المحرّكات للكود الأصلي، وليست محرّكًا."}],"answer":0}],"exercise":{"kind":"choice","multiple":true,"options":["native-views","js-thread","css-file","bridge-json","react-skills"],"correct":["native-views","js-thread","react-skills"],"title":"ما الذي يحدث فعلًا على الهاتف؟","prompt":"تعرض الشاشة الأولى في Trailhead قائمة بالرحلات وزرًّا كبيرًا مكتوبًا عليه Log a hike. اختر كل عبارة صحيحة عن طريقة عمل هذه الشاشة على الهاتف اليوم.
\n","hints":["فكّر في من يرسم البكسلات، وأين يعمل كودك.","تذكّر المعمارية التي يستخدمها React Native حصرًا منذ الإصدار 0.82.","ثلاث عبارات صحيحة."],"explanation":"القائمة والزر native views حقيقية ينشئها مُصيِّر Fabric، وكود JavaScript يعمل في Hermes على thread خاص به، منفصل عن الـ UI thread الذي يرسم ويستقبل اللمسات. ومعرفتك بـ React تنتقل دون تغيير. لا يوجد ملف CSS ولا cascade: التنسيقات كائنات JavaScript. أما الـ bridge الذي يجمع رسائل JSON فهو من المعمارية القديمة، وقد حلّت JSI محلّه.
\n","checkLabels":{},"optionText":{"native-views":{"text":"الزر view حقيقي من المنصّة، من النوع نفسه الذي يستخدمه تطبيق مكتوب بـ Swift أو Kotlin.","why":"صحيحة. مُصيِّر React Native ينشئ native views، لا عناصر HTML داخل WebView."},"js-thread":{"text":"إذا كان الـ JS thread مشغولًا بحلقة تكرار طويلة، يتوقّف الزر عن الاستجابة للمسات حتى تنتهي.","why":"صحيحة. اللمسة تصل إلى الـ UI thread، لكن معالج JavaScript لا يستطيع العمل حتى يتفرّغ الـ JS thread."},"css-file":{"text":"ألوان الزر تأتي من ملف CSS تنتقل قواعده بالتتابع (cascade) إلى الـ components الأبناء.","why":"خاطئة. التنسيقات كائنات JavaScript عادية تُمرَّر لكل component؛ ولا يوجد cascade من ملف تنسيق."},"bridge-json":{"text":"كل ضغطة على الزر تُحوَّل إلى JSON وتُرسَل عبر الـ bridge ضمن دفعة.","why":"خاطئة. هذا وصف للمعمارية القديمة. مع الـ New Architecture تتيح JSI لـ JavaScript والكود الأصلي أن يستدعي كلٌّ منهما الآخر مباشرة."},"react-skills":{"text":"تستخدم الشاشة الـ components والـ props والـ state والـ hooks نفسها التي تعرفها من React.","why":"صحيحة. React نفسها لم تتغيّر؛ ما يتغيّر هو العناصر الأساسية والمنصّة من حولها."}}},"words":485,"readMinutes":3}