الفرق بين المراجعتين لصفحة: «ReactNative/intro react»

من موسوعة حسوب
أنشأ الصفحة ب'== أساسيات React =='
 
لا ملخص تعديل
سطر 1: سطر 1:
== أساسيات React ==
== أساسيات React ==
يُشغَّل إطار عمل [[ReactNative|React Native]] على [[React]]، وهي مكتبة شائعة ومفتوحة المصدر تُستخدَم لبناء واجهات المستخدم باستخدام لغة [[JavaScript]]. يجب فهم React فهمًا جيدًا لتحقيق أقصى استفادة من React Native. تساعدك هذه الصفحة للبدء أو لاستذكار المفاهيم الأساسية من React والتي هي:
* المكونات components
* JXC
* props
* state
يمكنك الاطلاع على [[React|توثيق React]]، إن أردت التعمق أكثر.
=== المكوّن الأول ===
يستخدم المثال التالي المكون 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>
==== مكون الصنف 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>

مراجعة 09:58، 21 مايو 2021

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