مدخل إلى React Native

مرحبًا بك في بداية رحلتنا إلى إطار عمل React Native. إن أردت الاطّلاع على تعليمات إعداد البيئة، فقد انتقلت إلى قسمها الخاص. ستجد في هذه الصفحة مدخلًا إلى التوثيق والمكونات الأصيلة ومكتبة React وغير ذلك.

كُتِب هذا التوثيق لجميع الأشخاص الذين يريدون تعلّم React Native بغض النظر عن مستوى خبرتهم أو خلفيتهم ابتداءً من من مطوري تطبيقات iOS الخبراء إلى متعلّمي React المبتدئين، والأشخاص الذين يتعلّمون البرمجة لأول مرة في حياتهم المهنية.

كيفية استخدام هذا التوثيق

يمكنك البدء من هذه الصفحة وقراءة هذا التوثيق تسلسليًا كأنك تقرأ كتابًا، أو يمكنك قراءة الأقسام المحدَّدة التي تحتاجها فقط. إن كنت على دراية بمكتبة React، فيمكنك تخطي قسم أساسيات مكتبة React، أو قراءته لتجديد معلوماتك.

المتطلبات الأساسية

ستحتاج إلى فهم أساسيات لغة JavaScript للعمل مع React Native. إن كنت جديدًا على لغة جافا سكريبت أو بحاجة إلى تجديد معلوماتك، فيمكنك الغوص في توثيق لغة JavaScript على موسوعة حسوب.

افترضنا عدم وجود معرفة مسبقة بتطوير تطبيقات React أو Android أو iOS لدى قارئ هذا التوثيق، ولكنها مواضيع قيّمة ليدرسها مطوّر React Native الطموح، لذلك ربطنا القارئ بالموارد والمقالات اللازمة ليتعمّق في هذه المواضيع أكثر.

أمثلة تفاعلية

يتيح لك هذا المدخل البدء على الفور ضمن متصفحك بأمثلة تفاعلية كهذا المثال (تجربة حية):

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

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

يمكنك استخدام الأداة Snack Player التي هي أداة مفيدة أنشأها Expo لتضمين وتشغيل مشاريع React Native ومشاركة كيفية تصييرها render على منصات مختلفة مثل Android و iOS.

إن أردت إعداد بيئة تطوير محلية، فيمكنك اتباع دليلنا لإعداد بيئتك على جهازك المحلي ولصق أمثلة الشيفرة في ملف App.js الخاص بك (إذا كنت مطور ويب، فقد يكون لديك بالفعل بيئة محلية معدَّة لاختبار متصفح الهاتف المحمول).

مكونات الدالة Function Components ومكونات الصنف Class Components

يمكنك إنشاء مكوّنات باستخدام دوال أو أصناف في React. كانت مكونات الصنف سابقًا هي المكونات الوحيدة التي يمكن أن يكون لها حالة، ولكن أصبح بإمكانك إضافة حالة وغير ذلك إلى مكونات الدالة منذ بداية ظهور واجهات API الخاصة بخطّافات React.

ظهرت الخطافات Hooks في الإصدار React Native 0.59، وبما أن الخطافات هي الطريقة المستقبلية لكتابة مكونات React الخاصة بك، فقد استخدمنا أمثلة لمكونات الدالة بالإضافة إلى مكونات الصنف كما يلي:

مكون الدالة

تجربة حية للمثال:

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

const HelloWorldApp = () => {
  return (
    <View style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
      }}>
      <Text>Hello, world!</Text>
    </View>
  );
}

export default HelloWorldApp;

مكون الصنف

تجربة حية للمثال:

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

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

export default HelloWorldApp;

يمكنك الاطلاع على مزيد من أمثلة مكونات الصنف في الإصدارات السابقة من هذا التوثيق باللغة الإنجليزية.

ملاحظات المطور

يأتي الأشخاص الذين يريدون تعلّم React Native من خلفيات متنوعة، فقد تكون لديك خبرة في مجموعة من التقنيات، من الويب إلى تطبيقات Android و iOS وغير ذلك، لذلك حاولنا كتابة هذا التوثيق للمطورين من جميع تلك الخلفيات. سنقدّم أحيانًا تفسيرات خاصة بإحدى المنصات أو غيرها كما يلي:

في Android

قد يكون مطورو Android على دراية بهذا المفهوم.

في iOS

قد يكون مطورو iOS على دراية بهذا المفهوم.

في الويب

قد يكون مطورو الويب على دراية بهذا المفهوم.

حان الوقت للتعرف على أساس إطار عمل React Native وهو المكونات الأصيلة Native Components، بعد أن عرفت كيفية عمل هذا الدليل.

مصادر

صفحة Introduction في توثيق React Native الرسمي.