الفرق بين المراجعتين ل"ReactNative/getting started"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط
ط
 
(7 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
 
{{DISPLAYTITLE:مدخل إلى React Native}}
 
{{DISPLAYTITLE:مدخل إلى React Native}}
−
 
 
مرحبًا بك في بداية رحلتنا إلى إطار عمل React Native. إن أردت الاطّلاع على تعليمات إعداد البيئة، فقد انتقلت إلى [[ReactNative/environment setup|قسمها الخاص]]. ستجد في هذه الصفحة مدخلًا إلى التوثيق والمكونات الأصيلة ومكتبة React وغير ذلك.
 
مرحبًا بك في بداية رحلتنا إلى إطار عمل React Native. إن أردت الاطّلاع على تعليمات إعداد البيئة، فقد انتقلت إلى [[ReactNative/environment setup|قسمها الخاص]]. ستجد في هذه الصفحة مدخلًا إلى التوثيق والمكونات الأصيلة ومكتبة React وغير ذلك.
  
سطر 12: سطر 11:
  
 
== أمثلة تفاعلية ==
 
== أمثلة تفاعلية ==
−
يتيح لك هذا المدخل البدء على الفور ضمن متصفحك بأمثلة تفاعلية كهذا المثال:<syntaxhighlight lang="javascript">
+
يتيح لك هذا المدخل البدء على الفور ضمن متصفحك بأمثلة تفاعلية كهذا المثال ([https://snack.expo.dev/@hsoubwiki/hello-world تجربة حية]):<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
 
import { Text, View } from 'react-native';
 
import { Text, View } from 'react-native';
سطر 27: سطر 26:
  
 
export default YourApp;
 
export default YourApp;
−
</syntaxhighlight>[https://snack.expo.dev/@hsoubwiki/hello-world تجربة حية للمثال على Expo].
+
</syntaxhighlight>يمكنك استخدام الأداة Snack Player التي هي أداة مفيدة أنشأها Expo لتضمين وتشغيل مشاريع React Native ومشاركة كيفية تصييرها render على منصات مختلفة مثل Android و iOS. وضعنا لك قبل كل مثال رابطًا لتجربة حية له على Snack Player يمكِّنك من تجربة المثال على مختلف الأجهزة والبيئات إن أردت ذلك وحتى نسخ الشيفرة إلى حسابك على Expo أو يمكنك الاطلاع على المثال مباشرةً ونسخ الشيفرة من الموسوعة.<blockquote>إن أردت إعداد بيئة تطوير محلية، فيمكنك [[ReactNative/environment setup|اتباع دليلنا لإعداد بيئتك على جهازك المحلي]] ولصق أمثلة الشيفرة في ملف <code>App.js</code> الخاص بك (إذا كنت مطور ويب، فقد يكون لديك بالفعل بيئة محلية معدَّة لاختبار متصفح الهاتف المحمول).</blockquote>
−
 
 
−
يمكنك استخدام الأداة Snack Player التي هي أداة مفيدة أنشأها Expo لتضمين وتشغيل مشاريع React Native ومشاركة كيفية تصييرها render على منصات مختلفة مثل Android و iOS.<blockquote>إن أردت إعداد بيئة تطوير محلية، فيمكنك [[ReactNative/environment setup|اتباع دليلنا لإعداد بيئتك على جهازك المحلي]] ولصق أمثلة الشيفرة في ملف <code>App.js</code> الخاص بك (إذا كنت مطور ويب، فقد يكون لديك بالفعل بيئة محلية معدَّة لاختبار متصفح الهاتف المحمول).</blockquote>
 
  
 
== مكونات الدالة Function Components ومكونات الصنف Class Components ==
 
== مكونات الدالة Function Components ومكونات الصنف Class Components ==
 
يمكنك إنشاء مكوّنات باستخدام دوال أو أصناف في React. كانت مكونات الصنف سابقًا هي المكونات الوحيدة التي يمكن أن يكون لها حالة، ولكن أصبح بإمكانك إضافة حالة وغير ذلك إلى مكونات الدالة منذ بداية ظهور واجهات API الخاصة بخطّافات React.
 
يمكنك إنشاء مكوّنات باستخدام دوال أو أصناف في React. كانت مكونات الصنف سابقًا هي المكونات الوحيدة التي يمكن أن يكون لها حالة، ولكن أصبح بإمكانك إضافة حالة وغير ذلك إلى مكونات الدالة منذ بداية ظهور واجهات API الخاصة بخطّافات React.
  
−
ظهرت الخطافات Hooks في الإصدار [https://reactnative.dev/blog/2019/03/12/releasing-react-native-059 React Native 0.59]، وبما أن الخطافات هي الطريقة المستقبلية لكتابة مكونات React الخاصة بك، فقد استخدمنا أمثلة لمكونات الدالة بالإضافة إلى مكونات الصنف كما يلي:
+
ظهرت الخطافات Hooks في الإصدار [https://reactnative.dev/blog/2019/03/12/releasing-react-native-059 0.59 من React Native]، وبما أن الخطافات هي الطريقة المستقبلية لكتابة مكونات React الخاصة بك، فقد استخدمنا أمثلة لمكونات الدالة بالإضافة إلى مكونات الصنف كما يلي:
  
 
=== مكون الدالة ===
 
=== مكون الدالة ===
−
<syntaxhighlight lang="javascript">
+
[https://snack.expo.dev/@hsoubwiki/hello-world-class-component تجربة حية للمثال]:<syntaxhighlight lang="javascript">
 
import React from 'react';
 
import React from 'react';
 
import { Text, View } from 'react-native';
 
import { Text, View } from 'react-native';
سطر 57: سطر 54:
  
 
=== مكون الصنف ===
 
=== مكون الصنف ===
−
<syntaxhighlight lang="javascript">
+
[https://snack.expo.dev/@hsoubwiki/hello-world-function-component تجربة حية للمثال]:<syntaxhighlight lang="javascript">
 
import React, { Component } from 'react';
 
import React, { Component } from 'react';
 
import { Text, View } from 'react-native';
 
import { Text, View } from 'react-native';
سطر 81: سطر 78:
 
يأتي الأشخاص الذين يريدون تعلّم React Native من خلفيات متنوعة، فقد تكون لديك خبرة في مجموعة من التقنيات، من الويب إلى تطبيقات Android و iOS وغير ذلك، لذلك حاولنا كتابة هذا التوثيق للمطورين من جميع تلك الخلفيات. سنقدّم أحيانًا تفسيرات خاصة بإحدى المنصات أو غيرها كما يلي:
 
يأتي الأشخاص الذين يريدون تعلّم React Native من خلفيات متنوعة، فقد تكون لديك خبرة في مجموعة من التقنيات، من الويب إلى تطبيقات Android و iOS وغير ذلك، لذلك حاولنا كتابة هذا التوثيق للمطورين من جميع تلك الخلفيات. سنقدّم أحيانًا تفسيرات خاصة بإحدى المنصات أو غيرها كما يلي:
  
−
=== في Android ===
+
* '''Android''': قد يكون مطورو Android على دراية بهذا المفهوم.
−
قد يكون مطورو Android على دراية بهذا المفهوم.
+
* '''iOS''': قد يكون مطورو iOS على دراية بهذا المفهوم.
−
 
+
* '''الويب''': قد يكون مطورو الويب على دراية بهذا المفهوم.
−
=== في iOS ===
 
−
قد يكون مطورو iOS على دراية بهذا المفهوم.
 
−
 
 
−
=== في الويب ===
 
−
قد يكون مطورو الويب على دراية بهذا المفهوم.
 
  
 
حان الوقت للتعرف على أساس إطار عمل React Native وهو [[ReactNative/intro react native components|المكونات الأصيلة Native Components]]، بعد أن عرفت كيفية عمل هذا الدليل.
 
حان الوقت للتعرف على أساس إطار عمل React Native وهو [[ReactNative/intro react native components|المكونات الأصيلة Native Components]]، بعد أن عرفت كيفية عمل هذا الدليل.
سطر 97: سطر 89:
  
 
[[تصنيف:ReactNative]]
 
[[تصنيف:ReactNative]]
 +
[[تصنيف:React Native Docs]]

المراجعة الحالية بتاريخ 13:34، 9 أكتوبر 2021

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

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

كيفية استخدام هذا التوثيق

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

المتطلبات الأساسية

ستحتاج إلى فهم أساسيات لغة JavaScript للعمل مع React Native. إن كنت جديدًا على لغة جافا سكريبت أو بحاجة إلى تجديد معلوماتك، فيمكنك الغوص في توثيق لغة JavaScript على موسوعة حسوب.

افترضنا عدم وجود معرفة مسبقة بتطوير تطبيقات React أو Android أو iOS لدى قارئ هذا التوثيق، ولكنها مواضيع قيّمة ليدرسها مطوّر React Native الطموح، لذلك ربطنا القارئ بالموارد والمقالات اللازمة ليتعمّق في هذه المواضيع أكثر.

أمثلة تفاعلية

يتيح لك هذا المدخل البدء على الفور ضمن متصفحك بأمثلة تفاعلية كهذا المثال (تجربة حية):

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

const YourApp = () => {
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>
        Try editing me! 🎉
      </Text>
    </View>
  );
}

export default YourApp;

يمكنك استخدام الأداة Snack Player التي هي أداة مفيدة أنشأها Expo لتضمين وتشغيل مشاريع React Native ومشاركة كيفية تصييرها render على منصات مختلفة مثل Android و iOS. وضعنا لك قبل كل مثال رابطًا لتجربة حية له على Snack Player يمكِّنك من تجربة المثال على مختلف الأجهزة والبيئات إن أردت ذلك وحتى نسخ الشيفرة إلى حسابك على Expo أو يمكنك الاطلاع على المثال مباشرةً ونسخ الشيفرة من الموسوعة.

إن أردت إعداد بيئة تطوير محلية، فيمكنك اتباع دليلنا لإعداد بيئتك على جهازك المحلي ولصق أمثلة الشيفرة في ملف App.js الخاص بك (إذا كنت مطور ويب، فقد يكون لديك بالفعل بيئة محلية معدَّة لاختبار متصفح الهاتف المحمول).

مكونات الدالة Function Components ومكونات الصنف Class Components

يمكنك إنشاء مكوّنات باستخدام دوال أو أصناف في React. كانت مكونات الصنف سابقًا هي المكونات الوحيدة التي يمكن أن يكون لها حالة، ولكن أصبح بإمكانك إضافة حالة وغير ذلك إلى مكونات الدالة منذ بداية ظهور واجهات API الخاصة بخطّافات React.

ظهرت الخطافات Hooks في الإصدار 0.59 من React Native، وبما أن الخطافات هي الطريقة المستقبلية لكتابة مكونات React الخاصة بك، فقد استخدمنا أمثلة لمكونات الدالة بالإضافة إلى مكونات الصنف كما يلي:

مكون الدالة

تجربة حية للمثال:

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;

مكون الصنف

تجربة حية للمثال:

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

class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
        <Text>Hello, world!</Text>
      </View>
    );
  }
}

export default HelloWorldApp;

يمكنك الاطلاع على مزيد من أمثلة مكونات الصنف في الإصدارات السابقة من هذا التوثيق باللغة الإنجليزية.

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

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

  • Android: قد يكون مطورو Android على دراية بهذا المفهوم.
  • iOS: قد يكون مطورو iOS على دراية بهذا المفهوم.
  • الويب: قد يكون مطورو الويب على دراية بهذا المفهوم.

حان الوقت للتعرف على أساس إطار عمل React Native وهو المكونات الأصيلة Native Components، بعد أن عرفت كيفية عمل هذا الدليل.

مصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=ReactNative/getting_started&oldid=31461"