تطوير تطبيقات React Native

|
ما هو React Native؟ خارطة التعلم

فيديوهات تعليمية

مشاهدة قائمة التشغيل على YouTube

ما هو مطور React Native؟

مطور التطبيقات متعددة المنصات (React Native)

مطور التطبيقات متعددة المنصات باستخدام React Native يركز على إنشاء تطبيقات تعمل على Android و iOS باستخدام JavaScript و React وكود واحد، مع الاستفادة من أدوات مثل Expo و Firebase.

متعددة المنصات

تطبيقات تعمل على Android و iOS

JavaScript

كود واحد لكل المنصات

Expo

تطوير أسرع وأسهل

Firebase

خدمات الخلفية المتكاملة

اللغات والأدوات المستخدمة

JavaScript

اللغة الأساسية لكتابة شفرات React Native

TypeScript

إضافة أنواع البيانات وتحسين جودة الكود

React

مكتبة JavaScript لبناء واجهات المستخدم

GraphQL

استعلامات بيانات فعالة أفضل من REST

Firebase

منصة شاملة توفر خدمات الخلفية

Expo

مجموعة أدوات لتسهيل التطوير

مهارات مطور React Native

1

JavaScript/TypeScript

إتقان أساسيات البرمجة الحديثة

2

React Concepts

مكونات، حالة، خصائص، وخطافات

3

React Native

مكونات وأدوات المنصة

4

التنقل بين الشاشات

React Navigation للملاحة

5

إدارة الحالة

Redux، Context API، MobX

6

خدمات الخلفية

Firebase، APIs، GraphQL

خارطة التعلم خطوة بخطوة

1

الخطوة 1: تعلم JavaScript

JavaScript هي اللغة الأساسية لكتابة شيفرات React Native

الأهمية:

الأساس لفهم كيفية بناء التطبيقات باستخدام البرمجة الوظيفية والتفاعلية

الأدوات:

أي محرر نصوص مثل VS Code

مثال JavaScript أساسي:

// أساسيات JavaScript
console.log("مرحبا بالعالم!");

// المتغيرات والثوابت
let name = "مطور React Native";
const age = 25;
var city = "الرياض";

// الدوال (Functions)
function greet(user) {
    return `مرحباً ${user}!`;
}

// الدوال السهمية (Arrow Functions)
const add = (a, b) => a + b;

// المصفوفات (Arrays)
const colors = ["أحمر", "أخضر", "أزرق"];
colors.map(color => console.log(color));

// الكائنات (Objects)
const user = {
    name: "أحمد",
    age: 30,
    email: "ahmed@example.com"
};

// التدمير (Destructuring)
const { name, age } = user;

// Promises و Async/Await
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('حدث خطأ:', error);
    }
}
2

الخطوة 2: تعلم React Native

React Native هو إطار عمل مفتوح المصدر لتطوير التطبيقات عبر الأنظمة باستخدام JavaScript

الأهمية:

الأساس لفهم كيفية بناء تطبيقات تعمل على Android و iOS مع كود واحد

الأدوات:

Expo أو React Native CLI

مثال تطبيق React Native أساسي:

// App.js - التطبيق الرئيسي
import React, { useState, useEffect } from 'react';
import { 
  View, 
  Text, 
  StyleSheet, 
  TouchableOpacity, 
  ScrollView,
  TextInput,
  Image 
} from 'react-native';

const App = () => {
  // حالة التطبيق
  const [count, setCount] = useState(0);
  const [name, setName] = useState('');
  const [users, setUsers] = useState([]);

  // تأثير جانبي (Side Effect)
  useEffect(() => {
    console.log('تم تحميل التطبيق');
    // جلب البيانات من API
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => setUsers(data.slice(0, 5)))
      .catch(error => console.error(error));
  }, []);

  // دالة زيادة العداد
  const incrementCount = () => {
    setCount(count + 1);
  };

  // دالة إعادة تعيين العداد
  const resetCount = () => {
    setCount(0);
  };

  return (
    
      
        مرحباً بتطوير React Native
        
      

      
        مثال العداد
        العداد: {count}
        
        
          
            زيادة
          
          
          
            إعادة تعيين
          
        
      

      
        إدخال البيانات
        
        {name ? (
          مرحباً {name}!
        ) : null}
      

      
        قائمة المستخدمين
        {users.map(user => (
          
            {user.name}
            {user.email}
          
        ))}
      
    
  );
};

