عرض مصدر ReactNative/intro react

<noinclude>{{DISPLAYTITLE:أساسيات مكتبة React اللازمة لتعلم React Native}}</noinclude>
يُشغَّل إطار عمل [[ReactNative|React Native]] على مكتبة [[React]]، وهي مكتبة شائعة ومفتوحة المصدر تُستخدَم لبناء واجهات المستخدم باستخدام لغة [[JavaScript]]. يجب فهم [[React]] فهمًا جيدًا لتحقيق أقصى استفادة من React Native. تساعدك هذه الصفحة للبدء أو لاستذكار المفاهيم الأساسية من [[React]] والتي هي:

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

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

== المكون الأول ==
يستخدم المثال التالي المكون <code>Cat</code>:

=== مكون الدالة Function component ===
إليك المثال التالي ([https://snack.expo.dev/@hsoubwiki/your-cat-function-component تجربة حية]):<syntaxhighlight lang="javascript">
import React from 'react';
import { Text } from 'react-native';

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

export default Cat;
</syntaxhighlight>استخدم أولًا سطر <code>import</code> لاستيراد مكون React و React Native الأساسي <code>Text</code> لتعريف مكونك <code>Cat</code>:<syntaxhighlight lang="javascript">
import React from 'react';
import { Text } from 'react-native';
</syntaxhighlight>يبدأ مكونك كدالة:<syntaxhighlight lang="javascript">
const Cat = () => {};
</syntaxhighlight>يمكن عد هذه المكونات كمخططات أساسية. يُخرَج ما يعيده مكون الدالة كعنصر React مهما كان ذلك الشيء المعاد، إذ تتيح لك عناصر React وصف ما تريد رؤيته على الشاشة.

فيما يلي سيُخرَج المكون <code>Cat</code> كعنصر <code><Text></code>:<syntaxhighlight lang="javascript">
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};
</syntaxhighlight>يمكنك تصدير export مكون الدالة الخاص بك باستخدام إعداد تصدير JavaScript الافتراضي <code>[[JavaScript/export|export default]]</code>، لاستخدامه في أي مكان ضمن تطبيقك كما يلي:<syntaxhighlight lang="javascript">
const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;
</syntaxhighlight>

=== مكون الصنف Class component ===
تميل مكونات الصنف إلى تكون مطوَّلةً أكثر من مكونات الدالة، انظر المثال التالي المماثل تمامًا للمثال السابق ولكن باستعمال مكون صنف ([https://snack.expo.dev/@hsoubwiki/your-cat-class-component تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يمكنك أيضًا استيراد الصنف <code>Component</code> من React كما يلي:<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
</syntaxhighlight>يبدأ المكون كصنفٍ يرث <code>Component</code> بدلًا من أن يكون كدالة:<syntaxhighlight lang="javascript">
class Cat extends Component {}
</syntaxhighlight>لمكونات الصنف دالةٌ باسم <code>()render</code>، ويُخرَج كل ما تعيده هذه الدالة كعنصر React:<syntaxhighlight lang="javascript">
class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}
</syntaxhighlight>يمكنك تصدير مكون الصنف كما هو الحال مع مكونات الدالة:<syntaxhighlight lang="javascript">
class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

export default Cat;
</syntaxhighlight><blockquote>هذه إحدى الطرق العديدة لتصدير المكون الخاص بك، إذ يعمل هذا النوع من التصدير بصورةٍ جيدة مع أداة [https://snack.expo.dev/@hsoubwiki/your-cat-class-component Snack Player] التي تعمل على الإنترنت لتجربة الشيفرة على الفور والتي نضع لك رابط لكل شيفرة لتجربتها مباشرة في كل هذا التوثيق. لكنك قد تحتاج إلى استخدام طريقة مختلفة بناءً على بنية ملف تطبيقك. يمكنك الاطلاع على [https://academy.hsoub.com/programming/javascript/%D8%AA%D8%B5%D8%AF%D9%8A%D8%B1-%D8%A7%D9%84%D9%88%D8%AD%D8%AF%D8%A7%D8%AA-%D9%88%D8%A7%D8%B3%D8%AA%D9%8A%D8%B1%D8%A7%D8%AF%D9%87%D8%A7-%D9%81%D9%8A-%D8%AC%D8%A7%D9%81%D8%A7%D8%B3%D9%83%D8%B1%D8%A8%D8%AA-r927/ طرق الاستيراد والتصدير في لغة JavaScript].</blockquote>لنلقِ نظرة على عبارة <code>return</code> وهي: <code><Text>Hello, I am your cat!</Text></code> التي تُعَد صياغةً بلغة [[JavaScript]] وتجعل كتابة العناصر مريحة، وهذه الصياغة هي JSX.

== JSX ==

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

إليك المثال ([https://snack.expo.dev/@hsoubwiki/curly-braces تجربة حية]):<syntaxhighlight lang="javascript">
import React from 'react';
import { Text } from 'react-native';

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

export default Cat;
</syntaxhighlight>سيُشغَّل أي تعبير بلغة JavaScript  موجود بين القوسين المعقوصين بما في ذلك استدعاءات الدوال كالاستدعاء <code>{getFullName("Rum", "Tum", "Tugger")}</code>.

إليك المثال ([https://snack.expo.dev/@hsoubwiki/curly-braces-2 تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يمكنك عدّ الأقواس المعقوصة كبوابة إلى جافاسكريبت ضمن JSX.<blockquote>تُضمَّن JSX في مكتبة React، وبالتالي فلن تعمل بصورة صحيحة إن لم تضع الترويسة <code>'import React from 'react</code> في أعلى الملف.</blockquote>

== المكونات المخصصة Custom Components ==
تحدثنا سابقًا عن [[ReactNative/intro react native components|مكونات React Native الأساسية]]، إذ تتيح مكتبة React أن تتداخل هذه المكونات ضمن بعضها البعض لإنشاء مكونات جديدة، وتُعَد هذه المكونات المتداخلة والقابلة لإعادة الاستخدام صميم نموذج React.

يمكن وضع المكونين  <code>Text</code> و <code>TextInput</code> داخل المكون <code>View</code> كما في المثال التالي، وتخرج render مكتبة React Native هذه المكونات معًا ([https://snack.expo.dev/@hsoubwiki/custom-components تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>

=== ملاحظات المطور ===
<blockquote>'''في نظام Android''': توضَع العروض views ضمن تخطيط <code>LinearLayout</code> أو <code>FrameLayout</code> أو <code>RelativeLayout</code>  وما إلى ذلك من أجل تحديد طريقة ترتيب أبناء العرض view على الشاشة. يستخدم المكون <code>View</code> في React Native [[ReactNative/flexbox|التخطيط باستخدام Flexbox]] من أجل ترتيب المكونات الأبناء. أما في '''في الويب''': إن كنت على دراية بتطوير الويب، فقد يذكّرك المكوّنان <code><View></code> و <code><Text></code> بلغة [[HTML]]. يمكنك عدّ هذين المكوّنين وسومًا لتطوير التطبيقات مثل الوسمين <code><nowiki><div></nowiki></code> و <code><nowiki><p></nowiki></code> .</blockquote>يمكن إخراج المكون المخصَّص عدة مرات وبأماكن متعددة دون الحاجة إلى تكرار الشيفرة باستخدام <code><Cat></code> فقط، انظر المثال التالي ([https://snack.expo.dev/@hsoubwiki/multiple-components تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يُدعَى أي مكوّنٍ يخرج renders مكونًا آخر '''بالمكوّن الأب parent component'''، فالمكوّن <code>Cafe</code> هو المكون الأب في مثالنا وكل مكون <code>Cat</code> هو '''مكون ابن child component'''. يمكنك وضع العدد الذي تريده من المكونات <code>Cat</code> ضمن المكون <code>Cafe</code>، ويخرج كل مكون <code><Cat></code> عنصرًا مختلفًا عن غيره، إذ يمكنك تخصيص هذا العنصر باستخدام props.

== الخاصيات Props ==

Props هي اختصار للكلمة "properties" أي خصائص، وعملها مساعدتك على تخصيص مكوّنات [[React]]. تمرر كل <code><Cat></code> في المثال التالي اسمًا مختلفًا <code>name</code> للمكون <code>Cat</code> من أجل إخراجه ([https://snack.expo.dev/@hsoubwiki/multiple-props تجربة حية للمثال]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يمكن تخصيص معظم مكونات React Native الأساسية باستخدام الخاصيات props أيضًا، كأن تمرر خاصيةً prop تدعى <code>source</code> عند استخدام المكون <code>Image</code> لتحديد الصورة المعروضة على سبيل المثال ([https://snack.expo.dev/@hsoubwiki/props تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>للمكون <code>Image</code> خصائص متعددة مختلفة بما في ذلك <code>style</code> التي يمكن أن تحتوي على كائن تصميم في لغة جافاسكريبت وأزواج قيمة-خاصية (property-value) متعلقة بالتخطيط.<blockquote>لاحظ وجود الأقواس المعقوصة المضاعفة <code><nowiki>{{ }}</nowiki></code> التي تحيط بخاصيات طول وعرض الخاصية <code>style</code>. يُشار إلى قيم JavaScript بقوسين معقوصين <code>{}</code> فقط ضمن JSX، وهذا مفيد عند تمرير شيءٍ آخر غير السلاسل string على أنه خصائص props، كتمرير مصفوفة array  أو عدد: <syntaxhighlight lang="javascript">
<Cat food={["fish", "kibble"]} age={2} />
</syntaxhighlight>يُشار أيضًا إلى الكائنات المكتوبة بلغة جافاسكريبت باستخدام قوسين معقوصين: <code>{width: 200, height: 200}</code>، لذلك يجب تغليف كائن جافاسكريبت بقوسين معقوصين آخرين عند تمريره في JSX  كما يلي: <code><nowiki>{{width: 200, height: 200}}</nowiki></code>.</blockquote>يمكنك بناء أشياء متعددة باستخدام الخاصيات props والمكونات الأساسية <code>Text</code> و  <code>Image</code> و <code>View</code>، ولكنك ستحتاج الحالة state لبناء شيء تفاعلي.

== الحالة State ==
يمكنك عدّ الخاصيات props كوسطاء تستخدمها لضبط كيفية إخراج المكونات، ولكن الحالة state شبيهة بتخزين بيانات المكون الشخصية، وتُعَد مفيدة لمعالجة البيانات التي تتغير بمرور الوقت أو التي تنشأ من تفاعل المستخدم، أي أن الحالة تعطي ذاكرةً لمكوناتك.<blockquote>يمكن بالحالة العامة استخدام الخاصيات props لضبط مكون عند إخراجه، واستخدام الحالة لتتبّع بيانات مكون تتوقّع تغيّرها بمرور الوقت.</blockquote>يحدث المثال التالي في مقهًى للقطط حيث تنتظر قطتان جائعتان الطعام. نتوقع تغير جوع هاتين القطتين بمرور الوقت بعكس الاسم الذي لن تغير أبدًا، وبالتالي سيُخزَّن هذا الجوع كحالة. يمكنك الضغط على زرَي هاتين القطتين لإطعامهما، وبالتالي تتغير حالتهما.

=== مكون الدالة Function Component ===
يمكن إضافة حالة لمكونٍ ما من خلال استدعاء [[React/hooks state|خطّاف React]] يُسمَّى <code>useState</code>. الخطاف [[React/hooks intro|Hook]] هو نوعٌ من الدوال التي تسمح بالربط بميزات مكتبة React مثل الخطاف <code>useState</code> الذي يتيح لك إضافة حالة إلى مكونات الدالة.

إليك المثال ([https://snack.expo.dev/@hsoubwiki/state-function-component تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يجب أولًا استيراد خطاف الحالة <code>useState</code> من مكتبة React كما يلي:<syntaxhighlight lang="javascript">
import React, { useState } from 'react';
</syntaxhighlight>ثم يجب التصريح عن حالة المكون من خلال استدعاء <code>useState</code> داخل دالة المكون. ينشئ الخطاف <code>useState</code> متغير الحالة <code>isHungry</code>:<syntaxhighlight lang="javascript">
const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};
</syntaxhighlight><blockquote>يمكنك استخدام خطاف الحالة <code>useState</code> لتتبّع أي نوع بيانات كالسلاسل والأعداد والقيم البوليانية والمصفوفات والكائنات، إذ تستطيع تتبّع عدد مرات مداعبة القطة مثلًا من خلال استخدام العبارة: <code>const [timesPetted, setTimesPetted] = useState(0)</code>.</blockquote>يؤدي استدعاء الخطاف <code>useState</code> إلى شيئين اثنين هما:

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

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

ثم تضيف المكون الأساسي <code>Button</code> وأعطه خاصية <code>onPress</code>:<syntaxhighlight lang="javascript">
<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>
</syntaxhighlight>إن ضغط أحدٌ ما الزر، فستُشغَّل الخاصية <code>onPress</code> التي تستدعي الدالة <code>setIsHungry(false)</code>، وهذا يضبط قيمة متغير الحالة <code>isHungry</code> إلى القيمة <code>false</code>. تُضبَط الخاصية <code>disabled</code> المتعلقة بالمكون <code>Button</code> إلى القيمة <code>true</code> وتتغير الخاصية <code>title</code> أيضًا، عندما تصبح قيمة متغير الحالة <code>isHungry</code>:<syntaxhighlight lang="javascript">
<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>
</syntaxhighlight><blockquote>لاحظ أن متغير الحالة <code>isHungry</code> ثابت <code>const</code>، لكنه يبدو غير قابل لإعادة الإسناد. سيُعاد إخراج مكون دالة ضبط الحالة كالدالة <code>setIsHungry</code> عند استدعائها، وبالتالي ستُشغَّل دالة المكون <code>Cat</code> مرة أخرى وسيعطي <code>useState</code> متغير الحالة <code>isHungry</code> القيمة التالية.</blockquote>أخيرًا، ضع القطط ضمن مكون المقهى <code>Cafe</code> كما يلي:<syntaxhighlight lang="javascript">
const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};
</syntaxhighlight>

=== مكون الصنف Class Component ===

يختلف نهج مكونات الصنف القديمة قليلًا عندما يتعلق الأمر بالحالة، إليك المثال ([https://snack.expo.dev/@hsoubwiki/state-and-class-components تجربة حية]):<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>يجب استيراد الصنف <code>Component</code> من مكتبة React كما هو الحال دائمًا مع مكونات الصنف:<syntaxhighlight lang="javascript">
import React, { Component } from 'react';
</syntaxhighlight>وتُخزَّن الحالة ضمن كائن حالة في مكونات الصنف:<syntaxhighlight lang="javascript">
export class Cat extends Component {
  state = { isHungry: true };
  //..
}
</syntaxhighlight>يمكن الوصول إلى الخاصيات props باستخدام العبارة <code>this.props</code> ، وكذلك يمكن الوصول إلى كائن الحالة ضمن المكون باستخدام العبارة <code>this.state</code>:<syntaxhighlight lang="javascript">
<Text>
  I am {this.props.name}, and I am
  {this.state.isHungry ? ' hungry' : ' full'}!
</Text>
</syntaxhighlight>وتُضبَط القيم الفردية في كائن الحالة من خلال تمرير كائن الزوج المفتاح-القيمة للحالة وتمرير قيمته الجديدة للدالة <code>()this.setState</code>:<syntaxhighlight lang="javascript">
<Button
  onPress={() => {
    this.setState({ isHungry: false });
  }}
  // ..
/>
</syntaxhighlight><blockquote>لا تغيِّر حالة المكون الخاص بك مباشرةً من خلال إسناد قيمة جديدة إليها باستخدام العبارة <code>this.state.hunger = false</code>. يسمح استدعاء الدالة <code>()this.setState</code> لمكتبة React بتتبّع التغيرات التي أجريت على الحالة التي تنبّه إعادة الإخراج أو التصيير rerendering. يمكن أن يؤدي إعداد الحالة مباشرةً إلى تعطيل تفاعل تطبيقك.</blockquote>تُضبَط قيمة الخاصية <code>disabled</code> الخاصة بالمكون <code>Button</code> وتتغير قيمة الخاصية <code>title</code> أيضًا، عندما تكون <code>this.state.isHungry</code> قيمتها  <code>false</code>:<syntaxhighlight lang="javascript">
<Button
  // ..
  disabled={!this.state.isHungry}
  title={
    this.state.isHungry
      ? 'Pour me some milk, please!'
      : 'Thank you!'
  }
/>
</syntaxhighlight>أخيرًا، ضع القطط ضمن مكون المقهى <code>Cafe</code> كما يلي:<syntaxhighlight lang="javascript">
class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}

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

تعرّفنا على مكونات [[React]] و React Native الأساسية، فلنتعمّق أكثر في هذه المكونات من خلال [[ReactNative/handling text input|التعامل مع المدخلات النّصيّة <code><TextInput></code>]].

== مصادر ==

* [https://reactnative.dev/docs/intro-react صفحة React Fundamentals في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Docs]]
[[تصنيف:React]]