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

انظر أيضًا

• شرح JSX بالتفصيل
• التحقق من الأنواع الثابتة
• التحقق من الأنواع باستخدام PropTypes
• استخدام المراجع مع DOM
• المكونات غير المضبوطة
• تحسين الأداء
• React بدون ES6
• المطابقة (Reconciliation)
• استخدام السياق (Context) في React
• استخدام الأجزاء (Fragments) في React
• المداخل (Portals) في React
• حدود الأخطاء
• مكونات الويب
• المكونات ذات الترتيب الأعلى
• تمرير المراجع
• خاصيات التصيير
• تكامل React مع المكتبات الأخرى
• سهولة الوصول
• تقسيم الشيفرة
• الوضع الصارم (Strict Mode)

 مصادر

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