// الأنماط (Styles)
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  header: {
    alignItems: 'center',
    marginBottom: 30,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
    marginBottom: 10,
  },
  logo: {
    width: 100,
    height: 100,
    borderRadius: 50,
  },
  section: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    marginBottom: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 3,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 15,
  },
  countText: {
    fontSize: 32,
    fontWeight: 'bold',
    color: '#007AFF',
    textAlign: 'center',
    marginBottom: 20,
  },
  buttonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    backgroundColor: '#007AFF',
    paddingVertical: 12,
    paddingHorizontal: 25,
    borderRadius: 25,
    minWidth: 120,
  },
  resetButton: {
    backgroundColor: '#FF3B30',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    marginBottom: 10,
  },
  greetingText: {
    fontSize: 18,
    color: '#4CD964',
    textAlign: 'center',
    marginTop: 10,
  },
  userCard: {
    backgroundColor: '#f8f8f8',
    padding: 15,
    borderRadius: 8,
    marginBottom: 10,
  },
  userName: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
  },
  userEmail: {
    fontSize: 14,
    color: '#666',
    marginTop: 5,
  },
});

export default App;
3

الخطوة 3: تعلم Expo

Expo هو مجموعة أدوات تجعل تطوير تطبيقات React Native أسهل وأسرع

الأهمية:

الأساس لفهم كيفية بناء التطبيقات دون الحاجة إلى إعداد بنية Android/iOS

الأدوات:

Expo CLI

مثال إنشاء مشروع Expo:

// إنشاء مشروع Expo جديد
// في الطرفية (Terminal)، قم بتشغيل الأوامر التالية:

// 1. إنشاء مشروع جديد
npx create-expo-app my-react-native-app

// 2. الانتقال إلى مجلد المشروع
cd my-react-native-app

// 3. تشغيل المشروع
npx expo start

// سيفتح Expo DevTools في المتصفح
// يمكنك فحص التطبيق على:
// - Android: Expo Go App على الهاتف
// - iOS: Expo Go App على iPhone
// - ويب: المتصفح
// - محاكي: Android Studio أو Xcode

// 4. تثبيت حزم إضافية
npx expo install react-native-safe-area-context
npx expo install react-native-screens
npx expo install react-native-gesture-handler

// 5. بناء التطبيق للانتاج
// للـ Android:
eas build -p android --profile preview

// للـ iOS:
eas build -p ios --profile preview

// 6. نشر التطبيق على متجر التطبيقات
// أ) تسجيل الدخول إلى Expo
eas login

// ب) تهيئة المشروع للبناء
eas build:configure

// ج) بناء وإرسال إلى المتجر
eas submit -p android --latest
eas submit -p ios --latest

// ملف app.json للتكوين
{
  "expo": {
    "name": "تطبيقي React Native",
    "slug": "my-react-native-app",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
    "userInterfaceStyle": "light",
    "splash": {
      "image": "./assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "com.yourcompany.yourapp"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      },
      "package": "com.yourcompany.yourapp"
    },
    "web": {
      "favicon": "./assets/favicon.png"
    },
    "plugins": [
      "expo-font",
      "expo-asset"
    ]
  }
}
4

الخطوة 4: تعلم React Navigation

React Navigation هي مكتبة لإنشاء التنقل بين الشاشات في تطبيقات React Native

الأهمية:

الأساس لفهم كيفية تنقل المستخدم بين شاشات التطبيق

الأدوات:

React Navigation، Stack Navigator، Tab Navigator

مثال React Navigation:

// App.js مع React Navigation
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Ionicons } from '@expo/vector-icons';

// الشاشات
import HomeScreen from './screens/HomeScreen';
import ProfileScreen from './screens/ProfileScreen';
import SettingsScreen from './screens/SettingsScreen';
import DetailsScreen from './screens/DetailsScreen';

// إنشاء الملاحات
const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();

// تبويب الملاحة الرئيسي
function MainTabNavigator() {
  return (
     ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'الرئيسية') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'الملف الشخصي') {
            iconName = focused ? 'person' : 'person-outline';
          } else if (route.name === 'الإعدادات') {
            iconName = focused ? 'settings' : 'settings-outline';
          }

          return ;
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'gray',
        tabBarStyle: {
          backgroundColor: 'white',
          borderTopWidth: 1,
          borderTopColor: '#f0f0f0',
        },
        headerShown: false,
      })}
    >
      
      
      
    
  );
}

