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 والتي تُوفِّر لنا صياغة مُختصرة أكثر.