React بدون JSX

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

كل عنصر من JSX هو فقط تجميل صياغي لمناداة الداله React.createElement(component, props, ...children). اذاً، أي شيء يمكن تطبيقه باستخدام JSX من الممكن ايضاً تطبيقه بإستخدام javascript.

كمثال، هذه الشيفرة مكتوبه باستخدام JSX:

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Hello toWhat="World" />);

وتصرف الى شيفرة على النحو التالي بدون JSX:

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));

إذا كنت مهتماً لرؤية المزيد من الامثلة عن كيفية تصريف شيفرة JSX الى javascript, فبإمكانك تجربة مصرف Babel على الإنترنت.

يمكن تزويد المكون كسلسلة نصية, أو كصنف فرعي من React.Component، أو كدالة مجردة من أجل المُكونات بدون الحالة.

إن تعبت من كثرة كتابة React.createElement، فمن الأساليب الشائعة هي الطريقة المختصرة التالية:

const e = React.createElement;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(e('div', null, 'Hello World'));

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

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