الفرق بين المراجعتين لصفحة: «React/react api»
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
Kinan-mawed (نقاش | مساهمات) لا ملخص تعديل |
||
| سطر 5: | سطر 5: | ||
=== المكوّنات === | === المكوّنات === | ||
تُتيح لك مكوّنات React تقسيم واجهة المستخدم إلى قطع مستقلة قابلة لإعادة الاستخدام والتفكير بكل قطعة لوحدها. يُمكِن تعريف مكوّنات React عن طريق أخذ صنف فرعي من React.Component أو React.PureComponent. | تُتيح لك مكوّنات React تقسيم واجهة المستخدم إلى قطع مستقلة قابلة لإعادة الاستخدام والتفكير بكل قطعة لوحدها. يُمكِن تعريف مكوّنات React عن طريق أخذ صنف فرعي من <code>React.Component</code> أو <code>React.PureComponent</code>. | ||
* <code>React.Component</code>. | |||
إن لم تكن تستخدم أصناف ES6 فبإمكانك استخدام الوحدة create-react-class. انظر إلى استخدام React بدون ES6 للمزيد من المعلومات. | * <code>React.PureComponent</code>. | ||
إن لم تكن تستخدم أصناف ES6 فبإمكانك استخدام الوحدة <code>create-react-class</code>. انظر إلى استخدام React بدون ES6 للمزيد من المعلومات. | |||
=== إنشاء عناصر React === | === إنشاء عناصر React === | ||
نوصي باستخدام JSX لوصف مظهر واجهة المستخدم لديك. كل عنصر في JSX هو مجرّد تعبير بديل لاستدعاء التابع React.createElement(). لن تضطر بشكل اعتيادي إلى استدعاء التوابع التالية بشكل مباشر إن كنت تستخدم JSX: | نوصي باستخدام JSX لوصف مظهر واجهة المستخدم لديك. كل عنصر في JSX هو مجرّد تعبير بديل لاستدعاء التابع <code>React.createElement()</code>. لن تضطر بشكل اعتيادي إلى استدعاء التوابع التالية بشكل مباشر إن كنت تستخدم JSX: | ||
* <code>createElement()</code>. | |||
* <code>createFactory()</code>. | |||
انظر إلى استخدام React بدون JSX للمزيد من المعلومات. | انظر إلى استخدام React بدون JSX للمزيد من المعلومات. | ||
=== تحويل العناصر === | === تحويل العناصر === | ||
يُزوّدنا الكائن <code>React</code> بالعديد من واجهات برمجة التطبيقات (APIs) للتعامل مع العناصر: | |||
* <code>cloneElement()</code>. | |||
* <code>isValidElement()</code>. | |||
* <code>React.Children</code>. | |||
=== الأجزاء (Fragments) === | === الأجزاء (Fragments) === | ||
تُزوِّدنا React أيضًا بمكوّن لتصيير عدة عناصر بدون مُغلِّف له. | تُزوِّدنا React أيضًا بمكوّن لتصيير عدة عناصر بدون مُغلِّف له. | ||
* <code>React.Fragment</code>. | |||
=== المراجع (Refs) === | === المراجع (Refs) === | ||
* <code>React.createRef</code>. | |||
* <code>React.forwardRef</code>. | |||
== مرجع == | == مرجع == | ||
=== React.Component === | === <code>React.Component</code> === | ||
إنّ React.Component هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6: | إنّ <code>React.Component</code> هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6: | ||
مراجعة 07:57، 5 سبتمبر 2018
إنّ الكائن React هو نقطة الدخول إلى مكتبة React. إن حمّلت React عن طريق العنصر <script> فستكون هذه الواجهة ذات المستوى الأعلى متوفرة عبر الكائن العام React. وإن استخدمت ES6 مع npm فتستطيع كتابة import React from 'react'. إن استخدمت ES5 مع npm فتستطيع كتابة var React = require('react').
لمحة عامة
المكوّنات
تُتيح لك مكوّنات React تقسيم واجهة المستخدم إلى قطع مستقلة قابلة لإعادة الاستخدام والتفكير بكل قطعة لوحدها. يُمكِن تعريف مكوّنات React عن طريق أخذ صنف فرعي من React.Component أو React.PureComponent.
React.Component.React.PureComponent.
إن لم تكن تستخدم أصناف ES6 فبإمكانك استخدام الوحدة create-react-class. انظر إلى استخدام React بدون ES6 للمزيد من المعلومات.
إنشاء عناصر React
نوصي باستخدام JSX لوصف مظهر واجهة المستخدم لديك. كل عنصر في JSX هو مجرّد تعبير بديل لاستدعاء التابع React.createElement(). لن تضطر بشكل اعتيادي إلى استدعاء التوابع التالية بشكل مباشر إن كنت تستخدم JSX:
createElement().createFactory().
انظر إلى استخدام React بدون JSX للمزيد من المعلومات.
تحويل العناصر
يُزوّدنا الكائن React بالعديد من واجهات برمجة التطبيقات (APIs) للتعامل مع العناصر:
cloneElement().isValidElement().React.Children.
الأجزاء (Fragments)
تُزوِّدنا React أيضًا بمكوّن لتصيير عدة عناصر بدون مُغلِّف له.
React.Fragment.
المراجع (Refs)
React.createRef.React.forwardRef.
مرجع
React.Component
إنّ React.Component هو عبارة عن الصنف الأساسي لمكوّنات React عند تعريفها باستخدام أصناف ES6: