We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

React Without JSX

These docs are old and won’t be updated. Go to react.dev for the new React docs.

JSX bukan persyaratan untuk menggunakan React. Menggunakan React tanpa JSX sangat cocok ketika Anda tidak ingin mengatur kompilasi di build environment Anda.

Setiap elemen hanyalah syntactic sugar untuk pemanggilan React.createElement(component, props, ...children). Jadi, apa pun yang dapat Anda lakukan dengan JSX juga dapat dilakukan hanya dengan JavaScript biasa.

Misalnya, kode yang ditulis dengan JSX berikut:

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

Dapat dikompilasi dengan kode dibawah ini untuk yang tidak menggunakan 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));

Jika Anda ingin tahu lebih lanjut untuk melihat banyak contoh tentang bagaimana JSX dikonversi ke JavaScript, Anda dapat mencobanya di the online Babel compiler.

Komponen dapat diberikan sebagai string, atau sebagai subkelas dari React.Component, atau fungsi murni untuk komponen stateless.

Jika Anda terlalu lelah mengetik React.createElement satu pola umum adalah dengan menggunakan pintasan:

const e = React.createElement;

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

Jika Anda menggunakan pintasan React.createElement, akan lebih mudah menggunakan React tanpa JSX.

Atau, Anda dapat merujuk ke proyek komunitas seperti react-hyperscript danhyperscript-helpers yang menawarkan terser syntax.

Is this page useful?Edit halaman ini