From 7b280f8cac13ed0ba6a2c08c805e61288f2acf93 Mon Sep 17 00:00:00 2001 From: Kurzdor Date: Thu, 28 Feb 2019 02:29:36 +0200 Subject: [PATCH 1/4] Added translation for "React without JSX" section Fix after broken pull requests --- content/docs/nav.yml | 2 +- content/docs/react-without-jsx.md | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) 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..21a5099b0 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -1,14 +1,14 @@ --- 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 { @@ -23,7 +23,7 @@ ReactDOM.render( ); ``` -can be compiled to this code that does not use JSX: +Його можна так переписати, щоб не використовувати його: ```js class Hello extends React.Component { @@ -38,11 +38,11 @@ ReactDOM.render( ); ``` -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; @@ -53,7 +53,7 @@ ReactDOM.render( ); ``` -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), які пропонують більш короткий синтаксис. From ad235cfe0271b27f99aa8147c3c1470f9c7b6810 Mon Sep 17 00:00:00 2001 From: Kurzdor Date: Thu, 28 Feb 2019 21:52:08 +0200 Subject: [PATCH 2/4] fix: fixes typos after @liaschynskyi review --- content/docs/react-without-jsx.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 21a5099b0..926faa221 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -4,9 +4,9 @@ title: React без JSX permalink: docs/react-without-jsx.html --- -JSX не є вимогою для роботи з React. Використання React без JSX є найбільш зручним коли ви не бажаєте налаштовувати компіляцію в вашому середовищі збірки. +JSX не є вимогою для роботи з React. Використання React без JSX є найзручнішим тоді, коли ви не бажаєте налаштовувати компіляцію у вашому середовищі збірки. -Кожен JSX-елемент являє собой "синтаксичний цукор" для виклику `React.createElement(component, props, ...children)`. Отже, все що ви можете зробити з JSX, може також бути виконаним на чистому JavaScript. +Кожен JSX-елемент являє собой "синтаксичний цукор" для виклику `React.createElement(component, props, ...children)`. Отже, все що можна зробити за допомогою JSX, може також бути виконаним на чистому JavaScript. Наприклад, ось код на JSX: @@ -23,7 +23,7 @@ ReactDOM.render( ); ``` -Його можна так переписати, щоб не використовувати його: +Його можна переписати таким чином, щоб не використовувати JSX: ```js class Hello extends React.Component { @@ -40,9 +40,9 @@ ReactDOM.render( Якщо ви зацікавлені в інших прикладах того, як JSX компілюєтья в JavaScript-код, спробуйте [онлайн Babel-компілятор](babel://jsx-simple-example). -Компонент може бути представлений в виді рядку, як класс-спадкоємець `React.Component` або в виді звичайної функції для компонентів без стану. +Компонент може бути представлений в виді рядку, як підклас `React.Component` або в вигляді звичайної функції для компонентів без стану. -Якщо вас утомлює печатання `React.createElement`, то поширеною практикою є створення "скорочення": +Якщо вас втомлює печатання `React.createElement`, поширеною практикою є створення "скорочення": ```js const e = React.createElement; @@ -55,5 +55,5 @@ ReactDOM.render( Якщо ви використаєте дане скорочення для `React.createElement`, то робота з React без JSX буде такою ж зручною. -Також, ви можете ознайомитися з іншими проектами, як [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) і [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), які пропонують більш короткий синтаксис. +Також ви можете ознайомитися з іншими проектами, як [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) і [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), які пропонують більш короткий синтаксис. From 4e4cc50511d94be1f0e2a8dc3749d143f96a2d74 Mon Sep 17 00:00:00 2001 From: Kurzdor Date: Tue, 5 Mar 2019 23:26:59 +0200 Subject: [PATCH 3/4] fix: fixes after @klymenkoo review --- content/docs/react-without-jsx.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 926faa221..d47e67615 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -13,42 +13,42 @@ JSX не є вимогою для роботи з React. Використанн ```js class Hello extends React.Component { render() { - return
Hello {this.props.toWhat}
; + return
Привіт, {this.props.toWhat}
; } } ReactDOM.render( - , + , document.getElementById('root') ); ``` -Його можна переписати таким чином, щоб не використовувати 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') ); ``` -Якщо ви зацікавлені в інших прикладах того, як JSX компілюєтья в JavaScript-код, спробуйте [онлайн Babel-компілятор](babel://jsx-simple-example). +Якщо ви зацікавлені в інших прикладах того, як JSX компілюється в JavaScript-код, спробуйте [онлайн Babel-компілятор](babel://jsx-simple-example). -Компонент може бути представлений в виді рядку, як підклас `React.Component` або в вигляді звичайної функції для компонентів без стану. +Компонент може бути представлений у вигляді рядку, як підклас `React.Component` або у вигляді звичайної функції для компонентів без стану. -Якщо вас втомлює печатання `React.createElement`, поширеною практикою є створення "скорочення": +Якщо вас втомлює написання `React.createElement`, поширеною практикою є створення "скорочення": ```js const e = React.createElement; ReactDOM.render( - e('div', null, 'Hello World'), + e('div', null, 'Привіт, світе'), document.getElementById('root') ); ``` From a35db70541913bd8b32501ab21787ebc22f9c860 Mon Sep 17 00:00:00 2001 From: Kurzdor Date: Sat, 9 Mar 2019 15:03:47 +0200 Subject: [PATCH 4/4] fix: fix typos --- content/docs/react-without-jsx.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index d47e67615..ea2db8c1b 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -6,7 +6,7 @@ permalink: docs/react-without-jsx.html JSX не є вимогою для роботи з React. Використання React без JSX є найзручнішим тоді, коли ви не бажаєте налаштовувати компіляцію у вашому середовищі збірки. -Кожен JSX-елемент являє собой "синтаксичний цукор" для виклику `React.createElement(component, props, ...children)`. Отже, все що можна зробити за допомогою JSX, може також бути виконаним на чистому JavaScript. +Кожен JSX-елемент являє собою "синтаксичний цукор" для виклику `React.createElement(component, props, ...children)`. Отже, все що можна зробити за допомогою JSX, може також бути виконаним на чистому JavaScript. Наприклад, ось код на JSX: @@ -42,7 +42,7 @@ ReactDOM.render( Компонент може бути представлений у вигляді рядку, як підклас `React.Component` або у вигляді звичайної функції для компонентів без стану. -Якщо вас втомлює написання `React.createElement`, поширеною практикою є створення "скорочення": +Якщо вас втомлює написання `React.createElement`, поширеною практикою є призначення "скорочення": ```js const e = React.createElement;