Вычитка

Author: vvscode

content/tutorial/tutorial.md

@@ -16,7 +16,7 @@ redirect_from:
 
 ## Прежде чем начать {#before-we-start-the-tutorial}
 
-По ходу этого руководства мы создадим небольшую игру. **Возможно, вы захотите пропустить это, потому что вы не создаёте игру, но вам стоит попробовать.** Походы, которые мы изучим в этом руководстве являются базовыми при создании любого React-приложения. Их освоение даст вам глубокое понимание React.
+По ходу этого руководства мы создадим небольшую игру. **Возможно, вы захотите пропустить это, потому что вы не создаёте игры, но вам стоит попробовать.** Подходы, которые мы изучим в этом руководстве являются базовыми при создании любого React-приложения. Их освоение даст вам глубокое понимание React.
 
 >Совет
 >
@@ -27,18 +27,18 @@ redirect_from:
 * [Настройка оружения](#setup-for-the-tutorial) даст вам **отправную точку** для изучения руководства.
 * [Обзор](#overview) научит вас **основам** React: компоненты, пропсы и состояние.
 * [Создание игры](#completing-the-game) научит вас **наиболее распространённым подходам** в React-разработке.
-* [Добавив Путешествие Во Времени](#adding-time-travel) вы получите  **более глубокое понимание** особенностей и сильных сторон React.
+* [Добавив Путешествие Во Времени](#adding-time-travel) вы получите **более глубокое понимание** особенностей и сильных сторон React.
 
-Вам не обязательно проходить все части за раз, чтобы получить пользу от этого руководства. Изучите столько, сколько можете - даже если это будет одна или две секции.
+Вам не обязательно проходить все части за раз, чтобы получить пользу от этого руководства. Изучите столько, сколько можете, даже если это будет одна или две секции.
 
-Вполне нормально копировать код по мере прохождения руководства. Но мы советуем набирать его самим. Это позволит вам подключить мышечную память и улучшит понимание.
+Вполне нормально копировать код по мере изучения руководства. Но мы советуем набирать его самим. Это позволит вам подключить мышечную память и улучшить понимание.
 
 
 ### Что мы собираемся писать? {#what-are-we-building}
 
 В этом руководстве мы покажем как создать интерактивную игру крестики-нолики на React.
 
-Результат вы можете посмотреть здесь **[Готовая Игра](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Если её код вам ни о чем не говорит, или вы не знакомы с синтаксисом - не беспокойтесь. Цель этого руководства - помочь вам разобраться с React и его синтаксисом.
+Результат вы можете посмотреть здесь **[Готовая Игра](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Если её код вам ни о чем не говорит, или вы не знакомы с синтаксисом, не беспокойтесь. Цель этого руководства - помочь вам разобраться с React и его синтаксисом.
 
 Мы советуем вам поиграть в готовые крестики-нолики, прежде чем приниматься за руководство. Одна из особенностей, которую вы можете заметить - это нумерованный список справа от игрового поля. Этот список отображает историю всех игровых ходов, и обновляется по мере игры.
 
@@ -47,9 +47,9 @@ redirect_from:
 
 ### Предварительные требования {#prerequisites}
 
-Мы будем полагать, что вы немного знакомы с HTML и JavaScript. Однако вы сможете изучать руководство, даже если вы пришли с других языков программирования. Мы также полагаем, что вы знакомы с такими понятиями программирования как функции, объекты, массивы и , в меньшей степени, классы.
+Мы будем полагать, что вы немного знакомы с HTML и JavaScript. Однако вы сможете изучать руководство, даже если вы пришли с других языков программирования. Мы также полагаем, что вы знакомы с такими понятиями программирования как функции, объекты, массивы и, в меньшей степени, классы.
 
-Если вам нужен обзор по JavaScript, мы рекомендуем прочитать [вот этот учебник](https://developer.mozilla.org/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Отметим, что мы используем некоторые особенности из ES6 - последней версии JavaScript. Такие как  [стрелочные функции](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [классы](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes), объявления [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), и [`const`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/const). Вы можете воспользоваться [Babel REPL](babel://es5-syntax-example), чтобы узнать во что компилируется код на ES6.
+Если вам нужен обзор JavaScript, мы рекомендуем прочитать [вот этот учебник](https://developer.mozilla.org/ru/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Отметим, что мы используем некоторые особенности из ES6 - последней версии JavaScript - такие как [стрелочные функции](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [классы](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Classes), объявления [`let`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/let), и [`const`](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Statements/const). Вы можете воспользоваться [Babel REPL](babel://es5-syntax-example), чтобы узнать во что компилируется код на ES6.
 
 ## Настройка окружения {#setup-for-the-tutorial}
 
@@ -65,7 +65,7 @@ redirect_from:
 
 ### Вариант 2: Локальное окружение для разработки {#setup-option-2-local-development-environment}
 
-Это не является обязательным и не требуется руководством!
+Это не является обязательным и не требуется этим руководством!
 
 <br>
 
@@ -75,7 +75,7 @@ redirect_from:
 
 Эти настройки потребуют больше сил, но позволят продолжать работу с использованием выбранного вами редактора. Вот что нужно сделать:
 
-1. Убедиться, что у вас установлена последняя версия  [Node.js](https://nodejs.org/en/).
+1. Убедиться, что у вас установлена последняя версия [Node.js](https://nodejs.org/en/).
 2. Выполнить [инструкции по установке Create React App](/docs/create-a-new-react-app.html#create-react-app) для создания нового проекта.
 
 ```bash
@@ -102,9 +102,9 @@ del *
 cd ..
 ```
 
-4. Создайте файл с именем `index.css` в папку `src/` и добавьте в него [вот этот CSS код](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
+4. Создайте файл с именем `index.css` в папке `src/` и добавьте в него [вот этот CSS код](https://codepen.io/gaearon/pen/oWWQNa?editors=0100).
 
-5. Создайте файл с именем `index.js` в папку `src/` и добавьте в него [этот JS код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
+5. Создайте файл с именем `index.js` в папке `src/` и добавьте в него [этот JS код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010).
 
 6. В начало файла `index.js` в папке`src/` добавьте следующие три строчки:
 
@@ -129,9 +129,9 @@ import './index.css';
 
 ### Что такое React? {#what-is-react}
 
-React - это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет вам составлять сложный UI из маленьких изолированных кусочков кода, называемых "компоненты".
+React - это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет вам составлять сложный UI из маленьких изолированных кусочков кода, называемых "компонентами".
 
-React имеет несколько разных видов компонент, но мы начнём с подклассов `React.Component`:
+React имеет несколько разных видов компонентов, но мы начнём с подклассов `React.Component`:
 
 ```javascript
 class ShoppingList extends React.Component {
@@ -152,9 +152,9 @@ class ShoppingList extends React.Component {
 // Пример использования: <ShoppingList name="Марк" />
 ```
 
-Скоро мы перейдём к этим забавным, похожим на XML, тегам. Мы используем компоненты, чтобы объяснить React, что мы хотим увидеть на экране. Когда наш данные изменятся, React эффективно обновит и перерисует наши компоненты.
+Скоро мы перейдём к этим забавным, похожим на XML, тегам. Мы используем компоненты, чтобы объяснить React, что мы хотим увидеть на экране. Когда наши данные изменятся, React эффективно обновит и перерисует наши компоненты.
 
-Здесь, `ShoppingList` - это пример **классового компонента React**, или **тип React-компонента**. Компонент принимает параметры, которые называются пропсы (`props`, сокращение от `properties` - свойства), и возвращает из метода `render()` иерархию представлений для отображения.
+Здесь, `ShoppingList` - это пример **классового компонента React**, или **тип React-компонента**. Компонент принимает параметры, которые называются пропсами (`props`, сокращение от `properties` - свойства), и возвращает из метода `render()` иерархию представлений для отображения.
 
 Метод `render` возвращает *описание* того, что вы ходите увидеть на экране. React берет это описание и отображает результат. Точнее, `render` возвращает **React-элемент**, который является легковесным описанием того, что нужно отрендерить. Большинство React-разработчиков используют специальный синтаксис под названием "JSX" для упрощения описания структуры. Синтаксис `<div />` преобразовывается в `React.createElement('div')`. Пример выше равнозначен вот этому:
 
@@ -167,9 +167,9 @@ return React.createElement('div', {className: 'shopping-list'},
 
 [Смотрите полную версию.](babel://tutorial-expanded-version)
 
-Если вам интересно, то `createElement()` более подробно описан в [Документации](/docs/react-api.html#createelement), но мы не будем им пользоваться в этом руководства. Вместо этого мы продолжим пользоваться JSX.
+Если вам интересно, то `createElement()` более подробно описан в [Документации](/docs/react-api.html#createelement), но мы не будем им пользоваться в этом руководстве. Вместо этого мы продолжим пользоваться JSX.
 
-JSX обладает всей мощью JavaScript. В JSX вы  можете использовать *любые* JavaScript выражения внутри фигурных скобок. Каждый React-элемент является JavaScript объектов, в котором вы можете хранить переменные или которым вы можете оперировать внутри программы.
+JSX обладает всей мощью JavaScript. В JSX вы можете использовать *любые* JavaScript выражения внутри фигурных скобок. Каждый React-элемент является JavaScript объектом, в котором вы можете хранить переменные или которым вы можете оперировать внутри программы.
 
 Приведённый выше компонент `ShoppingList` только рендерит встроенные DOM-компоненты вроде `<div />` или `<li />`. Но вы также можете составлять и рендерить собственные компоненты. Например, теперь вы можете ссылаться на весь компонент со списком покупок написав `<ShoppingList />`. Каждый React-компонент инкапсулирован и может использоваться независимо, это позволяет создавать сложный UI из простых компонентов.
 
@@ -181,7 +181,7 @@ JSX обладает всей мощью JavaScript. В JSX вы  можете 
 
 Исследуя этот код, вы обнаружите, что у нас есть три React-компонента:
 
-* Square (Квадрат)
+* Square (Клетка)
 * Board (Поле)
 * Game (Игра)
 
@@ -190,7 +190,7 @@ JSX обладает всей мощью JavaScript. В JSX вы  можете 
 ### Передача данных через пропсы {#passing-data-through-props}
 
 Для начала, давайте попробуем передать некоторые данные из нашего `Board`-компонента в компонент `Square`.
-Изменим метод `renderSquare` внутри `Board`, чтобы он передавал в `Square` проп с назнанием `value`:
+Изменим метод `renderSquare` внутри `Board`, чтобы он передавал в `Square` проп с названием `value`:
 
 
 ```js{3}
@@ -218,7 +218,7 @@ class Square extends React.Component {
 
 ![React Devtools](../images/tutorial/tictac-empty.png)
 
-После: Вы должны увидеть число, внутри каждого отрисованного квадрата.
+После: Вы должны увидеть число, внутри каждой отрисованной ячейки.
 
 ![React Devtools](../images/tutorial/tictac-numbers.png)
 
@@ -262,7 +262,7 @@ class Square extends React.Component {
 >}
 >```
 >
->Обратите внимание что в `onClick={() => alert('click')}`, мы передаём *функцию* в качестве значения проп `onClick`. Она отработает только при клике. Опускать `() =>` и присать сразу `onClick={alert('click')}` - это распространённая ошибка. Такой код будет выдавать сообщение каждый раз, когда компонент перерендеривается..
+>Обратите внимание что в `onClick={() => alert('click')}`, мы передаём *функцию* в качестве значения проп `onClick`. Она отработает только при клике. Опускать `() =>` и присать сразу `onClick={alert('click')}` - это распространённая ошибка. Такой код будет выдавать сообщение каждый раз, когда компонент перерендеривается.
 
 Дальше мы хотим, чтобы Square-компонент "запоминал", что по ниму кликнули и отрисовывал "X".
 Для "запоминания" компоненты используют **состояние**.
@@ -340,7 +340,7 @@ class Square extends React.Component {
 
 React DevTools позволяют просматривать пропсы и состояние ваших React-компонентов.
 
-После установки React DevTools, вы можете кликнуть правой кнопкой мыши на любом элемента страницы и нажать `Inspect` (`Просмотреть код`) для открытия инструментов разработчика. Вкладка React будет крайней справа.
+После установки React DevTools, вы можете кликнуть правой кнопкой мыши на любом элементе страницы и нажать `Inspect` (`Просмотреть код`) для открытия инструментов разработчика. Вкладка React будет крайней справа.
 
 
 **Внимание, чтобы это работало на CodePen нужно сделать ещё несколько действий:**