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>;
  }
}

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

JSX ашиглаагүй дараах кодтой хөрвүүлэгдэх боломжтой:

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

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

Хэрвээ JSX хэрхэн JavaScript-руу хөрвүүлэгдсэн талаар илүү жишээ хархаар сонирхож байвал онлайн Babel compiler-г туршиж үзэх боломжтой.

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

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

const e = React.createElement;

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

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

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