Monthly Subscription Starting at AED 99 + VAT

React Native
  • Level Professional
  • المدة 38 ساعات hours
  • الطبع بواسطة Meta
  • Offered by

عن

React Native is an open-source framework for building cross-platform applications (apps) using React and the platform’s native capabilities. In this course, you will move from the basics of React to a more advanced implementation using React Native. You’ll review a wide range of different React components and ways of styling them. And you’ll get to practice using different mobile methods of interactivity with React Native. Some of the basics skills you will learn include: • Building a single-page React Native app and styling it using basic components • Building large lists and configuring user inputs within a React Native app • Using the Pressable component to build buttons and other clickable areas • Setting up an app with React Navigation and moving between screens You’ll gain experience with the following tools and software: • React • React Native • Front End development languages (HTML, CSS and JavaScript) • JSX • Code editing programs, such as Expo and Visual Studio Code This course is for learners who would like to prepare themselves for a career in mobile development. To succeed in this course, you will need foundational knowledge of React basics, internet navigation skills and an eagerness to code.

الوحدات

مقدمة الدورة التدريبية

    • 6 Videos
    • 3 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • التعارف وإلقاء التحية

6 Videos

  • مقدمة إلى الدورة التدريبية
  • ما هو React Native؟
  • وظائف تطوير التطبيقات الأصلية والمتوافقة مع منصات مختلطة والهجينة
  • تعرف على مطور تطبيقات متوافقة مع منصات مختلفة
  • نظرة عامة على بيئة تطوير React Native
  • React Native مع Expo

3 Readings

  • المنهج الدراسي للدورة التدريبية
  • كيف تكون ناجحًا في هذه الدورة التدريبية
  • موارد إضافية

مقدمة إلى React Native

    • 3 Videos
    • 3 Readings
    • 1 Assignment
Show info about module content

1 Assignment

  • التحقق من المعرفة: مقدمة إلى React Native

3 Videos

  • كيف يتم استخدام React Native بشكل عملي؟
  • كود React Native
  • ما هو Expo؟

3 Readings

  • مزايا React Native
  • إنشاء تطبيقات React Native باستخدام Expo
  • موارد إضافية

مكونات React Native

    • 2 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: أول مكون React Native
  • التحقق من المعرفة: مكونات React Native

2 Videos

  • ما هي مكونات React Native؟
  • إنشاء المكونات

4 Readings

  • استكشاف إنشاء المكونات
  • تمرين: أول مكون React Native
  • الحل: أول مكون React Native
  • موارد إضافية

المكونات View وText وScrollable

    • 4 Videos
    • 7 Readings
    • 3 Assignment
Show info about module content

3 Assignment

  • المراجعة الذاتية: إنشاء شاشة React Native
  • المراجعة الذاتية: إنشاء مكون قابل للتمرير
  • التحقق من المعرفة: المكونات View وText وScrollable

4 Videos

  • ما هما المكونان View وText؟
  • استخدام المكونين View وText
  • ما هو المكون ScrollView؟
  • استخدام مكون ScrollView

7 Readings

  • التعرف على المكونين View وText
  • تمرين: إنشاء شاشة React Native
  • الحل: إنشاء شاشة React Native
  • التعرف على المكون ScrollView
  • تمرين: إنشاء مكون قابل للتمرير
  • الحل: إنشاء مكون قابل للتمرير
  • موارد إضافية

تصميم المكونات

    • 3 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: تصميم مكون
  • اختبار الوحدة: مقدمة إلى React Native

3 Videos

  • تصميم المكونات باستخدام StyleSheet
  • التصميم العملي
  • ملخص الوحدة: مقدمة إلى React Native

4 Readings

  • التصميم باستخدام StyleSheet
  • تمرين: تصميم مكون
  • الحل: تصميم مكون
  • موارد إضافية

عرض القوائم الكبيرة باستخدام FlatList.

    • 3 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية - عرض قائمة كبيرة باستخدام FlatList
  • التحقق من المعرفة: عرض القوائم الكبيرة باستخدام FlatList

3 Videos

  • عرض القوائم الكبيرة باستخدام المكون FlatList
  • استخدام المكون FlatList
  • الطريقة FlatList

