عرض مصدر React/web components

<noinclude>{{DISPLAYTITLE:مكونات الويب في React}}</noinclude>
إنّ مكوّنات React و[https://developer.mozilla.org/en-US/docs/Web/Web_Components مكوّنات الويب] مبنية لحل مشاكل مختلفة. حيث تُزوِّدنا مكوّنات الويب بتغليف قوي لمكوّنات قابلة لإعادة الاستخدام، بينما تُزوِّدنا مكوّنات React بمكتبة تصريحات تُبقي DOM على تزامن مع بياناتنا. يكون هذا الهدفان متكاملين، وكمُطوّر لك حرية استخدام React في مكوّنات الويب لديك، أو استخدام مكوّنات الويب في React أو كليهما معًا.

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

== استخدام مكوّنات الويب في React ==
<syntaxhighlight lang="javascript">
class HelloMessage extends React.Component {
  render() {
    return <div>أهلًا <x-search>{this.props.name}</x-search>!</div>;
  }
}
</syntaxhighlight>'''ملاحظة:''' تعرض مكوّنات الويب عادة واجهة برمجة تطبيقات (API) إلزاميّة. على سبيل المثال قد يُعرِّض مكوّن الويب <code>video</code> الدالتين <code>play()</code>‎ و <code>pause()‎</code>، وللوصول إلى واجهة برمجة التطبيقات الإلزامية لمكوّنات الويب ستحتاج إلى استخدام مرجع للتفاعل مع عقدة DOM مباشرةً. إن كنت تستخدم مكوّنات ويب من طرف ثالث فالحل الأمثل هو كتابة مكوّن React يسلك سلوك غلاف لمكوّنات الويب لديك.

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

إحدى الأمور التي من الشائع الخطأ بها هي استخدام مكوّنات الويب للخاصيّة <code>class</code> بدلًا من <code>className</code>:<syntaxhighlight lang="javascript">
function BrickFlipbox() {
  return (
    <brick-flipbox class="demo">
      <div>الواجهة الأمامية</div>
      <div>الواجهة الخلفية</div>
    </brick-flipbox>
  );
}
</syntaxhighlight>

== استخدام React في مكوّنات الويب لديك ==
<syntaxhighlight lang="javascript">
class XSearch extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('span');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);

    const name = this.getAttribute('name');
    const url = 'https://www.google.com/search?q=' + encodeURIComponent(name);
    ReactDOM.render(<a href={url}>{name}</a>, mountPoint);
  }
}
customElements.define('x-search', XSearch);
</syntaxhighlight>'''ملاحظة:''' لن تعمل هذه الشيفرة إن نقلت الأصناف باستخدام Babel. انظر إلى هذه المشكلة [https://github.com/w3c/webcomponents/issues/587 من هنا]. يجب عليك تضمين <code>[https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs custom-elements-es5-adapter]</code> قبل تحميل مكوّنات الويب لإصلاح هذه المشكلة.

== انظر أيضًا ==
* [[React/jsx in depth|شرح JSX بالتفصيل]]
* [[React/static type checking|التحقق من الأنواع الثابتة]]
* [[React/typechecking with proptypes|التحقق من الأنواع باستخدام PropTypes]]
* [[React/refs and the dom|استخدام المراجع مع DOM]]
* [[React/uncontrolled components|المكونات غير المضبوطة]]
* [[React/optimizing performance|تحسين الأداء]]
* [[React/react without es6|React بدون ES6]]
* [[React/react without jsx|React بدون JSX]]
* [[React/reconciliation|المطابقة (Reconciliation)]]
* [[React/context|استخدام السياق (Context) في React]]
* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
* [[React/portals|المداخل (Portals) في React]]
* [[React/error boundaries|حدود الأخطاء]]
* [[React/higher order components|المكونات ذات الترتيب الأعلى]]
* [[React/forwarding refs|تمرير المراجع]]
* [[React/render props|خاصيات التصيير]]
* [[React/integrating with other libraries|تكامل React مع المكتبات الأخرى]]
* [[React/accessibility|سهولة الوصول]]
* [[React/code splitting|تقسيم الشيفرة]]
* [[React/strict mode|الوضع الصارم (Strict Mode)]]

== مصادر==
*[https://reactjs.org/docs/web-components.html صفحة مكونات الويب في توثيق React الرسمي].
[[تصنيف:React]]
[[تصنيف:React Advanced Guides]]