React بدون JSX

لا تُعد صياغة 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 الرسمي.