React JSX nélkül

Nem kötelező a JSX-et választani, ha Reactet használsz. A React JSX nélkül különösen hasznos, ha nem akarsz külön fordítási lépést létrehozni a build környezetedben.

Minden egyes JSX elem csak egy rövidítés a React.createElement(component, props, ...children) metódus hívására. Így, mindent amit JSX-szel le tudsz írni, meg tudod csinálni JSX nélkül is, sima JavaScriptet használva.

Például, ez a JSX-szet használó kódrészlet:

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" />);

átírható a következő, JSX-szet nem használó kódra:

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

Próbáld ki az online Babel fordítót, ha szeretnél több példát látni rá, hogyan alakítjuk át a JSXet JavaScriptté.

A komponens megadható sztringként, a React.Component alosztályaként vagy egy sima függvényként.

Ha úgy érzed, hogy túl időigényes mindig kigépelni a React.createElement-et, egy gyakori megoldás, a függvény egy rövidítéshez rendelése:

const e = React.createElement;

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

A React.createElement-nek ezt a rövidített formáját használva, már sokkal kényelmesebb React kódot írni, még JSX nélkül is.

Ha inkább más alternatív megoldást keresel, nézz bele a közösségi projektbe mint amilyen a react-hyperscript és a hyperscript-helpers amik segíthetnek tömörebb kódot írni.