{"id":"l-rn-1-2","courseId":"react-native-apps","lang":"ar","kind":"lesson","summary":"أنشئ مشروع Trailhead باستخدام create-expo-app، وشغّله على هاتفك وعلى محاكٍ، وأضف المكتبات بأمان، واعرف متى يتوقّف Expo Go عن أن يكون كافيًا.","html":"

توصي وثائق React Native ببدء التطبيقات الجديدة باستخدام إطار عمل (framework)، والإطار الذي تشير إليه هو Expo. يمنحك Expo قالب المشروع، وخادم التطوير، ومكتبة من واجهات الجهاز (الكاميرا، الموقع، التخزين، الإشعارات) تعمل كلها مع إصدار SDK واحد، وخدمة سحابية للبناء والإطلاق. ويبقى بإمكانك كتابة كود أصلي حين تحتاج إليه؛ فأنت لست مقيّدًا.

\n

أنشئ Trailhead

\n

تحتاج إلى Node.js (إصدار LTS نشط) وهاتف أو محاكٍ. ثم:

\n
Terminal
npx create-expo-app@latest trailhead\ncd trailhead\nnpx expo start
\n

يأتي القالب الافتراضي مع TypeScript وExpo Router (نظام التوجيه في Expo) مضبوطَين مسبقًا. هذه هي الأجزاء التي ستلمسها أولًا:

\n
Text
trailhead/\n  src/app/_layout.tsx    root layout: wraps every screen (navigation lives here)\n  src/app/index.tsx      the first screen, at route "/"\n  src/app/explore.tsx    a second example screen, at "/explore"\n  assets/                icons, splash image, fonts\n  app.json               app name, icons, bundle ids, plugin settings\n  package.json           dependencies, including "expo" (the SDK version)
\n

كل ملف داخل src/app يصبح شاشة. ستتعلّم كيف يعمل التوجيه في القسم 3؛ أما الآن فافتح src/app/index.tsx، وغيّر بعض النص، واحفظ.

\n

شغّله على جهاز

\n

يشغّل npx expo start أداة Metro، وهي مُجمِّع (bundler) كود JavaScript، ويطبع رمز QR. أمامك ثلاث طرق للدخول:

\n\n

أثناء عمل Metro، تستحق بضعة مفاتيح أن تحفظها أصابعك: r يعيد تحميل التطبيق، وm يفتح قائمة التطوير داخل التطبيق، وj يفتح React Native DevTools. وحفظ أي ملف يشغّل Fast Refresh، الذي يُدخل الكود الجديد دون أن تفقد الـ components الـ state الخاصة بها.

\n\n

إضافة المكتبات على طريقة Expo

\n

كل إصدار من Expo SDK يستهدف إصدارًا واحدًا من React Native، والمكتبات الأصلية يجب أن تتوافق معه. لذا، بدلًا من npm install، تضيف المكتبات هكذا:

\n
Terminal
npx expo install expo-location expo-image-picker
\n

يبحث npx expo install عن الإصدار المعروف أنه يعمل مع الـ SDK لديك ويثبّته. أما حزم JavaScript الخالصة (مكتبة للتواريخ مثلًا) فيمرّرها إلى مدير الحزم لديك، لذا يمكنك استخدامه لكل شيء.

\n

وحين تشعر أن شيئًا ليس على ما يرام بعد ترقية، شغّل فحص السلامة:

\n
Terminal
npx expo-doctor
\n

يُبلغك عن الإصدارات غير المتوافقة، والوحدات الأصلية المكرّرة، ومشكلات الإعداد.

\n\n

Expo Go مقابل الـ development build

\n

Expo Go تطبيق من المتجر فيه مجموعة ثابتة من الوحدات الأصلية المدمجة: الـ Expo SDK وعدد قليل من المكتبات الشائعة. ويُحمَّل كود JavaScript الخاص بك داخله. هذا مثالي للتعلّم، وهو السبب في أنك استطعت تشغيل Trailhead بعد ثوانٍ من إنشائه.

\n

لكن حدوده تظهر بسرعة في المشاريع الحقيقية:

\n\n

الـ development build (نسخة التطوير) هو تطبيقك أنت، باسم تطبيقك وأيقونته ومعرّف الحزمة (bundle identifier) ووحداته الأصلية، إضافةً إلى أدوات التطوير نفسها (Fast Refresh، قائمة التطوير، DevTools). تنشئه محليًا:

\n
Terminal
npx expo run:ios\nnpx expo run:android
\n

أو في السحابة، دون Xcode أو Android Studio على جهازك، باستخدام EAS Build (القسم 5). بعد ذلك، يقدّم npx expo start كود JavaScript إلى الـ development build تمامًا كما كان يقدّمه إلى Expo Go.

\n

القاعدة المعقولة: تعلّم وابنِ النماذج الأولية في Expo Go، ثم انتقل إلى development build في أول مرة تحتاج فيها إلى شيء لا يملكه Expo Go. في Trailhead ستبقى في Expo Go حتى القسم 4.

\n

تغييرات JavaScript مقابل التغييرات الأصلية

\n

هذا التمييز يمتد على طول الدورة، فلنسمّه الآن. تغييرات JavaScript (الـ components، التنسيقات، المنطق) تصل إلى التطبيق العامل عبر Fast Refresh أثناء التطوير، ولاحقًا عبر التحديثات عبر الهواء (over-the-air) في بيئة الإنتاج. أما التغييرات الأصلية (إضافة وحدة أصلية، أو تغيير نص الأذونات، أو أيقونة التطبيق، أو معرّف الحزمة في app.json) فتحتاج إلى ملف تطبيق جديد. وحين «لا يظهر» تغيير ما، اسأل نفسك: من أي نوع كان؟

\n

في الدرس التالي ستستبدل الشاشة التجريبية في القالب بأول واجهة حقيقية لـ Trailhead، مستخدمًا الـ components الأساسية في React Native.

\n","toc":[{"id":"sec-1","text":"أنشئ Trailhead","level":2},{"id":"sec-2","text":"شغّله على جهاز","level":2},{"id":"sec-3","text":"إضافة المكتبات على طريقة Expo","level":2},{"id":"sec-4","text":"Expo Go مقابل الـ development build","level":2},{"id":"sec-5","text":"تغييرات JavaScript مقابل التغييرات الأصلية","level":2}],"takeaways":["npx create-expo-app@latest ينشئ مشروع TypeScript مع Expo Router ومسارات مبنية على الملفات داخل src/app.","npx expo start يشغّل خادم التطوير Metro؛ امسح رمز QR بتطبيق Expo Go، أو اضغط i أو a لتشغيل محاكي iOS أو Android.","ثبّت المكتبات باستخدام npx expo install، فهو يختار الإصدار المتوافق مع إصدار Expo SDK في مشروعك.","Expo Go بيئة تعلّم تجريبية فيها مجموعة ثابتة من الوحدات الأصلية؛ أما الـ development build فهو تطبيقك أنت مع أدوات التطوير، والمشاريع الحقيقية تنتقل إليه مبكرًا."],"further":[{"title":"Create a project","url":"https://docs.expo.dev/get-started/create-a-project/"},{"title":"Start developing","url":"https://docs.expo.dev/get-started/start-developing/"},{"title":"Introduction to development builds","url":"https://docs.expo.dev/develop/development-builds/introduction/"}],"quiz":[{"q":"

تحتاج إلى expo-location في Trailhead. أي أمر يجب أن تشغّل؟

","options":[{"text":"npm install expo-location@latest","why":"قد يستهدف أحدث إصدار SDK أحدث من مشروعك، فيحدث عدم توافق في الكود الأصلي لا يظهر إلا وقت التشغيل."},{"text":"npx expo install expo-location","why":"صحيح. يثبّت الإصدار المعروف أنه يعمل مع إصدار Expo SDK في مشروعك."},{"text":"npx expo add-module expo-location","why":"لا يوجد أمر باسم add-module. الأمر الذي يجب أن تتذكّره هو npx expo install."}],"answer":1},{"q":"

أضاف Trailhead مكتبة فيها كود أصلي مخصّص ليس ضمن Expo Go. ما الخطوة التالية الصحيحة؟

","options":[{"text":"الاستمرار في استخدام Expo Go وانتظار أن يحمّل الوحدة عبر الشبكة.","why":"لا يستطيع Expo Go تنزيل كود أصلي. وحداته الأصلية ثابتة منذ لحظة بنائه ونشره في المتاجر."},{"text":"الخروج من Expo (eject) وصيانة مجلّدَي ios وandroid يدويًا.","why":"لا حاجة لذلك. مشاريع Expo يمكن أن تضمّ أي مكتبة أصلية؛ كل ما عليك أن تبني ملف تطبيقك الخاص."},{"text":"إنشاء development build، إما محليًا باستخدام npx expo run:ios أو في السحابة باستخدام EAS Build.","why":"صحيح. الـ development build هو تطبيقك أنت بوحداتك الأصلية، إضافةً إلى أدوات التطوير التي كانت لديك في Expo Go."}],"answer":2},{"q":"

عدّلت نص العنوان في src/app/index.tsx وحفظت الملف. ماذا يحدث على الهاتف الذي يشغّل التطبيق؟

","options":[{"text":"يُدخل Fast Refresh الكود الجديد ويحافظ على الـ state الخاصة بالـ components حيثما أمكن.","why":"صحيح. تغييرات JavaScript يُعاد تحميلها في مكانها في نحو ثانية؛ والتغييرات الأصلية وحدها تحتاج إلى build جديد."},{"text":"لا شيء حتى تعيد بناء ملف التطبيق.","why":"إعادة البناء مطلوبة فقط للتغييرات الأصلية، مثل إضافة وحدات أصلية جديدة أو إعدادات في app.json تغيّر الملف التنفيذي."},{"text":"يعيد التطبيق التشغيل من شاشة البداية ويفقد كل الـ state.","why":"هذه إعادة تحميل كاملة، ويمكنك تشغيلها بالضغط على r، لكن حفظ الملف يستخدم Fast Refresh."}],"answer":0}],"exercise":{"kind":"fill","language":"bash","template":"# 1. Create the project\nnpx {{0}}@latest trailhead\ncd trailhead\n\n# 2. Start the dev server (Metro)\nnpx expo {{1}}\n\n# 3. Add GPS support at the version that matches your SDK\nnpx expo {{2}} expo-location\n\n# 4. Check the project for version mismatches\nnpx {{3}}\n\n# 5. Build and run a development build on the iOS Simulator\nnpx expo {{4}}","blanks":[{"answers":["create-expo-app"]},{"answers":["start"]},{"answers":["install"]},{"answers":["expo-doctor","expo-doctor@latest"]},{"answers":["run:ios"]}],"title":"أوامر Expo التي ستكتبها كل أسبوع","prompt":"

املأ الفراغات لتُنشئ جلسة الطرفية هذه مشروع Trailhead، وتشغّل خادم التطوير، وتضيف expo-location بأمان، وتشغّل فحص السلامة، ثم تبني development build لمحاكي iOS.

\n","hints":["اسم حزمة مولّد المشروع هو ما ستبحث عنه في npm لإنشاء تطبيق Expo.","إضافة مكتبة أصلية تستخدم الفعل نفسه الذي في npm، لكن عبر npx expo.","البناء المحلي لمنصّة ما يستخدم run: متبوعًا باسم المنصّة."],"explanation":"

npx create-expo-app@latest يُنشئ هيكل المشروع، وnpx expo start يشغّل Metro، وnpx expo install يختار إصدار المكتبة المتوافق مع الـ SDK لديك. وnpx expo-doctor يفحص حالات عدم التوافق. أما npx expo run:ios فيترجم ملف تطبيقك الخاص (development build) ويثبّته على المحاكي، وهو ما تحتاج إليه حين لا يملك Expo Go وحدة أصلية تستخدمها.

\n","checkLabels":{}},"words":702,"readMinutes":4}