// التطبيق الرئيسي
export default function App() {
  return (
    
      
        
        
      
    
  );
}

// HomeScreen.js
import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function HomeScreen({ navigation }) {
  return (
    
      الشاشة الرئيسية
5

الخطوة 5: تعلم Firebase

Firebase هي منصة شاملة توفر خدمات مثل التخزين السحابي، التوثيق والإشعارات

الأهمية:

الأساس لفهم كيفية إضافة ميزات خلفية إلى التطبيق دون الحاجة إلى بناء خادم مخصص

الأدوات:

Firebase Console

مثال Firebase Authentication:

// 1. تثبيت حزم Firebase
// npm install @react-native-firebase/app
// npm install @react-native-firebase/auth
// npm install @react-native-firebase/firestore
// npm install @react-native-firebase/storage

// 2. تهيئة Firebase في المشروع
// android/app/google-services.json
// ios/GoogleService-Info.plist

// 3. App.js مع Firebase
import React, { useState, useEffect } from 'react';
import { View, Text, TextInput, Button, Alert } from 'react-native';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

export default function LoginScreen() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(false);

  // مراقبة حالة المصادقة
  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(setUser);
    return subscriber; // إلغاء الاشتراك عند التنظيف
  }, []);

  // تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور
  const handleLogin = async () => {
    if (!email || !password) {
      Alert.alert('خطأ', 'يرجى إدخال البريد الإلكتروني وكلمة المرور');
      return;
    }

    setLoading(true);
    try {
      const userCredential = await auth().signInWithEmailAndPassword(email, password);
      console.log('تم تسجيل الدخول بنجاح:', userCredential.user.email);
      
      // جلب بيانات المستخدم من Firestore
      const userDoc = await firestore()
        .collection('users')
        .doc(userCredential.user.uid)
        .get();
      
      if (userDoc.exists) {
        console.log('بيانات المستخدم:', userDoc.data());
      }
    } catch (error) {
      console.error('خطأ في تسجيل الدخول:', error);
      Alert.alert('خطأ', error.message);
    } finally {
      setLoading(false);
    }
  };

  // إنشاء حساب جديد
  const handleSignUp = async () => {
    if (!email || !password) {
      Alert.alert('خطأ', 'يرجى إدخال البريد الإلكتروني وكلمة المرور');
      return;
    }

    setLoading(true);
    try {
      const userCredential = await auth().createUserWithEmailAndPassword(email, password);
      console.log('تم إنشاء الحساب بنجاح:', userCredential.user.uid);
      
      // حفظ بيانات إضافية في Firestore
      await firestore()
        .collection('users')
        .doc(userCredential.user.uid)
        .set({
          email: userCredential.user.email,
          createdAt: firestore.FieldValue.serverTimestamp(),
          displayName: '',
          photoURL: '',
        });
      
      Alert.alert('نجاح', 'تم إنشاء الحساب بنجاح');
    } catch (error) {
      console.error('خطأ في إنشاء الحساب:', error);
      Alert.alert('خطأ', error.message);
    } finally {
      setLoading(false);
    }
  };

  // تسجيل الخروج
  const handleLogout = async () => {
    try {
      await auth().signOut();
      Alert.alert('تم', 'تم تسجيل الخروج بنجاح');
    } catch (error) {
      console.error('خطأ في تسجيل الخروج:', error);
    }
  };

  // إذا كان المستخدم مسجل الدخول
  if (user) {
    return (
      
        
          مرحباً {user.email}!
        
        
          تم تسجيل دخولك بنجاح
6

الخطوة 6: تعلم GraphQL

GraphQL لاستعلامات بيانات فعالة أفضل من REST API

الأهمية:

استعلامات بيانات فعالة أفضل من REST

الأدوات:

Apollo Client، Apollo Server

مثال GraphQL مع Apollo Client:

// 1. تثبيت حزم Apollo
// npm install @apollo/client graphql

// 2. ApolloClient.js
import { ApolloClient, InMemoryCache, createHttpLink } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';

// رابط HTTP
const httpLink = createHttpLink({
  uri: 'https://your-graphql-endpoint.com/graphql',
});

// إعداد السياق للرأس (للتوثيق)
const authLink = setContext((_, { headers }) => {
  // احصل على رمز المصادقة من التخزين المحلي
  const token = localStorage.getItem('token');
  
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : "",
    }
  };
});

