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

المراجعة الحالية بتاريخ 23:42، 3 نوفمبر 2020

لا تُعد صياغة JSX ضرورية لاستخدام React، حيث يكون استخدام React بدون JSX مناسبًا بشكلٍ خاص عندما لا ترغب بإعداد مرحلة التصريف في بيئة البناء لديك.

يُعتبَر كل عنصر JSX تجميلًا من ناحية الصياغة بدل استدعاء التابع ‎React.createElement(component, props, ...children)‎، لذلك يُمكنك فعل أي شيء باستخدام JavaScript بدل JSX.

على سبيل المثال تُكتب هذه الشيفرة باستخدام JSX على الشكل التالي:

class Hello extends React.Component {
  render() {
    return <div>أهلًا بـ {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="العالم" />,
  document.getElementById('root')
);

تُصرَّف هذه الشيفرة إلى الشيفرة التالية التي لا تستخدم JSX:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `أهلًا بـ ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'العالم'}, null),
  document.getElementById('root')
);

إن كنت مهتمًا برؤية المزيد من الأمثلة حول كيفية تحويل JSX إلى JavaScript، فبإمكانك تجربة مُصرِّف Babel على الإنترنت.

يُمكِن تزويد المُكوّن كسلسلة نصية، أو كصنف فرعي من React.Component، أو كدالة مُجرَّدة.

إن تعبت من كثرة كتابة React.Component، فيمكنك اختصارها على النحو التالي:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'أهلًا بالعالم'),
  document.getElementById('root')
);

إن استخدمتَ هذه الصيغة المختصرة لأجل React.createElement فسيكون من المناسب تمامًا استخدام React بدون JSX.

تستطيع الرجوع بدل ذلك إلى مشاريع مجتمع React مثل react-hyperscript و hyperscript-helpers والتي تُوفِّر صياغة أكثر اختصارا.

انظر أيضًا

مصادر

صفحة React بدون JSX في توثيق React الرسمي.

@@ سطر 1: / سطر 1: @@
 <noinclude>{{DISPLAYTITLE:React بدون JSX}}</noinclude>
+لا تُعد صياغة JSX ضرورية لاستخدام React، حيث يكون استخدام React بدون JSX مناسبًا بشكلٍ خاص عندما لا ترغب بإعداد مرحلة التصريف في بيئة البناء لديك.
+يُعتبَر كل عنصر JSX تجميلًا من ناحية الصياغة بدل استدعاء التابع ‎<code>React.createElement(component, props, ...children)‎</code>، لذلك يُمكنك فعل أي شيء باستخدام JavaScript بدل JSX.
+على سبيل المثال تُكتب هذه الشيفرة باستخدام JSX على الشكل التالي:<syntaxhighlight lang="javascript">
+class Hello extends React.Component {
+  render() {
+    return <div>أهلًا بـ {this.props.toWhat}</div>;
+  }
+}
+ReactDOM.render(
+  <Hello toWhat="العالم" />,
+  document.getElementById('root')
+);
+</syntaxhighlight>تُصرَّف هذه الشيفرة إلى الشيفرة التالية التي لا تستخدم JSX:<syntaxhighlight lang="javascript">
+class Hello extends React.Component {
+  render() {
+    return React.createElement('div', null, `أهلًا بـ ${this.props.toWhat}`);
+  }
+}
+ReactDOM.render(
+  React.createElement(Hello, {toWhat: 'العالم'}, null),
+  document.getElementById('root')
+);
+</syntaxhighlight>إن كنت مهتمًا برؤية المزيد من الأمثلة حول كيفية تحويل JSX إلى JavaScript، فبإمكانك تجربة [https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA مُصرِّف Babel على الإنترنت].
+يُمكِن تزويد المُكوّن كسلسلة نصية، أو كصنف فرعي من <code>React.Component</code>، أو كدالة مُجرَّدة.
+إن تعبت من كثرة كتابة <code>React.Component</code>، فيمكنك اختصارها على النحو التالي:<syntaxhighlight lang="javascript">
+const e = React.createElement;
+ReactDOM.render(
+  e('div', null, 'أهلًا بالعالم'),
+  document.getElementById('root')
+);
+</syntaxhighlight>إن استخدمتَ هذه الصيغة المختصرة لأجل <code>React.createElement</code> فسيكون من المناسب تمامًا استخدام React بدون JSX.
+تستطيع الرجوع بدل ذلك إلى مشاريع مجتمع React مثل <code>[https://github.com/mlmorg/react-hyperscript react-hyperscript]</code> و <code>[https://github.com/ohanhi/hyperscript-helpers hyperscript-helpers]</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/reconciliation|المطابقة (Reconciliation)]]
+* [[React/context|استخدام السياق (Context) في React]]
+* [[React/fragments|استخدام الأجزاء (Fragments) في React]]
+* [[React/portals|المداخل (Portals) في React]]
+* [[React/error boundaries|حدود الأخطاء]]
+* [[React/web components|مكونات الويب]]
+* [[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/react-without-jsx.html صفحة React بدون JSX في توثيق React الرسمي.]
+[[تصنيف:React]]
+[[تصنيف:React Advanced Guides]]