أساسيات مكتبة React

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

• المكونات components
• JXC
• props
• state

يمكنك الاطلاع على توثيق React، إن أردت التعمق أكثر.

المكون الأول

يستخدم المثال التالي المكون Cat:

• مكون الدالة Function component

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

const Cat = () => {
  return (
    <Text>Hello, I am your cat!</Text>
  );
}

export default Cat;

استخدم أولًا سطر import لاستيراد مكون React و React Native الأساسي Text لتعريف مكونك Cat:

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

يبدأ مكونك كدالة:

const Cat = () => {};

يمكن عد هذه المكونات كمخططات أساسية. يُخرَج ما يعيده مكون الدالة كعنصر React مهما كان ذلك الشيء المعاد، إذ تتيح لك عناصر React وصف ما تريد رؤيته على الشاشة. فيما يلي سيُخرَج المكون Cat كعنصر <Text>:

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

يمكنك تصدير export مكون الدالة الخاص بك باستخدام إعداد تصدير JavaScript الافتراضي export default، لاستخدامه في أي مكان ضمن تطبيقك كما يلي:

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

• مكون الصنف Class component

تميل مكونات الصنف إلى تكون مطوَّلةً أكثر من مكونات الدالة.

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

class Cat extends Component {
  render() {
    return (
      <Text>Hello, I am your cat!</Text>
    );
  }
}

export default Cat;

يمكنك أيضًا استيراد الصنف Component من React كما يلي:

import React, { Component } from 'react';

يبدأ المكون كصنفٍ يرث Component بدلًا من أن يكون كدالة:

class Cat extends Component {}

لمكونات الصنف دالةٌ باسم ()render، ويُخرَج كل ما تعيده هذه الدالة كعنصر React:

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

يمكنك تصدير مكون الصنف كما هو الحال مع مكونات الدالة:

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

export default Cat;

هذه إحدى الطرق العديدة لتصدير المكون الخاص بك، إذ يعمل هذا النوع من التصدير بصورةٍ جيدة مع أداة Snack Player التي تعمل على الإنترنت لتجربة الشيفرة على الفور. لكنك قد تحتاج إلى استخدام طريقة مختلفة بناءً على بنية ملف تطبيقك. يمكنك الاطلاع على طرق الاستيراد والتصدير في لغة JavaScript.

لنلقِ نظرة على عبارة return وهي: <Text>Hello, I am your cat!</Text> التي تُعَد صياغةً بلغة JavaScript وتجعل كتابة العناصر مريحة، وهذه الصياغة هي JSX.

JSX

تستخدم React و React Native صياغة JSX، وهي صياغة تتيح لك كتابة عناصر داخل شيفرة JavaScript مثل: <Text>Hello, I am your cat!</Text> . يمكن استخدام المتغيرات ضمن JSX لأنها شيفرة JavaScript. يصرّح المثال التالي عن اسم القطة name ويضمّنه داخل قوسين معقوصين في الوسم <Text>.

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

const Cat = () => {
  const name = "Maru";
  return (
    <Text>Hello, I am {name}!</Text>
  );
}

export default Cat;

سيُشغَّل أي تعبير بلغة JavaScript موجود بين القوسين المعقوصين بما في ذلك استدعاءات الدوال كالاستدعاء {getFullName("Rum", "Tum", "Tugger")}:

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

const getFullName = (firstName, secondName, thirdName) => {
  return firstName + " " + secondName + " " + thirdName;
}

const Cat = () => {
  return (
    <Text>
      Hello, I am {getFullName("Rum", "Tum", "Tugger")}!
    </Text>
  );
}

export default Cat;

يمكنك عدّ الأقواس المعقوصة كبوابة إلى جافاسكريبت ضمن JSX.

تُضمَّن JSX في مكتبة React، وبالتالي فلن تعمل بصورة صحيحة إن لم تضع الترويسة 'import React from 'react في أعلى الملف.

المكونات المخصصة Custom Components

تحدثنا سابقًا عن مكونات React Native الأساسية، إذ تتيح مكتبة React أن تتداخل هذه المكونات ضمن بعضها البعض لإنشاء مكونات جديدة، وتُعَد هذه المكونات المتداخلة والقابلة لإعادة الاستخدام صميم نموذج React.

يمكن وضع المكونين Text و TextInput داخل المكون View كما في المثال التالي، وتخرج render مكتبة React Native هذه المكونات معًا:

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

const Cat = () => {
  return (
    <View>
      <Text>Hello, I am...</Text>
      <TextInput
        style={{
          height: 40,
          borderColor: 'gray',
          borderWidth: 1
        }}
        defaultValue="Name me!"
      />
    </View>
  );
}

export default Cat;

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

