JSX Olmadan React

JSX, React’ı kullanmak için şart değildir.

JSX bizlere sadece yazım kolaylıkları sağlar. JSX ile yapabileceğiniz herhangi bir şeyi düz JavaScript ile yapılabiliriz.

Örneğin, bu kod JSX ile yazılmıştır:

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

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

Yukarıdaki kod, JSX kullanmayan bu koda derlenebilir:

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

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

JSX’in JavaScript’e dönüştürülmesiyle ilgili daha fazla örnek görmek istiyorsanız, online Babel derleyicisini deneyebilirsiniz.

Sürekli React.createElement yazmaktan sıkıldıysak, bir kısaltma kullanmak mantıklı olacaktır:

const e = React.createElement;

ReactDOM.render(
  e('div', null, 'Merhaba Dünya'),
  document.getElementById('root')
);

Bu kısa formu React.createElement için kullanırsanız, JSX olmadan React’i kullanmak elverişli olabilir.

Alternatif olarak, daha kısa bir syntax sunan react-hyperscript ve hyperscript-helpers gibi projelere başvurabilirsiniz.

Sıradaki Gelişmiş Kılavuz: Fragmentler