عرض مصدر ReactNative/tutorial

<noinclude>{{DISPLAYTITLE:أساسيات إطار العمل React Native}}</noinclude>
إطار العمل React Native يشبه [[React]]، لكنه يستخدم مكونات أصيلة بدلًا من مكونات الويب كعناصر أساسية. يجب أن تفهم أولًا بعضًا من مفاهيم React الأساسية، مثل [[React/introducing jsx|JSX]] و<nowiki/>[[React/components and props|المكوّنات]] و<nowiki/>[[React/state and lifecycle|الحالة ‎<code>state</code>‎]] والخاصيات ‎<code>props</code>‎، لفهم البنية الأساسية لتطبيق React Native. إذا كانت لديك خبرة سابقة مع React، فلا تزال بحاجة إلى معرفة بعض الأمور الخاصة بإطار عمل React Native، كالمكونات الأصيلة native components مثلًا. هذا الدليل التطبيقي موجّه إلى جميع الفئات، سواء كانت لديك تجربة مع React أم لا.

==المثال الأول: مرحبًا بالعالم Hello World==
سنبدأ أولًا ببناء تطبيقٍ الغرض الوحيد منه هو عرض جملة "مرحبًا بالعالم Hello World" كما يلي ([https://snack.expo.dev/@hsoubwiki/hello-world تجربة حية]):

<syntaxhighlight lang="javascript">
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;
</syntaxhighlight>
يمكنك تعديل عينة الشيفرة البرمجية مباشرة في [https://snack.expo.dev/@hsoubwiki/hello-world محاكٍ على الويب مثل Expo]، أو يمكنك لصقها في ملف ‎<code>App.js</code>‎ لإنشاء تطبيق فعلي على جهازك المحلي.

===شرح الشيفرة===

# نحتاج أولًا إلى استيراد <code>React</code> لنتمكّن من استخدام <code>JSX</code>، والتي ستُحوَّل بعد ذلك إلى المكونات الأصيلة لكل منصة.
# استوردنا المكوّنين <code>Text</code> و <code>View</code> من <code>react-native</code> في السطر الثاني من الشيفرة السابقة.

ثم ستجد الدالة <code>HelloWorldApp</code>، وهي [[React/components and props|مكون دالة functional component]]، وتتصرف هذه الدالة بالطريقة نفسها في React للويب. تعيد هذه الدالة مكون <code>View</code> مع بعض الأنماط والمكوّن <code>Text</code> كابنٍ لها.

يسمح المكون <code>Text</code> بتصيير render نص، بينما يصيّر المكوّن <code>View</code> حاوية. طُبِّقت أنماط متعددة على هذه الحاوية، إذًا لنحلل عمل كل نمط منها.

النمط الأول هو <code>flex: 1</code>، حيث ستحدّد الخاصية <code>[[ReactNative/layout props#flex|flex]]</code> كيف "تَملأ" عناصرك المساحةَ المتوفرة اعتمادًا على المحور الرئيسي main axis. بما أن لدينا حاوية واحدة فقط، لذلك ستشغَل هذه الحاوية كل المساحة المكون الأب المتاحة، وبما أنها المكون الوحيد في هذه الحالة، فستأخذ كل مساحة الشاشة المتاحة.

النمط التالي هو [[ReactNative/layout props#justifyContent|<code>justifyContent: "center"‎</code>]]. يؤدي هذا النمط إلى محاذاة العناصر الأبناء للحاوية في مركز محور الحاوية الرئيسي. أخيرًا، لدينا النمط [[ReactNative/layout props#alignItems|<code>alignItems: "center"‎</code>]]، والذي يؤدي إلى محاذاة عناصر الحاوية في مركز محور الحاوية المتعامد مع المحور الرئيسي cross axis.

قد تبدو بعض الأجزاء في الشيفرة أعلاه مختلفة عن لغة [[JavaScript]] التي اعتدت عليها، لا تقلق، فهذه شيفرة [[JavaScript]] بنسختها ES2015 (التي تعرف كذلك بالرمز ES6)، وهي نسخة جديدة من [[JavaScript]] تُضيف مجموعة من التحسينات التي أصبحت الآن جزءًا من معيار [[JavaScript]] الرسمي، لكنّها غير مدعومة على جميع المتصفّحات، لذلك لا تُستخدَم عادةً في تطوير الويب. يدعم React Native النسخة ES2015 افتراضيًّا، لذلك يُمكنك استخدام الميّزات الجديدة من [[JavaScript]] دون القلق بشأن التوافق. الجمل ‎<code>from</code>‎و [[JavaScript/import|‎<code>import</code>‎]]  و ‎<code>[[JavaScript/class|class]]</code>‎ و‎<code>extends</code>‎ في المثال أعلاه كلها ميزات ES2015. إن لم تعرف ميّزات النسخة الجديدة من JavaScript، فربّما يُمكنك تعلّمها فقط من خلال قراءة شيفراتٍ برمجيّةٍ كالشيفرة السابقة، أو اطّلع على [https://academy.hsoub.com/tags/introduction%20to%20es6/ هذه السلسلة من الدروس]، إضافة إلى أنّ [[JavaScript|توثيق JavaScript]] في الموسوعة يُغطّي ميّزات ES6 كذلك (استعن بمربّع البحث للوصول إلى صفحات معيّنة).

أما الشيء الآخر غير المعتاد في الشيفرة السابقة فهو الجزء التالي:<syntaxhighlight lang="html">
‎<View><Text>Hello world!</Text></View>‎
</syntaxhighlight>هذه شيفرة JSX وهي بنيةٌ برمجيّةٌ أو صياغة syntax لتضمين XML داخل شيفرة JavaScript. تَستخدم العديد من أطر العمل لغة قوالب templating language خاصة تسمح لك بتضمين شيفرة برمجيّة داخل لغة ترميز markup language. يحدث عكس ذلك في شيفرة React، إذ تتيح لك JSX كتابة لغة ترميز داخل شيفرة برمجيّة. الشيفرة مشابهة للغة HTML على الويب، باستثناء أنّ عناصر الويب مثل ‎<code>[[HTML/div|<nowiki><div></nowiki>]]</code>‎  أو ‎<code>[[HTML/div|<nowiki><span></nowiki>]]</code>‎ تُستبدَل بمكونات React. في هذه الحالة، ‎<code>[[ReactNative/text|<Text>]]</code>‎ هو [[ReactNative/intro react native components|مكونٌ أساسي]] يُستخدَم لعرض مقطعٍ نصيٍّ، أمّا [[ReactNative/view|‎<code>View</code>‎]] فهو مكوّن يشبه ‎<code><nowiki><div></nowiki></code>‎  أو ‎<code><nowiki><span></nowiki></code>‎.
==المكونات Components==
تُعرِّف الشيفرة أعلاه مكوّنًا جديدًا باسم ‎<code>HelloWorldApp</code>‎. ستُنشئ العديد من المكونات الجديدة أثناء تطويرك للتطبيقات بإطار عمل React Native. كلّ ما تراه على الشاشة هو مكوّنٌ من هذه المكونات.

== الخاصيات Props ==
يمكن تخصيص معظم المكونات عند إنشائها باستخدام معاملات مختلفة، حيث تسمّى معاملات الإنشاء هذه بالخاصيات props.

يمكن لمكوناتك الخاصة أيضًا استخدام الخاصيات <code>props</code>، إذ يتيح لك ذلك إنشاء مكون واحد يمكن استخدامه في أماكن مختلفة من تطبيقك، ومع خاصيات مختلفة قليلًا في مكانٍ ما مختلف عن الآخر. يُشار إلى هذه الخاصيات بالشكل <code>props.YOUR_PROP_NAME</code> في مكونات الدالة أو بالشكل <code>this.props.YOUR_PROP_NAME</code> في مكونات الصنف الخاصة بك. اطّلع على المثال التالي ([https://snack.expo.dev/@hsoubwiki/hello-props تجربة حية]):<syntaxhighlight lang="javascript">
import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  center: {
    alignItems: 'center'
  }
})

const Greeting = (props) => {
  return (
    <View style={styles.center}>
      <Text>Hello {props.name}!</Text>
    </View>
  );
}

const LotsOfGreetings = () => {
  return (
    <View style={[styles.center, {top: 50}]}>
      <Greeting name='Rexxar' />
      <Greeting name='Jaina' />
      <Greeting name='Valeera' />
    </View>
  );
}

export default LotsOfGreetings;
</syntaxhighlight>يسمح استخدام الاسم <code>name</code> كخاصية بتخصيص المكون <code>Greeting</code>، لنتمكّن من إعادة استخدام هذا المكون لكل التحيات greetings. يستخدم هذا المثال أيضًا المكوّن <code>Greeting</code> في JSX، وهذا ما يجعل React رائعةً للغاية.

الشيء الجديد الآخر  هو المكون <code>[[ReactNative/view|View]]</code> الذي يُعَد مفيدًا كحاوية للمكونات الأخرى بهدف التحكم في النمط والتخطيط.

يمكنك إنشاء مجموعة متنوعة من الشاشات الثابتة باستخدام الخاصيات <code>props</code> ومكونات <code>[[ReactNative/text|Text]]</code> و <code>[[ReactNative/image|Image]]</code> و <code>[[ReactNative/view|View]]</code> الأساسية، لكن يجب أن تعرف المزيد حول الحالة State لمعرفة كيفية تغيير تطبيقك بمرور الوقت.

== الحالة State ==
تسمح الحالة <code>state</code> لمكونات React بتغيير مخرجاتها بمرور الوقت استجابةً لإجراءات المستخدم واستجابات الشبكة وأي شيء آخر، بخلاف الخاصيات التي تكون [[React/components and props#.D8.A7.D9.84.D8.AE.D8.A7.D8.B5.D9.8A.D8.A7.D8.AA props .D9.82.D8.A7.D8.A8.D9.84.D8.A9 .D9.84.D9.84.D9.82.D8.B1.D8.A7.D8.A1.D8.A9 .D9.81.D9.82.D8.B7|قابلة للقراءة فقط]] ولا يجب تعديلها.

=== الفرق بين الحالة والخاصيات في React ===
الخاصيات في مكوِّن React هي المتغيرات التي نمررها من مكوّن أب إلى مكوّن ابن. أما الحالة فهي أيضًا متغيرات لكنها لا تُمرَّر كمعاملات حيث يهيّئها ويديرها المكوّن داخليًا.

=== هل توجد اختلافات بين React و React Native في التعامل مع الحالة؟ ===
إليك مثال ReactJS لعدّاد Counter باستخدام [[React/hooks overview|الخطّافات Hooks]]:<syntaxhighlight lang="javascript">
import React, { useState } from 'react';



const App = () => {
  const [count, setCount] = useState(0);

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

</syntaxhighlight>انظر أيضًا مثال React Native لعّداد Counter باستخدام [[React/hooks overview|الخطّافات Hooks]]:<syntaxhighlight lang="javascript">
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native أنماط
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});
</syntaxhighlight>لا يوجد فرق في التعامل مع الحالة بين [[React/state and lifecycle|React]] و React Native كما هو موضح أعلاه. يمكنك استخدام حالة المكونات الخاصة بك في كل من مكونات الدالة ومكونات الصنف باستخدام [[React/hooks intro|الخطّافات hooks]]. سنعرض في المثال التالي مثال العدّاد counter نفسه ولكن باستخدام الأصناف classes ([https://snack.expo.dev/@hsoubwiki/hello-classes تجربة حية]):<syntaxhighlight lang="javascript">
import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'

class App extends Component {
  state = {
    count: 0
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    })
  }

 render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
        >
         <Text>Click me</Text>
        </TouchableOpacity>
        <View>
          <Text>
            You clicked { this.state.count } times
          </Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
    marginBottom: 10
  }
})

export default App;
</syntaxhighlight>

==مصادر==
* [https://reactnative.dev/docs/tutorial صفحة Learn the Basics في توثيق React Native الرسمي.]
[[تصنيف:ReactNative]]