في نظام Android: توضَع العروض views ضمن تخطيط LinearLayout أو FrameLayout أو RelativeLayout وما إلى ذلك من أجل تحديد طريقة ترتيب أبناء العرض view على الشاشة. يستخدم المكون View في React Native التخطيط باستخدام Flexbox من أجل ترتيب المكونات الأبناء. أما في في الويب: إن كنت على دراية بتطوير الويب، فقد يذكّرك المكوّنان <View> و <Text> بلغة HTML. يمكنك عدّ هذين المكوّنين وسومًا لتطوير التطبيقات مثل الوسمين <div> و <p> .

يمكن إخراج المكون المخصَّص عدة مرات وبأماكن متعددة دون الحاجة إلى تكرار الشيفرة باستخدام <Cat> فقط:

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

const Cat = () => {
  return (
    <View>
      <Text>I am also a cat!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Text>Welcome!</Text>
      <Cat />
      <Cat />
      <Cat />
    </View>
  );
}

export default Cafe;

يُدعَى أي مكوّنٍ يخرج renders مكونًا آخر بالمكوّن الأب parent component، فالمكوّن Cafe هو المكون الأب في مثالنا وكل مكون Cat هو مكون ابن child component. يمكنك وضع العدد الذي تريده من المكونات Cat ضمن المكون Cafe، ويخرج كل مكون <Cat> عنصرًا مختلفًا عن غيره، إذ يمكنك تخصيص هذا العنصر باستخدام props.

الخاصيات Props

Props هي اختصار للكلمة "properties" أي خصائص، وعملها مساعدتك على تخصيص مكوّنات React. تمرر كل <Cat> في المثال التالي اسمًا مختلفًا name للمكون Cat من أجل إخراجه:

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

const Cat = (props) => {
  return (
    <View>
      <Text>Hello, I am {props.name}!</Text>
    </View>
  );
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Maru" />
      <Cat name="Jellylorum" />
      <Cat name="Spot" />
    </View>
  );
}

export default Cafe;

يمكن تخصيص معظم مكونات React Native الأساسية باستخدام الخاصيات props أيضًا، كأن تمرر خاصيةً prop تدعى source عند استخدام المكون Image لتحديد الصورة المعروضة على سبيل المثال:

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

const CatApp = () => {
  return (
    <View>
      <Image
        source={{uri: "https://reactnative.dev/docs/assets/p_cat1.png"}}
        style={{width: 200, height: 200}}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
}

export default CatApp;

للمكون Image خصائص متعددة مختلفة بما في ذلك style التي يمكن أن تحتوي على كائن تصميم في لغة جافاسكريبت وأزواج قيمة-خاصية (property-value) متعلقة بالتخطيط.

لاحظ وجود الأقواس المعقوصة المضاعفة {{ }} التي تحيط بخاصيات طول وعرض الخاصية style. يُشار إلى قيم JavaScript بقوسين معقوصين {} فقط ضمن JSX، وهذا مفيد عند تمرير شيءٍ آخر غير السلاسل string على أنه خصائص props، كتمرير مصفوفة array أو عدد:

<Cat food={["fish", "kibble"]} age={2} />

يُشار أيضًا إلى الكائنات المكتوبة بلغة جافاسكريبت باستخدام قوسين معقوصين: {width: 200, height: 200}، لذلك يجب تغليف كائن جافاسكريبت بقوسين معقوصين آخرين عند تمريره في JSX كما يلي: {{width: 200, height: 200}}.

يمكنك بناء أشياء متعددة باستخدام الخاصيات props والمكونات الأساسية Text و Image و View، ولكنك ستحتاج الحالة state لبناء شيء تفاعلي.

الحالة State

يمكنك عدّ الخاصيات props كوسطاء تستخدمها لضبط كيفية إخراج المكونات، ولكن الحالة state شبيهة بتخزين بيانات المكون الشخصية، وتُعَد مفيدة لمعالجة البيانات التي تتغير بمرور الوقت أو التي تنشأ من تفاعل المستخدم، أي أن الحالة تعطي ذاكرةً لمكوناتك.

يمكن بالحالة العامة استخدام الخاصيات props لضبط مكون عند إخراجه، واستخدام الحالة لتتبّع بيانات مكون تتوقّع تغيّرها بمرور الوقت.

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

مكون الدالة Function Component

يمكن إضافة حالة لمكونٍ ما من خلال استدعاء خطّاف React يُسمَّى useState. الخطاف Hook هو نوعٌ من الدوال التي تسمح بالربط بميزات مكتبة React مثل الخطاف useState الذي يتيح لك إضافة حالة إلى مكونات الدالة:

import React, { useState } from "react";
import { Button, Text, View } from "react-native";

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
}

export default Cafe;

يجب أولًا استيراد خطاف الحالة useState من مكتبة React كما يلي:

import React, { useState } from 'react';

ثم يجب التصريح عن حالة المكون من خلال استدعاء useState داخل دالة المكون. ينشئ الخطاف useState متغير الحالة isHungry:

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

