الفرق بين المراجعتين لصفحة: «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;