4 Readings

  • التعرف على المكون FlatList
  • تمرين: عرض قائمة كبيرة باستخدام FlatList
  • الحل: عرض قائمة كبيرة باستخدام FlatList
  • موارد إضافية

عرض القوائم الكبيرة باستخدام SectionList

    • 2 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: عرض قائمة كبيرة باستخدام SectionList
  • التحقق من المعرفة: عرض القوائم الكبيرة باستخدام SectionList

2 Videos

  • عرض القوائم الكبيرة حسب القسم باستخدام SectionList
  • استخدام المكون SectionList

4 Readings

  • التعرف على المكون SectionList
  • تمرين: عرض قائمة كبيرة باستخدام SectionList
  • الحل: عرض قائمة كبيرة باستخدام SectionList
  • موارد إضافية

قبول إدخال المستخدم

    • 4 Videos
    • 5 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: إنشاء مكون TextInput
  • التحقق من المعرفة: قبول مدخلات المستخدم

4 Videos

  • ما هو المكون TextInput؟
  • تكوين المكون TextInput
  • لوحة المفاتيح الافتراضية في تطبيقات المحمول
  • التعامل مع لوحة المفاتيح الافتراضية

5 Readings

  • المكون TextInput وميزاته
  • تمرين: إنشاء مكون TextInput
  • الحل: إنشاء مكون TextInput
  • نصائح وحيل للتعامل مع لوحة المفاتيح الافتراضية
  • موارد إضافية

العمل مع المكون TextInput

    • 3 Videos
    • 5 Readings
    • 3 Assignment
Show info about module content

3 Assignment

  • المراجعة الذاتية: إنشاء صفحة لتسجيل الدخول
  • التحقق من المعرفة: الخصائص والطُرُق في TextInput
  • اختبار الوحدة: القوائم وإدخال النص في React Native

3 Videos

  • تمرير الخصائص إلى المكون TextInput
  • استخدام طرق TextInput
  • استخدام طرق TextInput

5 Readings

  • الخصائص الشائعة للمكون TextInput
  • تمرين: إنشاء صفحة لتسجيل الدخول
  • الحل: إنشاء صفحة لتسجيل الدخول
  • طرق TextInput
  • موارد إضافية

المكون Pressable

    • 2 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: قم بإنشاء منطقة نص قابلة للنقر باستخدام المكون Pressable
  • التحقق من المعرفة: المكون Pressable

2 Videos

  • ما هو المكون Pressable؟
  • استخدام المكون Pressable

4 Readings

  • استكشاف المكون Pressable
  • تمرين: قم بإنشاء منطقة نص قابلة للنقر باستخدام المكون Pressable
  • الحل: قم بإنشاء منطقة نص قابلة للنقر باستخدام المكون Pressable
  • موارد إضافية

الصور في React Native

    • 5 Videos
    • 5 Readings
    • 1 Discussion
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: عرض الصور في تطبيقك
  • التحقق من المعرفة: الصور في React Native

1 Discussions

  • مشاركة تطبيقك مع الصور

5 Videos

  • عرض الصور في React Native
  • استخدام المكون Image
  • تصميم صورة في التطبيق
  • تمرير الخصائص إلى المكون Image
  • إعداد صور الخلفية

5 Readings

  • استكشاف المكون Image
  • استكشاف خصائص المكون Image
  • تمرين: عرض الصور في تطبيقك
  • الحل: عرض الصور في تطبيقك
  • موارد إضافية

الخطافات في React Native

    • 5 Videos
    • 6 Readings
    • 3 Assignment
Show info about module content

3 Assignment

  • المراجعة الذاتية: الخطافات في React Native
  • التحقق من المعرفة: الخطافات في React Native
  • اختبار الوحدة: المكونات Pressable وImage وHook في React Native

5 Videos

  • ما هي الخطافات؟
  • استخدام الخطاف useColorScheme
  • استخدام الخطاف useWindowDimensions
  • استخدام خطافات المجتمع الأخرى
  • ملخص الوحدة: المكونات Pressable وImage وHook في React Native

6 Readings

  • استكشاف الخطاف useColorScheme
  • استكشاف الخطاف useWindowDimensions
  • استكشاف خطافات المجتمع الأخرى
  • تمرين: الخطافات في React Native
  • الحل: الخطافات في React Native
  • موارد إضافية