يمكنك استخدام خطاف الحالة useState لتتبّع أي نوع بيانات كالسلاسل والأعداد والقيم البوليانية والمصفوفات والكائنات، إذ تستطيع تتبّع عدد مرات مداعبة القطة مثلًا من خلال استخدام العبارة: const [timesPetted, setTimesPetted] = useState(0).

يؤدي استدعاء الخطاف useState إلى شيئين اثنين هما:

• إنشاء متغير حالة مع قيمة ابتدائية، فمتغير الحالة في مثالنا هو isHungry وقيمته الابتدائية هي true.
• إنشاء دالة لضبط قيمة متغير الحالة، وهذه الدالة في مثالنا هي setIsHungry.

يمكنك استخدام الأسماء التي تريدها لمتغير الحالة وقيمته الابتدائية والدالة، لكن يُعَد استخدام النمط: ‎‏‎[<getter>, <setter>] = ‎useState(<initialValue>) أسهل.

ثم تضيف المكون الأساسي Button وأعطه خاصية onPress:

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

إن ضغط أحدٌ ما الزر، فستُشغَّل الخاصية onPress التي تستدعي الدالة setIsHungry(false)، وهذا يضبط قيمة متغير الحالة isHungry إلى القيمة false. تُضبَط الخاصية disabled المتعلقة بالمكون Button إلى القيمة true وتتغير الخاصية title أيضًا، عندما تصبح قيمة متغير الحالة isHungry:

<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

لاحظ أن متغير الحالة isHungry ثابت const، لكنه يبدو غير قابل لإعادة الإسناد. سيُعاد إخراج مكون دالة ضبط الحالة كالدالة setIsHungry عند استدعائها، وبالتالي ستُشغَّل دالة المكون Cat مرة أخرى وسيعطي useState متغير الحالة isHungry القيمة التالية.

أخيرًا، ضع القطط ضمن مكون المقهى Cafe كما يلي:

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

مكون الصنف Class Component

يختلف نهج مكونات الصنف القديمة قليلًا عندما يتعلق الأمر بالحالة:

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

class Cat extends Component {
  state = { isHungry: true };

  render() {
    return (
      <View>
        <Text>
          I am {this.props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>
        <Button
          onPress={() => {
            this.setState({ isHungry: false });
          }}
          disabled={!this.state.isHungry}
          title={
            this.state.isHungry ? "Pour me some milk, please!" : "Thank you!"
          }
        />
      </View>
    );
  }
}

class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}

export default Cafe;

يجب استيراد الصنف Component من مكتبة React كما هو الحال دائمًا مع مكونات الصنف:

import React, { Component } from 'react';

وتُخزَّن الحالة ضمن كائن حالة في مكونات الصنف:

export class Cat extends Component {
  state = { isHungry: true };
  //..
}

يمكن الوصول إلى الخاصيات props باستخدام العبارة this.props ، وكذلك يمكن الوصول إلى كائن الحالة ضمن المكون باستخدام العبارة this.state:

<Text>
  I am {this.props.name}, and I am
  {this.state.isHungry ? ' hungry' : ' full'}!
</Text>

وتُضبَط القيم الفردية في كائن الحالة من خلال تمرير كائن الزوج المفتاح-القيمة للحالة وتمرير قيمته الجديدة للدالة ()this.setState:

<Button
  onPress={() => {
    this.setState({ isHungry: false });
  }}
  // ..
/>

لا تغيِّر حالة المكون الخاص بك مباشرةً من خلال إسناد قيمة جديدة إليها باستخدام العبارة this.state.hunger = false. يسمح استدعاء الدالة ()this.setState لمكتبة React بتتبّع التغيرات التي أجريت على الحالة التي تنبّه إعادة الإخراج rerendering. يمكن أن يؤدي إعداد الحالة مباشرةً إلى تعطيل تفاعل تطبيقك.

تُضبَط قيمة الخاصية disabled الخاصة بالمكون Button وتتغير قيمة الخاصية title أيضًا، عندما تكون this.state.isHungry قيمتها false:

<Button
  // ..
  disabled={!this.state.isHungry}
  title={
    this.state.isHungry
      ? 'Pour me some milk, please!'
      : 'Thank you!'
  }
/>

أخيرًا، ضع القطط ضمن مكون المقهى Cafe كما يلي:

class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}

export default Cafe;

تُدعَى الرموز <> و </> بالأجزاء fragments. يجب أن تُغلَّف عناصر JSX المتجاورة بوسم يحيط بها، إذ تتيح لك هذه الأجزاء فعل ذلك دون تداخل عنصر تغليف إضافي غير ضروري مثل View.

تعرّفنا على مكونات React و React Native الأساسية، فلنتعمّق أكثر في هذه المكونات من خلال التعامل مع المدخلات النّصيّة <TextInput>.

مصادر

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