ReactNative/intro react

أساسيات 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;

مكون الصنف 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() function، ويُخرَج كل ما تعيده هذه الدالة كعنصر 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 كما في المثال التالي، وتخرجها مكتبة 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;

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

Props

كلمة Props هي اختصار للكلمة "properties" أي خصائص.