ReactNative/tutorial

React Native يشبه React، لكنه يستخدم مكونات أصيلة بدلاً من مكونات الويب كعناصر أساسية. لفهم البنية الأساسية لتطبيق React Native، يجب أن تفهم أولًا بعضًا من مفاهيم React الأساسية، مثل JSX والمكوّنات والحالة ‎state‎ والخاصيات ‎props‎. إذا كانت لديك خبرة سابقة مع React، فلا تزال بحاجة إلى معرفة بعض الأمور الخاصة بإطار React Native، كالمكونات الأصيلة (native components) مثلًا. هذا الدليل التطبيقي موجّه إلى جميع الفئات، سواء كانت لديك تجربة مع React أو لا.

مرحبا بالعالم

باتباع تقاليد من سبق، سنبدأ أولا ببناء تطبيقٍ الغرض الوحيد منه هو عرض جملة "مرحبًا بالعالم". إليك الشيفرة:

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

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View>
        <Text>Hello world!</Text>
      </View>
    );
  }
}

يمكنك تعديل عينة الشيفرة البرمجية مباشرة في محاكي الويب. يمكنك أيضًا لصقها في ملف ‎App.js‎ لإنشاء تطبيق حقيقي على جهازك المحلي (اتبع الإرشادات في هذه الصفحة).

شرح الشيفرة

قد تبدو بعض الأجزاء في الشيفرة أعلاه مختلفة عن لغة JavaScript التي اعتدت عليها، لا تقلق، هذه شيفرة JavaScript بنسختها ES2015 (التي تعرف كذلك بالرمز ES6)، وهي نسخة جديدة من JavaScript تُضيف مجموعة من التحسينات التي أصبحت الآن جزءًا من معيار JavaScript الرسمي، لكنّها غير مدعومة على جميع المتصفّحات، لذا عادةً ما لا تُستخدَم في تطوير الويب. React Native يدعم ES2015 افتراضيًّا، لذا يُمكنك استخدام الميّزات الجديدة من JavaScript دون القلق بشأن التوافق. الجملُ ‎from‎، ‎import‎ ، ‎class‎ و‎extends‎ في المثال أعلاه كلها ميزات ES2015. إذا كنت تجهل ميّزات النسخة الجديدة من JavaScript، فربّما يُمكنك تعلّمها فقط من خلال قراءة شيفراتٍ برمجيّةٍ مثل الشيفرة البرمجية أعلاه. أو انظر هذه السلسلة من الدروس، إضافة إلى أنّ توثيق JavaScript في الموسوعة يُغطّي ميّزات ES6 كذلك (استعن بمربّع البحث للوصول إلى صفحات معيّنة).

أما الشيء الآخر غير المعتاد في الشيفرة أعلاه فهو الجزء ‎<View><Text>Hello world!</Text></View>‎. هذه شيفرة JSX وهي بنيةٌ برمجيّةٌ (syntax) لتضمين XML داخل شيفرة JavaScript. تَستخدم العديد من أطر العمل لغة قوالب (templating language) خاصة تسمح لك بتضمين شيفرة برمجيّة داخل لغة هيكلة (markup language). وعكس ذلك يحدث في شيفرة React. إذ تتيح لك JSX كتابة لغة هيكلة داخل شيفرة برمجيّة. الشيفرة مشابهة للغة HTML على الويب، باستثناء أنّ عناصر الويب مثل ‎<div>‎ أو ‎<span>‎ تُستبدَل بمكونات React. في هذه الحالة، ‎<Text>‎ مكونٌ مُضمَّنٌ (built-in component) يُستخدَم لعرض مقطعٍ نصيٍّ، أمّا ‎View‎ فهو مكوّن يقوم مقام ‎<div>‎ أو ‎<span>‎.

المكوّنات

تُعرِّف الشيفرة أعلاه مكوّنًا جديدًا باسم ‎HelloWorldApp‎. ستُنشئُ العديد من المكونات الجديدة أثناء تطويرك للتطبيقات بإطار React Native. كلّ ما تراه على الشاشةِ مكوّنٌ من المكونات (مثل الأزرار، ومربعات الإدخال، والصور، والصناديق والتبويبات وغيرها). يمكن للمكون أن يكون بسيطًا جدًّا، المتطلّب الوحيد هو دالّةُ التصيير ‎render‎ التي تُعيد شيفرة JSX لعرضها.

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

التطبيق الذي أنشأناه أعلاه لا يؤدي أي وظيفة تُذكَر سوى عرض نص عاديّ، اطّلع على صفحة الخاصّيّات لجعل المكوّنات أنفع.

مصادر

• صفحة Learn the Basics في توثيق React Native الرسمي.