// إنشاء عميل Apollo
const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache(),
  defaultOptions: {
    watchQuery: {
      fetchPolicy: 'cache-and-network',
    },
    query: {
      fetchPolicy: 'network-only',
      errorPolicy: 'all',
    },
    mutate: {
      errorPolicy: 'all',
    },
  },
});

export default client;

// 3. App.js مع Apollo Provider
import React from 'react';
import { ApolloProvider } from '@apollo/client';
import { useQuery, useMutation, gql } from '@apollo/client';
import client from './ApolloClient';

// استعلام GraphQL للحصول على المستخدمين
const GET_USERS = gql`
  query GetUsers {
    users {
      id
      name
      email
      posts {
        id
        title
        content
      }
    }
  }
`;

// طفرة GraphQL لإنشاء مستخدم جديد
const CREATE_USER = gql`
  mutation CreateUser($name: String!, $email: String!, $password: String!) {
    createUser(input: { name: $name, email: $email, password: $password }) {
      id
      name
      email
    }
  }
`;

// مكون لجلب المستخدمين
function UsersList() {
  const { loading, error, data, refetch } = useQuery(GET_USERS);

  if (loading) return جاري التحميل...;
  if (error) return حدث خطأ: {error.message};

  return (
    
      
        قائمة المستخدمين

هندسة تطبيقات React Native

مكونات JavaScript

React Components، JSX، Logic

React Native Bridge

نقل البيانات بين JavaScript و Native

Native Modules

Android Views، iOS UIViewControllers

أدوات تطوير React Native

Expo

منصة تطوير متكاملة لـ React Native

سريع سهل متكامل

React Native CLI

أدوات سطر الأوامر للتطوير المتقدم

متقدم مرن مخصص

React Native Debugger

أداة تصحيح متكاملة للتطوير

تصحيح تحليل مراقبة

المزايا والتحديات

المزايا

  • طلب عالي: هناك طلب كبير على مطوري التطبيقات متعددة المنصات خاصة في الشركات الناشئة والشركات الصغيرة
  • أدوات مجانية: معظم الأدوات المستخدمة مثل Expo و Firebase مجانية أو تقدم خطط مجانية
  • تأثير إيجابي: يمكنك المساهمة في تحسين تجربة المستخدم عبر الإنترنت
  • إبداع لا محدود: يمكنك تصميم تطبيقات مبتكرة تعمل على Android و iOS مع كود واحد
  • وقت تطوير أقل: كود واحد لكل المنصات يوفر الوقت والجهد

التحديات

  • منحنى التعلم الحاد: يتطلب فهماً جيداً للغات البرمجة، التصميم وأساسيات React Native
  • تعقيد الأنظمة: قد تواجه تحديات في إدارة التطبيقات الكبيرة أو المعقدة
  • تحديثات متكررة: الأدوات والمعايير تتطور باستمرار، مما يتطلب تحديث المعرفة بشكل منتظم
  • أداء: قد يكون الأداء أقل من التطبيقات الأصلية في بعض الحالات

أنواع مشاريع React Native

تطبيقات التجارة الإلكترونية

متاجر إلكترونية كاملة الميزات

متاجر دفع مخزن

تطبيقات الوسائط

أخبار، مدونات، ومحتوى تفاعلي

أخبار محتوى تفاعل

تطبيقات التواصل

دردشة، اجتماعات، ووسائل تواصل

دردشة اجتماعات تواصل

الخلاصة

React Native يوفر حلاً رائعاً لتطوير تطبيقات تعمل على منصتي Android و iOS باستخدام كود JavaScript واحد. من خلال إتقان JavaScript، React، وأدوات مثل Expo و Firebase، يمكنك بناء تطبيقات احترافية متعددة المنصات.

نصائح للبدء:

  • ابدأ بتعلم JavaScript ES6+ جيداً
  • افهم React جيداً قبل البدء بـ React Native
  • استخدم Expo للمشاريع الصغيرة والمتوسطة
  • تعلم Firebase للخدمات الخلفية السريعة
  • ابنِ مشروع عملي لتعزيز مهاراتك

موارد تعليمية:

React Native Documentation Expo Documentation Firebase Documentation GraphQL Documentation