diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index d3c569401..53c0deb10 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -1,13 +1,13 @@
-
-
 <!--
+Прежде чем создавать пулреквест, пожалуйста, прочтите полностью правила перевода по ссылке ниже и поправьте свой перевод:
 
-Thank you for the PR! Contributors like you keep React awesome!
-
-Please see the Contribution Guide for guidelines:
+https://github.com/reactjs/ru.reactjs.org/blob/master/TRANSLATION.md
 
-https://github.com/reactjs/reactjs.org/blob/master/CONTRIBUTING.md
+ВНИМАНИЕ: 90% переводов страдают от одной и той же проблемы: нагромождения существительных.
+Пройдитесь по переводу и поправьте его *сейчас*, чтобы не тратить время на ревью.
 
-If your PR references an existing issue, please add the issue number below
+Пример «до»: «Объявление переменной и использование её в `if`-выражении это вполне рабочий вариант условного рендеринга.»
+Пример «после»: «Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент `if`-выражением.»
 
+Берегите глаголы!
 -->
diff --git a/README.md b/README.md
index c209cb36a..7b220693d 100644
--- a/README.md
+++ b/README.md
@@ -57,9 +57,9 @@ The documentation is divided into several sections with a different tone and pur
 
 ## Translation
 
-If you are interesting in translating `ru.reactjs.org`, please join the Crowdin.
+If you are interested in translating `ru.reactjs.org`, please see the current translation efforts at [isreacttranslatedyet.com](https://www.isreacttranslatedyet.com/).
 
-* [Crowdin - React](https://crowdin.com/project/react)
+If your language does not have a translation and you would like to create one, please follow the instructions at [reactjs.org Translations](https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation).
 
 ## Troubleshooting
 
diff --git a/TRANSLATION.md b/TRANSLATION.md
index fd0cf4edc..200d595f3 100644
--- a/TRANSLATION.md
+++ b/TRANSLATION.md
@@ -4,19 +4,33 @@
 
 Пожалуйста, используйте этот ишью, если вы хотите что-то перевести и узнать.
 
+## Оглавление
+
+* [Перевод на русский язык сайта reactjs.org](#Перевод-на-русский-язык-сайта-reactjsorg)
+  * [Оглавление](#Оглавление)
+  * [Общие правила](#Общие-правила)
+    * [Слово живое и мёртвое](#Слово-живое-и-мёртвое)
+  * [Универсальное руководство по стилю](#Универсальное-руководство-по-стилю)
+    * [Идентификаторы заголовков](#Идентификаторы-заголовков)
+    * [Текст в блоках кода](#Текст-в-блоках-кода)
+    * [Внешние ссылки](#Внешние-ссылки)
+  * [Соглашение по переводу (глоссарий)](#Соглашение-по-переводу-глоссарий)
+
 ## Общие правила
 
 - _Вы_ и его производные пишите с маленькой буквы
-- Всегда используйте букву `ё`
+- Всегда используйте букву `ё` (это легко соблюдать с помощью [данного npm-пакета](https://github.com/hcodes/eyo))
 - Используйте тире вместо дефиса (оно должно быть намного длиннее, чем дефис). Тире: `—`, дефис: `-`
 - Переводите комментарии в примерах кода, но не содержимое
 - Используйте терминологию [словаря «Веб-стандартов»](https://github.com/web-standards-ru/dictionary), если нет исходного варианта в таблице ниже
 - Ссылки на ресурсы (MDN, Wikipedia) должны вести на русскую версию, если есть соответствующий перевод.
 - Иностранные имена переводите с указанием оригинального имени в скобках: _Дэн Абрамов (Dan Abramov)_. При этом обязательно проверьте уже существующий перевод имени в [словаре имён «Веб-стандартов»](https://github.com/web-standards-ru/dictionary/blob/master/names.md)
+- Не переводите наименования компаний (Facebook, Airbnb), библиотек (Jest, Enzyme) и т.д.
+- Не переводите аббревиатуры (API, DOM, HOC, UI).
 - Исключайте отсылки на пол читателя (см. секцию 3 на [этой странице](http://www.un.org/ru/gender-inclusive-language/guidelines.shtml))
 - Названия статей и заголовки пишутся с одной заглавной буквы («Компоненты и пропсы», не «Компоненты и Пропсы»).
 
-## Слово живое и мёртвое
+### Слово живое и мёртвое
 
 Прежде чем переводить, почитайте пару страниц из «Слова живого и мёртвого» Норы Галь. Хотя бы эти две:
 
@@ -33,6 +47,11 @@
 * **Деревянно:** *будет рассказано*
 * **Живо:** *мы узнаем*
 
+**Предпочитайте простые слова (за исключением терминологии ниже):**
+
+* **Деревянно:** *демонстрирует*
+* **Живо:** *показывает*
+
 Чтобы избежать кальки, можно брать смысл предложения, а потом перефразировать так, как объясняли бы старшему коллеге. Если предложение звучит нелепо вслух, то его надо переписать. Например:
 
 **Оригинал:** *React has been designed from the start for gradual adoption, and you can use as little or as much React as you need.*
@@ -43,42 +62,207 @@
 
 Небольшие вольности в переводе допускаются, но только если они помогают передать смысл. Перевод не должен быть ни деревянным, ни фамильярным. Истина где-то посередине.
 
-## Соглашение по переводу
+## Универсальное руководство по стилю
+
+Описанные ниже правила пришли [из репозитория](https://github.com/reactjs/reactjs.org-translation/blob/master/style-guide.md), предписывающего стиль общий для **всех** языков, на которые переводится документация.
+
+### Идентификаторы заголовков
+
+Каждый заголовок имеет явный идентификатор:
+
+```md
+## Try React {#try-react}
+```
+
+**НЕ** переводите такие идентификаторы! Они используются для навигации. Изменение идентификатора неизбежно приведёт к поломке, если на документ ссылкаются извне, например так:
+
+```md
+Прочтите [главу для начинающих](/getting-started#try-react), чтобы узнать больше.
+```
+
+✅ Можно:
+
+```md
+## Попробуйте React {#try-react}
+```
+
+❌ НЕЛЬЗЯ:
+
+```md
+## Попробуйте React {#попробуйте-react}
+```
+
+Это сломает ссылку, приведённую в примере выше.
+
+### Текст в блоках кода
+
+Не переводите текст в блоках кода, кроме комментариев. А вот комментарии и текст в строках следует переводить, если они не относятся к коду.
+
+Пример:
+```js
+// Example
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ МОЖНО:
+
+```js
+// Пример
+const element = <h1>Hello, world</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+✅ ТОЖЕ МОЖНО:
+
+```js
+// Пример
+const element = <h1>Здравствуй, мир!</h1>;
+ReactDOM.render(element, document.getElementById('root'));
+```
+
+❌ НЕЛЬЗЯ:
+
+```js
+// Пример
+const element = <h1>Здравствуй, мир!</h1>;
+// "root" ссылается на идентификатор элемента.
+// Не переводите его!
+ReactDOM.render(element, document.getElementById('корень'));
+```
+
+❌ СОВСЕМ НЕЛЬЗЯ:
+
+```js
+// Пример
+пост элемент = <з1>Здравствуй, мир!</з1>;
+РеактДОМ.отрендери(элемент, документ.получиЭлементПоАйди('корень'));
+```
+
+### Внешние ссылки
+
+Если внешняя ссылка ведёт к статье на [MDN] или [Wikipedia], и там существует статья на русском языке, исправьте ссылку, чтобы она указывала на русский вариант, даже если он неполный или требует улучшения.
+
+[MDN]: https://developer.mozilla.org/en-US/
+[Wikipedia]: https://en.wikipedia.org/wiki/Main_Page
+
+Пример:
+
+```md
+React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object).
+```
+
+✅ OK:
+
+```md
+Элементы React [иммутабельны](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82).
+```
+
+Для ссылок, у которых нету языковых эквивалентов (Stack Overflow, видео на YouTube, и т. д.), просто оставьте оригинальный вариант как есть.
+
+## Соглашение по переводу (глоссарий)
+
+**Пожалуйста, поддерживайте глоссарий в алфавитном порядке.**
 
 | Оригинальный термин | Перевод |
 | ------------------ | ---------- |
+| API reference | справочник API |
 | array | массив |
 | arrow function | стрелочная функция |
+| attribute | атрибут |
+| batch | группа обновлений |
+| batching | группировка |
+| bind | привязка |
 | bug | баг, дефект |
 | bundler | бандлер |
 | callback | колбэк |
 | camelCase | *camelCase* |
+| child | дочерний |
+| child component | дочерний компонент |
+| class component | классовый компонент |
+| cleanup | сброс (*напр., сбрасываемый эффект, сбросить эффект, сбрасывающая функция*) |
+| code splitting | разделение кода |
+| codemod | codemod-скрипт |
+| commit | фиксация |
+| context | контекст |
 | (un)controlled component | (не)контролируемый компонент |
+| cross-cutting concerns | cквозная функциональность |
+| custom | пользовательский (*напр., пользовательские хуки*) |
 | debugging | отладка |
+| destructuring | деструктуризация |
+| development | разработка |
+| development mode | режим разработки |
+| developer tools | инструменты разработки |
+| display name | отображаемое имя |
 | DOM container | DOM-контейнер |
+| effect | эффект |
 | error | ошибка |
-| debugging | отладка |
+| error boundary | предохранитель |
+| escape hatch | лазейка (*напр., императивные лазейки*) |
+| fallback | запасной |
+| feature | возможность (*менее предпочтительный синоним: функциональность*) |
+| folder | папка |
 | framework | фреймворк |
-| functional component | функциональный компонент |
-| hook | хук |
+| function component | функциональный компонент |
+| helper | вспомогательный(ая); *напр., helper function — вспомогательная функция* |
+| Higher-Order Component(s) | Компонент(ы) высшего порядка |
+| hook | хук *(с маленькой буквы)* *(напр., хук эффекта, хук контекста)* |
+| incapsulation | инкапсуляция |
+| incapsulated | инкапсулированный |
 | key | ключ |
 | lazy initialization | ленивая инициализация |
 | library | библиотека |
+| lifecycle | жизненный цикл |
+| lifecycle method | метод жизненного цикла |
 | lifting state up | подъём состояния, поднимать состояние |
+| local state | внутреннее состояние |
 | lowercase | нижний регистр |
+| mixin | примесь |
 | mock | фиктивный |
 | (im)mutable | (им)мутабельный |
 | (im)mutability | (им)мутабельность |
+| (un)mount | (раз)монтирование |
 | mutate | мутировать |
+| native | нативный |
 | Note | Примечание |
+| online | онлайн |
+| online playground | онлайн-песочница |
 | paint | отрисовка, перерисовка |
-| props | пропсы |
-| reuse | повторное использование, переиспользование |
+| persistent | персистентность, персистентный |
+| phase | этап (*напр., этап рендеринга, этап фиксации*) |
+| prop | проп *(ед. ч.)* |
+| props | пропсы *(мн. ч.)* |
+| production | продакшен |
+| production mode | продакшен-режим |
 | React | React |
 | React element | React-элемент, элемент React |
 | reconciliation | согласование |
+| reducer | редюсер |
+| ref | реф *(ед. ч.)* |
+| refs | рефы *(мн. ч.)* |
+| ref forwarding | перенаправление рефа |
 | render(ing) | рендер, рендерить, отрендерить |
+| renderer | рендерер (*напр., поверхностный рендерер*) |
 | re-render(ing) | (по контексту) рендер, повторный рендер, последующий рендер, отрендерить снова |
-| ref | реф |
+| render prop | рендер-проп *(ед. ч.)* |
+| render props | рендер-пропсы *(мн. ч.)* |
+| reuse | повторное использование, переиспользование |
+| (previous/next) section | (предыдущая/следующая) глава *(только в разделе Основные понятия)* |
+| shallow | поверхностное (сравнение, равенство), поверхностный (рендеринг) |
+| side effect | побочный эффект |
+| snapshot | снимок |
 | state | состояние |
+| stateful component | компонент с состоянием |
+| stateless component | компонент без состояния |
+| suspense | задержка |
+| tag | тег |
 | template literals | шаблонные строки |
+| Tip | Совет |
+| TLDR | Вкратце |
+| Try it on CodePen | Посмотреть на CodePen |
+| tutorial | введение |
+| unidirectional data flow | однонаправленный поток данных |
+| UI | UI |
+| update | обновление |
+| user interface | интерфейс (добавляйте «пользовательский» только если по контексту непонятно) |
+| Warning | Предупреждение |
diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md
index ae2dc4979..ec30f30f3 100644
--- a/content/blog/2015-03-30-community-roundup-26.md
+++ b/content/blog/2015-03-30-community-roundup-26.md
@@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo
 
 Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :)
 
-<audio src="http://fdlyr.co/d/changelog/cdn.5by5.tv/audio/broadcasts/changelog/2015/changelog-149.mp3" controls="controls" style="width: 100%"></audio>
+<audio src="https://cdn.changelog.com/uploads/podcast/149/the-changelog-149.mp3" controls="controls" style="width: 100%"></audio>
 
 
 ## Hacker News {#hacker-news}
diff --git a/content/blog/2015-08-11-relay-technical-preview.md b/content/blog/2015-08-11-relay-technical-preview.md
index c574ccce2..65b1ac5fb 100644
--- a/content/blog/2015-08-11-relay-technical-preview.md
+++ b/content/blog/2015-08-11-relay-technical-preview.md
@@ -13,7 +13,7 @@ While React simplified the process of developing complex user-interfaces, it lef
 
 Declarative data-fetching means that Relay applications specify *what* data they need, not *how* to fetch that data. Just as React uses a description of the desired UI to manage view updates, Relay uses a data description in the form of GraphQL queries. Given these descriptions, Relay coalesces queries into batches for efficiency, manages error-prone asynchronous logic, caches data for performance, and automatically updates views as data changes.
 
-Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This colocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
+Relay is also component-oriented, extending the notion of a React component to include a description of what data is necessary to render it. This collocation allows developers to reason locally about their application and eliminates bugs such as under- or over-fetching data.
 
 Relay is in use at Facebook in production apps, and we're using it more and more because *Relay lets developers focus on their products and move fast*. It's working for us and we'd like to share it with the community.
 
diff --git a/content/blog/2018-09-10-introducing-the-react-profiler.md b/content/blog/2018-09-10-introducing-the-react-profiler.md
index 725a22076..7cb439e1f 100644
--- a/content/blog/2018-09-10-introducing-the-react-profiler.md
+++ b/content/blog/2018-09-10-introducing-the-react-profiler.md
@@ -140,7 +140,7 @@ It also shows that each time it rendered, it was the most "expensive" component
 
 To view this chart, either double-click on a component _or_ select a component and click on the blue bar chart icon in the right detail pane.
 You can return to the previous chart by clicking the "x" button in the right detail pane.
-You can aso double click on a particular bar to view more information about that commit.
+You can also double click on a particular bar to view more information about that commit.
 
 ![How to view all renders for a specific component](../images/blog/introducing-the-react-profiler/see-all-commits-for-a-fiber.gif)
 
diff --git a/content/community/conferences.md b/content/community/conferences.md
index 78f868d7f..62ac39b40 100644
--- a/content/community/conferences.md
+++ b/content/community/conferences.md
@@ -16,6 +16,11 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 January 31, 2019 in Tehran, Iran
 [Website](http://reactiran.com) - [Instagram](https://www.instagram.com/reactiran/)
 
+### Reactathon 2019 {#reactathon-2019}
+March 30-31, 2019 in San Francisco, USA
+
+[Website](https://www.reactathon.com/) - [Twitter](https://twitter.com/reactathon)
+
 ### App.js Conf 2019 {#appjs-conf-2019}
 April 4-5, 2019 in Kraków, Poland
 
@@ -31,11 +36,21 @@ May 23-24, 2019 in Paris, France
 
 [Website](https://www.react-europe.org) - [Twitter](https://twitter.com/ReactEurope) - [Facebook](https://www.facebook.com/ReactEurope) - [Videos](https://www.youtube.com/c/ReacteuropeOrgConf)
 
+### React Conf Armenia 2019 {#react-conf-am-19}
+May 25, 2019 in Yerevan, Armenia
+
+[Website](https://reactconf.am/) - [Twitter](https://twitter.com/ReactConfAM) - [Facebook](https://www.facebook.com/reactconf.am/) - [YouTube](https://www.youtube.com/c/JavaScriptConferenceArmenia) - [CFP](http://bit.ly/speakReact)
+
 ### React Norway 2019 {#react-norway-2019}
 June 12, 2019. Larvik, Norway
 
 [Website](https://reactnorway.com) - [Twitter](https://twitter.com/ReactNorway)
 
+### React Loop 2019 {#react-loop-2019}
+June 21, 2019 Chicago, Illinois USA
+
+[Website](https://reactloop.com) - [Twitter](https://twitter.com/ReactLoop)
+
 ### ComponentsConf 2019 {#componentsconf-2019}
 September 6, 2019 in Melbourne, Australia
 [Website](https://www.componentsconf.com.au/) - [Twitter](https://twitter.com/componentsconf)
diff --git a/content/docs/accessibility.md b/content/docs/accessibility.md
index 663251a03..e6cacba3b 100644
--- a/content/docs/accessibility.md
+++ b/content/docs/accessibility.md
@@ -19,8 +19,8 @@ The [Web Content Accessibility Guidelines](https://www.w3.org/WAI/intro/wcag) pr
 The following WCAG checklists provide an overview:
 
 - [WCAG checklist from Wuhcag](https://www.wuhcag.com/wcag-checklist/)
-- [WCAG checklist from WebAIM](http://webaim.org/standards/wcag/checklist)
-- [Checklist from The A11Y Project](http://a11yproject.com/checklist.html)
+- [WCAG checklist from WebAIM](https://webaim.org/standards/wcag/checklist)
+- [Checklist from The A11Y Project](https://a11yproject.com/checklist.html)
 
 ### WAI-ARIA {#wai-aria}
 
@@ -114,7 +114,7 @@ Every HTML form control, such as `<input>` and `<textarea>`, needs to be labeled
 The following resources show us how to do this:
 
 - [The W3C shows us how to label elements](https://www.w3.org/WAI/tutorials/forms/labels/)
-- [WebAIM shows us how to label elements](http://webaim.org/techniques/forms/controls)
+- [WebAIM shows us how to label elements](https://webaim.org/techniques/forms/controls)
 - [The Paciello Group explains accessible names](https://www.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/)
 
 Although these standard HTML practices can be directly used in React, note that the `for` attribute is written as `htmlFor` in JSX:
@@ -129,13 +129,13 @@ Although these standard HTML practices can be directly used in React, note that
 Error situations need to be understood by all users. The following link shows us how to expose error texts to screen readers as well:
 
 - [The W3C demonstrates user notifications](https://www.w3.org/WAI/tutorials/forms/notifications/)
-- [WebAIM looks at form validation](http://webaim.org/techniques/formvalidation/)
+- [WebAIM looks at form validation](https://webaim.org/techniques/formvalidation/)
 
 ## Focus Control {#focus-control}
 
 Ensure that your web application can be fully operated with the keyboard only:
 
-- [WebAIM talks about keyboard accessibility](http://webaim.org/techniques/keyboard/)
+- [WebAIM talks about keyboard accessibility](https://webaim.org/techniques/keyboard/)
 
 ### Keyboard focus and focus outline {#keyboard-focus-and-focus-outline}
 
@@ -152,13 +152,13 @@ Provide a mechanism to allow users to skip past navigation sections in your appl
 Skiplinks or Skip Navigation Links are hidden navigation links that only become visible when keyboard users interact with the page. They are very easy to implement with
 internal page anchors and some styling:
 
-- [WebAIM - Skip Navigation Links](http://webaim.org/techniques/skipnav/)
+- [WebAIM - Skip Navigation Links](https://webaim.org/techniques/skipnav/)
 
 Also use landmark elements and roles, such as `<main>` and `<aside>`, to demarcate page regions as assistive technology allow the user to quickly navigate to these sections.
 
 Read more about the use of these elements to enhance accessibility here:
 
-- [Accessible Landmarks](http://www.scottohara.me/blog/2018/03/03/landmarks.html)
+- [Accessible Landmarks](https://www.scottohara.me/blog/2018/03/03/landmarks.html)
 
 ### Programmatically managing focus {#programmatically-managing-focus}
 
@@ -387,7 +387,7 @@ These are toolboxes filled with HTML attributes that are fully supported in JSX
 Each type of widget has a specific design pattern and is expected to function in a certain way by users and user agents alike:
 
 - [WAI-ARIA Authoring Practices - Design Patterns and Widgets](https://www.w3.org/TR/wai-aria-practices/#aria_ex)
-- [Heydon Pickering - ARIA Examples](http://heydonworks.com/practical_aria_examples/)
+- [Heydon Pickering - ARIA Examples](https://heydonworks.com/practical_aria_examples/)
 - [Inclusive Components](https://inclusive-components.design/)
 
 ## Other Points for Consideration {#other-points-for-consideration}
@@ -396,7 +396,7 @@ Each type of widget has a specific design pattern and is expected to function in
 
 Indicate the human language of page texts as screen reader software uses this to select the correct voice settings:
 
-- [WebAIM - Document Language](http://webaim.org/techniques/screenreader/#language)
+- [WebAIM - Document Language](https://webaim.org/techniques/screenreader/#language)
 
 ### Setting the document title {#setting-the-document-title}
 
@@ -412,15 +412,15 @@ Ensure that all readable text on your website has sufficient color contrast to r
 
 - [WCAG - Understanding the Color Contrast Requirement](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
 - [Everything About Color Contrast And Why You Should Rethink It](https://www.smashingmagazine.com/2014/10/color-contrast-tips-and-tools-for-accessibility/)
-- [A11yProject - What is Color Contrast](http://a11yproject.com/posts/what-is-color-contrast/)
+- [A11yProject - What is Color Contrast](https://a11yproject.com/posts/what-is-color-contrast/)
 
-It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](http://jxnblk.com/colorable/).
+It can be tedious to manually calculate the proper color combinations for all cases in your website so instead, you can [calculate an entire accessible color palette with Colorable](https://jxnblk.com/colorable/).
 
 Both the aXe and WAVE tools mentioned below also include color contrast tests and will report on contrast errors.
 
 If you want to extend your contrast testing abilities you can use these tools:
 
-- [WebAIM - Color Contrast Checker](http://webaim.org/resources/contrastchecker/)
+- [WebAIM - Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
 - [The Paciello Group - Color Contrast Analyzer](https://www.paciellogroup.com/resources/contrastanalyser/)
 
 ## Development and Testing Tools {#development-and-testing-tools}
@@ -471,7 +471,7 @@ You can also use the [react-axe](https://github.com/dylanb/react-axe) module to
 
 #### WebAIM WAVE {#webaim-wave}
 
-The [Web Accessibility Evaluation Tool](http://wave.webaim.org/extension/) is another accessibility browser extension.
+The [Web Accessibility Evaluation Tool](https://wave.webaim.org/extension/) is another accessibility browser extension.
 
 #### Accessibility inspectors and the Accessibility Tree {#accessibility-inspectors-and-the-accessibility-tree}
 
@@ -498,7 +498,7 @@ Please note that browser / screen reader combinations matter. It is recommended
 
 Refer to the following guides on how to best use NVDA:
 
-- [WebAIM - Using NVDA to Evaluate Web Accessibility](http://webaim.org/articles/nvda/)
+- [WebAIM - Using NVDA to Evaluate Web Accessibility](https://webaim.org/articles/nvda/)
 - [Deque - NVDA Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/nvda-keyboard-shortcuts)
 
 #### VoiceOver in Safari {#voiceover-in-safari}
@@ -507,26 +507,26 @@ VoiceOver is an integrated screen reader on Apple devices.
 
 Refer to the following guides on how activate and use VoiceOver:
 
-- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](http://webaim.org/articles/voiceover/)
+- [WebAIM - Using VoiceOver to Evaluate Web Accessibility](https://webaim.org/articles/voiceover/)
 - [Deque - VoiceOver for OS X Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-keyboard-shortcuts)
 - [Deque - VoiceOver for iOS Shortcuts](https://dequeuniversity.com/screenreaders/voiceover-ios-shortcuts)
 
 #### JAWS in Internet Explorer {#jaws-in-internet-explorer}
 
-[Job Access With Speech](http://www.freedomscientific.com/Products/Blindness/JAWS) or JAWS, is a prolifically used screen reader on Windows.
+[Job Access With Speech](https://www.freedomscientific.com/Products/software/JAWS/) or JAWS, is a prolifically used screen reader on Windows.
 
 Refer to the following guides on how to best use JAWS:
 
-- [WebAIM - Using JAWS to Evaluate Web Accessibility](http://webaim.org/articles/jaws/)
+- [WebAIM - Using JAWS to Evaluate Web Accessibility](https://webaim.org/articles/jaws/)
 - [Deque - JAWS Keyboard Shortcuts](https://dequeuniversity.com/screenreaders/jaws-keyboard-shortcuts)
 
 ### Other Screen Readers {#other-screen-readers}
 
 #### ChromeVox in Google Chrome {#chromevox-in-google-chrome}
 
-[ChromeVox](http://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
+[ChromeVox](https://www.chromevox.com/) is an integrated screen reader on Chromebooks and is available [as an extension](https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn?hl=en) for Google Chrome.
 
 Refer to the following guides on how best to use ChromeVox:
 
 - [Google Chromebook Help - Use the Built-in Screen Reader](https://support.google.com/chromebook/answer/7031755?hl=en)
-- [ChromeVox Classic Keyboard Shortcuts Reference](http://www.chromevox.com/keyboard_shortcuts.html)
+- [ChromeVox Classic Keyboard Shortcuts Reference](https://www.chromevox.com/keyboard_shortcuts.html)
diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md
index 11b99d37a..92d9305b1 100644
--- a/content/docs/add-react-to-a-website.md
+++ b/content/docs/add-react-to-a-website.md
@@ -1,6 +1,6 @@
 ---
 id: add-react-to-a-website
-title: Add React to a Website
+title: Добавляем React на сайт
 permalink: docs/add-react-to-a-website.html
 redirect_from:
   - "docs/add-react-to-an-existing-app.html"
@@ -8,127 +8,127 @@ prev: getting-started.html
 next: create-a-new-react-app.html
 ---
 
-Use as little or as much React as you need.
+Вы можете использовать React в том объёме, в котором вам хочется.
 
-React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that.
+Для внедрения React не надо ничего переписывать. **Его можно использовать как для маленькой кнопки, так и для целого приложения.** Возможно, вы захотите лишь чуть «оживить» некоторые элементы на вашей странице. React-компоненты подходят для этого как нельзя лучше.
 
-The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
+Большинство сайтов в Интернете является обычными HTML-страницами. Даже если ваш сайт не относится к одностраничным приложениям, вы можете добавить в него React, написав **всего несколько строк кода без каких-либо инструментов сборки**. В зависимости от целей, вы можете постепенно переносить на React весь сайт, а можете переписать всего несколько виджетов.
 
 ---
 
-- [Add React in One Minute](#add-react-in-one-minute)
-- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!)
+- [Добавляем React за одну минуту](#add-react-in-one-minute)
+- [Необязательно: Используем React с JSX](#optional-try-react-with-jsx) (без каких-либо бандлеров!)
 
-## Add React in One Minute {#add-react-in-one-minute}
+## Добавляем React за одну минуту {#add-react-in-one-minute}
 
-In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice.
+В этом разделе вы научитесь добавлять React на существующую HTML-страницу. Вы можете практиковаться на своём собственном сайте или создать для этого пустой HTML файл.
 
-There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.**
+Мы не будем пользоваться сложными инструментами сборки или что-то устанавливать. **Всё, что вам нужно -- это доступ к Интернету и минута свободного времени**.
 
-Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
+Необязательно: [скачать готовый пример (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)
 
-### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html}
+### Шаг 1: Добавляем DOM-контейнер в HTML {#step-1-add-a-dom-container-to-the-html}
 
-First, open the HTML page you want to edit. Add an empty `<div>` tag to mark the spot where you want to display something with React. For example:
+Для начала, откройте HTML файл страницы, которую хотите отредактировать. Добавьте пустой тег `<div>` в месте, где вы хотите отобразить что-нибудь с помощью React. Например:
 
 ```html{3}
-<!-- ... existing HTML ... -->
+<!-- ... остальной HTML ... -->
 
 <div id="like_button_container"></div>
 
-<!-- ... existing HTML ... -->
+<!-- ... остальной HTML ... -->
 ```
 
-We gave this `<div>` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it.
+Затем назначьте созданному `<div>` уникальный атрибут `id`. Это позволит впоследствии найти тег из JavaScript кода и отобразить React-компоненты внутри него.
 
->Tip
+>Совет
 >
->You can place a "container" `<div>` like this **anywhere** inside the `<body>` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers.
+>«Контейнер» `<div>` можно поместить **где угодно** внутри тега `<body>`. Вы можете создать любое количество независимых DOM-контейнеров на одной странице. Эти контейнеры принято оставлять пустыми, так как React в любом случае заменяет всё их содержимое.
 
-### Step 2: Add the Script Tags {#step-2-add-the-script-tags}
+### Шаг 2: Добавляем script-теги {#step-2-add-the-script-tags}
 
-Next, add three `<script>` tags to the HTML page right before the closing `</body>` tag:
+Теперь добавьте три `<script>`-тега перед закрывающим тегом `</body>`:
 
 ```html{5,6,9}
-  <!-- ... other HTML ... -->
+  <!-- ... остальной HTML ... -->
 
-  <!-- Load React. -->
-  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
+  <!-- Загрузим React. -->
+  <!-- Примечание: для деплоя на продакшен замените окончание «development.js» на «production.min.js». -->
   <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
   <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 
-  <!-- Load our React component. -->
+  <!-- Загрузим наш React-компонент. -->
   <script src="like_button.js"></script>
 
 </body>
 ```
 
-The first two tags load React. The third one will load your component code.
+Первые два тега загружают React. Третий тег загружает код вашего собственного компонента.
 
-### Step 3: Create a React Component {#step-3-create-a-react-component}
+### Шаг 3: Создаём React-компонент {#step-3-create-a-react-component}
 
-Create a file called `like_button.js` next to your HTML page.
+Создайте файл с именем `like_button.js` рядом с вашим HTML файлом.
 
-Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created.
+Возьмите **[этот стартовый код](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** и вставьте его в созданный ранее файл.
 
->Tip
+>Совет
 >
->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen!
+>В данном коде создаётся React-компонент с именем `LikeButton`. Не беспокойтесь, если что-то кажется вам непонятным -- мы подробно разберём принципы разработки на React позже, в нашем [практическом руководстве](/tutorial/tutorial.html) и во [введении в основные понятия](/docs/hello-world.html). Пока же мы просто посмотрим, как это выглядит на экране.
 
-After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`:
+Добавьте ещё 2 строки в конец файла `like_button.js`, после **[стартового кода](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**:
 
 ```js{3,4}
-// ... the starter code you pasted ...
+// ... стартовый код ...
 
 const domContainer = document.querySelector('#like_button_container');
 ReactDOM.render(e(LikeButton), domContainer);
 ```
 
-These two lines of code find the `<div>` we added to our HTML in the first step, and then display our "Like" button React component inside of it. 
+Этот код ищет контейнер `<div>`, который мы добавили на первом шаге, а затем отображает наш React-компонент с кнопкой «Like» внутри него.
 
-### That's It! {#thats-it}
+### Готово! {#thats-it}
 
-There is no step four. **You have just added the first React component to your website.**
+Вот и всё! **Вы только что добавили свой первый React-компонент на страницу.**
 
-Check out the next sections for more tips on integrating React.
+Перейдите к следующим разделам, если хотите узнать о других способах добавить React.
 
-**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
+**[Посмотреть финальный код примера](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)**
 
-**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
+**[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)**
 
-### Tip: Reuse a Component {#tip-reuse-a-component}
+### Совет: Повторное использование компонентов {#tip-reuse-a-component}
 
-Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it:
+Зачастую, вам может понадобиться отобразить React-компонент в нескольких местах одной и той же HTML-страницы. Вот как можно показать сразу три кнопки «Like» с разными данными:
 
-[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
+[Посмотреть исходный код примера](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda)
 
-[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
+[Скачать код примера (архив 2 Кбайт)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip)
 
->Note
+>Примечание
 >
->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead.
+>Этот способ лучше всего подходит для страниц, содержащих несколько изолированных участков кода, написанных на React. Внутри чистого React-кода проще использовать [композицию компонентов](/docs/components-and-props.html#composing-components).
 
-### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production}
+### Совет: Минификация JavaScript для продакшена {#tip-minify-javascript-for-production}
 
-Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users.
+Публикуя ваш сайт на продакшен, имейте в виду, что несжатый JavaScript значительно замедляет страницу для ваших пользователей.
 
-If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`:
+Если вы уже минифицируете свои скрипты, то не забудьте подготовить к продакшену сам React. Для этого поменяйте окончания ссылок на React на `production.min.js`:
 
 ```js
 <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
 ```
 
-If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
+Если же вы не настроили минификацию для ваших скриптов, то [вот один из вариантов, как это сделать](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3).
 
-## Optional: Try React with JSX {#optional-try-react-with-jsx}
+## Необязательно: Используем React с JSX {#optional-try-react-with-jsx}
 
-In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display:
+В предыдущих примерах мы не выходили за рамки обычных браузерных возможностей. В частности, мы указываем, что React должен выводить на экран, просто вызывая JavaScript-функцию:
 
 ```js
 const e = React.createElement;
 
-// Display a "Like" <button>
+// Отобразить <button> с текстом «Like» 
 return e(
   'button',
   { onClick: () => this.setState({ liked: true }) },
@@ -136,10 +136,10 @@ return e(
 );
 ```
 
-However, React also offers an option to use [JSX](/docs/introducing-jsx.html) instead:
+Однако, React позволяет использовать специальный синтаксис, называющийся [JSX](/docs/introducing-jsx.html):
 
 ```js
-// Display a "Like" <button>
+// Отобразить <button> с текстом «Like» 
 return (
   <button onClick={() => this.setState({ liked: true })}>
     Like
@@ -147,56 +147,56 @@ return (
 );
 ```
 
-These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries.
+Эти два примера делают одно и то же. Несмотря на то, что **JSX является [совершенно необязательным](/docs/react-without-jsx.html)**, многие разработчики считают его удобным для разработки UI -- как с React, так и с другими библиотеками.
 
-You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
+Вы можете попробовать JSX в [этом онлайн-конвертере](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=).
 
-### Quickly Try JSX {#quickly-try-jsx}
+### Быстрый старт с JSX {#quickly-try-jsx}
 
-The quickest way to try JSX in your project is to add this `<script>` tag to your page:
+Чтобы быстро попробовать JSX, добавьте такой `<script>`-тег на страницу:
 
 ```html
 <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
 ```
 
-Now you can use JSX in any `<script>` tag by adding `type="text/babel"` attribute to it. Here is [an example HTML file with JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html) that you can download and play with.
+Теперь синтаксис JSX доступен внутри каждого `<script>`-тега, у которого есть атрибут `type="text/babel"`. Скачайте [пример HTML-кода с JSX](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), чтобы поэкспериментировать.
 
-This approach is fine for learning and creating simple demos. However, it makes your website slow and **isn't suitable for production**. When you're ready to move forward, remove this new `<script>` tag and the `type="text/babel"` attributes you've added. Instead, in the next section you will set up a JSX preprocessor to convert all your `<script>` tags automatically.
+Такой подход удобен для обучения или создания быстрых демо, но следует помнить, что работа сайта при этом сильно замедляется. Поэтому для продакшна JSX лучше добавить по-другому. Если вам интересно попробовать, удалите добавленный ранее `<script>`-тег и все атрибуты `type="text/babel"`. Вместо них мы будем пользоваться препроцессором JSX, который автоматически трансформирует весь код внутри `<script>`-тегов.
 
-### Add JSX to a Project {#add-jsx-to-a-project}
+### Добавляем JSX в проект {#add-jsx-to-a-project}
 
-Adding JSX to a project doesn't require complicated tools like a bundler or a development server. Essentially, adding JSX **is a lot like adding a CSS preprocessor.** The only requirement is to have [Node.js](https://nodejs.org/) installed on your computer.
+JSX можно добавить в существующий проект и без разных сложных инструментов вроде бандлера или сервера для разработки. По сути, **добавление JSX напоминает добавление препроцессора CSS**. Необходимо лишь убедиться, что на вашем компьютере установлен [Node.js](https://nodejs.org/).
 
-Go to your project folder in the terminal, and paste these two commands:
+С помощью терминала перейдите в директорию вашего проекта и запустите следующие команды:
 
-1. **Step 1:** Run `npm init -y` (if it fails, [here's a fix](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
-2. **Step 2:** Run `npm install babel-cli@6 babel-preset-react-app@3`
+1. **Шаг 1:** Запустите команду `npm init -y` (если появляются ошибки, попробуйте [этот способ](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d))
+2. **Шаг 2:** Запустите команду `npm install babel-cli@6 babel-preset-react-app@3`
 
->Tip
+>Совет
 >
->We're **using npm here only to install the JSX preprocessor;** you won't need it for anything else. Both React and the application code can stay as `<script>` tags with no changes.
+>**Мы используем npm только для установки препроцессора JSX.** React и код приложения всё ещё остаются в `<script>`-тегах.
 
-Congratulations! You just added a **production-ready JSX setup** to your project.
+Поздравляем! Вы только что добавили в ваш проект **поддержку JSX, готовую к продакшену**.
 
 
-### Run JSX Preprocessor {#run-jsx-preprocessor}
+### Запускаем препроцессор JSX {#run-jsx-preprocessor}
 
-Create a folder called `src` and run this terminal command:
+Создайте директорию с названием `src` и наберите в терминале следующую команду:
 
 ```
 npx babel --watch src --out-dir . --presets react-app/prod 
 ```
 
->Note
+>Примечание
 >
->`npx` is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
+>`npx` не является опечаткой. Это [инструмент запуска пакетов, появившийся в npm версии 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
 >
->If you see an error message saying "You have mistakenly installed the `babel` package", you might have missed [the previous step](#add-jsx-to-a-project). Perform it in the same folder, and then try again.
+>Если у вас появляется сообщение об ошибке, похожее на «You have mistakenly installed the `babel` package», то это означает, что вам нужно пройти [предыдущий шаг](#add-jsx-to-a-project), а затем повторить запуск команды.
 
-Don't wait for it to finish -- this command starts an automated watcher for JSX.
+Дожидаться завершения работы команды не нужно -- она работает в режиме наблюдения за изменениями в JSX-коде.
 
-If you now create a file called `src/like_button.js` with this **[JSX starter code](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, the watcher will create a preprocessed `like_button.js` with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
+Попробуйте создать файл с названием `src/like_button.js` и вставить в него **[этот стартовый JSX-код](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**. Препроцессор автоматически трансформирует новый код в чистый JavaScript, пригодный для выполнения в браузере, и сохранит его в новый файл `like_button.js`. При редактировании JSX-кода в существующих файлах трансформация также происходит автоматически.
 
-As a bonus, this also lets you use modern JavaScript syntax features like classes without worrying about breaking older browsers. The tool we just used is called Babel, and you can learn more about it from [its documentation](http://babeljs.io/docs/en/babel-cli/).
+Кроме препроцессинга JSX, вы в качестве бонуса получаете синтаксические новинки JavaScript, такие как классы, без головной боли с их браузерной поддержкой. Всё это доступно благодаря использованию инструмента под названием Babel, информацию о котором вы можете узнать из [его документации](https://babeljs.io/docs/en/babel-cli/).
 
-If you notice that you're getting comfortable with build tools and want them to do more for you, [the next section](/docs/create-a-new-react-app.html) describes some of the most popular and approachable toolchains. If not -- those script tags will do just fine!
+Если вы неплохо разбираетесь в инструментах сборки и хотите создавать приложения на React с их помощью, обратитесь к [следующему разделу](/docs/create-a-new-react-app.html), где описаны некоторые из наиболее популярных способов. Если нет -- не беспокойтесь, уже знакомые нам script-теги ничуть не хуже!
diff --git a/content/docs/addons-perf.md b/content/docs/addons-perf.md
index f50dee96f..a07b1d05a 100644
--- a/content/docs/addons-perf.md
+++ b/content/docs/addons-perf.md
@@ -27,8 +27,8 @@ In addition to giving you an overview of your app's overall performance, `Perf`
 See these articles for an introduction to React performance tooling:
 
  - ["How to Benchmark React Components"](https://medium.com/code-life/how-to-benchmark-react-components-the-quick-and-dirty-guide-f595baf1014c)
- - ["Performance Engineering with React"](http://benchling.engineering/performance-engineering-with-react/)
- - ["A Deep Dive into React Perf Debugging"](http://benchling.engineering/deep-dive-react-perf-debugging/) 
+ - ["Performance Engineering with React"](https://benchling.engineering/performance-engineering-with-react/)
+ - ["A Deep Dive into React Perf Debugging"](https://benchling.engineering/deep-dive-react-perf-debugging/) 
 
 ### Development vs. Production Builds {#development-vs-production-builds}
 
diff --git a/content/docs/addons-shallow-renderer.md b/content/docs/addons-shallow-renderer.md
index 3fcbbb25b..18380a78d 100644
--- a/content/docs/addons-shallow-renderer.md
+++ b/content/docs/addons-shallow-renderer.md
@@ -1,68 +1,68 @@
 ---
 id: shallow-renderer
-title: Shallow Renderer
+title: Поверхностный рендерер
 permalink: docs/shallow-renderer.html
 layout: docs
 category: Reference
 ---
 
-**Importing**
+**Импорт**
 
 ```javascript
 import ShallowRenderer from 'react-test-renderer/shallow'; // ES6
-var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 with npm
+var ShallowRenderer = require('react-test-renderer/shallow'); // ES5 с npm
 ```
 
-## Overview {#overview}
+## Обзор {#overview}
 
-When writing unit tests for React, shallow rendering can be helpful. Shallow rendering lets you render a component "one level deep" and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
+Поверхностный рендеринг может быть полезным при модульном тестировании компонентов React. Он позволяет отрендерить компонент «на один уровень глубины», а затем проверить утверждения о том, что возвращает метод рендеринга. В этом случае вам не нужно волноваться о поведении дочерних компонентов, потому что они не инстанциируются и не рендерятся. Этот процесс не требует DOM.
 
-For example, if you have the following component:
+Возьмём к примеру, следующий компонент:
 
 ```javascript
 function MyComponent() {
   return (
     <div>
-      <span className="heading">Title</span>
+      <span className="heading">Заглавие</span>
       <Subcomponent foo="bar" />
     </div>
   );
 }
 ```
 
-Then you can assert:
+Тогда вы можете утверждать:
 
 ```javascript
 import ShallowRenderer from 'react-test-renderer/shallow';
 
-// in your test:
+// в вашем тесте:
 const renderer = new ShallowRenderer();
 renderer.render(<MyComponent />);
 const result = renderer.getRenderOutput();
 
 expect(result.type).toBe('div');
 expect(result.props.children).toEqual([
-  <span className="heading">Title</span>,
+  <span className="heading">Заглавие</span>,
   <Subcomponent foo="bar" />
 ]);
 ```
 
-Shallow testing currently has some limitations, namely not supporting refs.
+Поверхностное тестирование в настоящее время имеет некоторые ограничения — оно не поддерживает рефы.
 
-> Note:
+> Замечание:
 >
-> We also recommend checking out Enzyme's [Shallow Rendering API](http://airbnb.io/enzyme/docs/api/shallow.html). It provides a nicer higher-level API over the same functionality.
+> Мы также советуем посмотреть API поверхностного рендеринга Enzyme [Shallow Rendering API](https://airbnb.io/enzyme/docs/api/shallow.html). Он предоставляет более удобный API высокого уровня для достижения той же функциональности.
 
-## Reference {#reference}
+## Справка {#reference}
 
 ### `shallowRenderer.render()` {#shallowrendererrender}
 
-You can think of the shallowRenderer as a "place" to render the component you're testing, and from which you can extract the component's output.
+Вы можете думать о shallowRenderer как о «месте» в которое рендерится тестируемый компонент, и из которого вы можете извлечь результат вывода этого компонента.
 
-`shallowRenderer.render()` is similar to [`ReactDOM.render()`](/docs/react-dom.html#render) but it doesn't require DOM and only renders a single level deep. This means you can test components isolated from how their children are implemented.
+`shallowRenderer.render()` схож с [`ReactDOM.render()`](/docs/react-dom.html#render), но не требует DOM и рендерит всего один уровень глубины. Это означает что вы можете тестировать компоненты независимо от того, как реализованы их дочерние компоненты.
 
 ### `shallowRenderer.getRenderOutput()` {#shallowrenderergetrenderoutput}
 
-After `shallowRenderer.render()` has been called, you can use `shallowRenderer.getRenderOutput()` to get the shallowly rendered output.
+После того как был вызван `shallowRenderer.render()`, вы можете извлечь поверхностно отрисованный результат с помощью `shallowRenderer.getRenderOutput()`.
 
-You can then begin to assert facts about the output.
+После этого можно начинать проверку утверждений о выводе.
diff --git a/content/docs/addons-test-utils.md b/content/docs/addons-test-utils.md
index bbbf5755c..a6e06e1be 100644
--- a/content/docs/addons-test-utils.md
+++ b/content/docs/addons-test-utils.md
@@ -15,13 +15,13 @@ var ReactTestUtils = require('react-dom/test-utils'); // ES5 with npm
 
 ## Overview {#overview}
 
-`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](http://facebook.github.io/jest/docs/en/tutorial-react.html#content).
+`ReactTestUtils` makes it easy to test React components in the testing framework of your choice. At Facebook we use [Jest](https://facebook.github.io/jest/) for painless JavaScript testing. Learn how to get started with Jest through the Jest website's [React Tutorial](https://jestjs.io/docs/tutorial-react).
 
 > Note:
 >
 > We recommend using [`react-testing-library`](https://git.io/react-testing-library) which is designed to enable and encourage writing tests that use your components as the end users do.
 >
-> Alternatively, Airbnb has released a testing utility called [Enzyme](http://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
+> Alternatively, Airbnb has released a testing utility called [Enzyme](https://airbnb.io/enzyme/), which makes it easy to assert, manipulate, and traverse your React Components' output.
 
  - [`act()`](#act)
  - [`mockComponent()`](#mockcomponent)
@@ -139,7 +139,7 @@ Pass a mocked component module to this method to augment it with useful methods
 
 > Note:
 >
-> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/test-utils.html#shallow-rendering) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
+> `mockComponent()` is a legacy API. We recommend using [shallow rendering](/docs/shallow-renderer.html) or [`jest.mock()`](https://facebook.github.io/jest/docs/en/tutorial-react-native.html#mock-native-modules-using-jestmock) instead.
 
 * * *
 
diff --git a/content/docs/addons-update.md b/content/docs/addons-update.md
index 0aa20a482..0e0241074 100644
--- a/content/docs/addons-update.md
+++ b/content/docs/addons-update.md
@@ -21,7 +21,7 @@ var update = require('react-addons-update'); // ES5 with npm
 
 React lets you use whatever style of data management you want, including mutation. However, if you can use immutable data in performance-critical parts of your application it's easy to implement a fast [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method to significantly speed up your app.
 
-Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](http://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
+Dealing with immutable data in JavaScript is more difficult than in languages designed for it, like [Clojure](https://clojure.org/). However, we've provided a simple immutability helper, `update()`, that makes dealing with this type of data much easier, *without* fundamentally changing how your data is represented. You can also take a look at Facebook's [Immutable-js](https://facebook.github.io/immutable-js/docs/) and the [Advanced Performance](/docs/advanced-performance.html) section for more detail on Immutable-js.
 
 ### The Main Idea {#the-main-idea}
 
@@ -67,7 +67,7 @@ const newData = update(myData, {
 });
 ```
 
-While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](http://docs.mongodb.org/manual/core/crud-introduction/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
+While the syntax takes a little getting used to (though it's inspired by [MongoDB's query language](https://docs.mongodb.com/manual/crud/#query)) there's no redundancy, it's statically analyzable and it's not much more typing than the mutative version.
 
 The `$`-prefixed keys are called *commands*. The data structure they are "mutating" is called the *target*.
 
diff --git a/content/docs/cdn-links.md b/content/docs/cdn-links.md
index 73e3e8171..374e52909 100644
--- a/content/docs/cdn-links.md
+++ b/content/docs/cdn-links.md
@@ -1,37 +1,37 @@
 ---
 id: cdn-links
-title: CDN Links
+title: Ссылки на CDN
 permalink: docs/cdn-links.html
 prev: create-a-new-react-app.html
 next: hello-world.html
 ---
 
-Both React and ReactDOM are available over a CDN.
+Как React, так и ReactDOM доступны через CDN.
 
 ```html
 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
 ```
 
-The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
+Указанные выше версии предназначены только при разработке приложения и не подходят для использования в продакшен-окружении. Минифицированные и оптимизированные для продакшена версии React перечислены ниже:
 
 ```html
 <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 ```
 
-To load a specific version of `react` and `react-dom`, replace `16` with the version number.
+Для загрузки конкретной версии `react` и `react-dom`, замените `16` на номер нужной версии.
 
-### Why the `crossorigin` Attribute? {#why-the-crossorigin-attribute}
+### Зачем нужен атрибут `crossorigin`? {#why-the-crossorigin-attribute}
 
-If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
+Если вы загружаете React из CDN, мы рекомендуем использовать атрибут [`crossorigin`](https://developer.mozilla.org/ru/docs/Web/HTML/CORS_settings_attributes):
 
 ```html
 <script crossorigin src="..."></script>
 ```
 
-We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
+Желательно также проверить, что используемый сервис CDN устанавливает HTTP-заголовок `Access-Control-Allow-Origin: *`:
 
 ![Access-Control-Allow-Origin: *](../images/docs/cdn-cors-header.png)
 
-This enables a better [error handling experience](/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
+Такая практика позволит улучшить [обработку ошибок](/blog/2017/07/26/error-handling-in-react-16.html) в React 16 и более новых версиях.
diff --git a/content/docs/code-splitting.md b/content/docs/code-splitting.md
index 5b8d40063..c0985e92c 100644
--- a/content/docs/code-splitting.md
+++ b/content/docs/code-splitting.md
@@ -108,7 +108,7 @@ out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
 If you're setting up Webpack yourself, you'll probably want to read Webpack's
 [guide on code splitting](https://webpack.js.org/guides/code-splitting/). Your Webpack config should look vaguely [like this](https://gist.github.com/gaearon/ca6e803f5c604d37468b0091d9959269).
 
-When using [Babel](http://babeljs.io/), you'll need to make sure that Babel can
+When using [Babel](https://babeljs.io/), you'll need to make sure that Babel can
 parse the dynamic import syntax but is not transforming it. For that you will need [babel-plugin-syntax-dynamic-import](https://yarnpkg.com/en/package/babel-plugin-syntax-dynamic-import).
 
 ## `React.lazy` {#reactlazy}
diff --git a/content/docs/codebase-overview.md b/content/docs/codebase-overview.md
index 257e54e02..95de1b6b5 100644
--- a/content/docs/codebase-overview.md
+++ b/content/docs/codebase-overview.md
@@ -155,7 +155,7 @@ There are multiple injection points in the codebase. In the future, we intend to
 
 ### Multiple Packages {#multiple-packages}
 
-React is a [monorepo](http://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
+React is a [monorepo](https://danluu.com/monorepo/). Its repository contains multiple separate packages so that their changes can be coordinated together, and issues live in one place.
 
 ### React Core {#react-core}
 
@@ -171,7 +171,7 @@ The code for React core is located in [`packages/react`](https://github.com/face
 
 ### Renderers {#renderers}
 
-React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](http://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
+React was originally created for the DOM but it was later adapted to also support native platforms with [React Native](https://facebook.github.io/react-native/). This introduced the concept of "renderers" to React internals.
 
 **Renderers manage how a React tree turns into the underlying platform calls.**
 
@@ -211,7 +211,7 @@ Its main goals are:
 * Ability to return multiple elements from `render()`.
 * Better support for error boundaries.
 
-You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://blog.ag-grid.com/index.php/2018/11/29/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react). While it has shipped with React 16, the async features are not enabled by default yet.
+You can read more about React Fiber Architecture [here](https://github.com/acdlite/react-fiber-architecture) and [here](https://medium.com/react-in-depth/inside-fiber-in-depth-overview-of-the-new-reconciliation-algorithm-in-react-e1c04700ef6e). While it has shipped with React 16, the async features are not enabled by default yet.
 
 Its source code is located in [`packages/react-reconciler`](https://github.com/facebook/react/tree/master/packages/react-reconciler).
 
diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 47daaedf9..a93038a9d 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: Компоненты и пропсы
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,13 +16,13 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
+Компоненты позволяют разбить интерфейс на независимые части, про которые легко думать в отдельности. Их можно складывать вместе и использовать несколько раз. На этой странице мы ознакомимся с самой идеей компонентов — [детальное описание API находится здесь](/docs/react-component.html).
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+Во многом компоненты ведут себя как обычные функции JavaScript. Они принимают произвольные входные данные (так называемые «пропсы») и возвращают React-элементы, описывающие, что мы хотим увидеть на экране.
 
-## Function and Class Components {#function-and-class-components}
+## Функциональные и классовые компоненты {#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+Проще всего объявить React-компонент как функцию:
 
 ```js
 function Welcome(props) {
@@ -30,9 +30,9 @@ function Welcome(props) {
 }
 ```
 
-This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
+Эта функция — компонент, потому что она получает данные в одном объекте («пропсы») в качестве параметра и возвращает React-элемент. Мы будем называть такие компоненты «функциональными», так как они буквально являются функциями.
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+Ещё компоненты можно определять как [классы ES6](https://developer.mozilla.org/ru-RU/docs/Web/JavaScript/Reference/Classes):
 
 ```js
 class Welcome extends React.Component {
@@ -42,34 +42,34 @@ class Welcome extends React.Component {
 }
 ```
 
-The above two components are equivalent from React's point of view.
+С точки зрения React, эти два компонента эквивалентны.
 
-Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
+Классам доступны дополнительные возможности, о которых мы поговорим в [следующих главах](/docs/state-and-lifecycle.html). Но пока что мы предпочтём функции за их краткость.
 
-## Rendering a Component {#rendering-a-component}
+## Как отрендерить компонент {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+Пока что мы только встречали React-элементы, представляющие собой DOM-теги:
 
 ```js
 const element = <div />;
 ```
 
-However, elements can also represent user-defined components:
+Но элементы могут описывать и наши собственные компоненты:
 
 ```js
-const element = <Welcome name="Sara" />;
+const element = <Welcome name="Алиса" />;
 ```
 
-When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
+Когда React встречает подобный элемент, он собирает все JSX-атрибуты в один объект и передаёт их нашему компоненту. Этот объект называется «пропсы» (props).
 
-For example, this code renders "Hello, Sara" on the page:
+Например, этот компонент выведет «Привет, Алиса» на страницу:
 
 ```js{1,5}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Привет, {props.name}</h1>;
 }
 
-const element = <Welcome name="Sara" />;
+const element = <Welcome name="Алиса" />;
 ReactDOM.render(
   element,
   document.getElementById('root')
@@ -78,24 +78,24 @@ ReactDOM.render(
 
 [](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
+Давайте разберём, что именно здесь происходит:
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+1. Мы передаём React-элемент `<Welcome name="Алиса" />` в `ReactDOM.render()`.
+2. React вызывает наш компонент `Welcome` с пропсами `{name: 'Алиса'}`.
+3. Наш компонент `Welcome` возвращает элемент `<h1>Привет, Алиса</h1>` в качестве результата.
+4. React DOM делает минимальные изменения в DOM, чтобы получилось `<h1>Привет, Алиса</h1>`.
 
->**Note:** Always start component names with a capital letter.
+>**Примечание:** Всегда называйте компоненты с заглавной буквы.
 >
->React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>Если компонент начинается с маленькой буквы, React принимает его за DOM-тег. Например, `<div />` это div-тег из HTML, а `<Welcome />` это уже наш компонент `Welcome`, который должен быть в области видимости.
 >
->You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Чтобы узнать больше про это соглашение, прочитайте [Углублённое изучение JSX](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
 
-## Composing Components {#composing-components}
+## Композиция компонентов {#composing-components}
 
-Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
+Компоненты могут ссылаться на другие компоненты в возвращённом ими дереве. Это позволяет нам использовать одну и ту же абстракцию — компоненты — на любом уровне нашего приложения. Неважно, пишем ли мы кнопку, форму или целый экран: все они, как правило, представляют собой компоненты в React-приложениях.
 
-For example, we can create an `App` component that renders `Welcome` many times:
+Например, компонент `App` может отрендерить компонент `Welcome` несколько раз:
 
 ```js{8-10}
 function Welcome(props) {
@@ -105,9 +105,9 @@ function Welcome(props) {
 function App() {
   return (
     <div>
-      <Welcome name="Sara" />
-      <Welcome name="Cahal" />
-      <Welcome name="Edite" />
+      <Welcome name="Алиса" />
+      <Welcome name="Базилио" />
+      <Welcome name="Буратино" />
     </div>
   );
 }
@@ -120,13 +120,13 @@ ReactDOM.render(
 
 [](codepen://components-and-props/composing-components)
 
-Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
+В приложениях, написанных на React с нуля, как правило, есть один компонент `App`, который находится на самом верху. В случае, если вы переписываете существующее приложение на React, имеет смысл начать работу с маленького компонента типа `Button` и постепенно двигаться «вверх» по иерархии.
 
-## Extracting Components {#extracting-components}
+## Извлечение компонентов {#extracting-components}
 
-Don't be afraid to split components into smaller components.
+Не бойтесь разбивать компоненты на части.
 
-For example, consider this `Comment` component:
+Допустим, у нас есть компонент `Comment`:
 
 ```js
 function Comment(props) {
@@ -154,11 +154,11 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+Этот компонент представляет собой комментарий в социальной сети. Его пропсы включают в себя `author` (объект), `text` (строка), и `date` (дата).
 
-This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
+С этим компонентом может быть не очень удобно работать из-за излишней вложенности. Мы также не можем повторно использовать его составные части. Давайте извлечём из него пару компонентов.
 
-First, we will extract `Avatar`:
+Для начала извлечём `Avatar`:
 
 ```js{3-6}
 function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
 }
 ```
 
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
+Компоненту `Avatar` незачем знать, что он рендерится внутри `Comment`. Поэтому мы дали его пропу чуть менее конкретное имя — `user`, а не `author`.
 
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
+Пропсы следует называть так, чтобы они имели смысл в первую очередь с точки зрения самого компонента, а уже во вторую тех компонентов, которые его рендерят.
 
-We can now simplify `Comment` a tiny bit:
+Теперь можно немножко упростить наш `Comment`:
 
 ```js{5}
 function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+Следующим шагом извлечём компонент `UserInfo`, который рендерит `Avatar` рядом с именем пользователя:
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-This lets us simplify `Comment` even further:
+Это позволит ещё сильнее упростить `Comment`:
 
 ```js{4}
 function Comment(props) {
@@ -233,11 +233,13 @@ function Comment(props) {
 
 [](codepen://components-and-props/extracting-components-continued)
 
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
+Извлечение компонентов может сначала показаться неблагодарной работой. Тем не менее, в больших приложениях очень полезно иметь палитру компонентов, которые можно многократно использовать. Если вы не уверены, извлекать компонент или нет, вот простое правило. Если какая-то часть интерфейса многократно в нём повторяется (`Button`, `Panel`, `Avatar`) или сама по себе достаточно сложная (`App`, `FeedStory`, `Comment`), имеет смысл её вынести в независимый компонент.
+
+## Пропсы можно только читать {#props-are-read-only}
 
-## Props are Read-Only {#props-are-read-only}
+Компонент никогда не должен что-то записывать в свои пропсы — вне зависимости от того, [функциональный он или классовый](#function-and-class-components).
 
-Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
+Возьмём для примера функцию `sum`:
 
 ```js
 function sum(a, b) {
@@ -245,9 +247,9 @@ function sum(a, b) {
 }
 ```
 
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
+Такие функции называют [«чистыми»](https://ru.wikipedia.org/wiki/%D0%A7%D0%B8%D1%81%D1%82%D0%BE%D1%82%D0%B0_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%B8), потому что они не меняют свои входные данные и предсказуемо возвращают один и тот же результат для одинаковых аргументов.
 
-In contrast, this function is impure because it changes its own input:
+А вот пример нечистой функции — она записывает данные в свои же аргументы:
 
 ```js
 function withdraw(account, amount) {
@@ -255,8 +257,8 @@ function withdraw(account, amount) {
 }
 ```
 
-React is pretty flexible but it has a single strict rule:
+React достаточно гибкий, но есть одно правило, которое нельзя нарушать:
 
-**All React components must act like pure functions with respect to their props.**
+**React-компоненты обязаны вести себя как чистые функции по отношению к своим пропсам.**
 
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
+Конечно, интерфейсы приложений обычно изменяются с течением времени. В [следующей главе](/docs/state-and-lifecycle.html) мы узнаем о том, что такое «состояние» компонента. Состояние даёт компонентам возможность реагировать на действия пользователя, ответы сервера и другие события, не нарушая чистоту компонента. 
diff --git a/content/docs/conditional-rendering.md b/content/docs/conditional-rendering.md
index 7df19bb98..ebd0b306e 100644
--- a/content/docs/conditional-rendering.md
+++ b/content/docs/conditional-rendering.md
@@ -1,6 +1,6 @@
 ---
 id: conditional-rendering
-title: Conditional Rendering
+title: Условный рендеринг
 permalink: docs/conditional-rendering.html
 prev: handling-events.html
 next: lists-and-keys.html
@@ -8,23 +8,23 @@ redirect_from:
   - "tips/false-in-jsx.html"
 ---
 
-In React, you can create distinct components that encapsulate behavior you need. Then, you can render only some of them, depending on the state of your application.
+React позволяет разделить логику на независимые компоненты. Эти компоненты можно показывать или прятать в зависимости от текущего состояния.
 
-Conditional rendering in React works the same way conditions work in JavaScript. Use JavaScript operators like [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) or the [conditional operator](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) to create elements representing the current state, and let React update the UI to match them.
+Условный рендеринг в React работает так же, как условные выражения работают в JavaScript. Бывает нужно объяснить React, как состояние влияет на то, какие компоненты требуется скрыть, а какие — отрендерить, и как именно. В таких ситуациях используйте [условный оператор](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80) JavaScript или выражения подобные [`if`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/if...else).
 
-Consider these two components:
+Рассмотрим два компонента:
 
 ```js
 function UserGreeting(props) {
-  return <h1>Welcome back!</h1>;
+  return <h1>С возвращением!</h1>;
 }
 
 function GuestGreeting(props) {
-  return <h1>Please sign up.</h1>;
+  return <h1>Войдите, пожалуйста.</h1>;
 }
 ```
 
-We'll create a `Greeting` component that displays either of these components depending on whether a user is logged in:
+Можно создать компонент `Greeting`, который отражает один из этих компонентов в зависимости от того, на сайте пользователь или нет:
 
 ```javascript{3-7,11,12}
 function Greeting(props) {
@@ -36,27 +36,27 @@ function Greeting(props) {
 }
 
 ReactDOM.render(
-  // Try changing to isLoggedIn={true}:
+  // Попробуйте заменить на isLoggedIn={true} и посмотрите на эффект.
   <Greeting isLoggedIn={false} />,
   document.getElementById('root')
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ZpVxNq?editors=0011)
 
-This example renders a different greeting depending on the value of `isLoggedIn` prop.
+В этом примере рендерится различное приветствие в зависимости от значения пропа `isLoggedIn`.
 
-### Element Variables {#element-variables}
+### Переменные-элементы {#element-variables}
 
-You can use variables to store elements. This can help you conditionally render a part of the component while the rest of the output doesn't change.
+Элементы React можно сохранять в переменных. Это может быть удобно, когда какое-то условие определяет, надо ли рендерить одну часть компонента или нет, а другая часть компонента остаётся неизменной.
 
-Consider these two new components representing Logout and Login buttons:
+Рассмотрим ещё два компонента, представляющих кнопки Войти (Login) и Выйти (Logout).
 
 ```js
 function LoginButton(props) {
   return (
     <button onClick={props.onClick}>
-      Login
+      Войти
     </button>
   );
 }
@@ -64,15 +64,15 @@ function LoginButton(props) {
 function LogoutButton(props) {
   return (
     <button onClick={props.onClick}>
-      Logout
+      Выйти
     </button>
   );
 }
 ```
 
-In the example below, we will create a [stateful component](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) called `LoginControl`.
+В следующем примере мы создадим [компонент с состоянием](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) и назовём его `LoginControl`.
 
-It will render either `<LoginButton />` or `<LogoutButton />` depending on its current state. It will also render a `<Greeting />` from the previous example:
+Он будет рендерить либо `<LoginButton />`, либо `<LogoutButton />` в зависимости от текущего состояния. А ещё он будет всегда рендерить `<Greeting />` из предыдущего примера.
 
 ```javascript{20-25,29,30}
 class LoginControl extends React.Component {
@@ -116,23 +116,23 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/QKzAgB?editors=0010)
 
-While declaring a variable and using an `if` statement is a fine way to conditionally render a component, sometimes you might want to use a shorter syntax. There are a few ways to inline conditions in JSX, explained below.
+Нет ничего плохого в том, чтобы объявить переменную и условно рендерить компонент `if`-выражением. Но иногда хочется синтаксис покороче. Давайте посмотрим на несколько других способов писать условия прямо в JSX.
 
-### Inline If with Logical && Operator {#inline-if-with-logical--operator}
+### Встроенные условия if с логическим оператором && {#inline-if-with-logical--operator}
 
-You may [embed any expressions in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) by wrapping them in curly braces. This includes the JavaScript logical `&&` operator. It can be handy for conditionally including an element:
+Вы можете [внедрить любое выражение в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx), заключив его в фигурные скобки. Это правило распространяется и на логический оператор `&&` языка JavaScript, которым можно удобно вставить элемент в зависимости от условия:
 
 ```js{6-10}
 function Mailbox(props) {
   const unreadMessages = props.unreadMessages;
   return (
     <div>
-      <h1>Hello!</h1>
+      <h1>Здравствуйте!</h1>
       {unreadMessages.length > 0 &&
         <h2>
-          You have {unreadMessages.length} unread messages.
+          У вас {unreadMessages.length} непрочитанных сообщений.
         </h2>
       }
     </div>
@@ -146,30 +146,30 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/ozJddz?editors=0010)
 
-It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+Приведённый выше вариант работает корректно, потому что в JavaScript выражение `true && expression` всегда вычисляется как `expression`, а выражение `false && expression` — как `false`.
 
-Therefore, if the condition is `true`, the element right after `&&` will appear in the output. If it is `false`, React will ignore and skip it.
+То есть, если условие истинно (`true`), то элемент, идущий непосредственно за `&&`, будет передан на вывод. Если же оно ложно (`false`), то React проигнорирует и пропустит его.
 
-### Inline If-Else with Conditional Operator {#inline-if-else-with-conditional-operator}
+### Встроенные условия if-else с тернарным оператором {#inline-if-else-with-conditional-operator}
 
-Another method for conditionally rendering elements inline is to use the JavaScript conditional operator [`condition ? true : false`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Conditional_Operator).
+Есть ещё один способ писать условия прямо в JSX. Вы можете воспользоваться тернарным оператором [`condition ? true : false`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/%D0%A3%D1%81%D0%BB%D0%BE%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80).
 
-In the example below, we use it to conditionally render a small block of text.
+Вот как этот метод можно использовать, чтобы отрендерить кусочек текста.
 
 ```javascript{5}
 render() {
   const isLoggedIn = this.state.isLoggedIn;
   return (
     <div>
-      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
+      Пользователь <b>{isLoggedIn ? 'сейчас' : 'не'}</b> на сайте.
     </div>
   );
 }
 ```
 
-It can also be used for larger expressions although it is less obvious what's going on:
+Этот метод можно использовать и с выражениями покрупнее, но это может сделать код менее очевидным:
 
 ```js{5,7,9}
 render() {
@@ -186,13 +186,13 @@ render() {
 }
 ```
 
-Just like in JavaScript, it is up to you to choose an appropriate style based on what you and your team consider more readable. Also remember that whenever conditions become too complex, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Как в JavaScript, так и в React выбор синтаксиса зависит от ваших предпочтений и принятого в команде стиля. Не забывайте, что если какое-то условие выглядят очень сложным, возможно пришло время [извлечь часть кода в отдельный компонент](/docs/components-and-props.html#extracting-components).
 
-### Preventing Component from Rendering {#preventing-component-from-rendering}
+### Предотвращение рендеринга компонента {#preventing-component-from-rendering}
 
-In rare cases you might want a component to hide itself even though it was rendered by another component. To do this return `null` instead of its render output.
+В редких случаях может потребоваться позволить компоненту спрятать себя, хотя он уже и отрендерен другим компонентом. Чтобы этого добиться, верните `null` вместо того, что обычно возвращается на рендеринг.
 
-In the example below, the `<WarningBanner />` is rendered depending on the value of the prop called `warn`. If the value of the prop is `false`, then the component does not render:
+Например, будет ли содержимое `<WarningBanner />` отрендерено, зависит от значения пропа под именем `warn`. Если значение `false`, компонент ничего не рендерит:
 
 ```javascript{2-4,29}
 function WarningBanner(props) {
@@ -202,7 +202,7 @@ function WarningBanner(props) {
 
   return (
     <div className="warning">
-      Warning!
+      Предупреждение!
     </div>
   );
 }
@@ -225,7 +225,7 @@ class Page extends React.Component {
       <div>
         <WarningBanner warn={this.state.showWarning} />
         <button onClick={this.handleToggleClick}>
-          {this.state.showWarning ? 'Hide' : 'Show'}
+          {this.state.showWarning ? 'Спрятать' : 'Показать'}
         </button>
       </div>
     );
@@ -238,6 +238,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/Xjoqwm?editors=0010)
 
-Returning `null` from a component's `render` method does not affect the firing of the component's lifecycle methods. For instance `componentDidUpdate` will still be called.
+Сам факт возврата `null` из метода `render` компонента никак не влияет на срабатывание методов жизненного цикла компонента. Например, `componentDidUpdate` будет всё равно вызван.
diff --git a/content/docs/create-a-new-react-app.md b/content/docs/create-a-new-react-app.md
index d3e9357e5..e1985e72f 100644
--- a/content/docs/create-a-new-react-app.md
+++ b/content/docs/create-a-new-react-app.md
@@ -37,7 +37,7 @@ The React team primarily recommends these solutions:
 
 ### Create React App {#create-react-app}
 
-[Create React App](http://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
+[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
 
 It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 and npm >= 5.2 on your machine. To create a project, run:
 
@@ -51,7 +51,7 @@ npm start
 >
 >`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
 
-Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](http://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
+Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
 
 When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app-) and the [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents).
 
@@ -87,7 +87,7 @@ A JavaScript build toolchain typically consists of:
 
 * A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
 
-* A **compiler** such as [Babel](http://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
+* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
 
 If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
 
diff --git a/content/docs/design-principles.md b/content/docs/design-principles.md
index 555045f4a..9e10f39d5 100644
--- a/content/docs/design-principles.md
+++ b/content/docs/design-principles.md
@@ -24,7 +24,7 @@ For example, it should be possible to introduce some local state into a componen
 
 There is nothing "bad" about using state or lifecycle methods in components. Like any powerful feature, they should be used in moderation, but we have no intention to remove them. On the contrary, we think they are integral parts of what makes React useful. We might enable [more functional patterns](https://github.com/reactjs/react-future/tree/master/07%20-%20Returning%20State) in the future, but both local state and lifecycle methods will be a part of that model.
 
-Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](http://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
+Components are often described as "just functions" but in our view they need to be more than that to be useful. In React, components describe any composable behavior, and this includes rendering, lifecycle, and state. Some external libraries like [Relay](https://facebook.github.io/relay/) augment components with other responsibilities such as describing data dependencies. It is possible that those ideas might make it back into React too in some form.
 
 ### Common Abstraction {#common-abstraction}
 
@@ -126,7 +126,7 @@ We do, however, provide some global configuration on the build level. For exampl
 
 ### Beyond the DOM {#beyond-the-dom}
 
-We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](http://facebook.github.io/react-native/) is just as important both to Facebook and the community.
+We see the value of React in the way it allows us to write components that have fewer bugs and compose together well. DOM is the original rendering target for React but [React Native](https://facebook.github.io/react-native/) is just as important both to Facebook and the community.
 
 Being renderer-agnostic is an important design constraint of React. It adds some overhead in the internal representations. On the other hand, any improvements to the core translate across platforms.
 
@@ -148,7 +148,7 @@ Optimizing for search is also important because of our reliance on [codemods](ht
 
 [JSX](/docs/introducing-jsx.html) plays a similar role. While it is not required with React, we use it extensively at Facebook both for aesthetic and pragmatic reasons.
 
-In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](http://babeljs.io/docs/plugins/transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
+In our codebase, JSX provides an unambiguous hint to the tools that they are dealing with a React element tree. This makes it possible to add build-time optimizations such as [hoisting constant elements](https://babeljs.io/docs/en/babel-plugin-transform-react-constant-elements/), safely lint and codemod internal component usage, and [include JSX source location](https://github.com/facebook/react/pull/6771) into the warnings.
 
 ### Dogfooding {#dogfooding}
 
diff --git a/content/docs/faq-ajax.md b/content/docs/faq-ajax.md
index 102e1c07e..da84f449a 100644
--- a/content/docs/faq-ajax.md
+++ b/content/docs/faq-ajax.md
@@ -1,24 +1,24 @@
 ---
 id: faq-ajax
-title: AJAX and APIs
+title: AJAX и обращение к API
 permalink: docs/faq-ajax.html
 layout: docs
 category: FAQ
 ---
 
-### How can I make an AJAX call? {#how-can-i-make-an-ajax-call}
+### Как выполнить AJAX-запрос к серверу? {#how-can-i-make-an-ajax-call}
 
-You can use any AJAX library you like with React. Some popular ones are [Axios](https://github.com/axios/axios), [jQuery AJAX](https://api.jquery.com/jQuery.ajax/), and the browser built-in [window.fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+Вы можете использовать встроенный в браузер метод [window.fetch](https://learn.javascript.ru/fetch) или любую AJAX-библиотеку, например [Axios](https://github.com/axios/axios) или [jQuery AJAX](https://api.jquery.com/jQuery.ajax/).
 
-### Where in the component lifecycle should I make an AJAX call? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
+### Где в жизненном цикле компонента лучше делать запрос? {#where-in-the-component-lifecycle-should-i-make-an-ajax-call}
 
-You should populate data with AJAX calls in the [`componentDidMount`](/docs/react-component.html#mounting) lifecycle method. This is so you can use `setState` to update your component when the data is retrieved.
+Вы можете сделать AJAX-запрос в [`componentDidMount`](/docs/react-component.html#mounting). Когда вы получите данные, вызовите `setState`, чтобы передать их компоненту.
 
-### Example: Using AJAX results to set local state {#example-using-ajax-results-to-set-local-state}
+### Пример: Устанавливаем состояние из AJAX-запроса {#example-using-ajax-results-to-set-local-state}
 
-The component below demonstrates how to make an AJAX call in `componentDidMount` to populate local component state. 
+Компонент ниже показывает, как в `componentDidMount` задать внутреннее состояние из результата AJAX-запроса.
 
-The example API returns a JSON object like this:
+Допустим, наш API возвращает следующий JSON-объект:
 
 ```
 {
@@ -50,9 +50,8 @@ class MyComponent extends React.Component {
             items: result.items
           });
         },
-        // Note: it's important to handle errors here
-        // instead of a catch() block so that we don't swallow
-        // exceptions from actual bugs in components.
+        // Примечание: важно обрабатывать ошибки именно здесь, а не в блоке catch(),
+        // чтобы не перехватывать исключения из ошибок в самих компонентах.
         (error) => {
           this.setState({
             isLoaded: true,
@@ -65,9 +64,9 @@ class MyComponent extends React.Component {
   render() {
     const { error, isLoaded, items } = this.state;
     if (error) {
-      return <div>Error: {error.message}</div>;
+      return <div>Ошибка: {error.message}</div>;
     } else if (!isLoaded) {
-      return <div>Loading...</div>;
+      return <div>Загрузка...</div>;
     } else {
       return (
         <ul>
diff --git a/content/docs/faq-build.md b/content/docs/faq-build.md
index b071cc131..38f439474 100644
--- a/content/docs/faq-build.md
+++ b/content/docs/faq-build.md
@@ -1,32 +1,32 @@
 ---
 id: faq-build
-title: Babel, JSX, and Build Steps
+title: Babel, JSX и этапы сборки
 permalink: docs/faq-build.html
 layout: docs
 category: FAQ
 ---
 
-### Do I need to use JSX with React? {#do-i-need-to-use-jsx-with-react}
+### Необходимо ли в React использовать JSX? {#do-i-need-to-use-jsx-with-react}
 
-No! Check out ["React Without JSX"](/docs/react-without-jsx.html) to learn more.
+Нет! Прочтите ["React без JSX"](/docs/react-without-jsx.html) чтобы узнать подробнее.
 
-### Do I need to use ES6 (+) with React? {#do-i-need-to-use-es6--with-react}
+### Необходимо ли в React использовать ES6 (+)? {#do-i-need-to-use-es6--with-react}
 
-No! Check out ["React Without ES6"](/docs/react-without-es6.html) to learn more.
+Нет! Прочтите ["React без ES6"](/docs/react-without-es6.html) чтобы узнать подробнее.
 
-### How can I write comments in JSX? {#how-can-i-write-comments-in-jsx}
+### Как в JSX написать комментарий? {#how-can-i-write-comments-in-jsx}
 
 ```jsx
 <div>
-  {/* Comment goes here */}
-  Hello, {name}!
+  {/* Это комментарий */}
+  Привет, {name}!
 </div>
 ```
 
 ```jsx
 <div>
-  {/* It also works 
-  for multi-line comments. */}
-  Hello, {name}! 
+  {/* А это
+  многострочный комментарий. */}
+  Привет, {name}! 
 </div>
 ```
diff --git a/content/docs/faq-functions.md b/content/docs/faq-functions.md
index 62067d39c..be6535eb8 100644
--- a/content/docs/faq-functions.md
+++ b/content/docs/faq-functions.md
@@ -1,26 +1,26 @@
 ---
 id: faq-functions
-title: Passing Functions to Components
+title: Передача функций в компоненты
 permalink: docs/faq-functions.html
 layout: docs
 category: FAQ
 ---
 
-### How do I pass an event handler (like onClick) to a component? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component}
+### Как передать обработчик события (например, onClick) компоненту? {#how-do-i-pass-an-event-handler-like-onclick-to-a-component}
 
-Pass event handlers and other functions as props to child components:
+Передавайте обработчики событий и другие функции через пропсы дочерним компонентам:
 
 ```jsx
 <button onClick={this.handleClick}>
 ```
 
-If you need to have access to the parent component in the handler, you also need to bind the function to the component instance (see below).
+Если вы хотите иметь доступ к компоненту-родителю через обработчик, вам нужно привязать функцию к экземпляру компонента (см. ниже).  
 
-### How do I bind a function to a component instance? {#how-do-i-bind-a-function-to-a-component-instance}
+### Как привязать функцию к экземпляру компонента? {#how-do-i-bind-a-function-to-a-component-instance}
 
-There are several ways to make sure functions have access to component attributes like `this.props` and `this.state`, depending on which syntax and build steps you are using.
+В зависимости от того, какой синтаксис и подход к созданию компонентов вы используете, существует несколько способов удостовериться, что функции имеют доступ к таким атрибутам компонента, как `this.props` и `this.state`.
 
-#### Bind in Constructor (ES2015) {#bind-in-constructor-es2015}
+#### Привязка в конструкторе (ES2015) {#bind-in-constructor-es2015}
 
 ```jsx
 class Foo extends Component {
@@ -37,11 +37,11 @@ class Foo extends Component {
 }
 ```
 
-#### Class Properties (Stage 3 Proposal) {#class-properties-stage-3-proposal}
+#### Привязка в свойствах класса (предложение-кандидат) {#class-properties-stage-3-proposal}
 
 ```jsx
 class Foo extends Component {
-  // Note: this syntax is experimental and not standardized yet.
+  // Примечание: данный синтаксис находится на стадии разработки и ещё не стандартизирован.
   handleClick = () => {
     console.log('Click happened');
   }
@@ -51,7 +51,7 @@ class Foo extends Component {
 }
 ```
 
-#### Bind in Render {#bind-in-render}
+#### Привязка в методе render() {#bind-in-render}
 
 ```jsx
 class Foo extends Component {
@@ -64,11 +64,11 @@ class Foo extends Component {
 }
 ```
 
->**Note:**
+>**Примечание:**
 >
->Using `Function.prototype.bind` in render creates a new function each time the component renders, which may have performance implications (see below).
+>Использование `Function.prototype.bind` в render() создаёт новую функцию при каждом рендере компонента, что может повлиять на производительность (см. ниже).
 
-#### Arrow Function in Render {#arrow-function-in-render}
+#### Стрелочная функция в render() {#arrow-function-in-render}
 
 ```jsx
 class Foo extends Component {
@@ -81,19 +81,19 @@ class Foo extends Component {
 }
 ```
 
->**Note:**
+>**Примечание:**
 >
->Using an arrow function in render creates a new function each time the component renders, which may have performance implications (see below).
+>Использование стрелочной функции в render() создаёт новую функцию при каждой отрисовке компонента, что может повлиять на производительность (см. ниже).
 
-### Is it OK to use arrow functions in render methods? {#is-it-ok-to-use-arrow-functions-in-render-methods}
+### Можно ли использовать стрелочные функции в методе render()? {#is-it-ok-to-use-arrow-functions-in-render-methods}
 
-Generally speaking, yes, it is OK, and it is often the easiest way to pass parameters to callback functions.
+В целом, да. Зачастую это самый простой способ передать параметры через колбэки.
 
-If you do have performance issues, by all means, optimize!
+Если же у вас возникли проблемы с производительностью — оптимизируйте! 
 
-### Why is binding necessary at all? {#why-is-binding-necessary-at-all}
+### Зачем вообще нужна привязка? {#why-is-binding-necessary-at-all}
 
-In JavaScript, these two code snippets are **not** equivalent:
+В JavaScript эти два фрагмента кода **не** равнозначны:
 
 ```js
 obj.method();
@@ -104,50 +104,50 @@ var method = obj.method;
 method();
 ```
 
-Binding methods helps ensure that the second snippet works the same way as the first one.
+Привязка гарантирует, что второй фрагмент будет работать так же, как и первый. 
 
-With React, typically you only need to bind the methods you *pass* to other components. For example, `<button onClick={this.handleClick}>` passes `this.handleClick` so you want to bind it. However, it is unnecessary to bind the `render` method or the lifecycle methods: we don't pass them to other components.
+В React, как правило, привязывать нужно только те методы, которые вы *хотите передать* другим компонентам. Например, `<button onClick={this.handleClick}>` передаёт `this.handleClick`, поэтому его нужно привязать. Впрочем, метод `render` и методы жизненного цикла привязывать не обязательно, так как мы не передаём их в другие компоненты.
 
-[This post by Yehuda Katz](http://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) explains what binding is, and how functions work in JavaScript, in detail.
+[Ознакомьтесь со статьёй Йехуды Катц](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), в которой более подробно объяснено, что такое привязка, и как работают функции в JavaScript.
 
-### Why is my function being called every time the component renders? {#why-is-my-function-being-called-every-time-the-component-renders}
+### Почему моя функция вызывается каждый раз при отрисовке компонента? {#why-is-my-function-being-called-every-time-the-component-renders}
 
-Make sure you aren't _calling the function_ when you pass it to the component:
+Убедитесь, что вы не _вызываете функцию_, когда передаёте её компоненту:
 
 ```jsx
 render() {
-  // Wrong: handleClick is called instead of passed as a reference!
+  // Неправильно: вместо ссылки была вызвана функция handleClick!
   return <button onClick={this.handleClick()}>Click Me</button>
 }
 ```
 
-Instead, *pass the function itself* (without parens):
+Вместо этого *передайте саму функцию* (без скобок):
 
 ```jsx
 render() {
-  // Correct: handleClick is passed as a reference!
+  // Правильно: handleClick передаётся как ссылка!
   return <button onClick={this.handleClick}>Click Me</button>
 }
 ```
 
-### How do I pass a parameter to an event handler or callback? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback}
+### Как передать параметры обработчику событий или колбэку? {#how-do-i-pass-a-parameter-to-an-event-handler-or-callback}
 
-You can use an arrow function to wrap around an event handler and pass parameters:
+Чтобы передать параметры обработчику событий, оберните его в стрелочную функцию:
 
 ```jsx
 <button onClick={() => this.handleClick(id)} />
 ```
 
-This is equivalent to calling `.bind`:
+Это действие равносильно использованию `.bind`:
 
 ```jsx
 <button onClick={this.handleClick.bind(this, id)} />
 ```
 
-#### Example: Passing params using arrow functions {#example-passing-params-using-arrow-functions}
+#### Пример: Передача параметров с использованием стрелочных функций {#example-passing-params-using-arrow-functions}
 
 ```jsx
-const A = 65 // ASCII character code
+const A = 65 // ASCII-код символа
 
 class Alphabet extends React.Component {
   constructor(props) {
@@ -178,12 +178,12 @@ class Alphabet extends React.Component {
 }
 ```
 
-#### Example: Passing params using data-attributes {#example-passing-params-using-data-attributes}
+#### Пример: Передача параметров с использованием атрибутов данных {#example-passing-params-using-data-attributes}
 
-Alternately, you can use DOM APIs to store data needed for event handlers. Consider this approach if you need to optimize a large number of elements or have a render tree that relies on React.PureComponent equality checks.
+В качестве альтернативного подхода вы можете использовать DOM API, чтобы хранить необходимые для обработчиков событий данные. Рассмотрите этот подход, если вам нужно оптимизировать большое количество элементов или использовать дерево визуализации, полагающееся на компонент React.PureComponent для проверки на равенство.
 
 ```jsx
-const A = 65 // ASCII character code
+const A = 65 // ASCII-код символа
 
 class Alphabet extends React.Component {
   constructor(props) {
@@ -218,23 +218,23 @@ class Alphabet extends React.Component {
 }
 ```
 
-### How can I prevent a function from being called too quickly or too many times in a row? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}
+### Как предотвратить слишком быстрый или слишком частый вызов функции? {#how-can-i-prevent-a-function-from-being-called-too-quickly-or-too-many-times-in-a-row}
 
-If you have an event handler such as `onClick` or `onScroll` and want to prevent the callback from being fired too quickly, then you can limit the rate at which callback is executed. This can be done by using:
+Если вы используете обработчики событий, такие как `onClick`  или `onScroll`, и хотите предотвратить быстрое срабатывание колбэков, вы можете ограничить скорость выполнения колбэка. Для этого вы можете использовать: 
 
-- **throttling**: sample changes based on a time based frequency (eg [`_.throttle`](https://lodash.com/docs#throttle))
-- **debouncing**: publish changes after a period of inactivity (eg [`_.debounce`](https://lodash.com/docs#debounce))
-- **`requestAnimationFrame` throttling**: sample changes based on [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) (eg [`raf-schd`](https://github.com/alexreardon/raf-schd))
+- **тротлинг**: выборочные изменения, зависимые от частоты, основанной на времени (напр. [`_.throttle`](https://lodash.com/docs#throttle))
+- **дебаунсинг**: изменения, задействованные после некого периода бездействия (напр. [`_.debounce`](https://lodash.com/docs#debounce))
+- **тротлинг с помощью `requestAnimationFrame`**: выборочные изменения, основанные на [`requestAnimationFrame`](https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame) (напр. [`raf-schd`](https://github.com/alexreardon/raf-schd))
 
-See [this visualization](http://demo.nimius.net/debounce_throttle/) for a comparison of `throttle` and `debounce` functions.
+Взгляните на [визуализацию](https://demo.nimius.net/debounce_throttle/), которая сравнивает функции `throttle` и `debounce`.
 
-> Note:
+> Примечание:
 >
-> `_.debounce`, `_.throttle` and `raf-schd` provide a `cancel` method to cancel delayed callbacks. You should either call this method from `componentWillUnmount` _or_ check to ensure that the component is still mounted within the delayed function.
+> `_.debounce`, `_.throttle` и `raf-schd` предусматривают метод `cancel` для отмены отложенных колбэков. Вы должны либо вызвать этот метод из componentWillUnmount, _либо_ удостоверится, что компонент все ещё встроен в пределах отложенной функции.
 
 #### Throttle {#throttle}
 
-Throttling prevents a function from being called more than once in a given window of time. The example below throttles a "click" handler to prevent calling it more than once per second.
+Тротлинг предотвращает повторный вызов функции в заданный период времени. Этот метод был задействован в примере ниже, чтобы не допустить вызов обработчика "click" чаще чем раз в секунду.
 
 ```jsx
 import throttle from 'lodash.throttle';
@@ -262,7 +262,7 @@ class LoadMoreButton extends React.Component {
 
 #### Debounce {#debounce}
 
-Debouncing ensures that a function will not be executed until after a certain amount of time has passed since it was last called. This can be useful when you have to perform some expensive calculation in response to an event that might dispatch rapidly (eg scroll or keyboard events). The example below debounces text input with a 250ms delay.
+Дебаунсинг гарантирует, что функция не будет выполняться до тех пор, пока не пройдёт определённое количество времени с момента её последнего вызова. Этот метод пригодится, если вам нужно провести ресурсоёмкий расчёт в ответ на событие, которое может быстро повториться (например, прокрутка страницы или нажатие клавиш). В примере ниже для ввода текста используется задержка в 250 мс.
 
 ```jsx
 import debounce from 'lodash.debounce';
@@ -290,9 +290,9 @@ class Searchbox extends React.Component {
   }
 
   handleChange(e) {
-    // React pools events, so we read the value before debounce.
-    // Alternately we could call `event.persist()` and pass the entire event.
-    // For more info see reactjs.org/docs/events.html#event-pooling
+    // React помещает события в пул, поэтому значение считывается перед debounce.
+    // В качестве альтернативы мы могли бы вызвать `event.persist()` и передать событие целиком.
+    // Более подробно тема рассматривается здесь: reactjs.org/docs/events.html#event-pooling
     this.emitChangeDebounced(e.target.value);
   }
 
@@ -304,11 +304,11 @@ class Searchbox extends React.Component {
 
 #### `requestAnimationFrame` throttling {#requestanimationframe-throttling}
 
-[`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) is a way of queuing a function to be executed in the browser at the optimal time for rendering performance. A function that is queued with `requestAnimationFrame` will fire in the next frame. The browser will work hard to ensure that there are 60 frames per second (60 fps). However, if the browser is unable to it will naturally *limit* the amount of frames in a second. For example, a device might only be able to handle 30 fps and so you will only get 30 frames in that second. Using `requestAnimationFrame` for throttling is a useful technique in that it prevents you from doing more than 60 updates in a second. If you are doing 100 updates in a second this creates additional work for the browser that the user will not see anyway.
+[`requestAnimationFrame`](https://developer.mozilla.org/ru/docs/DOM/window.requestAnimationFrame) — это способ организации очереди функции, которая будет выполнена в браузере за оптимальное время для производительности отрисовки. Функция, поставленная в очередь с помощью `requestAnimationFrame`, запустится в следующем кадре. Браузер приложит все усилия, чтобы обеспечить 60 кадров в секунду (60 fps — frames per second). Однако, если браузер не в состоянии справиться с этой задачей, он естественным образом *ограничит* количество кадров в секунду. Например, если ваше устройство поддерживает только 30 fps, то и получите вы только 30 кадров. Использование `requestAnimationFrame` для тротлинга является очень полезным методом, так как помогает предотвратить выполнение более 60 обновлений в секунду. Если вы выполняете 100 обновлений в секунду, это создаёт лишнюю работу для браузера, которую пользователь все равно не заметит. 
 
->**Note:**
+>**Примечание:**
 >
->Using this technique will only capture the last published value in a frame. You can see an example of how this optimization works on [`MDN`](https://developer.mozilla.org/en-US/docs/Web/Events/scroll)
+>Использование этой техники захватит только последнее опубликованное значение в кадре. Пример работы данной оптимизации вы можете увидеть на [`MDN`](https://developer.mozilla.org/ru/docs/Web/Events/scroll)
 
 ```jsx
 import rafSchedule from 'raf-schd';
@@ -319,20 +319,20 @@ class ScrollListener extends React.Component {
 
     this.handleScroll = this.handleScroll.bind(this);
 
-    // Create a new function to schedule updates.
+    // Создаём новую функцию для планирования обновлений.
     this.scheduleUpdate = rafSchedule(
       point => this.props.onScroll(point)
     );
   }
 
   handleScroll(e) {
-    // When we receive a scroll event, schedule an update.
-    // If we receive many updates within a frame, we'll only publish the latest value.
+    // Планируем обновление при активизации события прокрутки.
+    // Если в рамках кадра мы получаем много обновлений, публикуем только последнее значение.
     this.scheduleUpdate({ x: e.clientX, y: e.clientY });
   }
 
   componentWillUnmount() {
-    // Cancel any pending updates since we're unmounting.
+    // Отменяем любые ожидающие обновления, так как компонент будет демонтирован.
     this.scheduleUpdate.cancel();
   }
 
@@ -349,6 +349,6 @@ class ScrollListener extends React.Component {
 }
 ```
 
-#### Testing your rate limiting {#testing-your-rate-limiting}
+#### Тестирование ограничения скорости {#testing-your-rate-limiting}
 
-When testing your rate limiting code works correctly it is helpful to have the ability to fast forward time. If you are using [`jest`](https://facebook.github.io/jest/) then you can use [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html) to fast forward time. If you are using `requestAnimationFrame` throttling then you may find [`raf-stub`](https://github.com/alexreardon/raf-stub) to be a useful tool to control the ticking of animation frames.
+Когда вы тестируете, что ваш код ограничения скорости работает правильно, полезно иметь возможность прокрутить время. Если вы используете [`jest`](https://facebook.github.io/jest/), вам может пригодиться [`mock timers`](https://facebook.github.io/jest/docs/en/timer-mocks.html). Если вы используете `requestAnimationFrame`, то [`raf-stub`](https://github.com/alexreardon/raf-stub) может оказаться полезным инструментом для управления смены кадров анимации.
diff --git a/content/docs/faq-state.md b/content/docs/faq-state.md
index 2765e3ae3..c2b7b6657 100644
--- a/content/docs/faq-state.md
+++ b/content/docs/faq-state.md
@@ -16,7 +16,7 @@ category: FAQ
 
 Here are some good resources for further reading on when to use `props` vs `state`:
 * [Props vs State](https://github.com/uberVU/react-guide/blob/master/props-vs-state.md)
-* [ReactJS: Props vs. State](http://lucybain.com/blog/2016/react-state-vs-pros/)
+* [ReactJS: Props vs. State](https://lucybain.com/blog/2016/react-state-vs-pros/)
 
 ### Why is `setState` giving me the wrong value? {#why-is-setstate-giving-me-the-wrong-value}
 
diff --git a/content/docs/faq-structure.md b/content/docs/faq-structure.md
index 4241a04dd..c001b8f4b 100644
--- a/content/docs/faq-structure.md
+++ b/content/docs/faq-structure.md
@@ -1,18 +1,18 @@
 ---
 id: faq-structure
-title: File Structure
+title: Структура файлов
 permalink: docs/faq-structure.html
 layout: docs
 category: FAQ
 ---
 
-### Is there a recommended way to structure React projects? {#is-there-a-recommended-way-to-structure-react-projects}
+### Есть ли рекомендации по структуре React-проектов? {#is-there-a-recommended-way-to-structure-react-projects}
 
-React doesn't have opinions on how you put files into folders. That said there are a few common approaches popular in the ecosystem you may want to consider.
+Единого мнения не существует. Однако, есть несколько популярных подходов, которые вы можете рассмотреть.
 
-#### Grouping by features or routes {#grouping-by-features-or-routes}
+#### Группировка по функциональности или маршруту {#grouping-by-features-or-routes}
 
-One common way to structure projects is locate CSS, JS, and tests together inside folders grouped by feature or route.
+Один из популярных подходов -- это размещение файлов CSS, JS и тестов в папках, сгруппированных по функциональности или маршруту.
 
 ```
 common/
@@ -35,11 +35,11 @@ profile/
   ProfileAPI.js
 ```
 
-The definition of a "feature" is not universal, and it is up to you to choose the granularity. If you can't come up with a list of top-level folders, you can ask the users of your product what major parts it consists of, and use their mental model as a blueprint.
+Понятие «функциональность» не является универсальным, поэтому выбор уровня детализации остается за вами. Если у вас не получается составить список папок верхнего уровня, вы можете спросить у пользователей вашего продукта, из каких основных частей он состоит, и взять модель мышления пользователей за образец.
 
-#### Grouping by file type {#grouping-by-file-type}
+#### Группировка по типу файла {#grouping-by-file-type}
 
-Another popular way to structure projects is to group similar files together, for example:
+Другим популярным способом структурирования проектов является группировка похожих файлов, например:
 
 ```
 api/
@@ -58,17 +58,16 @@ components/
   ProfileHeader.js
   ProfileHeader.css
 ```
+Некоторые предпочитают идти ещё дальше и размещать компоненты в различные папки в зависимости от их роли в приложении. К примеру, методология разработки [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) построена на этом принципе. Помните, что данные методологии следует рассматривать как полезные примеры, а не как строгие правила.
 
-Some people also prefer to go further, and separate components into different folders depending on their role in the application. For example, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) is a design methodology built on this principle. Remember that it's often more productive to treat such methodologies as helpful examples rather than strict rules to follow.
+#### Избегайте чрезмерной вложенности {#avoid-too-much-nesting}
 
-#### Avoid too much nesting {#avoid-too-much-nesting}
+Проблем, связанных с чрезмерной вложенностью папок в JavaScript-проектах, может возникнуть достаточно много. Одна из них -- это сложность контроля относительных импортов или обновления этих импортов при перемещении файлов. Если у вас нет веских оснований использовать глубокую вложенность папок, подумайте о том, чтобы ограничить себя максимум тремя или четырьмя уровнями вложенности в рамках одного проекта. Разумеется, это всего лишь рекомендация и она может быть не актуальна в случае вашего проекта.
 
-There are many pain points associated with deep directory nesting in JavaScript projects. It becomes harder to write relative imports between them, or to update those imports when the files are moved. Unless you have a very compelling reason to use a deep folder structure, consider limiting yourself to a maximum of three or four nested folders within a single project. Of course, this is only a recommendation, and it may not be relevant to your project.
+#### Не переусердствуйте {#dont-overthink-it}
 
-#### Don't overthink it {#dont-overthink-it}
+Если вы только начинаете проект, [не тратьте более 5 минут](https://ru.wikipedia.org/wiki/%D0%90%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B9_%D0%BF%D0%B0%D1%80%D0%B0%D0%BB%D0%B8%D1%87) на выбор структуры проекта. Выберите любой из перечисленных выше подходов (или придумайте свой собственный) и начните писать код! Есть большая вероятность, что вы вернётесь к переосмыслению структуры проекта после написания некоторого количества кода.
 
-If you're just starting a project, [don't spend more than five minutes](https://en.wikipedia.org/wiki/Analysis_paralysis) on choosing a file structure. Pick any of the above approaches (or come up with your own) and start writing code! You'll likely want to rethink it anyway after you've written some real code.
+Если вы чувствуете что окончательно застряли, начинайте с одной папки. Со временем, когда она станет настолько большой, что вам захочется отделить некоторые файлы от остальных, у вас будет достаточно знаний, чтобы определить, какие файлы вы редактируете чаще всего. Как правило, файлы, которые часто меняются вместе, следует держать ближе друг к другу. Этот принцип называется «совместное размещение».
 
-If you feel completely stuck, start by keeping all files in a single folder. Eventually it will grow large enough that you will want to separate some files from the rest. By that time you'll have enough knowledge to tell which files you edit together most often. In general, it is a good idea to keep files that often change together close to each other. This principle is called "colocation".
-
-As projects grow larger, they often use a mix of both of the above approaches in practice. So choosing the "right" one in the beginning isn't very important.
+На практике проекты часто используют сочетание нескольких вышеупомянутых подходов. Поэтому выбор «правильного» подхода в самом начале проекта не слишком важен.
\ No newline at end of file
diff --git a/content/docs/forwarding-refs.md b/content/docs/forwarding-refs.md
index 3318d8499..461e697f4 100644
--- a/content/docs/forwarding-refs.md
+++ b/content/docs/forwarding-refs.md
@@ -1,76 +1,75 @@
 ---
 id: forwarding-refs
-title: Forwarding Refs
+title: Перенаправление рефов
 permalink: docs/forwarding-refs.html
 ---
 
-Ref forwarding is a technique for automatically passing a [ref](/docs/refs-and-the-dom.html) through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries. The most common scenarios are described below.
+Перенаправление рефов позволяет автоматически передавать [реф](/docs/refs-and-the-dom.html) компонента одному из его дочерних элементов. Большинству компонентов перенаправление рефов не нужно, но оно может быть полезно, например, если вы пишете библиотеку. Рассмотрим наиболее частые сценарии.
 
-## Forwarding refs to DOM components {#forwarding-refs-to-dom-components}
+## Перенаправление рефов в DOM-компоненты {#forwarding-refs-to-dom-components}
 
-Consider a `FancyButton` component that renders the native `button` DOM element:
+Допустим, у нас есть компонент `FancyButton`, который рендерит нативный DOM-элемент `button`:
 `embed:forwarding-refs/fancy-button-simple.js`
 
-React components hide their implementation details, including their rendered output. Other components using `FancyButton` **usually will not need to** [obtain a ref](/docs/refs-and-the-dom.html) to the inner `button` DOM element. This is good because it prevents components from relying on each other's DOM structure too much.
+React-компоненты скрывают свои детали реализации, в том числе результат рендеринга. Реф элемента `button` из `FancyButton` **обычно и не требуется** другим компонентам. Это хорошо, поскольку такой подход не даёт компонентам излишне полагаться на структуру DOM друг друга.
 
-Although such encapsulation is desirable for application-level components like `FeedStory` or `Comment`, it can be inconvenient for highly reusable "leaf" components like `FancyButton` or `MyTextInput`. These components tend to be used throughout the application in a similar manner as a regular DOM `button` and `input`, and accessing their DOM nodes may be unavoidable for managing focus, selection, or animations.
+Такая инкапсуляция хорошо подходит компонентам, которые описывают некую законченную часть приложения, например, `FeedStory` или `Comment`. А вот в «маленьких», часто переиспользуемых компонентах, таких как `FancyButton` или `MyTextInput`, она может быть неудобной. Чтобы управлять фокусом, выделением и анимациями этих компонентов, придётся получить доступ к их DOM-узлам. 
 
-**Ref forwarding is an opt-in feature that lets some components take a `ref` they receive, and pass it further down (in other words, "forward" it) to a child.**
+**Перенаправление рефов позволяет взять `ref` из атрибутов компонента, и передать («перенаправить») его одному из дочерних компонентов.**
 
-In the example below, `FancyButton` uses `React.forwardRef` to obtain the `ref` passed to it, and then forward it to the DOM `button` that it renders:
+В данном примере мы используем `React.forwardRef` в компоненте `FancyButton`, чтобы получить реф и передать его в дочерний DOM-элемент `button`.
 
 `embed:forwarding-refs/fancy-button-simple-ref.js`
 
-This way, components using `FancyButton` can get a ref to the underlying `button` DOM node and access it if necessary—just like if they used a DOM `button` directly.
+Таким образом, когда мы будем применять `FancyButton` в других компонентах, мы сможем получить реф находящегося в нём DOM-узла `button` и использовать его так же, как если бы мы рендерили непосредственно `button`. 
 
-Here is a step-by-step explanation of what happens in the above example:
+Рассмотрим этот пример пошагово:
 
-1. We create a [React ref](/docs/refs-and-the-dom.html) by calling `React.createRef` and assign it to a `ref` variable.
-1. We pass our `ref` down to `<FancyButton ref={ref}>` by specifying it as a JSX attribute.
-1. React passes the `ref` to the `(props, ref) => ...` function inside `forwardRef` as a second argument.
-1. We forward this `ref` argument down to `<button ref={ref}>` by specifying it as a JSX attribute.
-1. When the ref is attached, `ref.current` will point to the `<button>` DOM node.
+1. Мы создаём [реф](/docs/refs-and-the-dom.html), вызвав `React.createRef` и записываем его в переменную `ref`.
+1. Мы передаём переменную `ref` в `<FancyButton ref={ref}>`, указывая её в JSX-атрибуте.
+1. React передаёт `ref` в функцию `(props, ref) => ...` внутри `forwardRef` в качестве второго аргумента.
+1. Мы передаём аргумент `ref` дальше в `<button ref={ref}>`, указывая его в JSX-атрибуте.
+1. После привязки рефа `ref.current` будет указывать на DOM-узел `<button>`.
 
->Note
+>Примечание
 >
->The second `ref` argument only exists when you define a component with `React.forwardRef` call. Regular function or class components don't receive the `ref` argument, and ref is not available in props either.
+>Второй аргумент `ref` существует только в том случае, если вы создаёте компонент через функцию `React.forwardRef`. Обычные функциональные или классовые компоненты не получают `ref` в качестве аргумента или пропа. 
 >
->Ref forwarding is not limited to DOM components. You can forward refs to class component instances, too.
+>Перенаправить реф можно не только в DOM-компонент, но и в экземпляр классового компонента.
 
-## Note for component library maintainers {#note-for-component-library-maintainers}
+## Примечание для разработчиков библиотек компонентов {#note-for-component-library-maintainers}
 
-**When you start using `forwardRef` in a component library, you should treat it as a breaking change and release a new major version of your library.** This is because your library likely has an observably different behavior (such as what refs get assigned to, and what types are exported), and this can break apps and other libraries that depend on the old behavior.
+**Если вы впервые использовали `forwardRef` в компоненте библиотеки, то следует сделать новую версию мажорной и указать на обратную несовместимость изменений.** Причина этого в том, что, скорее всего, компонент станет вести себя заметно иначе (например, изменится тип экспортируемых данных и элемент, к которому привязан реф), в результате чего приложения и другие библиотеки, полагающиеся на старое поведение, перестанут работать.
 
-Conditionally applying `React.forwardRef` when it exists is also not recommended for the same reasons: it changes how your library behaves and can break your users' apps when they upgrade React itself.
+По этой же причине мы рекомендуем не вызывать `React.forwardRef` условно (то есть сперва проверяя, что эта функция определена). Это изменит поведение вашей библиотеки и приложения ваших пользователей могут перестать работать при обновлении самого React.
+## Перенаправление рефов в компонентах высшего порядка {#forwarding-refs-in-higher-order-components}
 
-## Forwarding refs in higher-order components {#forwarding-refs-in-higher-order-components}
-
-This technique can also be particularly useful with [higher-order components](/docs/higher-order-components.html) (also known as HOCs). Let's start with an example HOC that logs component props to the console:
+Особенно полезным перенаправление может оказаться в [компонентах высшего порядка](/docs/higher-order-components.html) (также известных как HOC). Начнём с примера, в котором HOC выводит пропсы компонента в консоль:
 `embed:forwarding-refs/log-props-before.js`
 
-The "logProps" HOC passes all `props` through to the component it wraps, so the rendered output will be the same. For example, we can use this HOC to log all props that get passed to our "fancy button" component:
+Компонент высшего порядка `logProps` передаёт все пропсы в компонент, который он оборачивает, так что рендерить они будут одно и то же. С его помощью мы будем выводить в консоль все пропсы, переданные в наш компонент с кнопкой: 
 `embed:forwarding-refs/fancy-button.js`
 
-There is one caveat to the above example: refs will not get passed through. That's because `ref` is not a prop. Like `key`, it's handled differently by React. If you add a ref to a HOC, the ref will refer to the outermost container component, not the wrapped component.
+Обратите внимание, что в этом примере не будут передаваться рефы. Так происходит, потому что `ref` это не проп. Подобно `key`, React обрабатывает `ref` особым образом. Если вы укажите реф для HOC, он привяжется к ближайшему к корню контейнера, а не к переданному в HOC компоненту.
 
-This means that refs intended for our `FancyButton` component will actually be attached to the `LogProps` component:
+Следовательно, рефы, предназначенные для компонента `FancyButton`, окажутся привязанными к компоненту `LogProps`:
 `embed:forwarding-refs/fancy-button-ref.js`
 
-Fortunately, we can explicitly forward refs to the inner `FancyButton` component using the `React.forwardRef` API. `React.forwardRef` accepts a render function that receives `props` and `ref` parameters and returns a React node. For example:
+К счастью, мы можем явно перенаправить рефы на компонент `FancyButton` внутри HOC при помощи API `React.forwardRef`. В `React.forwardRef` передаётся функция рендеринга, которая принимает аргументы `props` и `ref`, а возвращает узел React. Например:
 `embed:forwarding-refs/log-props-after.js`
 
-## Displaying a custom name in DevTools {#displaying-a-custom-name-in-devtools}
+## Изменение названия в инструментах разработки {#displaying-a-custom-name-in-devtools}
 
-`React.forwardRef` accepts a render function. React DevTools uses this function to determine what to display for the ref forwarding component.
+В `React.forwardRef` передаётся функция рендеринга. Эта функция определяет, как будет называться компонент в инструментах разработки.
 
-For example, the following component will appear as "*ForwardRef*" in the DevTools:
+Например, вот этот компонент будет называться «*ForwardRef*»:
 
 `embed:forwarding-refs/wrapped-component.js`
 
-If you name the render function, DevTools will also include its name (e.g. "*ForwardRef(myFunction)*"):
+Если присвоить имя функции рендеринга, то оно появится в названии компонента в инструментах разработки (например, «*ForwardRef(myFunction)*»):
 
 `embed:forwarding-refs/wrapped-component-with-function-name.js`
 
-You can even set the function's `displayName` property to include the component you're wrapping:
+Можно даже назначить функции свойство `displayName` и указать в нём, какой именно компонент обёрнут в HOC:
 
 `embed:forwarding-refs/customized-display-name.js`
diff --git a/content/docs/fragments.md b/content/docs/fragments.md
index 04de0463b..7c7b20955 100644
--- a/content/docs/fragments.md
+++ b/content/docs/fragments.md
@@ -1,10 +1,10 @@
 ---
 id: fragments
-title: Fragments
+title: Фрагменты
 permalink: docs/fragments.html
 ---
 
-A common pattern in React is for a component to return multiple elements. Fragments let you group a list of children without adding extra nodes to the DOM.
+Возврат нескольких элементов из компонента является распространённой практикой в React. Фрагменты позволяют формировать список дочерних элементов, не создавая лишних узлов в DOM.
 
 ```js
 render() {
@@ -18,11 +18,11 @@ render() {
 }
 ```
 
-There is also a new [short syntax](#short-syntax) for declaring them, but it isn't supported by all popular tools yet.
+Также существует [сокращённая запись](#short-syntax), однако не все популярные инструменты поддерживают её.
 
-## Motivation {#motivation}
+## Мотивация {#motivation}
 
-A common pattern is for a component to return a list of children. Take this example React snippet:
+Возврат списка дочерних элементов из компонента – распространённая практика. Рассмотрим пример на React:
 
 ```jsx
 class Table extends React.Component {
@@ -38,7 +38,7 @@ class Table extends React.Component {
 }
 ```
 
-`<Columns />` would need to return multiple `<td>` elements in order for the rendered HTML to be valid. If a parent div was used inside the `render()` of `<Columns />`, then the resulting HTML will be invalid.
+`<Columns />` должен вернуть несколько элементов `<td>`, чтобы HTML получился валидным. Если использовать div как родительский элемент внутри метода `render()` компонента `<Columns />`, то HTML окажется невалидным.
 
 ```jsx
 class Columns extends React.Component {
@@ -53,7 +53,7 @@ class Columns extends React.Component {
 }
 ```
 
-results in a `<Table />` output of:
+результатом вывода `<Table />` будет:
 
 ```jsx
 <table>
@@ -66,9 +66,9 @@ results in a `<Table />` output of:
 </table>
 ```
 
-Fragments solve this problem.
+Фрагменты решают эту проблему.
 
-## Usage {#usage}
+## Использование {#usage}
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -83,7 +83,7 @@ class Columns extends React.Component {
 }
 ```
 
-which results in a correct `<Table />` output of:
+результатом будет правильный вывод `<Table />`:
 
 ```jsx
 <table>
@@ -94,9 +94,9 @@ which results in a correct `<Table />` output of:
 </table>
 ```
 
-### Short Syntax {#short-syntax}
+### Сокращённая запись {#short-syntax}
 
-There is a new, shorter syntax you can use for declaring fragments. It looks like empty tags:
+Существует сокращённая запись объявления фрагментов. Она выглядит как пустые теги:
 
 ```jsx{4,7}
 class Columns extends React.Component {
@@ -111,20 +111,20 @@ class Columns extends React.Component {
 }
 ```
 
-You can use `<></>` the same way you'd use any other element except that it doesn't support keys or attributes.
+Можно использовать `<></>` так же, как используется любой другой элемент. Однако такая запись не поддерживает ключи или атрибуты.
 
-Note that **[many tools don't support it yet](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)** so you might want to explicitly write `<React.Fragment>` until the tooling catches up.
+Обратите внимание, что **[большинство инструментов ещё не поддерживают сокращённую запись](/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax)**, поэтому можно явно указывать `<React.Fragment>`, пока не появится поддержка.
 
-### Keyed Fragments {#keyed-fragments}
+### Фрагменты с ключами {#keyed-fragments}
 
-Fragments declared with the explicit `<React.Fragment>` syntax may have keys. A use case for this is mapping a collection to an array of fragments -- for example, to create a description list:
+Фрагменты, объявленные с помощью `<React.Fragment>`, могут иметь ключи. Например, их можно использовать при создании списка определений, преобразовав коллекцию в массив фрагментов.
 
 ```jsx
 function Glossary(props) {
   return (
     <dl>
       {props.items.map(item => (
-        // Without the `key`, React will fire a key warning
+        // Без указания атрибута `key`, React выдаст предупреждение об его отсутствии
         <React.Fragment key={item.id}>
           <dt>{item.term}</dt>
           <dd>{item.description}</dd>
@@ -135,8 +135,8 @@ function Glossary(props) {
 }
 ```
 
-`key` is the only attribute that can be passed to `Fragment`. In the future, we may add support for additional attributes, such as event handlers.
+`key` – это единственный атрибут, допустимый у `Fragment`. В будущем мы планируем добавить поддержку дополнительных атрибутов, например, обработчиков событий.
 
-### Live Demo {#live-demo}
+### Живой пример {#live-demo}
 
-You can try out the new JSX fragment syntax with this [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
+Новый синтаксис JSX фрагментов можно попробовать на [CodePen](https://codepen.io/reactjs/pen/VrEbjE?editors=1000).
diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md
index 5625bb3cd..6f7c55a32 100644
--- a/content/docs/getting-started.md
+++ b/content/docs/getting-started.md
@@ -1,6 +1,6 @@
 ---
 id: getting-started
-title: Getting Started
+title: Начало работы
 permalink: docs/getting-started.html
 next: add-react-to-a-website.html
 redirect_from:
@@ -18,109 +18,109 @@ redirect_from:
   - "docs/environments.html"
 ---
 
-This page is an overview of the React documentation and related resources.
+На этой странице мы сделаем небольшой обзор документации и других ресурсов, которые могут пригодиться при первом использовании React.
 
-**React** is a JavaScript library for building user interfaces. Learn what React is all about on [our homepage](/) or [in the tutorial](/tutorial/tutorial.html).
+**React** — это JavaScript-библиотека для разработки пользовательского интерфейса. Чтобы составить первое впечатление о React, зайдите на [главную страницу](/) или во [введение](/tutorial/tutorial.html).
 
 ---
 
-- [Try React](#try-react)
-- [Learn React](#learn-react)
-- [Staying Informed](#staying-informed)
-- [Versioned Documentation](#versioned-documentation)
-- [Something Missing?](#something-missing)
+- [Пробуем React](#try-react)
+- [Изучаем React](#learn-react)
+- [Информация о релизах](#staying-informed)
+- [Документация на старые версии React](#versioned-documentation)
+- [Обратная связь](#something-missing)
 
-## Try React {#try-react}
+## Пробуем React {#try-react}
 
-React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need.** Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.
+React изначально был спроектирован так, чтобы его можно было внедрять постепенно. Другими словами, **вы можете начать с малого и использовать только тот функционал React, который необходим вам в данный момент.** Информация в этом разделе будет полезна в любой ситуации: при первом знакомстве с React, при создании простой динамической HTML-страницы и даже при проектировании сложного React-приложения.
 
-### Online Playgrounds {#online-playgrounds}
+### Онлайн-песочницы {#online-playgrounds}
 
-If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world) or [CodeSandbox](https://codesandbox.io/s/new).
+Если вы просто хотите немного поиграть с React, попробуйте онлайн-песочницу. Например, вот простейший шаблон на [CodePen](codepen://hello-world) или [CodeSandbox](https://codesandbox.io/s/new).
 
-If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos.
+Если вы предпочитаете работать в своем редакторе, [скачайте тестовый HTML-файл](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), добавьте в него код и запустите на своем компьютере. При открытии тестового файла браузер преобразует JSX в обычный код на JavaScript. Такое преобразование достаточно медленно, поэтому мы рекомендуем использовать этот файл только для простых демонстрационных примеров. 
 
-### Add React to a Website {#add-react-to-a-website}
+### Добавляем React на сайт {#add-react-to-a-website}
 
-You can [add React to an HTML page in one minute](/docs/add-react-to-a-website.html). You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
+Вы можете [добавить React на свой сайт буквально за одну минуту](/docs/add-react-to-a-website.html). После этого можно разместить на сайте несколько динамических виджетов и постепенно наращивать использование React в своём проекте.
 
-### Create a New React App {#create-a-new-react-app}
+### Создаём React-приложение {#create-a-new-react-app}
 
-When starting a React project, [a simple HTML page with script tags](/docs/add-react-to-a-website.html) might still be the best option. It only takes a minute to set up!
+Когда вы начинаете проект на React, [то простая HTML-страница со script-тегами](/docs/add-react-to-a-website.html) может быть лучшим вариантом. Её можно сделать за минуту.
 
-As your application grows, you might want to consider a more integrated setup. There are [several JavaScript toolchains](/docs/create-a-new-react-app.html) we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem.
+Однако для разработки более развесистого приложения вам, скорее всего, придётся рассмотреть другие варианты настройки рабочего окружения, объединяющие в себе различные технологии. Вот [несколько наборов JavaScript-инструментов](/docs/create-a-new-react-app.html), которые мы рекомендуем для создания сложных приложений. Каждый из этих инструментов может работать практически без настройки и позволит раскрыть все возможности экосистемы React. 
 
-## Learn React {#learn-react}
+## Изучаем React {#learn-react}
 
-People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
+Люди приходят к React с разным опытом и стилем обучения. Некоторые предпочитают учиться на ходу, а кому-то нравится сначала овладеть теорией. В любом случае мы надеемся, что этот раздел будет для вас полезен.
 
-* If you prefer to **learn by doing**, start with our [practical tutorial](/tutorial/tutorial.html).
-* If you prefer to **learn concepts step by step**, start with our [guide to main concepts](/docs/hello-world.html).
+* Если вам больше нравится **учиться на ходу**, начните с [введения](/tutorial/tutorial.html).
+* Если вы хотите **сначала овладеть теорией**, то начните с [пошагового описания React](/docs/hello-world.html).
 
-Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you *will* get the hang of it.
+React сначала может показаться сложным, но приложив усилие, вы *обязательно* его освоите. Терпение и труд все перетрут!
 
-### First Examples {#first-examples}
+### Простые примеры {#first-examples}
 
-The [React homepage](/) contains a few small React examples with a live editor. Even if you don't know anything about React yet, try changing their code and see how it affects the result.
+На [главной странице](/) есть несколько простых примеров использования React. Их можно отредактировать и запустить прямо на нашем сайте. Даже если вы пока ничего не знаете о React, попробуйте что-нибудь поменять в коде и посмотрите на результат.
 
-### React for Beginners {#react-for-beginners}
+### React для новичков {#react-for-beginners}
 
-If you feel that the React documentation goes at a faster pace than you're comfortable with, check out [this overview of React by Tania Rascia](https://www.taniarascia.com/getting-started-with-react/). It introduces the most important React concepts in a detailed, beginner-friendly way. Once you're done, give the documentation another try!
+Если документация кажется вам сложной и усваивается не так быстро, как хотелось, прочтите [блог Тани Раша (Tania Rascia)](https://www.taniarascia.com/getting-started-with-react/). Таня написала о том, как начала работать с React и доходчиво рассказала об его основных принципах. Попробуйте почитать этот пост, а потом вернуться к документации.
 
-### React for Designers {#react-for-designers}
+### React для дизайнеров {#react-for-designers}
 
-If you're coming from a design background, [these resources](http://reactfordesigners.com/) are a great place to get started.
+Если вы в первую очередь занимаетесь дизайном, вам могут пригодиться ресурсы, собранные [на этом сайте](https://reactfordesigners.com/).
 
-### JavaScript Resources {#javascript-resources}
+### Ресурсы по JavaScript {#javascript-resources}
 
-The React documentation assumes some familiarity with programming in the JavaScript language. You don't have to be an expert, but it's harder to learn both React and JavaScript at the same time.
+Изучение React предполагает наличие некоторых знаний о программировании на языке JavaScript. Глубоких знаний не потребуется, но учить React и JavaScript одновременно может быть тяжело. 
 
-We recommend going through [this JavaScript overview](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.
+Чтобы освежить ваши знания, мы рекомендуем просмотреть [обзор языка JavaScript на сайте mozilla.org](https://developer.mozilla.org/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Для этого потребуется от 30 минут до часа. Надеемся, что теперь вы будете чувствовать себя более комфортно, изучая React.
 
->Tip
+>Совет
 >
->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](http://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help.
+>Если всё-таки у вас есть пробелы в знаниях, то сайты [MDN](https://developer.mozilla.org/ru/docs/Web/JavaScript) и [javascript.info](https://javascript.info/) будут отличными источниками информации о JavaScript. Также всегда можно задать вопрос или попросить помощи на [форумах нашего сообщества](/community/support.html).
 
-### Practical Tutorial {#practical-tutorial}
+### Введение {#practical-tutorial}
 
-If you prefer to **learn by doing,** check out our [practical tutorial](/tutorial/tutorial.html). In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you're not building games -- but give it a chance. The techniques you'll learn in the tutorial are fundamental to building *any* React apps, and mastering it will give you a much deeper understanding.
+Если вы предпочитаете **изучать технологии на практике**, воспользуйтесь [введением](/tutorial/tutorial.html). В нём описан процесс разработки игры в крестики-нолики. Даже если вы не планируете программировать игры, всё равно уделите внимание этому разделу документации. Приёмы, которые вы освоите — фундамент для разработки *любых* приложений на React. [Введение](/tutorial/tutorial.html) даст вам более глубокое понимание React. 
 
-### Step-by-Step Guide {#step-by-step-guide}
+### Пошаговое описание React {#step-by-step-guide}
 
-If you prefer to **learn concepts step by step,** our [guide to main concepts](/docs/hello-world.html) is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along.
+Если вам больше нравится **познавать предмет шаг за шагом**, то лучше начать с [пошагового описания React](/docs/hello-world.html). Каждая последующая глава описания опирается на знания из предыдущей, поэтому вы ничего не упустите в процессе изучения материала.
 
-### Thinking in React {#thinking-in-react}
+### Философия React {#thinking-in-react}
 
-Many React users credit reading [Thinking in React](/docs/thinking-in-react.html) as the moment React finally "clicked" for them. It's probably the oldest React walkthrough but it's still just as relevant.
+Многие вспоминают, как чтение [Философии React](/docs/thinking-in-react.html) поставило всё на свои места. Пускай это и самое древнее руководство по React, но оно всё так же актуально.
 
-### Recommended Courses {#recommended-courses}
+### Рекомендуемые курсы {#recommended-courses}
 
-Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain [a list of commonly recommended resources](/community/courses.html), some of which are free.
+Некоторым больше нравится учиться по книгам или видеокурсам от сторонних авторов, а не по официальной документации. Для них мы разместили [список рекомендуемых ресурсов](/community/courses.html). Часть этих ресурсов бесплатны.
 
-### Advanced Concepts {#advanced-concepts}
+### Углублённое изучение React {#advanced-concepts}
 
-Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html).
+После того, как вы изучите [основные принципы React](#main-concepts) и немного поиграетесь с ним, можно углубиться в более продвинутые темы документации. В этих главах описан полезный, но не так часто используемый функционал React. Например, [контекст](/docs/context.html) и [рефы](/docs/refs-and-the-dom.html).
 
-### API Reference {#api-reference}
+### Справочник API {#api-reference}
 
-This documentation section is useful when you want to learn more details about a particular React API. For example, [`React.Component` API reference](/docs/react-component.html) can provide you with details on how `setState()` works, and what different lifecycle methods are useful for.
+Этот раздел документации описывает нюансы использования React API. Например, в главе [`React.Component` API](/docs/react-component.html) рассказывается о работе функции `setState()` и различных методах управления жизненным циклом компонентов.
 
-### Glossary and FAQ {#glossary-and-faq}
+### Глоссарий и FAQ {#glossary-and-faq}
 
-The [glossary](/docs/glossary.html) contains an overview of the most common terms you'll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including [making AJAX requests](/docs/faq-ajax.html), [component state](/docs/faq-state.html), and [file structure](/docs/faq-structure.html).
+[Глоссарий](/docs/glossary.html) содержит перечень наиболее употребляемых терминов, которые встречаются в документации. Также есть раздел FAQ. В нём короткие вопросы и ответы на самые животрепещущие темы, такие как [использование AJAX](/docs/faq-ajax.html), [состояние компонентов](/docs/faq-state.html) или [структура проекта](/docs/faq-structure.html).
 
-## Staying Informed {#staying-informed}
+## Информация о релизах {#staying-informed}
 
-The [React blog](/blog/) is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.
+В [официальном блоге](/blog/) мы сообщаем о новых релизах React. Все самые важные новости, включая списки изменений и нерекомендуемых к использованию функций, публикуются в первую очередь здесь.
 
-You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog.
+Также вы можете подписаться на наш аккаунт [@reactjs](https://twitter.com/reactjs) в Twitter. Однако вы не пропустите ничего важного, если будете следить только за блогом.
 
-Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react) page.
+В блоге мы пишем не о всех релизах React, но всегда есть возможность посмотреть полный список изменений [в файле `CHANGELOG.md` в репозитории React](https://github.com/facebook/react/blob/master/CHANGELOG.md), а также на странице [Релизы](https://github.com/facebook/react).
 
-## Versioned Documentation {#versioned-documentation}
+## Документация на старые версии React {#versioned-documentation}
 
-This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation [on a separate page](/versions). Note that documentation for past versions is snapshotted at the time of the release, and isn't being continuously updated.
+Документация на сайте всегда соответствует последнему стабильному релизу. Начиная с 16 версии React, мы публикуем старые версии документации [на отдельной странице](/versions). Учтите, что копии документации создаются в момент выхода релиза и больше не обновляются.
 
-## Something Missing? {#something-missing}
+## Обратная связь {#something-missing}
 
-If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation repository](https://github.com/reactjs/reactjs.org/issues/new) with your suggestions for improvement, or tweet at the [@reactjs account](https://twitter.com/reactjs). We love hearing from you!
+Если вы обнаружите в документации какие-нибудь неточности, ошибки или любые другие непонятки, пожалуйста, [создайте ишью в репозитории документации](https://github.com/reactjs/reactjs.org/issues/new) с указанием способа решения проблемы или просто [чирикните нам в Twitter @reactjs](https://twitter.com/reactjs). Мы всегда рады слышать вас!
diff --git a/content/docs/handling-events.md b/content/docs/handling-events.md
index a8d3a1f51..4abac4892 100644
--- a/content/docs/handling-events.md
+++ b/content/docs/handling-events.md
@@ -1,6 +1,6 @@
 ---
 id: handling-events
-title: Handling Events
+title: Обработка событий
 permalink: docs/handling-events.html
 prev: state-and-lifecycle.html
 next: conditional-rendering.html
@@ -8,57 +8,57 @@ redirect_from:
   - "docs/events-ko-KR.html"
 ---
 
-Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:
+Обработка событий в React-элементах очень похожа на обработку событий в DOM-элементах. Но есть несколько синтаксических отличий:
 
-* React events are named using camelCase, rather than lowercase.
-* With JSX you pass a function as the event handler, rather than a string.
+* События в React именуются в стиле camelCase вместо нижнего регистра.
+* С JSX вы передаёте функцию как обработчик события вместо строки.
 
-For example, the HTML:
+Например, в HTML:
 
 ```html
 <button onclick="activateLasers()">
-  Activate Lasers
+  Активировать лазеры
 </button>
 ```
 
-is slightly different in React:
+В React немного иначе:
 
 ```js{1}
 <button onClick={activateLasers}>
-  Activate Lasers
+  Активировать лазеры
 </button>
 ```
 
-Another difference is that you cannot return `false` to prevent default behavior in React. You must call `preventDefault` explicitly. For example, with plain HTML, to prevent the default link behavior of opening a new page, you can write:
+Еще одно отличие — в React нельзя предотвратить обработчик события по умолчанию, вернув `false`. Нужно явно вызвать `preventDefault`. Например, в обычном HTML, чтобы отменить выполнение встроенного обработчика события у ссылки, которое открывает новую страницу, можно написать:
 
 ```html
-<a href="#" onclick="console.log('The link was clicked.'); return false">
-  Click me
+<a href="#" onclick="console.log('По ссылке кликнули.'); return false">
+  Кликни меня
 </a>
 ```
 
-In React, this could instead be:
+В React это будет выглядеть так:
 
 ```js{2-5,8}
 function ActionLink() {
   function handleClick(e) {
     e.preventDefault();
-    console.log('The link was clicked.');
+    console.log('По ссылке кликнули.');
   }
 
   return (
     <a href="#" onClick={handleClick}>
-      Click me
+      Кликни меня
     </a>
   );
 }
 ```
 
-Here, `e` is a synthetic event. React defines these synthetic events according to the [W3C spec](https://www.w3.org/TR/DOM-Level-3-Events/), so you don't need to worry about cross-browser compatibility. See the [`SyntheticEvent`](/docs/events.html) reference guide to learn more.
+В приведённом выше коде `e` — это синтетическое событие. React определяет синтетические события в соответствии со [спецификацией W3C](https://www.w3.org/TR/DOM-Level-3-Events/), поэтому не волнуйтесь о кроссбраузерности. Посмотрите [руководство о `SyntheticEvent`](/docs/events.html), чтобы узнать о них больше.
 
-When using React you should generally not need to call `addEventListener` to add listeners to a DOM element after it is created. Instead, just provide a listener when the element is initially rendered.
+При использовании React обычно не нужно вызывать `addEventListener`, чтобы добавить обработчики в DOM-элемент после его создания. Вместо этого добавьте обработчик сразу после того, как элемент отрендерился.
 
-When you define a component using an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), a common pattern is for an event handler to be a method on the class. For example, this `Toggle` component renders a button that lets the user toggle between "ON" and "OFF" states:
+В компоненте, определённом с помощью [ES6-класса](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes), в качестве обработчика события обычно выступает один из методов класса. Например, этот компонент `Toggle` рендерит кнопку, которая позволяет пользователю переключать состояния между «Включено» и «Выключено»:
 
 ```js{6,7,10-14,18}
 class Toggle extends React.Component {
@@ -66,7 +66,7 @@ class Toggle extends React.Component {
     super(props);
     this.state = {isToggleOn: true};
 
-    // This binding is necessary to make `this` work in the callback
+    // Эта привязка обязательна для работы `this` в колбэке.
     this.handleClick = this.handleClick.bind(this);
   }
 
@@ -79,7 +79,7 @@ class Toggle extends React.Component {
   render() {
     return (
       <button onClick={this.handleClick}>
-        {this.state.isToggleOn ? 'ON' : 'OFF'}
+        {this.state.isToggleOn ? 'Включено' : 'Выключено'}
       </button>
     );
   }
@@ -91,64 +91,64 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xEmzGg?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/xEmzGg?editors=0010)
 
-You have to be careful about the meaning of `this` in JSX callbacks. In JavaScript, class methods are not [bound](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_objects/Function/bind) by default. If you forget to bind `this.handleClick` and pass it to `onClick`, `this` will be `undefined` when the function is actually called.
+При обращении к `this` в JSX-колбэках необходимо учитывать, что методы класса в JavaScript по умолчанию не [привязаны](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) к контексту. Если вы забудете привязать метод `this.handleClick` и передать его в `onClick`, значение `this` будет `undefined` в момент вызова функции.
 
-This is not React-specific behavior; it is a part of [how functions work in JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Generally, if you refer to a method without `()` after it, such as `onClick={this.handleClick}`, you should bind that method.
+Дело не в работе React, это часть того, [как работают функции в JavaScript](https://www.smashingmagazine.com/2014/01/understanding-javascript-function-prototype-bind/). Обычно, если ссылаться на метод без `()` после него, например, `onClick={this.handleClick}`, этот метод нужно привязать.
 
-If calling `bind` annoys you, there are two ways you can get around this. If you are using the experimental [public class fields syntax](https://babeljs.io/docs/plugins/transform-class-properties/), you can use class fields to correctly bind callbacks:
+Если вам не по душе `bind`, существует два других способа. Если вы пользуетесь экспериментальным [синтаксисом общедоступных полей классов](https://babeljs.io/docs/plugins/transform-class-properties/), вы можете использовать его, чтобы правильно привязать колбэки:
 
 ```js{2-6}
 class LoggingButton extends React.Component {
-  // This syntax ensures `this` is bound within handleClick.
-  // Warning: this is *experimental* syntax.
+  // Такой синтаксис гарантирует, что `this` привязан к handleClick.
+  // Предупреждение: это экспериментальный синтаксис
   handleClick = () => {
-    console.log('this is:', this);
+    console.log('значение this:', this);
   }
 
   render() {
     return (
       <button onClick={this.handleClick}>
-        Click me
+        Кликни по мне
       </button>
     );
   }
 }
 ```
 
-This syntax is enabled by default in [Create React App](https://github.com/facebookincubator/create-react-app).
+Такой синтаксис доступен в [Create React App](https://github.com/facebookincubator/create-react-app) по умолчанию.
 
-If you aren't using class fields syntax, you can use an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) in the callback:
+Если вы не пользуетесь синтаксисом полей, можете попробовать [стрелочные функции](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) в колбэке:
 
 ```js{7-9}
 class LoggingButton extends React.Component {
   handleClick() {
-    console.log('this is:', this);
+    console.log('значение this:', this);
   }
 
   render() {
-    // This syntax ensures `this` is bound within handleClick
+    // Такой синтаксис гарантирует, что `this` привязан к handleClick.
     return (
       <button onClick={(e) => this.handleClick(e)}>
-        Click me
+        Кликни по мне
       </button>
     );
   }
 }
 ```
 
-The problem with this syntax is that a different callback is created each time the `LoggingButton` renders. In most cases, this is fine. However, if this callback is passed as a prop to lower components, those components might do an extra re-rendering. We generally recommend binding in the constructor or using the class fields syntax, to avoid this sort of performance problem.
+Проблема этого синтаксиса в том, что при каждом рендере `LoggingButton` создается новый колбэк. Чаще всего это не страшно. Однако, если этот колбэк попадает как проп в дочерние компоненты, эти компоненты могут быть отрендерены снова. Мы рекомендуем делать привязку в конструкторе или использовать синтаксис полей классов, чтобы избежать проблем с производительностью.
 
-## Passing Arguments to Event Handlers {#passing-arguments-to-event-handlers}
+## Передача аргументов в обработчики событий {#passing-arguments-to-event-handlers}
 
-Inside a loop it is common to want to pass an extra parameter to an event handler. For example, if `id` is the row ID, either of the following would work:
+Внутри цикла часто нужно передать дополнительный аргумент в обработчик события. Например, если `id` — это идентификатор строки, можно использовать следующие варианты:
 
 ```js
-<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
-<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>
+<button onClick={(e) => this.deleteRow(id, e)}>Удалить строку</button>
+<button onClick={this.deleteRow.bind(this, id)}>Удалить строку</button>
 ```
 
-The above two lines are equivalent, and use [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) and [`Function.prototype.bind`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind) respectively.
+Две строки выше — эквивалентны, и используют [стрелочные функции](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions) и [`Function.prototype.bind`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) соответственно.
 
-In both cases, the `e` argument representing the React event will be passed as a second argument after the ID. With an arrow function, we have to pass it explicitly, but with `bind` any further arguments are automatically forwarded.
+В обоих случаях аргумент `e`, представляющий событие React, будет передан как второй аргумент после идентификатора. Используя стрелочную функцию, необходимо передавать аргумент явно, но с `bind` любые последующие аргументы передаются автоматически.
diff --git a/content/docs/hello-world.md b/content/docs/hello-world.md
index 2fff80254..ab5f765e1 100644
--- a/content/docs/hello-world.md
+++ b/content/docs/hello-world.md
@@ -6,7 +6,7 @@ prev: cdn-links.html
 next: introducing-jsx.html
 ---
 
-The smallest React example looks like this:
+Самый маленький пример на React выглядит так:
 
 ```js
 ReactDOM.render(
@@ -15,36 +15,34 @@ ReactDOM.render(
 );
 ```
 
-It displays a heading saying "Hello, world!" on the page.
+На странице появится заголовок «Hello, world!».
 
 [](codepen://hello-world)
 
-Click the link above to open an online editor. Feel free to make some changes, and see how they affect the output. Most pages in this guide will have editable examples like this one.
+По ссылке выше находится онлайн-редактор. Попробуйте отредактировать код и посмотрите, как изменится результат. Мы ещё увидим много таких интерактивных примеров.
 
+## Как читать это руководство {#how-to-read-this-guide}
 
-## How to Read This Guide {#how-to-read-this-guide}
+В этом руководстве мы рассмотрим строительные блоки React-приложений: элементы и компоненты. Освоив их, вы сможете создавать сложные приложения из маленьких повторно используемых частей.
 
-In this guide, we will examine the building blocks of React apps: elements and components. Once you master them, you can create complex apps from small reusable pieces.
-
->Tip
+>Совет
 >
->This guide is designed for people who prefer **learning concepts step by step**. If you prefer to learn by doing, check out our [practical tutorial](/tutorial/tutorial.html). You might find this guide and the tutorial complementary to each other.
+>Это руководство предназначено для людей, которые предпочитают **изучать базовые понятия шаг за шагом**. Если вы предпочитаете учиться на практике, ознакомьтесь с нашим [практическим введением](/tutorial/tutorial.html). Учебник и руководство в чем-то дополняют друг друга.
 
-This is the first chapter in a step-by-step guide about main React concepts. You can find a list of all its chapters in the navigation sidebar. If you're reading this from a mobile device, you can access the navigation by pressing the button in the bottom right corner of your screen.
+Это первая глава в пошаговом руководстве про основные понятия в React. Оглавление находится в боковой панели. Если вы читаете руководство с мобильного устройства, открыть навигационное меню можно, если нажать кнопку в правом нижнем углу экрана.
 
-Every chapter in this guide builds on the knowledge introduced in earlier chapters. **You can learn most of React by reading the “Main Concepts” guide chapters in the order they appear in the sidebar.** For example, [“Introducing JSX”](/docs/introducing-jsx.html) is the next chapter after this one.
+Каждая глава в этом руководстве опирается на знания из предыдущей. **Большую часть React можно изучить, прочитав главы руководства «Основные понятия» в том порядке, в котором они перечислены на боковой панели.** Например, [«Знакомство с JSX»](/docs/introducing-jsx.html) — следующая глава.
 
-## Knowledge Level Assumptions {#knowledge-level-assumptions}
+## Необходимый уровень знаний {#knowledge-level-assumptions}
 
-React is a JavaScript library, and so we'll assume you have a basic understanding of the JavaScript language. **If you don't feel very confident, we recommend [going through a JavaScript tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level** and enable you to follow along this guide without getting lost. It might take you between 30 minutes and an hour, but as a result you won't have to feel like you're learning both React and JavaScript at the same time.
+React — это библиотека JavaScript, поэтому мы предполагаем, что у вас есть базовое понимание языка JavaScript. **Если вы чувствуете себя неуверенно, мы рекомендуем [прочесть введение в JavaScript](https://developer.mozilla.org/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript) для проверки своих знаний**; оно облегчит чтение руководства по React. Это займёт от 30 минут до часа, но в результате у вас не будет ощущения, что вы одновременно изучаете и React, и JavaScript.
 
->Note
+>Примечание
 >
->This guide occasionally uses some of the newer JavaScript syntax in the examples. If you haven't worked with JavaScript in the last few years, [these three points](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) should get you most of the way.
-
+>В примерах руководства иногда используются новый синтаксис JavaScript. Если вы не работали с JavaScript в последние несколько лет, [эти три пункта](https://gist.github.com/gaearon/683e676101005de0add59e8bb345340c) должны помочь вам.
 
-## Let's Get Started! {#lets-get-started}
+## Начинаем! {#lets-get-started}
 
-Keep scrolling down, and you'll find the link to the [next chapter of this guide](/docs/introducing-jsx.html) right before the website footer.
+Прокрутите страницу немного ниже, чтобы перейти к [следующей главе руководства](/docs/introducing-jsx.html).
 
 
diff --git a/content/docs/higher-order-components.md b/content/docs/higher-order-components.md
index 63da3ef86..62aeca5d2 100644
--- a/content/docs/higher-order-components.md
+++ b/content/docs/higher-order-components.md
@@ -1,32 +1,32 @@
 ---
 id: higher-order-components
-title: Higher-Order Components
+title: Компоненты высшего порядка
 permalink: docs/higher-order-components.html
 ---
 
-A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React's compositional nature.
+Компонент высшего порядка (Higher-Order Component, HOC) -- это один из продвинутых способов для повторного использования логики. HOC не являются частью API React, но часто применяются из-за композиционной природы компонентов.
 
-Concretely, **a higher-order component is a function that takes a component and returns a new component.**
+Говоря просто, **компонент высшего порядка -- это функция, которая принимает компонент и возвращает новый компонент.**
 
 ```js
 const EnhancedComponent = higherOrderComponent(WrappedComponent);
 ```
 
-Whereas a component transforms props into UI, a higher-order component transforms a component into another component.
+Если обычный компонент преобразует пропсы в UI, то компонент высшего порядка преобразует компонент в другой компонент.
 
-HOCs are common in third-party React libraries, such as Redux's [`connect`](https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options) and Relay's [`createFragmentContainer`](http://facebook.github.io/relay/docs/en/fragment-container.html).
+HOC часто встречаются в сторонних библиотеках, например [`connect`](https://github.com/reduxjs/react-redux/blob/master/docs/api/connect.md#connect) в Redux и [`createFragmentContainer`](https://facebook.github.io/relay/docs/en/fragment-container.html) в Relay.
 
-In this document, we'll discuss why higher-order components are useful, and how to write your own.
+В этой главе мы обсудим чем полезны компоненты высшего порядка и как их создавать.
 
-## Use HOCs For Cross-Cutting Concerns {#use-hocs-for-cross-cutting-concerns}
+## HOC для сквозной функциональности {#use-hocs-for-cross-cutting-concerns}
 
-> **Note**
+> **Примечание**
 >
-> We previously recommended mixins as a way to handle cross-cutting concerns. We've since realized that mixins create more trouble than they are worth. [Read more](/blog/2016/07/13/mixins-considered-harmful.html) about why we've moved away from mixins and how you can transition your existing components.
+> В прошлом мы рекомендовали примеси для реализации сквозной функциональности, но со временем выяснилось, что от них больше вреда, чем пользы. [Узнайте](/blog/2016/07/13/mixins-considered-harmful.html), почему мы решили убрать примеси и как переписать старые компоненты.
 
-Components are the primary unit of code reuse in React. However, you'll find that some patterns aren't a straightforward fit for traditional components.
+Традиционные компоненты подразумевают многократное использование, но не позволяют с лёгкостью решить некоторые проблемы.
 
-For example, say you have a `CommentList` component that subscribes to an external data source to render a list of comments:
+Рассмотрим пример `CommentList`, который получает список комментариев из внешнего источника данных и отображает их:
 
 ```js
 class CommentList extends React.Component {
@@ -34,23 +34,23 @@ class CommentList extends React.Component {
     super(props);
     this.handleChange = this.handleChange.bind(this);
     this.state = {
-      // "DataSource" is some global data source
+      // "DataSource" -- произвольный глобальный источник данных
       comments: DataSource.getComments()
     };
   }
 
   componentDidMount() {
-    // Subscribe to changes
+    // Подписаться на оповещения
     DataSource.addChangeListener(this.handleChange);
   }
 
   componentWillUnmount() {
-    // Clean up listener
+    // Отписаться от оповещений
     DataSource.removeChangeListener(this.handleChange);
   }
 
   handleChange() {
-    // Update component state whenever the data source changes
+    // Сохранить комментарии из внешнего источника в локальном состоянии
     this.setState({
       comments: DataSource.getComments()
     });
@@ -68,7 +68,7 @@ class CommentList extends React.Component {
 }
 ```
 
-Later, you write a component for subscribing to a single blog post, which follows a similar pattern:
+Теперь мы решили реализовать новый компонент, который отслеживает изменения конкретной публикации и повторяет уже знакомый нам шаблон:
 
 ```js
 class BlogPost extends React.Component {
@@ -100,15 +100,15 @@ class BlogPost extends React.Component {
 }
 ```
 
-`CommentList` and `BlogPost` aren't identical — they call different methods on `DataSource`, and they render different output. But much of their implementation is the same:
+Разница между `CommentList` и `BlogPost` в том, что они вызывают разные методы `DataSource` и рендерят разный вывод. Однако в большинстве своём они похожи:
 
-- On mount, add a change listener to `DataSource`.
-- Inside the listener, call `setState` whenever the data source changes.
-- On unmount, remove the change listener.
+- Оба компонента подписываются на оповещения от `DataSource` при монтировании.
+- Оба меняют внутреннее состояние при изменении `DataSource`.
+- Оба отписываются от `DataSource` при размонтировании.
 
-You can imagine that in a large app, this same pattern of subscribing to `DataSource` and calling `setState` will occur over and over again. We want an abstraction that allows us to define this logic in a single place and share it across many components. This is where higher-order components excel.
+Можете представить, что в больших приложениях связка «подписаться на `DataSource`, затем вызвать `setState`» повторяется очень часто. Было бы здорово абстрагировать эту функциональность и использовать ее в других компонентах. 
 
-We can write a function that creates components, like `CommentList` and `BlogPost`, that subscribe to `DataSource`. The function will accept as one of its arguments a child component that receives the subscribed data as a prop. Let's call the function `withSubscription`:
+Давайте реализуем функцию `withSubscription` -- она будет создавать компоненты и подписывать их на обновления `DataSource` (наподобие `CommentList` и `BlogPost`). Функция будет принимать оборачиваемый компонент и через пропсы передавать ему новые данные:
 
 ```js
 const CommentListWithSubscription = withSubscription(
@@ -122,14 +122,14 @@ const BlogPostWithSubscription = withSubscription(
 );
 ```
 
-The first parameter is the wrapped component. The second parameter retrieves the data we're interested in, given a `DataSource` and the current props.
+Первый параметр -- это оборачиваемый компонент. Второй -- функция, которая извлекает нужные нам данные, она получает `DataSource` и текущие пропсы.
 
-When `CommentListWithSubscription` and `BlogPostWithSubscription` are rendered, `CommentList` and `BlogPost` will be passed a `data` prop with the most current data retrieved from `DataSource`:
+Когда `CommentListWithSubscription` и `BlogPostWithSubscription` рендерятся, они передают в `CommentList` и `BlogPost` обновлённые данные `DataSource` через проп `data`:
 
 ```js
-// This function takes a component...
+// Это функция принимает компонент...
 function withSubscription(WrappedComponent, selectData) {
-  // ...and returns another component...
+  // ...и возвращает другой компонент...
   return class extends React.Component {
     constructor(props) {
       super(props);
@@ -140,7 +140,7 @@ function withSubscription(WrappedComponent, selectData) {
     }
 
     componentDidMount() {
-      // ... that takes care of the subscription...
+      // ...который подписывется на оповещения...
       DataSource.addChangeListener(this.handleChange);
     }
 
@@ -155,83 +155,80 @@ function withSubscription(WrappedComponent, selectData) {
     }
 
     render() {
-      // ... and renders the wrapped component with the fresh data!
-      // Notice that we pass through any additional props
+      // ... и рендерит оборачиваемый компонент со свежими данными!
+      // Обратите внимание, что мы передаем остальные пропсы
       return <WrappedComponent data={this.state.data} {...this.props} />;
     }
   };
 }
 ```
 
-Note that a HOC doesn't modify the input component, nor does it use inheritance to copy its behavior. Rather, a HOC *composes* the original component by *wrapping* it in a container component. A HOC is a pure function with zero side-effects.
+Заметьте, что HOC ничего не меняет и не наследует поведение оборачиваемого компонента, вместо этого HOC *оборачивает* оригинальный компонент в контейнер посредством *композиции*. HOC является чистой функцией без побочных эффектов.
 
-And that's it! The wrapped component receives all the props of the container, along with a new prop, `data`, which it uses to render its output. The HOC isn't concerned with how or why the data is used, and the wrapped component isn't concerned with where the data came from.
+Вот и всё! Оборачиваемый компонент получает все пропсы, переданные контейнеру, а также проп `data`. Для HOC не важно, как будут использоваться данные, а оборачиваемому компоненту не важно, откуда они берутся.
 
-Because `withSubscription` is a normal function, you can add as many or as few arguments as you like. For example, you may want to make the name of the `data` prop configurable, to further isolate the HOC from the wrapped component. Or you could accept an argument that configures `shouldComponentUpdate`, or one that configures the data source. These are all possible because the HOC has full control over how the component is defined.
+Так как `withSubscription` -- это обычная функция, то мы можем убрать или добавить любое количество аргументов. Например, мы могли бы сделать конфигурируемым название пропа `data` и ещё больше изолировать HOC от оборачиваемого компонента. Также мы можем добавить аргумент для конфигурации `shouldComponentUpdate` или источника данных. Всё это возможно, потому что HOC полностью контролирует процесс создания компонента.
 
-Like components, the contract between `withSubscription` and the wrapped component is entirely props-based. This makes it easy to swap one HOC for a different one, as long as they provide the same props to the wrapped component. This may be useful if you change data-fetching libraries, for example.
+Взаимодействие между `withSubscription` и оборачиваемым компонентом осуществляется с помощью пропсов, так же, как и между обычными компонентами. Благодаря этому мы можем с лёгкостью заменить один HOC на другой, при условии, что они передают одни и те же пропсы в оборачиваемый компонент. Это может пригодиться если, например, мы решим поменять библиотеку получения данных.
 
-## Don't Mutate the Original Component. Use Composition. {#dont-mutate-the-original-component-use-composition}
+## Не мутируйте оборачиваемый компонент. Используйте композицию. {#dont-mutate-the-original-component-use-composition}
 
-Resist the temptation to modify a component's prototype (or otherwise mutate it) inside a HOC.
+Не поддавайтесь соблазну менять прототип компонента (или мутировать его любым другим способом) внутри HOC.
 
 ```js
 function logProps(InputComponent) {
   InputComponent.prototype.componentWillReceiveProps = function(nextProps) {
-    console.log('Current props: ', this.props);
-    console.log('Next props: ', nextProps);
+    console.log('Текущие пропсы: ', this.props);
+    console.log('Следующие пропсы: ', nextProps);
   };
-  // The fact that we're returning the original input is a hint that it has
-  // been mutated.
+  // Если мы возвращаем оборачиваемый компонент, значит, наверняка мы его изменили
   return InputComponent;
 }
 
-// EnhancedComponent will log whenever props are received
+// EnhancedComponent будет печатать в консоль при каждом изменении пропсов
 const EnhancedComponent = logProps(InputComponent);
 ```
 
-There are a few problems with this. One is that the input component cannot be reused separately from the enhanced component. More crucially, if you apply another HOC to `EnhancedComponent` that *also* mutates `componentWillReceiveProps`, the first HOC's functionality will be overridden! This HOC also won't work with function components, which do not have lifecycle methods.
+В приведённом выше примере мы не можем повторно использовать `InputComponent` отдельно от `EnhancedComponent`. Важнее то, что если мы захотим обернуть `EnhancedComponent` в другой HOC, который *тоже* меняет `componentWillReceiveProps`, то мы сотрём функциональность заданную первым HOC! Более того, `EnhancedComponent` не работает с функциональными компонентами, потому что у них отсутствуют методы жизненного цикла.
 
-Mutating HOCs are a leaky abstraction—the consumer must know how they are implemented in order to avoid conflicts with other HOCs.
+Мутирующие HOC являются хрупкой абстракцией, они конфликтуют с другими HOC, мы не сможем просто применять их без того, чтобы знать что именно они меняют.
 
-Instead of mutation, HOCs should use composition, by wrapping the input component in a container component:
+Вместо мутации, компоненты высшего порядка должны применять композицию, оборачивая компонент в контейнер:
 
 ```js
 function logProps(WrappedComponent) {
   return class extends React.Component {
     componentWillReceiveProps(nextProps) {
-      console.log('Current props: ', this.props);
-      console.log('Next props: ', nextProps);
+      console.log('Текущие пропсы: ', this.props);
+      console.log('Следующие пропсы: ', nextProps);
     }
     render() {
-      // Wraps the input component in a container, without mutating it. Good!
+      // Оборачиваем компонент в контейнер без мутаций. Супер!
       return <WrappedComponent {...this.props} />;
     }
   }
 }
 ```
 
-This HOC has the same functionality as the mutating version while avoiding the potential for clashes. It works equally well with class and function components. And because it's a pure function, it's composable with other HOCs, or even with itself.
+Этот HOC обладает такой же функциональностью, как и предыдущий, но не создаёт конфликтов с другими HOC и работает как с функциональными, так и с классовыми компонентами. Более того, HOC реализован с помощью чистой функции, поэтому его можно совмещать с другими HOC, или даже самого с собой.
 
-You may have noticed similarities between HOCs and a pattern called **container components**. Container components are part of a strategy of separating responsibility between high-level and low-level concerns. Containers manage things like subscriptions and state, and pass props to components that handle things like rendering UI. HOCs use containers as part of their implementation. You can think of HOCs as parameterized container component definitions.
+Возможно, вы уже заметили сходство между HOC и **компонентами-контейнерами**. Напомним, что при помощи контейнеров мы обычно разделяем общую функциональность от частной. Например, в контейнере мы будем управлять внутренним состоянием или подпиской на внешние ресурсы, и через пропсы передавать данные в компоненты, ответственные за рендер UI. При реализации HOС мы тоже используем контейнеры. Можно сказать что HOC -- это инструмент для параметризированного создания контейнеров.
 
-## Convention: Pass Unrelated Props Through to the Wrapped Component {#convention-pass-unrelated-props-through-to-the-wrapped-component}
+## Соглашение: передавайте посторонние пропсы оборачиваемому компоненту {#convention-pass-unrelated-props-through-to-the-wrapped-component}
 
-HOCs add features to a component. They shouldn't drastically alter its contract. It's expected that the component returned from a HOC has a similar interface to the wrapped component.
+HOC добавляют компонентам функциональность, но они не должны менять их оригинальное предназначение. Ожидается, что интерфейс компонента, который вы возвращаете из HOC, будет похож на интерфейс оборачиваемого компонента.
 
-HOCs should pass through props that are unrelated to its specific concern. Most HOCs contain a render method that looks something like this:
+Пропсы, которые напрямую не связаны с функциональностью HOC, должны передаваться без изменений оборачиваемому компоненту. Рендер-метод большинства HOC похож на следующий:
 
 ```js
 render() {
-  // Filter out extra props that are specific to this HOC and shouldn't be
-  // passed through
+  // Отфильтруйте пропсы применимые только к этому HOC и которые не нужно передавать дальше
   const { extraProp, ...passThroughProps } = this.props;
 
-  // Inject props into the wrapped component. These are usually state values or
-  // instance methods.
+  // Добавьте новые пропсы в оборачиваемый компонент. Обычно мы передаем значения состояния или методы экземпляра
   const injectedProp = someStateOrInstanceMethod;
 
-  // Pass props to wrapped component
+  // Передайте пропсы в оборачиваемый компонент
   return (
     <WrappedComponent
       injectedProp={injectedProp}
@@ -241,65 +238,65 @@ render() {
 }
 ```
 
-This convention helps ensure that HOCs are as flexible and reusable as possible.
+Такое соглашение помогает создавать гибкие повторно используемые компоненты.
 
-## Convention: Maximizing Composability {#convention-maximizing-composability}
+## Соглашение: Максимизируем композитивность {#convention-maximizing-composability}
 
-Not all HOCs look the same. Sometimes they accept only a single argument, the wrapped component:
+Не все HOC выглядят одинаково. Некоторые принимают всего лишь один аргумент -- оборачиваемый компонент:
 
 ```js
 const NavbarWithRouter = withRouter(Navbar);
 ```
 
-Usually, HOCs accept additional arguments. In this example from Relay, a config object is used to specify a component's data dependencies:
+Обычно HOC принимают несколько аргументов. В данном примере из Relay, мы используем объект конфигурации с описанием данных для компонента:
 
 ```js
 const CommentWithRelay = Relay.createContainer(Comment, config);
 ```
 
-The most common signature for HOCs looks like this:
+Самый распространённый способ вызова HOC выглядит так:
 
 ```js
-// React Redux's `connect`
+// `connect` из React Redux
 const ConnectedComment = connect(commentSelector, commentActions)(CommentList);
 ```
 
-*What?!* If you break it apart, it's easier to see what's going on.
+*Удивлены?* Давайте разберём эту строку по частям.
 
 ```js
-// connect is a function that returns another function
+// Вызов функции connect возвращает другую функцию
 const enhance = connect(commentListSelector, commentListActions);
-// The returned function is a HOC, which returns a component that is connected
-// to the Redux store
+
+// Эта функция и есть HOC. Она возвращает компонент, подключенный к хранилищу Redux
 const ConnectedComment = enhance(CommentList);
 ```
-In other words, `connect` is a higher-order function that returns a higher-order component!
+Другими словами, `connect` -- это функция высшего порядка, которая возвращает компонент высшего порядка!
 
-This form may seem confusing or unnecessary, but it has a useful property. Single-argument HOCs like the one returned by the `connect` function have the signature `Component => Component`. Functions whose output type is the same as its input type are really easy to compose together.
+Такая форма может показаться запутанной и ненужной, но есть и преимущества. Вызов `connect` возвращает HOC с подписью `Component => Component`. Функции с одинаковым типом результата и единственного аргумента легко совмещаются в композиции.
 
 ```js
-// Instead of doing this...
+// Вместо этого...
 const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))
 
-// ... you can use a function composition utility
-// compose(f, g, h) is the same as (...args) => f(g(h(...args)))
+// ... вы можете воспользоваться вспомогательной совмещающей функцией
+// compose(f, g, h) идентичен (...args) => f(g(h(...args)))
 const enhance = compose(
-  // These are both single-argument HOCs
+  // Оба параметра являются HOC и принимают один единственный аргумент
   withRouter,
   connect(commentSelector)
 )
 const EnhancedComponent = enhance(WrappedComponent)
 ```
 
-(This same property also allows `connect` and other enhancer-style HOCs to be used as decorators, an experimental JavaScript proposal.)
+(Поэтому мы можем использовать `connect` и другие расширяющие функциональность HOC в качестве экспериментальных JavaScript декораторов.)
 
-The `compose` utility function is provided by many third-party libraries including lodash (as [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](http://redux.js.org/docs/api/compose.html), and [Ramda](http://ramdajs.com/docs/#compose).
+Вы можете найти вспомогательную функцию `compose` во многих сторонних библиотеках, включая lodash (под названием [`lodash.flowRight`](https://lodash.com/docs/#flowRight)), [Redux](https://redux.js.org/docs/api/compose.html), и [Ramda](https://ramdajs.com/docs/#compose).
 
-## Convention: Wrap the Display Name for Easy Debugging {#convention-wrap-the-display-name-for-easy-debugging}
+## Соглашение: добавьте отображаемое имя для легкой отладки {#convention-wrap-the-display-name-for-easy-debugging}
 
-The container components created by HOCs show up in the [React Developer Tools](https://github.com/facebook/react-devtools) like any other component. To ease debugging, choose a display name that communicates that it's the result of a HOC.
+Созданные HOC компоненты-контейнеры отображаются в консоли [инструментов разработки React](https://github.com/facebook/react-devtools) наряду с другими компонентами. Для более лёгкой отладки вы можете задать имя, которое подскажет, что определенный компонент был создан с помощью HOC.
 
-The most common technique is to wrap the display name of the wrapped component. So if your higher-order component is named `withSubscription`, and the wrapped component's display name is `CommentList`, use the display name `WithSubscription(CommentList)`:
+Самый распространённый способ -- это обернуть имя оборачиваемого компонента. Например, если вы назвали компонент высшего порядка `withSubscription`, а имя оборачиваемого компонента было `CommentList`, то отображаемое имя будет `WithSubscription(CommentList)`:
 
 ```js
 function withSubscription(WrappedComponent) {
@@ -313,61 +310,60 @@ function getDisplayName(WrappedComponent) {
 }
 ```
 
+## Предостережения {#caveats}
 
-## Caveats {#caveats}
-
-Higher-order components come with a few caveats that aren't immediately obvious if you're new to React.
+Вы можете столкнуться с неочевидными проблемами, когда работаете с компонентами высшего порядка.
 
-### Don't Use HOCs Inside the render Method {#dont-use-hocs-inside-the-render-method}
+### Не используйте HOC внутри рендер-метода {#dont-use-hocs-inside-the-render-method}
 
-React's diffing algorithm (called reconciliation) uses component identity to determine whether it should update the existing subtree or throw it away and mount a new one. If the component returned from `render` is identical (`===`) to the component from the previous render, React recursively updates the subtree by diffing it with the new one. If they're not equal, the previous subtree is unmounted completely.
+Алгоритм сравнения React (известный как согласование или reconciliation) использует тождественность компонентов чтобы определить нужно ли обновить существующее поддерево, или убрать и монтировать вместо него новое. Если компонент, полученный из `render`, идентичен (`===`) компоненту из предыдущего рендера, то React рекурсивно продолжит сравнивать поддерево. Если компоненты не равны, React полностью удалит и заменит старое поддерево.
 
-Normally, you shouldn't need to think about this. But it matters for HOCs because it means you can't apply a HOC to a component within the render method of a component:
+Обычно нас это не беспокоит. Однако, важно учитывать что мы не можем применять компоненты высшего порядка внутри рендер-метода компонента:
 
 ```js
 render() {
-  // A new version of EnhancedComponent is created on every render
+  // Мы создаём новую версию EnhancedComponent при каждом рендере
   // EnhancedComponent1 !== EnhancedComponent2
   const EnhancedComponent = enhance(MyComponent);
-  // That causes the entire subtree to unmount/remount each time!
+  // Мы каждый раз размонтируем и монтируем целиком всё поддерево!
   return <EnhancedComponent />;
 }
 ```
 
-The problem here isn't just about performance — remounting a component causes the state of that component and all of its children to be lost.
+Проблема не только в производительности. Повторное монтирование компонента обнуляет его состояние, а также состояние его дочерних компонентов.
 
-Instead, apply HOCs outside the component definition so that the resulting component is created only once. Then, its identity will be consistent across renders. This is usually what you want, anyway.
+Не применяйте HOC в определении другого компонента. Сначала нужно отдельно получить компонент из HOC, и только потом использовать его. Таким образом React будет сравнивать один и тот же компонент при повторном рендере.
 
-In those rare cases where you need to apply a HOC dynamically, you can also do it inside a component's lifecycle methods or its constructor.
+При необходимости (в редких случаях) можно динамически применять HOC в методах жизненного цикла или конструкторе компонента.
 
-### Static Methods Must Be Copied Over {#static-methods-must-be-copied-over}
+### Копируйте статические методы {#static-methods-must-be-copied-over}
 
-Sometimes it's useful to define a static method on a React component. For example, Relay containers expose a static method `getFragment` to facilitate the composition of GraphQL fragments.
+Иногда бывает полезно определить статические методы компонента. Например, статический метод `getFragment` библиотеки Relay позволяет составить композицию из фрагментов данных GraphQL.
 
-When you apply a HOC to a component, though, the original component is wrapped with a container component. That means the new component does not have any of the static methods of the original component.
+Когда мы применяем HOC, то заворачиваем оригинальный компонент в контейнер. Поэтому у нового компонента не будет статических методов оригинального компонента.
 
 ```js
-// Define a static method
+// Определим статический метод
 WrappedComponent.staticMethod = function() {/*...*/}
-// Now apply a HOC
+// Теперь применим HOC
 const EnhancedComponent = enhance(WrappedComponent);
 
-// The enhanced component has no static method
+// У расширенного компонента нет статических методов
 typeof EnhancedComponent.staticMethod === 'undefined' // true
 ```
 
-To solve this, you could copy the methods onto the container before returning it:
+Скопируйте недостающие методы в контейнер:
 
 ```js
 function enhance(WrappedComponent) {
   class Enhance extends React.Component {/*...*/}
-  // Must know exactly which method(s) to copy :(
+  // Мы должны точно знать какие методы копировать :(
   Enhance.staticMethod = WrappedComponent.staticMethod;
   return Enhance;
 }
 ```
 
-However, this requires you to know exactly which methods need to be copied. You can use [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics) to automatically copy all non-React static methods:
+К сожалению, вы должны точно знать какие методы копировать. Вы можете воспользоваться [hoist-non-react-statics](https://github.com/mridgway/hoist-non-react-statics), чтобы автоматически скопировать не связанные с React статические методы:
 
 ```js
 import hoistNonReactStatic from 'hoist-non-react-statics';
@@ -378,22 +374,22 @@ function enhance(WrappedComponent) {
 }
 ```
 
-Another possible solution is to export the static method separately from the component itself.
+Другое возможное решение -- экспортировать статические методы отдельно от компонента.
 
 ```js
-// Instead of...
+// Вместо...
 MyComponent.someFunction = someFunction;
 export default MyComponent;
 
-// ...export the method separately...
+// ...отдельно экспортируйте метод...
 export { someFunction };
 
-// ...and in the consuming module, import both
+// ...в модуле-потребителе мы можем использовать оба экспорта
 import MyComponent, { someFunction } from './MyComponent.js';
 ```
 
-### Refs Aren't Passed Through {#refs-arent-passed-through}
+### Рефы не передаются {#refs-arent-passed-through}
 
-While the convention for higher-order components is to pass through all props to the wrapped component, this does not work for refs. That's because `ref` is not really a prop — like `key`, it's handled specially by React. If you add a ref to an element whose component is the result of a HOC, the ref refers to an instance of the outermost container component, not the wrapped component.
+По соглашению компоненты высшего порядка передают оборачеваемому компоненту все пропсы, кроме рефов. `ref` на самом деле не проп, как, например, `key`, и поэтому иначе обрабатывается React. Реф элемента, созданного компонентом из HOC, будет указывать на экземпляр ближайшего в иерархии контейнера, а не на оборачиваемый компонент.
 
-The solution for this problem is to use the `React.forwardRef` API (introduced with React 16.3). [Learn more about it in the forwarding refs section](/docs/forwarding-refs.html).
\ No newline at end of file
+Вы можете решить эту проблему с помощью API-метода `React.forwardRef` (добавлен в React 16.3). [Узнать подробнее в главе Перенаправление рефов](/docs/forwarding-refs.html).
diff --git a/content/docs/hooks-faq.md b/content/docs/hooks-faq.md
index d7e304d55..ea862cbce 100644
--- a/content/docs/hooks-faq.md
+++ b/content/docs/hooks-faq.md
@@ -192,7 +192,7 @@ There are a few more heuristics, and they might change over time as we fine-tune
 
 ### How do lifecycle methods correspond to Hooks? {#how-do-lifecycle-methods-correspond-to-hooks}
 
-* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing it is expensive, you can pass a function to `useState`.
+* `constructor`: Function components don't need a constructor. You can initialize the state in the [`useState`](/docs/hooks-reference.html#usestate) call. If computing is expensive, you can pass a function to `useState`.
 
 * `getDerivedStateFromProps`: Schedule an update [while rendering](#how-do-i-implement-getderivedstatefromprops) instead.
 
@@ -356,13 +356,13 @@ function Counter() {
   const calculation = count * 100;
   const prevCalculation = usePrevious(calculation);
   // ...
-  ```
+```
 
 It's possible that in the future React will provide a `usePrevious` Hook out of the box since it's a relatively common use case.
 
 See also [the recommended pattern for derived state](#how-do-i-implement-getderivedstatefromprops).
 
-### How do I implement `getDerivedStateFromProps`?
+### How do I implement `getDerivedStateFromProps`? {#how-do-i-implement-getderivedstatefromprops}
 
 While you probably [don't need it](/blog/2018/06/07/you-probably-dont-need-derived-state.html), in rare cases that you do (such as implementing a `<Transition>` component), you can update the state right during rendering. React will re-run the component with updated state immediately after exiting the first render so it wouldn't be expensive.
 
@@ -385,7 +385,7 @@ function ScrollView({row}) {
 
 This might look strange at first, but an update during rendering is exactly what `getDerivedStateFromProps` has always been like conceptually.
 
-### Is there something like forceUpdate?
+### Is there something like forceUpdate? {#is-there-something-like-forceupdate}
 
 Both `useState` and `useReducer` Hooks [bail out of updates](/docs/hooks-reference.html#bailing-out-of-a-state-update) if the next value is the same as the previous one. Mutating state in place and calling `setState` will not cause a re-render.
 
@@ -401,22 +401,22 @@ Normally, you shouldn't mutate local state in React. However, as an escape hatch
 
 Try to avoid this pattern if possible.
 
-### Can I make a ref to a function component?
+### Can I make a ref to a function component? {#can-i-make-a-ref-to-a-function-component}
 
 While you shouldn't need this often, you may expose some imperative methods to a parent component with the [`useImperativeHandle`](/docs/hooks-reference.html#useimperativehandle) Hook.
 
-### What does `const [thing, setThing] = useState()` mean?
+### What does `const [thing, setThing] = useState()` mean? {#what-does-const-thing-setthing--usestate-mean}
 
 If you're not familiar with this syntax, check out the [explanation](/docs/hooks-state.html#tip-what-do-square-brackets-mean) in the State Hook documentation.
 
 
-## Performance Optimizations
+## Performance Optimizations {#performance-optimizations}
 
-### Can I skip an effect on updates?
+### Can I skip an effect on updates? {#can-i-skip-an-effect-on-updates}
 
 Yes. See [conditionally firing an effect](/docs/hooks-reference.html#conditionally-firing-an-effect). Note that forgetting to handle updates often [introduces bugs](/docs/hooks-effect.html#explanation-why-effects-run-on-each-update), which is why this isn't the default behavior.
 
-### How do I implement `shouldComponentUpdate`?
+### How do I implement `shouldComponentUpdate`? {#how-do-i-implement-shouldcomponentupdate}
 
 You can wrap a function component with `React.memo` to shallowly compare its props:
 
@@ -431,7 +431,7 @@ It's not a Hook because it doesn't compose like Hooks do. `React.memo` is equiva
 `React.memo` doesn't compare state because there is no single state object to compare. But you can make children pure too, or even [optimize individual children with `useMemo`](/docs/hooks-faq.html#how-to-memoize-calculations).
 
 
-### How to memoize calculations?
+### How to memoize calculations? {#how-to-memoize-calculations}
 
 The [`useMemo`](/docs/hooks-reference.html#usememo) Hook lets you cache calculations between multiple renders by "remembering" the previous computation:
 
@@ -464,9 +464,9 @@ function Parent({ a, b }) {
 
 Note that this approach won't work in a loop because Hook calls [can't](/docs/hooks-rules.html) be placed inside loops. But you can extract a separate component for the list item, and call `useMemo` there.
 
-### How to create expensive objects lazily?
+### How to create expensive objects lazily? {#how-to-create-expensive-objects-lazily}
 
-`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes need to be sure an object is only created once.
+`useMemo` lets you [memoize an expensive calculation](#how-to-memoize-calculations) if the inputs are the same. However, it only serves as a hint, and doesn't *guarantee* the computation won't re-run. But sometimes you need to be sure an object is only created once.
 
 **The first common use case is when creating the initial state is expensive:**
 
@@ -525,7 +525,7 @@ function Image(props) {
 This avoids creating an expensive object until it's truly needed for the first time. If you use Flow or TypeScript, you can also give `getObserver()` a non-nullable type for convenience.
 
 
-### Are Hooks slow because of creating functions in render?
+### Are Hooks slow because of creating functions in render? {#are-hooks-slow-because-of-creating-functions-in-render}
 
 No. In modern browsers, the raw performance of closures compared to classes doesn't differ significantly except in extreme scenarios.
 
@@ -550,7 +550,7 @@ Traditionally, performance concerns around inline functions in React have been r
 
 * Finally, the `useReducer` Hook reduces the need to pass callbacks deeply, as explained below.
 
-### How to avoid passing callbacks down?
+### How to avoid passing callbacks down? {#how-to-avoid-passing-callbacks-down}
 
 We've found that most people don't enjoy manually passing callbacks through every level of a component tree. Even though it is more explicit, it can feel like a lot of "plumbing".
 
@@ -560,7 +560,7 @@ In large component trees, an alternative we recommend is to pass down a `dispatc
 const TodosDispatch = React.createContext(null);
 
 function TodosApp() {
-  // Tip: `dispatch` won't change between re-renders
+  // Note: `dispatch` won't change between re-renders
   const [todos, dispatch] = useReducer(todosReducer);
 
   return (
@@ -592,7 +592,7 @@ This is both more convenient from the maintenance perspective (no need to keep f
 
 Note that you can still choose whether to pass the application *state* down as props (more explicit) or as context (more convenient for very deep updates). If you use context to pass down the state too, use two different context types -- the `dispatch` context never changes, so components that read it don't need to rerender unless they also need the application state.
 
-### How to read an often-changing value from `useCallback`?
+### How to read an often-changing value from `useCallback`? {#how-to-read-an-often-changing-value-from-usecallback}
 
 >Note
 >
@@ -662,15 +662,15 @@ function useEventCallback(fn, dependencies) {
 In either case, we **don't recommend this pattern** and only show it here for completeness. Instead, it is preferable to [avoid passing callbacks deep down](#how-to-avoid-passing-callbacks-down).
 
 
-## Under the Hood
+## Under the Hood {#under-the-hood}
 
-### How does React associate Hook calls with components?
+### How does React associate Hook calls with components? {#how-does-react-associate-hook-calls-with-components}
 
 React keeps track of the currently rendering component. Thanks to the [Rules of Hooks](/docs/hooks-rules.html), we know that Hooks are only called from React components (or custom Hooks -- which are also only called from React components).
 
 There is an internal list of "memory cells" associated with each component. They're just JavaScript objects where we can put some data. When you call a Hook like `useState()`, it reads the current cell (or initializes it during the first render), and then moves the pointer to the next one. This is how multiple `useState()` calls each get independent local state.
 
-### What is the prior art for Hooks?
+### What is the prior art for Hooks? {#what-is-the-prior-art-for-hooks}
 
 Hooks synthesize ideas from several different sources:
 
diff --git a/content/docs/hooks-intro.md b/content/docs/hooks-intro.md
index b4cefcfbe..c406d2ab4 100644
--- a/content/docs/hooks-intro.md
+++ b/content/docs/hooks-intro.md
@@ -1,17 +1,17 @@
 ---
 id: hooks-intro
-title: Introducing Hooks
+title: Введение в хуки
 permalink: docs/hooks-intro.html
 next: hooks-overview.html
 ---
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Хуки* — новая возможность в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов.
 
 ```js{4,5}
 import React, { useState } from 'react';
 
 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // Объявление переменной состояния, которую мы назовём "count"
   const [count, setCount] = useState(0);
 
   return (
@@ -25,88 +25,86 @@ function Example() {
 }
 ```
 
-This new function `useState` is the first "Hook" we'll learn about, but this example is just a teaser. Don't worry if it doesn't make sense yet!
+Первый хук, который мы изучим, это функция `useState`. Не беспокойтесь, если этот пример будет поначалу неясен. Скоро мы разберёмся, как он работает.
 
-**You can start learning Hooks [on the next page](/docs/hooks-overview.html).** On this page, we'll continue by explaining why we're adding Hooks to React and how they can help you write great applications.
+**Вы можете начать изучать хуки [на следующей странице](/docs/hooks-overview.html).** Здесь же мы расскажем, зачем мы добавили хуки в React, и как они помогут вам писать приложения.
 
->Note
+>Примечание
 >
->React 16.8.0 is the first release to support Hooks. When upgrading, don't forget to update all packages, including React DOM. React Native will support Hooks in the next stable release.
+>React 16.8.0 это первый релиз, поддерживающий хуки. При обновлении версии, не забудьте обновить и все зависимости, включая React DOM. React Native будет поддерживать хуки в следующем стабильном релизе.
 
-## Video Introduction {#video-introduction}
+## Видео-представление {#video-introduction}
 
-At React Conf 2018, Sophie Alpert and Dan Abramov introduced Hooks, followed by Ryan Florence demonstrating how to refactor an application to use them. Watch the video here:
+На конференции React Conf 2018, Софи Алперт (Sophie Alpert) и Дэн Абрамов (Dan Abramov) представили хуки, а Райн Флоренс (Ryan Florence) показал, как их использовать в приложении. Видео конференции можно посмотреть здесь:
 
 <br>
 
 <iframe width="650" height="366" src="//www.youtube.com/embed/dpw9EHDh2bM" frameborder="0" allowfullscreen></iframe>
 
-## No Breaking Changes {#no-breaking-changes}
+## Полная обратная совместимость {#no-breaking-changes}
 
-Before we continue, note that Hooks are:
+Перед тем, как мы продолжим, обратите внимание, что хуки:
 
-* **Completely opt-in.** You can try Hooks in a few components without rewriting any existing code. But you don't have to learn or use Hooks right now if you don't want to.
-* **100% backwards-compatible.** Hooks don't contain any breaking changes.
-* **Available now.** Hooks are now available with the release of v16.8.0.
+* **Полностью на ваше усмотрение.** Вы можете попробовать хуки в одних компонентах, не изменяя код в других. Хуки не обязательно использовать или изучать прямо сейчас.
+* **100% обратно совместимы.** Хуки не содержат изменений, которые могут поломать ваш существующий код.
+* **Доступны прямо сейчас.** Хуки доступны с выходом версии 16.8.0.
 
-**There are no plans to remove classes from React.** You can read more about the gradual adoption strategy for Hooks in the [bottom section](#gradual-adoption-strategy) of this page.
+**Мы не планируем удалять классы из React.** Вы можете прочитать больше о стратегии постепенного внедрения хуков в [разделе ниже](#gradual-adoption-strategy).
 
-**Hooks don't replace your knowledge of React concepts.** Instead, Hooks provide a more direct API to the React concepts you already know: props, state, context, refs, and lifecycle. As we will show later, Hooks also offer a new powerful way to combine them.
+**Хуки не меняют ваши знания о концепциях в React.** Вместо этого, хуки предоставляют более прямой доступ к API уже знакомых вам понятий: пропсов, состояния, контекста, рефов, и жизненного цикла. Мы также рассмотрим мощный способ компоновать эти понятия с помощью хуков.
 
-**If you just want to start learning Hooks, feel free to [jump directly to the next page!](/docs/hooks-overview.html)** You can also keep reading this page to learn more about why we're adding Hooks, and how we're going to start using them without rewriting our applications.
+**Чтобы начать изучать хуки, [перейдите на следующую страницу!](/docs/hooks-overview.html)** На этой странице мы расскажем о том, зачем нужны хуки, и как их использовать, не переписывая наши приложения.
 
-## Motivation {#motivation}
+## Мотивация {#motivation}
 
-Hooks solve a wide variety of seemingly unconnected problems in React that we've encountered over five years of writing and maintaining tens of thousands of components. Whether you're learning React, use it daily, or even prefer a different library with a similar component model, you might recognize some of these problems.
+Хуки решают множество, казалось бы, несвязанных между собой, проблем в React, с которыми мы сталкивались в течение пяти лет написания и поддержки десятков тысяч компонентов. Если вы изучаете React, используете его ежедневно или используете другую библиотеку с похожим компонентным подходом, эти проблемы наверняка покажутся вам знакомыми.
 
-### It's hard to reuse stateful logic between components {#its-hard-to-reuse-stateful-logic-between-components}
+### Трудно переиспользовать логику состояний между компонентами {#its-hard-to-reuse-stateful-logic-between-components}
 
-React doesn't offer a way to "attach" reusable behavior to a component (for example, connecting it to a store). If you've worked with React for a while, you may be familiar with patterns like [render props](/docs/render-props.html) and [higher-order components](/docs/higher-order-components.html) that try to solve this. But these patterns require you to restructure your components when you use them, which can be cumbersome and make code harder to follow. If you look at a typical React application in React DevTools, you will likely find a "wrapper hell" of components surrounded by layers of providers, consumers, higher-order components, render props, and other abstractions. While we could [filter them out in DevTools](https://github.com/facebook/react-devtools/pull/503), this points to a deeper underlying problem: React needs a better primitive for sharing stateful logic.
+В React нет способа «присоединить» повторно используемое поведение к компоненту (например, подключение к хранилищу). Если вы работали с React какое-то время, то вам могут быть знакомы такие паттерны, как [рендер-пропсы](/docs/render-props.html) и [компоненты высшего порядка](/docs/higher-order-components.html), которые пытаются решить эту проблему. Но эти паттерны заставляют вас изменять структуру компонентов, что делает код громоздким и трудным в поддержке. Если вы посмотрите на типичное React-приложение в React DevTools, то увидите «ад обёрток» из компонентов, окружённых провайдерами, консьюмерами, компонентами высшего порядка, рендер-пропсами и другими абстракциями. Хоть мы и можем [отфильтровать их в DevTools](https://github.com/facebook/react-devtools/pull/503), всё это указывает на более глубокую проблему в React. Нужен более удобный способ повторно использовать логику вокруг состояния.
 
-With Hooks, you can extract stateful logic from a component so it can be tested independently and reused. **Hooks allow you to reuse stateful logic without changing your component hierarchy.** This makes it easy to share Hooks among many components or with the community.
+С помощью хуков вы можете извлечь логику состояния из компонента, чтобы её протестировать или повторно использовать. **Хуки позволяют вам переиспользовать логику состояния, не затрагивая дерево компонентов.** Благодаря этому, хуки легко использовать в разных компонентах и делиться ими с сообществом.
 
-We'll discuss this more in [Building Your Own Hooks](/docs/hooks-custom.html).
+Мы обсудим это подробнее в разделе [Создание собственных хуков](/docs/hooks-custom.html).
 
-### Complex components become hard to understand {#complex-components-become-hard-to-understand}
+### Сложные компоненты становятся трудными для понимания {#complex-components-become-hard-to-understand}
 
-We've often had to maintain components that started out simple but grew into an unmanageable mess of stateful logic and side effects. Each lifecycle method often contains a mix of unrelated logic. For example, components might perform some data fetching in `componentDidMount` and `componentDidUpdate`. However, the same `componentDidMount` method might also contain some unrelated logic that sets up event listeners, with cleanup performed in `componentWillUnmount`. Mutually related code that changes together gets split apart, but completely unrelated code ends up combined in a single method. This makes it too easy to introduce bugs and inconsistencies.
+Нам часто приходилось поддерживать компоненты, которые изначально были простыми, но превратились в неуправляемый беспорядок, состоящий из логики состояния и побочных эффектов. Каждый метод жизненного цикла часто содержит смесь несвязанной логики. Например, компоненты могут загружать данные в `componentDidMount` и `componentDidUpdate`. Однако тот же метод `componentDidMount` может содержать несвязанную логику, которая добавляет обработчики события с отменой подписки в `componentWillUnmount`. Взаимосвязанный код, который изменяется вместе, разделяется, но совершенно несвязанный код в конечном итоге объединяется в один метод. Это легко приводит к багам и несоответствиям в приложении.
 
-In many cases it's not possible to break these components into smaller ones because the stateful logic is all over the place. It's also difficult to test them. This is one of the reasons many people prefer to combine React with a separate state management library. However, that often introduces too much abstraction, requires you to jump between different files, and makes reusing components more difficult.
+В некоторых случаях невозможно разбить компоненты на более мелкие, потому что логика состояния раскидана повсюду. Такие компоненты сложно тестировать. Это одна из причин, по которой люди предпочитают использовать в React отдельную библиотеку для управления состоянием. Однако, это добавляет множество абстракций, заставляет прыгать между разными файлами и усложняет повторное использование компонентов.
 
-To solve this, **Hooks let you split one component into smaller functions based on what pieces are related (such as setting up a subscription or fetching data)**, rather than forcing a split based on lifecycle methods. You may also opt into managing the component's local state with a reducer to make it more predictable.
+Чтобы решить эту проблему, **хуки позволяют разбить один компонент на маленькие функции по их назначению (например, подписке или загрузке данных)**, а не на основе методов жизненного цикла. Вы также можете контролировать локальное состояние с помощью редюсера, чтобы поведение было более предсказуемым.
 
-We'll discuss this more in [Using the Effect Hook](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns).
+Мы обсудим это в разделе [использование эффект-хуков](/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns).
 
-### Classes confuse both people and machines {#classes-confuse-both-people-and-machines}
+### Классы путают как людей, так и машины {#classes-confuse-both-people-and-machines}
 
-In addition to making code reuse and code organization more difficult, we've found that classes can be a large barrier to learning React. You have to understand how `this` works in JavaScript, which is very different from how it works in most languages. You have to remember to bind the event handlers. Without unstable [syntax proposals](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), the code is very verbose. People can understand props, state, and top-down data flow perfectly well but still struggle with classes. The distinction between function and class components in React and when to use each one leads to disagreements even between experienced React developers.
+Вдобавок к усложнению организации кода и его переиспользования, классы создают существенный барьер в изучении React. Нужно понимать, как работает `this` в JavaScript, поведение которого отличается от большинства языков. Приходится помнить про привязку контекста для обработчиков событий. Без использования нестабильных [синтаксических предложений](https://babeljs.io/docs/en/babel-plugin-transform-class-properties/), код становится многословным. Люди могут прекрасно понимать пропсы, состояние и однонаправленный поток данных, но всё равно путаться с классами. Различия между функциональными и классовыми компонентами в React и тем, когда их использовать, приводят к разногласиям даже между опытными React-разработчиками.
 
-Additionally, React has been out for about five years, and we want to make sure it stays relevant in the next five years. As [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/), and others show, [ahead-of-time compilation](https://en.wikipedia.org/wiki/Ahead-of-time_compilation) of components has a lot of future potential. Especially if it's not limited to templates. Recently, we've been experimenting with [component folding](https://github.com/facebook/react/issues/7323) using [Prepack](https://prepack.io/), and we've seen promising early results. However, we found that class components can encourage unintentional patterns that make these optimizations fall back to a slower path. Classes present issues for today's tools, too. For example, classes don't minify very well, and they make hot reloading flaky and unreliable. We want to present an API that makes it more likely for code to stay on the optimizable path.
+Вдобавок, React существует уже около пяти лет и мы хотим убедиться, что он останется актуальным в течение следующих пяти лет. Как показывают [Svelte](https://svelte.technology/), [Angular](https://angular.io/), [Glimmer](https://glimmerjs.com/) и другие технологии, [компиляция компонентов перед их исполнением](https://ru.wikipedia.org/wiki/AOT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F) имеет огромный потенциал в будущем. Особенно, если шаблоны не накладывают ограничений. Недавно мы экспериментировали со [свёртыванием компонентов](https://github.com/facebook/react/issues/7323) с использованием [Prepack](https://prepack.io/) и увидели первые многообещающие результаты. Однако мы заметили, что классовые компоненты могут приводить к ненамеренным паттернам, сводящим оптимизации на нет. Классы создают сложности для инструментов и сегодня. Например, классы плохо минифицируются, а горячая перезагрузка (hot reloading) ненадёжна и часто ломает их. Наша цель — предоставить API, который повысит вероятность того, что код можно будет оптимизировать.
 
-To solve these problems, **Hooks let you use more of React's features without classes.** Conceptually, React components have always been closer to functions. Hooks embrace functions, but without sacrificing the practical spirit of React. Hooks provide access to imperative escape hatches and don't require you to learn complex functional or reactive programming techniques.
+Чтобы решить эти проблемы, **хуки позволяют использовать больше возможностей React без написания классов.** Концептуально, React-компоненты всегда были ближе к функциям. Хуки обеспечивают доступ к функционалу, но не обесценивают опыт использования React. Хуки предоставляют императивные лазейки и не требуют от вас изучения сложных функциональных или реактивных подходов.
 
->Examples
+>Примеры
 >
->[Hooks at a Glance](/docs/hooks-overview.html) is a good place to start learning Hooks.
+>[Обзор хуков](/docs/hooks-overview.html) — хорошее начало для изучения хуков.
 
-## Gradual Adoption Strategy {#gradual-adoption-strategy}
+## Стратегия постепенного внедрения {#gradual-adoption-strategy}
 
->**TLDR: There are no plans to remove classes from React.**
+>**TLDR: Мы не планируем удалять классы из React.**
 
-We know that React developers are focused on shipping products and don't have time to look into every new API that's being released. Hooks are very new, and it might be better to wait for more examples and tutorials before considering learning or adopting them.
+Мы знаем, что React-разработчики сфокусированы на поставке продукта и у них нет времени изучать новый API каждого релиза. Хуки это что-то новое, и возможно, лучше подождать больше примеров и уроков, прежде чем начинать их изучение.
 
-We also understand that the bar for adding a new primitive to React is extremely high. For curious readers, we have prepared a [detailed RFC](https://github.com/reactjs/rfcs/pull/68) that dives into motivation with more details, and provides extra perspective on the specific design decisions and related prior art.
+Мы также понимаем, что планка для добавления новых примитивов в React очень высока. Поэтому для любопытных читателей мы подготовили [подробный RFC](https://github.com/reactjs/rfcs/pull/68), в котором можно найти больше информации о технических аспектах выбранного дизайна.
 
-**Crucially, Hooks work side-by-side with existing code so you can adopt them gradually.** We are sharing this experimental API to get early feedback from those in the community who are interested in shaping the future of React — and we will iterate on Hooks in the open.
+**Важно понимать, что хуки работают рядом с существущим кодом, поэтому вы можете внедрять их постепенно.** Нет спешки переходить на хуки. Мы рекомендуем избегать любых «больших переписываний», особенно для существующих, сложных классовых компонентов. Вам потребуется немного изменить мировоззрение, чтобы начать «мыслить хуками». По нашему опыту, лучше всего сначала попрактиковаться использовать хуки в новых и некритичных компонентах и убедиться, что все в вашей команде чувствуют себя комфортно с ними. После того, как вы попробуете, не стесняйтесь [отправить нам свой отзыв](https://github.com/facebook/react/issues/new), позитивный или негативный.
 
-Finally, there is no rush to migrate to Hooks. We recommend avoiding any "big rewrites", especially for existing, complex class components. It takes a bit of a mindshift to start "thinking in Hooks". In our experience, it's best to practice using Hooks in new and non-critical components first, and ensure that everybody on your team feels comfortable with them. After you give Hooks a try, please feel free to [send us feedback](https://github.com/facebook/react/issues/new), positive or negative.
+Мы намерены охватить все возможные варианты использования классов в хуках, но **мы всё ещё будем поддерживать классовые компоненты в обозримом будущем.** В Facebook десятки тысяч компонентов, написанных в виде классов, и у нас нет абсолютно никаких планов их переписывать. Вместо этого мы начинаем использовать хуки в новом коде параллельно с классами.
 
-We intend for Hooks to cover all existing use cases for classes, but **we will keep supporting class components for the foreseeable future.** At Facebook, we have tens of thousands of components written as classes, and we have absolutely no plans to rewrite them. Instead, we are starting to use Hooks in the new code side by side with classes.
+## Часто задаваемые вопросы {#frequently-asked-questions}
 
-## Frequently Asked Questions {#frequently-asked-questions}
+Мы подготовили для вас [страницу FAQ](/docs/hooks-faq.html) с ответами на самые частые вопросы о хуках.
 
-We've prepared a [Hooks FAQ page](/docs/hooks-faq.html) that answers the most common questions about Hooks.
+## Следующие шаги {#next-steps}
 
-## Next Steps {#next-steps}
-
-By the end of this page, you should have a rough idea of what problems Hooks are solving, but many details are probably unclear. Don't worry! **Let's now go to [the next page](/docs/hooks-overview.html) where we start learning about Hooks by example.**
+К концу этой страницы вы должны иметь общее представление о том, какие проблемы решают хуки, но многие детали, возможно, остались непонятны. Не беспокойтесь! **Давайте перейдём на [следующую страницу](/docs/hooks-overview.html), где мы изучим хуки на примерах.**
diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md
index fef7de00b..b44635df7 100644
--- a/content/docs/hooks-overview.md
+++ b/content/docs/hooks-overview.md
@@ -1,30 +1,29 @@
 ---
 id: hooks-overview
-title: Hooks at a Glance
+title: Краткий обзор хуков
 permalink: docs/hooks-overview.html
 next: hooks-state.html
 prev: hooks-intro.html
 ---
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
+*Хуки* -- новинка в React 16.8, которая позволяет использовать состояние и другие возможности React без написания классов.
 
-Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this:
+Хуки -- [обратно-совместимы](/docs/hooks-intro.html#no-breaking-changes). На этой странице вы получите общее представление о хуках. Имейте в виду, что это беглый обзор, который больше подойдет опытным пользователям React. В конце каждого раздела есть вот такой жёлтый блок с детальным объяснением на случай, если вы запутались: 
 
->Detailed Explanation
+>Подробное объяснение
 >
->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React.
+>Если вы хотите понять, почему мы добавляем хуки в React, прочтите [мотивацию](/docs/hooks-intro.html#motivation).
 
-**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations.
 
-## 📌 State Hook {#-state-hook}
+## 📌 Хук состояния {#state-hook}
 
-This example renders a counter. When you click the button, it increments the value:
+Рассмотрим пример, в котором рендерится счётчик. Если вы нажмёте на кнопку, значение счётчика будет инкрементировано.
 
 ```js{1,4,5}
 import React, { useState } from 'react';
 
 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // Объявляем новую переменную состояния "count"
   const [count, setCount] = useState(0);
 
   return (
@@ -38,17 +37,18 @@ function Example() {
 }
 ```
 
-Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).)
+В этом примере, `useState` -- это *хук* (определение хука дано ниже). Мы вызываем его, чтобы наделить наш функциональный компонент внутренним состоянием. React будет хранить это состояние между рендерами. Вызов `useState` возвращает две вещи: *текущее* значение состояния и функцию для его обновления. Эту функцию можно использовать где угодно, например, в обработчике событий. Она схожа с `this.setState` в классах, но не слияет новое и старое состояние вместе. Сравнение хука `useState` и `this.state` приводится на странице [Использование хука состояния](/docs/hooks-state.html).
 
-The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render.
+Единственный аргумент `useState` -- это начальное состояние. В примере выше -- это `0`, так как наш счётчик начинается с нуля. Заметьте, что в отличие от `this.state`, в нашем случае состояние может, но не обязано, быть объектом. Исходное значение аргумента используется только при первом рендере.
 
-#### Declaring multiple state variables {#declaring-multiple-state-variables}
 
-You can use the State Hook more than once in a single component:
+#### Объявление нескольких переменных состояния {#declaring-multiple-state-variables}
+
+Хук состояния можно использовать в компоненте более одного раза.
 
 ```js
 function ExampleWithManyStates() {
-  // Declare multiple state variables!
+  // Обьявляем несколько переменных состояния!
   const [age, setAge] = useState(42);
   const [fruit, setFruit] = useState('banana');
   const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
@@ -56,25 +56,25 @@ function ExampleWithManyStates() {
 }
 ```
 
-The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later.
+Синтаксис [деструктуризации массивов](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2) позволяет нам по разному называть переменные состояния, которые мы объявляем при вызове `useState`. Так как имён этих переменных нет в API `useState`, React предполагает, что если вы вызываете `useState` много раз, вы делаете это в одинаковой последовательности при каждом рендере. Мы расскажем, почему это работает и когда это целесообразно, немного позже.
 
-#### But what is a Hook? {#but-what-is-a-hook}
+#### Что же такое хук? {#but-what-is-a-hook}
 
-Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.)
+Хуки -- это функции, с помощью которых вы можете "подцепиться" к состоянию и методам жизненного цикла React из функциональных компонентов. Хуки не работают внутри классов -- они дают вам возможность использовать React без классов. (Мы [не рекомендуем](/docs/hooks-intro.html#gradual-adoption-strategy) сразу же переписывать существующие компоненты, но при желании, вы можете начать использовать хуки в своих новых компонентах.)
 
-React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first.
+React содержит несколько встроенных хуков, таких как `useState`. Вы также можете создавать собственные хуки, чтобы повторно использовать их в других своих компонентах. Давайте для начала рассмотрим встроенные хуки.
 
->Detailed Explanation
+>Подробное объяснение
 >
->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html).
+>Вы можете узнать больше на странице [Использование хука состояния](/docs/hooks-state.html).
 
-## ⚡️ Effect Hook {#️-effect-hook}
+## ⚡️ Хук эффекта {#effect-hook}
 
-You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering.
+Вам скорее всего доводилось ранее запрашивать данные, делать подписки или вручную менять DOM из React-компонента. Мы расцениваем эти операции как "побочные эффекты" (или сокращённо "эффекты"), так как они могут влиять на работу других компонентов и их нельзя выполнить во время рендера.
 
-The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).)
+С помощью хука эффекта `useEffect` вы можете выполнять побочные эффекты из функционального компонента. Он выполняет ту же роль, что и `componentDidMount`, `componentDidUpdate` и `componentWillUnmount` в React-классах, объединив их в единый API. Вы можете найти сравнение `useEffect` и этих методов на странице [использование хука эффекта](/docs/hooks-effect.html).
 
-For example, this component sets the document title after React updates the DOM:
+К примеру, этот компонент устанавливает заголовок документа после того, как React обновляет DOM:
 
 ```js{1,6-10}
 import React, { useState, useEffect } from 'react';
@@ -82,9 +82,9 @@ import React, { useState, useEffect } from 'react';
 function Example() {
   const [count, setCount] = useState(0);
 
-  // Similar to componentDidMount and componentDidUpdate:
+  // По принципу componentDidMount и componentDidUpdate:
   useEffect(() => {
-    // Update the document title using the browser API
+    // Обновляем заголовок документа, используя API браузера
     document.title = `You clicked ${count} times`;
   });
 
@@ -99,9 +99,9 @@ function Example() {
 }
 ```
 
-When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).)
+Когда вы вызываете `useEffect`, React получает указание запустить вашу функцию с "эффектом" после того, как он отправил изменения в DOM. Поскольку эффекты объявляются внутри компонента, у них есть доступ к его пропсам и состоянию. По умолчанию, React запускает эффекты после каждого рендера, *включая* первый рендер. Мы рассмотрим более подробно, как это отличается от классовых методов жизненного цикла на странице [использование хука эффекта](/docs/hooks-effect.html).
 
-Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it:
+При необходимости вы можете вернуть из эффекта функцию, которая указывает эффекту, как выполнить за собой "сброс". Например, этот компонент использует эффект, чтобы подписаться на статус друга в сети, и выполняет сброс, отписываясь от него.
 
 ```js{10-16}
 import React, { useState, useEffect } from 'react';
@@ -128,9 +128,9 @@ function FriendStatus(props) {
 }
 ```
 
-In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.)
+В этом примере, React будет отписываться от нашего `ChatAPI`  перед тем, как компонент размонтируется и перед тем, как перезапустить эффект при повторном рендере. Вы можете сделать так, чтобы [React пропускал повторные подписки](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) если  `props.friend.id`, который мы передали в `ChatAPI`, остался без изменений.
 
-Just like with `useState`, you can use more than a single effect in a component:
+Так же как и `useState`, вы можете использовать более одного эффекта в компоненте:
 
 ```js{3,8}
 function FriendStatusWithCounter(props) {
@@ -153,32 +153,32 @@ function FriendStatusWithCounter(props) {
   // ...
 ```
 
-Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods.
+Хуки дают вам возможность организовать побочные эффекты в компоненте по связанным частям (например, добавление или отмена подписки), вместо того, чтобы принуждать вас делить все согласно методам жизненного цикла.
 
->Detailed Explanation
+>Подробное объяснение
 >
->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html).
+>Вы можете узнать больше о `useEffect` на странице [Использование хука эффекта](/docs/hooks-effect.html).
 
-## ✌️ Rules of Hooks {#️-rules-of-hooks}
+## ✌️ Правила хуков {#rules-of-hooks}
 
-Hooks are JavaScript functions, but they impose two additional rules:
+Хуки -- это функции JavaScript, которые налагают два дополнительных правила:
 
-* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions.
-* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.)
+* Хуки следует вызывать только **на верхнем уровне**. Не вызывайте хуки внутри циклов, условий или вложенных функций.
+* Хуки следует вызывать только **из функциональных компонентов React**. Не вызывайте хуки из обычных JavaScript-функций. Есть только одно исключение, откуда можно вызывать хуки -- это ваши пользовательские хуки. Мы расскажем о них далее.
 
-We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well.
+Мы разработали специальный [плагин для линтера](https://www.npmjs.com/package/eslint-plugin-react-hooks), который помогает обеспечивать соблюдение этих правил. Мы понимаем, что эти правила могут показаться немного непонятными и накладывать определённые ограничения, но они очень важны для правильной работы хуков.
 
->Detailed Explanation
+>Подробное объяснение
 >
->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html).
+>Вы можете узнать больше на странице [Правила хуков](/docs/hooks-rules.html).
 
-## 💡 Building Your Own Hooks {#-building-your-own-hooks}
+## 💡 Создание собственных хуков {#building-your-own-hooks}
 
-Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree.
+Иногда нужно повторно использовать одинаковую логику состояния в нескольких компонентах. Традиционно использовались подхода: [компоненты высшего порядка](/docs/higher-order-components.html) и [рендер-пропсы](/docs/render-props.html). С помощью пользовательских хуков эта задача решается без добавления ненужных компонентов в ваше дерево.
 
-Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component.
+Ранее на этой странице мы рассматривали компонент `FriendStatus`, который вызывал хуки `useState` и `useEffect`, чтобы подписаться на статус друга в сети. Допустим, мы хотим ещё раз использовать эту логику с подпиской, но уже в другом компоненте.
 
-First, we'll extract this logic into a custom Hook called `useFriendStatus`:
+Прежде всего, давайте извлечём эту логику в пользовательский хук `useFriendStatus`
 
 ```js{3}
 import React, { useState, useEffect } from 'react';
@@ -201,9 +201,9 @@ function useFriendStatus(friendID) {
 }
 ```
 
-It takes `friendID` as an argument, and returns whether our friend is online.
+Хук принимает `friendID` в качестве аргумента и возвращает переменную, которая показывает, в сети наш друг или нет.
 
-Now we can use it from both components:
+Теперь мы можем использовать этот хук в обоих наших компонентах:
 
 
 ```js{2}
@@ -229,19 +229,19 @@ function FriendListItem(props) {
 }
 ```
 
-The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component.
+Состояния этих компонентов никаким образом не зависят друг от друга. Хуки -- это способ использовать повторно *логику состояния*, а не само состояние. Более того, каждое *обращение* к хуку обеспечивает совершенно изолированное состояние. Вы даже можете использовать один и тот же хук несколько раз в одном компоненте.
 
-Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks.
+Пользовательские хуки это в большей степени соглашение, чем дополнение. Если имя функции начинается с "`use`" и она вызывает другие хуки, мы расцениваем это как пользовательский хук. Если вы будете придерживаться соглашения `useSomething` при именовании хуков, это позволит нашему плагину для линтера найти баги в коде, который использует хуки.
 
-You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. We are excited to see what custom Hooks the React community will come up with.
+Есть много подходящих случаев, чтобы написать пользовательские хуки, такие как работа с формами, анимация, декларативные подписки, таймеры и, наверное, много других, о которых мы даже не думали. Мы с нетерпением ждём увидеть, какие же пользовательские хуки сообщество React сможет придумать.
 
->Detailed Explanation
+>Подробное объяснение
 >
->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html).
+>Вы можете узнать больше на странице [Создание пользовательских хуков](/docs/hooks-custom.html).
 
-## 🔌 Other Hooks {#-other-hooks}
+## 🔌 Другие хуки {#other-hooks}
 
-There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting:
+Есть ещё несколько менее используемых встроенных хуков, которые могут вам пригодиться. Например, с помощью [`useContext`](/docs/hooks-reference.html#usecontext), вы можете подписаться на контекст React без использования каких-либо вложений.
 
 ```js{2,3}
 function Example() {
@@ -251,7 +251,7 @@ function Example() {
 }
 ```
 
-And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer:
+А хук [`useReducer`](/docs/hooks-reference.html#usereducer) даёт возможность управлять внтуренним состоянием более сложного компонента с помощью редюсера.
 
 ```js{2}
 function Todos() {
@@ -259,14 +259,14 @@ function Todos() {
   // ...
 ```
 
->Detailed Explanation
+>Подробное объяснение
 >
->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html).
+>Вы можете узнать больше обо всех встроенных хуках на странице [справочник API хуков](/docs/hooks-reference.html).
 
-## Next Steps {#next-steps}
+## Что дальше? {#next-steps}
 
-Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation.
+Фух, давайте перестанем торопиться и немного охладим пыл! Если вам что-то непонятно или вы хотите узнать о чем-либо более подробно, вы можете начать читать следующие страницы, начиная с документации [хука состояния](/docs/hooks-state.html).
 
-You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html).
+Вы также можете просмотреть [справочник API хуков](/docs/hooks-reference.html) и [FAQ хуков](/docs/hooks-faq.html).
 
-Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps.
+И наконец, не проходите мимо [вступительной страницы](/docs/hooks-intro.html), на которой вы узнаете *почему* мы добавляем хуки и как мы планируем использовать их вместе с классами без необходимости переписывать наши приложения.
diff --git a/content/docs/hooks-reference.md b/content/docs/hooks-reference.md
index dac51b17a..deeef54cf 100644
--- a/content/docs/hooks-reference.md
+++ b/content/docs/hooks-reference.md
@@ -199,7 +199,7 @@ function reducer(state, action) {
   }
 }
 
-function Counter({initialCount}) {
+function Counter({initialState}) {
   const [state, dispatch] = useReducer(reducer, initialState);
   return (
     <>
diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md
index 052aecb33..272246d00 100644
--- a/content/docs/hooks-state.md
+++ b/content/docs/hooks-state.md
@@ -1,6 +1,6 @@
 ---
 id: hooks-state
-title: Using the State Hook
+title: Использование хука состояния
 permalink: docs/hooks-state.html
 next: hooks-effect.html
 prev: hooks-overview.html
@@ -8,31 +8,31 @@ prev: hooks-overview.html
 
 *Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class.
 
-The [previous page](/docs/hooks-intro.html) introduced Hooks with this example:
+На [предыдущей странице](/docs/hooks-intro.html) мы познакомились с хуками на этом примере:
 
 ```js{4-5}
 import React, { useState } from 'react';
 
 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // Объявление новой переменной состояния «count»
   const [count, setCount] = useState(0);
 
   return (
     <div>
-      <p>You clicked {count} times</p>
+      <p>Вы кликнули {count} раз(а)</p>
       <button onClick={() => setCount(count + 1)}>
-        Click me
+        Кликни по мне
       </button>
     </div>
   );
 }
 ```
 
-We'll start learning about Hooks by comparing this code to an equivalent class example.
+Давайте начнём изучать хуки, сравнив этот код с эквивалентным кодом на основе класса.
 
-## Equivalent Class Example {#equivalent-class-example}
+## Эквивалентный пример с классом {#equivalent-class-example}
 
-If you used classes in React before, this code should look familiar:
+Если вы уже пользовались классами в React, то вам знаком такой код:
 
 ```js
 class Example extends React.Component {
@@ -46,9 +46,9 @@ class Example extends React.Component {
   render() {
     return (
       <div>
-        <p>You clicked {this.state.count} times</p>
+        <p>Вы кликнули {this.state.count} раз(а)</p>
         <button onClick={() => this.setState({ count: this.state.count + 1 })}>
-          Click me
+          Кликни по мне
         </button>
       </div>
     );
@@ -56,39 +56,39 @@ class Example extends React.Component {
 }
 ```
 
-The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page.
+Сначала состояние выглядит как `{ count: 0 }`. Каждый раз, когда пользователь кликает, мы увеличиваем `state.count` на единицу, вызывая `this.setState()`. Мы будем использовать фрагменты этого класса на протяжении всей страницы.
 
->Note
+>Примечание
 >
->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks.
+>Возможно, вы спросите себя, почему мы используем в качестве примера счётчик, а не что-то более реалистичное. Дело в том, что мы хотим обратить ваше внимание на API, одновременно делая первые шаги с хуками.
 
-## Hooks and Function Components {#hooks-and-function-components}
+## Хуки и функциональные компоненты {#hooks-and-function-components}
 
-As a reminder, function components in React look like this:
+Напоминаем, что функциональные компоненты в React выглядят так:
 
 ```js
 const Example = (props) => {
-  // You can use Hooks here!
+  // Тут мог бы быть ваш хук!
   return <div />;
 }
 ```
 
-or this:
+или так:
 
 ```js
 function Example(props) {
-  // You can use Hooks here!
+  // Тут мог бы быть ваш хук!
   return <div />;
 }
 ```
 
-You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components".
+Возможно, вы слышали, что такие компоненты называются «компонентами *без* состояния». Сейчас мы покажем, как использовать внутри них состояние React, поэтому будем называть их «функциональными компонентами».
 
-Hooks **don't** work inside classes. But you can use them instead of writing classes.
+Хуки **НЕ** работают внутри классов, а используются *вместо* них.
 
-## What's a Hook? {#whats-a-hook}
+## Что такое хук? {#whats-a-hook}
 
-Our new example starts by importing the `useState` Hook from React:
+Наш новый пример начинается с того, что импортирует хук `useState` из React:
 
 ```js{1}
 import React, { useState } from 'react';
@@ -98,17 +98,17 @@ function Example() {
 }
 ```
 
-**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later.
+**Что такое хук?** Хук — это специальная функция, которая позволяет «подцепиться» к возможностям React. Например, хук `useState` предоставляет функциональным компонентам доступ к состоянию React. Мы узнаем про другие хуки чуть позже.
 
-**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now!
+**Когда применить хук?** Раньше, если вы писали функциональный компонент и осознавали, что вам нужно наделить его состоянием, вам приходилось превращать этот компонент в класс. Теперь же вы можете использовать хук внутри существующего функционального компонента. Мы покажем это прямо сейчас!
 
->Note:
+>Примечание:
 >
->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html).
+>Есть специальные правила о том, где можно, а где нельзя использовать хуки внутри компонента. Их мы изучим в главе [Правила хуков](/docs/hooks-rules.html).
 
-## Declaring a State Variable {#declaring-a-state-variable}
+## Объявление переменной состояния {#declaring-a-state-variable}
 
-In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor:
+Допустим, мы хотим инициализировать в классе состояние `count` значением `0`. Для этого в его конструкторе присваиваем `this.state` объект `{ count: 0 }`:
 
 ```js{4-6}
 class Example extends React.Component {
@@ -120,76 +120,76 @@ class Example extends React.Component {
   }
 ```
 
-In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component:
+В функциональном компоненте нам недоступен `this`, поэтому мы не можем задать или считать состояние через `this.state`. Вместо этого мы вызываем хук `useState` напрямую изнутри нашего компонента.
 
 ```js{4,5}
 import React, { useState } from 'react';
 
 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // Объявление новой переменной состояния «count»
   const [count, setCount] = useState(0);
 ```
 
-**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React.
+**Что делает вызов `useState`?** Он объявляет «переменную состояния». Мы называли переменную `count`, но могли дать ей любое имя, хоть `банан`. Таким образом мы можем «сохранить» некоторые значения между вызовами функции. `useState` это новый способ использовать те же возможности, что даёт `this.state` в классах. Обычно переменные «исчезают» при выходе из функции. К переменным состояния это не относится, потому что их сохраняет React.
 
-**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.)
+**Какие аргументы передавать `useState`?** Единственный аргумент `useState` это исходное состояние. В отличие от случая с классами, состояние может быть и не объектом, а строкой или числом, если нам так удобно. Поскольку в нашем примере отслеживается количество сделанных пользователем кликов, мы передаём `0` в качестве исходного значения переменной. (Если нам нужно было бы хранить два разных значения в состоянии, то пришлось бы вызвать `useState()` дважды.)
 
-**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean).
+**Что возвращается из `useState`?** Вызов `useState` вернёт пару значений: текущее состояние и функцию, обновляющую состояние. Поэтому мы пишем `const [count, setCount] = useState()`. Это похоже на `this.state.count` и `this.setState` в классах, с той лишь разницей, что сейчас мы принимаем их сразу в паре. Если вам незнаком использованный синтаксис, мы вернёмся к нему [ближе к концу страницы](/docs/hooks-state.html#tip-what-do-square-brackets-mean).
 
-Now that we know what the `useState` Hook does, our example should make more sense:
+Теперь мы знаем, что делает `useState`, и пример должен быть ясен:
 
 ```js{4,5}
 import React, { useState } from 'react';
 
 function Example() {
-  // Declare a new state variable, which we'll call "count"
+  // Объявление новой переменной состояния «count»
   const [count, setCount] = useState(0);
 ```
 
-We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`.
+Мы объявляем переменную состояния `count` и устанавливаем ей значение `0`. React будет помнить текущее (наиболее свежее) значение между рендерингами и передавать его нашей функции. Если мы захотим изменить `count`, мы вызовем `setCount`.
 
->Note
+>Примечание
 >
->You might be wondering: why is `useState` not named `createState` instead?
+>Может быть, вы спросите себя, почему `useState` не назвали `createState`?
 >
->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html).
+>Слово «сreate» («создать») было бы не совсем точно, потому что состояние создаётся только в момент, когда компонент рендерится впервые. В последующие же рендеринги `useState` возвращает текущее состояние. Иначе не существовало бы «состояния» как такового. Названия всех хуков начинаются с «use» тоже неспроста. О причине мы узнаем из [Правил хуков](/docs/hooks-rules.html).
 
-## Reading State {#reading-state}
+## Чтение состояния {#reading-state}
 
-When we want to display the current count in a class, we read `this.state.count`:
+Когда мы хотим отобразить текущее состояние счётчика в классе, мы обращаемся к `this.state.count`:
 
 ```js
-  <p>You clicked {this.state.count} times</p>
+  <p>Вы кликнули {this.state.count} раз(а)</p>
 ```
 
-In a function, we can use `count` directly:
+В функции же мы можем использовать `count` напрямую:
 
 
 ```js
-  <p>You clicked {count} times</p>
+  <p>Вы кликнули {count} раз(а)</p>
 ```
 
-## Updating State {#updating-state}
+## Обновление состояния {#updating-state}
 
-In a class, we need to call `this.setState()` to update the `count` state:
+В классе мы вызываем `this.setState()`, когда надо обновить состояние `count`:
 
 ```js{1}
   <button onClick={() => this.setState({ count: this.state.count + 1 })}>
-    Click me
+    Кликни по мне
   </button>
 ```
 
-In a function, we already have `setCount` and `count` as variables so we don't need `this`:
+В функции нам не нужен `this`, потому что `setCount` и `count` уже доступны как переменные:
 
 ```js{1}
   <button onClick={() => setCount(count + 1)}>
-    Click me
+    Кликни по мне
   </button>
 ```
 
-## Recap {#recap}
+## Резюме {#recap}
 
-Let's now **recap what we learned line by line** and check our understanding.
+Давайте **построчно пробежимся по тому, что мы выучили** и проверим наши знания:
 
 <!--
   I'm not proud of this line markup. Please somebody fix this.
@@ -203,78 +203,79 @@ Let's now **recap what we learned line by line** and check our understanding.
  5:
  6:    return (
  7:      <div>
- 8:        <p>You clicked {count} times</p>
+ 8:        <p>Вы кликнули {count} раз(а)</p>
  9:        <button onClick={() => setCount(count + 1)}>
-10:         Click me
+10:         Кликни по мне
 11:        </button>
 12:      </div>
 13:    );
 14:  }
 ```
 
-* **Line 1:** We import the `useState` Hook from React. It lets us keep local state in a function component.
-* **Line 4:** Inside the `Example` component, we declare a new state variable by calling the `useState` Hook. It returns a pair of values, to which we give names. We're calling our variable `count` because it holds the number of button clicks. We initialize it to zero by passing `0` as the only `useState` argument. The second returned item is itself a function. It lets us update the `count` so we'll name it `setCount`.
-* **Line 9:** When the user clicks, we call `setCount` with a new value. React will then re-render the `Example` component, passing the new `count` value to it.
+* **Строка 1:** Импортируем хук `useState` из React. Он позволяет функциональному компоненту хранить внутреннее состояние.
+* **Строка 4:** Объявляем внутри компонента `Example` новую переменную состояния, вызвав хук `useState`. Этот вызов возвращает пару значений, которым мы даём имена. Поскольку наша переменная состояния хранит количество сделанных по кнопке кликов, мы называем её `count`. Чтобы проинициализировать её, мы передаём значение `0` в качестве единственного аргумента функции `useState`. Второе возвращённое нам значение позволяет обновлять `count`, поэтому мы называем её `setCount`.
+* **Строка 9:** Когда пользователь кликает по кнопке, мы вызываем `setCount` с приращённым значением. После этого React сделает повторный рендер, в котором использует уже новое значение `count`.
 
-This might seem like a lot to take in at first. Don't rush it! If you're lost in the explanation, look at the code above again and try to read it from top to bottom. We promise that once you try to "forget" how state works in classes, and look at this code with fresh eyes, it will make sense.
+Поначалу это всё может показаться слишком сложным. Не торопитесь! Если вы запутались в объяснении, ещё раз прочитайте приведённый код с начала до конца. Обещаем, если вы на минутку «забудете», как состояние работает в классах, и посмотрите на код свежим взглядом, всё станет ясно.
 
-### Tip: What Do Square Brackets Mean? {#tip-what-do-square-brackets-mean}
+### Совет: Что делают квадратные скобки? {#tip-what-do-square-brackets-mean}
 
-You might have noticed the square brackets when we declare a state variable:
+Вы могли обратить внимание на квадратные скобки в месте, где объявляется переменная состояния:
 
 ```js
   const [count, setCount] = useState(0);
 ```
 
-The names on the left aren't a part of the React API. You can name your own state variables:
+Два имени в квадратных скобках не содержатся в API React. Названия переменным состояния выбираете вы:
 
 ```js
-  const [fruit, setFruit] = useState('banana');
+  const [fruit, setFruit] = useState('банан');
 ```
 
-This JavaScript syntax is called ["array destructuring"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring). It means that we're making two new variables `fruit` and `setFruit`, where `fruit` is set to the first value returned by `useState`, and `setFruit` is the second. It is equivalent to this code:
+Такой синтаксис в JavaScript называется
+[«деструктуризацией массивов (array destructuring)»](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80_%D0%BC%D0%B0%D1%81%D1%81%D0%B8%D0%B2%D0%BE%D0%B2). Он означает, что мы создаём две новые переменные, `fruit` и `setFruit`. Во `fruit` будет записано первое значение, вернувшееся из `useState`, а в `setFruit` — второе, что равносильно такому коду:
 
 ```js
-  var fruitStateVariable = useState('banana'); // Returns a pair
-  var fruit = fruitStateVariable[0]; // First item in a pair
-  var setFruit = fruitStateVariable[1]; // Second item in a pair
+  var fruitStateVariable = useState('банан'); // Возвращает пару значений
+  var fruit = fruitStateVariable[0]; // Извлекаем первое значение
+  var setFruit = fruitStateVariable[1]; // Извлекаем второе значение
 ```
 
-When we declare a state variable with `useState`, it returns a pair — an array with two items. The first item is the current value, and the second is a function that lets us update it. Using `[0]` and `[1]` to access them is a bit confusing because they have a specific meaning. This is why we use array destructuring instead.
+Когда мы объявляем переменную состояния с помощью функции `useState`, мы получаем от неё пару, то есть массив из двух элементов. Первый элемент обозначает текущее значение, а второй является функцией, позволяющей менять это значение. Доступ к элементам через `[0]` и `[1]` менее ясен, потому что индексы лишены осмысленных имён.
 
->Note
+>Примечание
 >
->You might be curious how React knows which component `useState` corresponds to since we're not passing anything like `this` back to React. We'll answer [this question](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) and many others in the FAQ section.
+>Вам может быть любопытно, а как же React знает, какому компоненту соответствует какой вызов `useState`, если мы не передаём React ни `this` ни чего-либо подобного. Ответ на [этот](/docs/hooks-faq.html#how-does-react-associate-hook-calls-with-components) и многие другие вопросы мы дадим в FAQ.
 
-### Tip: Using Multiple State Variables {#tip-using-multiple-state-variables}
+### Совет: Использование нескольких переменных состояния {#tip-using-multiple-state-variables}
 
-Declaring state variables as a pair of `[something, setSomething]` is also handy because it lets us give *different* names to different state variables if we want to use more than one:
+Объявлять переменные состояния через пару `[something, setSomething]` удобно ещё и тем, что когда нам нужны несколько переменных, мы можем назвать каждую из них *собственным* именем:
 
 ```js
 function ExampleWithManyStates() {
-  // Declare multiple state variables!
+  // Объявим несколько переменных состояния!
   const [age, setAge] = useState(42);
-  const [fruit, setFruit] = useState('banana');
-  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
+  const [fruit, setFruit] = useState('банан');
+  const [todos, setTodos] = useState([{ text: 'Изучить хуки' }]);
 ```
 
-In the above component, we have `age`, `fruit`, and `todos` as local variables, and we can update them individually:
+В примере выше мы видим локальные переменные `age`, `fruit` и `todos`, которые можем обновлять независимо друг от друга:
 
 ```js
   function handleOrangeClick() {
-    // Similar to this.setState({ fruit: 'orange' })
-    setFruit('orange');
+    // Аналогично коду this.setState({ fruit: 'апельсин' })
+    setFruit('апельсин');
   }
 ```
 
-You **don't have to** use many state variables. State variables can hold objects and arrays just fine, so you can still group related data together. However, unlike `this.setState` in a class, updating a state variable always *replaces* it instead of merging it.
+Использовать несколько переменных состояния совсем не обязательно, потому что они могут быть объектами или массивами, которые группируют связанные по смыслу данные. Обратите внимание, что, в отличие от `this.setState` в классах, обновление переменной состояния всегда *замещает* её значение, а не осуществляет слияние.
 
-We provide more recommendations on splitting independent state variables [in the FAQ](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables).
+Подробные рекомендации о разделении независимых переменных состояния вы найдёте [в FAQ](/docs/hooks-faq.html#should-i-use-one-or-many-state-variables).
 
-## Next Steps {#next-steps}
+## Следующие шаги {#next-steps}
 
-On this page we've learned about one of the Hooks provided by React, called `useState`. We're also sometimes going to refer to it as the "State Hook". It lets us add local state to React function components -- which we did for the first time ever!
+На этой странице мы изучили хук React под названием `useState`. Иногда мы будем ссылаться на него как на «хук состояния». Он позволяет добавить состояние в функциональные компоненты React, в чём мы убедились на примере!
 
-We also learned a little bit more about what Hooks are. Hooks are functions that let you "hook into" React features from function components. Their names always start with `use`, and there are more Hooks we haven't seen yet.
+Мы узнали ещё немного больше о хуках — функциях, позволяющих функциональным компонетам «подцепиться» к возможностям React. Их имена всегда начинаются с `use`. Существует много других хуков, которые мы пока не рассматривали.
 
-**Now let's continue by [learning the next Hook: `useEffect`.](/docs/hooks-effect.html)** It lets you perform side effects in components, and is similar to lifecycle methods in classes.
+**А теперь давайте перейдём к [изучению хука `useEffect`](/docs/hooks-effect.html)**, похожего на методы жизненного цикла в классах. С его помощью компоненты могут выполнять побочные эффекты.
diff --git a/content/docs/how-to-contribute.md b/content/docs/how-to-contribute.md
index b45a0b050..46d5d626a 100644
--- a/content/docs/how-to-contribute.md
+++ b/content/docs/how-to-contribute.md
@@ -27,7 +27,7 @@ If you send a pull request, please do it against the `master` branch. We maintai
 
 ### Semantic Versioning {#semantic-versioning}
 
-React follows [semantic versioning](http://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
+React follows [semantic versioning](https://semver.org/). We release patch versions for bugfixes, minor versions for new features, and major versions for any breaking changes. When we make breaking changes, we also introduce deprecation warnings in a minor version so that our users learn about the upcoming changes and migrate their code in advance.
 
 We tag every pull request with a label marking whether the change should go in the next [patch](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-patch), [minor](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-minor), or a [major](https://github.com/facebook/react/pulls?q=is:open+is:pr+label:semver-major) version. We release new patch versions every few weeks, minor versions every few months, and major versions one or two times a year.
 
@@ -52,7 +52,7 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 * IRC: [#reactjs on freenode](https://webchat.freenode.net/?channels=reactjs)
 * Discussion forum: [discuss.reactjs.org](https://discuss.reactjs.org/)
 
-There is also [an active community of React users on the Discord chat platform](http://www.reactiflux.com/) in case you need help with React.
+There is also [an active community of React users on the Discord chat platform](https://www.reactiflux.com/) in case you need help with React.
 
 ### Proposing a Change {#proposing-a-change}
 
diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md
index 18a67c457..482e579cd 100644
--- a/content/docs/integrating-with-other-libraries.md
+++ b/content/docs/integrating-with-other-libraries.md
@@ -1,26 +1,26 @@
 ---
 id: integrating-with-other-libraries
-title: Integrating with Other Libraries
+title: Взаимодействие со сторонними библиотеками
 permalink: docs/integrating-with-other-libraries.html
 ---
 
-React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code.
+React может использоваться в любом веб-приложении. Он может быть встроен в другие приложения, и, с некоторыми оговорками, другие приложения могут встраиваться в React. Это руководство рассматривает некоторые общие случаи, с упором на интеграцию с [jQuery](https://jquery.com/) и [Backbone](https://backbonejs.org). Те же подходы могут использоваться для интеграции компонентов с любым существующим кодом.
 
-## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins}
+## Интеграция с плагинами, изменяющими DOM {#integrating-with-dom-manipulation-plugins}
 
-React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover.
+React не знает про изменения DOM, которые сделаны вне React. Он определяет обновления на основе своего внутреннего представления, и если одни и те же DOM-узлы управляются другими библиотеками, то это нарушает работу React без возможности её восстановления.
 
-This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing.
+Это не означает, что соединить React с другими инструментами работы с DOM сложно или невозможно. Просто нужно помнить, за что отвечает каждый инструмент.
 
-The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `<div />`.
+Самый простой способ избежать конфликтов -- предотвратить обновление React-компонента. Это можно сделать через рендеринг элемента, который не должен обновляться React, например, пустой `<div />`.
 
-### How to Approach the Problem {#how-to-approach-the-problem}
+### Как решить проблему {#how-to-approach-the-problem}
 
-To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin.
+Для демонстрации давайте набросаем обертку вокруг обобщенного jQuery-плагина.
 
-We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin.
+Мы установим [реф](/docs/refs-and-the-dom.html) на корневой DOM-элемент. Внутри `componentDidMount` мы получим ссылку на этот реф и передадим её в jQuery-плагин.
 
-To prevent React from touching the DOM after mounting, we will return an empty `<div />` from the `render()` method. The `<div />` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM:
+Чтобы React не взаимодействовал с DOM после монтирования, вернём пустой `<div />` из метода `render()`. Элемент `<div />` не имеет ни свойств, ни дочерних компонентов, так что для React нет никаких причин его обновлять. Это даёт jQuery полную свободу управления этой частью DOM: 
 
 ```js{3,4,8,12}
 class SomePlugin extends React.Component {
@@ -39,37 +39,37 @@ class SomePlugin extends React.Component {
 }
 ```
 
-Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks.
+Заметьте, что мы объявили два [метода жизненного цикла](/docs/react-component.html#the-component-lifecycle) — как `componentDidMount`, так и `componentWillUnmount`. Многие jQuery-плагины добавляют обработчики событий DOM, поэтому важно удалять их внутри `componentWillUnmount`. Если плагин не предоставляет метод для очистки, то, возможно, вам придётся написать свой. Помните об удалении обработчиков событий, добавленных плагином, чтобы избежать утечек памяти.
 
-### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin}
+### Интеграция с jQuery-плагином Chosen {#integrating-with-jquery-chosen-plugin}
 
-For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments `<select>` inputs.
+Теперь рассмотрим конкретный пример. Давайте напишем минимальную обёртку для плагина [Chosen](https://harvesthq.github.io/chosen/), который работает с элементами `<select>`.
 
->**Note:**
+>**Примечание:**
 >
->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance.
+> То, что следующий способ работает, совсем не значит, что это оптимальное решение для React-приложений. Мы советуем пользоваться React-компонентами, когда это возможно. Они являются самым простым способом переиспользовать код в React-приложении, и часто дают больший контроль над своим поведением и внешним видом.
 
-First, let's look at what Chosen does to the DOM.
+Для начала, давайте посмотрим, что Chosen делает с DOM.
 
-If you call it on a `<select>` DOM node, it reads the attributes off of the original DOM node, hides it with an inline style, and then appends a separate DOM node with its own visual representation right after the `<select>`. Then it fires jQuery events to notify us about the changes.
+Когда вы вызываете его на DOM-узле `<select>`, он читает атрибуты этого узла, скрывает его с помощью встроенных стилей и непосредственно перед ним добавляет отдельный DOM-узел с собственным визуальным представлением. Затем он запускает события jQuery, чтобы уведомлять нас об изменениях.
 
-Let's say that this is the API we're striving for with our `<Chosen>` wrapper React component:
+Допустим, мы хотим предоставить следующий API для нашего компонента-обёртки над `<Chosen>`:
 
 ```js
 function Example() {
   return (
     <Chosen onChange={value => console.log(value)}>
-      <option>vanilla</option>
-      <option>chocolate</option>
-      <option>strawberry</option>
+      <option>ваниль</option>
+      <option>шоколад</option>
+      <option>клубника</option>
     </Chosen>
   );
 }
 ```
 
-We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity.
+Для простоты мы будем реализовывать [неконтролируемый компонент](/docs/uncontrolled-components.html).
 
-First, we will create an empty component with a `render()` method where we return `<select>` wrapped in a `<div>`:
+Сначала создадим пустой компонент, с методом `render()`, который возвращает `<select>`, обёрнутый в `<div>`:
 
 ```js{4,5}
 class Chosen extends React.Component {
@@ -85,9 +85,9 @@ class Chosen extends React.Component {
 }
 ```
 
-Notice how we wrapped `<select>` in an extra `<div>`. This is necessary because Chosen will append another DOM element right after the `<select>` node we passed to it. However, as far as React is concerned, `<div>` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes.
+Обратите внимание, что мы обернули `<select>` в дополнительный `<div>`. Это нужно, потому что Chosen добавляет новый элемент сразу за узлом `<select>`, на котором он вызывается. Но React всегда ожидает только один дочерний элемент для `<div>`. Так мы гарантируем, что обновления React не будут конфликтовать с дополнительным узлом, добавляемым Chosen. Если вы собираетесь изменять DOM вне React, важно убедиться, что React не взаимодействует с DOM-узлами.
 
-Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `<select>` node in `componentDidMount`, and tear it down in `componentWillUnmount`:
+Следующим шагом реализуем методы жизненного цикла. Нам нужно инициализировать Chosen с рефом на узле `<select>` в `componentDidMount`, а затем убрать его в `componentWillUnmount`:
 
 ```js{2,3,7}
 componentDidMount() {
@@ -100,17 +100,17 @@ componentWillUnmount() {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/qmqeQx?editors=0010)
 
-Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method:
+Обратите внимание, что React не придаёт никакого особого значения полю `this.el`. Код работает потому, что ранее мы присвоили этому полю `ref` в методе `render()`:
 
 ```js
 <select className="Chosen-select" ref={el => this.el = el}>
 ```
 
-This is enough to get our component to render, but we also want to be notified about the value changes. To do this, we will subscribe to the jQuery `change` event on the `<select>` managed by Chosen.
+Этого достаточно, чтобы наш компонент отрендерился, но мы бы хотели получать уведомления об изменении значений. Для этого мы подпишемся на jQuery событие `change` на `<select>`, контролируемом Chosen.
 
-We won't pass `this.props.onChange` directly to Chosen because component's props might change over time, and that includes event handlers. Instead, we will declare a `handleChange()` method that calls `this.props.onChange`, and subscribe it to the jQuery `change` event:
+Мы не станем передавать в Chosen `this.props.onChange` напрямую, потому что пропсы компонента могут со временем изменениться (в том числе и обработчики событий). Вместо этого мы объявим метод `handleChange()`, который будет вызывать `this.props.onChange`, и подпишем его на jQuery-событие `change`:
 
 ```js{5,6,10,14-16}
 componentDidMount() {
@@ -131,11 +131,11 @@ handleChange(e) {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/bWgbeE?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010)
 
-Finally, there is one more thing left to do. In React, props can change over time. For example, the `<Chosen>` component can get different children if parent component's state changes. This means that at integration points it is important that we manually update the DOM in response to prop updates, since we no longer let React manage the DOM for us.
+В завершение осталось сделать ещё кое-что. В React пропсы могут изменяться со временем. Например, компонент `<Chosen>` может получать разные дочерние элементы, если состояние родительского компонента изменяется. Это означает, что в точке интеграции нам нужно вручную обновлять DOM, в соответствии с обновлениями проп, так как React больше не управляет DOM для нас.
 
-Chosen's documentation suggests that we can use jQuery `trigger()` API to notify it about changes to the original DOM element. We will let React take care of updating `this.props.children` inside `<select>`, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list:
+Документация Chosen предлагает использовать jQuery-метод `trigger()`, чтобы сообщить об изменения в оригинальном DOM-элементе. Мы поручим React заниматься обновлением `this.props.children` внутри `<select>`, но нужно добавить метод жизненного цикла `componentDidUpdate()`, чтобы уведомлять Chosen про обновление списка дочерних элементов:
 
 ```js{2,3}
 componentDidUpdate(prevProps) {
@@ -145,9 +145,9 @@ componentDidUpdate(prevProps) {
 }
 ```
 
-This way, Chosen will know to update its DOM element when the `<select>` children managed by React change.
+Таким способом Chosen узнает, что нужно обновить его DOM-элемент, когда дочерние элементы `<select>` были обновлены React.
 
-The complete implementation of the `Chosen` component looks like this:
+Полная реализация `Chosen` компонента выглядит так:
 
 ```js
 class Chosen extends React.Component {
@@ -186,34 +186,34 @@ class Chosen extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/xdgKOz?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/xdgKOz?editors=0010)
 
-## Integrating with Other View Libraries {#integrating-with-other-view-libraries}
+## Интеграция с другими визульными библиотеками {#integrating-with-other-view-libraries}
 
-React can be embedded into other applications thanks to the flexibility of [`ReactDOM.render()`](/docs/react-dom.html#render).
+Благодаря гибкости [`ReactDOM.render()`](/docs/react-dom.html#render) React может встраиваться в другие приложения.
 
-Although React is commonly used at startup to load a single root React component into the DOM, `ReactDOM.render()` can also be called multiple times for independent parts of the UI which can be as small as a button, or as large as an app.
+Хотя обычно React используют для загрузки в DOM одного корневого компонента, `ReactDOM.render()` может быть вызван несколько раз для независимых частей UI. Это могут быть как отдельные кнопки, так и большие приложения.
 
-In fact, this is exactly how React is used at Facebook. This lets us write applications in React piece by piece, and combine them with our existing server-generated templates and other client-side code.
+На самом деле, именно так React используется в Facebook. Это позволяет писать приложения на React по частям и объединять их с существующими генерируемыми сервером шаблонами и другим клиентским кодом.
 
-### Replacing String-Based Rendering with React {#replacing-string-based-rendering-with-react}
+### Замена строковых шаблонов с помощью React {#replacing-string-based-rendering-with-react}
 
-A common pattern in older web applications is to describe chunks of the DOM as a string and insert it into the DOM like so: `$el.html(htmlString)`. These points in a codebase are perfect for introducing React. Just rewrite the string based rendering as a React component.
+Распространённый подход в старых веб-приложениях — описание частей DOM c помощью строк (вроде `${el.html(htmlString)`}). Такие участки кода прекрасно подходят для внедрения React. Просто переписываем рендеринг на основе строк в React-компонент.
 
-So the following jQuery implementation...
+Итак, есть текущая реализация на jQuery...
 
 ```js
-$('#container').html('<button id="btn">Say Hello</button>');
+$('#container').html('<button id="btn">Сказать «Привет»</button>');
 $('#btn').click(function() {
-  alert('Hello!');
+  alert('Привет!');
 });
 ```
 
-...could be rewritten using a React component:
+...может быть переписана в React-компонент:
 
 ```js
 function Button() {
-  return <button id="btn">Say Hello</button>;
+  return <button id="btn">Сказать «Привет»</button>;
 }
 
 ReactDOM.render(
@@ -221,22 +221,22 @@ ReactDOM.render(
   document.getElementById('container'),
   function() {
     $('#btn').click(function() {
-      alert('Hello!');
+      alert('Привет!');
     });
   }
 );
 ```
 
-From here you could start moving more logic into the component and begin adopting more common React practices. For example, in components it is best not to rely on IDs because the same component can be rendered multiple times. Instead, we will use the [React event system](/docs/handling-events.html) and register the click handler directly on the React `<button>` element:
+А дальше вы можете начать переносить логику внутрь компонента и использовать остальные React-подходы. Например, в компонентах лучше не полагаться на идентификаторы, потому что один и тот же компонент может быть отрендерен несколько раз. Вместо этого мы используем [событийную систему React](/docs/handling-events.html) и зарегистрируем обработчик непосредственно на React-элементе `<button>`:
 
 ```js{2,6,9}
 function Button(props) {
-  return <button onClick={props.onClick}>Say Hello</button>;
+  return <button onClick={props.onClick}>Сказать «Привет»</button>;
 }
 
 function HelloButton() {
   function handleClick() {
-    alert('Hello!');
+    alert('Привет!');
   }
   return <Button onClick={handleClick} />;
 }
@@ -247,15 +247,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010)
 
-You can have as many such isolated components as you like, and use `ReactDOM.render()` to render them to different DOM containers. Gradually, as you convert more of your app to React, you will be able to combine them into larger components, and move some of the `ReactDOM.render()` calls up the hierarchy.
+Вы можете завести столько изолированных компонентов, сколько вам захочется. И использовать `ReactDOM.render()` для рендеринга в разные DOM-контейнеры. Постепенно, по мере перевода вашего приложения на React, вы сможете комбинировать их в большие компоненты и переносить вызов `ReactDOM.render()` вверх по структуре.
 
-### Embedding React in a Backbone View {#embedding-react-in-a-backbone-view}
+### Встраиваем React в представления Backbone {#embedding-react-in-a-backbone-view}
 
-[Backbone](http://backbonejs.org/) views typically use HTML strings, or string-producing template functions, to create the content for their DOM elements. This process, too, can be replaced with rendering a React component.
+Представления в [Backbone](https://backbonejs.org/) обычно используют HTML-строки или функции, создающие строковые шаблоны для создания DOM элементов. Этот механизм также может быть заменен рендерингом React-компонентов.
 
-Below, we will create a Backbone view called `ParagraphView`. It will override Backbone's `render()` function to render a React `<Paragraph>` component into the DOM element provided by Backbone (`this.el`). Here, too, we are using [`ReactDOM.render()`](/docs/react-dom.html#render):
+Ниже мы создадим Backbone-представление `ParagraphView`. Оно переопределит метод `render()` (из `Backbone.View`) для рендеринга React-компонента `<Paragraph>` в DOM-элемент, предоставляемый Backbone (`this.el`). Также мы воспользуемся [`ReactDOM.render()`](/docs/react-dom.html#render):
 
 ```js{1,5,8,12}
 function Paragraph(props) {
@@ -275,23 +275,23 @@ const ParagraphView = Backbone.View.extend({
 });
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gWgOYL?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010)
 
-It is important that we also call `ReactDOM.unmountComponentAtNode()` in the `remove` method so that React unregisters event handlers and other resources associated with the component tree when it is detached.
+Стоит отметить вызов `ReactDOM.unmountComponentAtNode()` в методе `remove`. Он нужен для того, чтобы React отключил обработчики событий и другие ресурсы, связанные с деревом компонентов при удалении.
 
-When a component is removed *from within* a React tree, the cleanup is performed automatically, but because we are removing the entire tree by hand, we must call this method.
+Когда компонент удаляется из дерева React *изнутри*, очистка производится автоматически, но поскольку мы удаляем сущность из дерева вручную, то обязаны вызвать этот метод.
 
-## Integrating with Model Layers {#integrating-with-model-layers}
+## Интеграция со слоем моделей {#integrating-with-model-layers}
 
-While it is generally recommended to use unidirectional data flow such as [React state](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/), or [Redux](http://redux.js.org/), React components can use a model layer from other frameworks and libraries.
+Обычно рекомендуется использовать однонаправленный поток данных, вроде [состояния React](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/) или [Redux](https://redux.js.org/). Но React-компоненты могут также использовать слой данных из других библиотек и фреймворков.
 
-### Using Backbone Models in React Components {#using-backbone-models-in-react-components}
+### Использование моделей Backbone в React-компонентах {#using-backbone-models-in-react-components}
 
-The simplest way to consume [Backbone](http://backbonejs.org/) models and collections from a React component is to listen to the various change events and manually force an update.
+Самый простой способ использовать модели и коллекции [Backbone](https://backbonejs.org) из React-компонентов — это обработка различных событий и ручное обновление компонентов.
 
-Components responsible for rendering models would listen to `'change'` events, while components responsible for rendering collections would listen for `'add'` and `'remove'` events. In both cases, call [`this.forceUpdate()`](/docs/react-component.html#forceupdate) to rerender the component with the new data.
+Компоненты, отвечающие за рендеринг моделей, будут обрабатывать событие `'change'`, а компоненты, отвечающие за рендеринг коллекций, будут обрабатывать события `'add'` и `'remove'`. В обоих случаях для отображения новых данных нужно вызвать [`this.forceUpdate()`]](/docs/react-component.html#forceupdate).
 
-In the example below, the `List` component renders a Backbone collection, using the `Item` component to render individual items.
+В следующем примере компонент `list` ренедрит Backbone-коллекцию, используя компонент `Item` для рендеринга отдельных элементов.
 
 ```js{1,7-9,12,16,24,30-32,35,39,46}
 class Item extends React.Component {
@@ -347,19 +347,19 @@ class List extends React.Component {
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/GmrREm?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/GmrREm?editors=0010)
 
-### Extracting Data from Backbone Models {#extracting-data-from-backbone-models}
+### Вынос данных из моделей  Backbone {#extracting-data-from-backbone-models}
 
-The approach above requires your React components to be aware of the Backbone models and collections. If you later plan to migrate to another data management solution, you might want to concentrate the knowledge about Backbone in as few parts of the code as possible.
+Подход, показанный выше, требует, чтобы ваши React-компоненты знали о наличии моделей и коллекций Backbone. Если у вас в планах есть переход на другое решение для управления данными, вы, возможно, захотите максимально уменьшить связь с Backbone.
 
-One solution to this is to extract the model's attributes as plain data whenever it changes, and keep this logic in a single place. The following is [a higher-order component](/docs/higher-order-components.html) that extracts all attributes of a Backbone model into state, passing the data to the wrapped component.
+Один из подходов — когда при каждом изменении модели, вы извлекаете её атрибуты в виде простых данных и храните всю логику в одном месте. Следующий [компонент высшего порядка](/docs/higher-order-components.html) извлекает все атрибуты Backbone-модели в `state`, передавая данные в оборачиваемый компонент.
 
-This way, only the higher-order component needs to know about Backbone model internals, and most components in the app can stay agnostic of Backbone.
+При этом подходе только компоненты высшего порядка будут знать о Backbone-моделях, а большая часть компонентов в приложении не будет завязана на Backbone.
 
-In the example below, we will make a copy of the model's attributes to form the initial state. We subscribe to the `change` event (and unsubscribe on unmounting), and when it happens, we update the state with the model's current attributes. Finally, we make sure that if the `model` prop itself changes, we don't forget to unsubscribe from the old model, and subscribe to the new one.
+В примере ниже, мы сделаем копию атрибутов модели для формирования начального состояния. Мы подпишемся на событие `change` (и отпишемся от него при удалении), и когда оно будет возникать, мы обновим состояние текущими атрибутами. Наконец, мы убедимся, что если изменяется сам проп `model`, мы не забываем отписаться от старой модели и подписаться на новую.
 
-Note that this example is not meant to be exhaustive with regards to working with Backbone, but it should give you an idea for how to approach this in a generic way:
+Обратите внимание, пример ниже не является полным в отношении работы с Backbone. Но он должен дать вам понимание общего подхода:
 
 ```js{1,5,10,14,16,17,22,26,32}
 function connectToBackboneModel(WrappedComponent) {
@@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) {
 }
 ```
 
-To demonstrate how to use it, we will connect a `NameInput` React component to a Backbone model, and update its `firstName` attribute every time the input changes:
+Для демонстрации использования мы соединим React-компонент `NameInput` и Backbone-модель и будем обновлять её атрибут `firstName` при каждом изменении поля ввода:
 
 ```js{4,6,11,15,19-21}
 function NameInput(props) {
@@ -407,7 +407,7 @@ function NameInput(props) {
     <p>
       <input value={props.firstName} onChange={props.handleChange} />
       <br />
-      My name is {props.firstName}.
+      Моё имя - {props.firstName}.
     </p>
   );
 }
@@ -434,6 +434,6 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010)
 
-This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state.
+Этот подход не ограничивается Backbone. Вы можете использовать React с любой библиотекой для работы с данными, просто подписываясь на методы жизненного цикла и, при необходимости, копируя данные во внутреннее состояние React.
diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d76c3ace6..674869e90 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,40 +1,40 @@
 ---
 id: introducing-jsx
-title: Introducing JSX
+title: Знакомство с JSX
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Consider this variable declaration:
+Рассмотрим объявление переменной:
 
 ```js
-const element = <h1>Hello, world!</h1>;
+const element = <h1>Привет, мир!</h1>;
 ```
 
-This funny tag syntax is neither a string nor HTML.
+Этот странный тег — ни строка, ни фрагмент HTML.
 
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
+Это JSX — расширение языка JavaScript. Мы рекомендуем использовать его, когда требуется объяснить React, как должен выглядеть UI. JSX напоминает язык шаблонов, наделённый силой JavaScript.
 
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
+JSX производит «элементы» React. То как элементы рендерятся в DOM, мы изучим в [следующей главе](/docs/rendering-elements.html), а ниже мы рассмотрим основы JSX, которые нужно знать начинающему.
 
-### Why JSX? {#why-jsx}
+### Что такое JSX? {#why-jsx}
 
-React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
+React исходит из принципа, что логика рендеринга неразрывно связана с прочей логикой UI: с тем, как обрабатываются события, как состояние изменяется во времени и как данные готовятся к отображению.
 
-Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
+Вместо того, чтобы искусственно разделить *технологии*, помещая разметку и логику в разные файлы, React [разделяет ответственность](https://ru.wikipedia.org/wiki/%D0%A0%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5_%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8) с помощью слабо связанных единиц, называемых «компоненты», которые содержат *и* разметку *и* логику. Мы ещё вернёмся к теме компонентов в [следующей главе](/docs/components-and-props.html), но если идея держать разметку в JavaScript коде всё ещё вызывает у вас дискомфорт, [этот доклад](https://www.youtube.com/watch?v=x7cQ3mrcKaY) может переубедить вас.
 
-React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+React [можно использовать и без JSX](/docs/react-without-jsx.html), но большинство людей ценит его за наглядность при работе с UI, живущем в JavaScript-коде. Помимо этого, JSX помогает React делать сообщения об ошибках и предупреждениях понятнее.
 
-With that out of the way, let's get started!
+С этим разобрались. Поехали дальше!
 
-### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
+### Встраивание выражений в JSX {#embedding-expressions-in-jsx}
 
-In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
+В следующем примере мы объявляем переменную `name` и затем используем её внутри JSX, обрамляя фигурными скобками:
 
 ```js{1,2}
-const name = 'Josh Perez';
-const element = <h1>Hello, {name}</h1>;
+const name = 'Иван-Царевич';
+const element = <h1>Здравствуй, {name}!</h1>;
 
 ReactDOM.render(
   element,
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
+JSX допускает использование любых корректных [JavaScript-выражений](https://developer.mozilla.org/ru/docs/Web/JavaScript/Guide/Expressions_and_Operators) внутри фигурных скобок. Например,  `2 + 2`, `user.firstName` и `formatName(user)` являются допустимыми выражениями.
 
-In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
+В примере ниже мы встраиваем результат вызова JavaScript-функции `formatName(user)` в элемент `<h1>`:
 
 ```js{12}
 function formatName(user) {
@@ -52,13 +52,13 @@ function formatName(user) {
 }
 
 const user = {
-  firstName: 'Harper',
-  lastName: 'Perez'
+  firstName: 'Марья',
+  lastName: 'Моревна'
 };
 
 const element = (
   <h1>
-    Hello, {formatName(user)}!
+    Здравствуй, {formatName(user)}!
   </h1>
 );
 
@@ -70,81 +70,80 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+Чтобы улучшить читаемость, мы разбили JSX на несколько строк. В таких случаях, хотя это и не обязательно, мы советуем заключать всё выражение целиком в круглые скобки, чтобы избежать проблем, связанных с [автоматической вставкой точек с запятой](https://stackoverflow.com/q/2846283).
 
-### JSX is an Expression Too {#jsx-is-an-expression-too}
+### JSX это тоже выражение {#jsx-is-an-expression-too}
 
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+После компиляции каждое JSX-выражение становится обычным вызовом JavaScript-функции, результат которого — объект JavaScript.
 
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+Из этого следует, что JSX можно использовать внутри выражений `if` и циклов `for`, присваивать переменным, передавать функции в качестве аргумента и возвращать из функции.
 
 ```js{3,5}
 function getGreeting(user) {
   if (user) {
-    return <h1>Hello, {formatName(user)}!</h1>;
+    return <h1>Здравствуй, {formatName(user)}!</h1>;
   }
-  return <h1>Hello, Stranger.</h1>;
+  return <h1>Здравствуй, незнакомец.</h1>;
 }
 ```
 
-### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
+### Использование атрибутов JSX {#specifying-attributes-with-jsx}
 
-You may use quotes to specify string literals as attributes:
+Чтобы использовать строковый литерал в качестве атрибута, используются кавычки:
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-You may also use curly braces to embed a JavaScript expression in an attribute:
+Если же в атрибут требуется указать JavaScript-выражение, то на помощь приходят фигурные скобки:
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+Не ставьте кавычек вокруг фигурных скобок, когда используете JavaScript-выражение в атрибуте. Следует либо применить кавычки (для строковых литералов), либо фигурные скобки (для выражений), но не то и другое вместе.
 
->**Warning:**
+>**Предупреждение:**
 >
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+>Поскольку JSX ближе к JavaScript чем к HTML, React DOM использует стиль именования `camelCase` для свойств вместо обычных имён HTML-атрибутов.
 >
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
+>Например, `class` становится [`className`](https://developer.mozilla.org/ru/docs/Web/API/Element/className) в JSX, а `tabindex` становится [`tabIndex`](https://developer.mozilla.org/ru/docs/Web/API/HTMLElement/tabIndex).
 
-### Specifying Children with JSX {#specifying-children-with-jsx}
+### Использование дочерних элементов в JSX {#specifying-children-with-jsx}
 
-If a tag is empty, you may close it immediately with `/>`, like XML:
+Если тег пуст, то его можно сразу же закрыть с помощью `/>` точно так же, как и в XML:
 
 ```js
 const element = <img src={user.avatarUrl} />;
 ```
 
-JSX tags may contain children:
+Но JSX-теги могут и содержать дочерние элементы: 
 
 ```js
 const element = (
   <div>
-    <h1>Hello!</h1>
-    <h2>Good to see you here.</h2>
+    <h1>Здравствуйте!</h1>
+    <h2>Рады вас видеть.</h2>
   </div>
 );
 ```
 
-### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
+### JSX предотвращает атаки, основанные на инъекции кода {#jsx-prevents-injection-attacks}
 
-It is safe to embed user input in JSX:
+Данные, введённые пользователем, можно безопасно использовать в JSX:
 
 ```js
 const title = response.potentiallyMaliciousInput;
-// This is safe:
+// Этот код безопасен:
 const element = <h1>{title}</h1>;
 ```
+По умолчанию React DOM [экранирует](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) все значения, включённые в JSX перед тем как отрендерить их. Это гарантирует, что вы никогда не внедрите чего-либо, что не было явно написано в вашем приложении. Всё преобразуется в строчки, перед тем как быть отрендеренным. Это помогает предотвращать атаки [межсайтовым скриптингом (XSS)](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3).
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+### JSX представляет собой объекты {#jsx-represents-objects}
 
-### JSX Represents Objects {#jsx-represents-objects}
+Babel компилирует JSX в вызовы `React.createElement()`.
 
-Babel compiles JSX down to `React.createElement()` calls.
-
-These two examples are identical:
+Следующие два примера кода эквивалентны между собой:
 
 ```js
 const element = (
@@ -162,23 +161,23 @@ const element = React.createElement(
 );
 ```
 
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+`React.createElement()` проводит некоторые проверки с целью выявить баги в коде, но главное — создаёт объект похожий на такой:
 
 ```js
-// Note: this structure is simplified
+// Примечание: этот код несколько упрощён.
 const element = {
   type: 'h1',
   props: {
     className: 'greeting',
-    children: 'Hello, world!'
+    children: 'Привет, мир!'
   }
 };
 ```
 
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
+Эти объекты называются React-элементами. Можно сказать, что они описывают результат, который мы хотим увидеть на экране. React читает эти объекты и использует их, чтобы конструировать и поддерживать DOM. 
 
-We will explore rendering React elements to the DOM in the next section.
+В следующей главе мы углубимся в то, как React элементы рендерятся в DOM.
 
->**Tip:**
+>**Совет:**
 >
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>Мы рекомендуем настроить ваш любимый редактор кода использовать [Babel](https://babeljs.io/docs/editors) чтобы и ES6, и JSX код были подсвечены должным образом. Настоящий сайт использует совместимую цветовую схему [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/).
diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c82739a6a..7085f2d2e 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,14 +1,14 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: Списки и ключи
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-First, let's review how you transform lists in JavaScript.
+Сначала давайте вспомним, как работать со списками в JavaScript.
 
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
+В коде ниже мы используем функцию [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), чтобы удвоить значения в массиве `numbers`. Мы присваиваем массив, возвращаемый из `map()`, переменной `doubled`, и выводим её в консоль:
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -16,15 +16,15 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-This code logs `[2, 4, 6, 8, 10]` to the console.
+Этот код выведет `[2, 4, 6, 8, 10]` в консоль.
 
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+В React преобразование массивов в список [элементов](/docs/rendering-elements.html) выглядит похожим образом.
 
-### Rendering Multiple Components {#rendering-multiple-components}
+### Рендер нескольких компонентов {#rendering-multiple-components}
 
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+Вы можете создать коллекцию элементов и [встроить её в JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) с помощью фигурных скобок `{}`.
 
-Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`:
+К примеру, пройдём по массиву `numbers`, используя функцию JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), и вернём элемент `<li>` в каждой итерации. Получившийся массив элементов сохраним в `listItems`:
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
+Теперь мы включим массив `listItems` внутрь элемента `<ul>` и [отрендерить его в DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom):
 
 ```javascript{2}
 ReactDOM.render(
@@ -44,13 +44,13 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-This code displays a bullet list of numbers between 1 and 5.
+Этот код выведет список чисел от 1 до 5.
 
-### Basic List Component {#basic-list-component}
+### Простой компонент-список {#basic-list-component}
 
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+Как правило, вы будете рендерить списки внутри какого-нибудь [компонента](/docs/components-and-props.html).
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
+Мы можем отрефакторить предыдущий пример с использованием компонента, который принимает массив `numbers` и выводит список элементов.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -70,9 +70,9 @@ ReactDOM.render(
 );
 ```
 
-When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section.
+Когда вы запустите данный код, то увидите предупреждение о том, что у каждого элемента массива должен быть ключ (key). «Ключ» – это специальный строковый атрибут, который нужно указывать при создании списка элементов. Мы обсудим, почему это важно, ниже на странице.
 
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+Чтобы исправить проблему с неуказанными ключами, добавим каждому элементу в списке атрибут `key`.
 
 ```javascript{4}
 function NumberList(props) {
@@ -96,9 +96,9 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
-## Keys {#keys}
+## Ключи {#keys}
 
-Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity:
+Ключи помогают React определять, какие элементы были изменены, добавлены или удалены. Их необходимо указывать, чтобы React мог сопоставлять элементы массива с течением времени:
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +109,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Лучший способ выбрать ключ – это использовать строку, которая будет явно отличать элемент списка от его соседей. Чаще всего вы будете использовать ID из ваших данных как ключи:
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -119,34 +119,34 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort:
+Когда у вас нет заданных ID для списка, то в крайнем случае можно использовать индекс элемента как ключ:
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
-  // Only do this if items have no stable IDs
+  // Делайте так, только если у элементов массива нет заданного ID
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+Мы не рекомендуем использовать индексы как ключи, если порядок элементов может поменяться. Это негативно скажется на производительности и может вызвать проблемы с состоянием компонента. Почитайте статью Робина Покорни (Robin Pokorny), [которая объясняет, почему индексы-ключи приводят к проблемам](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). Если вы опустите ключ для элемента в списке, то React по умолчанию будет использовать индексы как ключи.
 
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+Вот [подробное объяснение о том, почему ключи необходимы](/docs/reconciliation.html#recursing-on-children).
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Извлечение компонентов с ключами {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+Ключи нужно определять непосредственно внутри массивов.
 
-For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself.
+Например, если вы [извлекаете](/docs/components-and-props.html#extracting-components) компонент `ListItem`, то нужно указывать ключ для `<ListItem />` в массиве, а не в элементе `<li>` внутри самого `ListItem`.
 
-**Example: Incorrect Key Usage**
+**Пример неправильного использования ключей**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+    // Неправильно! Нет необходимости задавать здесь ключ:
     <li key={value.toString()}>
       {value}
     </li>
@@ -156,7 +156,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // Неправильно! Ключ необходимо определить здесь:
     <ListItem value={number} />
   );
   return (
@@ -173,18 +173,18 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**Пример правильного использования ключей**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+  // Правильно! Не нужно определять здесь ключ:
   return <li>{props.value}</li>;
 }
 
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Correct! Key should be specified inside the array.
+    // Правильно! Ключ нужно определять внутри массива:
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -204,11 +204,11 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+Как правило, элементам внутри `map()` нужны ключи.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Ключи должны быть уникальными среди соседних элементов {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Ключи внутри массива должны быть уникальными только среди своих соседних элементов. Им не нужно быть уникальными глобально. Можно использовать один и тот же ключ в двух разных массивах.
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -237,8 +237,8 @@ function Blog(props) {
 }
 
 const posts = [
-  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
-  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
+  {id: 1, title: 'Привет, мир', content: 'Добро пожаловать в документацию React!'},
+  {id: 2, title: 'Установка', content: 'React можно установить из npm.'}
 ];
 ReactDOM.render(
   <Blog posts={posts} />,
@@ -248,7 +248,7 @@ ReactDOM.render(
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+Ключи служат подсказками для React, но они никогда не передаются в ваши компоненты. Если в компоненте нужно то же самое значение, то передайте его явно через проп с другим именем:
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -259,11 +259,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+В примере выше компонент `Post` может прочитать значение `props.id`, но не `props.key`.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### Встраивание map() в JSX {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+В примерах выше мы отдельно определяли переменную `listItems` и вставляли её в JSX:
 
 ```js{3-6}
 function NumberList(props) {
@@ -280,7 +280,7 @@ function NumberList(props) {
 }
 ```
 
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX позволяет [встроить любое выражение](/docs/introducing-jsx.html#embedding-expressions-in-jsx) в фигурные скобки, так что мы можем включить результат выполнения `map()`:
 
 ```js{5-8}
 function NumberList(props) {
@@ -298,4 +298,4 @@ function NumberList(props) {
 
 [**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Иногда это приводит к более чистому коду, но бывает и наоборот. Как и в любом JavaScript-коде, вам придется самостоятельно решать, стоит ли извлекать код в переменную ради читабельности. Не забывайте, что если код внутри `map()` слишком громоздкий, имеет смысл [извлечь его в отдельный компонент](/docs/components-and-props.html#extracting-components).
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 4d4a7571f..7cb2b0887 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -1,32 +1,32 @@
-- title: Installation
+- title: Установка
   items:
     - id: getting-started
-      title: Getting Started
+      title: Начало работы
     - id: add-react-to-a-website
-      title: Add React to a Website
+      title: Добавляем React на сайт
     - id: create-a-new-react-app
       title: Create a New React App
     - id: cdn-links
-      title: CDN Links
-- title: Main Concepts
+      title: Ссылки на CDN
+- title: Основные понятия
   isOrdered: true
   items:
     - id: hello-world
       title: Hello World
     - id: introducing-jsx
-      title: Introducing JSX
+      title: Знакомство с JSX
     - id: rendering-elements
-      title: Rendering Elements
+      title: Рендеринг элементов
     - id: components-and-props
-      title: Components and Props
+      title: Компоненты и пропсы
     - id: state-and-lifecycle
-      title: State and Lifecycle
+      title: Состояние и жизненный цикл
     - id: handling-events
-      title: Handling Events
+      title: Обработка событий
     - id: conditional-rendering
-      title: Conditional Rendering
+      title: Условный рендеринг
     - id: lists-and-keys
-      title: Lists and Keys
+      title: Списки и ключи
     - id: forms
       title: Forms
     - id: lifting-state-up
@@ -34,8 +34,8 @@
     - id: composition-vs-inheritance
       title: Composition vs Inheritance
     - id: thinking-in-react
-      title: Thinking In React
-- title: Advanced Guides
+      title: Философия React
+- title: Продвинутые темы
   items:
     - id: accessibility
       title: Accessibility
@@ -48,21 +48,21 @@
     - id: forwarding-refs
       title: Forwarding Refs
     - id: fragments
-      title: Fragments
+      title: Фрагменты
     - id: higher-order-components
-      title: Higher-Order Components
+      title: Компоненты высшего порядка
     - id: integrating-with-other-libraries
       title: Integrating with Other Libraries
     - id: jsx-in-depth
       title: JSX In Depth
     - id: optimizing-performance
-      title: Optimizing Performance
+      title: Оптимизация производительности
     - id: portals
       title: Portals
     - 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
@@ -74,12 +74,12 @@
     - id: strict-mode
       title: Strict Mode
     - id: typechecking-with-proptypes
-      title: Typechecking With PropTypes
+      title: Проверка типов с помощью PropTypes
     - id: uncontrolled-components
       title: Uncontrolled Components
     - id: web-components
       title: Web Components
-- title: API Reference
+- title: Справочник API
   items:
     - id: react-api
       title: React
@@ -97,14 +97,14 @@
     - id: test-utils
       title: Test Utilities
     - id: shallow-renderer
-      title: Shallow Renderer
+      title: Поверхностный рендерер
     - id: test-renderer
       title: Test Renderer
     - id: javascript-environment-requirements
-      title: JS Environment Requirements
+      title: Требования к среде JS
     - id: glossary
       title: Glossary
-- title: Hooks (New)
+- title: Хуки (Новое)
   isOrdered: true
   items:
       - id: hooks-intro
@@ -112,7 +112,7 @@
       - id: hooks-overview
         title: Hooks at a Glance
       - id: hooks-state
-        title: Using the State Hook
+        title: Использование хука Состояние
       - id: hooks-effect
         title: Using the Effect Hook
       - id: hooks-rules
@@ -123,7 +123,7 @@
         title: Hooks API Reference
       - id: hooks-faq
         title: Hooks FAQ
-- title: Contributing
+- title: Участие в проекте
   items:
   - id: how-to-contribute
     title: How to Contribute
@@ -136,9 +136,9 @@
 - title: FAQ
   items:
     - id: faq-ajax
-      title: AJAX and APIs
+      title: AJAX и обращение к API
     - id: faq-build
-      title: Babel, JSX, and Build Steps
+      title: Babel, JSX и этапы сборки
     - id: faq-functions
       title: Passing Functions to Components
     - id: faq-state
@@ -146,7 +146,7 @@
     - id: faq-styling
       title: Styling and CSS
     - id: faq-structure
-      title: File Structure
+      title: Структура файлов
     - id: faq-versioning
       title: Versioning Policy
     - id: faq-internals
diff --git a/content/docs/optimizing-performance.md b/content/docs/optimizing-performance.md
index e42bad7b7..08f14fc69 100644
--- a/content/docs/optimizing-performance.md
+++ b/content/docs/optimizing-performance.md
@@ -1,93 +1,93 @@
 ---
 id: optimizing-performance
-title: Optimizing Performance
+title: Оптимизация производительности
 permalink: docs/optimizing-performance.html
 redirect_from:
   - "docs/advanced-performance.html"
 ---
 
-Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance. Nevertheless, there are several ways you can speed up your React application.
+React использует несколько умных подходов для минимизации количества дорогостоящих DOM операций, необходимых для обновления пользовательского интерфейса. Для многих приложений, использование React приведёт к быстрому пользовательскому интерфейсу без особых усилий по оптимизации производительности. Тем не менее, существует несколько способов ускорить ваше React приложение.
 
-## Use the Production Build {#use-the-production-build}
+## Использование продакшен сборки {#use-the-production-build}
 
-If you're benchmarking or experiencing performance problems in your React apps, make sure you're testing with the minified production build.
+Если вы испытываете проблемы с производительностью в вашем React приложении, убедитесь в том, что вы тестируете с настройками минифицированной продакшен сборки.
 
-By default, React includes many helpful warnings. These warnings are very useful in development. However, they make React larger and slower so you should make sure to use the production version when you deploy the app.
+По умолчанию в React есть много вспомогательных предупреждений, очень полезных при разработке. Тем не менее, они делают React больше и медленнее, поэтому вы обязательно должны использовать продакшен версию при деплое приложения.
 
-If you aren't sure whether your build process is set up correctly, you can check it by installing [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). If you visit a site with React in production mode, the icon will have a dark background:
+Если вы не уверены в том, что процесс сборки настроен правильно, вы можете проверить это, установив [React Developer Tools for Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi). Если вы посетите сайт с React в продакшен режиме, иконка будет с чёрным фоном:
 
 <img src="../images/docs/devtools-prod.png" style="max-width:100%" alt="React DevTools on a website with production version of React">
 
-If you visit a site with React in development mode, the icon will have a red background:
+Если вы посетите сайт с React в режиме разработки, у иконки будет красный фон:
 
 <img src="../images/docs/devtools-dev.png" style="max-width:100%" alt="React DevTools on a website with development version of React">
 
-It is expected that you use the development mode when working on your app, and the production mode when deploying your app to the users.
+Как правило, режим разработки используется во время работы над приложением, а продакшен режим при деплое приложения для пользователей.
 
-You can find instructions for building your app for production below.
+Ниже вы можете найти инструкцию по сборке своего приложения для продакшена.
 
 ### Create React App {#create-react-app}
 
-If your project is built with [Create React App](https://github.com/facebookincubator/create-react-app), run:
+Если ваш проект сделан с помощью [Create React App](https://github.com/facebookincubator/create-react-app), выполните:
 
 ```
 npm run build
 ```
 
-This will create a production build of your app in the `build/` folder of your project.
+Эта команда создаст продакшен сборку вашего приложения в папке `build/` вашего проекта.
 
-Remember that this is only necessary before deploying to production. For normal development, use `npm start`.
+Помните, что это необходимо только перед деплоем на продакшен. Для обычной разработки используйте `npm start`.
 
-### Single-File Builds {#single-file-builds}
+### Однофайловые сборки {#single-file-builds}
 
-We offer production-ready versions of React and React DOM as single files:
+Мы предлагаем готовые для продакшена версии React и React DOM в виде отдельных файлов:
 
 ```html
 <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
 ```
 
-Remember that only React files ending with `.production.min.js` are suitable for production.
+Помните, что для продакшена подходят только те файлы, которые заканчиваются на `.production.min.js`.
 
 ### Brunch {#brunch}
 
-For the most efficient Brunch production build, install the [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch) plugin:
+Для наиболее эффективной продакшен сборки с Brunch, установите плагин [`uglify-js-brunch`](https://github.com/brunch/uglify-js-brunch).
 
 ```
-# If you use npm
+# Если вы используете npm
 npm install --save-dev uglify-js-brunch
 
-# If you use Yarn
+# Если вы используете Yarn
 yarn add --dev uglify-js-brunch
 ```
 
-Then, to create a production build, add the `-p` flag to the `build` command:
+Затем, для создания продакшен сборки, добавьте флаг `-p` к команде `build`:
 
 ```
 brunch build -p
 ```
 
-Remember that you only need to do this for production builds. You shouldn't pass the `-p` flag or apply this plugin in development, because it will hide useful React warnings and make the builds much slower.
+Помните, что это нужно делать только для продакшен сборки. Вам не нужно использовать флаг `-p` или применять этот плагин во время разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
 
 ### Browserify {#browserify}
 
-For the most efficient Browserify production build, install a few plugins:
+Для наиболее эффективной продакшен сборки с Browserify, установите несколько плагинов:
 
 ```
-# If you use npm
+# Если вы используете npm
 npm install --save-dev envify uglify-js uglifyify 
 
-# If you use Yarn
+# Если вы используете Yarn
 yarn add --dev envify uglify-js uglifyify 
 ```
 
-To create a production build, make sure that you add these transforms **(the order matters)**:
+При создании продакшен сборки, убедитесь, что вы добавили эти пакеты для преобразования **(порядок имеет значение)**:
 
-* The [`envify`](https://github.com/hughsk/envify) transform ensures the right build environment is set. Make it global (`-g`).
-* The [`uglifyify`](https://github.com/hughsk/uglifyify) transform removes development imports. Make it global too (`-g`).
-* Finally, the resulting bundle is piped to [`uglify-js`](https://github.com/mishoo/UglifyJS2) for mangling ([read why](https://github.com/hughsk/uglifyify#motivationusage)).
+* Плагин [`envify`](https://github.com/hughsk/envify) обеспечивает правильную среду для сборки. Сделайте его глобальным (`-g`).
+* Плагин [`uglifyify`](https://github.com/hughsk/uglifyify) удаляет импорты, добавленные при разработке. Сделайте его глобальным (`-g`).
+* Наконец, полученная сборка отправляется к [`uglify-js`](https://github.com/mishoo/UglifyJS2) для минификации ([читать зачем](https://github.com/hughsk/uglifyify#motivationusage)).
 
-For example:
+К примеру:
 
 ```
 browserify ./index.js \
@@ -96,30 +96,30 @@ browserify ./index.js \
   | uglifyjs --compress --mangle > ./bundle.js
 ```
 
->**Note:**
+>**Примечание:**
 >
->The package name is `uglify-js`, but the binary it provides is called `uglifyjs`.<br>
->This is not a typo.
+>Имя пакета `uglify-js`, но фактически он предоставляет исполняемый файл с именем `uglifyjs`.<br>
+>Это не опечатка.
 
-Remember that you only need to do this for production builds. You shouldn't apply these plugins in development because they will hide useful React warnings, and make the builds much slower.
+Помните, что это нужно делать только для продакшен сборки. Вам не следует использовать эти плагины в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
 
 ### Rollup {#rollup}
 
-For the most efficient Rollup production build, install a few plugins:
+Для наиболее эффективной продакшен сборки с Rollup, установите несколько плагинов:
 
 ```
-# If you use npm
+# Если вы используете npm
 npm install --save-dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify 
 
-# If you use Yarn
+# Если вы используете Yarn
 yarn add --dev rollup-plugin-commonjs rollup-plugin-replace rollup-plugin-uglify 
 ```
 
-To create a production build, make sure that you add these plugins **(the order matters)**:
+При создании продакшен сборки, убедитесь, что вы добавили эти плагины **(порядок имеет значение)**:
 
-* The [`replace`](https://github.com/rollup/rollup-plugin-replace) plugin ensures the right build environment is set.
-* The [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) plugin provides support for CommonJS in Rollup.
-* The [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) plugin compresses and mangles the final bundle.
+* Плагин [`replace`](https://github.com/rollup/rollup-plugin-replace) обеспечивает правильную среду для сборки.
+* Плагин [`commonjs`](https://github.com/rollup/rollup-plugin-commonjs) обеспечивает поддержку CommonJS в Rollup.
+* Плагин [`uglify`](https://github.com/TrySound/rollup-plugin-uglify) сжимает и оптимизирует финальную сборку.
 
 ```js
 plugins: [
@@ -133,18 +133,18 @@ plugins: [
 ]
 ```
 
-For a complete setup example [see this gist](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).
+Полный пример настройки можно [посмотреть здесь](https://gist.github.com/Rich-Harris/cb14f4bc0670c47d00d191565be36bf0).
 
-Remember that you only need to do this for production builds. You shouldn't apply the `uglify` plugin or the `replace` plugin with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
+Помните, что это нужно делать только для продакшен сборки. Вам не следует использовать плагин `uglify` или плагин `replace` со значением `'production'` в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
 
 ### webpack {#webpack}
 
->**Note:**
+>**Примечание:**
 >
->If you're using Create React App, please follow [the instructions above](#create-react-app).<br>
->This section is only relevant if you configure webpack directly.
+>Если вы используете Create React App, пожалуйста следуйте [инструкциям выше](#create-react-app).<br>
+>Этот раздел подойдёт для тех, кто самостоятельно настраивает webpack.
 
-For the most efficient webpack production build, make sure to include these plugins in your production configuration:
+Для наиболее эффективной продакшен сборки webpack обязательно включите эти плагины в вашу конфигурацию для продакшен сборки:
 
 ```js
 new webpack.DefinePlugin({
@@ -153,84 +153,84 @@ new webpack.DefinePlugin({
 new webpack.optimize.UglifyJsPlugin()
 ```
 
-You can learn more about this in [webpack documentation](https://webpack.js.org/guides/production-build/).
+Вы можете узнать об этом больше в [документации webpack](https://webpack.js.org/guides/production-build/).
 
-Remember that you only need to do this for production builds. You shouldn't apply `UglifyJsPlugin` or `DefinePlugin` with `'production'` value in development because they will hide useful React warnings, and make the builds much slower.
+Помните, что это нужно делать только для продакшен сборки. Вам не стоит использовать `UglifyJsPlugin` или `DefinePlugin` со значением `'production'`  в процессе разработки, потому что это скроет вспомогательные предупреждения React и замедлит процесс сборки.
 
-## Profiling Components with the Chrome Performance Tab {#profiling-components-with-the-chrome-performance-tab}
+## Анализ производительности компонентов с помощью вкладки Chrome «Performance» {#profiling-components-with-the-chrome-performance-tab}
 
-In the **development** mode, you can visualize how components mount, update, and unmount, using the performance tools in supported browsers. For example:
+В режиме **разработки**, вы можете видеть как компоненты монтируются, обновляются и демонтируются, с помощью инструментов производительности в браузерах, которые это поддерживают. Например:
 
-<center><img src="../images/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="React components in Chrome timeline" /></center>
+<center><img src="../images/blog/react-perf-chrome-timeline.png" style="max-width:100%" alt="Компоненты React в графике времени Chrome" /></center>
 
-To do this in Chrome:
+Для того, чтобы сделать это в Chrome:
 
-1. Temporarily **disable all Chrome extensions, especially React DevTools**. They can significantly skew the results!
+1. Временно **отключите все расширения Chrome, особенно React DevTools**. Они могут существенно исказить результаты!
 
-2. Make sure you're running the application in the development mode.
+2. Убедитесь, что вы запускаете приложение в режиме разработки.
 
-3. Open the Chrome DevTools **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** tab and press **Record**.
+3. Откройте в инструментах разработчика Chrome вкладку **[Performance](https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/timeline-tool)** и нажмите **Record**.
 
-4. Perform the actions you want to profile. Don't record more than 20 seconds or Chrome might hang.
+4. Выполните действия, которые вы хотите проанализировать на производительность. Не записывайте более 20 секунд, иначе Chrome может зависнуть.
 
-5. Stop recording.
+5. Остановите запись.
 
-6. React events will be grouped under the **User Timing** label.
+6. События React будут сгруппированы под меткой **User Timing**.
 
-For a more detailed walkthrough, check out [this article by Ben Schwarz](https://calibreapp.com/blog/2017-11-28-debugging-react/).
+Для более детального ознакомления, посмотрите [эту статью от Ben Schwarz](https://calibreapp.com/blog/2017-11-28-debugging-react/).
 
-Note that **the numbers are relative so components will render faster in production**. Still, this should help you realize when unrelated UI gets updated by mistake, and how deep and how often your UI updates occur.
+Обратите внимание, что **результаты являются относительными и на продакшене отрисовка компонентов будет быстрее**. Всё же, это должно помочь вам понять, когда не имеющий отношения пользовательский компонент обновляется по ошибке, а так же как глубоко и как часто обновляется ваш пользовательский интерфейс.
 
-Currently Chrome, Edge, and IE are the only browsers supporting this feature, but we use the standard [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) so we expect more browsers to add support for it.
+В настоящее время Chrome, Edge, и IE являются единственными браузерами поддерживающими эту функцию, но мы используем стандарт [User Timing API](https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API) поэтому ожидайте, что больше браузеров добавят эту поддержку.
 
-## Profiling Components with the DevTools Profiler {#profiling-components-with-the-devtools-profiler}
+## Анализ производительности компонентов с помощью инструмента разработчика «Profiler» {#profiling-components-with-the-devtools-profiler}
 
-`react-dom` 16.5+ and `react-native` 0.57+ provide enhanced profiling capabilities in DEV mode with the React DevTools Profiler.
-An overview of the Profiler can be found in the blog post ["Introducing the React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html).
-A video walkthrough of the profiler is also [available on YouTube](https://www.youtube.com/watch?v=nySib7ipZdk).
+`react-dom` 16.5+ и `react-native` 0.57+ предоставляют расширенные возможности анализа производительности в режиме разработки с помощью инструментов разработчика React Profiler.
+Обзор профайлера можно найти в посте блога ["Введение в React Profiler"](/blog/2018/09/10/introducing-the-react-profiler.html).
+Пошаговое видео-руководство также [доступно на YouTube](https://www.youtube.com/watch?v=nySib7ipZdk).
 
-If you haven't yet installed the React DevTools, you can find them here:
+Если вы ещё не установили инструменты разработчика React, вы можете найти их здесь:
 
 - [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 - [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
 - [Standalone Node Package](https://www.npmjs.com/package/react-devtools)
 
-> Note
+> Примечание
 >
-> A production profiling bundle of `react-dom` is also available as `react-dom/profiling`.
-> Read more about how to use this bundle at [fb.me/react-profiling](https://fb.me/react-profiling)
+> Профилирование продакшен пакета для `react-dom` так же доступно как `react-dom/profiling`.
+> Подробнее о том, как использовать этот пакет, читайте на [fb.me/react-profiling](https://fb.me/react-profiling)
 
-## Virtualize Long Lists {#virtualize-long-lists}
+## Виртуализация длинных списков {#virtualize-long-lists}
 
-If your application renders long lists of data (hundreds or thousands of rows), we recommended using a technique known as "windowing". This technique only renders a small subset of your rows at any given time, and can dramatically reduce the time it takes to re-render the components as well as the number of DOM nodes created.
+Если ваше приложение рендерит длинные списки данных (сотни или тысячи строк), мы рекомендуем использовать метод известный как "оконный доступ". Этот метод рендерит только небольшое подмножество строк в данный момент времени и может значительно сократить время, необходимое для повторного рендера компонентов, а также количество создаваемых DOM-узлов.
 
-[react-window](https://react-window.now.sh/) and [react-virtualized](https://bvaughn.github.io/react-virtualized/) are popular windowing libraries. They provide several reusable components for displaying lists, grids, and tabular data. You can also create your own windowing component, like [Twitter did](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3), if you want something more tailored to your application's specific use case.
+[react-window](https://react-window.now.sh/) и [react-virtualized](https://bvaughn.github.io/react-virtualized/) -- это популярные библиотеки для оконного доступа. Они предоставляют несколько переиспользуемых компонентов для отображения списков, сеток и табличных данных. Если вы хотите использовать что-то более специфическое для вашего конкретного случая, то вы можете создать собственный компонент с оконным доступом, как это сделано в [Twitter](https://medium.com/@paularmstrong/twitter-lite-and-high-performance-react-progressive-web-apps-at-scale-d28a00e780a3).
 
-## Avoid Reconciliation {#avoid-reconciliation}
+## Избежание согласования {#avoid-reconciliation}
 
-React builds and maintains an internal representation of the rendered UI. It includes the React elements you return from your components. This representation lets React avoid creating DOM nodes and accessing existing ones beyond necessity, as that can be slower than operations on JavaScript objects. Sometimes it is referred to as a "virtual DOM", but it works the same way on React Native.
+React создает и поддерживает внутреннее представление отображаемого пользовательского интерфейса. Оно так же включает React-элементы возвращаемые из ваших компонентов. Это представление позволяет React избегать создания DOM-узлов и не обращаться к текущим без необходимости, поскольку эти операции могут быть медленнее, чем операции с JavaScript объектами. Иногда его называют "виртуальный DOM", но в React Native это работает точно так же.
 
-When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM.
+Когда изменяются пропсы или состояние компонента, React решает нужно ли обновление DOM, сравнивая возвращённый элемент с ранее отрендереным. Если они не равны, React обновит DOM.
 
-You can now visualize these re-renders of the virtual DOM with React DevTools:
+Вы можете визуализировать эти перерисовки виртуального DOM с помощью инструментов разработчика React:
 
 - [Chrome Browser Extension](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 - [Firefox Browser Extension](https://addons.mozilla.org/en-GB/firefox/addon/react-devtools/)
 - [Standalone Node Package](https://www.npmjs.com/package/react-devtools)
 
-In the developer console select the **Highlight Updates** option in the **React** tab:
+В консоли разработчика выберите параметр **Highlight Updates** на вкдадке **React**:
 
-<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="How to enable highlight updates" /></center>
+<center><img src="../images/blog/devtools-highlight-updates.png" style="max-width:100%; margin-top:10px;" alt="Как включить подсветку обновлений" /></center>
 
-Interact with your page and you should see colored borders momentarily appear around any components that have re-rendered. This lets you spot re-renders that were not necessary. You can learn more about this React DevTools feature from this [blog post](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) from [Ben Edelstein](https://blog.logrocket.com/@edelstein).
+Взаимодействуя со своей страницей, вы должны увидеть, что вокруг любых компонентов, которые были повторно отрендерены появляются цветные границы. Это позволит вам выявлять ререндеринг, который возник без необходимости. Вы можете узнать больше о возможностях инструментов разработчика React из [этого поста](https://blog.logrocket.com/make-react-fast-again-part-3-highlighting-component-updates-6119e45e6833) в блоге от [Ben Edelstein](https://blog.logrocket.com/@edelstein).
 
-Consider this example:
+Рассмотрим такой пример:
 
-<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="React DevTools Highlight Updates example" /></center>
+<center><img src="../images/blog/highlight-updates-example.gif" style="max-width:100%; margin-top:20px;" alt="Пример как инструменты разработчика React подсвечивают обновления" /></center>
 
-Note that when we're entering a second todo, the first todo also flashes on the screen on every keystroke. This means it is being re-rendered by React together with the input. This is sometimes called a "wasted" render. We know it is unnecessary because the first todo content has not changed, but React doesn't know this.
+Обратите внимание, что когда мы вводим вторую задачу, первая так же мигает на экране при каждом нажатии клавиши. Это означает, что она ререндерится вместе с полем ввода. Иногда это называют "бесполезным" рендерингом. Мы знаем, что в этом нет необходимости, так как контент первой задачи не изменился, но React этого не знает.
 
-Even though React only updates the changed DOM nodes, re-rendering still takes some time. In many cases it's not a problem, but if the slowdown is noticeable, you can speed all of this up by overriding the lifecycle function `shouldComponentUpdate`, which is triggered before the re-rendering process starts. The default implementation of this function returns `true`, leaving React to perform the update:
+Несмотря на то, что React обновляет только измененные DOM-узлы, повторный рендеринг всё же занимает некоторое время. В большинстве случаев это не проблема, но если замедление заметно, то вы можете всё ускорить, переопределив метод жизненного цикла `shouldComponentUpdate`, который вызывается перед началом процесса ререндеринга. Реализация этой функции по умолчанию возвращает `true`, указывая React выполнить обновление:
 
 ```javascript
 shouldComponentUpdate(nextProps, nextState) {
@@ -238,27 +238,27 @@ shouldComponentUpdate(nextProps, nextState) {
 }
 ```
 
-If you know that in some situations your component doesn't need to update, you can return `false` from `shouldComponentUpdate` instead, to skip the whole rendering process, including calling `render()` on this component and below.
+Если вы знаете ситуации, в которых ваш компонент не нуждается в обновлении, вы можете вернуть `false` из `shouldComponentUpdate`, чтобы пропустить весь процесс рендеринга, включая вызов `render()` и так далее ниже по иерархии.
 
-In most cases, instead of writing `shouldComponentUpdate()` by hand, you can inherit from [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). It is equivalent to implementing `shouldComponentUpdate()` with a shallow comparison of current and previous props and state.
+В большинстве случаев вместо того, чтобы писать `shouldComponentUpdate()` вручную, вы можете наследоваться от [`React.PureComponent`](/docs/react-api.html#reactpurecomponent). Это эквивалентно реализации `shouldComponentUpdate()` с поверхностным сравнением текущих и предыдущих пропсов и состояния.
 
-## shouldComponentUpdate In Action {#shouldcomponentupdate-in-action}
+## shouldComponentUpdate в действии {#shouldcomponentupdate-in-action}
 
-Here's a subtree of components. For each one, `SCU` indicates what `shouldComponentUpdate` returned, and `vDOMEq` indicates whether the rendered React elements were equivalent. Finally, the circle's color indicates whether the component had to be reconciled or not.
+Вот поддерево компонентов. Для каждого из них `SCU` указывает что возвратил `shouldComponentUpdate`, и `vDOMEq` указывает эквивалентны ли отрендеренные React элементы. Наконец, цвет круга указывает требуется ли согласовать компонент или нет.
 
-<figure><img src="../images/docs/should-component-update.png" style="max-width:100%" /></figure>
+<figure><img src="../images/docs/should-component-update.png" alt="Дерево компонентов" style="max-width:100%" /></figure>
 
-Since `shouldComponentUpdate` returned `false` for the subtree rooted at C2, React did not attempt to render C2, and thus didn't even have to invoke `shouldComponentUpdate` on C4 and C5.
+Поскольку `shouldComponentUpdate` возвратил `false` для поддерева с корнем C2, React не пытался отрендерить C2, следовательно не нужно вызывать `shouldComponentUpdate` на C4 и C5.
 
-For C1 and C3, `shouldComponentUpdate` returned `true`, so React had to go down to the leaves and check them. For C6 `shouldComponentUpdate` returned `true`, and since the rendered elements weren't equivalent React had to update the DOM.
+Для C1 и C3 `shouldComponentUpdate` возвратил `true`, поэтому React пришлось спуститься к листьям и проверить их. Для C6 `shouldComponentUpdate` вернул `true`, и поскольку отображаемые элементы не были эквивалентны, React должен был обновить DOM.
 
-The last interesting case is C8. React had to render this component, but since the React elements it returned were equal to the previously rendered ones, it didn't have to update the DOM.
+Последний интересный случай -- C8. React должен был отрисовать этот компонент, но поскольку возвращаемые им React-элементы были равны ранее предоставленным, ему не нужно обновлять DOM.
 
-Note that React only had to do DOM mutations for C6, which was inevitable. For C8, it bailed out by comparing the rendered React elements, and for C2's subtree and C7, it didn't even have to compare the elements as we bailed out on `shouldComponentUpdate`, and `render` was not called.
+Обратите внимание, что React должен был делать изменения только для C6. Для C8 этого удалось избежать сравнением отрендеренных React-элементов, а для поддеревьев C2 и C7 даже не пришлось сравнивать элементы, так как нас выручил `shouldComponentUpdate` и `render` не был вызван.
 
-## Examples {#examples}
+## Примеры {#examples}
 
-If the only way your component ever changes is when the `props.color` or the `state.count` variable changes, you could have `shouldComponentUpdate` check that:
+Если единственный случай изменения вашего компонента это когда переменная `props.color` или `state.count` изменяются, вы могли бы выполнить проверку в `shouldComponentUpdate` следующим образом:
 
 ```javascript
 class CounterButton extends React.Component {
@@ -282,14 +282,14 @@ class CounterButton extends React.Component {
       <button
         color={this.props.color}
         onClick={() => this.setState(state => ({count: state.count + 1}))}>
-        Count: {this.state.count}
+        Счётчик: {this.state.count}
       </button>
     );
   }
 }
 ```
 
-In this code, `shouldComponentUpdate` is just checking if there is any change in `props.color` or `state.count`. If those values don't change, the component doesn't update. If your component got more complex, you could use a similar pattern of doing a "shallow comparison" between all the fields of `props` and `state` to determine if the component should update. This pattern is common enough that React provides a helper to use this logic - just inherit from `React.PureComponent`. So this code is a simpler way to achieve the same thing:
+В этом коде `shouldComponentUpdate` -- это простая проверка на наличие каких-либо изменений в `props.color` или `state.count`. Если эти значения не изменяются, то компонент не обновляется. Если ваш компонент стал более сложным, вы можете использовать аналогичный паттерн "поверхностного сравнения" между всеми полями `props` и `state`, чтобы определить должен ли обновиться компонент. Этот механизм достаточно распространён, поэтому React предоставляет вспомогательную функцию для работы с ним -- просто наследуйтесь от `React.PureComponent`. Поэтому, следующий код -- это более простой способ добиться того же самого эффекта:
 
 ```js
 class CounterButton extends React.PureComponent {
@@ -303,16 +303,16 @@ class CounterButton extends React.PureComponent {
       <button
         color={this.props.color}
         onClick={() => this.setState(state => ({count: state.count + 1}))}>
-        Count: {this.state.count}
+        Счётчик: {this.state.count}
       </button>
     );
   }
 }
 ```
 
-Most of the time, you can use `React.PureComponent` instead of writing your own `shouldComponentUpdate`. It only does a shallow comparison, so you can't use it if the props or state may have been mutated in a way that a shallow comparison would miss.
+В большинстве случаев вы можете использовать `React.PureComponent` вместо написания собственного `shouldComponentUpdate`. Но он делает только поверхностное сравнение, поэтому его нельзя использовать, если пропсы и состояние могут измениться таким образом, который не сможет быть обнаружен при поверхностном сравнении.
 
-This can be a problem with more complex data structures. For example, let's say you want a `ListOfWords` component to render a comma-separated list of words, with a parent `WordAdder` component that lets you click a button to add a word to the list. This code does *not* work correctly:
+Это может стать проблемой для более сложных структур данных. Например, вы хотите, чтобы компонент `ListOfWords` отображал список слов, разделённых через запятую, с родительским компонентом `WordAdder`, который позволяет кликнуть на кнопку, чтобы добавить слово в список. Этот код работает *неправильно*:
 
 ```javascript
 class ListOfWords extends React.PureComponent {
@@ -331,7 +331,7 @@ class WordAdder extends React.Component {
   }
 
   handleClick() {
-    // This section is bad style and causes a bug
+    // Данная секция содержит плохой код и приводит к багам
     const words = this.state.words;
     words.push('marklar');
     this.setState({words: words});
@@ -348,11 +348,11 @@ class WordAdder extends React.Component {
 }
 ```
 
-The problem is that `PureComponent` will do a simple comparison between the old and new values of `this.props.words`. Since this code mutates the `words` array in the `handleClick` method of `WordAdder`, the old and new values of `this.props.words` will compare as equal, even though the actual words in the array have changed. The `ListOfWords` will thus not update even though it has new words that should be rendered.
+Проблема в том, что `PureComponent` сделает сравнение по ссылке между старыми и новыми значениями `this.props.words`. Поскольку этот код мутирует массив `words` в методе `handleClick` компонента `WordAdder`, старые и новые значения `this.props.words` при сравнении по ссылке будут равны, даже если слова в массиве изменились. `ListOfWords` не будет обновляться, даже если он содержит новые слова, которые должны быть отрендерены.
 
-## The Power Of Not Mutating Data {#the-power-of-not-mutating-data}
+## Сила иммутабельных данных  {#the-power-of-not-mutating-data}
 
-The simplest way to avoid this problem is to avoid mutating values that you are using as props or state. For example, the `handleClick` method above could be rewritten using `concat` as:
+Лучший способ решения этой проблемы — избегать мутирования значений, которые вы используете как свойства или состояние. К примеру, описанный выше метод `handleClick` можно переписать с помощью `concat` следующим образом:
 
 ```javascript
 handleClick() {
@@ -362,7 +362,7 @@ handleClick() {
 }
 ```
 
-ES6 supports a [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) for arrays which can make this easier. If you're using Create React App, this syntax is available by default.
+ES6 поддерживает [spread syntax](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Operators/Spread_syntax) для массивов, который поможет сделать это проще. Если вы используете Create React App, то этот синтаксис доступен там по умолчанию.
 
 ```js
 handleClick() {
@@ -372,7 +372,7 @@ handleClick() {
 };
 ```
 
-You can also rewrite code that mutates objects to avoid mutation, in a similar way. For example, let's say we have an object named `colormap` and we want to write a function that changes `colormap.right` to be `'blue'`. We could write:
+Таким же образом вы можете переписать код, который мутирует объекты. К примеру, мы имеем объект с именем `colormap` и хотим написать функцию, которая изменяет `colormap.right` на `'blue'`. Мы могли бы написать:
 
 ```js
 function updateColorMap(colormap) {
@@ -380,7 +380,7 @@ function updateColorMap(colormap) {
 }
 ```
 
-To write this without mutating the original object, we can use [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) method:
+Чтобы написать это без мутирования исходного объекта, мы можем использовать метод [Object.assign](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Object/assign):
 
 ```js
 function updateColorMap(colormap) {
@@ -388,9 +388,9 @@ function updateColorMap(colormap) {
 }
 ```
 
-`updateColorMap` now returns a new object, rather than mutating the old one. `Object.assign` is in ES6 and requires a polyfill.
+`updateColorMap` теперь возвращает новый объект, вместо того, чтобы мутировать исходный. `Object.assign` входит в ES6 и требует полифила.
 
-There is a JavaScript proposal to add [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) to make it easier to update objects without mutation as well:
+JavaScript рассматривает предложение добавить [object spread properties](https://github.com/sebmarkbage/ecmascript-rest-spread) для добавления свойств объекта, чтобы упростить его обновление без мутаций:
 
 ```js
 function updateColorMap(colormap) {
@@ -398,17 +398,17 @@ function updateColorMap(colormap) {
 }
 ```
 
-If you're using Create React App, both `Object.assign` and the object spread syntax are available by default.
+Если вы используете Create React App, то `Object.assign` и синтаксис расширения объектов доступны вам по умолчанию.
 
-## Using Immutable Data Structures {#using-immutable-data-structures}
+## Использование неизменяемых структур данных {#using-immutable-data-structures}
 
-[Immutable.js](https://github.com/facebook/immutable-js) is another way to solve this problem. It provides immutable, persistent collections that work via structural sharing:
+[Immutable.js](https://github.com/facebook/immutable-js) -- это ещё один способ решить эту проблему. Эта библиотека предоставляет иммутабельные, персистентные коллекции, которые работают с помощью механизма "structural sharing":
 
-* *Immutable*: once created, a collection cannot be altered at another point in time.
-* *Persistent*: new collections can be created from a previous collection and a mutation such as set. The original collection is still valid after the new collection is created.
-* *Structural Sharing*: new collections are created using as much of the same structure as the original collection as possible, reducing copying to a minimum to improve performance.
+* *Иммутабельность*: после создания коллекции она не может быть изменена.
+* *Персистентность*: новые коллекции могут быть созданы из предыдущей коллекции и мутированы c помощью set. После создания новой коллекции исходная коллекция останется по-прежнему неизменной.
+* *Structural Sharing*: новые коллекции создаются с использованием такой же структуры как у исходной коллекции, что позволяет сократить количество копий до минимума для повышения производительности.
 
-Immutability makes tracking changes cheap. A change will always result in a new object so we only need to check if the reference to the object has changed. For example, in this regular JavaScript code:
+Иммутабельность делает отслеживание изменений дешёвым. Изменение всегда приведет к созданию нового объекта, поэтому нам нужно только проверить, изменилась ли ссылка на объект. Например, в этом обычном JavaScript коде:
 
 ```javascript
 const x = { foo: 'bar' };
@@ -417,7 +417,7 @@ y.foo = 'baz';
 x === y; // true
 ```
 
-Although `y` was edited, since it's a reference to the same object as `x`, this comparison returns `true`. You can write similar code with immutable.js:
+Несмотря на то, что `y` был изменен, поскольку это ссылка на тот же объект, что и `x`, сравнение вернёт `true`. Вы можете написать аналогичный код с помощью immutable.js:
 
 ```javascript
 const SomeRecord = Immutable.Record({ foo: null });
@@ -428,8 +428,8 @@ x === y; // false
 x === z; // true
 ```
 
-In this case, since a new reference is returned when mutating `x`, we can use a reference equality check `(x === y)` to verify that the new value stored in `y` is different than the original value stored in `x`.
+В этом случае, поскольку после мутирования `x` возвращается новая ссылка, мы можем использовать строгое сравнение (в данном случае по ссылке) `(x === y)` для того, чтобы убедиться, что новое значение хранящееся в `y` отличается от исходного значения, хранящегося в `x`.
 
-Two other libraries that can help use immutable data are [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) and [immutability-helper](https://github.com/kolodny/immutability-helper).
+Есть две другие библиотеки, которые могут помочь вам использовать иммутабельные данные: [seamless-immutable](https://github.com/rtfeldman/seamless-immutable) и [immutability-helper](https://github.com/kolodny/immutability-helper).
 
-Immutable data structures provide you with a cheap way to track changes on objects, which is all we need to implement `shouldComponentUpdate`. This can often provide you with a nice performance boost.
+Иммутабельные структуры данных предоставляют вам дешёвый способ отслеживания изменений в объектах и всё, что вам нужно для реализации `shouldComponentUpdate`. В большинстве случаев это даст вам хороший прирост в производительности.
diff --git a/content/docs/react-without-jsx.md b/content/docs/react-without-jsx.md
index 85cdba45f..0b3393861 100644
--- a/content/docs/react-without-jsx.md
+++ b/content/docs/react-without-jsx.md
@@ -1,19 +1,20 @@
 ---
 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 {
   render() {
-    return <div>Hello {this.props.toWhat}</div>;
+    return <div>Привет, {this.props.toWhat}</div>;
   }
 }
 
@@ -23,12 +24,12 @@ ReactDOM.render(
 );
 ```
 
-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}`);
   }
 }
 
@@ -38,22 +39,21 @@ 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;
 
 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.
-
-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), которые предлагают короткий синтаксис.
diff --git a/content/docs/reconciliation.md b/content/docs/reconciliation.md
index c2147a4dc..1624bfbde 100644
--- a/content/docs/reconciliation.md
+++ b/content/docs/reconciliation.md
@@ -10,7 +10,7 @@ React provides a declarative API so that you don't have to worry about exactly w
 
 When you use React, at a single point in time you can think of the `render()` function as creating a tree of React elements. On the next state or props update, that `render()` function will return a different tree of React elements. React then needs to figure out how to efficiently update the UI to match the most recent tree.
 
-There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
+There are some generic solutions to this algorithmic problem of generating the minimum number of operations to transform one tree into another. However, the [state of the art algorithms](https://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) have a complexity in the order of O(n<sup>3</sup>) where n is the number of elements in the tree.
 
 If we used this in React, displaying 1000 elements would require in the order of one billion comparisons. This is far too expensive. Instead, React implements a heuristic O(n) algorithm based on two assumptions:
 
diff --git a/content/docs/reference-dom-elements.md b/content/docs/reference-dom-elements.md
index 166870968..f2dbedbd2 100644
--- a/content/docs/reference-dom-elements.md
+++ b/content/docs/reference-dom-elements.md
@@ -1,6 +1,6 @@
 ---
 id: dom-elements
-title: DOM Elements
+title: Элементы DOM
 layout: docs
 category: Reference
 permalink: docs/dom-elements.html
@@ -14,31 +14,32 @@ redirect_from:
   - "tips/dangerously-set-inner-html.html"
 ---
 
-React implements a browser-independent DOM system for performance and cross-browser compatibility. We took the opportunity to clean up a few rough edges in browser DOM implementations.
+React реализует независимую от браузера систему DOM для повышения производительности и кроссбраузерной совместимости. Это позволило избавиться от некоторых шероховатостей в браузерных реализациях DOM.
 
-In React, all DOM properties and attributes (including event handlers) should be camelCased. For example, the HTML attribute `tabindex` corresponds to the attribute `tabIndex` in React. The exception is `aria-*` and `data-*` attributes, which should be lowercased. For example, you can keep `aria-label` as `aria-label`.
+В React все свойства и атрибуты DOM (включая обработчики событий) должны быть в стиле camelCase. Например, HTML-атрибут `tabindex` соответствует атрибуту `tabIndex` в React. Исключение составляют атрибуты `aria-*` и `data-*`, которые следует писать в нижнем регистре. В частности, вы можете оставить `aria-label` как `aria-label`.
 
-## Differences In Attributes {#differences-in-attributes}
 
-There are a number of attributes that work differently between React and HTML:
+## Различия в атрибутах {#differences-in-attributes}
+
+Есть ряд атрибутов, которые по-разному работают в React и HTML:
 
 ### checked {#checked}
 
-The `checked` attribute is supported by `<input>` components of type `checkbox` or `radio`. You can use it to set whether the component is checked. This is useful for building controlled components. `defaultChecked` is the uncontrolled equivalent, which sets whether the component is checked when it is first mounted.
+Атрибут `checked` поддерживается компонентами `<input>` типа `checkbox` или `radio`. Он нужен для того, чтобы узнать выбран ли компонент. Это полезно для создания контролируемых компонентов. `defaultChecked` — это неконтролируемый эквивалент, который определяет, выбран ли компонент на момент первого монтирования.
 
 ### className {#classname}
 
-To specify a CSS class, use the `className` attribute. This applies to all regular DOM and SVG elements like `<div>`, `<a>`, and others.
+Чтобы указать класс CSS, используйте атрибут `className`. Это относится ко всем обычным элементам DOM и SVG, таким как `<div>`, `<a>` и т.д.
 
-If you use React with Web Components (which is uncommon), use the `class` attribute instead.
+Если вы используете React с веб-компонентами (что встречается редко), используйте вместо этого атрибут `class`.
 
 ### dangerouslySetInnerHTML {#dangerouslysetinnerhtml}
 
-`dangerouslySetInnerHTML` is React's replacement for using `innerHTML` in the browser DOM. In general, setting HTML from code is risky because it's easy to inadvertently expose your users to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. So, you can set HTML directly from React, but you have to type out `dangerouslySetInnerHTML` and pass an object with a `__html` key, to remind yourself that it's dangerous. For example:
+Свойству `innerHTML` в DOM браузера соответствует `dangerouslySetInnerHTML` в React. Как правило, вставка HTML из кода рискованна, так как можно случайно подвергнуть ваших пользователей атаке [межсайтового скриптинга](https://ru.wikipedia.org/wiki/%D0%9C%D0%B5%D0%B6%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2%D1%8B%D0%B9_%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D0%B8%D0%BD%D0%B3). Таким образом, вы можете вставить HTML непосредственно из React используя `dangerouslySetInnerHTML` и передать объект с ключом `__html`, чтобы напомнить себе, что это небезопасно. Например:
 
 ```js
 function createMarkup() {
-  return {__html: 'First &middot; Second'};
+  return {__html: 'Первый &middot; Второй'};
 }
 
 function MyComponent() {
@@ -48,23 +49,23 @@ function MyComponent() {
 
 ### htmlFor {#htmlfor}
 
-Since `for` is a reserved word in JavaScript, React elements use `htmlFor` instead.
+Поскольку `for` является зарезервированным словом JavaScript, для определения HTML-атрибута `for` в элементах React вместо него используйте `htmlFor`.
 
 ### onChange {#onchange}
 
-The `onChange` event behaves as you would expect it to: whenever a form field is changed, this event is fired. We intentionally do not use the existing browser behavior because `onChange` is a misnomer for its behavior and React relies on this event to handle user input in real time.
+Событие `onChange` ведет себя ожидаемо: событие срабатывает при изменении поля формы. Мы намеренно не используем существующее поведение браузера, потому что имя `onChange` плохо передаёт, что происходит на самом деле. Вместо этого, React-реализация `onChange` опирается на браузерное событие для обработки ввода в реальном времени.
 
 ### selected {#selected}
 
-The `selected` attribute is supported by `<option>` components. You can use it to set whether the component is selected. This is useful for building controlled components.
+Атрибут `selected` поддерживается компонентом `<option>`. Используйте его, чтобы определить выбран ли компонент. Это полезно для создания контролируемых компонентов.
 
 ### style {#style}
 
->Note
+>Примечание
 >
->Some examples in the documentation use `style` for convenience, but **using the `style` attribute as the primary means of styling elements is generally not recommended.** In most cases, [`className`](#classname) should be used to reference classes defined in an external CSS stylesheet. `style` is most often used in React applications to add dynamically-computed styles at render time. See also [FAQ: Styling and CSS](/docs/faq-styling.html).
+>Некоторые примеры в документации используют для удобства `style`, но **использование атрибута `style` для оформления элементов не рекомендуется.** В большинстве случаев для ссылки на классы, определенные во внешнем CSS, следует использовать [`className`](#classname). Атрибут `style` в React чаще всего используется при добавлении динамически вычисляемых стилей во время рендера. Смотрите [FAQ: Стили и CSS](/docs/faq-styling.html).
 
-The `style` attribute accepts a JavaScript object with camelCased properties rather than a CSS string. This is consistent with the DOM `style` JavaScript property, is more efficient, and prevents XSS security holes. For example:
+Атрибут `style` принимает JavaScript-объект со свойствами в camelCase вместо CSS-строк. Такой подход повышает эффективность и защищает от XSS. Например:
 
 ```js
 const divStyle = {
@@ -73,70 +74,70 @@ const divStyle = {
 };
 
 function HelloWorldComponent() {
-  return <div style={divStyle}>Hello World!</div>;
+  return <div style={divStyle}>Привет, мир!</div>;
 }
 ```
 
-Note that styles are not autoprefixed. To support older browsers, you need to supply corresponding style properties:
+Обратите внимание, что браузерные префиксы не добавляются к стилям автоматически. Для поддержки старых браузеров необходимо добавить соответствующие свойства стиля:
 
 ```js
 const divStyle = {
-  WebkitTransition: 'all', // note the capital 'W' here
-  msTransition: 'all' // 'ms' is the only lowercase vendor prefix
+  WebkitTransition: 'all', // обратите внимание на заглавную букву W
+  msTransition: 'all' // 'ms' — единственный префикс в нижнем регистре
 };
 
 function ComponentWithTransition() {
-  return <div style={divStyle}>This should work cross-browser</div>;
+  return <div style={divStyle}>Это будет работать в разных браузерах</div>;
 }
 ```
 
-Style keys are camelCased in order to be consistent with accessing the properties on DOM nodes from JS (e.g. `node.style.backgroundImage`). Vendor prefixes [other than `ms`](http://www.andismith.com/blog/2012/02/modernizr-prefixed/) should begin with a capital letter. This is why `WebkitTransition` has an uppercase "W".
+Ключи стилей записываются в camelCase для обеспечения доступа к аналогичным свойствам DOM из JS (например, `node.style.backgroundImage`). Префиксы браузера [кроме `ms`](https://www.andismith.com/blog/2012/02/modernizr-prefixed/) должны начинаться с заглавной буквы. Вот почему `WebkitTransition` начинается с заглавной "W".
 
-React will automatically append a "px" suffix to certain numeric inline style properties. If you want to use units other than "px", specify the value as a string with the desired unit. For example:
+React автоматически добавит суффикс «px» к свойствам стилей с числовым значением. Если вы хотите использовать единицы измерения, отличные от «px», укажите значение в виде строки с желаемой единицей измерения. Например:
 
 ```js
-// Result style: '10px'
+// Результат: '10px'
 <div style={{ height: 10 }}>
-  Hello World!
+  Привет, мир!
 </div>
 
-// Result style: '10%'
+// Результат: '10%'
 <div style={{ height: '10%' }}>
-  Hello World!
+  Привет, мир!
 </div>
 ```
 
-Not all style properties are converted to pixel strings though. Certain ones remain unitless (eg `zoom`, `order`, `flex`). A complete list of unitless properties can be seen [here](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
+Однако не все свойства стилей преобразуются в пиксельные строки. Некоторые из них остаются без единиц (например, `zoom`, `order`, `flex`). Полный список свойств без единиц измерения можно увидеть [здесь](https://github.com/facebook/react/blob/4131af3e4bf52f3a003537ec95a1655147c81270/src/renderers/dom/shared/CSSProperty.js#L15-L59).
 
 ### suppressContentEditableWarning {#suppresscontenteditablewarning}
 
-Normally, there is a warning when an element with children is also marked as `contentEditable`, because it won't work. This attribute suppresses that warning. Don't use this unless you are building a library like [Draft.js](https://facebook.github.io/draft-js/) that manages `contentEditable` manually.
+Обычно, когда элемент с потомками помечен как `contentEditable`, появляется предупреждение, что он не будет работать. Данный атрибут скрывает это предупреждение. Поэтому используйте его, только если вы создаете похожую на [Draft.js](https://facebook.github.io/draft-js/) библиотеку, которая управляет `contentEditable` вручную.
 
 ### suppressHydrationWarning {#suppresshydrationwarning}
 
-If you use server-side React rendering, normally there is a warning when the server and the client render different content. However, in some rare cases, it is very hard or impossible to guarantee an exact match. For example, timestamps are expected to differ on the server and on the client.
+Если вы используете рендеринг React на стороне сервера и клиент с сервером рендерят разный контент, то как правило, об этом выдаётся предупреждение. Однако в редких случаях очень сложно или невозможно гарантировать точное совпадение. Например, ожидается, что временные метки будут различаться на сервере и на клиенте.
 
-If you set `suppressHydrationWarning` to `true`, React will not warn you about mismatches in the attributes and the content of that element. It only works one level deep, and is intended to be used as an escape hatch. Don't overuse it. You can read more about hydration in the [`ReactDOM.hydrate()` documentation](/docs/react-dom.html#hydrate).
+Если для `suppressHydrationWarning` установлено значение `true`, React не будет предупреждать вас о несоответствиях в атрибутах и содержимом этого элемента. Он работает только на один уровень глубины и предназначен для использования в качестве запасного решения. Не злоупотребляйте этим. Вы можете прочитать больше о гидратации на [странице `ReactDOM.hydrate()`](/docs/react-dom.html#hydrate).
 
 ### value {#value}
 
-The `value` attribute is supported by `<input>` and `<textarea>` components. You can use it to set the value of the component. This is useful for building controlled components. `defaultValue` is the uncontrolled equivalent, which sets the value of the component when it is first mounted.
+Атрибут `value` поддерживается компонентами `<input>` и `<textarea>`. Он устанавливает значение компонента. Это полезно для создания контролируемых компонентов. `defaultValue` — это неконтролируемый эквивалент, который устанавливает значение компонента во время первого монтирования.
 
-## All Supported HTML Attributes {#all-supported-html-attributes}
+## Поддержка всех HTML-атрибутов {#all-supported-html-attributes}
 
-As of React 16, any standard [or custom](/blog/2017/09/08/dom-attributes-in-react-16.html) DOM attributes are fully supported.
+Начиная с React 16, полностью поддерживаются любые стандартные или [пользовательские](/blog/2017/09/08/dom-attributes-in-react-16.html) атрибуты DOM.
 
-React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, React uses the `camelCase` convention just like the DOM APIs:
+React всегда предоставлял JavaScript-ориентированный API для DOM. Поскольку компоненты React часто принимают как пользовательские, так и связанные с DOM пропсы, React использует стиль `camelCase` так же, как DOM API:
 
 ```js
-<div tabIndex="-1" />      // Just like node.tabIndex DOM API
-<div className="Button" /> // Just like node.className DOM API
-<input readOnly={true} />  // Just like node.readOnly DOM API
+<div tabIndex="-1" />      // То же, что и node.tabIndex DOM API
+<div className="Button" /> // То же, что и node.className DOM API
+<input readOnly={true} />  // То же, что и node.readOnly DOM API
 ```
 
-These props work similarly to the corresponding HTML attributes, with the exception of the special cases documented above.
+Эти пропсы работают аналогично соответствующим атрибутам HTML, за исключением особых случаев, описанных выше.
 
-Some of the DOM attributes supported by React include:
+Некоторые из атрибутов DOM, поддерживаемые React:
 
 ```
 accept acceptCharset accessKey action allowFullScreen alt async autoComplete
@@ -154,7 +155,7 @@ sizes span spellCheck src srcDoc srcLang srcSet start step style summary
 tabIndex target title type useMap value width wmode wrap
 ```
 
-Similarly, all SVG attributes are fully supported:
+Кроме того, полностью поддерживаются все SVG-атрибуты:
 
 ```
 accentHeight accumulate additive alignmentBaseline allowReorder alphabetic
@@ -193,4 +194,4 @@ xlinkHref xlinkRole xlinkShow xlinkTitle xlinkType xmlns xmlnsXlink xmlBase
 xmlLang xmlSpace y y1 y2 yChannelSelector z zoomAndPan
 ```
 
-You may also use custom attributes as long as they're fully lowercase.
+Вы также можете использовать пользовательские атрибуты, написанные в нижнем регистре.
diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md
index 280869512..e91fa9eef 100644
--- a/content/docs/reference-glossary.md
+++ b/content/docs/reference-glossary.md
@@ -27,7 +27,7 @@ Bundlers take JavaScript and CSS code written as separate modules (often hundred
 
 ## Package Managers {#package-managers}
 
-Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
+Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
 
 ## CDN {#cdn}
 
diff --git a/content/docs/reference-javascript-environment-requirements.md b/content/docs/reference-javascript-environment-requirements.md
index 44a36eb9d..dd995d019 100644
--- a/content/docs/reference-javascript-environment-requirements.md
+++ b/content/docs/reference-javascript-environment-requirements.md
@@ -1,14 +1,14 @@
 ---
 id: javascript-environment-requirements
-title: JavaScript Environment Requirements
+title: Требования к среде JavaScript
 layout: docs
 category: Reference
 permalink: docs/javascript-environment-requirements.html
 ---
 
-React 16 depends on the collection types [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) and [Set](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set). If you support older browsers and devices which may not yet provide these natively (e.g. IE < 11) or which have non-compliant implementations (e.g. IE 11), consider including a global polyfill in your bundled application, such as [core-js](https://github.com/zloirock/core-js) or [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
+React 16 полагается на типы коллекций [Map](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Map) и [Set](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Set). Во многих старых устройствах и браузерах (например, IE < 11) эти типы коллекций отсутствуют. В других же они имеют несоответствующую реализацию (скажем, IE 11). Если вы поддерживаете эти браузеры, то можете включить глобальный полифил в ваше приложение, такой как [core-js](https://github.com/zloirock/core-js) или [babel-polyfill](https://babeljs.io/docs/usage/polyfill/).
 
-A polyfilled environment for React 16 using core-js to support older browsers might look like:
+Окружение для React 16, использующее core-js для поддержки старых браузеров, может выглядеть следующим образом:
 
 ```js
 import 'core-js/es6/map';
@@ -23,8 +23,8 @@ ReactDOM.render(
 );
 ```
 
-React also depends on `requestAnimationFrame` (even in test environments).  
-You can use the [raf](https://www.npmjs.com/package/raf) package to shim `requestAnimationFrame`:
+React также полагается на `requestAnimationFrame` (даже в тестовом окружении).
+Вы можете использовать пакет [raf](https://www.npmjs.com/package/raf) для создания шима `requestAnimationFrame`:
 
 ```js
 import 'raf/polyfill';
diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
index ecb4d087c..cbe6b67d9 100644
--- a/content/docs/reference-react-component.md
+++ b/content/docs/reference-react-component.md
@@ -15,50 +15,50 @@ redirect_from:
   - "tips/use-react-with-other-libraries.html"
 ---
 
-This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Components and Props](/docs/components-and-props.html), as well as [State and Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first.
+Эта страница содержит подробный справочник API для определения классового компонента React. Предполагается, что вы знакомы с такими концепциями React, как [компоненты и пропсы](/docs/components-and-props.html), а также [состояние и жизненный цикл](/docs/state-and-lifecycle.html). Прочитайте про них, если вы этого не сделали.
 
-## Overview {#overview}
+## Обзор {#overview}
 
-React lets you define components as classes or functions. Components defined as classes currently provide more features which are described in detail on this page. To define a React component class, you need to extend `React.Component`:
+React позволяет определять компоненты как классы или функции. В настоящее время классовые компоненты имеют больше возможностей. Они разобраны на этой странице. Чтобы определить такой компонент, необходимо отнаследоваться от `React.Component`:
 
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Привет, {this.props.name}</h1>;
   }
 }
 ```
 
-The only method you *must* define in a `React.Component` subclass is called [`render()`](#render). All the other methods described on this page are optional.
+Единственный *обязательный* метод в подклассе `React.Component` – [`render()`](#render). Все остальные методы, описанные ниже, являются необязательными.
 
-**We strongly recommend against creating your own base component classes.** In React components, [code reuse is primarily achieved through composition rather than inheritance](/docs/composition-vs-inheritance.html).
+**Мы рекомендуем не создавать собственные классы базовых компонентов.** В компонентах React переиспользование кода обычно достигается за счет [композиции, а не наследования](/docs/composition-vs-inheritance.html).
 
->Note:
+> Примечание:
 >
->React doesn't force you to use the ES6 class syntax. If you prefer to avoid it, you may use the `create-react-class` module or a similar custom abstraction instead. Take a look at [Using React without ES6](/docs/react-without-es6.html) to learn more.
+>React не заставляет вас использовать синтаксис классов из ES6. Вместо этого вы можете использовать модуль `create-react-class` или его аналоги. Посмотрите раздел [Использование React без ES6](/docs/react-without-es6.html), чтобы узнать больше.
 
-### The Component Lifecycle {#the-component-lifecycle}
+### Жизненный цикл компонента {#the-component-lifecycle}
 
-Each component has several "lifecycle methods" that you can override to run code at particular times in the process. **You can use [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) as a cheat sheet.** In the list below, commonly used lifecycle methods are marked as **bold**. The rest of them exist for relatively rare use cases.
+Каждый компонент имеет несколько «методов жизненного цикла». Переопределение такого метода позволяет выполнять код на конкретном этапе этого процесса. **Вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) как шпаргалку.** Далее на странице **полужирным шрифтом** выделены самые распространённые методы жизненного цикла.
 
-#### Mounting {#mounting}
+#### Монтирование {#mounting}
 
-These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
+При создании экземпляра компонента и его вставке в DOM, следующие методы вызываются в установленном порядке:
 
 - [**`constructor()`**](#constructor)
 - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops)
 - [**`render()`**](#render)
 - [**`componentDidMount()`**](#componentdidmount)
 
->Note:
+> Примечание:
 >
->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
+> Этот метод устарел. [Не используйте его](/blog/2018/03/27/update-on-async-rendering.html) в новом коде.
 >
 >- [`UNSAFE_componentWillMount()`](#unsafe_componentwillmount)
 
-#### Updating {#updating}
+#### Обновление {#updating}
 
-An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
+Обновление происходит при изменении пропсов или состояния. Следующие методы вызываются в установленном порядке при повторном рендере компонента:
 
 - [`static getDerivedStateFromProps()`](#static-getderivedstatefromprops)
 - [`shouldComponentUpdate()`](#shouldcomponentupdate)
@@ -66,50 +66,50 @@ An update can be caused by changes to props or state. These methods are called i
 - [`getSnapshotBeforeUpdate()`](#getsnapshotbeforeupdate)
 - [**`componentDidUpdate()`**](#componentdidupdate)
 
->Note:
+> Примечание:
 >
->These methods are considered legacy and you should [avoid them](/blog/2018/03/27/update-on-async-rendering.html) in new code:
+> Эти методы устарели. [Не используйте их](/blog/2018/03/27/update-on-async-rendering.html) в новом коде.
 >
 >- [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate)
 >- [`UNSAFE_componentWillReceiveProps()`](#unsafe_componentwillreceiveprops)
 
-#### Unmounting {#unmounting}
+#### Размонтирование {#unmounting}
 
-This method is called when a component is being removed from the DOM:
+Этот метод вызывается при удалении компонента из DOM:
 
 - [**`componentWillUnmount()`**](#componentwillunmount)
 
-#### Error Handling {#error-handling}
+#### Обработка ошибок {#error-handling}
 
-These methods are called when there is an error during rendering, in a lifecycle method, or in the constructor of any child component.
+Следующие методы вызываются, если произошла ошибка в процессе рендеринга, методе жизненного цикла или конструкторе любого дочернего компонента.
 
 - [`static getDerivedStateFromError()`](#static-getderivedstatefromerror)
 - [`componentDidCatch()`](#componentdidcatch)
 
-### Other APIs {#other-apis}
+### Другие методы API {#other-apis}
 
-Each component also provides some other APIs:
+В каждом компоненте доступны методы API:
 
   - [`setState()`](#setstate)
   - [`forceUpdate()`](#forceupdate)
 
-### Class Properties {#class-properties}
+### Свойства класса {#class-properties}
 
   - [`defaultProps`](#defaultprops)
   - [`displayName`](#displayname)
 
-### Instance Properties {#instance-properties}
+### Свойства экземпляра {#instance-properties}
 
   - [`props`](#props)
   - [`state`](#state)
 
 * * *
 
-## Reference {#reference}
+## Справочник {#reference}
 
-### Commonly Used Lifecycle Methods {#commonly-used-lifecycle-methods}
+### Распространённые методы жизненного цикла {#commonly-used-lifecycle-methods}
 
-The methods in this section cover the vast majority of use cases you'll encounter creating React components. **For a visual reference, check out [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).**
+Методы в этом разделе охватывают большинство задач, с которыми вы столкнётесь при использовании React-компонентов. **Для визуального представления вы можете использовать [эту диаграмму жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/).**
 
 ### `render()` {#render}
 
@@ -117,23 +117,23 @@ The methods in this section cover the vast majority of use cases you'll encounte
 render()
 ```
 
-The `render()` method is the only required method in a class component.
+`render()` – единственный обязательный метод в классовом компоненте.
 
-When called, it should examine `this.props` and `this.state` and return one of the following types:
+При вызове он проверяет `this.props` и `this.state` и возвращает один из следующих вариантов:
 
-- **React elements.** Typically created via [JSX](/docs/introducing-jsx.html). For example, `<div />` and `<MyComponent />` are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
-- **Arrays and fragments.** Let you return multiple elements from render. See the documentation on [fragments](/docs/fragments.html) for more details.
-- **Portals**. Let you render children into a different DOM subtree. See the documentation on [portals](/docs/portals.html) for more details.
-- **String and numbers.** These are rendered as text nodes in the DOM.
-- **Booleans or `null`**. Render nothing. (Mostly exists to support `return test && <Child />` pattern, where `test` is boolean.)
+- **Элемент React.** Обычно создаётся с помощью [JSX](/docs/introducing-jsx.html). Указывает React, что рендерить: DOM-узел или пользовательский компонент. Например, `<div />` или `<MyComponent />`.
+- **Массивы и фрагменты.** Возвращает несколько элементов из `render()`. Подробнее про [фрагменты](/docs/fragments.html).
+- **Порталы**. Рендерит несколько дочерних элементов в другое поддерево DOM. Подробнее про [порталы](/docs/portals.html).
+- **Строки и числа.** Рендерит текстовые DOM-узлы.
+- **Booleans or `null`**. Ничего не рендерит. (Обычно необходим для поддержки паттерна `return test && <Child />`, где `test` – логическое значение.)
 
-The `render()` function should be pure, meaning that it does not modify component state, it returns the same result each time it's invoked, and it does not directly interact with the browser.
+Функция `render()` должна быть *чистой*. Это означает, что она не изменяет состояние компонента, всегда возвращает один и тот же результат, не взаимодействует напрямую с браузером.
 
-If you need to interact with the browser, perform your work in `componentDidMount()` or the other lifecycle methods instead. Keeping `render()` pure makes components easier to think about.
+Взаимодействовать с браузером необходимо в `componentDidMount()` или других методах жизненного цикла. *Чистый* `render()` делает компонент понятным.
 
-> Note
+> Примечание:
 >
-> `render()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
+> `render()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`.
 
 * * *
 
@@ -143,48 +143,47 @@ If you need to interact with the browser, perform your work in `componentDidMoun
 constructor(props)
 ```
 
-**If you don't initialize state and you don't bind methods, you don't need to implement a constructor for your React component.**
+**Вы можете не использовать конструктор в React-компоненте, если вы не определяете состояние или не привязываете методы.**
 
-The constructor for a React component is called before it is mounted. When implementing the constructor for a `React.Component` subclass, you should call `super(props)` before any other statement. Otherwise, `this.props` will be undefined in the constructor, which can lead to bugs.
+Конструктор компонента React вызывается до того, как компонент будет примонтирован. В начале конструктора необходимо вызывать `super(props)`. Если это не сделать, `this.props` не будет определен. Это может привести к багам.
 
-Typically, in React constructors are only used for two purposes:
+Конструкторы в React обычно используют для двух целей:
 
-* Initializing [local state](/docs/state-and-lifecycle.html) by assigning an object to `this.state`.
-* Binding [event handler](/docs/handling-events.html) methods to an instance.
+* Инициализация [внутреннего состояния](/docs/state-and-lifecycle.html) через присвоение объекта `this.state`.
+* Привязка [обработчиков событий](/docs/handling-events.html) к экземпляру.
 
-You **should not call `setState()`** in the `constructor()`. Instead, if your component needs to use local state, **assign the initial state to `this.state`** directly in the constructor:
+Вы **не должны вызывать `setState()`** в `constructor()`. Если вам нужно внутреннее состояние, **присвойте начальное состояние `this.state`** прямо в конструкторе.
 
 ```js
 constructor(props) {
   super(props);
-  // Don't call this.setState() here!
+  // Не вызывайте здесь this.setState()!
   this.state = { counter: 0 };
   this.handleClick = this.handleClick.bind(this);
 }
 ```
 
-Constructor is the only place where you should assign `this.state` directly. In all other methods, you need to use `this.setState()` instead.
+Конструктор — единственное место, где можно напрямую изменять `this.state`. В остальных методах необходимо использовать `this.setState()`.
 
-Avoid introducing any side-effects or subscriptions in the constructor. For those use cases, use `componentDidMount()` instead.
+Не используйте побочные эффекты или подписки в конструкторе. Вместо этого используйте `componentDidMount()`.
 
->Note
+> Примечание:
 >
->**Avoid copying props into state! This is a common mistake:**
+>**Не копируйте пропсы в состояние! Это распространённая ошибка:**
 >
 >```js
 >constructor(props) {
 >  super(props);
->  // Don't do this!
+>  // Не делайте этого!
 >  this.state = { color: props.color };
 >}
 >```
 >
->The problem is that it's both unnecessary (you can use `this.props.color` directly instead), and creates bugs (updates to the `color` prop won't be reflected in the state).
+>Проблема в том, что это излишне и приводит к багам (обновления в пропе `color` не будут зафиксированы в состоянии). Вместо этого используйте `this.props.color`.
 >
->**Only use this pattern if you intentionally want to ignore prop updates.** In that case, it makes sense to rename the prop to be called `initialColor` or `defaultColor`. You can then force a component to "reset" its internal state by [changing its `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) when necessary.
+> **Используйте данный подход, если вы намеренно хотите игнорировать обновления пропсов.** В таком случае лучше переименовать проп в `initialColor` или `defaultColor`. После этого вы сможете заставить компонент «сбросить» своё внутреннее состояние, [изменив свой ключ](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key), когда это будет необходимо.
 >
->Read our [blog post on avoiding derived state](/blog/2018/06/07/you-probably-dont-need-derived-state.html) to learn about what to do if you think you need some state to depend on the props.
-
+>Прочитайте нашу статью в блоге про [отсутствие необходимости в производном состоянии](/blog/2018/06/07/you-probably-dont-need-derived-state.html). Она описывает случаи, в которых вам необходимо состояние, зависящее от пропсов.
 
 * * *
 
@@ -194,11 +193,11 @@ Avoid introducing any side-effects or subscriptions in the constructor. For thos
 componentDidMount()
 ```
 
-`componentDidMount()` is invoked immediately after a component is mounted (inserted into the tree). Initialization that requires DOM nodes should go here. If you need to load data from a remote endpoint, this is a good place to instantiate the network request.
+`componentDidMount()` вызывается сразу после монтирования (то есть, вставки компонента в DOM). В этом методе должны происходить действия, которые требуют наличия DOM-узлов. Это хорошее место для создания сетевых запросов.
 
-This method is a good place to set up any subscriptions. If you do that, don't forget to unsubscribe in `componentWillUnmount()`.
+Этот метод подходит для настройки подписок. Но не забудьте отписаться от них в `componentWillUnmount()`.
 
-You **may call `setState()` immediately** in `componentDidMount()`. It will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the `render()` will be called twice in this case, the user won't see the intermediate state. Use this pattern with caution because it often causes performance issues. In most cases, you should be able to assign the initial state in the `constructor()` instead. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.
+Вы **можете сразу вызвать setState()** в `componentDidMount()`. Это вызовет дополнительный рендер перед тем, как браузер обновит экран. Гарантируется, что пользователь не увидит промежуточное состояние, даже если `render()` будет вызываться дважды. Используйте этот подход с осторожностью, он может вызвать проблемы с производительностью. В большинстве случаев начальное состояние лучше объявить в `constructor()`. Однако, это может быть необходимо для случаев, когда нужно измерить размер или положение DOM-узла, на основе которого происходит рендер. Например, для модальных окон или всплывающих подсказок.
 
 * * *
 
@@ -208,26 +207,27 @@ You **may call `setState()` immediately** in `componentDidMount()`. It will trig
 componentDidUpdate(prevProps, prevState, snapshot)
 ```
 
-`componentDidUpdate()` is invoked immediately after updating occurs. This method is not called for the initial render.
+`componentDidUpdate()` вызывается сразу после обновления. Не вызывается при первом рендере.
 
-Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).
+Метод позволяет работать с DOM при обновлении компонента. Также он подходит для выполнения таких сетевых запросов, которые выполняются на основании результата сравнения текущих пропсов с предыдущими. Если пропсы не изменились, новый запрос может и не требоваться.
 
 ```js
 componentDidUpdate(prevProps) {
-  // Typical usage (don't forget to compare props):
+  // Популярный пример (не забудьте сравнить пропсы):
   if (this.props.userID !== prevProps.userID) {
     this.fetchData(this.props.userID);
   }
 }
 ```
 
-You **may call `setState()` immediately** in `componentDidUpdate()` but note that **it must be wrapped in a condition** like in the example above, or you'll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance. If you're trying to "mirror" some state to a prop coming from above, consider using the prop directly instead. Read more about [why copying props into state causes bugs](/blog/2018/06/07/you-probably-dont-need-derived-state.html).
+Вы **можете сразу вызвать setState()** в `componentDidUpdate()`, если **оно находится в условии**, как в примере выше. Иначе может произойти бесконечный цикл.
+Это повлечёт за собой дополнительный, незаметный для пользователя, рендер, который повлияет на производительность компонента. Используйте пропсы для «отражения» некоторого состояния в пропсах, приходящих сверху. Подробнее о том, [почему копирование пропсов в состояние вызывает баги](/blog/2018/06/07/you-probably-dont-need-derived-state.html).
 
-If your component implements the `getSnapshotBeforeUpdate()` lifecycle (which is rare), the value it returns will be passed as a third "snapshot" parameter to `componentDidUpdate()`. Otherwise this parameter will be undefined.
+В тех редких случаях когда реализован метод жизненного цикла `getSnapshotBeforeUpdate()`, его результат передаётся `componentDidUpdate()` в качестве третьего параметра `snapshot`.
 
-> Note
+> Примечание:
 >
-> `componentDidUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
+> `componentDidUpdate()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`.
 
 * * *
 
@@ -237,16 +237,15 @@ If your component implements the `getSnapshotBeforeUpdate()` lifecycle (which is
 componentWillUnmount()
 ```
 
-`componentWillUnmount()` is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in `componentDidMount()`.
+`componentWillUnmount()` вызывается непосредственно перед размонтированием и удалением компонента. В этом методе выполняется необходимый сброс: отмена таймеров, сетевых запросов и подписок, созданных в `componentDidMount()`.
 
-You **should not call `setState()`** in `componentWillUnmount()` because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.
+**Не используйте setState()** в `componentWillUnmount()`, так как компонент никогда не рендерится повторно. После того, как экземпляр компонента будет размонтирован, он никогда не будет примонтирован снова.
 
 * * *
 
-### Rarely Used Lifecycle Methods {#rarely-used-lifecycle-methods}
-
-The methods in this section correspond to uncommon use cases. They're handy once in a while, but most of your components probably don't need any of them. **You can see most of the methods below on [this lifecycle diagram](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/) if you click the "Show less common lifecycles" checkbox at the top of it.**
+### Редко используемые методы жизненного цикла {#rarely-used-lifecycle-methods}
 
+Методы из этого раздела используются редко. В большинстве компонентов они не нужны, хотя иногда бывают полезны. **Вы можете увидеть большинство приведённых ниже методов на [этой диаграмме жизненного цикла](http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/), если наверху страницы нажмете на чекбокс «Показать менее популярные методы жизненного цикла».**
 
 ### `shouldComponentUpdate()` {#shouldcomponentupdate}
 
@@ -254,17 +253,17 @@ The methods in this section correspond to uncommon use cases. They're handy once
 shouldComponentUpdate(nextProps, nextState)
 ```
 
-Use `shouldComponentUpdate()` to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.
+Используйте `shouldComponentUpdate()`, чтобы указать необходимость следующего рендера на основе изменений состояния и пропсов. По умолчанию происходит повторный рендер при любом изменении состояния. В большинстве случаев вы должны полагаться на это поведение.
 
-`shouldComponentUpdate()` is invoked before rendering when new props or state are being received. Defaults to `true`. This method is not called for the initial render or when `forceUpdate()` is used.
+`shouldComponentUpdate()` вызывается перед рендером, когда получает новые пропсы или состояние. Значение по умолчанию равно `true`. Этот метод не вызывается при первом рендере или когда используется `forceUpdate()`.
 
-This method only exists as a **[performance optimization](/docs/optimizing-performance.html).** Do not rely on it to "prevent" a rendering, as this can lead to bugs. **Consider using the built-in [`PureComponent`](/docs/react-api.html#reactpurecomponent)** instead of writing `shouldComponentUpdate()` by hand. `PureComponent` performs a shallow comparison of props and state, and reduces the chance that you'll skip a necessary update.
+Этот метод нужен только для **[повышения производительности](/docs/optimizing-performance.html).**. Но не опирайтесь на его возможность «предотвратить» рендер, это может привести к багам. Вместо этого **используйте [`PureComponent`](/docs/react-api.html#reactpurecomponent)**, который позволяет не описывать поведение `shouldComponentUpdate()` вручную. `PureComponent` поверхностно сравнивает пропсы и состояние и позволяет не пропустить необходимое обновление.
 
-If you are confident you want to write it by hand, you may compare `this.props` with `nextProps` and `this.state` with `nextState` and return `false` to tell React the update can be skipped. Note that returning `false` does not prevent child components from re-rendering when *their* state changes.
+Если вы уверены, что хотите написать его вручную, вы можете сравнить `this.props` с `nextProps`, а `this.state` с `nextState`. Верните `false` чтобы пропустить обновление React. Возврат `false` не предотвращает повторный рендер дочерних компонентов при изменении *их* состояния.
 
-We do not recommend doing deep equality checks or using `JSON.stringify()` in `shouldComponentUpdate()`. It is very inefficient and will harm performance.
+Мы не рекомендуем делать глубокое сравнение или использовать `JSON.stringify()` в `shouldComponentUpdate()`. Это неэффективно и плохо влияет на производительность.
 
-Currently, if `shouldComponentUpdate()` returns `false`, then [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate), [`render()`](#render), and [`componentDidUpdate()`](#componentdidupdate) will not be invoked. In the future React may treat `shouldComponentUpdate()` as a hint rather than a strict directive, and returning `false` may still result in a re-rendering of the component.
+В настоящее время, если `shouldComponentUpdate()` возвращает `false`, то [`UNSAFE_componentWillUpdate()`](#unsafe_componentwillupdate), [`render()`](#render) и [`componentDidUpdate()`](#componentdidupdate) не будут вызваны. В будущем React может рассматривать `shouldComponentUpdate()` как подсказку, а не строгое указание. В таком случае возврат `false` сможет привести к повторному рендеру компонента.
 
 * * *
 
@@ -274,22 +273,23 @@ Currently, if `shouldComponentUpdate()` returns `false`, then [`UNSAFE_component
 static getDerivedStateFromProps(props, state)
 ```
 
-`getDerivedStateFromProps` is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing.
+`getDerivedStateFromProps` вызывается непосредственно перед вызовом метода `render`, как при начальном монтировании, так и при последующих обновлениях. Он должен вернуть объект для обновления состояния или null, чтобы ничего не обновлять.
+
+Этот метод существует для [редких случаев](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state), когда состояние зависит от изменений в пропсах. Например, это подойдёт для реализации компонента `<Transition>`, который сравнивает свои предыдущие и следующие дочерние компоненты, чтобы решить, какой из них нужно анимировать.
 
-This method exists for [rare use cases](/blog/2018/06/07/you-probably-dont-need-derived-state.html#when-to-use-derived-state) where the state depends on changes in props over time. For example, it might be handy for implementing a `<Transition>` component that compares its previous and next children to decide which of them to animate in and out.
+Производное состояние приводит к сложному коду и делает ваши компоненты сложными для понимания. Убедитесь, что вы знакомы с [простыми альтернативами:](/blog/2018/06/07/you-probably-dont-need-derived-state.html)
 
-Deriving state leads to verbose code and makes your components difficult to think about.  
-[Make sure you're familiar with simpler alternatives:](/blog/2018/06/07/you-probably-dont-need-derived-state.html)
+* Чтобы **выполнить побочный эффект при изменении пропсов** (например, сетевой запрос или анимацию) используйте [`componentDidUpdate`](#componentdidupdate).
 
-* If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead.
+* Чтобы **повторно вычислить данные при изменении пропсов**, используйте [функцию мемоизации](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
 
-* If you want to **re-compute some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
+* Чтобы **«сбросить» некоторое состояние при изменении пропсов**, используйте [контролируемые компоненты](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) или [неконтролируемые компоненты с ключом](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key).
 
-* If you want to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
+Этот метод не имеет доступа к экземпляру компонента. Чтобы использовать пропсы, состояние и методы класса в `getDerivedStateFromProps()`, их нужно вынести за пределы класса в виде чистых функций.
 
-This method doesn't have access to the component instance. If you'd like, you can reuse some code between `getDerivedStateFromProps()` and the other class methods by extracting pure functions of the component props and state outside the class definition.
+Если вы хотите переиспользовать код между `getDerivedStateFromProps()` и другими методами класса, извлеките чистые функции пропсов и состояния компонента и поместите их вне определения класса.
 
-Note that this method is fired on *every* render, regardless of the cause. This is in contrast to `UNSAFE_componentWillReceiveProps`, which only fires when the parent causes a re-render and not as a result of a local `setState`.
+Обратите внимание, что этот метод запускается при каждом рендере, независимо от причины. Это отличается от метода `UNSAFE_componentWillReceiveProps`, который запускается только при повторном рендере родительского компонента, а не в результате вызова `setState`.
 
 * * *
 
@@ -299,41 +299,40 @@ Note that this method is fired on *every* render, regardless of the cause. This
 getSnapshotBeforeUpdate(prevProps, prevState)
 ```
 
-`getSnapshotBeforeUpdate()` is invoked right before the most recently rendered output is committed to e.g. the DOM. It enables your component to capture some information from the DOM (e.g. scroll position) before it is potentially changed. Any value returned by this lifecycle will be passed as a parameter to `componentDidUpdate()`.
+`getSnapshotBeforeUpdate()` вызывается прямо перед этапом «фиксирования» (например, перед добавлением в DOM). Он позволяет вашему компоненту брать некоторую информацию из DOM (например, положение прокрутки) перед её возможным изменением. Любое значение, возвращаемое этим методом жизненного цикла, будет передано как параметр `componentDidUpdate()`.
 
-This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.
+Это применяется редко, но может быть полезно в таких интерфейсах, как цепочка сообщений в чатах, в которых позиция прокрутки обрабатывается особым образом.
 
-A snapshot value (or `null`) should be returned.
+Значение снимка (или `null`) должно быть возвращено.
 
-For example:
+Например:
 
 `embed:react-component-reference/get-snapshot-before-update.js`
 
-In the above examples, it is important to read the `scrollHeight` property in `getSnapshotBeforeUpdate` because there may be delays between "render" phase lifecycles (like `render`) and "commit" phase lifecycles (like `getSnapshotBeforeUpdate` and `componentDidUpdate`).
+В примерах выше важно получить значение свойства `scrollHeight` в `getSnapshotBeforeUpdate` из-за того, что могут возникать задержки между этапами жизненного цикла «рендер» (например, `render`) и «фиксирование» (например, `getSnapshotBeforeUpdate` и `componentDidUpdate`).
 
 * * *
 
-### Error boundaries {#error-boundaries}
+### Предохранители {#error-boundaries}
 
-[Error boundaries](/docs/error-boundaries.html) are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
+[Предохранители](/docs/error-boundaries.html) – это React-компоненты, которые перехватывают JavaScript-ошибки в любом месте их дочернего дерева компонентов. Затем логируют эти ошибки и отображают запасной интерфейс вместо "поломанного" дерева компонентов. Предохранители отлавливают ошибки при рендере, в методах жизненного цикла и в конструкторах всего дерева под ними.
 
-A class component becomes an error boundary if it defines either (or both) of the lifecycle methods `static getDerivedStateFromError()` or `componentDidCatch()`. Updating state from these lifecycles lets you capture an unhandled JavaScript error in the below tree and display a fallback UI.
+Классовый компонент становится предохранителем, если в нём используются методы жизненного цикла `static getDerivedStateFromError()` и (или) `componentDidCatch()`. Обновление состояния в этом методе жизненного цикла позволяет перехватить необработанную JavaScript-ошибку в дереве ниже и отобразить запасной интерфейс.
 
-Only use error boundaries for recovering from unexpected exceptions; **don't try to use them for control flow.**
+Используйте предохранители только для обработки неожиданных исключений, **не используйте их для управления потоком исполнения в вашем приложении.**
 
-For more details, see [*Error Handling in React 16*](/blog/2017/07/26/error-handling-in-react-16.html).
+Подробнее в разделе [*Предохранители в React 16*](/blog/2017/07/26/error-handling-in-react-16.html).
 
-> Note
-> 
-> Error boundaries only catch errors in the components **below** them in the tree. An error boundary can’t catch an error within itself.
+> Примечание:
+>
+> Предохранители перехватывают ошибки в компонентах **ниже** по дереву. Предохранители не могут поймать ошибку внутри себя.
 
 ### `static getDerivedStateFromError()` {#static-getderivedstatefromerror}
 ```javascript
 static getDerivedStateFromError(error)
 ```
 
-This lifecycle is invoked after an error has been thrown by a descendant component.
-It receives the error that was thrown as a parameter and should return a value to update state.
+Этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка. Он получает ошибку в качестве параметра и возвращает значение для обновления состояния.
 
 ```js{7-10,13-16}
 class ErrorBoundary extends React.Component {
@@ -343,25 +342,24 @@ class ErrorBoundary extends React.Component {
   }
 
   static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
+    // Обновите состояние так, чтобы следующий рендер показал запасной интерфейс.
     return { hasError: true };
   }
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
+      // Здесь можно рендерить запасной интерфейс
       return <h1>Something went wrong.</h1>;
     }
 
-    return this.props.children; 
+    return this.props.children;
   }
 }
 ```
 
-> Note
+> Примечание:
 >
-> `getDerivedStateFromError()` is called during the "render" phase, so side-effects are not permitted.
-For those use cases, use `componentDidCatch()` instead.
+> `getDerivedStateFromError()` вызывается во время этапа "рендера". Поэтому здесь запрещены любые побочные эффекты, но их можно использовать в `componentDidCatch()`.
 
 * * *
 
@@ -371,15 +369,12 @@ For those use cases, use `componentDidCatch()` instead.
 componentDidCatch(error, info)
 ```
 
-This lifecycle is invoked after an error has been thrown by a descendant component.
-It receives two parameters:
-
-1. `error` - The error that was thrown.
-2. `info` - An object with a `componentStack` key containing [information about which component threw the error](/docs/error-boundaries.html#component-stack-traces).
+Этот метод жизненного цикла вызывается после возникновения ошибки у компонента-потомка. Он получает два параметра:
 
+1. `error` - перехваченная ошибка
+2. `info` - объект с ключом `componentStack`, содержащий [информацию о компоненте, в котором произошла ошибка](/docs/error-boundaries.html#component-stack-traces).
 
-`componentDidCatch()` is called during the "commit" phase, so side-effects are permitted.
-It should be used for things like logging errors:
+`componentDidCatch()` вызывается во время этапа "фиксации", поэтому здесь можно использовать побочные эффекты. Метод можно использовать для логирования ошибок.
 
 ```js{12-19}
 class ErrorBoundary extends React.Component {
@@ -389,12 +384,12 @@ class ErrorBoundary extends React.Component {
   }
 
   static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
+    // Обновите состояние так, чтобы следующий рендер показал запасной интерфейс.
     return { hasError: true };
   }
 
   componentDidCatch(error, info) {
-    // Example "componentStack":
+    // Пример "componentStack":
     //   in ComponentThatThrows (created by App)
     //   in ErrorBoundary (created by App)
     //   in div (created by App)
@@ -404,25 +399,25 @@ class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.hasError) {
-      // You can render any custom fallback UI
+      // Здесь можно рендерить запасной интерфейс
       return <h1>Something went wrong.</h1>;
     }
 
-    return this.props.children; 
+    return this.props.children;
   }
 }
 ```
 
-> Note
-> 
-> In the event of an error, you can render a fallback UI with `componentDidCatch()` by calling `setState`, but this will be deprecated in a future release.
-> Use `static getDerivedStateFromError()` to handle fallback rendering instead.
+> Примечание:
+>
+>В случае ошибки вы можете рендерить запасной интерфейс с помощью `componentDidCatch()`, вызвав `setState`. Однако, этот способ скоро будет считаться устаревшим.
+> Используйте `static getDerivedStateFromError()` для рендера резервного интерфейса.
 
 * * *
 
-### Legacy Lifecycle Methods {#legacy-lifecycle-methods}
+### Устаревшие методы жизненного цикла {#legacy-lifecycle-methods}
 
-The lifecycle methods below are marked as "legacy". They still work, but we don't recommend using them in the new code. You can learn more about migrating away from legacy lifecycle methods in [this blog post](/blog/2018/03/27/update-on-async-rendering.html).
+Приведённые ниже методы жизненного цикла устарели. Их не рекомендуется использовать в новом коде, хотя они продолжают работать. Вы можете узнать больше о переходе с устаревших методов жизненного цикла в [блоге](/blog/2018/03/27/update-on-async-rendering.html).
 
 ### `UNSAFE_componentWillMount()` {#unsafe_componentwillmount}
 
@@ -430,15 +425,15 @@ The lifecycle methods below are marked as "legacy". They still work, but we don'
 UNSAFE_componentWillMount()
 ```
 
-> Note
+> Примечание:
 >
-> This lifecycle was previously named `componentWillMount`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+> Этот метод жизненного цикла раньше назывался `componentWillMount`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles).
 
-`UNSAFE_componentWillMount()` is invoked just before mounting occurs. It is called before `render()`, therefore calling `setState()` synchronously in this method will not trigger an extra rendering. Generally, we recommend using the `constructor()` instead for initializing state.
+`UNSAFE_componentWillMount()` вызывается непосредственно перед монтированием. Он вызывается перед `render()`, поэтому синхронный вызов `setState()` в этом методе не вызовет дополнительный рендер. Для инициализации состояния мы рекомендуем использовать `constructor()`.
 
-Avoid introducing any side-effects or subscriptions in this method. For those use cases, use `componentDidMount()` instead.
+Избегайте добавления каких-либо побочных эффектов или подписок в этом методе. Вместо этого используйте `componentDidMount()`.
 
-This is the only lifecycle method called on server rendering.
+Это единственный метод жизненного цикла, вызываемый при серверном рендеринге.
 
 * * *
 
@@ -448,25 +443,25 @@ This is the only lifecycle method called on server rendering.
 UNSAFE_componentWillReceiveProps(nextProps)
 ```
 
-> Note
+> Примечание:
 >
-> This lifecycle was previously named `componentWillReceiveProps`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+> Этот метод жизненного цикла раньше назывался `componentWillReceiveProps`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles).
 
-> Note:
+> Примечание:
 >
-> Using this lifecycle method often leads to bugs and inconsistencies
+> Использование этого метода жизненного цикла часто приводило к багам
 >
-> * If you need to **perform a side effect** (for example, data fetching or an animation) in response to a change in props, use [`componentDidUpdate`](#componentdidupdate) lifecycle instead.
-> * If you used `componentWillReceiveProps` for **re-computing some data only when a prop changes**, [use a memoization helper instead](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
-> * If you used `componentWillReceiveProps` to **"reset" some state when a prop changes**, consider either making a component [fully controlled](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) or [fully uncontrolled with a `key`](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key) instead.
+> * Чтобы **выполнить побочный эффект при изменении пропсов** (например, сетевой запрос или анимацию) используйте [`componentDidUpdate`](#componentdidupdate).
+> * Чтобы **повторно вычислить данные при изменении пропсов** вместо `componentWillReceiveProps` используйте [функцию мемоизации](/blog/2018/06/07/you-probably-dont-need-derived-state.html#what-about-memoization).
+> * Чтобы **«сбросить» некоторое состояние при изменении пропсов** вместо `componentWillReceiveProps` используйте [контролируемые компоненты](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-controlled-component) или [неконтролируемые компоненты с ключом](/blog/2018/06/07/you-probably-dont-need-derived-state.html#recommendation-fully-uncontrolled-component-with-a-key).
 >
-> For other use cases, [follow the recommendations in this blog post about derived state](/blog/2018/06/07/you-probably-dont-need-derived-state.html).
+> Другие рекомендации можно посмотреть [в статье про производное состояние](/blog/2018/06/07/you-probably-dont-need-derived-state.html).
 
-`UNSAFE_componentWillReceiveProps()` is invoked before a mounted component receives new props. If you need to update the state in response to prop changes (for example, to reset it), you may compare `this.props` and `nextProps` and perform state transitions using `this.setState()` in this method.
+`UNSAFE_componentWillReceiveProps()` вызывается до того, как смонтированный компонент получит новые пропсы. Чтобы обновить состояние в ответ на изменение пропсов (например, для его сброса), можно сравнить `this.props` с `nextProps` и обновить состояние в этом методе с помощью `this.setState()`.
 
-Note that if a parent component causes your component to re-render, this method will be called even if props have not changed. Make sure to compare the current and next values if you only want to handle changes.
+Обратите внимание, если родительский компонент заставляет ваш компонент повторно рендериться, метод будет вызываться, даже если пропсы не изменились. Убедитесь, что сравниваете текущие и следующие значения, если вы хотите обрабатывать изменения.
 
-React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props during [mounting](#mounting). It only calls this method if some of component's props may update. Calling `this.setState()` generally doesn't trigger `UNSAFE_componentWillReceiveProps()`.
+Во время [монтирования](#mounting) React не вызывает `UNSAFE_componentWillReceiveProps()` с начальными значениями пропсов. Этот метод вызывается, если некоторые пропсы компонента могут обновиться. Вызов `this.setState()` обычно не вызывает `UNSAFE_componentWillReceiveProps()`.
 
 * * *
 
@@ -476,27 +471,27 @@ React doesn't call `UNSAFE_componentWillReceiveProps()` with initial props durin
 UNSAFE_componentWillUpdate(nextProps, nextState)
 ```
 
-> Note
+> Примечание:
 >
-> This lifecycle was previously named `componentWillUpdate`. That name will continue to work until version 17. Use the [`rename-unsafe-lifecycles` codemod](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles) to automatically update your components.
+> Этот метод жизненного цикла раньше назывался `componentWillUpdate`. По этому названию он будет доступен до 17 версии. Чтобы автоматически обновить компоненты, используйте [`rename-unsafe-lifecycles`](https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles).
 
-`UNSAFE_componentWillUpdate()` is invoked just before rendering when new props or state are being received. Use this as an opportunity to perform preparation before an update occurs. This method is not called for the initial render.
+`UNSAFE_componentWillUpdate()` вызывается непосредственно перед рендером при получении новых пропсов или состояния. В этом методе можно выполнить некоторую подготовку перед обновлением. Этот метод не вызывается при первом рендере.
 
-Note that you cannot call `this.setState()` here; nor should you do anything else (e.g. dispatch a Redux action) that would trigger an update to a React component before `UNSAFE_componentWillUpdate()` returns.
+Внутри этого метода нельзя вызвать `this.setState()`, а также делать какие-либо действия, которые влияют на обновление компонента перед возвратом `UNSAFE_componentWillUpdate()` (например, отправка действия Redux).
 
-Typically, this method can be replaced by `componentDidUpdate()`. If you were reading from the DOM in this method (e.g. to save a scroll position), you can move that logic to `getSnapshotBeforeUpdate()`.
+Обычно этот метод можно заменить на `componentDidUpdate()`. Вы можете использовать `getSnapshotBeforeUpdate()` для работы с DOM (например, запоминать положение прокрутки страницы).
 
-> Note
+> Примечание:
 >
-> `UNSAFE_componentWillUpdate()` will not be invoked if [`shouldComponentUpdate()`](#shouldcomponentupdate) returns false.
+> `UNSAFE_componentWillUpdate()` не вызывается, если [`shouldComponentUpdate()`](#shouldcomponentupdate) возвращает `false`.
 
 * * *
 
-## Other APIs {#other-apis-1}
+## Другие APIs {#other-apis-1}
 
-Unlike the lifecycle methods above (which React calls for you), the methods below are the methods *you* can call from your components.
+В отличие от методов жизненного цикла, представленных выше (React вызывает их сам), методы, приведённые ниже, можно вызывать из компонентов.
 
-There are just two of them: `setState()` and `forceUpdate()`.
+Их всего два: `setState()` и `forceUpdate()`.
 
 ### `setState()` {#setstate}
 
@@ -504,21 +499,21 @@ There are just two of them: `setState()` and `forceUpdate()`.
 setState(updater[, callback])
 ```
 
-`setState()` enqueues changes to the component state and tells React that this component and its children need to be re-rendered with the updated state. This is the primary method you use to update the user interface in response to event handlers and server responses.
+`setState()` добавляет в очередь изменения в состоянии компонента. Также он указывает React, что компонент и его дочерние элементы должны быть повторно отрендерены с обновлённым состоянием. Этот метод используется для обновления интерфейса в ответ на обработчики событий и ответы сервера.
 
-Think of `setState()` as a *request* rather than an immediate command to update the component. For better perceived performance, React may delay it, and then update several components in a single pass. React does not guarantee that the state changes are applied immediately.
+Думайте о `setState()`, как о *запросе*, а не как о команде немедленного обновления компонента. Для увеличения производительности React может задержать его выполнение, а затем обновить несколько компонентов за один проход. React не гарантирует моментальное применение изменений в состоянии.
 
-`setState()` does not always immediately update the component. It may batch or defer the update until later. This makes reading `this.state` right after calling `setState()` a potential pitfall. Instead, use `componentDidUpdate` or a `setState` callback (`setState(updater, callback)`), either of which are guaranteed to fire after the update has been applied. If you need to set the state based on the previous state, read about the `updater` argument below.
+Метод `setState()` не всегда обновляет компонент сразу. Он может группировать или откладывать обновление до следующего раза. Это делает чтение `this.state` сразу после вызова `setState()` потенциальной ловушкой. Вместо этого используйте `componentDidUpdate()` или колбэк `setState()` (`setState(updater, callback)`), каждый из которых гарантированно вызывается после того как было применено обновление. Если вам нужно обновить состояние на основе предыдущего, используйте аргумент `updater`, описанный ниже.
 
-`setState()` will always lead to a re-render unless `shouldComponentUpdate()` returns `false`. If mutable objects are being used and conditional rendering logic cannot be implemented in `shouldComponentUpdate()`, calling `setState()` only when the new state differs from the previous state will avoid unnecessary re-renders.
+`setState()` всегда приводит к повторному рендеру, если только `shouldComponentUpdate()` не возвращает `false`. Если используются мутабельные объекты, и условие рендеринга не может быть реализовано в `shouldComponentUpdate()`, вызывайте `setState()` только при разнице следующего и предыдущего состояния. Это предотвратит ненужные повторные рендеры.
 
-The first argument is an `updater` function with the signature:
+Первым аргументом передаётся функция `updater`, которая имеет следующий вид:
 
 ```javascript
 (state, props) => stateChange
 ```
 
-`state` is a reference to the component state at the time the change is being applied. It should not be directly mutated. Instead, changes should be represented by building a new object based on the input from `state` and `props`. For instance, suppose we wanted to increment a value in state by `props.step`:
+`state` – ссылка на состояние компонента при изменении. Объект состояния не должен мутировать. Изменения должны проявляться в виде нового объекта на основе входных данных из `state` и` props`. Предположим, что мы хотели бы увеличить значение состояния с помощью `props.step`:
 
 ```javascript
 this.setState((state, props) => {
@@ -526,23 +521,23 @@ this.setState((state, props) => {
 });
 ```
 
-Both `state` and `props` received by the updater function are guaranteed to be up-to-date. The output of the updater is shallowly merged with `state`.
+Как `state`, так и` props`, полученные функцией обновления, гарантированно будут обновлены. Результат функции поверхностно объединяется с `state`.
 
-The second parameter to `setState()` is an optional callback function that will be executed once `setState` is completed and the component is re-rendered. Generally we recommend using `componentDidUpdate()` for such logic instead.
+Второй параметр в `setState()` - дополнительный колбэк, который выполняется после того, как исполнится `setState` и произойдёт повторный рендер компонента. Мы рекомендуем использовать такой подход в `componentDidUpdate()`.
 
-You may optionally pass an object as the first argument to `setState()` instead of a function:
+В качестве первого аргумента `setState()`, вместо функции, вы можете передать объект:
 
 ```javascript
 setState(stateChange[, callback])
 ```
 
-This performs a shallow merge of `stateChange` into the new state, e.g., to adjust a shopping cart item quantity:
+В нём образуется новое состояние после поверхностного объединения с `stateChange`. Например, установим количество товаров в корзине:
 
 ```javascript
 this.setState({quantity: 2})
 ```
 
-This form of `setState()` is also asynchronous, and multiple calls during the same cycle may be batched together. For example, if you attempt to increment an item quantity more than once in the same cycle, that will result in the equivalent of:
+Эта форма записи `setState()` также асинхронна, и несколько вызовов в течение одного цикла могут быть объединены вместе. Например, вам нужно увеличить количество элементов несколько раз в одном цикле. Результат этого можно представить так:
 
 ```javaScript
 Object.assign(
@@ -553,7 +548,7 @@ Object.assign(
 )
 ```
 
-Subsequent calls will override values from previous calls in the same cycle, so the quantity will only be incremented once. If the next state depends on the current state, we recommend using the updater function form, instead:
+Последующие вызовы будут переопределять значения из предыдущих вызовов того же цикла. Из-за этого количество увеличится только один раз. В случае, если следующее состояние зависит от текущего, мы рекомендуем использовать форму функции обновления:
 
 ```js
 this.setState((state) => {
@@ -561,11 +556,11 @@ this.setState((state) => {
 });
 ```
 
-For more detail, see:
+Для более подробной информации смотрите:
 
-* [State and Lifecycle guide](/docs/state-and-lifecycle.html)
-* [In depth: When and why are `setState()` calls batched?](https://stackoverflow.com/a/48610973/458193)
-* [In depth: Why isn't `this.state` updated immediately?](https://github.com/facebook/react/issues/11527#issuecomment-360199710)
+* [Руководство по состоянию и жизненному циклу](/docs/state-and-lifecycle.html)
+* [Продвинутый уровень: когда и почему группируются вызовы `setState()`?](https://stackoverflow.com/a/48610973/458193)
+* [Продвинутый уровень: почему `this.state` не обновляется сразу?](https://github.com/facebook/react/issues/11527#issuecomment-360199710)
 
 * * *
 
@@ -575,19 +570,19 @@ For more detail, see:
 component.forceUpdate(callback)
 ```
 
-By default, when your component's state or props change, your component will re-render. If your `render()` method depends on some other data, you can tell React that the component needs re-rendering by calling `forceUpdate()`.
+По умолчанию при изменении состояния компонента или пропсов, происходит повторный рендер. Если ваш метод `render()` зависит от некоторых других данных, вы можете указать React необходимость в повторном рендере, вызвав `forceUpdate()`.
 
-Calling `forceUpdate()` will cause `render()` to be called on the component, skipping `shouldComponentUpdate()`. This will trigger the normal lifecycle methods for child components, including the `shouldComponentUpdate()` method of each child. React will still only update the DOM if the markup changes.
+Вызов `forceUpdate()` приведёт к выполнению метода `render()` в компоненте, пропуская `shouldComponentUpdate()`. Это вызовет обычные методы жизненного цикла для дочерних компонентов, включая `shouldComponentUpdate()` каждого дочернего компонента. React по-прежнему будет обновлять DOM только в случае изменения разметки.
 
-Normally you should try to avoid all uses of `forceUpdate()` and only read from `this.props` and `this.state` in `render()`.
+Чаще всего, `forceUpdate()` не используется. Вместо этого используются в `render()` данные из `this.props` и `this.state`.
 
 * * *
 
-## Class Properties {#class-properties-1}
+## Свойства класса {#class-properties-1}
 
 ### `defaultProps` {#defaultprops}
 
-`defaultProps` can be defined as a property on the component class itself, to set the default props for the class. This is used for undefined props, but not for null props. For example:
+`defaultProps` можно определить как свойство самого класса компонента, которое позволяет установить пропсы класса по умолчанию. Это используется для неопределённых (`undefined`) пропсов, но не для пропсов со значением `null`. Например:
 
 ```js
 class CustomButton extends React.Component {
@@ -595,11 +590,11 @@ class CustomButton extends React.Component {
 }
 
 CustomButton.defaultProps = {
-  color: 'blue'
+  color: 'синий'
 };
 ```
 
-If `props.color` is not provided, it will be set by default to `'blue'`:
+Если `props.color` не передаётся, по умолчанию установится `'синий'`:
 
 ```js
   render() {
@@ -607,7 +602,7 @@ If `props.color` is not provided, it will be set by default to `'blue'`:
   }
 ```
 
-If `props.color` is set to null, it will remain null:
+Если `props.color` имеет значение `null`, оно останется `null`:
 
 ```js
   render() {
@@ -619,24 +614,24 @@ If `props.color` is set to null, it will remain null:
 
 ### `displayName` {#displayname}
 
-The `displayName` string is used in debugging messages. Usually, you don't need to set it explicitly because it's inferred from the name of the function or class that defines the component. You might want to set it explicitly if you want to display a different name for debugging purposes or when you create a higher-order component, see [Wrap the Display Name for Easy Debugging](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging) for details.
+Строка `displayName` используется в сообщениях для отладки. Обычно вам не нужно её явно указывать. По умолчанию используется имя функции или класса, указанное при определении компонента. Если вам нужно установить его явно, например, для отладки или создания компонента высшего порядка, посмотрите раздел [Обертка отображаемого имени для простой отладки](/docs/higher-order-components.html#convention-wrap-the-display-name-for-easy-debugging).
 
 * * *
 
-## Instance Properties {#instance-properties-1}
+## Свойства экземпляра {#instance-properties-1}
 
 ### `props` {#props}
 
-`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/docs/components-and-props.html) for an introduction to props.
+`this.props` содержит свойства, которые были определены тем, кто вызывает этот компонент. Подробнее об этом можно узнать в разделе [Компоненты и пропсы](/docs/components-and-props.html)
 
-In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.
+Существует специальный проп `this.props.children`, который обычно определяется дочерними тегами в JSX-выражении, а не в самом теге.
 
 ### `state` {#state}
 
-The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
+Состояние содержит данные, специфичные для этого компонента. Они могут измениться со временем. Состояние определяется пользователем и должно быть простым объектом JavaScript.
 
-If some value isn't used for rendering or data flow (for example, a timer ID), you don't have to put it in the state. Such values can be defined as fields on the component instance.
+Вам не нужно вставлять в состояние значение, если оно не используется для рендера или потока данных (например, идентификатор таймера). Такие значения можно определить как поля экземпляра компонента.
 
-See [State and Lifecycle](/docs/state-and-lifecycle.html) for more information about the state.
+Дополнительную информацию можно найти в разделе [Состояние и жизненный цикл](/docs/state-and-lifecycle.html).
 
-Never mutate `this.state` directly, as calling `setState()` afterwards may replace the mutation you made. Treat `this.state` as if it were immutable.
+Никогда не мутируйте `this.state` напрямую, так как более поздний вызов `setState()` может перезаписать эту мутацию. Относитесь к `this.state` как к иммутабельному объекту.
diff --git a/content/docs/reference-test-renderer.md b/content/docs/reference-test-renderer.md
index 473dfb7ec..3de2d5752 100644
--- a/content/docs/reference-test-renderer.md
+++ b/content/docs/reference-test-renderer.md
@@ -38,7 +38,7 @@ console.log(testRenderer.toJSON());
 //   children: [ 'Facebook' ] }
 ```
 
-You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](http://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
+You can use Jest's snapshot testing feature to automatically save a copy of the JSON tree to a file and check in your tests that it hasn't changed: [Learn more about it](https://facebook.github.io/jest/blog/2016/07/27/jest-14.html).
 
 You can also traverse the output to find specific nodes and make assertions about them.
 
@@ -110,7 +110,7 @@ Create a `TestRenderer` instance with the passed React element. It doesn't use t
 testRenderer.toJSON()
 ```
 
-Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](http://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
+Return an object representing the rendered tree. This tree only contains the platform-specific nodes like `<div>` or `<View>` and their props, but doesn't contain any user-written components. This is handy for [snapshot testing](https://facebook.github.io/jest/docs/en/snapshot-testing.html#snapshot-testing-with-jest).
 
 ### `testRenderer.toTree()` {#testrenderertotree}
 
diff --git a/content/docs/rendering-elements.md b/content/docs/rendering-elements.md
index 34bb62b7c..de4f5ad52 100644
--- a/content/docs/rendering-elements.md
+++ b/content/docs/rendering-elements.md
@@ -1,6 +1,6 @@
 ---
 id: rendering-elements
-title: Rendering Elements
+title: Рендеринг элементов
 permalink: docs/rendering-elements.html
 redirect_from:
   - "docs/displaying-data.html"
@@ -8,68 +8,68 @@ prev: introducing-jsx.html
 next: components-and-props.html
 ---
 
-Elements are the smallest building blocks of React apps.
+Элементы — мельчайшие кирпичики React-приложений.
 
-An element describes what you want to see on the screen:
+Элемент описывает то, что вы хотите увидеть на экране:
 
 ```js
 const element = <h1>Hello, world</h1>;
 ```
 
-Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
+В отличие от DOM-элементов, элементы React — это простые объекты, не отнимающие много ресурсов. React DOM обновляет DOM, чтобы он соответствовал переданным React-элементам.
 
->**Note:**
+>**Примечание:**
 >
->One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
+>Элементы можно перепутать с более известной концепцией «компонентов». С компонентами мы ознакомимся в [следующей главе](/docs/components-and-props.html). Элементы — это то, «из чего сделаны» компоненты, и мы рекомендуем вам дочитать эту главу, прежде чем двигаться дальше.
 
-## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
+## Рендеринг элемента в DOM {#rendering-an-element-into-the-dom}
 
-Let's say there is a `<div>` somewhere in your HTML file:
+Допустим, в вашем HTML-файле есть `<div>`:
 
 ```html
 <div id="root"></div>
 ```
 
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
+Мы назовём его «корневым» узлом DOM, так как React DOM будет управлять его содержимым. 
 
-Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
+Обычно в приложениях, написанных полностью на React, есть только один корневой элемент. При встраивании React в существующее приложение вы можете рендерить в столько независимых корневых элементов, сколько посчитаете нужным.
 
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
+Для рендеринга React-элемента в корневой узел DOM, вызовите `ReactDOM.render()` с React-элементом и корневым DOM узлом в качестве аргументов:
 
 `embed:rendering-elements/render-an-element.js`
 
 [](codepen://rendering-elements/render-an-element)
 
-It displays "Hello, world" on the page.
+На странице будет написано "Hello, world".
 
-## Updating the Rendered Element {#updating-the-rendered-element}
+## Обновление элементов на странице {#updating-the-rendered-element}
 
-React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
+Элементы React [иммутабельны](https://ru.wikipedia.org/wiki/%D0%9D%D0%B5%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D1%8F%D0%B5%D0%BC%D1%8B%D0%B9_%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82). После создания элемента, нельзя изменить его потомков или атрибуты. Элемент похож на кадр в фильме: он отражает состояние интерфейса в конкретный момент времени.
 
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
+Пока что, мы знаем только один способ обновить интерфейс — это создать новый элемент и передать его в `ReactDOM.render()`.
 
-Consider this ticking clock example:
+Рассмотрим пример с часами:
 
 `embed:rendering-elements/update-rendered-element.js`
 
 [](codepen://rendering-elements/update-rendered-element)
 
-It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
+В этом примере `ReactDOM.render()` вызывается каждую секунду с помощью колбэка [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval).
 
->**Note:**
+>**Примечание:**
 >
->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
+>На практике большинство React-приложений вызывают `ReactDOM.render()` только один раз. В следующем разделе вы узнаете, как можно обновлять интерфейс при помощи [компонента с состоянием](/docs/state-and-lifecycle.html).
 >
->We recommend that you don't skip topics because they build on each other.
+>Мы рекомендуем не пропускать главы, поскольку каждая следующая глава опирается на знания из предыдущей.
 
-## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
+## React обновляет только то, что необходимо {#react-only-updates-whats-necessary}
 
-React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
+React DOM сравнивает элемент и его дочернее дерево с предыдущей версией и вносит в DOM только минимально необходимые изменения.
 
-You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
+Вы можете убедиться в этом на [последнем примере](codepen://rendering-elements/update-rendered-element) с помощью инструментов разработки в браузере:
 
-![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
+![В DOM видно частичное обновление](../images/docs/granular-dom-updates.gif)
 
-Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
+Несмотря на то, что мы создаем элемент, описывающий всё UI-дерево, каждую секунду React DOM изменяет только текстовый узел, содержимое которого изменилось.
 
-In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
+Проще описать, как интерфейс выглядит в конкретный момент, чем как он изменяется с течением времени. По нашему опыту, такой подход позволяет избавиться от целого класса ошибок.
diff --git a/content/docs/state-and-lifecycle.md b/content/docs/state-and-lifecycle.md
index dd5e2238c..39f14424b 100644
--- a/content/docs/state-and-lifecycle.md
+++ b/content/docs/state-and-lifecycle.md
@@ -1,6 +1,6 @@
 ---
 id: state-and-lifecycle
-title: State and Lifecycle
+title: Состояние и жизненный цикл
 permalink: docs/state-and-lifecycle.html
 redirect_from:
   - "docs/interactivity-and-dynamic-uis.html"
@@ -8,16 +8,16 @@ prev: components-and-props.html
 next: handling-events.html
 ---
 
-This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
+На этой странице представлены понятия «состояние» (state) и «жизненный цикл» (lifecycle) React-компонентов. Подробный [справочник API компонентов находится по этой ссылке](/docs/react-component.html).
 
-Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
+В качестве примера рассмотрим идущие часы из [предыдущего раздела](/docs/rendering-elements.html#updating-the-rendered-element). В главе [Рендeринг элементов](/docs/rendering-elements.html#rendering-an-element-into-the-dom) мы научились обновлять UI только одним способом — вызовом `ReactDOM.render()`:
 
 ```js{8-11}
 function tick() {
   const element = (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {new Date().toLocaleTimeString()}.</h2>
+      <h1>Привет, мир!</h1>
+      <h2>Сейчас {new Date().toLocaleTimeString()}.</h2>
     </div>
   );
   ReactDOM.render(
@@ -29,18 +29,18 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/gwoJZk?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/gwoJZk?editors=0010)
 
-In this section, we will learn how to make the `Clock` component truly reusable and encapsulated. It will set up its own timer and update itself every second.
+В этой главе мы узнаем, как инкапсулировать и обеспечить многократное использование компонента `Clock`. Компонент самостоятельно установит свой собственный таймер и будет обновляться раз в секунду.
 
-We can start by encapsulating how the clock looks:
+Для начала, извлечём компонент, показывающий время:
 
 ```js{3-6,12}
 function Clock(props) {
   return (
     <div>
-      <h1>Hello, world!</h1>
-      <h2>It is {props.date.toLocaleTimeString()}.</h2>
+      <h1>Привет, мир!</h1>
+      <h2>Сейчас {props.date.toLocaleTimeString()}.</h2>
     </div>
   );
 }
@@ -55,11 +55,11 @@ function tick() {
 setInterval(tick, 1000);
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/dpdoYR?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/dpdoYR?editors=0010)
 
-However, it misses a crucial requirement: the fact that the `Clock` sets up a timer and updates the UI every second should be an implementation detail of the `Clock`.
+Проблема в том, что компонент `Clock` не обновляет себя каждую секунду автоматически. Хотелось бы спрятать логику, управляющую таймером, внутри самого компонента `Clock`.
 
-Ideally we want to write this once and have the `Clock` update itself:
+В идеале мы бы хотели реализовать `Clock` таким образом, чтобы компонент сам себя обновлял:
 
 ```js{2}
 ReactDOM.render(
@@ -68,65 +68,66 @@ ReactDOM.render(
 );
 ```
 
-To implement this, we need to add "state" to the `Clock` component.
+Для этого добавим так называемое «состояние» (state) в компонент `Clock`.
 
-State is similar to props, but it is private and fully controlled by the component.
+«Состояние» очень похоже на уже знакомые нам пропсы, отличие в том, что состояние контролируется и доступно только конкретному компоненту.
 
-We [mentioned before](/docs/components-and-props.html#functional-and-class-components) that components defined as classes have some additional features. Local state is exactly that: a feature available only to classes.
+Мы [уже упоминали](/docs/components-and-props.html#functional-and-class-components), что классовые компоненты обладают дополнительными способностями. Локальное «состояние» — одна из таких способностей, которое доступно только классовым компнентам.
 
-## Converting a Function to a Class {#converting-a-function-to-a-class}
+## Преобразование функции в класс {#converting-a-function-to-a-class}
 
-You can convert a function component like `Clock` to a class in five steps:
+Давайте преобразуем функциональный компонент `Clock` в классовый компонент за 5 шагов:
 
-1. Create an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes), with the same name, that extends `React.Component`.
+1. Создаем [ES6-класс](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes) с таким же именем, указываем `React.Component` в качестве родительского класса
 
-2. Add a single empty method to it called `render()`.
+2. Добавим в класс пустой метод `render()`
 
-3. Move the body of the function into the `render()` method.
+3. Перенесем тело функции в метод `render()`
 
-4. Replace `props` with `this.props` in the `render()` body.
+4. Заменим `props` на `this.props` в теле `render()`
+
+5. Удалим оставшееся пустое объявление функции
 
-5. Delete the remaining empty function declaration.
 
 ```js
 class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.props.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.props.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRGpo?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/zKRGpo?editors=0010)
 
-`Clock` is now defined as a class rather than a function.
+Теперь `Clock` определён как класс, а не функция.
 
-The `render` method will be called each time an update happens, but as long as we render `<Clock />` into the same DOM node, only a single instance of the `Clock` class will be used. This lets us use additional features such as local state and lifecycle methods.
+Метод `render` будет вызываться каждый раз, когда происходит обновление. Так как мы рендерим `<Clock />` в один и тот же DOM-контейнер, мы используем единственный экземпляр класса `Clock` — поэтому мы можем задействовать внутреннее состояние и методы жизненного цикла.
 
-## Adding Local State to a Class {#adding-local-state-to-a-class}
+## Добавим локальное состояния в класс {#adding-local-state-to-a-class}
 
-We will move the `date` from props to state in three steps:
+Переместим `date` из пропсов в состояние в три этапа:
 
-1) Replace `this.props.date` with `this.state.date` in the `render()` method:
+1) Заменим `this.props.date` на `this.state.date` в методе `render()`:
 
 ```js{6}
 class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-2) Add a [class constructor](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes#Constructor) that assigns the initial `this.state`:
+2) Добавим [конструктор класса](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes#Constructor), в котором укажем начальное состояние в переменной `this.state`:
 
 ```js{4}
 class Clock extends React.Component {
@@ -138,15 +139,16 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-Note how we pass `props` to the base constructor:
+Обратите внимание, что мы передаём `props` базовому (родительскому) конструктору:
+
 
 ```js{2}
   constructor(props) {
@@ -155,9 +157,9 @@ Note how we pass `props` to the base constructor:
   }
 ```
 
-Class components should always call the base constructor with `props`.
+Классовые компоненты всегда должны вызывать базовый конструктор с агрументом `props`.
 
-3) Remove the `date` prop from the `<Clock />` element:
+3) Удалим проп `date` из элемента `<Clock />`:
 
 ```js{2}
 ReactDOM.render(
@@ -166,9 +168,9 @@ ReactDOM.render(
 );
 ```
 
-We will later add the timer code back to the component itself.
+Позже мы вернем код таймера обратно в компонент.
 
-The result looks like this:
+Результат выглядит следующим образом:
 
 ```js{2-5,11,18}
 class Clock extends React.Component {
@@ -180,8 +182,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -193,19 +195,19 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/KgQpJd?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/KgQpJd?editors=0010)
 
-Next, we'll make the `Clock` set up its own timer and update itself every second.
+Теперь осталось только установить собственный таймер внутри `Clock` и обновлять компонент каждую секунду.
 
-## Adding Lifecycle Methods to a Class {#adding-lifecycle-methods-to-a-class}
+## Добавим методы жизненного цикла в класс {#adding-lifecycle-methods-to-a-class}
 
-In applications with many components, it's very important to free up resources taken by the components when they are destroyed.
+В приложениях с множеством компонентов очень важно освобождать используемые системные ресурсы когда компоненты удаляются.
 
-We want to [set up a timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) whenever the `Clock` is rendered to the DOM for the first time. This is called "mounting" in React.
+Первоначальный рендеринг компонента в DOM называется «монтирование» (mounting). Нам нужно [устанавливать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) всякий раз, когда это происходит.
 
-We also want to [clear that timer](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) whenever the DOM produced by the `Clock` is removed. This is called "unmounting" in React.
+Каждый раз когда DOM-узел, созданный компонентом, удаляется, просходит «размонтирование» (unmounting). Чтобы избежать утечки ресурсов, мы будем [сбрасывать таймер](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/clearInterval) при каждом «размонтировании».
 
-We can declare special methods on the component class to run some code when a component mounts and unmounts:
+Объявим специальные методы, которые компонент будет вызывать при монтировании и размонтировании:
 
 ```js{7-9,11-13}
 class Clock extends React.Component {
@@ -225,17 +227,17 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
 }
 ```
 
-These methods are called "lifecycle methods".
+Эти методы называются «методами жизненного цикла» (lifecycle methods).
 
-The `componentDidMount()` method runs after the component output has been rendered to the DOM. This is a good place to set up a timer:
+Метод `componentDidMount()` запускается после того, как компонент отрендерился в DOM — здесь мы и установим таймер:
 
 ```js{2-5}
   componentDidMount() {
@@ -246,11 +248,11 @@ The `componentDidMount()` method runs after the component output has been render
   }
 ```
 
-Note how we save the timer ID right on `this`.
+Обратите внимание, что мы сохраняем ID таймера в `this`.
 
-While `this.props` is set up by React itself and `this.state` has a special meaning, you are free to add additional fields to the class manually if you need to store something that doesn’t participate in the data flow (like a timer ID).
+Поля `this.props` и `this.state` в классах особенные, и их устанавливает сам React. Вы можете вручную добавить новые поля, если компоненту нужно хранить дополнительную информацию (например, ID таймера).
 
-We will tear down the timer in the `componentWillUnmount()` lifecycle method:
+Теперь нам осталось сбросить таймер в методе жизненного цикла `componentWillUnmount()`:
 
 ```js{2}
   componentWillUnmount() {
@@ -258,9 +260,9 @@ We will tear down the timer in the `componentWillUnmount()` lifecycle method:
   }
 ```
 
-Finally, we will implement a method called `tick()` that the `Clock` component will run every second.
+Наконец, реализуем метод `tick()`. Он запускается таймером каждую секунду и вызывает `this.setState()`.
 
-It will use `this.setState()` to schedule updates to the component local state:
+`this.setState()` планирует обновление внутреннего состояния компонента:
 
 ```js{18-22}
 class Clock extends React.Component {
@@ -289,8 +291,8 @@ class Clock extends React.Component {
   render() {
     return (
       <div>
-        <h1>Hello, world!</h1>
-        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+        <h1>Привет, мир!</h1>
+        <h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
       </div>
     );
   }
@@ -302,72 +304,72 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/amqdNA?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/amqdNA?editors=0010)
 
-Now the clock ticks every second.
+Теперь часы обновляются каждую секунду.
 
-Let's quickly recap what's going on and the order in which the methods are called:
+Давайте рассмотрим наше решение и разберём порядок, в котором вызываются методы:
 
-1) When `<Clock />` is passed to `ReactDOM.render()`, React calls the constructor of the `Clock` component. Since `Clock` needs to display the current time, it initializes `this.state` with an object including the current time. We will later update this state.
+1) Когда мы передаём `<Clock />` в `ReactDOM.render()`, React вызывает конструктор компонента. `Clock` должен отображать текущее время, поэтому мы задаем начальное состояние `this.state` объектом с текущим временем.
 
-2) React then calls the `Clock` component's `render()` method. This is how React learns what should be displayed on the screen. React then updates the DOM to match the `Clock`'s render output.
+2) React вызывает метод `render()` компонента `Clock`. Таким образом React узнаёт, что отобразить на экране. Далее, React обновляет DOM так, чтобы он соответствовал выводу рендера `Clock`.
 
-3) When the `Clock` output is inserted in the DOM, React calls the `componentDidMount()` lifecycle method. Inside it, the `Clock` component asks the browser to set up a timer to call the component's `tick()` method once a second.
+3) Как только вывод рендера `Clock` вставлен в DOM, React вызывает метод жизненного цикла `componentDidMount()`. Внутри него компонент `Clock` указывает браузеру установить таймер, который будет вызывать `tick()` раз в секунду.
 
-4) Every second the browser calls the `tick()` method. Inside it, the `Clock` component schedules a UI update by calling `setState()` with an object containing the current time. Thanks to the `setState()` call, React knows the state has changed, and calls the `render()` method again to learn what should be on the screen. This time, `this.state.date` in the `render()` method will be different, and so the render output will include the updated time. React updates the DOM accordingly.
+4) Таймер вызывает `tick()` ежесекундно. Внутри `tick()` мы просим React обновить состояние компонента, вызывая `setState()` с текущим временем. React реагирует на изменение состояния и снова запускает `render()`. На этот раз `this.state.date` в методе `render()` содержит новое значение, поэтому React заменит DOM. Таким образом компонент `Clock` каждую секунду обновляет UI.
 
-5) If the `Clock` component is ever removed from the DOM, React calls the `componentWillUnmount()` lifecycle method so the timer is stopped.
+5) Если компонент `Clock` когда-либо удалится из DOM, React вызовет метод жизненного цикла `componentWillUnmount()` и сбросит таймер.
 
-## Using State Correctly {#using-state-correctly}
+## Как правильно использовать состояние {#using-state-correctly}
 
-There are three things you should know about `setState()`.
+Важно знать три детали о правильном применении `setState()`.
 
-### Do Not Modify State Directly {#do-not-modify-state-directly}
+### Не изменяйте состояние напрямую {#do-not-modify-state-directly}
 
-For example, this will not re-render a component:
+В следующем примере повторного рендера не происходит:
 
 ```js
-// Wrong
+// Неправильно
 this.state.comment = 'Hello';
 ```
 
-Instead, use `setState()`:
+Вместо этого используйте `setState()`:
 
 ```js
-// Correct
+// Правильно
 this.setState({comment: 'Hello'});
 ```
 
-The only place where you can assign `this.state` is the constructor.
+Конструктор — это единственное место, где вы можете присвоить значение `this.state` напрямую.
 
-### State Updates May Be Asynchronous {#state-updates-may-be-asynchronous}
+### Обновления состояния могут быть асинхронными {#state-updates-may-be-asynchronous}
 
-React may batch multiple `setState()` calls into a single update for performance.
+React может сгруппировать несколько вызовов `setState()` в одно обновление для улучшения производительности.
 
-Because `this.props` and `this.state` may be updated asynchronously, you should not rely on their values for calculating the next state.
+Поскольку `this.props` и `this.state` могут обновляться асинхронно, вы не должны полагаться на их текущее значение для вычисления следующего состояния.
 
-For example, this code may fail to update the counter:
+Например, следующий код может не обновить счётчик:
 
 ```js
-// Wrong
+// Неправильно
 this.setState({
   counter: this.state.counter + this.props.increment,
 });
 ```
 
-To fix it, use a second form of `setState()` that accepts a function rather than an object. That function will receive the previous state as the first argument, and the props at the time the update is applied as the second argument:
+Правильно будет использовать второй вариант вызова `setState()`, который принимает функцию, а не объект. Эта функция получит предыдущее состояние в качестве первого аргумента и значения пропсов непосредственно во время обновления в качестве второго аргумента:
 
 ```js
-// Correct
+// Правильно
 this.setState((state, props) => ({
   counter: state.counter + props.increment
 }));
 ```
 
-We used an [arrow function](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) above, but it also works with regular functions:
+В данном примере мы использовали [стрелочную функцию](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions), но можно использовать и обычные функции:
 
 ```js
-// Correct
+// Правильно
 this.setState(function(state, props) {
   return {
     counter: state.counter + props.increment
@@ -375,11 +377,11 @@ this.setState(function(state, props) {
 });
 ```
 
-### State Updates are Merged {#state-updates-are-merged}
+### Обновления состояния объединяются {#state-updates-are-merged}
 
-When you call `setState()`, React merges the object you provide into the current state.
+Когда мы вызываем `setState()`, React объединит аргумент (новое состояние) c текущим состоянием.
 
-For example, your state may contain several independent variables:
+Например, состояние может состоять из нескольких независимых полей:
 
 ```js{4,5}
   constructor(props) {
@@ -391,7 +393,7 @@ For example, your state may contain several independent variables:
   }
 ```
 
-Then you can update them independently with separate `setState()` calls:
+Их можно обновлять по отдельности с помощью отдельных вызовов `setState()`:
 
 ```js{4,10}
   componentDidMount() {
@@ -409,41 +411,41 @@ Then you can update them independently with separate `setState()` calls:
   }
 ```
 
-The merging is shallow, so `this.setState({comments})` leaves `this.state.posts` intact, but completely replaces `this.state.comments`.
+Состояния объединяются поверхностно, поэтому вызов `this.setState({comments})` оставляет `this.state.posts` нетронутым, но полностью заменяет `this.state.comments`.
 
-## The Data Flows Down {#the-data-flows-down}
+## Однонаправленный поток данных {#the-data-flows-down}
 
-Neither parent nor child components can know if a certain component is stateful or stateless, and they shouldn't care whether it is defined as a function or a class.
+В иерархии компонентов, ни родительский, ни дочерние компоненты не знают, задано ли состояние другого компонента. Также не важно, как был создан определенный компонент — с помощью функции или класса. 
 
-This is why state is often called local or encapsulated. It is not accessible to any component other than the one that owns and sets it.
+Состояние часто называют «локальным», «внутренним» или инкапсулированным. Оно доступно только для самого компонента и скрыто от других.
 
-A component may choose to pass its state down as props to its child components:
+Компонент может передать своё состояние вниз по дереву в виде пропсов дочерних компонентов:
 
 ```js
-<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
+<h2>Сейчас {this.state.date.toLocaleTimeString()}.</h2>
 ```
 
-This also works for user-defined components:
+Своё состояние можно передать и другому пользовательскому компоненту:
 
 ```js
 <FormattedDate date={this.state.date} />
 ```
 
-The `FormattedDate` component would receive the `date` in its props and wouldn't know whether it came from the `Clock`'s state, from the `Clock`'s props, or was typed by hand:
+Компонент `FormattedDate` получает `date` через пропсы, но он не знает, откуда они взялись изначально — из состояния `Clock`, пропсов `Clock` или просто JavaScript-выражения:
 
 ```js
 function FormattedDate(props) {
-  return <h2>It is {props.date.toLocaleTimeString()}.</h2>;
+  return <h2>Сейчас {props.date.toLocaleTimeString()}.</h2>;
 }
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/zKRqNB?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/zKRqNB?editors=0010)
 
-This is commonly called a "top-down" or "unidirectional" data flow. Any state is always owned by some specific component, and any data or UI derived from that state can only affect components "below" them in the tree.
+Этот процесс называется «нисходящим» ("top-down") или «однонаправленным» ("unidirectional") потоком данных. Состояние всегда принадлежит определённому компоненту, а любые производные этого состояния могут влиять только на компоненты, находящиеся «ниже» в дереве компонентов.
 
-If you imagine a component tree as a waterfall of props, each component's state is like an additional water source that joins it at an arbitrary point but also flows down.
+Если представить иерархию компонентов как водопад пропсов, то состояние каждого компонента похоже на дополнительный источник, который сливается с водопадом в произвольной точке, но также течёт вниз.
 
-To show that all components are truly isolated, we can create an `App` component that renders three `<Clock>`s:
+Чтобы показать, что все компоненты действительно изолированы, создадим компонент `App`, который рендерит три компонента `<Clock>`:
 
 ```js{4-6}
 function App() {
@@ -462,8 +464,8 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](http://codepen.io/gaearon/pen/vXdGmd?editors=0010)
+[**Посмотреть на CodePen**](https://codepen.io/gaearon/pen/vXdGmd?editors=0010)
 
-Each `Clock` sets up its own timer and updates independently.
+У каждого компонента `Clock` есть собственное состояние таймера, которое обновляется независимо от других компонентов.
 
-In React apps, whether a component is stateful or stateless is considered an implementation detail of the component that may change over time. You can use stateless components inside stateful components, and vice versa.
+В React-приложениях, имеет ли компонент состояние или нет — это внутренняя деталь реализации компонента, которая может меняться со временем. Можно использовать компоненты без состояния в компонентах с состоянием, и наоборот.
diff --git a/content/docs/static-type-checking.md b/content/docs/static-type-checking.md
index b01b92fec..074e7f139 100644
--- a/content/docs/static-type-checking.md
+++ b/content/docs/static-type-checking.md
@@ -2,7 +2,7 @@
 id: static-type-checking
 title: Static Type Checking
 permalink: docs/static-type-checking.html
-prev: typechecking-with-prototypes.html
+prev: typechecking-with-proptypes.html
 next: refs-and-the-dom.html
 ---
 
@@ -216,10 +216,18 @@ Congrats! You've installed the latest version of TypeScript into your project. I
 ```
 
 ### Configuring the TypeScript Compiler {#configuring-the-typescript-compiler}
-The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file run:
+The compiler is of no help to us until we tell it what to do. In TypeScript, these rules are defined in a special file called `tsconfig.json`. To generate this file:
+
+If you use [Yarn](https://yarnpkg.com/), run:
+
+```bash
+yarn run tsc --init
+```
+
+If you use [npm](https://www.npmjs.com/), run:
 
 ```bash
-tsc --init
+npx tsc --init
 ```
 
 Looking at the now generated `tsconfig.json`, you can see that there are many options you can use to configure the compiler. For a detailed description of all the options, check [here](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html).
@@ -324,4 +332,4 @@ JetBrains develops and maintains several tools specifically for the React commun
 
 ## Other Languages {#other-languages}
 
-Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](http://fable.io) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
+Note there are other statically typed languages that compile to JavaScript and are thus React compatible. For example, [F#/Fable](https://fable.io/) with [elmish-react](https://elmish.github.io/react). Check out their respective sites for more information, and feel free to add more statically typed languages that work with React to this page!
diff --git a/content/docs/strict-mode.md b/content/docs/strict-mode.md
index 8d2752b35..e803a32d4 100644
--- a/content/docs/strict-mode.md
+++ b/content/docs/strict-mode.md
@@ -57,7 +57,7 @@ React used to support `findDOMNode` to search the tree for a DOM node given a cl
 
 `findDOMNode` can also be used on class components but this was breaking abstraction levels by allowing a parent to demand that certain children was rendered. It creates a refactoring hazard where you can't change the implementation details of a component because a parent might be reaching into its DOM node. `findDOMNode` only returns the first child, but with the use of Fragments, it is possible for a component to render multiple DOM nodes. `findDOMNode` is a one time read API. It only gave you an answer when you asked for it. If a child component renders a different node, there is no way to handle this change. Therefore `findDOMNode` only worked if components always return a single DOM node that never changes.
 
-You can instead make this explicit by pass a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
+You can instead make this explicit by passing a ref to your custom component and pass that along to the DOM using [ref forwarding](/docs/forwarding-refs.html#forwarding-refs-to-dom-components).
 
 You can also add a wrapper DOM node in your component and attach a ref directly to it.
 
diff --git a/content/docs/thinking-in-react.md b/content/docs/thinking-in-react.md
index 3e054806a..feb8ae6c6 100644
--- a/content/docs/thinking-in-react.md
+++ b/content/docs/thinking-in-react.md
@@ -1,6 +1,6 @@
 ---
 id: thinking-in-react
-title: Thinking in React
+title: Философия React
 permalink: docs/thinking-in-react.html
 redirect_from:
   - 'blog/2013/11/05/thinking-in-react.html'
@@ -8,17 +8,17 @@ redirect_from:
 prev: composition-vs-inheritance.html
 ---
 
-React is, in our opinion, the premier way to build big, fast Web apps with JavaScript. It has scaled very well for us at Facebook and Instagram.
+Нам кажется, React — это отличный способ писать большие и быстрые JavaScript-приложения. Он очень хорошо масштабировался для нас в Facebook и Instagram.
 
-One of the many great parts of React is how it makes you think about apps as you build them. In this document, we'll walk you through the thought process of building a searchable product data table using React.
+Одна из особенностей React — это то, как он предлагает думать о приложениях в процессе их создания. В этом руководстве мы покажем мысленный процесс создания таблицы продуктов с поиском на React.
 
-## Start With A Mock {#start-with-a-mock}
+## Начнём с макета {#start-with-a-mock}
 
-Imagine that we already have a JSON API and a mock from our designer. The mock looks like this:
+Представьте, что у вас уже есть JSON API и макет дизайна сайта. Вот как он выглядит: 
 
 ![Mockup](../images/blog/thinking-in-react-mock.png)
 
-Our JSON API returns some data that looks like this:
+Наш JSON API возвращает данные, которые выглядят так:
 
 ```
 [
@@ -31,27 +31,27 @@ Our JSON API returns some data that looks like this:
 ];
 ```
 
-## Step 1: Break The UI Into A Component Hierarchy {#step-1-break-the-ui-into-a-component-hierarchy}
+## Шаг 1: Разобьём интерфейс на составляющие {#step-1-break-the-ui-into-a-component-hierarchy}
 
-The first thing you'll want to do is to draw boxes around every component (and subcomponent) in the mock and give them all names. If you're working with a designer, they may have already done this, so go talk to them! Their Photoshop layer names may end up being the names of your React components!
+Первое, что нужно сделать — представить границы вокруг каждого компонента (и подкомпонента) в макете и дать им имена. Если вы работаете с дизайнерами, вполне возможно, что они уже как-то называют компоненты — вам стоит пообщаться! Например, слои Photoshop часто подсказывают имена для React-компонентов.
 
-But how do you know what should be its own component? Just use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents.
+Но как выбрать, что является компонентом, а что нет? Это похоже на то, как вы решаете, надо ли объявить функцию или объект. Можно применить [принцип единственной ответственности](https://ru.wikipedia.org/wiki/Принцип_единственной_ответственности): каждый компонент по-хорошему должен заниматься какой-то одной задачей. Если функционал компонента увеличивается с течением времени, его следует разбить на более мелкие подкомпоненты.
 
-Since you're often displaying a JSON data model to a user, you'll find that if your model was built correctly, your UI (and therefore your component structure) will map nicely. That's because UI and data models tend to adhere to the same *information architecture*, which means the work of separating your UI into components is often trivial. Just break it up into components that represent exactly one piece of your data model.
+Многие интерфейсы показывают модель данных JSON. Поэтому хорошо построенная модель, как правило, уже отражает пользовательский интерфейс (а значит, и структуру компонентов). Интерфейс и модели данных часто имеют похожую *информационную архитектуру*, так что разделить интерфейс на части не составляет труда. Просто разбейте его на компоненты, каждый из которых отображает часть модели данных.
 
 ![Component diagram](../images/blog/thinking-in-react-components.png)
 
-You'll see here that we have five components in our simple app. We've italicized the data each component represents.
+Здесь мы видим, что наше простое приложение состоит из пяти различных компонентов. Курсивом выделены данные, которые эти компоненты представляют.
 
-  1. **`FilterableProductTable` (orange):** contains the entirety of the example
-  2. **`SearchBar` (blue):** receives all *user input*
-  3. **`ProductTable` (green):** displays and filters the *data collection* based on *user input*
-  4. **`ProductCategoryRow` (turquoise):** displays a heading for each *category*
-  5. **`ProductRow` (red):** displays a row for each *product*
+  1. **`FilterableProductTable` (оранжевый):** контейнер, содержащий пример целиком
+  2. **`SearchBar` (синий):** поле *пользовательского ввода*
+  3. **`ProductTable` (зелёный):** отображает и фильтрует *список данных*, основанный на *пользовательском вводе*
+  4. **`ProductCategoryRow` (голубой):** наименования *категорий*
+  5. **`ProductRow` (красный):** отдельно взятый *товар*
 
-If you look at `ProductTable`, you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and there's an argument to be made either way. For this example, we left it as part of `ProductTable` because it is part of rendering the *data collection* which is `ProductTable`'s responsibility. However, if this header grows to be complex (i.e. if we were to add affordances for sorting), it would certainly make sense to make this its own `ProductTableHeader` component.
+Обратите внимание, что внутри `ProductTable` заголовок таблицы ("Name" и "Price") сам по себе отдельным компонентом не является. Отделять его или нет — вопрос личного предпочтения. В данном примере мы решили не придавать этому особого значения и оставить заголовок частью большего компонента `ProductTable`, так как он является всего лишь малой частью общего *списка данных*. Тем не менее, если в будущем заголовок пополнится новыми функциями (например, возможностью сортировать товар), имеет смысл извлечь его в самостоятельный компонент `ProductTableHeader`.
 
-Now that we've identified the components in our mock, let's arrange them into a hierarchy. This is easy. Components that appear within another component in the mock should appear as a child in the hierarchy:
+Теперь, когда мы определили компоненты в нашем макете, давайте расположим их по порядку подчинённости. Это просто. Компоненты, которые являются частью других компонентов, в иерархии отображаются как дочерние:
 
   * `FilterableProductTable`
     * `SearchBar`
@@ -59,90 +59,91 @@ Now that we've identified the components in our mock, let's arrange them into a
       * `ProductCategoryRow`
       * `ProductRow`
 
-## Step 2: Build A Static Version in React {#step-2-build-a-static-version-in-react}
+## Шаг 2: Создадим статическую версию в React {#step-2-build-a-static-version-in-react}
+
+<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">Пример кода <a href="https://codepen.io/gaearon/pen/BwWzwm">Философия React: Шаг 2</a> на <a href="https://codepen.io">CodePen</a>.</p>
 
-<p data-height="600" data-theme-id="0" data-slug-hash="BwWzwm" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/BwWzwm">Thinking In React: Step 2</a> on <a href="http://codepen.io">CodePen</a>.</p>
 <script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
 
-Now that you have your component hierarchy, it's time to implement your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's best to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
+Теперь, когда все компоненты расположены в иерархическом порядке, пришло время реализовать наше приложение. Самый легкий способ — создать версию, которая использует модель данных и рендерит интерфейс, но не предполагает никакой интерактивности. Разделять эти процессы полезно. Написание статической версии требует много печатания и совсем немного мышления. С другой стороны, создание интерактивности приложения подразумевает более глубокий мыслительный процесс и лишь долю рутинной печати. Мы разберёмся, почему так выходит, позже.
 
-To build a static version of your app that renders your data model, you'll want to build components that reuse other components and pass data using *props*. *props* are a way of passing data from parent to child. If you're familiar with the concept of *state*, **don't use state at all** to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.
+Чтобы построить статическую версию приложения, отображающую модель данных, нам нужно создать компоненты, которые используют другие компоненты и передают данные через *пропсы*. *Пропсы* — это способ передачи данных от родителя к потомку. Если вы знакомы с понятием *состояния*, то для статической версии это как раз то, чего вам **использовать не нужно**. Состояние подразумевает собой данные, которые меняются со временем — интерактивность. Так как мы работаем над статической версией приложения, нам этого не нужно.
 
-You can build top-down or bottom-up. That is, you can either start with building the components higher up in the hierarchy (i.e. starting with `FilterableProductTable`) or with the ones lower in it (`ProductRow`). In simpler examples, it's usually easier to go top-down, and on larger projects, it's easier to go bottom-up and write tests as you build.
+Написание кода можно начать как сверху вниз (с большого `FilterableProductTable`), так и снизу вверх (с маленького `ProductRow`). Более простые приложения удобнее начать с компонентов, находящихся выше по иерархии. В более сложных приложениях удобнее в первую очередь создавать и тестировать подкомпоненты.
 
-At the end of this step, you'll have a library of reusable components that render your data model. The components will only have `render()` methods since this is a static version of your app. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. If you make a change to your underlying data model and call `ReactDOM.render()` again, the UI will be updated. It's easy to see how your UI is updated and where to make changes since there's nothing complicated going on. React's **one-way data flow** (also called *one-way binding*) keeps everything modular and fast.
+В конце этого шага у вас на руках появится библиотека повторно используемых компонентов, отображающих вашу модель данных. Так как это статическая версия, компоненты будут иметь только методы `render()`. Компонент выше по иерархии (`FilterableProductTable`) будет передавать модель данных через пропсы. Если вы внесете изменения в базовую модель данных и снова вызовете `ReactDOM.render()`, то увидите изменения в пользовательском интерфейсе. Ничего сложного в отслеживании изменений и обновлении интерфейса нет. Благодаря **одностороннему потоку данных** (или *односторонней привязке*), код работает быстро, но остаётся понятным. 
 
-Simply refer to the [React docs](/docs/) if you need help executing this step.
+Если у вас остались вопросы по выполнению данного шага, обратитесь к [документации React](/docs/).
 
-### A Brief Interlude: Props vs State {#a-brief-interlude-props-vs-state}
+### Небольшое отступление: как пропсы отличаются от состояния {#a-brief-interlude-props-vs-state}
 
-There are two types of "model" data in React: props and state. It's important to understand the distinction between the two; skim [the official React docs](/docs/interactivity-and-dynamic-uis.html) if you aren't sure what the difference is.
+Существует два типа "модели" данных в React: пропсы и состояние. Важно, чтобы вы понимали разницу между ними, в противном случае обратитесь к [официальной документации React](/docs/interactivity-and-dynamic-uis.html).
 
-## Step 3: Identify The Minimal (but complete) Representation Of UI State {#step-3-identify-the-minimal-but-complete-representation-of-ui-state}
+## Шаг 3: Определим минимальное (но полноценное) отображение состояния интерфейса {#step-3-identify-the-minimal-but-complete-representation-of-ui-state}
 
-To make your UI interactive, you need to be able to trigger changes to your underlying data model. React makes this easy with **state**.
+Чтобы сделать наш UI интерактивным, нужно, чтобы модель данных могла меняться со временем. В React это возможно с помощью **состояния**.
 
-To build your app correctly, you first need to think of the minimal set of mutable state that your app needs. The key here is [DRY: *Don't Repeat Yourself*](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself). Figure out the absolute minimal representation of the state your application needs and compute everything else you need on-demand. For example, if you're building a TODO list, just keep an array of the TODO items around; don't keep a separate state variable for the count. Instead, when you want to render the TODO count, simply take the length of the TODO items array.
+Чтобы правильно построить приложение, сначала нужно продумать необходимый набор данных изменяемого состояния. Главное тут следовать принципу разработки [DRY: *Don't Repeat Yourself* (рус. не повторяйся)](https://ru.wikipedia.org/wiki/Don%E2%80%99t_repeat_yourself). Определите минимальное количество необходимого состояния, которое нужно вашему приложению, всё остальное вычисляйте при необходимости. Например, если вы создаёте список дел, держите массив пунктов списка под рукой — но не стоит хранить отдельное состояние для количества дел в списке. Если надо отобразить количество элементов, просто используйте длину существующего массива.
 
-Think of all of the pieces of data in our example application. We have:
+Давайте перечислим все данные в нашем приложении. У нас есть:
 
-  * The original list of products
-  * The search text the user has entered
-  * The value of the checkbox
-  * The filtered list of products
+  * Первоначальный список товаров.
+  * Поисковый запрос, введённый пользователем.
+  * Значение чекбокса.
+  * Отфильтрованный список товаров.
 
-Let's go through each one and figure out which one is state. Simply ask three questions about each piece of data:
+Давайте рассмотрим каждую часть данных и определим, какая из них является состоянием. Задайте себе следующие три вопроса:
 
-  1. Is it passed in from a parent via props? If so, it probably isn't state.
-  2. Does it remain unchanged over time? If so, it probably isn't state.
-  3. Can you compute it based on any other state or props in your component? If so, it isn't state.
+  1. Передаётся ли она от родителя через пропсы? Тогда, наверное, это не состояние.
+  2. Остаётся ли она неизменной со временем? Тогда, наверное, это не состояние.
+  3. Можете ли вы вычислить её на основании любой другой части состояния или пропсов в своём компоненте? Тогда, наверное, это не состояние.
 
-The original list of products is passed in as props, so that's not state. The search text and the checkbox seem to be state since they change over time and can't be computed from anything. And finally, the filtered list of products isn't state because it can be computed by combining the original list of products with the search text and value of the checkbox.
+Исходный список товаров передаётся через пропсы, так что состоянием он быть не может. Поисковый запрос и чекбокс меняются со временем, и их нельзя вычислить из других данных, так что они вполне сойдут за состояние. Напоследок, отфильтрованный список товаров не является состоянием, так как его можно вычислить из оригинального списка, поискового запроса и значения чекбокса.
 
-So finally, our state is:
+В итоге, состоянием являются:
 
-  * The search text the user has entered
-  * The value of the checkbox
+  * Поисковый запрос, введённый пользователем
+  * Значение чекбокса
 
-## Step 4: Identify Where Your State Should Live {#step-4-identify-where-your-state-should-live}
+## Шаг 4: Определим, где должно находиться наше состояние{#step-4-identify-where-your-state-should-live}
 
-<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/qPrNQZ">Thinking In React: Step 4</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="qPrNQZ" data-default-tab="js" data-user="lacker" data-embed-version="2" class="codepen">Пример кода <a href="https://codepen.io/gaearon/pen/qPrNQZ">Философия React: Шаг 4</a> на <a href="https://codepen.io">CodePen</a>.</p>
 
-OK, so we've identified what the minimal set of app state is. Next, we need to identify which component mutates, or *owns*, this state.
+Итак, мы определили минимальный набор состояний приложения. Далее нам нужно выяснить, какой из компонентов *владеет* состоянием или изменяет его.
 
-Remember: React is all about one-way data flow down the component hierarchy. It may not be immediately clear which component should own what state. **This is often the most challenging part for newcomers to understand,** so follow these steps to figure it out:
+Помните: в React поток данных односторонний и сходит сверху вниз в иерархическом порядке. Сначала может быть не совсем ясно, какой из компонентов должен владеть каким состоянием. **На этом этапе новички спотыкаются чаще всего.** Чтобы разобраться, следуйте этим инструкциям:
 
-For each piece of state in your application:
+Для каждой части состояния в приложении:
 
-  * Identify every component that renders something based on that state.
-  * Find a common owner component (a single component above all the components that need the state in the hierarchy).
-  * Either the common owner or another component higher up in the hierarchy should own the state.
-  * If you can't find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component.
+  * Определите компоненты, которые рендерят что-то исходя из состояния.
+  * Найдите общий главенствующий компонент (компонент, расположенный над другими компонентами, которым нужно это состояние). 
+  * Либо общий главенствующий компонент, либо любой компонент, стоящий выше по иерархии, должен содержать состояние.
+  * Если вам не удаётся найти подходящий компонент, создайте один исключительно для состояния и разместите его выше по иерархии над общим главенствующим компонентом.
 
-Let's run through this strategy for our application:
+Давайте применим эту стратегию на примере нашего приложения:
 
-  * `ProductTable` needs to filter the product list based on state and `SearchBar` needs to display the search text and checked state.
-  * The common owner component is `FilterableProductTable`.
-  * It conceptually makes sense for the filter text and checked value to live in `FilterableProductTable`
+  * Задача `ProductTable` — отфильтровать список товаров, основываясь на состоянии, а `SearchBar` — отобразить состояние для поискового запроса и чекбокса.
+  * Общий главенствующий компонент для обоих — `FilterableProductTable`.
+  * По идее, имеет смысл содержать текст фильтра и значение чекбокса в `FilterableProductTable`.
 
-Cool, so we've decided that our state lives in `FilterableProductTable`. First, add an instance property `this.state = {filterText: '', inStockOnly: false}` to `FilterableProductTable`'s `constructor` to reflect the initial state of your application. Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as a prop. Finally, use these props to filter the rows in `ProductTable` and set the values of the form fields in `SearchBar`.
+Итак, мы приняли решение расположить наше состояние в `FilterableProductTable`. Первое, что нужно сделать — добавить свойство `this.state = {filterText: '', inStockOnly: false}` в конструктор `FilterableProductTable`, чтобы отобразить начальное состояние нашего приложения. После этого передайте `filterText` и `inStockOnly` в `ProductTable` и `SearchBar` через пропсы. Напоследок, используйте пропсы для фильтрации строк в `ProductTable` и определения значений полей формы `SearchBar`.
 
-You can start seeing how your application will behave: set `filterText` to `"ball"` and refresh your app. You'll see that the data table is updated correctly.
+Вы заметите изменения в поведении вашего приложения: задайте значение `"ball"` для `filterText` и обновите страницу. Вы увидите соответствующие изменения в таблице данных.
 
-## Step 5: Add Inverse Data Flow {#step-5-add-inverse-data-flow}
+## Шаг 5: Добавим обратный поток данных {#step-5-add-inverse-data-flow}
 
-<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">See the Pen <a href="https://codepen.io/gaearon/pen/LzWZvb">Thinking In React: Step 5</a> on <a href="http://codepen.io">CodePen</a>.</p>
+<p data-height="600" data-theme-id="0" data-slug-hash="LzWZvb" data-default-tab="js,result" data-user="rohan10" data-embed-version="2" data-pen-title="Thinking In React: Step 5" class="codepen">Пример кода <a href="https://codepen.io/gaearon/pen/LzWZvb">Философия React: Шаг 5</a> на <a href="https://codepen.io">CodePen</a>.</p>
 
-So far, we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
+Пока что наше приложение рендерится в зависимости от пропсов и состояния, передающихся вниз по иерархии. Теперь мы обеспечим поток данных в обратную сторону: наша задача сделать так, чтобы компоненты формы в самом низу иерархии обновляли состояние в `FilterableProductTable`.
 
-React makes this data flow explicit to make it easy to understand how your program works, but it does require a little more typing than traditional two-way data binding.
+Поток данных в React — однонаправленный. Так проще понять, как работает приложение, но нам потребуется немного больше кода, чем в традиционной двусторонней привязке данных.
 
-If you try to type or check the box in the current version of the example, you'll see that React ignores your input. This is intentional, as we've set the `value` prop of the `input` to always be equal to the `state` passed in from `FilterableProductTable`.
+Если вы попытаетесь ввести текст в поле поиска или установить флажок в чекбоксе данной версии примера, то увидите, что React игнорирует любой ввод. Это преднамеренно, так как ранее мы приравняли значение пропа `value` в `input` к `state` в `FilterableProductTable`.
 
-Let's think about what we want to happen. We want to make sure that whenever the user changes the form, we update the state to reflect the user input. Since components should only update their own state, `FilterableProductTable` will pass callbacks to `SearchBar` that will fire whenever the state should be updated. We can use the `onChange` event on the inputs to be notified of it. The callbacks passed by `FilterableProductTable` will call `setState()`, and the app will be updated.
+Давайте подумаем, как мы хотим изменить поведение. Нам нужно, чтобы при изменениях поисковой формы менялось состояние ввода. Так как компоненты должны обновлять только относящееся к ним состояние, `FilterableProductTable` передаст колбэк в `SearchBar`. В свою очередь, `SearchBar` будет вызывать этот колбэк каждый раз, когда надо обновить состояние. Чтобы получать уведомления об изменениях элементов формы, мы можем использовать событие `onChange`. Колбэки, переданные из компонента `FilterableProductTable`, вызовут `setState()`, и приложение обновится.
 
-Though this sounds complex, it's really just a few lines of code. And it's really explicit how your data is flowing throughout the app.
+Хоть и звучит сложно, но занимает это всего несколько строк кода. А главное, поток данных через приложение остаётся прямым и понятным.
 
-## And That's It {#and-thats-it}
+## Вот и всё {#and-thats-it}
 
-Hopefully, this gives you an idea of how to think about building components and applications with React. While it may be a little more typing than you're used to, remember that code is read far more than it's written, and it's extremely easy to read this modular, explicit code. As you start to build large libraries of components, you'll appreciate this explicitness and modularity, and with code reuse, your lines of code will start to shrink. :)
+Надеемся, что этот пример поможет вам получить лучшее представление о том, как подойти к созданию компонентов и приложений в React. Хотя этот процесс и использует немного больше кода, помните: код читают чаще, чем пишут. А такой модульный и прямой код, как в нашем приложении, читается очень легко. Когда вы начнёте создавать большие библиотеки компонентов, вы сможете по-настоящему оценить прямолинейность и связанность React, а повторно используемые компоненты сделают ваш код намного меньше. :)
diff --git a/content/docs/typechecking-with-proptypes.md b/content/docs/typechecking-with-proptypes.md
index 4004e7820..c3e6eeb66 100644
--- a/content/docs/typechecking-with-proptypes.md
+++ b/content/docs/typechecking-with-proptypes.md
@@ -1,18 +1,18 @@
 ---
 id: typechecking-with-proptypes
-title: Typechecking With PropTypes
+title: Проверка типов с помощью PropTypes
 permalink: docs/typechecking-with-proptypes.html
 redirect_from:
   - "docs/react-api.html#typechecking-with-proptypes"
 ---
 
-> Note:
+> Примечание:
 >
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
+> С версии React 15.5 `React.PropTypes` были вынесены в отдельный пакет. Так что используйте [библиотеку `prop-types`](https://www.npmjs.com/package/prop-types).
 >
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes) to automate the conversion.
+> Вы можете использовать [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes), чтобы провести замену в коде на использование этой библиотеки.
 
-As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like [Flow](https://flow.org/) or [TypeScript](https://www.typescriptlang.org/) to typecheck your whole application. But even if you don't use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special `propTypes` property:
+По мере роста вашего приложения вы можете отловить много ошибок с помощью проверки типов. Для этого можно использовать расширения JavaScript вроде [Flow](https://flow.org/) и [TypeScript](https://www.typescriptlang.org/). Но, даже если вы ими не пользуетесь, React предоставляет встроенные возможности для проверки типов. Для запуска этой проверки на пропсах компонента вам нужно использовать специальное свойство `propTypes`:
 
 ```javascript
 import PropTypes from 'prop-types';
@@ -20,7 +20,7 @@ import PropTypes from 'prop-types';
 class Greeting extends React.Component {
   render() {
     return (
-      <h1>Hello, {this.props.name}</h1>
+      <h1>Привет, {this.props.name}</h1>
     );
   }
 }
@@ -30,18 +30,18 @@ Greeting.propTypes = {
 };
 ```
 
-`PropTypes` exports a range of validators that can be used to make sure the data you receive is valid. In this example, we're using `PropTypes.string`. When an invalid value is provided for a prop, a warning will be shown in the JavaScript console. For performance reasons, `propTypes` is only checked in development mode.
+`PropTypes` предоставляет ряд валидаторов, которые могут использоваться для проверки, что получаемые данные корректны. В примере мы использовали `PropTypes.string`. Когда какой-то проп имеет некорректное значение, в консоли будет выведено предупреждение. По соображениям производительности `propTypes` проверяются только в режиме разработки.
 
 ### PropTypes {#proptypes}
 
-Here is an example documenting the different validators provided:
+Пример использования возможных валидаторов:
 
 ```javascript
 import PropTypes from 'prop-types';
 
 MyComponent.propTypes = {
-  // You can declare that a prop is a specific JS type. By default, these
-  // are all optional.
+  // Можно объявить проп на соответствиее определённому JS-типу.
+  // По умолчанию это не обязательно.
   optionalArray: PropTypes.array,
   optionalBool: PropTypes.bool,
   optionalFunc: PropTypes.func,
@@ -50,85 +50,90 @@ MyComponent.propTypes = {
   optionalString: PropTypes.string,
   optionalSymbol: PropTypes.symbol,
 
-  // Anything that can be rendered: numbers, strings, elements or an array
-  // (or fragment) containing these types.
+  // Все, что может быть отренедерено:
+  // числа, строки, элементы или массивы
+  // (или фрагменты) содержащие эти типы
   optionalNode: PropTypes.node,
 
-  // A React element.
+  // React-элемент
   optionalElement: PropTypes.element,
 
-  // You can also declare that a prop is an instance of a class. This uses
-  // JS's instanceof operator.
+  // Можно указать, что проп должен быть экземпляром класса
+  // Для этого используется оператор `instanceof`.
   optionalMessage: PropTypes.instanceOf(Message),
 
-  // You can ensure that your prop is limited to specific values by treating
-  // it as an enum.
+  // Вы можете задать ограничение конкретными значениями
+  // при помощи перечисления
   optionalEnum: PropTypes.oneOf(['News', 'Photos']),
 
-  // An object that could be one of many types
+  // Объект, одного из нескольких типов
   optionalUnion: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.number,
     PropTypes.instanceOf(Message)
   ]),
 
-  // An array of a certain type
+  // Массив объектов конкретного типа
   optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
 
-  // An object with property values of a certain type
+  // Объект со свойствами конкретного типа
   optionalObjectOf: PropTypes.objectOf(PropTypes.number),
 
-  // An object taking on a particular shape
+  // Объект с определенной структурой
   optionalObjectWithShape: PropTypes.shape({
     color: PropTypes.string,
     fontSize: PropTypes.number
   }),
 
-  // You can chain any of the above with `isRequired` to make sure a warning
-  // is shown if the prop isn't provided.
+  // Можно добавить`isRequired` к любому из приведённому выше типу,
+  // чтобы показывать предупреждение,
+  // если проп не передан
   requiredFunc: PropTypes.func.isRequired,
 
-  // A value of any data type
+  // Значене любого типа
   requiredAny: PropTypes.any.isRequired,
 
-  // You can also specify a custom validator. It should return an Error
-  // object if the validation fails. Don't `console.warn` or throw, as this
-  // won't work inside `oneOfType`.
+  // Можно добавить собственный валидатор.
+  // Он должен возращать объект `Error` при ошибке валидации.
+  // Не используйте `console.warn` или `throw` 
+  // - это не будет работать внутри `oneOfType`
   customProp: function(props, propName, componentName) {
     if (!/matchme/.test(props[propName])) {
       return new Error(
-        'Invalid prop `' + propName + '` supplied to' +
-        ' `' + componentName + '`. Validation failed.'
+        'Проп `' + propName + '` компонента' +
+        ' `' + componentName + '` имеет неправильное значение'
       );
     }
   },
 
-  // You can also supply a custom validator to `arrayOf` and `objectOf`.
-  // It should return an Error object if the validation fails. The validator
-  // will be called for each key in the array or object. The first two
-  // arguments of the validator are the array or object itself, and the
-  // current item's key.
+  // Можно задать свой валидатор для `arrayOf` и `objectOf`.
+  // Он должен возвращать объект Error при ошибке валидации.
+  // Валидатор будет вызван для каждого элемента в массиве
+  // или для каждого свойства объекта.
+  // Первые два параметра валидатора 
+  // - это массив или объект и ключ текущего элемента
   customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
     if (!/matchme/.test(propValue[key])) {
       return new Error(
-        'Invalid prop `' + propFullName + '` supplied to' +
-        ' `' + componentName + '`. Validation failed.'
+        'Проп `' + propFullName + '` компонента' +
+        ' `' + componentName + '` имеет неправильное значение'
       );
     }
   })
 };
 ```
 
-### Requiring Single Child {#requiring-single-child}
+### Ограничение на один дочерний компонент {#requiring-single-child}
 
-With `PropTypes.element` you can specify that only a single child can be passed to a component as children.
+С помощью `PropTypes.element` вы можете указать, что в качестве дочернего может быть передан только один элемент.
 
 ```javascript
 import PropTypes from 'prop-types';
 
 class MyComponent extends React.Component {
   render() {
-    // This must be exactly one element or it will warn.
+    // Это должен быть ровно один элемент.
+    // Иначе вы увидете предупреждение
     const children = this.props.children;
     return (
       <div>
@@ -143,45 +148,45 @@ MyComponent.propTypes = {
 };
 ```
 
-### Default Prop Values {#default-prop-values}
+### Значения пропсов по умолчанию {#default-prop-values}
 
-You can define default values for your `props` by assigning to the special `defaultProps` property:
+Вы можете задать значения по умолчанию для ваших `props` с помощью специального свойства `defaultProps`:
 
 ```javascript
 class Greeting extends React.Component {
   render() {
     return (
-      <h1>Hello, {this.props.name}</h1>
+      <h1>Привет, {this.props.name}</h1>
     );
   }
 }
 
-// Specifies the default values for props:
+// Задание значений по умолчанию для пропсов:
 Greeting.defaultProps = {
-  name: 'Stranger'
+  name: 'Незнакомец'
 };
 
-// Renders "Hello, Stranger":
+// Отрендерит "Привет, Незнакомец":
 ReactDOM.render(
   <Greeting />,
   document.getElementById('example')
 );
 ```
 
-If you are using a Babel transform like [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/) , you can also declare `defaultProps` as static property within a React component class. This syntax has not yet been finalized though and will require a compilation step to work within a browser. For more information, see the [class fields proposal](https://github.com/tc39/proposal-class-fields).
+Если вы используете один из Babel-плагинов по преобразованию кода, вроде [transform-class-properties](https://babeljs.io/docs/plugins/transform-class-properties/), то можете объявить `defaultProps` как статическое свойство класса (для компонента-наследника от `React.Component`). Этот синтаксис еще не утвержден, так что для его работы в браузере нужна компиляция. Подробнее смотрите в [предложении о полях класса](https://github.com/tc39/proposal-class-fields).
 
 ```javascript
 class Greeting extends React.Component {
   static defaultProps = {
-    name: 'stranger'
+    name: 'незнакомец'
   }
 
   render() {
     return (
-      <div>Hello, {this.props.name}</div>
+      <div>Привет, {this.props.name}</div>
     )
   }
 }
 ```
 
-The `defaultProps` will be used to ensure that `this.props.name` will have a value if it was not specified by the parent component. The `propTypes` typechecking happens after `defaultProps` are resolved, so typechecking will also apply to the `defaultProps`.
+Определение `defaultProps` гарантирует, что `this.props.name` будет иметь значение, даже если оно не было указано родительским компонентом. Сначала применяются значения по умолчанию, заданные в `defaultProps`. После запускается проверка типов с помощью `propTypes`. Так что проверка типов распространяется и на значения по умолчанию.
diff --git a/content/docs/uncontrolled-components.md b/content/docs/uncontrolled-components.md
index 2b1c97405..10b6eab28 100644
--- a/content/docs/uncontrolled-components.md
+++ b/content/docs/uncontrolled-components.md
@@ -41,7 +41,7 @@ class NameForm extends React.Component {
 
 Since an uncontrolled component keeps the source of truth in the DOM, it is sometimes easier to integrate React and non-React code when using uncontrolled components. It can also be slightly less code if you want to be quick and dirty. Otherwise, you should usually use controlled components.
 
-If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](http://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
+If it's still not clear which type of component you should use for a particular situation, you might find [this article on controlled versus uncontrolled inputs](https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/) to be helpful.
 
 ### Default Values {#default-values}
 
diff --git a/content/home/examples/a-component-using-external-plugins.js b/content/home/examples/a-component-using-external-plugins.js
index 09868cfbb..6759635b0 100644
--- a/content/home/examples/a-component-using-external-plugins.js
+++ b/content/home/examples/a-component-using-external-plugins.js
@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = { value: 'Привет, **мир**!' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>Редактор</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Введите что-нибудь в формате Markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Вывод</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
diff --git a/content/home/examples/a-component-using-external-plugins.md b/content/home/examples/a-component-using-external-plugins.md
index a8c35bbd6..f49ad4c9e 100644
--- a/content/home/examples/a-component-using-external-plugins.md
+++ b/content/home/examples/a-component-using-external-plugins.md
@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Компонент с использованием внешних плагинов
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+React позволяет работать с другими библиотеками и фреймворками. В этом примере используется внешняя библиотека **remarkable**, чтобы в режиме реального времени преобразовать Markdown-синтаксис, введённый в элемент `<textarea>`.
diff --git a/content/home/examples/a-simple-component.js b/content/home/examples/a-simple-component.js
index 90c31b960..3535e1811 100644
--- a/content/home/examples/a-simple-component.js
+++ b/content/home/examples/a-simple-component.js
@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        Привет, {this.props.name}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+  <HelloMessage name="Саша" />,
   document.getElementById('hello-example')
 );
\ No newline at end of file
diff --git a/content/home/examples/a-simple-component.md b/content/home/examples/a-simple-component.md
index d791856d4..452cf14ab 100644
--- a/content/home/examples/a-simple-component.md
+++ b/content/home/examples/a-simple-component.md
@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Простой компонент
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+React-компоненты реализуют метод `render()`, который принимает входные данные и возвращает что-то для вывода. В этом примере используется XML-подобный синтаксис под названием JSX. Входные данные, передаваемые в компонент, доступны в `render()` через `this.props`.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**JSX является необязательным и не требуется React.** Попробуйте [Babel REPL](babel://es5-syntax-example), чтобы увидеть JavaScript-код, полученный на этапе компиляции JSX.
diff --git a/content/home/examples/a-stateful-component.js b/content/home/examples/a-stateful-component.js
index 25d5a9145..8eb0b1aee 100644
--- a/content/home/examples/a-stateful-component.js
+++ b/content/home/examples/a-stateful-component.js
@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        Секунды: {this.state.seconds}
       </div>
     );
   }
diff --git a/content/home/examples/a-stateful-component.md b/content/home/examples/a-stateful-component.md
index a68ab0a51..845b2de93 100644
--- a/content/home/examples/a-stateful-component.md
+++ b/content/home/examples/a-stateful-component.md
@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Компонент с состоянием
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+Помимо ввода входных данных (доступных через `this.props`), компонент поддерживает внутренние данные состояния (доступные через `this.state`). Когда данные состояния компонента изменятся, React ещё раз вызовет `render()` и обновит отрендеренную разметку.
diff --git a/content/home/examples/an-application.js b/content/home/examples/an-application.js
index 43f777dc2..8b77d97a6 100644
--- a/content/home/examples/an-application.js
+++ b/content/home/examples/an-application.js
@@ -9,11 +9,11 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>Список дел</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Что нужно сделать?
           </label>
           <input
             id="new-todo"
@@ -21,7 +21,7 @@ class TodoApp extends React.Component {
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Добавить #{this.state.items.length + 1}
           </button>
         </form>
       </div>
diff --git a/content/home/examples/an-application.md b/content/home/examples/an-application.md
index 227d0621b..f392a0089 100644
--- a/content/home/examples/an-application.md
+++ b/content/home/examples/an-application.md
@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Приложение
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+Используя `props` и `state`, можно создать небольшое приложение списка дел. В этом примере используется `state` для отслеживания текущего списка элементов, а также текста, введённого пользователем. Хотя обработчики событий встроены в разметку, они собираются и реализуются с помощью делегирования событий.
diff --git a/content/home/marketing/component-based.md b/content/home/marketing/component-based.md
index aeb3c4de2..26711d234 100644
--- a/content/home/marketing/component-based.md
+++ b/content/home/marketing/component-based.md
@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Основан на компонентах
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Создавайте инкапсулированные компоненты с собственным состоянием, а затем объединяйте их в сложные пользовательские интерфейсы.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM.
diff --git a/content/home/marketing/declarative.md b/content/home/marketing/declarative.md
index c3b651902..b78db4d04 100644
--- a/content/home/marketing/declarative.md
+++ b/content/home/marketing/declarative.md
@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Декларативный
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+Создавать интерактивные пользовательские интерфейсы на React — приятно и просто. Вам достаточно описать, как части интерфейса приложения выглядят в разных состояниях. React будет своевременно их обновлять, когда данные изменяются.
 
-Declarative views make your code more predictable and easier to debug.
+Декларативные представления сделают код более предсказуемым и упростят отладку.
diff --git a/content/home/marketing/learn-once-write-anywhere.md b/content/home/marketing/learn-once-write-anywhere.md
index 009edf5bc..15568f8d5 100644
--- a/content/home/marketing/learn-once-write-anywhere.md
+++ b/content/home/marketing/learn-once-write-anywhere.md
@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Научитесь однажды — пишите где угодно
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Нам не нужно ничего знать про остальную часть вашего технологического стека, поэтому вы можете разрабатывать новый функционал в React, не изменяя существующий код.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React также может работать на Node.js, и даже на мобильных платформах с помощью [React Native](https://facebook.github.io/react-native/).
diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md
index 0191348f0..9e1e58872 100644
--- a/content/tutorial/tutorial.md
+++ b/content/tutorial/tutorial.md
@@ -82,7 +82,9 @@ npx create-react-app my-app
 
 3. Delete all files in the `src/` folder of the new project 
 
-> Note: **don't delete the entire `src` folder, just the original source files inside it.**.  We'll replace the default source files with examples for this project in the next step.
+> Note:
+>
+>**Don't delete the entire `src` folder, just the original source files inside it.** We'll replace the default source files with examples for this project in the next step.
 
 ```bash
 cd my-app
@@ -225,7 +227,7 @@ Congratulations! You've just "passed a prop" from a parent Board component to a
 
 ### Making an Interactive Component {#making-an-interactive-component}
 
-Let's fill the Square component with an "X" when we click it. 
+Let's fill the Square component with an "X" when we click it.
 First, change the button tag that is returned from the Square component's `render()` function to this:
 
 ```javascript{4}
@@ -1013,7 +1015,7 @@ In JavaScript, arrays have a [`map()` method](https://developer.mozilla.org/en-U
 ```js
 const numbers = [1, 2, 3];
 const doubled = numbers.map(x => x * 2); // [2, 4, 6]
-``` 
+```
 
 Using the `map` method, we can map our history of moves to React elements representing buttons on the screen, and display a list of buttons to "jump" to past moves.
 
diff --git a/content/warnings/dont-call-proptypes.md b/content/warnings/dont-call-proptypes.md
index 07dfa33f0..cffcfdd3a 100644
--- a/content/warnings/dont-call-proptypes.md
+++ b/content/warnings/dont-call-proptypes.md
@@ -1,20 +1,20 @@
 ---
-title: Don't Call PropTypes Warning
+title: "Предупреждение: не вызывайте PropTypes"
 layout: single
 permalink: warnings/dont-call-proptypes.html
 ---
 
-> Note:
+> Примечание:
 >
-> `React.PropTypes` has moved into a different package since React v15.5. Please use [the `prop-types` library instead](https://www.npmjs.com/package/prop-types).
+> С версии React 15.5 `React.PropTypes` были вынесены в отдельный пакет. Вместо них используйте [библиотеку `prop-types`](https://www.npmjs.com/package/prop-types).
 >
->We provide [a codemod script](/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes) to automate the conversion.
+> Вы можете использовать [codemod-скрипт](/blog/2017/04/07/react-v15.5.0.html#migrating-from-reactproptypes), автоматизировать переход на использование этой библиотеки.
 
-In a future major release of React, the code that implements PropType validation functions will be stripped in production. Once this happens, any code that calls these functions manually (that isn't stripped in production) will throw an error.
+В следующем мажорном релизе React, если код использует функции валидации PropType, он будет удалён в продакшене. Как только это случится, любой код, который вызывает эти функции вручную (если он не был удалён в продакшене), будет выдавать ошибку.
 
-### Declaring PropTypes is still fine {#declaring-proptypes-is-still-fine}
+### Объявления PropTypes всё ещё работают {#declaring-proptypes-is-still-fine}
 
-The normal usage of PropTypes is still supported:
+Обычное использование PropTypes по-прежнему поддерживается:
 
 ```javascript
 Button.propTypes = {
@@ -22,11 +22,11 @@ Button.propTypes = {
 };
 ```
 
-Nothing changes here.
+В этом плане ничего не изменилось.
 
-### Don’t call PropTypes directly {#dont-call-proptypes-directly}
+### Не вызвайте PropTypes напрямую {#dont-call-proptypes-directly}
 
-Using PropTypes in any other way than annotating React components with them is no longer supported:
+Использование PropTypes вне React-компонентов больше не поддерживается:
 
 ```javascript
 var apiShape = PropTypes.shape({
@@ -34,34 +34,34 @@ var apiShape = PropTypes.shape({
   statusCode: PropTypes.number.isRequired
 }).isRequired;
 
-// Not supported!
+// Не поддерживается!
 var error = apiShape(json, 'response');
 ```
 
-If you depend on using PropTypes like this, we encourage you to use or create a fork of PropTypes (such as [these](https://github.com/aackerman/PropTypes) [two](https://github.com/developit/proptypes) packages).
+Если вы полагаетесь на использование PropTypes, как в показанном выше примере, мы рекомендуем использовать или создать форк PropTypes (по аналогии [этим](https://github.com/aackerman/PropTypes) [двум](https://github.com/developit/proptypes) пакетам).
 
-If you don't fix the warning, this code will crash in production with React 16.
+Если вы не исправите это предупреждение, подобный код нарушит работу приложения при использовании React 16.
 
-### If you don't call PropTypes directly but still get the warning {#if-you-dont-call-proptypes-directly-but-still-get-the-warning}
+### Если вы не вызываете PropTypes напрямую, но по-прежнему получаете предупреждение {#if-you-dont-call-proptypes-directly-but-still-get-the-warning}
 
-Inspect the stack trace produced by the warning. You will find the component definition responsible for the PropTypes direct call. Most likely, the issue is due to third-party PropTypes that wrap React’s PropTypes, for example:
+Посмотрите на стек вызовов, созданный предупреждением. Вы найдёте определение компонента, ответственного за непосредственный вызов PropTypes. Скорее всего, проблема из-за сторонних пакетов, которые используют PropTypes из React, например таким образом:
 
 ```js
 Button.propTypes = {
   highlighted: ThirdPartyPropTypes.deprecated(
     PropTypes.bool,
-    'Use `active` prop instead'
+    'Вместо текущего пропа используйте `active`'
   )
 }
 ```
 
-In this case, `ThirdPartyPropTypes.deprecated` is a wrapper calling `PropTypes.bool`. This pattern by itself is fine, but triggers a false positive because React thinks you are calling PropTypes directly. The next section explains how to fix this problem for a library implementing something like `ThirdPartyPropTypes`. If it's not a library you wrote, you can file an issue against it.
+В данном случае `ThirdPartyPropTypes.deprecated` -- это обёртка, вызывающая `PropTypes.bool`. В таком паттерне нет ничего плохого, но он приводит к ошибочному появлению предупреждения, поскольку React считает, что PropTypes вызываются напрямую. В следующем разделе показано, как решить такую проблему с библиотекой вроде `ThirdPartyPropTypes`. Если это не ваша библиотека, вы можете создать ишью, чтобы её автор решил проблему с предупреждением.
 
-### Fixing the false positive in third party PropTypes {#fixing-the-false-positive-in-third-party-proptypes}
+### Исправление ошибочного срабатывания в сторонних PropTypes {#fixing-the-false-positive-in-third-party-proptypes}
 
-If you are an author of a third party PropTypes library and you let consumers wrap existing React PropTypes, they might start seeing this warning coming from your library. This happens because React doesn't see a "secret" last argument that [it passes](https://github.com/facebook/react/pull/7132) to detect manual PropTypes calls.
+Если вы автор сторонней библиотеки PropTypes и предоставляете пользователям обёртку над встроенными в React PropTypes, они могут увидеть это предупреждение. Это происходит из-за того, что React не видит последний «секретный» аргумент, который [передаётся](https://github.com/facebook/react/pull/7132), чтобы определять вызовы PropTypes вручную.
 
-Here is how to fix it. We will use `deprecated` from [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js) as an example. The current implementation only passes down the `props`, `propName`, and `componentName` arguments:
+Вот как исправляется это предупреждение. В качестве примера будем использовать `deprecated` из библиотеки [react-bootstrap/react-prop-types](https://github.com/react-bootstrap/react-prop-types/blob/0d1cd3a49a93e513325e3258b28a82ce7d38e690/src/deprecated.js). Текущая реализация передаёт только аргументы `props`, `propName` и `componentName`:
 
 ```javascript
 export default function deprecated(propType, explanation) {
@@ -79,11 +79,11 @@ export default function deprecated(propType, explanation) {
 }
 ```
 
-In order to fix the false positive, make sure you pass **all** arguments down to the wrapped PropType. This is easy to do with the ES6 `...rest` notation:
+Для исправления ошибочного появления предупреждения, убедитесь, что вы передаёте **все** аргументы в обёрнутый PropType. Это легко сделать с помощью ES6-синтаксиса `...rest`:
 
 ```javascript
 export default function deprecated(propType, explanation) {
-  return function validate(props, propName, componentName, ...rest) { // Note ...rest here
+  return function validate(props, propName, componentName, ...rest) { // Обратите на ...rest вот тут
     if (props[propName] != null) {
       const message = `"${propName}" property of "${componentName}" has been deprecated.\n${explanation}`;
       if (!warned[message]) {
@@ -92,9 +92,9 @@ export default function deprecated(propType, explanation) {
       }
     }
 
-    return propType(props, propName, componentName, ...rest); // and here
+    return propType(props, propName, componentName, ...rest); // и вот здесь
   };
 }
 ```
 
-This will silence the warning.
+После этого предупреждение больше не будет появляться.
diff --git a/content/warnings/invalid-aria-prop.md b/content/warnings/invalid-aria-prop.md
index 53ebdd9bc..581764045 100644
--- a/content/warnings/invalid-aria-prop.md
+++ b/content/warnings/invalid-aria-prop.md
@@ -1,11 +1,11 @@
 ---
-title: Invalid ARIA Prop Warning
+title: "Предупреждение: некорректный проп ARIA"
 layout: single
 permalink: warnings/invalid-aria-prop.html
 ---
 
-The invalid-aria-prop warning will fire if you attempt to render a DOM element with an aria-* prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
+Предупреждение invalid-aria-prop генерируется, когда вы пытаетесь отрендерить DOM-элемент с пропом aria-*, которого нет в [спецификации](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties) WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications).
 
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
+1. Если вам кажется, что используется корректный проп, внимательно проверьте правильность его написания. Часто бывают написаны с ошибками `aria-labelledby` и `aria-activedescendant`.
 
-2. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. However, React currently strips all unknown attributes, so specifying them in your React app will not cause them to be rendered
\ No newline at end of file
+2. React пока не распознаёт определённый вами атрибут. Скорее всего эта проблема будет решена в будущей версии React. На данный момент React удаляет все неизвестные атрибуты, поэтому их присутствие в приложении не приведёт к их рендеру.
diff --git a/content/warnings/invalid-hook-call-warning.md b/content/warnings/invalid-hook-call-warning.md
index 156578ec2..b53f31952 100644
--- a/content/warnings/invalid-hook-call-warning.md
+++ b/content/warnings/invalid-hook-call-warning.md
@@ -1,60 +1,60 @@
 ---
-title: Invalid Hook Call Warning
+title: "Предупреждение: некорректный вызов хука"
 layout: single
 permalink: warnings/invalid-hook-call-warning.html
 ---
 
- You are probably here because you got the following error message:
+Скорее всего, вы перешли на эту страницу, потому что получили следующее сообщение об ошибке:
 
  > Hooks can only be called inside the body of a function component.
+ 
+Есть три основные причины, по которым вы могли увидеть это предупреждение:
 
-There are three common reasons you might be seeing it:
+1. **Несоответствие версий** React и React DOM.
+2. **Нарушение [правил хуков](/docs/hooks-rules.html)**.
+3. **Наличие более одной копии React** в одном приложении.
 
-1. You might have **mismatching versions** of React and React DOM.
-2. You might be **breaking the [Rules of Hooks](/docs/hooks-rules.html)**.
-3. You might have **more than one copy of React** in the same app.
+Разберём каждый из этих случаев.
 
-Let's look at each of these cases.
+## Несоответствие версий React и React DOM {#mismatching-versions-of-react-and-react-dom}
 
-## Mismatching Versions of React and React DOM {#mismatching-versions-of-react-and-react-dom}
+Может быть, у вас установлена версия `react-dom` (< 16.8.0) или `react-native` (< 0.59), которая пока не поддерживает хуки. Вы можете выполнить `npm ls react-dom` или `npm ls react-native` в папке приложения, чтобы посмотреть, какую версию вы используете. Если у вас более одной версии, это также может привести к проблемам (подробнее об этом ниже).
 
-You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
+## Нарушение правил хуков {#breaking-the-rules-of-hooks}
 
-## Breaking the Rules of Hooks {#breaking-the-rules-of-hooks}
+Вы можете вызывать хуки **только в то время, когда React рендерит функциональный компонент**:
 
-You can only call Hooks **while React is rendering a function component**:
+* ✅ Вызывайте их на верхнем уровне в теле функционального компонента.
+* ✅ Вызывайте их на верхнем уровне в теле [пользовательского хука](/docs/hooks-custom.html).
 
-* ✅ Call them at the top level in the body of a function component.
-* ✅ Call them at the top level in the body of a [custom Hook](/docs/hooks-custom.html).
-
-**Learn more about this in the [Rules of Hooks](/docs/hooks-rules.html).**
+**Более подробно про это читайте на странице [Правила хуков](/docs/hooks-rules.html).**
 
 ```js{2-3,8-9}
 function Counter() {
-  // ✅ Good: top-level in a function component
+  // ✅ Хорошо: хук на вернем уровне функционального компонента
   const [count, setCount] = useState(0);
   // ...
 }
 
 function useWindowWidth() {
-  // ✅ Good: top-level in a custom Hook
+  // ✅ Хорошо: хук на вернем уровне пользовательского хука
   const [width, setWidth] = useState(window.innerWidth);
   // ...
 }
 ```
 
-To avoid confusion, it’s **not** supported to call Hooks in other cases:
+Чтобы избежать путаницы, хуки **не** поддерживаются в некоторых случаях:
 
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call in event handlers.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
+* 🔴 Не вызывайте хуки в классовых компонентах.
+* 🔴 Не вызывайте их в обработчиках событий.
+* 🔴 Не вызывайте хуки внутри функций, переданных в `useMemo`, `useReducer` или `useEffect`.
 
-If you break these rules, you might see this error.
+При нарушении перечисленных правил, можно столкнуться с этой ошибкой.
 
 ```js{3-4,11-12,20-21}
 function Bad1() {
   function handleClick() {
-    // 🔴 Bad: inside an event handler (to fix, move it outside!)
+    // 🔴 Плохо: внутри обработчика событий (для исправления переместите его на уровень выше!)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -62,7 +62,7 @@ function Bad1() {
 
 function Bad2() {
   const style = useMemo(() => {
-    // 🔴 Bad: inside useMemo (to fix, move it outside!)
+    // 🔴 Плохо: использование внутри useMemo (для исправления переместите его на уровень выше!)
     const theme = useContext(ThemeContext);
     return createStyle(theme);
   });
@@ -71,52 +71,51 @@ function Bad2() {
 
 class Bad3 extends React.Component {
   render() {
-    // 🔴 Bad: inside a class component
+    // 🔴 Плохо: использование внутри классового компонента
     useEffect(() => {})
     // ...
   }
 }
 ```
 
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch some of these mistakes.
+Можно использовать [плагин `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks), чтобы перехватить некоторые из указанных выше ошибок.
 
->Note
+>Примечание
 >
->[Custom Hooks](/docs/hooks-custom.html) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
-
+>[Пользовательские хуки](/docs/hooks-custom.html) *могут* вызывать другие хуки (именно в этом их суть). Это работает, как и ожидается, потому как пользовательские хуки также вызываются только во время рендеринга функционального компонента.
 
-## Duplicate React {#duplicate-react}
+## Дублирование React {#duplicate-react}
 
-In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
+Для работы хуков необходимо, чтобы импорт `react` внутри приложения ссылался на тот же модуль, что и импорт внутри пакета `react-dom`.
 
-If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
+Если эти `react` импорты ссылаются на два разных объекта экспорта, вы увидите такое предупреждение. Это произойдёт, если у вас случайно **оказалось несколько копий** пакета `react`
 
-If you use Node for package management, you can run this check in your project folder:
+Если вы используете Node для управления пакетами, можете проверить копии пакета, находясь в папке проекта:
 
     npm ls react
 
-If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
+Если при выполнении этой команды выводится более одной версии React, нужно выяснить, почему подобное происходит, а потом исправить дерево зависимостей. Например, возможно, что библиотека, которую вы используете неправильно, указывает `react` в качестве зависимости (а не peer-зависимости). А пока эта библиотека не будет исправлена, [разрешения Yarn](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) -- одно из возможных временных решений.
 
-You can also try to debug this problem by adding some logs and restarting your development server:
+Вы также можете попробовать отладить эту проблему, добавив логирование и перезапустив сервер разработки:
 
 ```js
-// Add this in node_modules/react-dom/index.js
+// Добавьте это в файл node_modules/react-dom/index.js
 window.React1 = require('react');
 
-// Add this in your component file
+// Добавьте это в ваш файл с компонентом
 require('react-dom');
 window.React2 = require('react');
 console.log(window.React1 === window.React2);
 ```
 
-If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community.
+Если код выше выводит `false`, то у вас может быть две версии React, а значит требуется выяснить, как это произошло. [Данное ишью](https://github.com/facebook/react/issues/13991) содержит некоторые распространённые причины, обнаруженные сообществом.
 
-This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy.
+Эта проблема также может возникнуть при использовании команды `npm link` или ей подобной. В таком случае ваш бандлер может «увидеть» два пакета React -- один в папке приложения, а другой в папке вашей библиотеки. При условии, что `myapp` и `mylib` -- папки, находящиеся на одном уровне, выполнение `npm link ../myapp/node_modules/react` из-под папки `mylib` может помочь вам. Это должно заставить библиотеку использовать React-копию из приложения.
 
->Note
+>Примечание
 >
->In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
+>В целом, React поддерживает использование нескольких независимых копий на одной странице (например, при одновременном использовании приложения и стороннего виджета). Корректная работа нарушается, если выражение `require('react')` разрешается по-разному между компонентом и копией из `react-dom`, с помощью которой он был отрендерен.
 
-## Other Causes {#other-causes}
+## Другие случаи {#other-causes}
 
-If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
+Если ни одно из решений не помогло, пожалуйста, оставьте комментарий в [этом ишью](https://github.com/facebook/react/issues/13991), после чего мы постараемся вам помочь. Попробуйте также создать небольшой пример, который воспроизводит вашу проблему.
diff --git a/content/warnings/legacy-factories.md b/content/warnings/legacy-factories.md
index a99d22e2f..335717d8b 100644
--- a/content/warnings/legacy-factories.md
+++ b/content/warnings/legacy-factories.md
@@ -1,22 +1,22 @@
 ---
-title: React Element Factories and JSX Warning
+title: Фабрики React-элементов и JSX-предупреждение
 layout: single
 permalink: warnings/legacy-factories.html
 ---
 
-You probably came here because your code is calling your component as a plain function call. This is now deprecated:
+Вы, вероятно, пришли сюда, потому что ваш код вызывает компонент как функцию. Теперь это устарело:
 
 ```javascript
 var MyComponent = require('MyComponent');
 
 function render() {
-  return MyComponent({ foo: 'bar' });  // WARNING
+  return MyComponent({ foo: 'bar' });  // ПРЕДУПРЕЖДЕНИЕ
 }
 ```
 
 ## JSX {#jsx}
 
-React components can no longer be called directly like this. Instead [you can use JSX](/docs/jsx-in-depth.html).
+Компоненты React больше не могут вызываться таким образом. Вместо этого [вы можете использовать JSX](/docs/jsx-in-depth.html).
 
 ```javascript
 var React = require('react');
@@ -27,9 +27,9 @@ function render() {
 }
 ```
 
-## Without JSX {#without-jsx}
+## Без JSX {#without-jsx}
 
-If you don't want to, or can't use JSX, then you'll need to wrap your component in a factory before calling it:
+Если вы не хотите или не можете использовать JSX, тогда перед вызовом компонента вам необходимо перевести его в фабрику:
 
 ```javascript
 var React = require('react');
@@ -40,11 +40,11 @@ function render() {
 }
 ```
 
-This is an easy upgrade path if you have a lot of existing function calls.
+Это простой путь обновления, если у вас много вызовов функций.
 
-## Dynamic components without JSX {#dynamic-components-without-jsx}
+## Динамические компоненты без JSX {#dynamic-components-without-jsx}
 
-If you get a component class from a dynamic source, then it might be unnecessary to create a factory that you immediately invoke. Instead you can just create your element inline:
+Если вы получаете класс компонента из динамического источника, то необязательно создавать фабрику, на которую вы немедленно ссылаетесь. Вместо этого вы можете напрямую создать элемент:
 
 ```javascript
 var React = require('react');
@@ -54,6 +54,6 @@ function render(MyComponent) {
 }
 ```
 
-## In Depth {#in-depth}
+## Подробнее {#in-depth}
 
-[Read more about WHY we're making this change.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
+[Узнайте подробнее, ПОЧЕМУ мы делаем это изменение.](https://gist.github.com/sebmarkbage/d7bce729f38730399d28)
diff --git a/content/warnings/refs-must-have-owner.md b/content/warnings/refs-must-have-owner.md
index 9eda89c4c..cc89ed49d 100644
--- a/content/warnings/refs-must-have-owner.md
+++ b/content/warnings/refs-must-have-owner.md
@@ -1,48 +1,50 @@
 ---
-title: Refs Must Have Owner Warning
+title: "Предупреждение: У рефа должен быть владелец"
 layout: single
 permalink: warnings/refs-must-have-owner.html
 ---
 
-You are probably here because you got one of the following error messages:
+Вероятно, вы зашли на эту страницу потому что получили одно из следующих сообщений об ошибке:
 
 *React 16.0.0+*
 > Warning:
 >
 > Element ref was specified as a string (myRefName) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
 
-*earlier versions of React*
+*более ранние версии React*
 > Warning:
 >
 > addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
 
-This usually means one of three things:
+Обычно это означает одно из трёх:
 
-- You are trying to add a `ref` to a function component.
-- You are trying to add a `ref` to an element that is being created outside of a component's render() function.
-- You have multiple (conflicting) copies of React loaded (eg. due to a misconfigured npm dependency)
+- Вы пытаетесь добавить `ref` в функциональный компонент.
+- Вы пытаетесь добавить `ref` к элементу, который был создан вне метода `render()` текущего компонента.
+- У вас загружено несколько конфликтующих копий React (например, из-за неправильной настройки npm-зависимостей).
 
-## Refs on Function Components {#refs-on-function-components}
+## Рефы и функциональные компоненты {#refs-on-function-components}
 
-If `<Foo>` is a function component, you can't add a ref to it:
+Если `<Foo>` -- функциональный компонент, ему нельзя добавить `ref`:
 
 ```js
-// Doesn't work if Foo is a function!
+// Не работает, если Foo это фукнция!
 <Foo ref={foo} />
 ```
 
-If you need to add a ref to a component, convert it to a class first, or consider not using refs as they are [rarely necessary](/docs/refs-and-the-dom.html#when-to-use-refs).
+Если требуется добавить `ref` к компоненту, преобразуйте его в класс или не пользуйтесь механизмом рефов, потому что он [редко необходим](/docs/refs-and-the-dom.html#when-to-use-refs). 
 
-## Strings Refs Outside the Render Method {#strings-refs-outside-the-render-method}
+## Строковые рефы вне метода `render` {#strings-refs-outside-the-render-method}
 
-This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). For example, this won't work:
+Обычно это означает, что вы пытаетесь добавить реф к компонентy, который не имеет владельца (т.е. не был создан внутри метода `render` какого-либо компонента).
+
+Следующий пример не будет работать:
 
 ```js
-// Doesn't work!
+// Не работает!
 ReactDOM.render(<App ref="app" />, el);
 ```
 
-Try rendering this component inside of a new top-level component which will hold the ref. Alternatively, you may use a callback ref:
+Попробуйте отрендерить этот компонент внутри нового компонента-обертки, который будет содержать реф. Как вариант, вы можете использовать колбэк-реф:
 
 ```js
 let app;
@@ -54,10 +56,10 @@ ReactDOM.render(
 );
 ```
 
-Consider if you [really need a ref](/docs/refs-and-the-dom.html#when-to-use-refs) before using this approach.
+Хорошо подумайте, [действительно ли вам нужен реф](/docs/refs-and-the-dom.html#when-to-use-refs) перед использованием этого подхода.
 
-## Multiple copies of React {#multiple-copies-of-react}
+## Несколько копий React {#multiple-copies-of-react}
 
-Bower does a good job of deduplicating dependencies, but npm does not. If you aren't doing anything (fancy) with refs, there is a good chance that the problem is not with your refs, but rather an issue with having multiple copies of React loaded into your project. Sometimes, when you pull in a third-party module via npm, you will get a duplicate copy of the dependency library, and this can create problems.
+Bower хорошо решает вопрос дублирования зависимостей, а вот npm — нет. Если вы не делаете с вашими рефами ничего особенного, скорее всего, проблема не в вашем коде, а в нескольких загруженных копиях React. Иногда, когда вы устанавливаете сторонний пакет через npm, вы можете получить дублирование библиотеки из зависимостей, и это может создать проблему.
 
-If you are using npm... `npm ls` or `npm ls react` might help illuminate.
+Если вы используете npm, `npm ls` или `npm ls react` поможет разобраться, какие установлены зависимости.
diff --git a/content/warnings/special-props.md b/content/warnings/special-props.md
index 32857abf2..89a97191b 100644
--- a/content/warnings/special-props.md
+++ b/content/warnings/special-props.md
@@ -1,9 +1,11 @@
 ---
-title: Special Props Warning
+title: Предупреждение специальных пропсов
 layout: single
 permalink: warnings/special-props.html
 ---
 
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
+Как правило, свойства, объявленные в JSX, напрямую передаются компоненту. Однако, есть два специальных пропса (`ref` и `key`), которые используются React напрямую, и поэтому компонент их не получает.
 
-For instance, attempting to access `this.props.key` from a component (i.e., the render function or [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) is not defined. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />`). While this may seem redundant, it's important to separate app logic from reconciling hints.
+К примеру, прочитать `this.props.key` из компонента (т.е. функции рендеринга или [propTypes](/docs/typechecking-with-proptypes.html#proptypes)) не удастся.
+Если дочернему компоненту тоже нужно это значение, передайте его под другим именем (например: `<ListItemWrapper key={result.id} id={result.id} />`).
+Это может показаться неудобным, но помогает разделить логику приложения от специальных инструкций для самого React.
diff --git a/examples/forwarding-refs/customized-display-name.js b/examples/forwarding-refs/customized-display-name.js
index 28bbd9203..d7a6a8c59 100644
--- a/examples/forwarding-refs/customized-display-name.js
+++ b/examples/forwarding-refs/customized-display-name.js
@@ -7,8 +7,8 @@ function logProps(Component) {
     return <LogProps {...props} forwardedRef={ref} />;
   }
 
-  // Give this component a more helpful display name in DevTools.
-  // e.g. "ForwardRef(logProps(MyComponent))"
+  // Дадим компоненту более понятное имя в инструментах разработки.
+  // Например, "ForwardRef(logProps(MyComponent))"
   // highlight-range{1-2}
   const name = Component.displayName || Component.name;
   forwardRef.displayName = `logProps(${name})`;
diff --git a/examples/forwarding-refs/fancy-button-ref.js b/examples/forwarding-refs/fancy-button-ref.js
index 36e15dd2d..6e519d817 100644
--- a/examples/forwarding-refs/fancy-button-ref.js
+++ b/examples/forwarding-refs/fancy-button-ref.js
@@ -3,10 +3,10 @@ import FancyButton from './FancyButton';
 // highlight-next-line
 const ref = React.createRef();
 
-// The FancyButton component we imported is the LogProps HOC.
-// Even though the rendered output will be the same,
-// Our ref will point to LogProps instead of the inner FancyButton component!
-// This means we can't call e.g. ref.current.focus()
+// Компонент FancyButton, который мы импортировали — это HOC LogProps.
+// Несмотря на то, что рендерят они одно и то же,
+// реф в данном случае будет указывать на LogProps, а не на сам FancyButton!
+// Это значит, что мы не сможем, например, вызвать ref.current.focus()
 // highlight-range{4}
 <FancyButton
   label="Click Me"
diff --git a/examples/forwarding-refs/fancy-button-simple-ref.js b/examples/forwarding-refs/fancy-button-simple-ref.js
index f4d5f8e0e..4ed101b12 100644
--- a/examples/forwarding-refs/fancy-button-simple-ref.js
+++ b/examples/forwarding-refs/fancy-button-simple-ref.js
@@ -5,6 +5,6 @@ const FancyButton = React.forwardRef((props, ref) => (
   </button>
 ));
 
-// You can now get a ref directly to the DOM button:
+// Теперь реф будет указывать непосредственно на DOM-узел button:
 const ref = React.createRef();
 <FancyButton ref={ref}>Click me!</FancyButton>;
diff --git a/examples/forwarding-refs/fancy-button.js b/examples/forwarding-refs/fancy-button.js
index 9dcd13e16..825d56bdd 100644
--- a/examples/forwarding-refs/fancy-button.js
+++ b/examples/forwarding-refs/fancy-button.js
@@ -6,7 +6,7 @@ class FancyButton extends React.Component {
   // ...
 }
 
-// Rather than exporting FancyButton, we export LogProps.
-// It will render a FancyButton though.
+// Вместо экспорта FancyButton, мы экспортируем LogProps.
+// Рендериться при этом будет FancyButton.
 // highlight-next-line
 export default logProps(FancyButton);
diff --git a/examples/forwarding-refs/log-props-after.js b/examples/forwarding-refs/log-props-after.js
index a603bd697..4ccfc99a9 100644
--- a/examples/forwarding-refs/log-props-after.js
+++ b/examples/forwarding-refs/log-props-after.js
@@ -9,15 +9,15 @@ function logProps(Component) {
       // highlight-next-line
       const {forwardedRef, ...rest} = this.props;
 
-      // Assign the custom prop "forwardedRef" as a ref
+      // Передаём в качестве рефа проп "forwardedRef"
       // highlight-next-line
       return <Component ref={forwardedRef} {...rest} />;
     }
   }
 
-  // Note the second param "ref" provided by React.forwardRef.
-  // We can pass it along to LogProps as a regular prop, e.g. "forwardedRef"
-  // And it can then be attached to the Component.
+  // Обратите внимание, что React.forwardRef передает "ref" вторым аргументом.
+  // Мы можем передать его дальше как проп, например, "forwardedRef",
+  // а потом привязать его к компоненту.
   // highlight-range{1-3}
   return React.forwardRef((props, ref) => {
     return <LogProps {...props} forwardedRef={ref} />;
diff --git a/examples/forwarding-refs/log-props-before.js b/examples/forwarding-refs/log-props-before.js
index a507e818b..5d384bf74 100644
--- a/examples/forwarding-refs/log-props-before.js
+++ b/examples/forwarding-refs/log-props-before.js
@@ -2,8 +2,8 @@
 function logProps(WrappedComponent) {
   class LogProps extends React.Component {
     componentDidUpdate(prevProps) {
-      console.log('old props:', prevProps);
-      console.log('new props:', this.props);
+      console.log('старые пропсы:', prevProps);
+      console.log('новые пропсы:', this.props);
     }
 
     render() {
diff --git a/examples/react-component-reference/get-snapshot-before-update.js b/examples/react-component-reference/get-snapshot-before-update.js
index cf1fb2335..6dbdf5e02 100644
--- a/examples/react-component-reference/get-snapshot-before-update.js
+++ b/examples/react-component-reference/get-snapshot-before-update.js
@@ -5,8 +5,8 @@ class ScrollingList extends React.Component {
   }
 
   getSnapshotBeforeUpdate(prevProps, prevState) {
-    // Are we adding new items to the list?
-    // Capture the scroll position so we can adjust scroll later.
+    // Добавляются ли в список новые элементы?
+    // Запоминаем значение прокрутки, чтобы использовать его позже.
     if (prevProps.list.length < this.props.list.length) {
       const list = this.listRef.current;
       return list.scrollHeight - list.scrollTop;
@@ -15,9 +15,9 @@ class ScrollingList extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState, snapshot) {
-    // If we have a snapshot value, we've just added new items.
-    // Adjust scroll so these new items don't push the old ones out of view.
-    // (snapshot here is the value returned from getSnapshotBeforeUpdate)
+    // Если снимок (snapshot) передан, значит элементы добавлены.
+    // Выравниваем прокрутку так, чтобы новые элементы не выталкивали старые.
+    // (снимок – значение, переданное из getSnapshotBeforeUpdate)
     if (snapshot !== null) {
       const list = this.listRef.current;
       list.scrollTop = list.scrollHeight - snapshot;
diff --git a/gatsby-config.js b/gatsby-config.js
index 456396f92..201866a00 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -8,10 +8,12 @@
 
 module.exports = {
   siteMetadata: {
-    title: 'React: A JavaScript library for building user interfaces',
+    title:
+      'React: JavaScript-библиотека для создания пользовательских интерфейсов',
     siteUrl: 'https://reactjs.org',
     rssFeedTitle: 'React',
-    rssFeedDescription: 'A JavaScript library for building user interfaces',
+    rssFeedDescription:
+      'JavaScript-библиотека для создания пользовательских интерфейсов',
   },
   mapping: {
     'MarkdownRemark.frontmatter.author': 'AuthorYaml',
diff --git a/package.json b/package.json
index 0dd174fb9..f1628e72e 100644
--- a/package.json
+++ b/package.json
@@ -46,8 +46,8 @@
     "normalize.css": "^8.0.0",
     "prettier": "^1.7.4",
     "prismjs": "^1.15.0",
-    "react": "16.7.0-alpha.0",
-    "react-dom": "16.7.0-alpha.0",
+    "react": "16.8.3",
+    "react-dom": "16.8.3",
     "react-helmet": "^5.2.0",
     "react-live": "1.8.0-0",
     "remarkable": "^1.7.1",
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 6e42fff7e..d18e2a7d6 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -56,12 +56,12 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          Не получилось загрузить Babel.
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          Это может быть связано с блокировщиком рекламы. Если вы используете
+          один из них, добавьте адрес reactjs.org в белый список, чтобы примеры
+          кода заработали.
         </span>
       );
     } else if (error != null) {
@@ -99,7 +99,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                Интерактивный JSX-редактор
                 <label
                   css={{
                     fontSize: 14,
@@ -169,7 +169,7 @@ class CodeEditor extends Component {
                   cssProps={{
                     color: colors.white,
                   }}>
-                  Error
+                  Ошибка
                 </MetaTitle>
               </div>
               <pre
@@ -200,7 +200,7 @@ class CodeEditor extends Component {
                   padding: '0 10px',
                   backgroundColor: colors.divider,
                 }}>
-                <MetaTitle>Result</MetaTitle>
+                <MetaTitle>Результат</MetaTitle>
               </div>
               <div
                 id={containerNodeID}
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index bc5d6ed10..1db45ad81 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -61,7 +61,7 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>Загрузка примера с кодом...</h4>
         )}
       </div>
     );
diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js
index d179a09be..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 (
       <p>
-        When you encounter an error, you'll receive a link to this page for that
-        specific error and we'll show you the full error text.
+        Когда происходит ошибка, вы получите ссылку на эту страницу. На ней вы
+        увидите полный текст конкретной ошибки.
       </p>
     );
   }
@@ -78,7 +78,7 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   return (
     <div>
       <p>
-        <b>The full text of the error you just encountered is:</b>
+        <b>Полный текст обнаруженной ошибки:</b>
       </p>
       <code>
         <b>{urlify(errorMsg)}</b>
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index bca76aac6..bcc9de347 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -60,7 +60,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             },
           }}>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Docs</MetaTitle>
+            <MetaTitle onDark={true}>Документация</MetaTitle>
             {sectionListDocs.map(section => {
               const defaultItem = section.items[0];
               return (
@@ -73,7 +73,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <MetaTitle onDark={true}>Каналы</MetaTitle>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
               target="_blank"
@@ -90,19 +90,19 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://discuss.reactjs.org"
               target="_blank"
               rel="noopener">
-              Discussion Forum
+              Форум
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://discord.gg/0ZcbPKXt5bZjGY5n"
               target="_blank"
               rel="noopener">
-              Reactiflux Chat
+              Чат Reactiflux
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://dev.to/t/react"
               target="_blank"
               rel="noopener">
-              DEV Community
+              Сообщество на DEV
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://www.facebook.com/react"
@@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>Сообщество</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,12 +128,10 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
-            <FooterLink to="/blog/">Blog</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
+            <MetaTitle onDark={true}>Дополнительно</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Введение</FooterLink>
+            <FooterLink to="/blog/">Блог</FooterLink>
+            <FooterLink to="/acknowledgements.html">Благодарности</FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
               target="_blank"
@@ -179,7 +177,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               color: colors.subtleOnDark,
               paddingTop: 15,
             }}>
-            Copyright © 2018 Facebook Inc.
+            {`Copyright © ${new Date().getFullYear()} Facebook Inc.`}
           </p>
         </section>
       </div>
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index b31505917..3754a92fe 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -104,8 +104,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
-          aria-label="Search docs"
+          placeholder="Поиск"
+          aria-label="Поиск"
         />
       </form>
     ) : null;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index 55743a7c1..f1763c4fe 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -115,22 +115,22 @@ const Header = ({location}: {location: Location}) => (
           }}>
           <HeaderLink
             isActive={location.pathname.includes('/docs/')}
-            title="Docs"
+            title="Документация"
             to="/docs/getting-started.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
+            title="Введение"
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="Сообщество"
             to="/community/support.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/blog')}
-            title="Blog"
+            title="Блог"
             to="/blog/"
           />
         </nav>
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 9214552bb..e6e68cc74 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -88,7 +88,7 @@ const MarkdownPage = ({
                   {date}{' '}
                   {hasAuthors && (
                     <span>
-                      by{' '}
+                      от{' '}
                       {toCommaSeparatedList(authors, author => (
                         <a
                           css={sharedStyles.link}
@@ -115,7 +115,7 @@ const MarkdownPage = ({
                       href={`https://github.com/reactjs/reactjs.org/tree/master/${
                         markdownRemark.fields.path
                       }`}>
-                      Edit this page
+                      Отредактировать эту страницу
                     </a>
                   </div>
                 )}
diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
index 37dc325bf..4cc2d7d1b 100644
--- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js
+++ b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
@@ -8,7 +8,8 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription =
+  'JavaScript-библиотека для создания пользовательских интерфейсов';
 
 type Props = {
   title: string,
diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js
index 90103b03b..513aea22f 100644
--- a/src/pages/acknowledgements.html.js
+++ b/src/pages/acknowledgements.html.js
@@ -54,10 +54,10 @@ const Acknowlegements = ({data, location}) => (
               </li>
               <li>
                 <a href="https://christopheraue.net/">Christopher Aue</a> for
-                letting us use the <a href="http://reactjs.com/">reactjs.com</a>{' '}
-                domain name and the{' '}
-                <a href="https://twitter.com/reactjs">@reactjs</a> username on
-                Twitter.
+                letting us use the{' '}
+                <a href="https://reactjs.com/">reactjs.com</a> domain name and
+                the <a href="https://twitter.com/reactjs">@reactjs</a> username
+                on Twitter.
               </li>
               <li>
                 <a href="https://github.com/ProjectMoon">ProjectMoon</a> for
diff --git a/src/pages/index.js b/src/pages/index.js
index bc2d732fd..c2f5e341b 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -17,7 +17,6 @@ import {colors, media, sharedStyles} from 'theme';
 import loadScript from 'utils/loadScript';
 import createOgUrl from 'utils/createOgUrl';
 import {babelURL} from 'site-constants';
-import ReactDOM from 'react-dom';
 import logoWhiteSvg from 'icons/logo-white.svg';
 
 class Home extends Component {
@@ -51,7 +50,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; JavaScript-библиотека для создания пользовательских интерфейсов"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +133,8 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    JavaScript-библиотека для создания пользовательских
+                    интерфейсов
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Начать работу
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Перейти к введению
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Начать работу
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Перейти к учебнику
                   </ButtonLink>
                 </CtaItem>
               </Flex>
@@ -310,13 +310,6 @@ Home.propTypes = {
   }).isRequired,
 };
 
-function renderExamplePlaceholder(containerId) {
-  ReactDOM.render(
-    <h4>Loading code example...</h4>,
-    document.getElementById(containerId),
-  );
-}
-
 const CtaItem = ({children, primary = false}) => (
   <div
     css={{
diff --git a/src/site-constants.js b/src/site-constants.js
index a401ab74b..5144290f8 100644
--- a/src/site-constants.js
+++ b/src/site-constants.js
@@ -8,7 +8,7 @@
 // NOTE: We can't just use `location.toString()` because when we are rendering
 // the SSR part in node.js we won't have a proper location.
 const urlRoot = 'https://reactjs.org';
-const version = '16.8.1';
+const version = '16.8.3';
 const babelURL = 'https://unpkg.com/babel-standalone@6.26.0/babel.min.js';
 
 export {urlRoot, version, babelURL};