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

JSX-siz React

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

React işlətmək üçün JSX quraşdırmaq tələb olunmur. Yaranma mühitində kompilyasiya prosesi quraşdırmaq istəmədikdə React-i JSX-siz işlətmək əlverişlidir.

JSX elementləri React.createElement(component, props, ...children) funksiyası üçün asan sintaksisdir. Bu səbəbdən, JSX-də mümkün olan bütün əməliyyatlar, sadə JavaScript ilə yazıla bilər.

Məsələn, JSX-də yazılmış kod:

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

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

JSX işlətməyən bu koda kompilyasiya olunur:

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

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

JSX-in JavaScript-ə çevrilməsi haqqında əlavə nümunələr üçün onlayn Babel kompilyatorundan istifadə edə bilərsiniz.

Təmin olunan komponent mətn, React.Component-in alt sinfi və ya sadə funksiya ola bilər.

React.createElement ifadəsini çox yazmaqdan bezmisinizsə bu funksiyanı qısa adlı dəyişənə təyin edə bilərsiniz:

const e = React.createElement;

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

React.createElement funksiyasını qısaldılmış formada istifadə etmək React-i JSX-siz işlətmək üçün əlverişli ola bilər.

Alternativ olaraq, terser sintaksisi təmin edən react-hyperscripthyperscript-helpers kimi cəmiyyət layihələrindən istifadə edə bilərsiniz.

Is this page useful?Bu səhifəni redaktə edin