From d494564155ea0daa9a59aabed86173399104294d Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 09:31:28 +0400 Subject: [PATCH 1/9] =?UTF-8?q?React=20=D0=B1=D0=B5=D0=B7=20JSX?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/react-without-jsx.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 85cdba45f..4ff803d78 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -1,14 +1,15 @@ --- 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. + +Для примера -- этот кода написаный на JSX: -For example, this code written with JSX: ```js class Hello extends React.Component { @@ -23,7 +24,7 @@ ReactDOM.render( ); ``` -can be compiled to this code that does not use JSX: +может быть превращен в следующий код, который не использует JSX: ```js class Hello extends React.Component { @@ -38,11 +39,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 +54,6 @@ ReactDOM.render( ); ``` -If you use this shorthand form for `React.createElement`, it can be almost as convenient to use React without 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.createElement`, то использование React без JSX станет почти таким же удобным, как вы привыкли. +Кроме того, вы можете посмотреть на такие открытые проекты как [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) и [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), которые предлагают более краткий синтаксис. From b0151bf8a9491b83cae4d4ef5217c2553c3e85ee Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 09:35:53 +0400 Subject: [PATCH 2/9] Translate nav link --- content/docs/nav.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index ce5219f92..a2f0a67ef 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 From d6dda3a3567a56b054c62c583153d83ac0178c9f Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 09:40:06 +0400 Subject: [PATCH 3/9] Minor changes --- content/docs/react-without-jsx.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 4ff803d78..b36006509 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -6,9 +6,9 @@ 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: +Для примера -- этот код написаный на JSX: ```js @@ -41,7 +41,7 @@ ReactDOM.render( Если вас интересуют другие примеры того, как JSX превращается в JavaScript, вы можете попробовать [онлайн транспилятор Babel](babel://jsx-simple-example). -Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции для простых компонентов (без состояния). +Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции для компонентa без состояния. Если вас сильно утомляет печатать `React.createElement`, то типовым подходом является создание сокращения для этого: From cdf9af0f3b4bff9a7d6a08dc0fec32ca92a70810 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 11:45:07 +0400 Subject: [PATCH 4/9] Fix noticies --- 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 b36006509..b0eac07f4 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -4,17 +4,17 @@ 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: +Например, вот код с JSX: ```js class Hello extends React.Component { render() { - return
Hello {this.props.toWhat}
; + return
Привет, {this.props.toWhat}
; } } @@ -24,12 +24,12 @@ ReactDOM.render( ); ``` -может быть превращен в следующий код, который не использует 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}`); } } @@ -43,17 +43,17 @@ ReactDOM.render( Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции для компонентa без состояния. -Если вас сильно утомляет печатать `React.createElement`, то типовым подходом является создание сокращения для этого: +Если вас утомляет печатать `React.createElement`, то типовым подходом является создание сокращения для этого: ```js const e = React.createElement; ReactDOM.render( - e('div', null, 'Hello World'), + e('div', null, 'Привет, мир!'), document.getElementById('root') ); ``` -Если вы используете эту сокращенную форму для `React.createElement`, то использование React без JSX станет почти таким же удобным, как вы привыкли. +Если вы примените эту сокращенную форму для `React.createElement`, то использование React без JSX станет почти таким же удобным, как вы привыкли. Кроме того, вы можете посмотреть на такие открытые проекты как [`react-hyperscript`](https://github.com/mlmorg/react-hyperscript) и [`hyperscript-helpers`](https://github.com/ohanhi/hyperscript-helpers), которые предлагают более краткий синтаксис. From 2f98a5e17ed7dd4dafbdee196a669ca1cc4427b3 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 12:22:10 +0400 Subject: [PATCH 5/9] Correct some terms --- 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 b0eac07f4..78f7616d5 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -39,9 +39,9 @@ ReactDOM.render( ); ``` -Если вас интересуют другие примеры того, как JSX превращается в JavaScript, вы можете попробовать [онлайн транспилятор Babel](babel://jsx-simple-example). +Если вас интересуют другие примеры того, как JSX превращается в JavaScript, вы можете попробовать [онлайн комплилятор Babel](babel://jsx-simple-example). -Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции для компонентa без состояния. +Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции в случае компонента без состояния. Если вас утомляет печатать `React.createElement`, то типовым подходом является создание сокращения для этого: From 425aa946cae2c1a7dcf2d85af6b9da52a3b47370 Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 14:23:39 +0400 Subject: [PATCH 6/9] =?UTF-8?q?=D0=94=D0=BB=D1=8F=20=D1=80=D0=B0=D0=B1?= =?UTF-8?q?=D0=BE=D1=82=D1=8B=20=D1=81=20React?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/react-without-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 78f7616d5..b72b21c1c 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -4,7 +4,7 @@ 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. From 3014555fd0d70456bd6c1257664fc8e7338ba80a Mon Sep 17 00:00:00 2001 From: "Vasiliy Vanchuk (@vvscode)" Date: Wed, 13 Feb 2019 14:25:09 +0400 Subject: [PATCH 7/9] =?UTF-8?q?=D0=9F=D1=80=D0=BE=D0=B5=D0=BA=D1=82=D1=8B?= =?UTF-8?q?=20=D1=81=20=D0=BA=D0=BE=D1=80=D0=BE=D1=82=D0=BA=D0=B8=D0=BC=20?= =?UTF-8?q?=D1=81=D0=B8=D0=BD=D1=82=D0=B0=D0=BA=D1=81=D0=B8=D1=81=D0=BE?= =?UTF-8?q?=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/react-without-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index b72b21c1c..ee839a109 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -56,4 +56,4 @@ 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 fa8c23d1363fafb64c77d21e92b932fa0db95ba6 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 13 Feb 2019 15:06:11 +0400 Subject: [PATCH 8/9] Update content/docs/react-without-jsx.md Co-Authored-By: vvscode --- content/docs/react-without-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index ee839a109..821b12940 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -39,7 +39,7 @@ ReactDOM.render( ); ``` -Если вас интересуют другие примеры того, как JSX превращается в JavaScript, вы можете попробовать [онлайн комплилятор Babel](babel://jsx-simple-example). +Если вас интересуют другие примеры того, как JSX превращается в JavaScript, вы можете попробовать [онлайн-компилятор Babel](babel://jsx-simple-example). Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции в случае компонента без состояния. From df15aabbac4d480d52dbce40cf8591da6144b74c Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 13 Feb 2019 15:15:19 +0400 Subject: [PATCH 9/9] Update content/docs/react-without-jsx.md Co-Authored-By: vvscode --- content/docs/react-without-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md index 821b12940..0b3393861 100644 --- a/content/docs/react-without-jsx.md +++ b/content/docs/react-without-jsx.md @@ -43,7 +43,7 @@ ReactDOM.render( Компонент может быть представлен в виде строки, класса-наследника от `React.Component` или обычной функции в случае компонента без состояния. -Если вас утомляет печатать `React.createElement`, то типовым подходом является создание сокращения для этого: +Если вас утомляет печатать `React.createElement`, то распространённой практикой является создать сокращение: ```js const e = React.createElement;