diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 298b7b68e..2aed48e4c 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -62,7 +62,7 @@ - id: react-without-es6 title: React Without ES6 - id: react-without-jsx - title: React Without JSX + title: React без JSX - id: reconciliation title: Reconciliation - id: refs-and-the-dom diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 85cdba45f..ea2db8c1b 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -1,59 +1,59 @@ --- id: react-without-jsx -title: React Without JSX +title: React без JSX permalink: docs/react-without-jsx.html --- -JSX is not a requirement for using React. Using React without JSX is especially convenient when you don't want to set up compilation in your build environment. +JSX не є вимогою для роботи з React. Використання React без JSX є найзручнішим тоді, коли ви не бажаєте налаштовувати компіляцію у вашому середовищі збірки. -Each JSX element is just syntactic sugar for calling `React.createElement(component, props, ...children)`. So, anything you can do with JSX can also be done with just plain JavaScript. +Кожен JSX-елемент являє собою "синтаксичний цукор" для виклику `React.createElement(component, props, ...children)`. Отже, все що можна зробити за допомогою JSX, може також бути виконаним на чистому JavaScript. -For example, this code written with JSX: +Наприклад, ось код на JSX: ```js class Hello extends React.Component { render() { - return
Hello {this.props.toWhat}
; + return
Привіт, {this.props.toWhat}
; } } ReactDOM.render( - , + , document.getElementById('root') ); ``` -can be compiled to this code that does not use JSX: +Його можна переписати таким чином, що JSX не буде використовуватися: ```js class Hello extends React.Component { render() { - return React.createElement('div', null, `Hello ${this.props.toWhat}`); + return React.createElement('div', null, `Привіт, ${this.props.toWhat}`); } } ReactDOM.render( - React.createElement(Hello, {toWhat: 'World'}, null), + React.createElement(Hello, {toWhat: 'світе'}, null), document.getElementById('root') ); ``` -If you're curious to see more examples of how JSX is converted to JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example). +Якщо ви зацікавлені в інших прикладах того, як JSX компілюється в JavaScript-код, спробуйте [онлайн Babel-компілятор](babel://jsx-simple-example). -The component can either be provided as a string, or as a subclass of `React.Component`, or a plain function for stateless components. +Компонент може бути представлений у вигляді рядку, як підклас `React.Component` або у вигляді звичайної функції для компонентів без стану. -If you get tired of typing `React.createElement` so much, one common pattern is to assign a shorthand: +Якщо вас втомлює написання `React.createElement`, поширеною практикою є призначення "скорочення": ```js const e = React.createElement; ReactDOM.render( - e('div', null, 'Hello World'), + e('div', null, 'Привіт, світе'), document.getElementById('root') ); ``` -If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without JSX. +Якщо ви використаєте дане скорочення для `React.createElement`, то робота з React без JSX буде такою ж зручною. -Alternatively, you can refer to community projects such as [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) and [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers) which offer a terser syntax. +Також ви можете ознайомитися з іншими проектами, як [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) і [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), які пропонують більш короткий синтаксис.