مقدمة إلى React Navigation

    • 4 Videos
    • 6 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: إعداد المسارات
  • التحقق من المعرفة: مقدمة إلى React Navigation

4 Videos

  • ما هي React Navigation؟
  • إعداد React Navigation
  • استخدام Stack.Navigator
  • طرق تمرير الخصائص إلى الشاشة

6 Readings

  • تثبيت وإعداد React Navigation
  • إنشاء وتكوين Native Stack Navigator
  • تمرير الخصائص إلى الشاشة
  • تمرين: إعداد المسارات
  • الحل: إعداد المسارات
  • موارد إضافية

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

    • 4 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: التنقل بين الشاشات
  • التحقق من المعرفة: التنقل بين الشاشات

4 Videos

  • الانتقال إلى شاشة جديدة
  • التنقل بين الشاشات
  • العودة إلى الشاشة السابقة
  • تكوين شريط العنوان

4 Readings

  • الانتقال إلى شاشة
  • تمرين: التنقل بين الشاشات
  • الحل: التنقل بين الشاشات
  • موارد إضافية

التنقل بين علامات التبويب

    • 3 Videos
    • 4 Readings
    • 2 Assignment
Show info about module content

2 Assignment

  • المراجعة الذاتية: تكوين التنقل بين علامات التبويب
  • التحقق من المعرفة: التنقل بين علامات التبويب

3 Videos

  • ما هو التنقل بين علامات التبويب؟
  • مثال على التنقل بين علامات التبويب
  • تخصيص مكون التنقل بين علامات التبويب

4 Readings

  • استكشاف التنقل بين علامات التبويب
  • تمرين: تكوين التنقل بين علامات التبويب
  • الحل: تكوين التنقل بين علامات التبويب
  • موارد إضافية

التنقل في درج التنقل

    • 3 Videos
    • 4 Readings
    • 3 Assignment
Show info about module content

3 Assignment

  • المراجعة الذاتية: تكوين التنقل في درج التنقل
  • التحقق من المعرفة: التنقل في درج التنقل
  • اختبار الوحدة: React Navigation

3 Videos

  • ما هو Drawer Navigation؟
  • مثال على Drawer Navigation
  • ملخص الوحدة: React Navigation

4 Readings

  • استكشاف التنقل في درج التنقل
  • تمرين: تكوين التنقل في درج التنقل
  • الحل: تكوين التنقل في درج التنقل
  • موارد إضافية

تقييم المشروع النهائي

    • 2 Videos
    • 3 Readings
    • 1 PeerReview
    • 1 Assignment
Show info about module content

1 Assignment

  • الاختبار النهائي للدورة التدريبية: React Native

1 Peer Review

  • مراجعة الأقران: الاشتراك في النشرة الإخبارية لموقع Little Lemon

2 Videos

  • ملخص الدورة التدريبية: React Native
  • شرح الحل: الاشتراك في النشرة الإخبارية لموقع Little Lemon

3 Readings

  • نبذة عن تقييم المشروع النهائي
  • تمرين: الاشتراك في النشرة الإخبارية لموقع Little Lemon
  • كود الحل: الاشتراك في النشرة الإخبارية لموقع Little Lemon

اختتام الدورة التدريبية

    • 1 Videos
    • 1 Readings
    • 1 Discussion
Show info about module content

1 Discussions

  • ما التحديات التي واجهتها عند إنشاء تطبيقك؟

1 Videos

  • تهانينا، لقد أكملت الدورة التدريبية حول React Native!

1 Readings

  • الخطوات التالية

Auto Summary

Explore the world of mobile app development with the React Native course, designed for IT & Computer Science enthusiasts. Led by expert instructors, this comprehensive course takes you from the basics of React to advanced concepts using React Native. You'll learn to create and design single-page applications, handle user inputs, and navigate between screens using tools like Expo and Visual Studio Code. Perfect for aspiring mobile app developers with a passion for programming, this professional-level course spans 2280 minutes and offers both Starter and Professional subscription options.

Taught by Meta Staff
Instructor

Taught by Meta Staff