JSX үгүй React

JSX нь React-д заавал шаардлагатай биш. React-г JSX-гүй ашиглах нь build орчинд компайл байршуулах сонирхолгүй бол онцгойлон тохиримжтой юм.

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 compiler-г туршиж үзэх боломжтой.

Компонент нь текст, эсвэл React.Component-н хүүхэд класс, эсвэл төлөвгүй компонентын энгийн функц гээд аль ч байж болно.

React.createElement-г байнга ашиглах нь хүндрэлтэй байвал, нэг түгээмэл арга бол товчлолт ашиглах:

const e = React.createElement;

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

Хэрвээ React.createElement-д товчлолт ашиглавал, React-г JSX-гүй ашиглахад маш их хялбар болох юм.

Өөрөөр react-hyperscript болон hyperscript-helpers зэрэг илүү тохиромжтой синтакс санал болгож буй прожектуудыг анхаарч үзэж болно.