JSX-siz React

React işlətmək üçün JSX quraşdırmaq tələb olunmur. Yaranma mühitində kompilyasiya prosesi quraşdırmaq istəmədikdə React-i JSX-siz işlətmək əlverişlidir.

JSX elementləri React.createElement(component, props, ...children) funksiyası üçün asan sintaksisdir. Bu səbəbdən, JSX-də mümkün olan bütün əməliyyatlar, sadə JavaScript ilə yazıla bilər.

Məsələn, JSX-də yazılmış kod:

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

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

JSX işlətməyən bu koda kompilyasiya olunur:

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

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

JSX-in JavaScript-ə çevrilməsi haqqında əlavə nümunələr üçün onlayn Babel kompilyatorundan istifadə edə bilərsiniz.

Təmin olunan komponent mətn, React.Component-in alt sinfi və ya sadə funksiya ola bilər.

React.createElement ifadəsini çox yazmaqdan bezmisinizsə bu funksiyanı qısa adlı dəyişənə təyin edə bilərsiniz:

const e = React.createElement;

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

React.createElement funksiyasını qısaldılmış formada istifadə etmək React-i JSX-siz işlətmək üçün əlverişli ola bilər.

Alternativ olaraq, terser sintaksisi təmin edən react-hyperscript və hyperscript-helpers kimi cəmiyyət layihələrindən istifadə edə bilərsiniz.