{"componentChunkName":"component---src-templates-docs-js","path":"/docs/react-without-jsx.html","result":{"data":{"markdownRemark":{"html":"

JSX не є вимогою для роботи з React. Використання React без JSX є найзручнішим тоді, коли ви не бажаєте налаштовувати компіляцію у вашому середовищі збірки.

\n

Кожен JSX-елемент являє собою “синтаксичний цукор” для виклику React.createElement(component, props, ...children). Отже, все що можна зробити за допомогою JSX, може також бути виконаним на чистому JavaScript.

\n

Наприклад, ось код на JSX:

\n

class Hello extends React.Component {\n  render() {\n    return <div>Привіт,  {this.props.toWhat}</div>;\n  }\n}\n\nReactDOM.render(\n  <Hello toWhat=\"світе\" />,\n  document.getElementById('root')\n);

\n

Його можна переписати таким чином, що JSX не буде використовуватися:

\n

class Hello extends React.Component {\n  render() {\n    return React.createElement('div', null, `Привіт, ${this.props.toWhat}`);\n  }\n}\n\nReactDOM.render(\n  React.createElement(Hello, {toWhat: 'світе'}, null),\n  document.getElementById('root')\n);

\n

Якщо ви зацікавлені в інших прикладах того, як JSX компілюється в JavaScript-код, спробуйте онлайн Babel-компілятор.

\n

Компонент може бути представлений у вигляді рядку, як підклас React.Component або у вигляді звичайної функції.

\n

Якщо вас втомлює написання React.createElement, поширеною практикою є призначення “скорочення”:

\n

const e = React.createElement;\n\nReactDOM.render(\n  e('div', null, 'Привіт, світе'),\n  document.getElementById('root')\n);

\n

Якщо ви використаєте дане скорочення для React.createElement, то робота з React без JSX буде такою ж зручною.

\n

Також ви можете ознайомитися з іншими проектами, як react-hyperscript і hyperscript-helpers, які пропонують більш короткий синтаксис.

","frontmatter":{"title":"React без JSX","next":null,"prev":null},"fields":{"path":"content/docs/react-without-jsx.md","slug":"docs/react-without-jsx.html"}}},"pageContext":{"slug":"docs/react-without-jsx.html"}},"staticQueryHashes":[]}