Checked previus mistakes

Author: Dik131

src/content/learn/tutorial-tic-tac-toe.md

@@ -275,7 +275,7 @@ body {
 
 ## Обзор {/*overview*/}
 
-Теперь, когда вы настроились, давайте сделаем обзор React приложения!
+Теперь, когда вы настроились, давайте сделаем обзор React-приложения!
 
 ### Проверка стартового кода {/*inspecting-the-starter-code*/}
 
@@ -303,7 +303,7 @@ export default function Square() {
 
 #### `App.js` {/*appjs*/}
 
-Код в `App.js` создаёт _компонент_. В React компонент - это часть интерфейса пользователя, которую можно повторно использовать. Компоненты используются для отображения, управления и обновления элементов интерфейса в вашем приложении. Давайте посмотрим на компонент построчно, чтобы понять, что в нёмпроисходит:
+Код в `App.js` создаёт _компонент_. В React-компонент - это часть интерфейса пользователя, которую можно повторно использовать. Компоненты используются для отображения, управления и обновления элементов интерфейса в вашем приложении. Давайте посмотрим на компонент построчно, чтобы понять, что в нёмпроисходит:
 
 ```js {1}
 export default function Square() {
@@ -319,11 +319,11 @@ export default function Square() {
 }
 ```
 
-Вторая строка возвращает кнопку. В JavaScript ключевое слово `return` означает, что что-то, что следует за ним, возвращается как значение вызывающей функции. `<button>` является *JSX элементом*. JSX элемент - это комбинация JavaScript кода и HTML тегов, которая описывает то, что вы хотите отобразить. `className="square"` является свойством кнопки или *prop*, который сообщает CSS, как стилизовать кнопку. `X` является текстом, отображаемым внутри кнопки, а `</button>` закрывает JSX элемент, чтобы указать, что любое последующее содержимое не должно быть размещено внутри кнопки.
+Вторая строка возвращает кнопку. В JavaScript ключевое слово `return` означает, что что-то, что следует за ним, возвращается как значение вызывающей функции. `<button>` является *JSX элементом*. JSX элемент - это комбинация JavaScript-кода и HTML-тегов, которая описывает то, что вы хотите отобразить. `className="square"` является свойством кнопки или *prop*, который сообщает CSS, как стилизовать кнопку. `X` является текстом, отображаемым внутри кнопки, а `</button>` закрывает JSX элемент, чтобы указать, что любое последующее содержимое не должно быть размещено внутри кнопки.
 
 #### `styles.css` {/*stylescss*/}
 
-Нажмите на файл, отмеченный `styles.css`, в разделе _Files_ в CodeSandbox. Этот файл определяет стили для вашего React приложения. Первые два _CSS селектора_ (`*` и `body`) определяют стиль основной части вашего приложения, в то время как `.square` селектор определяет стиль любого компонента, где свойство `className` установлено в `square`. В вашем коде это будет соответствовать кнопке из компонента Square в файле `App.js`.
+Нажмите на файл, отмеченный `styles.css`, в разделе _Files_ в CodeSandbox. Этот файл определяет стили для вашего React-приложения. Первые два _CSS селектора_ (`*` и `body`) определяют стиль основной части вашего приложения, в то время как `.square` селектор определяет стиль любого компонента, где свойство `className` установлено в `square`. В вашем коде это будет соответствовать кнопке из компонента Square в файле `App.js`.
 
 #### `index.js` {/*indexjs*/}
 
@@ -366,7 +366,7 @@ export default function Square() {
 
 </ConsoleBlock>
 
-React компоненты должны возвращать одиночный JSX элемент и не могут возвращать несколько соседних JSX элементов, как две кнопки. Чтобы это исправить, вы можете использовать *Fragments* (`<>` и `</>`) для обертывания нескольких соседних JSX элементов, как это:
+React-компоненты должны возвращать одиночный JSX элемент и не могут возвращать несколько соседних JSX элементов, как две кнопки. Чтобы это исправить, вы можете использовать *Fragments* (`<>` и `</>`) для обертывания нескольких соседних JSX элементов, как это:
 
 ```js {3-6}
 export default function Square() {
@@ -581,7 +581,7 @@ function Square({ value }) {
 
 ![value-filled board](../images/tutorial/board-filled-with-value.png)
 
-Вы хотели отобразить JavaScript переменную `value`, которая содержится в компоненте, а не слово "value". Чтобы "выйти из JSX" в JavaScript, вам нужно использовать фигурные скобки. Добавьте фигурные скобки вокруг `value` в JSX:
+Вы хотели отобразить JavaScript-переменную `value`, которая содержится в компоненте, а не слово "value". Чтобы "выйти из JSX" в JavaScript, вам нужно использовать фигурные скобки. Добавьте фигурные скобки вокруг `value` в JSX:
 
 ```js {2}
 function Square({ value }) {
@@ -794,7 +794,7 @@ function Square() {
 }
 ```
 
-Вызвав `set` функцию из `onClick` handler, вы говорите Reactу перерендерить компонент `Square` каждый раз, когда его `<button>` будет нажат. После обновления `Square`'s `value` будет `'X'`, поэтому вы увидите "X" на игровом поле. Нажмите на любое квадрат, и "X" должен появиться:
+Вызвав `set` функцию из `onClick` handler, вы говорите React'у перерендерить компонент `Square` каждый раз, когда его `<button>` будет нажат. После обновления `Square`'s `value` будет `'X'`, поэтому вы увидите "X" на игровом поле. Нажмите на любое квадрат, и "X" должен появиться:
 
 ![adding xes to board](../images/tutorial/tictac-adding-x-s.gif)
 
@@ -896,7 +896,7 @@ body {
 
 ### React Developer Tools {/*react-developer-tools*/}
 
-React DevTools позволяет проверить props и состояние ваших React компонентов. Вы можете найти вкладку React DevTools внизу раздела _браузер_ в CodeSandbox:
+React DevTools позволяет проверить props и состояние ваших React-компонентов. Вы можете найти вкладку React DevTools внизу раздела _браузер_ в CodeSandbox:
 
 ![React DevTools in CodeSandbox](../images/tutorial/codesandbox-devtools.png)
 
@@ -1549,11 +1549,11 @@ function calculateWinner(squares) {
 
 <Note>
 
-It does not matter whether you define `calculateWinner` before or after the `Board`. Let's put it at the end so that you don't have to scroll past it every time you edit your components.
+Это не важно, независимо от того, определяете ли вы `calculateWinner` до или после компонента `Board`. Давайте поместим его в конце, чтобы вам не приходилось прокручивать его каждый раз, когда вы редактируете свои компоненты.
 
 </Note>
 
-You will call `calculateWinner(squares)` in the `Board` component's `handleClick` function to check if a player has won. You can perform this check at the same time you check if a user has clicked a square that already has an `X` or an `O`. We'd like to return early in both cases:
+Вы будете вызывать `calculateWinner(squares)` в функции `handleClick` компонента `Board`, чтобы проверить, победил ли игрок. Вы можете выполнить эту проверку одновременно с проверкой, не нажал ли пользователь на ячейку, которая уже содержит `X` или `O`. Мы хотим вернуться раньше в обоих случаях:
 
 ```js {2}
 function handleClick(i) {