From a7a3937c56d767e0f1f8ea54d26eeabe531eddd4 Mon Sep 17 00:00:00 2001 From: ivaneroshkin Date: Sun, 17 Feb 2019 20:26:22 +0300 Subject: [PATCH 1/7] Russian translate virtual dom --- content/docs/faq-internals.md | 18 +++++++++--------- gatsby-config.js | 6 ++++-- src/components/CodeEditor/CodeEditor.js | 5 +++-- src/components/ErrorDecoder/ErrorDecoder.js | 4 ++-- src/components/LayoutFooter/Footer.js | 4 +--- .../TitleAndMetaTags/TitleAndMetaTags.js | 3 ++- src/pages/index.js | 3 ++- 7 files changed, 23 insertions(+), 20 deletions(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index da7f96be0..d4760bcdf 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -1,23 +1,23 @@ --- id: faq-internals -title: Virtual DOM and Internals +title: Виртуальный DOM permalink: docs/faq-internals.html layout: docs category: FAQ --- -### What is the Virtual DOM? {#what-is-the-virtual-dom} +### Что такое виртуальный DOM? {#what-is-the-virtual-dom} -The virtual DOM (VDOM) is a programming concept where an ideal, or "virtual", representation of a UI is kept in memory and synced with the "real" DOM by a library such as ReactDOM. This process is called [reconciliation](/docs/reconciliation.html). +Виртуальный DOM (VDOM) – это концепция программирования, в которой идеальное или “виртуальное” представление пользовательского интерфейса хранится в памяти и синхронизируется с “реальной” DOM библиотекой, такой как ReactDOM. Этот процесс называется [согласованием](/docs/reconciliation.html). -This approach enables the declarative API of React: You tell React what state you want the UI to be in, and it makes sure the DOM matches that state. This abstracts out the attribute manipulation, event handling, and manual DOM updating that you would otherwise have to use to build your app. +Этот подход включает декларативный API React: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, и он проверяет, что DOM соответствует этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые, в противном случае, пришлось бы использовать для построения приложения. -Since "virtual DOM" is more of a pattern than a specific technology, people sometimes say it to mean different things. In React world, the term "virtual DOM" is usually associated with [React elements](/docs/rendering-elements.html) since they are the objects representing the user interface. React, however, also uses internal objects called "fibers" to hold additional information about the component tree. They may also be considered a part of "virtual DOM" implementation in React. +Поскольку виртуальный DOM – это скорее шаблон, чем конкретная технология, люди иногда говорят, что это означает разные вещи. В мире React термин “виртуальный DOM” обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Однако React также использует внутренние объекты, называемые “файберами”, для хранения дополнительной информации о дереве компонентов. Их также можно считать частью реализации “виртуального DOM” в React. -### Is the Shadow DOM the same as the Virtual DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} +### Теневой DOM похож на виртуальный DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} -No, they are different. The Shadow DOM is a browser technology designed primarily for scoping variables and CSS in web components. The virtual DOM is a concept implemented by libraries in JavaScript on top of browser APIs. +Нет, они совсем разные. Теневой DOM – это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM – это концепция, реализованная библиотеками в JavaScript поверх API браузера. -### What is "React Fiber"? {#what-is-react-fiber} +### Что такое «React Fiber»? {#what-is-react-fiber} -Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM. [Read more](https://github.com/acdlite/react-fiber-architecture). +Файбер – новый механизм согласования в React 16, основная цель которого использовать постепенный рендеринг виртуального DOM. [Узнать больше](https://github.com/acdlite/react-fiber-architecture). diff --git a/gatsby-config.js b/gatsby-config.js index fd713328b..201866a00 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -8,10 +8,12 @@ module.exports = { siteMetadata: { - title: 'React: JavaScript-библиотека для создания пользовательских интерфейсов', + title: + 'React: JavaScript-библиотека для создания пользовательских интерфейсов', siteUrl: 'https://reactjs.org', rssFeedTitle: 'React', - rssFeedDescription: 'JavaScript-библиотека для создания пользовательских интерфейсов', + rssFeedDescription: + 'JavaScript-библиотека для создания пользовательских интерфейсов', }, mapping: { 'MarkdownRemark.frontmatter.author': 'AuthorYaml', diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index b271a8c79..d18e2a7d6 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -59,8 +59,9 @@ class CodeEditor extends Component { Не получилось загрузить Babel.

- Это может быть связано с блокировщиком рекламы. Если вы используете один из них, - добавьте адрес reactjs.org в белый список, чтобы примеры кода заработали. + Это может быть связано с блокировщиком рекламы. Если вы используете + один из них, добавьте адрес reactjs.org в белый список, чтобы примеры + кода заработали. ); } else if (error != null) { diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js index ce43b3646..ca2f679d8 100644 --- a/src/components/ErrorDecoder/ErrorDecoder.js +++ b/src/components/ErrorDecoder/ErrorDecoder.js @@ -69,8 +69,8 @@ function ErrorResult(props: {|code: ?string, msg: string|}) { if (!code) { return (

- Когда происходит ошибка, вы получите ссылку на эту страницу. - На ней вы увидите полный текст конкретной ошибки. + Когда происходит ошибка, вы получите ссылку на эту страницу. На ней вы + увидите полный текст конкретной ошибки.

); } diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index 480d48a4c..1d79e0cd3 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -131,9 +131,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( Дополнительно Введение Блог - - Благодарности - + Благодарности - JavaScript-библиотека для создания пользовательских интерфейсов + JavaScript-библиотека для создания пользовательских + интерфейсов

Date: Mon, 18 Feb 2019 20:40:44 +0300 Subject: [PATCH 2/7] Fixed changes in other files --- gatsby-config.js | 6 ++---- src/components/CodeEditor/CodeEditor.js | 5 ++--- src/components/ErrorDecoder/ErrorDecoder.js | 4 ++-- src/components/LayoutFooter/Footer.js | 4 +++- src/components/TitleAndMetaTags/TitleAndMetaTags.js | 3 +-- src/pages/index.js | 3 +-- 6 files changed, 11 insertions(+), 14 deletions(-) mode change 100644 => 100755 gatsby-config.js mode change 100644 => 100755 src/components/CodeEditor/CodeEditor.js mode change 100644 => 100755 src/components/ErrorDecoder/ErrorDecoder.js mode change 100644 => 100755 src/components/LayoutFooter/Footer.js mode change 100644 => 100755 src/components/TitleAndMetaTags/TitleAndMetaTags.js mode change 100644 => 100755 src/pages/index.js diff --git a/gatsby-config.js b/gatsby-config.js old mode 100644 new mode 100755 index 201866a00..fd713328b --- a/gatsby-config.js +++ b/gatsby-config.js @@ -8,12 +8,10 @@ module.exports = { siteMetadata: { - title: - 'React: JavaScript-библиотека для создания пользовательских интерфейсов', + title: 'React: JavaScript-библиотека для создания пользовательских интерфейсов', siteUrl: 'https://reactjs.org', rssFeedTitle: 'React', - rssFeedDescription: - 'JavaScript-библиотека для создания пользовательских интерфейсов', + rssFeedDescription: 'JavaScript-библиотека для создания пользовательских интерфейсов', }, mapping: { 'MarkdownRemark.frontmatter.author': 'AuthorYaml', diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js old mode 100644 new mode 100755 index d18e2a7d6..b271a8c79 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -59,9 +59,8 @@ class CodeEditor extends Component { Не получилось загрузить Babel.

- Это может быть связано с блокировщиком рекламы. Если вы используете - один из них, добавьте адрес reactjs.org в белый список, чтобы примеры - кода заработали. + Это может быть связано с блокировщиком рекламы. Если вы используете один из них, + добавьте адрес reactjs.org в белый список, чтобы примеры кода заработали. ); } else if (error != null) { diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js old mode 100644 new mode 100755 index ca2f679d8..ce43b3646 --- a/src/components/ErrorDecoder/ErrorDecoder.js +++ b/src/components/ErrorDecoder/ErrorDecoder.js @@ -69,8 +69,8 @@ function ErrorResult(props: {|code: ?string, msg: string|}) { if (!code) { return (

- Когда происходит ошибка, вы получите ссылку на эту страницу. На ней вы - увидите полный текст конкретной ошибки. + Когда происходит ошибка, вы получите ссылку на эту страницу. + На ней вы увидите полный текст конкретной ошибки.

); } diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js old mode 100644 new mode 100755 index 1d79e0cd3..480d48a4c --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -131,7 +131,9 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => ( Дополнительно Введение Блог - Благодарности + + Благодарности + - JavaScript-библиотека для создания пользовательских - интерфейсов + JavaScript-библиотека для создания пользовательских интерфейсов

Date: Mon, 18 Feb 2019 20:55:01 +0300 Subject: [PATCH 3/7] Apply suggestions from code review Co-Authored-By: ivaneroshkin --- content/docs/faq-internals.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index d4760bcdf..000c65881 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -8,16 +8,16 @@ category: FAQ ### Что такое виртуальный DOM? {#what-is-the-virtual-dom} -Виртуальный DOM (VDOM) – это концепция программирования, в которой идеальное или “виртуальное” представление пользовательского интерфейса хранится в памяти и синхронизируется с “реальной” DOM библиотекой, такой как ReactDOM. Этот процесс называется [согласованием](/docs/reconciliation.html). +Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется [согласованием](/docs/reconciliation.html). -Этот подход включает декларативный API React: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, и он проверяет, что DOM соответствует этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые, в противном случае, пришлось бы использовать для построения приложения. +Этот подход включает декларативный API React: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, а далее он проверяет, что DOM соответствует этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. -Поскольку виртуальный DOM – это скорее шаблон, чем конкретная технология, люди иногда говорят, что это означает разные вещи. В мире React термин “виртуальный DOM” обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Однако React также использует внутренние объекты, называемые “файберами”, для хранения дополнительной информации о дереве компонентов. Их также можно считать частью реализации “виртуального DOM” в React. +Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, люди иногда говорят, что это означает разные понятия. В мире React термин «виртуальный DOM» обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. ### Теневой DOM похож на виртуальный DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} -Нет, они совсем разные. Теневой DOM – это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM – это концепция, реализованная библиотеками в JavaScript поверх API браузера. +Нет, они совсем разные. Теневой DOM (Shadow DOM) — это браузерная технология, предназначенная в основном для определения переменных и CSS в веб-компонентах. Виртуальный DOM – это концепция, реализованная библиотеками в JavaScript поверх API браузера. ### Что такое «React Fiber»? {#what-is-react-fiber} -Файбер – новый механизм согласования в React 16, основная цель которого использовать постепенный рендеринг виртуального DOM. [Узнать больше](https://github.com/acdlite/react-fiber-architecture). +Fiber – новый механизм согласования в React 16, основная цель которого использовать постепенный рендеринг виртуального DOM. [Узнать больше](https://github.com/acdlite/react-fiber-architecture). From ab7d9b9d5d4bae33b2abc2c793b5a630059c960b Mon Sep 17 00:00:00 2001 From: Heegiiny Date: Wed, 20 Feb 2019 16:18:17 +0300 Subject: [PATCH 4/7] Apply suggestions from code review Co-Authored-By: ivaneroshkin --- content/docs/faq-internals.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index 000c65881..6c0cd04d8 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -10,9 +10,9 @@ category: FAQ Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется [согласованием](/docs/reconciliation.html). -Этот подход включает декларативный API React: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, а далее он проверяет, что DOM соответствует этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. +Такой подход и делает API React декларативным: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, а он добивается, чтобы DOM соответствовал этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. -Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, люди иногда говорят, что это означает разные понятия. В мире React термин «виртуальный DOM» обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. +Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. ### Теневой DOM похож на виртуальный DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom} @@ -20,4 +20,4 @@ category: FAQ ### Что такое «React Fiber»? {#what-is-react-fiber} -Fiber – новый механизм согласования в React 16, основная цель которого использовать постепенный рендеринг виртуального DOM. [Узнать больше](https://github.com/acdlite/react-fiber-architecture). +Fiber – новый механизм согласования в React 16, основная цель которого сделать рендеринг виртуального DOM постепенным. [Узнать больше](https://github.com/acdlite/react-fiber-architecture). From e20f278b6747b11d43848d3a5fd492a97fec9efb Mon Sep 17 00:00:00 2001 From: Ivan Eroshkin Date: Fri, 22 Feb 2019 18:41:50 +0300 Subject: [PATCH 5/7] Update title --- content/docs/faq-internals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index 6c0cd04d8..f06621ce7 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -1,6 +1,6 @@ --- id: faq-internals -title: Виртуальный DOM +title: Виртуальный DOM и детали его реализации в React permalink: docs/faq-internals.html layout: docs category: FAQ From 388cf2129055343b775f5d5b13ff338b042bb446 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 20:06:27 +0300 Subject: [PATCH 6/7] Update content/docs/faq-internals.md Co-Authored-By: ivaneroshkin --- content/docs/faq-internals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index f06621ce7..ee382f862 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -10,7 +10,7 @@ category: FAQ Виртуальный DOM (VDOM) — это концепция программирования, в которой идеальное или «виртуальное» представление пользовательского интерфейса хранится в памяти и синхронизируется с «настоящим» DOM при помощи библиотеки, такой как ReactDOM. Этот процесс называется [согласованием](/docs/reconciliation.html). -Такой подход и делает API React декларативным: вы указываете React, в каком состоянии должен находиться пользовательский интерфейс, а он добивается, чтобы DOM соответствовал этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. +Такой подход и делает API React декларативным: вы указываете, в каком состоянии должен находиться пользовательский интерфейс, а React добивается, чтобы DOM соответствовал этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. From aa08fdb6b15df131c6b2149209b9135439a85b95 Mon Sep 17 00:00:00 2001 From: ANOTHER GUY Date: Tue, 26 Feb 2019 20:06:37 +0300 Subject: [PATCH 7/7] Update content/docs/faq-internals.md Co-Authored-By: ivaneroshkin --- content/docs/faq-internals.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/faq-internals.md b/content/docs/faq-internals.md index ee382f862..0b12f0927 100644 --- a/content/docs/faq-internals.md +++ b/content/docs/faq-internals.md @@ -12,7 +12,7 @@ category: FAQ Такой подход и делает API React декларативным: вы указываете, в каком состоянии должен находиться пользовательский интерфейс, а React добивается, чтобы DOM соответствовал этому состоянию. Это абстрагирует манипуляции с атрибутами, обработку событий и ручное обновление DOM, которые в противном случае пришлось бы использовать при разработке приложения. -Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с [рендерингом элементов](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. +Поскольку «виртуальный DOM» – это скорее паттерн, чем конкретная технология, этим термином иногда обозначают разные понятия. В мире React «виртуальный DOM» обычно ассоциируется с [React-элементами ](/docs/rendering-elements.html), поскольку они являются объектами, представляющими пользовательский интерфейс. Тем не менее, React также использует внутренние объекты, называемые «волокнами» (fibers), чтобы хранить дополнительную информацию о дереве компонентов. Их также можно считать частью реализации «виртуального DOM» в React. ### Теневой DOM похож на виртуальный DOM? {#is-the-shadow-dom-the-same-as-the-virtual-dom}