Context translation (ready)

examples/context/motivation-problem.js

@@ -5,11 +5,12 @@ class App extends React.Component {
 }
 
 function Toolbar(props) {
-  // highlight-range{1-4,7}
-  // The Toolbar component must take an extra "theme" prop
-  // and pass it to the ThemedButton. This can become painful
-  // if every single button in the app needs to know the theme
-  // because it would have to be passed through all components.
+  // highlight-range{1-5,8}
+  // Компонент Toolbar должен передать проп "theme" ниже,
+  // фактически не используя его. Учитывая, что у вас в приложении
+  // может быть десятки компонентов, использующих UI-тему,
+  // вам придётся передавать проп "theme" через все компоненты.
+  // И в какой-то момент это станет настоящей проблемой.
   return (
     <div>
       <ThemedButton theme={props.theme} />

examples/context/motivation-solution.js

@@ -1,15 +1,17 @@
-// highlight-range{1-4}
-// Context lets us pass a value deep into the component tree
-// without explicitly threading it through every component.
-// Create a context for the current theme (with "light" as the default).
+// highlight-range{1-5}
+// Контекст позволяет передавать значение глубоко
+// в дерево компонентов без явной передачи пропсов
+// на каждом уровне. Создадим контекст для текущей
+// UI-темы (со значением "light" по умолчанию).
 const ThemeContext = React.createContext('light');
 
 class App extends React.Component {
   render() {
-    // highlight-range{1-3,5}
-    // Use a Provider to pass the current theme to the tree below.
-    // Any component can read it, no matter how deep it is.
-    // In this example, we're passing "dark" as the current value.
+    // highlight-range{1-4,6}
+    // Provider компонент используется для передачи текущей
+    // UI-темы вниз по дереву. Любой компонент может использовать
+    // этот контекст и не важно, как глубоко он находится.
+    // В этом примере мы передаём "dark" в качестве значения контекста.
     return (
       <ThemeContext.Provider value="dark">
         <Toolbar />
@@ -19,8 +21,8 @@ class App extends React.Component {
 }
 
 // highlight-range{1,2}
-// A component in the middle doesn't have to
-// pass the theme down explicitly anymore.
+// Компонент, который находится в середине,
+// теперь не должен явно передавать UI-тему вниз.
 function Toolbar(props) {
   return (
     <div>
@@ -30,10 +32,11 @@ function Toolbar(props) {
 }
 
 class ThemedButton extends React.Component {
-  // highlight-range{1-3,6}
-  // Assign a contextType to read the current theme context.
-  // React will find the closest theme Provider above and use its value.
-  // In this example, the current theme is "dark".
+  // highlight-range{1-4,7}
+  // Определяем contextType, чтобы получить значение контекста.
+  // React найдёт (выше по дереву) ближайший Provider-компонент,
+  // предоставляющий этот контекст, и использует его значение.
+  // В этом примере значение UI-темы будет "dark".
   static contextType = ThemeContext;
   render() {
     return <Button theme={this.context} />;

examples/context/multiple-contexts.js

@@ -1,7 +1,7 @@
-// Theme context, default to light theme
+// Контекст UI-темы, со светлым значение по умолчанию
 const ThemeContext = React.createContext('light');
 
-// Signed-in user context
+// Контекст активного пользователя
 const UserContext = React.createContext({
   name: 'Guest',
 });
@@ -10,7 +10,7 @@ class App extends React.Component {
   render() {
     const {signedInUser, theme} = this.props;
 
-    // App component that provides initial context values
+    // App компонент, который предоставляет начальные значения контекстов
     // highlight-range{2-3,5-6}
     return (
       <ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
   );
 }
 
-// A component may consume multiple contexts
+// Компонент, который может использовать несколько контекстов
 function Content() {
   // highlight-range{2-10}
   return (

examples/context/theme-detailed-app.js

@@ -1,7 +1,7 @@
 import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './themed-button';
 
-// An intermediate component that uses the ThemedButton
+// Промежуточный компонент, который использует ThemedButton
 function Toolbar(props) {
   return (
     <ThemedButton onClick={props.changeTheme}>
@@ -28,10 +28,11 @@ class App extends React.Component {
   }
 
   render() {
-    //highlight-range{1-3}
-    // The ThemedButton button inside the ThemeProvider
-    // uses the theme from state while the one outside uses
-    // the default dark theme
+    //highlight-range{1-4}
+    // ThemedButton внутри ThemeProvider использует
+    // значение светлой UI-темы из состояния, в то время как
+    // ThemedButton, который находится вне ThemeProvider,
+    // использует тёмную UI-тему из значения по умолчанию
     //highlight-range{3-5,7}
     return (
       <Page>

examples/context/theme-detailed-theme-context.js

@@ -11,5 +11,5 @@ export const themes = {
 
 // highlight-range{1-3}
 export const ThemeContext = React.createContext(
-  themes.dark // default value
+  themes.dark // значение по умолчанию
 );

examples/context/updating-nested-context-app.js

@@ -15,8 +15,8 @@ class App extends React.Component {
     };
 
     // highlight-range{1-2,5}
-    // State also contains the updater function so it will
-    // be passed down into the context provider
+    // Состояние хранит функцию для обновления контекста,
+    // которая будет также передана в Provider-компонент.
     this.state = {
       theme: themes.light,
       toggleTheme: this.toggleTheme,
@@ -25,7 +25,7 @@ class App extends React.Component {
 
   render() {
     // highlight-range{1,3}
-    // The entire state is passed to the provider
+    // Всё состояние передаётся в качестве значения контекста
     return (
       <ThemeContext.Provider value={this.state}>
         <Content />

examples/context/updating-nested-context-context.js

@@ -1,5 +1,6 @@
-// Make sure the shape of the default value passed to
-// createContext matches the shape that the consumers expect!
+// Убедитесь, что форма значения по умолчанию,
+// передаваемого в createContext, совпадает с формой объекта,
+// которую ожидают потребители контекста.
 // highlight-range{2-3}
 export const ThemeContext = React.createContext({
   theme: themes.dark,

examples/context/updating-nested-context-theme-toggler-button.js

@@ -2,8 +2,8 @@ import {ThemeContext} from './theme-context';
 
 function ThemeTogglerButton() {
   // highlight-range{1-2,5}
-  // The Theme Toggler Button receives not only the theme
-  // but also a toggleTheme function from the context
+  // ThemeTogglerButton получает из контекста
+  // не только значение UI-темы, но и функцию toggleTheme.
   return (
     <ThemeContext.Consumer>
       {({theme, toggleTheme}) => (

gatsby-config.js

@@ -8,10 +8,12 @@
 
 module.exports = {
   siteMetadata: {
-    title: 'React: JavaScript-библиотека для создания пользовательских интерфейсов',
+    title:
+      'React: JavaScript-библиотека для создания пользовательских интерфейсов',
     siteUrl: 'https://reactjs.org',
     rssFeedTitle: 'React',
-    rssFeedDescription: 'JavaScript-библиотека для создания пользовательских интерфейсов',
+    rssFeedDescription:
+      'JavaScript-библиотека для создания пользовательских интерфейсов',
   },
   mapping: {
     'MarkdownRemark.frontmatter.author': 'AuthorYaml',

src/components/CodeEditor/CodeEditor.js

@@ -59,8 +59,9 @@ class CodeEditor extends Component {
           Не получилось загрузить Babel.
           <br />
           <br />
-          Это может быть связано с блокировщиком рекламы. Если вы используете один из них,
-          добавьте адрес reactjs.org в белый список, чтобы примеры кода заработали.
+          Это может быть связано с блокировщиком рекламы. Если вы используете
+          один из них, добавьте адрес reactjs.org в белый список, чтобы примеры
+          кода заработали.
         </span>
       );
     } else if (error != null) {

src/components/ErrorDecoder/ErrorDecoder.js

@@ -69,8 +69,8 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   if (!code) {
     return (
       <p>
-        Когда происходит ошибка, вы получите ссылку на эту страницу.
-        На ней вы увидите полный текст конкретной ошибки.
+        Когда происходит ошибка, вы получите ссылку на эту страницу. На ней вы
+        увидите полный текст конкретной ошибки.
       </p>
     );
   }

src/components/LayoutFooter/Footer.js

@@ -131,9 +131,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             <MetaTitle onDark={true}>Дополнительно</MetaTitle>
             <FooterLink to="/tutorial/tutorial.html">Введение</FooterLink>
             <FooterLink to="/blog/">Блог</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Благодарности
-            </FooterLink>
+            <FooterLink to="/acknowledgements.html">Благодарности</FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
               target="_blank"

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -8,7 +8,8 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 
-const defaultDescription = 'JavaScript-библиотека для создания пользовательских интерфейсов';
+const defaultDescription =
+  'JavaScript-библиотека для создания пользовательских интерфейсов';
 
 type Props = {
   title: string,

src/pages/index.js

@@ -134,7 +134,8 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    JavaScript-библиотека для создания пользовательских интерфейсов
+                    JavaScript-библиотека для создания пользовательских
+                    интерфейсов
                   </p>
                   <Flex
                     valign="center"