From 933b66bfbfdb0d1ca591ee9fe09577110dd30e6d Mon Sep 17 00:00:00 2001 From: Marichka Tsiuriak Date: Wed, 20 Mar 2019 03:28:14 -0400 Subject: [PATCH 01/14] Translate intro and setup --- content/tutorial/tutorial.md | 91 ++++++++++++++++++------------------ 1 file changed, 46 insertions(+), 45 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 1c69ae99f..6e97ce6bb 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Введення: Вступ до React" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,97 +12,97 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Дане введення не потребує попереднього ознайомлення з React. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Перед початком роботи {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **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 deep understanding of React. +У цьому введенні ми працюватимемо над створенням маленької гри. **Вам це може здатися непотрібним, оскільки ви не плануєте створювати ігри, але ми рекомендуємо спробувати.** Методи, які ви вивчите у даному введенні є основоположними для створення будь-яких React-додатків, і освоєння цих методів допоможе вам глибше зрозуміти React. ->Tip +>Порада > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +> Дане введення призначене для людей, які надають перевагу **практичному навчанню**. Якщо вам більше подобається вчитися з нуля, зверніться до нашого [покрокового довідника](/docs/hello-world.html). Ви можете виявити для себе, що обидва чудово доповнюють одне одного. -The tutorial is divided into several sections: +Вступ розбито на декілька розділів: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [Налаштування](#setup-for-the-tutorial) допоможе встановити **відправну точку** для роботи над грою. +* [Огляд](#overview) ознайомить вас з **основами** React: компоненти, пропси, стан. +* [Створення гри](#completing-the-game) ознайомить вас з **найпоширенішими методами** у розробці React-додатків. +* [Додання подорожі у часі](#adding-time-travel) допоможе **глибше осягнути** сильні сторони React. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +Ви не мусите опрацьовувати усі розділи відразу, щоб отримати користь від введення. Продовжуйте працювати стільки, скільки вважаєте за потрібне, навіть якщо це один чи два розділи. -### What Are We Building? {#what-are-we-building} +### Що ми створюємо? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +У даному введенні ми розглянемо як створити інтерактивну гру в хрестики-нулики за допомогою React. -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +Кінцевий результат ви можете розглянути за наступним посиланням: **[Завершена гра ](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Не хвилюйтесь, якщо код здається вам незрозумілим, або ви не знайомі з синтаксисом! Мета даного введення -- допомогти вам зрозуміти React і його синтаксис. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +Ми радимо розглянути гру перед тим, як продовжити працювати над введенням. Одна з її помітних властивостей -- пронумеровани список з правої сторони ігрового поля. Цей список відображає історію всіх ходів і оновлюється по ходу гри. -You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +Ви можете закрити гру в хрестики-нулики, коли закінчите ознайомлення з нею. Ми почнемо з простішого зразка. Наш натсупний крок -- підготуватись до створення гри. -### Prerequisites {#prerequisites} +### Передумови {#prerequisites} -We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. +Ми припускаємо, що ви вже трохи знайомі з HTML і JavaScript. Але навіть якщо в повсякденному житті ви використовуєте іншу мову програмування, проходження даного введення не має скласти труднощів. Ми також припустимо, що ви знайомі з функціями, об'єктами, масивами і, меншою мірою, класами. -If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. +Якщо вам потрібно повторити основи JavaScript, ми рекомендуємо проглянути [цей довідник](https://developer.mozilla.org/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Зверніть увагу, що ми також використовуємо деякі особливості ES6 -- нещодавньої версії JavaScript. У введенні ми використовуємо [стрілкові функції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97), [класи](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), та [`const`](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/const). Ви можете скористатися [Babel REPL](babel://es5-syntax-example), щоб дізнатися у що компілюється код ES6. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Налаштування {#setup-for-the-tutorial} -There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. +Існує два способи проходження даного введення: ви можете писати код у браузері, або налаштувати локальне середовище розробки на комп'ютері. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### Варіант налаштування 1: Пишемо код у браузері {#setup-option-1-write-code-in-the-browser} -This is the quickest way to get started! +Це найшвидший спосіб для початку! -First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** in a new tab. The new tab should display an empty tic-tac-toe game board and React code. We will be editing the React code in this tutorial. +Спершу, відкрийте **[початковий код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** у новій вкладці. Ви побачите пусте поле для гри в хрестики-нулики і React-код. У даному розділі ми поступово змінюватимемо цей код. -You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. +Ви можете пропустити другий варіант налаштування і перейти до [Огляду](#overview) React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### Варіант налаштування 2: Локальне середовище розробки {#setup-option-2-local-development-environment} -This is completely optional and not required for this tutorial! +Цей крок не є обов'язковим і не потрібний для проходження введення!
-Optional: Instructions for following along locally using your preferred text editor +Необов'язково: інструкції для написання коду в улюбленому текстовому редакторі -This setup requires more work but allows you to complete the tutorial using an editor of your choice. Here are the steps to follow: +Дане налаштування вимагає трохи більше роботи, але дозволяє працювати над введенням у власному редакторі. Ось що вам потрібно зробити: -1. Make sure you have a recent version of [Node.js](https://nodejs.org/en/) installed. -2. Follow the [installation instructions for Create React App](/docs/create-a-new-react-app.html#create-react-app) to make a new project. +1. Упевніться, що на вашому комп'ютері встановлено останню версію [Node.js](https://nodejs.org/en/). +2. Слідуйте [інструкціям налаштування Create React App](/docs/create-a-new-react-app.html#create-react-app) для створення нового проекту. ```bash npx create-react-app my-app ``` -3. Delete all files in the `src/` folder of the new project +3. Видаліть усі файли з папки `src/` нового проекту. -> 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. +>**Не видаляйте саму папку `src`, тільки вихідні файли що містяться в ній.** Ми замінимо ці файли власними прикладами у наступному кроці. ```bash cd my-app cd src -# If you're using a Mac or Linux: +# Якщо ви використовуєте Mac або Linux: rm -f * -# Or, if you're on Windows: +# Або, якщо використовуєте Windows: del * -# Then, switch back to the project folder +# Після цього, поверніться до папки проекту cd .. ``` -4. Add a file named `index.css` in the `src/` folder with [this CSS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). +4. Створіть файл `index.css` у папці `src/` з [цим CSS кодом](https://codepen.io/gaearon/pen/oWWQNa?editors=0100). -5. Add a file named `index.js` in the `src/` folder with [this JS code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). +5. Створіть файл `index.js` у папці `src/` з [цим JS кодом](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add these three lines to the top of `index.js` in the `src/` folder: +6. Впишіть наступні три рядки на початку `index.js` у папці `src/`: ```js import React from 'react'; @@ -110,15 +110,16 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Now if you run `npm start` in the project folder and open `http://localhost:3000` in the browser, you should see an empty tic-tac-toe field. +Тепер, якщо ви запустите `npm start` у папці проекту і відкриєте `http://localhost:3000` у браузері, перед вами має відкритися пусте поле для гри в хрестики-нулики. -We recommend following [these instructions](https://babeljs.io/docs/editors/) to configure syntax highlighting for your editor. +Ми рекомендуємо слідувати [цим інструкціям](https://babeljs.io/docs/editors/), щоб налаштувати підсвічування синтаксису у вашому редакторі.
-### Help, I'm Stuck! {#help-im-stuck} +### Допоможіть, я застряг! {#help-im-stuck} -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +Якщо ви застрягли, зверніться до [ресурсів підтримки спільноти](/community/support.html). + Зокрема, [чат Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) -- чудовий спосіб швидко знайти допомогу. Якщо ви не отримаєте належну відповідь, будь ласка, напишіть нам, і ми вам допоможемо. ## Overview {#overview} From 91b072406df71478184acb24b675e7951f5864a0 Mon Sep 17 00:00:00 2001 From: Marichka Tsiuriak Date: Wed, 20 Mar 2019 12:04:02 -0400 Subject: [PATCH 02/14] Finish traslation of overview, proceed to completing-the-game section --- content/tutorial/tutorial.md | 101 +++++++++++++++++------------------ 1 file changed, 50 insertions(+), 51 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 6e97ce6bb..d4ed51179 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -121,22 +121,22 @@ import './index.css'; Якщо ви застрягли, зверніться до [ресурсів підтримки спільноти](/community/support.html). Зокрема, [чат Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) -- чудовий спосіб швидко знайти допомогу. Якщо ви не отримаєте належну відповідь, будь ласка, напишіть нам, і ми вам допоможемо. -## Overview {#overview} +## Огляд {#overview} -Now that you're set up, let's get an overview of React! +Тепер, коли з усіма налаштуваннями завершено, давайте уважніше розглянемо React! -### What Is React? {#what-is-react} +### Що таке React? {#what-is-react} -React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". +React -- це декларативна, ефективна і гнучка JavaScript бібліотека, призначена для створення інтерфейсу користувача. Вона дозволяє компонувати складн UI з маленьких окремих частин коду -- "компонентів". -React has a few different kinds of components, but we'll start with `React.Component` subclasses: +У React існує кільки різних компонентів, але ми почнемо з підкласів `React.Component`: ```javascript class ShoppingList extends React.Component { render() { return (
-

Shopping List for {this.props.name}

+

Список покупок для {this.props.name}

  • Instagram
  • WhatsApp
    • @@ -147,14 +147,14 @@ class ShoppingList extends React.Component { } } -// Example usage: +// Приклад використання: ``` -We'll get to the funny XML-like tags soon. We use components to tell React what we want to see on the screen. When our data changes, React will efficiently update and re-render our components. +Ми ще повернемося до незвичних, схожих на XML тегів. Ми використовуємо компоненти, щоб повідомити React, що саме хочемо бачити на екрані. Кожного разу, при зміні даних, React ефективно оновлює і повторно рендерить наші компоненти. -Here, ShoppingList is a **React component class**, or **React component type**. A component takes in parameters, called `props` (short for "properties"), and returns a hierarchy of views to display via the `render` method. +Так, ShoppingList вище -- це **класовий компонент React**. Компонент приймає параметри, які називаються `props` (скорочено від "properties"), і повертає ієрархію вигляду через метод `render`. -The `render` method returns a *description* of what you want to see on the screen. React takes the description and displays the result. In particular, `render` returns a **React element**, which is a lightweight description of what to render. Most React developers use a special syntax called "JSX" which makes these structures easier to write. The `
    ` syntax is transformed at build time to `React.createElement('div')`. The example above is equivalent to: +Метод `render` повертає *опис* того, що ви хочете побачити на екрані. React приймає цей опис і відтворює результат. Зокрема, `render` повертає **елемент React**, що є легким описом того, що треба відрендерити. Більшість React-розробників використовує спеціальний "JSX" синтаксис, який спрощує написання даних структур. Під час компіляції синтаксис `
    ` перетворюється у `React.createElement('div')`. Тож приклад вище рівноцінний до: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -163,35 +163,35 @@ return React.createElement('div', {className: 'shopping-list'}, ); ``` -[See full expanded version.](babel://tutorial-expanded-version) +[Дивитись повну версію.](babel://tutorial-expanded-version) -If you're curious, `createElement()` is described in more detail in the [API reference](/docs/react-api.html#createelement), but we won't be using it in this tutorial. Instead, we will keep using JSX. +Якщо вам цікаво, детальніше про `createElement()` ви можете дізнатися в [довіднику API](/docs/react-api.html#createelement). Ми не використовуватимемо даний синтаксис у цьому введенні, натомість ми продовжимо використання JSX. -JSX comes with the full power of JavaScript. You can put *any* JavaScript expressions within braces inside JSX. Each React element is a JavaScript object that you can store in a variable or pass around in your program. +JSX має повну силу JavaScript. У межах фігурних дужок JSX ви можете використовувати *будь-які* JavaScript-вирази. Кожен елемент React є об'єктом, який можна зберегти у змінній або використати будь-де у вашій програмі. -The `ShoppingList` component above only renders built-in DOM components like `
    ` and `
  • `. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components. +Компонент `ShoppingList` вище рендерить тільки вбудовані DOM-компоненти як `
    ` або `
  • `. Але ви також можете створювати і рендерити власні компоненти. Наприклад, тепер ми можемо послатися на весь список покупок відразу використовуючи ``. Кожен компонент React інкапсульований і може використовуватись незалежно від інших; це дозволяє створювати складні UI з простих компонентів. -## Inspecting the Starter Code {#inspecting-the-starter-code} +## Розглянемо стартовий код {#inspecting-the-starter-code} -If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)). +Якщо ви збираєтесь працювати над введенням **у браузері**, відкрийте **[цей стартовий код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** у новій вкладці. Якщо ви працюватимете над введенням **на власному комп'ютері**, відкрийте `src/index.js` у папці проекту (ви вже працювали з цим файлом під час [налаштувань](#setup-option-2-local-development-environment)). -This Starter Code is the base of what we're building. We've provided the CSS styling so that you only need to focus on learning React and programming the tic-tac-toe game. +Цей стартовий код оснований на тому, що ми будуватимемо. Ми подбали про CSS-стиль, тож ви можете повністю сконцентруватися на вивченні React і створенні гри у хрестики-нулики. -By inspecting the code, you'll notice that we have three React components: +Розглядаючи код, ви помітите що ми вже маємо три компоненти: -* Square -* Board -* Game +* Square (Квадрат) +* Board (Поле) +* Game (Гра) -The Square component renders a single ` > ); @@ -261,13 +260,13 @@ If you click on a Square now, you should see an alert in your browser. >} >``` > ->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders. +>Зверніть увагу як використовуючи `onClick={() => alert('click')}`, ми передаємо *функцію* як проп onClick`. React викличе цю функцію тільки після натискання. Типовою помилкою є пропуск `() =>` використання синтаксису `onClick={alert('click')}`, оскільки такий код буде спрацьовувати при кожному рендері компонента. -As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**. +Наступним кроком, ми хочемо щоб компонент Square "запам'ятав", що на нього клікнули і відобразив позначку "X". Для "запам'ятовування" компоненти використовують **стан**. -React components can have state by setting `this.state` in their constructors. `this.state` should be considered as private to a React component that it's defined in. Let's store the current value of the Square in `this.state`, and change it when the Square is clicked. +Щоб налаштувати стан у компоненті React, вам потрібно вписати `this.state` у його конструктор. `this.state` варто розглядати як особисту властивість компонента, у якому його визначено. Давайте збережемо поточне значення у `this.state` компонента Square, і змінюватимемо його при кожному натисканні. -First, we'll add a constructor to the class to initialize the state: +Спершу, додамо конструктор до класу, щоб ініціалізувати стан: ```javascript{2-7} class Square extends React.Component { @@ -280,7 +279,7 @@ class Square extends React.Component { render() { return ( - ); @@ -288,17 +287,17 @@ class Square extends React.Component { } ``` ->Note +>Примітка > ->In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to always call `super` when defining the constructor of a subclass. All React component classes that have a `constructor` should start it with a `super(props)` call. +>У [класах JavaScript](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Classes) при визначенні конструктора підкласу ви завжди повинні викликати `super`. Класові компоненти React, що мають `constructor`, повинні починатися з виклику `super(props)`. -Now we'll change the Square's `render` method to display the current state's value when clicked: +Тепер змінимо метод `render` компонента Square, щоб відобразити значення поточного стану під час натискання: -* Replace `this.props.value` with `this.state.value` inside the ` ); @@ -242,11 +242,11 @@ class Square extends React.Component { } ``` -Тепер, при натисканні на Square, ви побачите повідомлення у браузері. +Тепер, при натисканні на Square, у браузері щоразу має з'являтись повідомлення. >Примітка > ->Щоб уникнути зайвого другу і [заплутаної поведінки `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), тут і далі ми використовуватимемо [синтаксис стрілкової фінкції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97) для обробників події: +>Щоб уникнути зайвого другу і [заплутаної поведінки `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), тут і далі для обробників події ми використовуватимемо [синтаксис стрілкової фінкції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97): > >```javascript{4} >class Square extends React.Component { @@ -260,13 +260,13 @@ class Square extends React.Component { >} >``` > ->Зверніть увагу як використовуючи `onClick={() => alert('click')}`, ми передаємо *функцію* як проп onClick`. React викличе цю функцію тільки після натискання. Типовою помилкою є пропуск `() =>` використання синтаксису `onClick={alert('click')}`, оскільки такий код буде спрацьовувати при кожному рендері компонента. +>Зверніть увагу, що у `onClick={() => alert('click')}` ми передаємо *функцію* як проп `onClick`. React викличе цю функцію тільки після натискання. Типовою помилкою є використання синтаксису `onClick={alert('click')}` без `() =>`, оскільки такий код буде спрацьовувати при кожному рендері компонента. -Наступним кроком, ми хочемо щоб компонент Square "запам'ятав", що на нього клікнули і відобразив позначку "X". Для "запам'ятовування" компоненти використовують **стан**. +Наступним кроком ми хочемо, щоб компонент Square "запам'ятав", що на нього клікнули і відобразив позначку "X". Для "запам'ятовування" компоненти використовують **стан**. -Щоб налаштувати стан у компоненті React, вам потрібно вписати `this.state` у його конструктор. `this.state` варто розглядати як особисту властивість компонента, у якому його визначено. Давайте збережемо поточне значення у `this.state` компонента Square, і змінюватимемо його при кожному натисканні. +Щоб налаштувати стан у компоненті React, вам потрібно вписати `this.state` у його конструктор. `this.state` варто розглядати як особисту властивість компонента, у якому його визначено. Давайте збережемо поточне значення Square у `this.state` і змінюватимемо його при кожному натисканні. -Спершу, додамо конструктор до класу, щоб ініціалізувати стан: +Спершу додамо конструктор до класу, щоб ініціалізувати стан: ```javascript{2-7} class Square extends React.Component { @@ -297,7 +297,7 @@ class Square extends React.Component { * Замініть обробник події `onClick={...}` на `onClick={() => this.setState({value: 'X'})}`. * Для кращої читабельності розташуйте пропси `className` та `onClick` на окремих рядках. -Після цих змін, тег ` @@ -1107,11 +1104,11 @@ In the Game component's `render` method, we can add the key as `
  • ` }); ``` -**[View the full code at this point](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** +**[Прогляути повний код цього кроку](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** -Clicking any of the list item's buttons throws an error because the `jumpTo` method is undefined. Before we implement `jumpTo`, we'll add `stepNumber` to the Game component's state to indicate which step we're currently viewing. +Натиснення будь-якої з кнопок списку видасть помилку, оскільки метод `jumpTo` ще не визначено. Перед тим як створити цей метод, додамо `stepNumber` до стану компонента Game, щоб вказати який хід ми наразі розглядаємо. -First, add `stepNumber: 0` to the initial state in Game's `constructor`: +Спершу додамо `stepNumber: 0` до початкового стану у `constructor` компонента Game: ```js{8} class Game extends React.Component { @@ -1127,11 +1124,11 @@ class Game extends React.Component { } ``` -Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We also set `xIsNext` to true if the number that we're changing `stepNumber` to is even: +Далі визначимо метод `jumpTo` у Game для оновлення `stepNumber`. Ми також визначимо значення `xIsNext` як true, якщо номер ходу, на який ми змінюємо `stepNumber`, парний: ```javascript{5-10} handleClick(i) { - // this method has not changed + // цей метод не змінився } jumpTo(step) { @@ -1142,15 +1139,15 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a } render() { - // this method has not changed + // цей метод не змінився } ``` -We will now make a few changes to the Game's `handleClick` method which fires when you click on a square. +Тепер внесемо деякі зміни до методу `handleClick` у Game, що спрацьовуватиме при кожному натиску на клітинки. -The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made. +Стан `stepNumber`, який ми щойно додали, відображає хід, який користувач бачить на даний момент. Після кожного наступного ходу нам потрібно оновити `stepNumber` використовуючи `stepNumber: history.length` як частину аргументу `this.setState`. Це дозволить нам впевнитись, що ми не застрягнемо на тому самому місці, після того як новий хід буде зроблено. -We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect. +Також замінимо `this.state.history` на `this.state.history.slice(0, this.state.stepNumber + 1)`. Це гарантує, що якщо ми повернемося "назад у часі" і зробимо наступний хід з того моменту, ми скинемо усю неактуальну "майбутню" історію. ```javascript{2,13} handleClick(i) { @@ -1171,7 +1168,7 @@ We will also replace reading `this.state.history` with `this.state.history.slice } ``` -Finally, we will modify the Game component's `render` method from always rendering the last move to rendering the currently selected move according to `stepNumber`: +Накінець, змінимо `render` метод компонента Game так, щоб той замість рендерингу останнього ходу рендерив хід обраний на даний момент відповідно до `stepNumber`: ```javascript{3} render() { @@ -1179,12 +1176,12 @@ Finally, we will modify the Game component's `render` method from always renderi const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); - // the rest has not changed + // решта не змінилася ``` -If we click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred. +Якщо ми натиснемо на будь-який крок ігрової історії, поле мусить обновитися, демонструючи як воно виглядало після цього ходу. -**[View the full code at this point](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** +**[Проглянути повний код цього кроку](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** ### Підіб'ємо підсумки {#wrapping-up} @@ -1193,7 +1190,7 @@ If we click on any step in the game's history, the tic-tac-toe board should imme * Дозволяє грати у хрестики-нулики, * Визначає переможця, * Зберігає історію гри, -* Дозволяє гравцеві проглянути історію і попередні модифікації ігрової дошки. +* Дозволяє гравцеві проглянути історію і попередні модифікації ігрового поля. Чудова робота! Ми сподіваємося, що тепер ви почуваєтеся впевненіше у роботі з React. @@ -1201,11 +1198,11 @@ If we click on any step in the game's history, the tic-tac-toe board should imme Якщо ви маєте додатковий час або хочете попрактикувати нові навички в React, ось кілька ідей, які допоможуть покращити гру у хрестики-нулики. Ідеї розташовані за зростанням важкості: -1. Відобразіть позицію для кожного ходу у форматі (колонка, радок) в списку історії ходів. +1. Відобразіть позицію для кожного ходу у форматі (колонка, рядок) в списку історії ходів. 2. Виділіть вибраний елемент у спику ходів. 3. Перепишіть компонент Board, використовуючи цикли для створення квадратів, замість написання вручну. -4. Add a toggle button that lets you sort the moves in either ascending or descending order. -5. When someone wins, highlight the three squares that caused the win. -6. When no one wins, display a message about the result being a draw. +4. Додайте кнопку, що дозволить сортувати ходи у висхідному чи низхідному порядку. +5. Коли хтось виграє, втсановити підсвічення трьох виграшних клітинок. +6. Якщо ніхто не виграє, відобразити повідомлення, що повідомляє про нічию. -Throughout this tutorial, we touched on React concepts including elements, components, props, and state. For a more detailed explanation of each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html). +Упродовж цього введення ми розглянули такі концепти React, як елементи, компоненти, пропси та стан. За більш детальною інформацією для кожної з цих тем зверніться до [решти документації](/docs/hello-world.html). Щоб дізнатися більше про визначення компонентів, зверніться до [`React.Component` у довіднику API](/docs/react-component.html). From 762ece8bfece05966a09a2f214589ccf3b1bbb10 Mon Sep 17 00:00:00 2001 From: Volodymyr Klymenko Date: Wed, 3 Apr 2019 16:25:40 -0400 Subject: [PATCH 06/14] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/tutorial/tutorial.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index b13ff22be..04cb5368d 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -57,7 +57,7 @@ redirect_from: Спершу, відкрийте **[стартовий код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** у новій вкладці. Ви побачите пусте поле для гри в хрестики-нулики і React-код. У даному розділі ми поступово змінюватимемо цей код. -Ви можете пропустити другий варіант налаштувань і відразу перейти до [Огляду](#overview) React. +Ви можете пропустити другий варіант налаштувань і відразу перейти до [огляду](#overview) React. ### Спосіб 2: Локальне середовище розробки {#setup-option-2-local-development-environment} @@ -126,7 +126,7 @@ import './index.css'; ### Що таке React? {#what-is-react} -React -- це декларативна, ефективна і гнучка JavaScript бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду -- "компонентів". +React -- це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду -- "компонентів". У React існує кілька різних видів компонентів, але ми почнемо з підкласів `React.Component`: @@ -149,11 +149,11 @@ class ShoppingList extends React.Component { // Приклад використання: ``` -Ми ще повернемося до незвичних, схожих на XML тегів. Ми використовуємо компоненти, щоб повідомити React, що саме хочемо бачити на екрані. Кожного разу при зміні даних, React ефективно оновлює і повторно рендерить наші компоненти. +Ми ще повернемося до незвичних, схожих на XML-тегів. Ми використовуємо компоненти, щоб повідомити React, що саме хочемо бачити на екрані. Кожного разу при зміні даних, React ефективно оновлює і повторно рендерить наші компоненти. Так, _ShoppingList_ вище -- це **класовий компонент React**. Компонент приймає параметри, які називаються `props` (скорочено від "properties" -- властивості), і повертає ієрархію перегляду, використовуючи метод `render`. -Метод `render` повертає *опис* того, що ви хочете бачити на екрані. React приймає цей опис і відтворює результат. Зокрема, `render` повертає **React-елемент** -- полегшену версію того, що треба відрендерити. Більшість React-розробників користується спеціальним "JSX" синтаксисом, який спрощує написання цих конструкцій. Під час компіляції синтаксис `
    ` перетворюється у `React.createElement('div')`, тож приклад вище рівноцінний до: +Метод `render` повертає *опис* того, що ви хочете бачити на екрані. React приймає цей опис і відтворює результат. Зокрема, `render` повертає **React-елемент** -- полегшену версію того, що треба відрендерити. Більшість React-розробників користується спеціальним синтаксисом під назвою "JSX", який спрощує написання цих конструкцій. Під час компіляції синтаксис `
    ` перетворюється у `React.createElement('div')`, тож приклад вище рівноцінний до: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -223,7 +223,7 @@ class Square extends React.Component { **[Проглянути повний код цього кроку](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)** -Вітаємо! Ви щойно "передали проп" від батьківського компонента Board до дочірнього компонента Square. Передача даних через пропси від батьківського компонента до дочірнього -- це те як данні перетікають у React додатках. +Вітаємо! Ви щойно "передали проп" від батьківського компонента Board до дочірнього компонента Square. Передача даних через пропси від батьківського компонента до дочірнього -- це те як дані перетікають у React-додатках. ### Створюємо інтерактивний компонент {#making-an-interactive-component} @@ -355,7 +355,7 @@ React DevTools дозволяють перевірити пропси і ста **Щоб зібрати данні з кількох дочірніх компонентів чи дати можливість двом дочірнім компонентам контактувати один з одним, вам потрібно визначити спільний стан у батьківському компоненті. Батьківський компонент може передавати стан до дочірніх компонентів через пропси. Цей спосіб підтримує синхронізацію дочірніх компонентів один з одним і з батьківським компонентом.** -Підйом стану до батьківського компонента -- звична справа при рефакторингу React компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб. +Підйом стану до батьківського компонента -- звична справа при рефакторингу React-компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб. Добавте конструктор до компонента Board і визначте початковий стан, який міститиме масив з 9 null-елементами, що відповідають 9 клітинкам: @@ -393,7 +393,7 @@ class Board extends React.Component { На початку ми [передали проп `value`](#passing-data-through-props) з компонента Board, щоб відобразити числа від 0 до 8 у кожному Square. Попереднім кроком ми замінили числа на позначку "X", [що визначалась власним станом компонента Square](#making-an-interactive-component). Саме тому на даному етапі компонент Square ігнорує проп `value`, переданий компонентом Board. -Ми знову скористаємося способом передачі пропсів. Ми модифікуємо Board, щоб передати кожному Square-компонету його поточні значення (`'X'`, `'O'`, або `null`). Ми вже визначили масив `squares` у конструкторі Board і тепер модифікуємо метод `renderSquare` цього компонента, щоб мати змогу читати данні з цього масиву: +Ми знову скористаємося способом передачі пропсів. Ми модифікуємо Board, щоб передати кожному Square-компоненту його поточні значення (`'X'`, `'O'`, або `null`). Ми вже визначили масив `squares` у конструкторі Board і тепер модифікуємо метод `renderSquare` цього компонента, щоб мати змогу читати дані з цього масиву: ```javascript{2} renderSquare(i) { From cc5805ea5470e517199ac8ff03531219be89338a Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Wed, 3 Apr 2019 16:30:17 -0400 Subject: [PATCH 07/14] Update tutorial.md --- content/tutorial/tutorial.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 04cb5368d..d2ce59a1a 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -25,7 +25,7 @@ redirect_from: Введення розбито на декілька розділів: * [Налаштування](#setup-for-the-tutorial) допоможуть встановити **відправну точку** для роботи над грою. -* [Огляд](#overview) ознайомить вас з такими **основами** React, як компоненти, пропси та стан. +* [Огляд](#overview) ознайомить вас з такими **основами** React як компоненти, пропси та стан. * [Створення гри](#completing-the-game) допоможе розібратися з **найпоширенішими методами** у розробці React-додатків. * [Додання подорожі у часі](#adding-time-travel) надасть можливість **глибше осягнути** сильні сторони React. @@ -33,7 +33,7 @@ redirect_from: ### Що ми створюємо? {#what-are-we-building} -У цьому введенні ми розглянемо, як створити інтерактивну гру в хрестики-нулики за допомогою React. +У цьому введенні ми розглянемо створення інтерактивної гри в хрестики-нулики за допомогою React. Кінцевий результат ви можете розглянути за наступним посиланням: **[Завершена гра ](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Не хвилюйтесь, якщо код здається вам незрозумілим, або ви не знайомі з синтаксисом! Мета даного введення -- допомогти вам зрозуміти React і його синтаксис. @@ -227,7 +227,8 @@ class Square extends React.Component { ### Створюємо інтерактивний компонент {#making-an-interactive-component} -Давайте при натисканні заповнимо компонент Square позначкою "X". Для початку змінимо тег кнопки, який повертається з функції `render()`, на наступний код: +Давайте при натисканні заповнимо компонент Square позначкою "X". +Для початку змінимо тег кнопки, який повертається з функції `render()`, на наступний код: ```javascript{4} class Square extends React.Component { @@ -245,7 +246,7 @@ class Square extends React.Component { >Примітка > ->Щоб уникнути зайвого другу і [заплутаної поведінки `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), тут і далі для обробників події ми використовуватимемо [синтаксис стрілкової фінкції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97): +>Щоб не вводити зайві символи і уникнути [заплутаної поведінки `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), тут і далі для обробників події ми використовуватимемо [синтаксис стрілкової функції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97): > >```javascript{4} >class Square extends React.Component { From 78ee3c5056e205c170c60808cab9cc80ecca8c07 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Wed, 3 Apr 2019 16:43:48 -0400 Subject: [PATCH 08/14] Update tutorial.md --- content/tutorial/tutorial.md | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index d2ce59a1a..9406f2bb3 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -234,7 +234,7 @@ class Square extends React.Component { class Square extends React.Component { render() { return ( - ); @@ -252,7 +252,7 @@ class Square extends React.Component { >class Square extends React.Component { > render() { > return ( -> > ); @@ -279,7 +279,7 @@ class Square extends React.Component { render() { return ( - ); @@ -488,7 +488,7 @@ class Board extends React.Component { } render() { - const status = 'Наступний гравець: X'; + const status = 'Next player: X'; return (
    @@ -626,7 +626,7 @@ class Board extends React.Component { ```javascript{2} render() { - const status = 'Наступний гравець: ' + (this.state.xIsNext ? 'X' : 'O'); + const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); return ( // решта не змінилася @@ -663,7 +663,7 @@ class Board extends React.Component { } render() { - const status = 'Наступний гравець: ' + (this.state.xIsNext ? 'X' : 'O'); + const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); return (
    @@ -726,9 +726,9 @@ function calculateWinner(squares) { const winner = calculateWinner(this.state.squares); let status; if (winner) { - status = 'Переможець: ' + winner; + status = 'Winner: ' + winner; } else { - status = 'Наступний гравець: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -870,9 +870,9 @@ class Board extends React.Component { const winner = calculateWinner(this.state.squares); let status; if (winner) { - status = 'Переможець: ' + winner; + status = 'Winner: ' + winner; } else { - status = 'Наступний гравець: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -908,9 +908,9 @@ class Board extends React.Component { let status; if (winner) { - status = 'Переможець: ' + winner; + status = 'Winner: ' + winner; } else { - status = 'Наступний гравець: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -1095,8 +1095,8 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] ```js{6} const moves = history.map((step, move) => { const desc = move ? - 'Перейти до ходу #' + move : - 'Почати спочатку'; + 'Go to move #' + move : + 'Go to game start'; return (
  • From 01c05a148676f07fb9824e8f35459dbb4957acb4 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Wed, 3 Apr 2019 16:45:24 -0400 Subject: [PATCH 09/14] Update tutorial.md --- content/tutorial/tutorial.md | 1 - 1 file changed, 1 deletion(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 9406f2bb3..b50a77db5 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -431,7 +431,6 @@ class Board extends React.Component { * Замініть `this.setState()` на `this.props.onClick()` у методі `render` компонента Square * Видаліть `constructor` зі Square, тому що цей компонент більше не відслідковує стан гри - Після цих змін компонент Square має виглядати так: ```javascript{1,2,6,8} From 9cb71138464ce58928b77136176b173144e075e5 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Wed, 3 Apr 2019 16:47:21 -0400 Subject: [PATCH 10/14] Update tutorial.md --- content/tutorial/tutorial.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index b50a77db5..36ea7b3da 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -897,6 +897,7 @@ class Board extends React.Component { } } ``` + Оновимо функцію `render` компонента Game, щоб скористатися останнім записом у історії для визначення і відображення статусу гри: ```javascript{2-11,16-19,22} @@ -928,6 +929,7 @@ class Board extends React.Component { ); } ``` + Оскільки компонент Game тепер рендерить статус гри, ми можемо видалити відповідний код з методу `render` компонента Board. Після цих змін функція `render` у Board має виглядати так: ```js{1-4} From d06fc6c1928e2c758b238ce78271e3c52a1b6838 Mon Sep 17 00:00:00 2001 From: Oleksii Polovyi Date: Thu, 4 Apr 2019 10:45:24 -0400 Subject: [PATCH 11/14] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/tutorial/tutorial.md | 36 ++++++++++++++++++------------------ 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 36ea7b3da..c0061666a 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -35,17 +35,17 @@ redirect_from: У цьому введенні ми розглянемо створення інтерактивної гри в хрестики-нулики за допомогою React. -Кінцевий результат ви можете розглянути за наступним посиланням: **[Завершена гра ](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Не хвилюйтесь, якщо код здається вам незрозумілим, або ви не знайомі з синтаксисом! Мета даного введення -- допомогти вам зрозуміти React і його синтаксис. +Кінцевий результат ви можете розглянути за наступним посиланням: **[Завершена гра ](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Не хвилюйтесь, якщо код здається вам незрозумілим, або ви не знайомі з синтаксисом! Мета даного введення — допомогти вам зрозуміти React і його синтаксис. -Ми радимо уважно роздивитися гру перед тим як продовжувати працювати над введенням. Одна з її помітних властивостей -- пронумеровани список з правої сторони ігрового поля. Цей список відображає історію всіх ходів і оновлюється по ходу гри. +Ми радимо уважно роздивитися гру перед тим як продовжувати працювати над введенням. Одна з її помітних властивостей — пронумеровани список з правої сторони ігрового поля. Цей список відображає історію всіх ходів і оновлюється по ходу гри. -Ви можете закрити гру, коли закінчите ознайомлюватись. Ми почнемо з простішого зразка. Наш наступний крок -- підготуватись до створення гри. +Ви можете закрити гру, коли закінчите ознайомлюватись. Ми почнемо з простішого зразка. Наш наступний крок — підготуватись до створення гри. ### Передумови {#prerequisites} Ми припустимо, що ви вже трохи знайомі з HTML і JavaScript. Але навіть якщо в повсякденному житті ви використовуєте іншу мову програмування, проходження даного введення не має скласти труднощів. Також вважатимемо, що ви знайомі з функціями, об'єктами, масивами і, меншою мірою, класами. -Якщо вам потрібно повторити основи JavaScript, ми рекомендуємо проглянути [цей довідник](https://developer.mozilla.org/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Зверніть увагу, що ми також використовуємо деякі особливості ES6 -- нещодавньої версії JavaScript. У цьому введенні ми застосовуємо [стрілкові функції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97), [класи](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) та [`const`](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/const). Ви можете скористатися [Babel REPL](babel://es5-syntax-example), щоб дізнатися у що компілюється код ES6. +Якщо вам потрібно повторити основи JavaScript, ми рекомендуємо проглянути [цей довідник](https://developer.mozilla.org/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Зверніть увагу, що ми також використовуємо деякі особливості ES6 — нещодавньої версії JavaScript. У цьому введенні ми застосовуємо [стрілкові функції](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Functions/%D0%A1%D1%82%D1%80%D1%96%D0%BB%D0%BA%D0%BE%D0%B2%D1%96_%D1%84%D1%83%D0%BD%D0%BA%D1%86%D1%96%D1%97), [класи](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let) та [`const`](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Statements/const). Ви можете скористатися [Babel REPL](babel://es5-syntax-example), щоб дізнатися у що компілюється код ES6. ## Налаштування {#setup-for-the-tutorial} @@ -118,7 +118,7 @@ import './index.css'; ### Допоможіть, я застряг! {#help-im-stuck} -Якщо ви застрягли, зверніться до [ресурсів підтримки спільноти](/community/support.html). Зокрема, [чат Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) -- чудовий спосіб швидко знайти допомогу. Якщо ви не отримали належну відповідь і все ще не знаєте, як вирішити проблему, будь ласка, напишіть нам, і ми вам допоможемо. +Якщо ви застрягли, зверніться до [ресурсів підтримки спільноти](/community/support.html). Зокрема, [чат Reactiflux](https://discord.gg/0ZcbPKXt5bZjGY5n) — чудовий спосіб швидко знайти допомогу. Якщо ви не отримали належну відповідь і все ще не знаєте, як вирішити проблему, будь ласка, напишіть нам, і ми вам допоможемо. ## Огляд {#overview} @@ -126,7 +126,7 @@ import './index.css'; ### Що таке React? {#what-is-react} -React -- це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду -- "компонентів". +React — це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду — "компонентів". У React існує кілька різних видів компонентів, але ми почнемо з підкласів `React.Component`: @@ -151,9 +151,9 @@ class ShoppingList extends React.Component { Ми ще повернемося до незвичних, схожих на XML-тегів. Ми використовуємо компоненти, щоб повідомити React, що саме хочемо бачити на екрані. Кожного разу при зміні даних, React ефективно оновлює і повторно рендерить наші компоненти. -Так, _ShoppingList_ вище -- це **класовий компонент React**. Компонент приймає параметри, які називаються `props` (скорочено від "properties" -- властивості), і повертає ієрархію перегляду, використовуючи метод `render`. +Так, _ShoppingList_ вище — це **класовий компонент React**. Компонент приймає параметри, які називаються `props` (скорочено від "properties" — властивості), і повертає ієрархію перегляду, використовуючи метод `render`. -Метод `render` повертає *опис* того, що ви хочете бачити на екрані. React приймає цей опис і відтворює результат. Зокрема, `render` повертає **React-елемент** -- полегшену версію того, що треба відрендерити. Більшість React-розробників користується спеціальним синтаксисом під назвою "JSX", який спрощує написання цих конструкцій. Під час компіляції синтаксис `
    ` перетворюється у `React.createElement('div')`, тож приклад вище рівноцінний до: +Метод `render` повертає *опис* того, що ви хочете бачити на екрані. React приймає цей опис і відтворює результат. Зокрема, `render` повертає **React-елемент** — полегшену версію того, що треба відрендерити. Більшість React-розробників користується спеціальним синтаксисом під назвою "JSX", який спрощує написання цих конструкцій. Під час компіляції синтаксис `
    ` перетворюється у `React.createElement('div')`, тож приклад вище рівноцінний до: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -223,7 +223,7 @@ class Square extends React.Component { **[Проглянути повний код цього кроку](https://codepen.io/gaearon/pen/aWWQOG?editors=0010)** -Вітаємо! Ви щойно "передали проп" від батьківського компонента Board до дочірнього компонента Square. Передача даних через пропси від батьківського компонента до дочірнього -- це те як дані перетікають у React-додатках. +Вітаємо! Ви щойно "передали проп" від батьківського компонента Board до дочірнього компонента Square. Передача даних через пропси від батьківського компонента до дочірнього — це те як дані перетікають у React-додатках. ### Створюємо інтерактивний компонент {#making-an-interactive-component} @@ -356,7 +356,7 @@ React DevTools дозволяють перевірити пропси і ста **Щоб зібрати данні з кількох дочірніх компонентів чи дати можливість двом дочірнім компонентам контактувати один з одним, вам потрібно визначити спільний стан у батьківському компоненті. Батьківський компонент може передавати стан до дочірніх компонентів через пропси. Цей спосіб підтримує синхронізацію дочірніх компонентів один з одним і з батьківським компонентом.** -Підйом стану до батьківського компонента -- звична справа при рефакторингу React-компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб. +Підйом стану до батьківського компонента — звична справа при рефакторингу React-компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб. Добавте конструктор до компонента Board і визначте початковий стан, який міститиме масив з 9 null-елементами, що відповідають 9 клітинкам: @@ -425,7 +425,7 @@ class Board extends React.Component { > >Ми розбили код вище для кращої читабельності і додали круглі дужки, щоб JavaScript не зруйнував код, вставляючи крапку з комою після `return`. -Тепер, від Board до Square, ми передаємо два пропси вниз: `value` та `onClick`. Проп `onClick` -- функція, що спрацьовує коли клітинку компонента Square натиснуто. Внесемо наступні зміни до Square: +Тепер, від Board до Square, ми передаємо два пропси вниз: `value` та `onClick`. Проп `onClick` — функція, що спрацьовує коли клітинку компонента Square натиснуто. Внесемо наступні зміни до Square: * Замініть `this.state.value` на `this.props.value` у методі `render` компонента Square * Замініть `this.setState()` на `this.props.onClick()` у методі `render` компонента Square @@ -525,7 +525,7 @@ class Board extends React.Component { У попередньому прикладі коду ми запропонували використати метод `.slice()` для створення копії масиву `squares`, щоб у подальшому модифікувати цю копію замість оригінального масиву. Тепер ми обговоримо, що таке незмінність, і чому важливо її вивчати. -Загалом існує два загальних підходи до зміни данних. Перший підхід -- *змінити* дані напряму, встановлюючи нові значення. Другий підхід -- замінити дані копією з уже включеними змінами. +Загалом існує два загальних підходи до зміни данних. Перший підхід — *змінити* дані напряму, встановлюючи нові значення. Другий підхід — замінити дані копією з уже включеними змінами. #### Пряма зміна даних {#data-change-with-mutation} ```javascript @@ -567,7 +567,7 @@ var newPlayer = Object.assign({}, player, {score: 2}); Змінимо Square на **функціональний компонент**. -У React **функціональні компоненти** -- це спрощений спосіб написання компонентів, що складаються тільки з `render`-метода і не мають власного стану. Замість визначення класу, який поширює `React.Component`, ми можемо створити функцію, яка приймає `пропси` і повертає те, що треба відрендерити. Функціональні компоненти менш довгі у написанні, і більшість компонентів можна оформити таким чином. +У React **функціональні компоненти** — це спрощений спосіб написання компонентів, що складаються тільки з `render`-метода і не мають власного стану. Замість визначення класу, який поширює `React.Component`, ми можемо створити функцію, яка приймає `пропси` і повертає те, що треба відрендерити. Функціональні компоненти менш довгі у написанні, і більшість компонентів можна оформити таким чином. Замінимо клас Square на наступну функцію: @@ -591,7 +591,7 @@ function Square(props) { ### Встановлюємо почерговість {#taking-turns} -Тепер нам треба виправити один очевидний дефект у нашій грі -- на полі не можна поставити "O". +Тепер нам треба виправити один очевидний дефект у нашій грі — на полі не можна поставити "O". За замовчуванням встановимо перший хід за "X". Зробити це можливо модифікувавши початкови стан у конструкторі компонента Board: @@ -988,7 +988,7 @@ class Board extends React.Component { Оскільки ми записуємо історію гри у хрестики-нулики, то тепер, у вигляді списку попередніх ходів, ми можемо показати її гравцю. -Як ми вже довідались раніше, елементи React -- це поршокласні об'єкти JavaScript, які ми можемо передавати всередині нашого додатку. Щоб відрендерити численні об'єкти у React, ми можемо скористатися масивом React-елементів. +Як ми вже довідались раніше, елементи React — це поршокласні об'єкти JavaScript, які ми можемо передавати всередині нашого додатку. Щоб відрендерити численні об'єкти у React, ми можемо скористатися масивом React-елементів. У JavaScript масиви мають [метод `map()`](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map), який зазвичай використовється для перетворення данних, наприклад: @@ -1070,7 +1070,7 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6]
  • Алекса: 5 задач залишилось
    • ``` -На додачу до оновлених чисел, людина, що читатиме цей код, можливо, скаже, що ми поміняли Алексу і Бена місцями, а між ними додали Клавдію. Але React -- це комп'ютерна програма, яка не знає нашого наміру. І саме через це нам потрібно визначити властивість *key* для кожного пункту у списку, щоб мати змогу розрізнити їх одне від одного. Одним з варіантів можуть бути рядки `alexa`, `ben`, `claudia`. Або якщо ми беремо дані з бази даних, то у якості ключів ми могли б використати ідентифікатори Алекси, Бена та Клаудії. +На додачу до оновлених чисел, людина, що читатиме цей код, можливо, скаже, що ми поміняли Алексу і Бена місцями, а між ними додали Клавдію. Але React — це комп'ютерна програма, яка не знає нашого наміру. І саме через це нам потрібно визначити властивість *key* для кожного пункту у списку, щоб мати змогу розрізнити їх одне від одного. Одним з варіантів можуть бути рядки `alexa`, `ben`, `claudia`. Або якщо ми беремо дані з бази даних, то у якості ключів ми могли б використати ідентифікатори Алекси, Бена та Клаудії. ```html
  • {user.name}: {user.taskCount} tasks left
    • @@ -1078,7 +1078,7 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] Коли список рендериться повторно, React бере ключ у кожного пункту списку і перевіряє попередній список на наявність підходящого ключа. Якщо поточний список має ключ, який до цього не існував, React створює новий компонент. Якщо поточний список не має ключа, який існував у попередньому списку, React видаляє попередній компонент. Якщо два ключі співпадають, то відповідний компонент переміщається. Ключі вказують на ідентичність кожного компонента, що дозволяє React підтримувати стан між повторними рендерингами. Якщо ключ компонента змінюється, компонент буде видалено і створено з новим станом. -`key` -- це особлива зарезервована властивість React (разом з `ref`, більш передовою особливістю). Коли елемент створено, React видобуває властивість `key` і зберігає її безпосередньо у поверненому елементі. Хоча `key` і виглядає як `props`, на нього не можна посилатися використовуючи `this.props.key`. React автоматично використовує `key`, щоб визначити який компонент оновити. Компонент не має доступу до `key`. +`key` — це особлива зарезервована властивість React (разом з `ref`, більш передовою особливістю). Коли елемент створено, React видобуває властивість `key` і зберігає її безпосередньо у поверненому елементі. Хоча `key` і виглядає як `props`, на нього не можна посилатися використовуючи `this.props.key`. React автоматично використовує `key`, щоб визначити який компонент оновити. Компонент не має доступу до `key`. **Ми наполегливо рекомендуємо призначати належні ключі при створенні динамічних списків.** Якщо у вас не має підходящого ключа, вам варто розглянути можливість перебудови даних, щоб він у вас з'явився. @@ -1089,7 +1089,7 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] ### Втілюємо подорож у часі {#implementing-time-travel} -У історії гри в хрестики-нулики кожен попередній хід має унікальний, асоційований з ним ідентифікатор -- порядковий номер ходу. Ходи мають чітку послідовність і ніколи не видаляються чи додаються у середині списку, тож ми безпечно можемо виокристовувати індекси у ролі ключів. +У історії гри в хрестики-нулики кожен попередній хід має унікальний, асоційований з ним ідентифікатор — порядковий номер ходу. Ходи мають чітку послідовність і ніколи не видаляються чи додаються у середині списку, тож ми безпечно можемо виокристовувати індекси у ролі ключів. У методі `render` компонента Game ми можемо додати ключ `
  • ` і відповідне попередження від React має зникнути: From f1518fea83970b1291f5b959593c1693f2830eb3 Mon Sep 17 00:00:00 2001 From: Volodymyr Klymenko Date: Mon, 8 Apr 2019 20:01:10 -0400 Subject: [PATCH 12/14] Apply suggestions from code review Co-Authored-By: marichka-offen <40467112+marichka-offen@users.noreply.github.com> --- content/tutorial/tutorial.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index c0061666a..51b305c44 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -517,7 +517,7 @@ class Board extends React.Component { Після цих змін ми як і раніше знову можемо натискати клітинки, щоб заповнити їх. Однак тепер стан зберігається у компоненті Board замість кожного індивідуального компонента Square. Коли стан Board змінюється, Square перерендерюється автоматично. Збереження стану всіх клітинок у компоненті Board у майбутньому дозволить нам визначити переможця. -Оскільки компоненти Square більше не зберігають стан, вони отримують значення від компорента Board і інформують його при кожному натиску. Згідно з термінологією React, компоненти Square є **контрольованими компонентами**, оскільки Board тепер має повний контроль над ними. +Оскільки компоненти Square більше не зберігають стан, вони отримують значення від компонента Board і інформують його при кожному натиску. Згідно з термінологією React, компоненти Square є **контрольованими компонентами**, оскільки Board тепер має повний контроль над ними. Зверніть увагу, як усередині `handleClick` ми використали метод `.slice()`, щоб створити копію масиву `squares`, яку ми змінюватимемо замість уже існуючого масиву. Ми пояснимо, навіщо ми створили цю копію у наступному розділі. @@ -567,7 +567,7 @@ var newPlayer = Object.assign({}, player, {score: 2}); Змінимо Square на **функціональний компонент**. -У React **функціональні компоненти** — це спрощений спосіб написання компонентів, що складаються тільки з `render`-метода і не мають власного стану. Замість визначення класу, який поширює `React.Component`, ми можемо створити функцію, яка приймає `пропси` і повертає те, що треба відрендерити. Функціональні компоненти менш довгі у написанні, і більшість компонентів можна оформити таким чином. +У React **функціональні компоненти** — це спрощений спосіб написання компонентів, що складаються тільки з `render`-метода і не мають власного стану. Замість визначення класу, який поширює `React.Component`, ми можемо створити функцію, яка приймає `пропси` і повертає те, що треба відрендерити. Функціональні компоненти коротші у написанні, і більшість компонентів можна оформити таким чином. Замінимо клас Square на наступну функцію: @@ -593,7 +593,7 @@ function Square(props) { Тепер нам треба виправити один очевидний дефект у нашій грі — на полі не можна поставити "O". -За замовчуванням встановимо перший хід за "X". Зробити це можливо модифікувавши початкови стан у конструкторі компонента Board: +За замовчуванням встановимо перший хід за "X". Зробити це можливо модифікувавши початковий стан у конструкторі компонента Board: ```javascript{6} class Board extends React.Component { @@ -692,7 +692,7 @@ class Board extends React.Component { ### Визначення переможця {#declaring-a-winner} -Тепер, коли ми показуємо, який гравець ходить наступним, ми також маємо показати переможця у кінці гри і зробити наступні ходи неможливими. Скопіюйте цю допоміжну функцію і вставте її в кінці файлу: +Тепер, коли ми показуємо, який гравець ходить наступним, ми також маємо показати переможця у кінці гри і зробити наступні ходи неможливими. Скопіюйте цю допоміжну функцію і вставте її в кінці файлу: ```javascript function calculateWinner(squares) { @@ -834,11 +834,11 @@ class Game extends React.Component { } ``` -Після цього нам потрібно, щоб компонент Board отримував пропси `squares` та `onClick` з компонента Game. Оскільки тепер у Board ми маємо єдиний обробник події натиску для усіх Squares, нам досить передати розташування кожного Square в обробник `onClick`, щоб вказати яку клітинку було натиснуто. Щоб змінити компоент Board нам необхідно зробити наступні кроки: +Після цього нам потрібно, щоб компонент Board отримував пропси `squares` та `onClick` з компонента Game. Оскільки тепер у Board ми маємо єдиний обробник події натиску для усіх Squares, нам досить передати розташування кожного Square в обробник `onClick`, щоб вказати яку клітинку було натиснуто. Щоб змінити компонент Board нам необхідно зробити наступні кроки: -* Видаліть `constructor` з Board. -* Замініть `this.state.squares[i]` на `this.props.squares[i]` у `renderSquare` компонента Board. -* Замініть `this.handleClick(i)` на `this.props.onClick(i)` у `renderSquare` компонента Board. +* Видалити `constructor` з Board. +* Замінити `this.state.squares[i]` на `this.props.squares[i]` у `renderSquare` компонента Board. +* Замінити `this.handleClick(i)` на `this.props.onClick(i)` у `renderSquare` компонента Board. Компонент Board тепер має виглядати наступним чином: @@ -988,7 +988,7 @@ class Board extends React.Component { Оскільки ми записуємо історію гри у хрестики-нулики, то тепер, у вигляді списку попередніх ходів, ми можемо показати її гравцю. -Як ми вже довідались раніше, елементи React — це поршокласні об'єкти JavaScript, які ми можемо передавати всередині нашого додатку. Щоб відрендерити численні об'єкти у React, ми можемо скористатися масивом React-елементів. +Як ми вже довідались раніше, елементи React — це першокласні об'єкти JavaScript, які ми можемо передавати всередині нашого додатку. Щоб відрендерити численні об'єкти у React, ми можемо скористатися масивом React-елементів. У JavaScript масиви мають [метод `map()`](https://developer.mozilla.org/uk/docs/Web/JavaScript/Reference/Global_Objects/Array/map), який зазвичай використовється для перетворення данних, наприклад: @@ -1076,20 +1076,20 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6]
  • {user.name}: {user.taskCount} tasks left
    • ``` -Коли список рендериться повторно, React бере ключ у кожного пункту списку і перевіряє попередній список на наявність підходящого ключа. Якщо поточний список має ключ, який до цього не існував, React створює новий компонент. Якщо поточний список не має ключа, який існував у попередньому списку, React видаляє попередній компонент. Якщо два ключі співпадають, то відповідний компонент переміщається. Ключі вказують на ідентичність кожного компонента, що дозволяє React підтримувати стан між повторними рендерингами. Якщо ключ компонента змінюється, компонент буде видалено і створено з новим станом. +Коли список рендериться повторно, React бере ключ у кожного пункту списку і перевіряє попередній список на наявність відповідного ключа. Якщо поточний список має ключ, який до цього не існував, React створює новий компонент. Якщо поточний список не має ключа, який існував у попередньому списку, React видаляє попередній компонент. Якщо два ключі співпадають, то відповідний компонент переміщається. Ключі вказують на ідентичність кожного компонента, що дозволяє React підтримувати стан між повторними рендерингами. Якщо ключ компонента змінюється, компонент буде видалено і створено з новим станом. `key` — це особлива зарезервована властивість React (разом з `ref`, більш передовою особливістю). Коли елемент створено, React видобуває властивість `key` і зберігає її безпосередньо у поверненому елементі. Хоча `key` і виглядає як `props`, на нього не можна посилатися використовуючи `this.props.key`. React автоматично використовує `key`, щоб визначити який компонент оновити. Компонент не має доступу до `key`. -**Ми наполегливо рекомендуємо призначати належні ключі при створенні динамічних списків.** Якщо у вас не має підходящого ключа, вам варто розглянути можливість перебудови даних, щоб він у вас з'явився. +**Ми наполегливо рекомендуємо призначати належні ключі при створенні динамічних списків.** Якщо у вас не має відповідного ключа, вам варто розглянути можливість перебудови даних, щоб він у вас з'явився. -Якщо жодного ключа не зазначено, React видасть попередження і за замовчуванням використовуватиме індекси масиву у ролі ключів. Використання індексів масиву може бути проблематичним при реорганізації списку або доданні/видаленні пунктів. Експліцітне створення `key={i}` змусить попередження зникнути, але матиме ті самі проблеми, що і використання індексів масиву, тому не рекомендується у більшості випадків. +Якщо жодного ключа не зазначено, React видасть попередження і за замовчуванням використовуватиме індекси масиву у ролі ключів. Використання індексів масиву може бути проблематичним при реорганізації списку або доданні/видаленні пунктів. Явне створення `key={i}` змусить попередження зникнути, але матиме ті самі проблеми, що і використання індексів масиву, тому не рекомендується у більшості випадків. -Ключам не потрібно бути унікальними глобально, тільки між компонентами і їх родичами +Ключам не потрібно бути унікальними глобально, тільки між компонентами та їх родичами ### Втілюємо подорож у часі {#implementing-time-travel} -У історії гри в хрестики-нулики кожен попередній хід має унікальний, асоційований з ним ідентифікатор — порядковий номер ходу. Ходи мають чітку послідовність і ніколи не видаляються чи додаються у середині списку, тож ми безпечно можемо виокристовувати індекси у ролі ключів. +У історії гри в хрестики-нулики кожен попередній хід має унікальний, асоційований з ним ідентифікатор — порядковий номер ходу. Ходи мають чітку послідовність і ніколи не видаляються чи додаються у середині списку, тож ми безпечно можемо використовувати індекси у ролі ключів. У методі `render` компонента Game ми можемо додати ключ `
  • ` і відповідне попередження від React має зникнути: @@ -1106,7 +1106,7 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] }); ``` -**[Прогляути повний код цього кроку](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** +**[Проглянути повний код цього кроку](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** Натиснення будь-якої з кнопок списку видасть помилку, оскільки метод `jumpTo` ще не визначено. Перед тим як створити цей метод, додамо `stepNumber` до стану компонента Game, щоб вказати який хід ми наразі розглядаємо. @@ -1145,7 +1145,7 @@ class Game extends React.Component { } ``` -Тепер внесемо деякі зміни до методу `handleClick` у Game, що спрацьовуватиме при кожному натиску на клітинки. +Тепер внесемо деякі зміни до методу `handleClick` у Game, що спрацьовуватиме при кожному натисканні на клітинки. Стан `stepNumber`, який ми щойно додали, відображає хід, який користувач бачить на даний момент. Після кожного наступного ходу нам потрібно оновити `stepNumber` використовуючи `stepNumber: history.length` як частину аргументу `this.setState`. Це дозволить нам впевнитись, що ми не застрягнемо на тому самому місці, після того як новий хід буде зроблено. @@ -1181,7 +1181,7 @@ class Game extends React.Component { // решта не змінилася ``` -Якщо ми натиснемо на будь-який крок ігрової історії, поле мусить обновитися, демонструючи як воно виглядало після цього ходу. +Якщо ми натиснемо на будь-який крок ігрової історії, поле мусить оновитися, демонструючи як воно виглядало після цього ходу. **[Проглянути повний код цього кроку](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** From 12b3e4d0bb378ad7b10cd71043372a2a507136ee Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Mon, 8 Apr 2019 20:04:58 -0400 Subject: [PATCH 13/14] Update tutorial.md --- content/tutorial/tutorial.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 51b305c44..4f9d23bfb 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -53,7 +53,7 @@ redirect_from: ### Спосіб 1: Пишемо код у браузері {#setup-option-1-write-code-in-the-browser} -Якщо вам не терпиться почати, цей спосіб найшвидший! +Якщо вам кортить почати, цей спосіб найшвидший! Спершу, відкрийте **[стартовий код](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** у новій вкладці. Ви побачите пусте поле для гри в хрестики-нулики і React-код. У даному розділі ми поступово змінюватимемо цей код. @@ -358,7 +358,7 @@ React DevTools дозволяють перевірити пропси і ста Підйом стану до батьківського компонента — звична справа при рефакторингу React-компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб. -Добавте конструктор до компонента Board і визначте початковий стан, який міститиме масив з 9 null-елементами, що відповідають 9 клітинкам: +Додайте конструктор до компонента Board і визначте початковий стан, який міститиме масив з 9 null-елементами, що відповідають 9 клітинкам: ```javascript{2-7} class Board extends React.Component { From bd04fa889e5f603b7a4e8241883c0b79cc8a8c26 Mon Sep 17 00:00:00 2001 From: "Marichka (Tsiuriak) Offen" <40467112+marichka-offen@users.noreply.github.com> Date: Mon, 8 Apr 2019 20:13:36 -0400 Subject: [PATCH 14/14] Update tutorial.md --- content/tutorial/tutorial.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 4f9d23bfb..be6c5e48a 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -529,17 +529,17 @@ class Board extends React.Component { #### Пряма зміна даних {#data-change-with-mutation} ```javascript -var player = {score: 1, name: 'Jeff'}; +var player = {score: 1, name: 'Андрій'}; player.score = 2; -// Тепер черга гравця {score: 2, name: 'Jeff'} +// Тепер черга гравця {score: 2, name: 'Андрій'} ``` #### Опосередкована зміна даних {#data-change-without-mutation} ```javascript -var player = {score: 1, name: 'Jeff'}; +var player = {score: 1, name: 'Андрій'}; var newPlayer = Object.assign({}, player, {score: 2}); -// У цьому прикладі player залишився незмінним, а newPlayer набув значення {score: 2, name: 'Jeff'} +// У цьому прикладі player залишився незмінним, а newPlayer набув значення {score: 2, name: 'Андрій'} // Або якщо ви використовуєте синтаксис розширення, ви можете написати: // var newPlayer = {...player, score: 2}; @@ -1058,19 +1058,19 @@ const doubled = numbers.map(x => x * 2); // [2, 4, 6] Уявимо зміни від ```html -
  • Алекса: 7 задач залишилось
    • -
  • Бен: 5 задач залишилося
    • +
  • Олег: 7 задач залишилось
    • +
  • Данило: 5 задач залишилося
    • ``` до ```html -
  • Бен: 9 задач залишилось
    • -
  • Клавдія: 8 задач залишилось
    • -
  • Алекса: 5 задач залишилось
    • +
  • Данило: 9 задач залишилось
    • +
  • Катерина: 8 задач залишилось
    • +
  • Олег: 5 задач залишилось
    • ``` -На додачу до оновлених чисел, людина, що читатиме цей код, можливо, скаже, що ми поміняли Алексу і Бена місцями, а між ними додали Клавдію. Але React — це комп'ютерна програма, яка не знає нашого наміру. І саме через це нам потрібно визначити властивість *key* для кожного пункту у списку, щоб мати змогу розрізнити їх одне від одного. Одним з варіантів можуть бути рядки `alexa`, `ben`, `claudia`. Або якщо ми беремо дані з бази даних, то у якості ключів ми могли б використати ідентифікатори Алекси, Бена та Клаудії. +На додачу до оновлених чисел, людина, що читатиме цей код, можливо, скаже, що ми поміняли Олега та Данила місцями, а між ними додали Катерину. Але React — це комп'ютерна програма, яка не знає нашого наміру. І саме через це нам потрібно визначити властивість *key* для кожного пункту у списку, щоб мати змогу розрізнити їх одне від одного. Одним з варіантів можуть бути рядки `oleg`, `danylo`, `kateryna`. Або якщо ми беремо дані з бази даних, то у якості ключів ми могли б використати ідентифікатори Олега, Данила та Катерини. ```html
  • {user.name}: {user.taskCount} tasks left