بدء مشروع باستخدام Expo

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

أنشئ Trailhead

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

npx create-expo-app@latest trailhead
cd trailhead
npx expo start

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

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

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

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

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

• هاتفك مع Expo Go. ثبّت Expo Go من الـ App Store أو Play Store، ثم امسح رمز QR (بتطبيق الكاميرا على iOS، وبتطبيق Expo Go نفسه على Android). يجب أن يصل الهاتف والحاسوب أحدهما إلى الآخر عبر الشبكة.
• محاكي iOS (على macOS مع Xcode): اضغط i في الطرفية.
• محاكي Android (عبر Android Studio): اضغط a.

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

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

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

npx expo install expo-location expo-image-picker

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

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

npx expo-doctor

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

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

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

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

• لا يستطيع أن يضمّ إلا الكود الأصلي الذي تُرجم داخله. أي مكتبة خارج تلك المجموعة لن تعمل.
• يدعم إصدار SDK واحدًا في كل مرة (الأحدث عادةً)، فقد لا يفتح فيه مشروع قديم.
• بعض الميزات تحتاج إلى هوية تطبيقك الخاصة، مثل الإشعارات الفورية (push notifications) ومخطّطات الروابط المخصّصة (custom URL schemes).

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

npx expo run:ios
npx expo run:android

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

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

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

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

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