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

@@ سطر 30: / سطر 30: @@
 </syntaxhighlight>إن كنت مهتمًا برؤية المزيد من الأمثلة حول كيفية تحويل JSX إلى JavaScript، فبإمكانك تجربة [https://babeljs.io/repl/#?presets=react&code_lz=GYVwdgxgLglg9mABACwKYBt1wBQEpEDeAUIogE6pQhlIA8AJjAG4B8AEhlogO5xnr0AhLQD0jVgG4iAXyJA مُصرِّف Babel على الإنترنت].
-يُمكِن تزويد المُكوّن كسلسلة نصية، أو كصنف فرعي من <code>React.Component</code>، أو كدالة مُجرَّدة من أجل المُكوّنات بدون الحالة.
+يُمكِن تزويد المُكوّن كسلسلة نصية، أو كصنف فرعي من <code>React.Component</code>، أو كدالة مُجرَّدة.
-إن تعبت من كثرة كتابة <code>React.Component</code> فمن الأساليب الشائعة هي الطريقة المختصرة التالية:<syntaxhighlight lang="javascript">
+إن تعبت من كثرة كتابة <code>React.Component</code>، فيمكنك اختصارها على النحو التالي:<syntaxhighlight lang="javascript">
 const e = React.createElement;
@@ سطر 42: / سطر 42: @@
 </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 مثل <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 بالتفصيل]]