الفرق بين المراجعتين لصفحة: «React/javascript environment requirements»
< React
تحديث |
|||
(مراجعتان متوسطتان بواسطة مستخدم واحد آخر غير معروضتين) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:متطلبات بيئة JavaScript}}</noinclude> | <noinclude>{{DISPLAYTITLE:متطلبات بيئة JavaScript في React}}</noinclude> | ||
تعتمد React 16 على أنواع المجموعة [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map] و [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set Set]. إن كنت تدعم متصفحات أقدم وأجهزة قد لا توفر لك هذا من أصل المتصفح أو الجهاز (مثل الإصدارات الأقل من Internet Explorer 11) أو التي لا تمتلك اعتمادات بدون مشاكل (مثل Internet Explorer 11)، فانظر في تضمين polyfill عام في تطبيقك، مثل <code>[https://github.com/zloirock/core-js core-js]</code> أو <code>[https://babeljs.io/docs/usage/polyfill/ babel-polyfill]</code>. | تعتمد React 16 على أنواع المجموعة [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map Map] و [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set Set]. إن كنت تدعم متصفحات أقدم وأجهزة قد لا توفر لك هذا من أصل المتصفح أو الجهاز (مثل الإصدارات الأقل من Internet Explorer 11) أو التي لا تمتلك اعتمادات بدون مشاكل (مثل Internet Explorer 11)، فانظر في تضمين polyfill عام في تطبيقك، مثل <code>[https://github.com/zloirock/core-js core-js]</code> أو <code>[https://babeljs.io/docs/usage/polyfill/ babel-polyfill]</code>. | ||
تبدو البيئة بعد إضافة polyfill في React 16 باستخدام <code>core-js</code> لدعم متصفحات أقدم كما يلي:<syntaxhighlight lang="javascript"> | تبدو البيئة بعد إضافة نقص الدعم (polyfill) في React 16 باستخدام <code>core-js</code> لدعم متصفحات أقدم كما يلي:<syntaxhighlight lang="javascript"> | ||
import 'core-js/ | import 'core-js/es/map'; | ||
import 'core-js/ | import 'core-js/es/set'; | ||
import React from 'react'; | import React from 'react'; | ||
سطر 10: | سطر 10: | ||
ReactDOM.render( | ReactDOM.render( | ||
<h1> | <h1>اهلا بالعالم</h1>, | ||
document.getElementById('root') | document.getElementById('root') | ||
); | ); | ||
</syntaxhighlight>تعتمد React أيضًا على <code>requestAnimationFrame</code> (حتى في بيئات الاختبار). تستطيع استخدام الحزمة <code>[https://www.npmjs.com/package/raf raf]</code> كما يلي:<syntaxhighlight lang="javascript"> | </syntaxhighlight>تعتمد React أيضًا على <code>requestAnimationFrame</code> (حتى في بيئات الاختبار). تستطيع استخدام الحزمة <code>[https://www.npmjs.com/package/raf raf]</code> كما يلي:<syntaxhighlight lang="javascript"> | ||
import 'raf/polyfill'; | import 'raf/polyfill'; | ||
سطر 28: | سطر 27: | ||
* [[React/shallow renderer|التصيير السطحي (Shallow Rendering)]] | * [[React/shallow renderer|التصيير السطحي (Shallow Rendering)]] | ||
* [[React/test renderer|مصير الاختبار (Test Renderer)]] | * [[React/test renderer|مصير الاختبار (Test Renderer)]] | ||
==مصادر== | ==مصادر== | ||
*[https://reactjs.org/docs/javascript-environment-requirements.html صفحة متطلبات بيئة JavaScript في توثيق React الرسمي]. | *[https://reactjs.org/docs/javascript-environment-requirements.html صفحة متطلبات بيئة JavaScript في توثيق React الرسمي]. | ||
[[تصنيف:React]] | [[تصنيف:React]] | ||
[[تصنيف:React API Reference]] |
المراجعة الحالية بتاريخ 21:20، 5 نوفمبر 2020
تعتمد React 16 على أنواع المجموعة Map و Set. إن كنت تدعم متصفحات أقدم وأجهزة قد لا توفر لك هذا من أصل المتصفح أو الجهاز (مثل الإصدارات الأقل من Internet Explorer 11) أو التي لا تمتلك اعتمادات بدون مشاكل (مثل Internet Explorer 11)، فانظر في تضمين polyfill عام في تطبيقك، مثل core-js
أو babel-polyfill
.
تبدو البيئة بعد إضافة نقص الدعم (polyfill) في React 16 باستخدام core-js
لدعم متصفحات أقدم كما يلي:
import 'core-js/es/map';
import 'core-js/es/set';
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>اهلا بالعالم</h1>,
document.getElementById('root')
);
تعتمد React أيضًا على requestAnimationFrame
(حتى في بيئات الاختبار). تستطيع استخدام الحزمة raf
كما يلي:
import 'raf/polyfill';
انظر أيضًا
- واجهة برمجة التطبيق (API) ذات المستوى الأعلى في React
- الصنف React.Component
- الكائن ReactDOM
- الكائن ReactDOMServer
- عناصر DOM
- الأحداث المصطنعة (Synthetic Events)
- أدوات الاختبار
- التصيير السطحي (Shallow Rendering)
- مصير الاختبار (Test Renderer)