0Pricing
React Native Academy · درس

إنشاء أول مشروع Expo لك

استخدم `npx create-expo-app` لإنشاء هيكل مشروع جديد، واستكشف الملفات المُنشأة، وتعرّف إلى نقطة الدخول في تطبيق React Native.

إنشاء أول مشروع Expo لك درس مجاني في React Native Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في React Native Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة React Native Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

The create-expo-app Command

The easiest start is npx create-expo-app MyApp. It grabs the latest template, sets up folders, and installs everything. Add a template flag to start blank or with navigation.

# Create a new Expo project
npx create-expo-app MyFirstApp

# Create with a blank TypeScript template
npx create-expo-app MyFirstApp --template blank-typescript

# Create with tabs navigation template
npx create-expo-app MyFirstApp --template tabs

# Move into the project
cd MyFirstApp

Generated Folder Structure Overview

Get to know your new folders. App.js is the entry point React renders first, app.json holds your config, and assets/ stores images and fonts. The code maps it all out.

MyFirstApp/
├── App.js          # Root component (entry point)
├── app.json        # Expo configuration
├── package.json    # NPM dependencies & scripts
├── babel.config.js # Babel transpiler config
├── assets/         # Images, fonts, icons
│   ├── icon.png
│   ├── splash.png
│   └── adaptive-icon.png
└── node_modules/   # Installed packages

The app.json Configuration File

app.json is your project's config hub — app name, version, icons, splash screen, and per-platform settings for iOS and Android. Changing it needs a rebuild, not a hot reload.

{
  'expo': {
    'name': 'My First App',
    'slug': 'my-first-app',
    'version': '1.0.0',
    'orientation': 'portrait',
    'icon': './assets/icon.png',
    'splash': {
      'image': './assets/splash.png',
      'resizeMode': 'contain',
      'backgroundColor': '#ffffff'
    },
    'ios': {
      'bundleIdentifier': 'com.yourname.myfirstapp'
    },
    'android': {
      'package': 'com.yourname.myfirstapp'
    }
  }
}

The package.json and Scripts

package.json lists your dependencies and scripts. The defaults — start, ios, android, web — launch your app in different places. You can add your own scripts too.

// package.json (excerpt)
{
  'name': 'my-first-app',
  'version': '1.0.0',
  'main': 'node_modules/expo/AppEntry.js',
  'scripts': {
    'start': 'expo start',
    'android': 'expo start --android',
    'ios': 'expo start --ios',
    'web': 'expo start --web'
  },
  'dependencies': {
    'expo': '~50.0.0',
    'react': '18.2.0',
    'react-native': '0.73.x'
  }
}

Understanding App.js — The Root Component

App.js exports the root component React Native renders first — every other component lives inside it. It's the first file you'll edit, like index.html in a web project.

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working!</Text>
      <StatusBar style='auto' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

JSX: Describing UI in JavaScript

JSX lets you write HTML-like markup inside JavaScript to describe your UI. It's not HTML though — use style instead of class, onPress instead of onclick. The code shows it.

import { View, Text } from 'react-native';

const name = 'World';
const count = 42;

export default function App() {
  return (
    <View>
      {/* This is a JSX comment */}
      <Text>Hello, {name}!</Text>
      <Text>You have {count} messages.</Text>
      {count > 0 && <Text>You have unread items.</Text>}
    </View>
  );
}

Babel and Transpilation

Expo uses Babel to translate modern JavaScript and JSX into code each platform can run. You rarely touch its config — mainly to add handy path aliases like @/components.

// babel.config.js (default Expo config)
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      // Example: add module resolver for clean imports
      [
        'module-resolver',
        {
          root: ['./'],
          alias: {
            '@components': './components',
            '@screens': './screens',
          },
        },
      ],
    ],
  };
};

Installing Additional Dependencies

To add packages, prefer npx expo install over npm install — it picks the version that matches your Expo SDK, avoiding subtle mismatch bugs. Plain npm is fine for pure-JS packages.

# Use expo install for SDK-compatible packages
npx expo install expo-camera expo-location
npx expo install react-native-maps

# Use npm install for pure JS packages
npm install lodash date-fns

# Check for outdated Expo SDK packages
npx expo install --check

# Fix version mismatches
npx expo install --fix

Making Your First Code Change

Open App.js, change the text, and save — Fast Refresh updates your app in under a second while keeping its state. Try tweaking a color to see instant feedback. ✨

// Modified App.js
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Hello, React Native!</Text>
      <Text style={styles.subtitle}>I made my first change.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f0f4ff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 24, fontWeight: 'bold', color: '#333' },
  subtitle: { fontSize: 16, color: '#666', marginTop: 8 },
});

The Expo SDK and Managed Workflow

The Expo SDK gives you ready-made modules for camera, location, sensors, and more. In the managed workflow Expo handles native code for you — simpler, but limited to SDK APIs.

// Example: using Expo SDK modules
import * as Battery from 'expo-battery';
import * as Haptics from 'expo-haptics';

async function checkBattery() {
  const level = await Battery.getBatteryLevelAsync();
  console.log('Battery level:', level); // 0.0 - 1.0
}

async function vibrate() {
  await Haptics.notificationAsync(
    Haptics.NotificationFeedbackType.Success
  );
}

TypeScript Support in Expo

Expo has first-class TypeScript support. Start with the blank-typescript template, or rename App.js to App.tsx. TypeScript catches type errors early and sharpens autocomplete.

// App.tsx with TypeScript
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

interface Props {
  greeting?: string;
}

export default function App({ greeting = 'Hello' }: Props) {
  const message: string = greeting + ', TypeScript!';
  return (
    <View style={styles.container}>
      <Text>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
});

Quick Check

Test your understanding of React Native Mobile Development concepts from this lesson.

Lesson Recap

You scaffolded your first app: create-expo-app builds a full project instantly, app.json controls its settings, and Fast Refresh shows edits live. Next: running on devices! 🚀

الأسئلة الشائعة

هل درس «إنشاء أول مشروع Expo لك» مجاني؟

نعم — نص درس «إنشاء أول مشروع Expo لك» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة React Native Academy، انتقل إلى CoddyKit PRO. تتضمن دورة React Native Academy 4 دروس في المجموع.

ماذا ستتعلم في «إنشاء أول مشروع Expo لك»؟

استخدم `npx create-expo-app` لإنشاء هيكل مشروع جديد، واستكشف الملفات المُنشأة، وتعرّف إلى نقطة الدخول في تطبيق React Native. تتمرن على React Native Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ React Native Academy؟

لا تُشترط خبرة سابقة. React Native Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «إنشاء أول مشروع Expo لك»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس React Native Academy هذا؟

نعم. كل درس في React Native Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

  1. تثبيت Node وExpo CLI والمحاكيات
  2. إنشاء أول مشروع Expo لك
  3. التشغيل على الجهاز والمحاكي
  4. فهم بنية المشروع
← العودة إلى React Native Academy