Tutorial: Хрестики-нулики

Підручник поділено на декілька розділів:

• Налаштування підручника дасть вам відправну точку для проходження підручника.
• Огляд навчить вас основам React: компоненти, пропси та стан.
• Проходження гри навчить вас найпоширенішим технікам розробки React.
• Додавання подорожей у часі дасть вам глибше розуміння унікальних переваг React.

Що ви будуєте?

У цьому туторіалі ви створите інтерактивну гру в хрестики-нулики за допомогою React.

Ви можете побачити, як це виглядатиме, коли ви закінчите, тут:

Якщо код ще не має сенсу для вас, або якщо ви не знайомі з синтаксисом коду, не хвилюйтеся! Мета цього підручника - допомогти вам зрозуміти React та його синтаксис.

Перед тим, як продовжити вивчення підручника, рекомендуємо вам ознайомитися з грою у хрестики-нулики, наведеною вище. Однією з особливостей, яку ви помітите, є те, що праворуч від ігрового поля є нумерований список. Цей список містить історію всіх ходів, які відбулися у грі, і він оновлюється по мірі проходження гри.

Після того, як ви погралися з готовою грою в хрестики-нулики, продовжуйте далі. У цьому підручнику ви почнете з простішого шаблону. Наш наступний крок - налаштувати вас так, щоб ви могли почати створювати гру.

Налаштування для підручника

У редакторі коду нижче натисніть Fork у верхньому правому куті, щоб відкрити редактор у новій вкладці за допомогою сайту CodeSandbox. CodeSandbox дозволяє писати код у браузері і переглядати, як користувачі побачать створений вами застосунок. На новій вкладці має з'явитися порожній квадрат і початковий код цього підручника.

Огляд

Тепер, коли ви налаштовані, давайте зробимо огляд React!

Перевірка початкового коду

У CodeSandbox ви побачите три основні розділи:

1. Розділ файли зі списком файлів на кшталт App.js, index.js, styles.css та папкою з назвою public
2. Редактор коду, де ви побачите вихідний код обраного файлу
3. Частина браузера, де ви побачите, як буде відображатися написаний вами код

У розділі Файли слід вибрати файл App.js. Вміст цього файлу у редакторі коду має бути таким:

export default function Square() {
  return <button className="square">X</button>;
}

У секції browser має відображатися квадрат з хрестиком ось так:

Тепер погляньмо на файли у початковому коді.

App.js

Код у App.js створює компонент. У React компонент - це фрагмент коду, який можна використовувати повторно і який представляє частину користувацького інтерфейсу. Компоненти використовуються для рендерингу, керування та оновлення елементів інтерфейсу користувача у вашому застосунку. Давайте подивимось на компонент по рядках, щоб зрозуміти, що відбувається:

export default function Square() {
  return <button className="square">X</button>;
}

Перший рядок визначає функцію з назвою Square. Ключове слово JavaScript export робить цю функцію доступною за межами цього файлу. Ключове слово default повідомляє іншим файлам, які використовують ваш код, що це головна функція у вашому файлі.

export default function Square() {
  return <button className="square">X</button>;
}

Другий рядок повертає кнопку. Ключове слово JavaScript return означає, що все, що йде після нього, повертається як значення викликувачу функції. <button> є JSX елементом. JSX-елемент - це комбінація коду JavaScript і тегів HTML, яка описує те, що ви хочете відобразити. className="square" - це властивість кнопки або проп, який вказує CSS, як оформити кнопку. X - це текст, що відображається всередині кнопки, а </button> закриває елемент JSX, щоб вказати, що будь-який наступний вміст не повинен бути розміщений всередині кнопки.

styles.css

Клікніть по файлу з назвою styles.css у розділі Files CodeSandbox. Цей файл визначає стилі для вашого React-застосунку. Перші два селектори CSS (* і body) визначають стиль великих частин вашого застосунку, в той час як селектор .square визначає стиль будь-якого компонента, де властивість className має значення square. У вашому коді це буде кнопка з вашого компонента Square у файлі App.js.

index.js

Клацніть на файлі з назвою index.js у розділі Files CodeSandbox. Ви не будете редагувати цей файл під час уроку, але він є сполучною ланкою між компонентом, який ви створили у файлі App.js, та веб-браузером.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import './styles.css';

import App from './App';

У рядках 1-5 зібрано всі необхідні частини:

• React
• Бібліотека React для спілкування з веб-браузерами (React DOM)
• стилі для ваших компонентів
• компонент, який ви створили у App.js.

Решта файлу збирає всі частини докупи і вставляє кінцевий продукт у index.html в публічній папці.

Створення дошки

Давайте повернемося до App.js. Тут ви проведете решту уроку.

Наразі на карті лише один квадрат, але вам потрібно дев'ять! Якщо ви просто спробуєте скопіювати і вставити ваш квадрат, то отримаєте два квадрати, як показано нижче:

export default function Square() {
  return <button className="square">X</button><button className="square">X</button>;
}

Ви отримаєте таку помилку:

React-компоненти повинні повертати один JSX-елемент, а не декілька сусідніх JSX-елементів, як дві кнопки. Щоб виправити це, ви можете використовувати Фрагменти (<> та </>) для обгортання декількох сусідніх JSX-елементів, як ось:

export default function Square() {
  return (
    <>
      <button className="square">X</button>
      <button className="square">X</button>
    </>
  );
}

Тепер ви повинні побачити:

Чудово! Тепер вам потрібно лише кілька разів скопіювати та вставити, щоб додати дев'ять квадратиків і..

О ні! Квадратики розташовані в одну лінію, а не у вигляді сітки, як потрібно для нашої дошки. Щоб виправити це, вам потрібно згрупувати квадратики у рядки за допомогою divs і додати кілька класів CSS. Також ви можете присвоїти кожному квадрату номер, щоб переконатися, що ви знаєте, де відображається кожен квадрат.

У файлі App.js оновіть компонент Square до такого вигляду:

export default function Square() {
  return (
    <>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        <button className="square">3</button>
      </div>
      <div className="board-row">
        <button className="square">4</button>
        <button className="square">5</button>
        <button className="square">6</button>
      </div>
      <div className="board-row">
        <button className="square">7</button>
        <button className="square">8</button>
        <button className="square">9</button>
      </div>
    </>
  );
}

CSS, визначений у styles.css стилізує divs з className з board-row. Тепер, коли ви згрупували свої компоненти у рядки зі стилізованим div, у вас є дошка для гри у хрестики-нулики:

Але тепер у вас виникла проблема. Ваш компонент з назвою Square насправді більше не є квадратом. Давайте виправимо це, змінивши назву на Board:

export default function Board() {
  //...
}

На цьому етапі ваш код має виглядати приблизно так:

Передача даних через пропси

Далі вам потрібно змінити значення квадратика з порожнього на "X", коли користувач натискає на нього. З урахуванням того, як ви побудували дошку, вам потрібно буде скопіювати і вставити код, який оновлює квадрат дев'ять разів (по одному разу для кожного квадрата, який у вас є)! Замість копіпасту архітектура компонентів React дозволяє вам створити компонент багаторазового використання, щоб уникнути невпорядкованого коду, що дублююється.

Перш за все, ви скопіюєте рядок, що визначає ваш перший квадрат (<button className="square">1</button>) з вашого компонента Board до нового компонента Square:

function Square() {
  return <button className="square">1</button>;
}

export default function Board() {
  // ...
}

Тоді ви оновите компонент Board, щоб рендерити цей Square компонент за допомогою синтаксису JSX:

// ...
export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="board-row">
        <Square />
        <Square />
        <Square />
      </div>
    </>
  );
}

Зверніть увагу, що на відміну від браузерних divs, ваші власні компоненти Board та Square повинні починатися з великої літери.

Давайте подивимося:

О ні! Ви втратили пронумеровані квадратики, які були раніше. Тепер у кожній клітинці написано "1". Щоб виправити це, скористайтеся пропсами для передачі значення, яке повинен мати кожен квадрат, від батьківського компонента (Board) до його дочірнього (Square).

Оновлення компонента Square для читання пропу value, який буде передано з Board:

function Square({ value }) {
  return <button className="square">1</button>;
}

function Square({ value }) вказує на те, що компоненту Square можна передати проп з назвою value.

Тепер ви хочете вивести значення замість 1 всередині кожної клітинки. Спробуйте зробити це таким чином:

function Square({ value }) {
  return <button className="square">value</button>;
}

Упс, це не те, що ви хотіли:

Ви хотіли відобразити змінну JavaScript з назвою value з вашого компонента, а не слово "value". Щоб "втекти до JavaScript" з JSX, вам потрібні фігурні дужки. Додайте фігурні дужки навколо value у JSX так:

function Square({ value }) {
  return <button className="square">{value}</button>;
}

Наразі ви маєте бачити порожню дошку:

Це сталося тому, що компонент Board ще не передав проп value кожному компоненту Square, який він рендерить. Щоб виправити це, ви додасте проп value до кожного компонента Square, що рендериться компонентом Board:

export default function Board() {
  return (
    <>
      <div className="board-row">
        <Square value="1" />
        <Square value="2" />
        <Square value="3" />
      </div>
      <div className="board-row">
        <Square value="4" />
        <Square value="5" />
        <Square value="6" />
      </div>
      <div className="board-row">
        <Square value="7" />
        <Square value="8" />
        <Square value="9" />
      </div>
    </>
  );
}

Тепер ви знову повинні побачити сітку чисел:

Ваш оновлений код має виглядати так:

Кожна клітинка тепер отримає значення проп, яке буде або 'X', або 'O', або null для порожніх клітинок.

Далі вам потрібно змінити те, що відбувається при натисканні на Square. Компонент Board тепер підтримує заповнення клітинок. Вам потрібно створити спосіб для Square оновлювати стан Board. Оскільки стан є приватним для компонента, який його визначає, ви не можете оновити стан Board безпосередньо з Square.

Натомість, ви передасте функцію з компонента Board до компонента Square, і Square викличе цю функцію, коли буде натиснуто квадрат. Ви почнете з функції, яку викличе компонент Square при натисканні на нього. Ви викличете цю функцію onSquareClick:

function Square({ value }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Далі ви додасте функцію onSquareClick до пропсів компонента Square:

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

Тепер ви підключите проп onSquareClick до функції у компоненті Board, яку ви назвете handleClick. Щоб підключити onSquareClick до handleClick, вам слід передати функцію у проп onSquareClick першого компонента Square:

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={handleClick} />
        //...
  );
}

Нарешті, ви визначите функцію handleClick всередині компонента Board для оновлення масиву squares, що містить стан вашої дошки:

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick() {
    const nextSquares = squares.slice();
    nextSquares[0] = "X";
    setSquares(nextSquares);
  }

  return (
    // ...
  )
}

Функція handleClick створює копію масиву squares (nextSquares) методом масиву JavaScript slice(). Потім handleClick оновлює масив nextSquares, щоб додати X до першого (індекс [0]) квадрата.

Виклик функції setSquares повідомляє React про зміну стану компонента. Це призведе до перерендерингу компонентів, які використовують стан squares (Board), а також його дочірніх компонентів (компонентів Square, які складають плату).

Тепер ви можете додавати хрестики на дошку... але лише у верхній лівий квадрат. Ваша функція handleClick жорстко закодована на оновлення індексу для верхньої лівої клітинки (0). Давайте оновимо handleClick, щоб вона могла оновлювати будь-яку клітинку. Додамо до функції handleClick аргумент i, який отримує індекс клітинки для оновлення:

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    const nextSquares = squares.slice();
    nextSquares[i] = "X";
    setSquares(nextSquares);
  }

  return (
    // ...
  )
}

Далі вам потрібно буде передати ці i до handleClick. Ви можете спробувати встановити проп onSquareClick квадрата як handleClick(0) безпосередньо у JSX, але це не спрацює:

<Square value={squares[0]} onSquareClick={handleClick(0)} />

Ось чому це не працює. Виклик handleClick(0) буде частиною рендерингу компонента плати. Оскільки handleClick(0) змінює стан компонента плати за допомогою виклику setSquares, весь ваш компонент плати буде рендерити повторно. Але це призведе до повторного запуску handleClick(0), що призведе до нескінченного циклу:

Чому ця проблема не виникла раніше?

Коли ви передавали onSquareClick={handleClick}, ви передали функцію handleClick як проп. Ви не викликали її! Але зараз ви викликаєте цю функцію одразу - зверніть увагу на дужки у handleClick(0) - і саме тому вона запускається занадто рано. Ви ж не хочете, щоб викликав handleClick до того, як користувач натисне!

Це можна виправити, створивши функцію на зразок handleFirstSquareClick, яка викликає handleClick(0), функцію на зразок handleSecondSquareClick, яка викликає handleClick(1), і так далі. Ви можете передати (а не викликати) ці функції як пропси на кшталт onSquareClick={handleFirstSquareClick}. Це вирішить проблему нескінченного циклу.

Втім, визначати дев'ять різних функцій і давати кожній з них назву - занадто багатослівно. Натомість, давайте зробимо так:

export default function Board() {
  // ...
  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        // ...
  );
}

Зверніть увагу на новий синтаксис () =>. Тут () => handleClick(0) - це функція -стрілка, що є коротшим способом визначення функцій. При натисканні на квадрат виконується код після => "стрілки", який викликає handleClick(0).

Тепер вам потрібно оновити інші вісім квадратів, щоб викликати handleClick з переданих вами стрілочних функцій. Переконайтеся, що аргумент для кожного виклику handleClick відповідає індексу правильної клітинки:

export default function Board() {
  // ...
  return (
    <>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
  );
};

Тепер ви знову можете додавати хрестики до будь-якої клітинки на дошці, клацнувши на ній:

Але цього разу всім управлінням станом займається компонент Board!

Ось так має виглядати ваш код:

Тепер, коли обробка вашого стану знаходиться у компоненті Board, батьківський компонент Board передає пропси дочірнім компонентам Square, щоб їх можна було правильно відобразити. При натисканні на Square дочірній компонент Square тепер запитує батьківський компонент Board про оновлення стану дошки. Коли стан Board змінюється, і компонент Board, і кожен дочірній компонент Square автоматично рендериться повторно. Збереження стану всіх клітинок у компоненті Board дозволить йому визначити переможця у майбутньому.

Давайте повторимо, що відбувається, коли користувач натискає на верхній лівий квадрат на вашій дошці, щоб додати на неї X:

1. Натискання на верхній лівий квадрат запускає функцію, яку кнопка отримала як проп onClick з Square. Компонент Square отримав цю функцію як проп onSquareClick від Board. Компонент Board визначив цю функцію безпосередньо у JSX. Він викликає handleClick з аргументом 0.
2. handleClick використовує аргумент (0) для оновлення першого елемента масиву squares з null до X.
3. Стан квадратів компонента Board було оновлено, тому Board та всі його дочірні елементи відрендерено повторно. Це призводить до того, що проп value компонента Square з індексом 0 змінюється з null на X.

У результаті користувач бачить, що верхній лівий квадрат змінився з порожнього на X після натискання на нього.

Чому важлива незмінність

Зверніть увагу, що у handleClick ви викликаєте .slice() для створення копії масиву squares замість того, щоб змінити існуючий масив. Щоб пояснити чому, нам потрібно обговорити незмінюваність і чому незмінюваність важлива для вивчення.

Зазвичай існує два підходи до зміни даних. Перший підхід полягає у мутації даних шляхом безпосередньої зміни значень даних. Другий підхід полягає у заміні даних новою копією, яка містить бажані зміни. Ось як це виглядатиме, якщо ви зміните масив squares:

const squares = [null, null, null, null, null, null, null, null, null];
squares[0] = 'X';
// Now `squares` is ["X", null, null, null, null, null, null, null, null];

А ось як це виглядатиме, якщо змінити дані без мутації масиву squares:

const squares = [null, null, null, null, null, null, null, null, null];
const nextSquares = ['X', null, null, null, null, null, null, null, null];
// Now `squares` is unchanged, but `nextSquares` first element is 'X' rather than `null`

Результат той самий, але за рахунок відсутності мутації (зміни базових даних) безпосередньо ви отримуєте кілька переваг.

Змінюваність значно полегшує реалізацію складних функцій. Пізніше у цьому підручнику ви реалізуєте функцію "подорожі у часі", яка дозволить вам переглядати історію гри і "перестрибувати" на попередні ходи. Ця функціональність не є специфічною для ігор - можливість скасовувати та повторювати певні дії є звичайною вимогою для застосунків. Уникнення прямої мутації даних дозволяє зберегти попередні версії даних недоторканими і використовувати їх пізніше.

Існує ще одна перевага незмінності. За замовчуванням, усі дочірні компоненти автоматично перезавантажуються, коли змінюється стан батьківського компонента. Це стосується навіть тих дочірніх компонентів, на які зміни не вплинули. Хоча сам по собі повторний рендеринг не є помітним для користувача (не варто активно намагатися уникнути його!), ви можете пропустити повторний рендеринг частини дерева, на яку він явно не вплинув, з міркувань продуктивності. Завдяки незмінності компоненти дуже легко порівнюють, чи змінилися їхні дані, чи ні. Ви можете дізнатися більше про те, як React обирає, коли повторно рендерити компонент, у memoпосібнику з API.

По черзі

Настав час виправити основний недолік цієї гри у хрестики-нулики: літери "О" неможливо позначити на дошці.

За замовчуванням першим ходом буде "X". Давайте відстежувати це, додавши ще один елемент стану до компонента Board:

function Board() {
  const [xIsNext, setXIsNext] = useState(true);
  const [squares, setSquares] = useState(Array(9).fill(null));

  // ...
}

Щоразу, коли гравець робить хід, xIsNext (булеве значення) буде перевертатися, щоб визначити, який гравець ходить наступним, і стан гри буде збережено. Ви оновите функцію Board у handleClick, щоб перевернути значення xIsNext:

export default function Board() {
  const [xIsNext, setXIsNext] = useState(true);
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    const nextSquares = squares.slice();
    if (xIsNext) {
      nextSquares[i] = "X";
    } else {
      nextSquares[i] = "O";
    }
    setSquares(nextSquares);
    setXIsNext(!xIsNext);
  }

  return (
    //...
  );
}

Тепер, коли ви натискатимете на різні квадратики, вони чергуватимуться між X та O, як і має бути!

Але зачекайте, є проблема. Спробуйте натиснути на ту саму клітинку декілька разів:

Документ X перезаписано на O! Хоча це додало б грі дуже цікавого повороту, ми поки що дотримуватимемося оригінальних правил.

Коли ви позначаєте квадрат за допомогою X або O, ви не перевіряєте, чи він вже має значення X або O. Це можна виправити за допомогою повернення раннього . Ви перевірите, чи клітинка вже має значення X або O. Якщо клітинку вже заповнено, ви повернете у функцію handleClick раніше, ніж вона спробує оновити стан дошки.

function handleClick(i) {
  if (squares[i]) {
    return;
  }
  const nextSquares = squares.slice();
  //...
}

Тепер ви можете додавати X або O лише у порожні клітинки! Ось як має виглядати ваш код на цьому етапі:

Показати попередні ходи

Оскільки ви записуєте історію гри в хрестики-нулики, тепер ви можете показати гравцеві список попередніх ходів.

React-елементи на кшталт <button> є звичайними JavaScript-об'єктами; ви можете передавати їх у своєму застосунку. Щоб відрендерити декілька елементів у React, ви можете використовувати масив React-елементів.

У вас вже є масив history ходів у стані, тож тепер вам потрібно перетворити його на масив елементів React. У JavaScript для перетворення одного масиву в інший можна використати метод array map:

[1, 2, 3].map((x) => x * 2) // [2, 4, 6]

Ви будете використовувати map для перетворення вашої історії ходів у React-елементи, що представляють кнопки на екрані, та відображення списку кнопок для "переходу" до минулих ходів. Давайте накладемо map на history у компоненті Game:

export default function Game() {
  const [xIsNext, setXIsNext] = useState(true);
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const currentSquares = history[history.length - 1];

  function handlePlay(nextSquares) {
    setHistory([...history, nextSquares]);
    setXIsNext(!xIsNext);
  }

  function jumpTo(nextMove) {
    // TODO
  }

  const moves = history.map((squares, move) => {
    let description;
    if (move > 0) {
      description = 'Go to move #' + move;
    } else {
      description = 'Go to game start';
    }
    return (
      <li>
        <button onClick={() => jumpTo(move)}>{description}</button>
      </li>
    );
  });

  return (
    <div className="game">
      <div className="game-board">
        <Board xIsNext={xIsNext} squares={currentSquares} onPlay={handlePlay} />
      </div>
      <div className="game-info">
        <ol>{moves}</ol>
      </div>
    </div>
  );
}

Нижче ви можете побачити, як має виглядати ваш код. Зауважте, що у консолі інструментів розробника ви маєте побачити помилку, яка виглядає наступним чино:

Цю помилку буде виправлено у наступному розділі.

Під час ітерації масиву history всередині функції, яку ви передали до map, аргумент squares проходить через кожен елемент масиву history, а аргумент move проходить через кожен індекс масиву: 0, 1, 2, ..... (У більшості випадків вам знадобляться власне елементи масиву, але для виведення списку ходів вам знадобляться лише індекси)

Для кожного ходу в історії гри в хрестики-нулики ви створюєте елемент списку <li>, який містить кнопку <button>. Кнопка має обробник onClick, який викликає функцію jumpTo (яку ви ще не реалізували).

Наразі у консолі інструментів розробника ви маєте побачити список ходів, які відбулися у грі, та помилку. Давайте обговоримо, що означає помилка "ключа".

Вибір ключа

Коли ви рендерите список, React зберігає деяку інформацію про кожен елемент списку. Коли ви оновлюєте список, React має визначити, що саме змінилося. Можливо, ви додали, видалили, переставили або оновили елементи списку.

Уявіть собі перехід від

<li>Alexa: 7 tasks left</li>
<li>Ben: 5 tasks left</li>

to

<li>Ben: 9 tasks left</li>
<li>Claudia: 8 tasks left</li>
<li>Alexa: 5 tasks left</li>

На застосунок до оновлених підрахунків, людина, яка читає це, ймовірно, скаже, що ви поміняли місцями замовлення Алекси та Бена і вставили Клаудію між Алексою та Беном. Однак React - це комп'ютерна програма і він не знає, що ви хотіли зробити, тому вам потрібно вказати властивість key для кожного елемента списку, щоб відрізнити кожен елемент списку від його братів і сестер. Якщо дані взято з бази даних, як ключі можна використати ідентифікатори бази даних Алекси, Бена та Клаудії.

<li key={user.id}>
  {user.name}: {user.taskCount} tasks left
</li>

Під час повторного рендерингу списку React бере ключ кожного елемента списку та шукає відповідний ключ у попередньому списку. Якщо поточний список має ключ, якого раніше не існувало, React створює компонент. Якщо в поточному списку відсутній ключ, який існував у попередньому списку, React знищує попередній компонент. Якщо два ключі збігаються, відповідний компонент переміщується.

Ключі повідомляють React про ідентичність кожного компонента, що дозволяє React підтримувати стан між повторними рендерингами. Якщо ключ компонента змінюється, компонент буде знищено і створено наново з новим станом.

key є спеціальною та зарезервованою властивістю в React. Коли створюється елемент, React витягує властивість key і зберігає ключ безпосередньо у повернутому елементі. Хоча key може виглядати так, ніби його передано як пропси, React автоматично використовує key, щоб вирішити, які компоненти оновлювати. Компонент не має можливості запитати, який key вказав його батько.

Наполегливо рекомендується призначати відповідні ключі при створенні динамічних списків. Якщо у вас немає відповідного ключа, ви можете розглянути можливість реструктуризації ваших даних таким чином.

Якщо ключ не вказано, React повідомить про помилку і використає індекс масиву як ключ за замовчуванням. Використання індексу масиву як ключа є проблематичним при спробі змінити порядок елементів списку або вставити/видалити елементи списку. Явна передача key={i} вимкне помилку, але має ті самі проблеми, що й індекси масиву, і не рекомендується у більшості випадків.

Ключі не обов'язково мають бути глобально унікальними; вони мають бути унікальними лише між компонентами та їхніми братами і сестрами.

Реалізація подорожей у часі

В історії гри хрестики-нулики кожен минулий хід має унікальний ідентифікатор, пов'язаний з ним: це порядковий номер ходу. Ходи ніколи не будуть перевпорядковані, видалені або вставлені посередині, тому безпечно використовувати індекс ходу як ключ.

У функції Game ви можете додати ключ як <li key={move}>, і якщо ви перезавантажите відрендерену гру, помилка React "key" повинна зникнути:

const moves = history.map((squares, move) => {
  //...
  return (
    <li key={move}>
      <button onClick={() => jumpTo(move)}>{description}</button>
    </li>
  );
});

Перш ніж реалізувати jumpTo, вам потрібно, щоб компонент Game відстежував, який крок зараз переглядає користувач. Для цього визначте нову змінну стану з назвою currentMove, за замовчуванням 0:

export default function Game() {
  const [xIsNext, setXIsNext] = useState(true);
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const currentSquares = history[history.length - 1];
  //...
}

Далі, оновіть функцію jumpTo всередині Game, щоб оновити цю currentMove. Ви також встановите xIsNext як true, якщо число, на яке ви змінюєте currentMove є парним.

export default function Game() {
  // ...
  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
    setXIsNext(nextMove % 2 === 0);
  }
  //...
}

Тепер ви внесете дві зміни до функції Game у handlePlay, яка викликається при натисканні на квадратик.

• Якщо ви "повертаєтеся у минуле", а потім робите новий хід з цієї точки, вам потрібно зберегти історію лише до цієї точки. Замість того, щоб додавати nextSquares після всіх елементів (синтаксис поширення ...) у історії, ви додасте його після всіх елементів у history.slice(0, currentMove + 1), щоб зберегти лише цю частину старої історії.
• Під час кожного переміщення потрібно оновлювати currentMove, щоб вказувати на останній запис історії.

function handlePlay(nextSquares) {
  const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
  setHistory(nextHistory);
  setCurrentMove(nextHistory.length - 1);
  setXIsNext(!xIsNext);
}

Нарешті, ви зміните компонент Game, щоб рендерити поточний вибраний хід, замість того, щоб завжди рендерити фінальний хід:

export default function Game() {
  const [xIsNext, setXIsNext] = useState(true);
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const currentSquares = history[currentMove];

  // ...
}

Якщо ви натиснете на будь-який крок в історії гри, дошка для хрестиків-нуликів має негайно оновитися, щоб показати, як виглядала дошка після цього ходу.

Фінальне очищення

Якщо ви уважно подивитеся на код, то помітите, що xIsNext === true коли currentMove парне і xIsNext === false коли currentMove непарне. Іншими словами, якщо ви знаєте значення currentMove, то ви завжди можете з'ясувати, яким має бути xIsNext.

Вам не потрібно зберігати обидва ці параметри у стані. Насправді, завжди намагайтеся уникати надлишкових станів. Спрощення того, що ви зберігаєте у стані, зменшує кількість помилок і робить ваш код простішим для розуміння. Змініть Game так, щоб він не зберігав xIsNext як окрему змінну стану, а визначав її на основі currentMove:

export default function Game() {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [currentMove, setCurrentMove] = useState(0);
  const xIsNext = currentMove % 2 === 0;
  const currentSquares = history[currentMove];

  function handlePlay(nextSquares) {
    const nextHistory = [...history.slice(0, currentMove + 1), nextSquares];
    setHistory(nextHistory);
    setCurrentMove(nextHistory.length - 1);
  }

  function jumpTo(nextMove) {
    setCurrentMove(nextMove);
  }
  // ...
}

Вам більше не потрібне оголошення стану xIsNext або виклики setXIsNext. Тепер у xIsNext немає жодного шансу вийти з синхронізації з currentMove, навіть якщо ви помилитеся під час кодування компонентів.

Завершення

Вітаємо! Ви створили гру хрестики-нулики, яка:

• Дозволяє грати у хрестики-нулики,
• Вказує, коли гравець виграв гру,
• Зберігає історію гри під час її проходження,
• Дозволяє гравцям переглядати історію гри та бачити попередні версії ігрового поля.

Чудова робота! Сподіваємося, тепер ви відчуваєте, що добре розумієте, як працює React.

Перевірте кінцевий результат тут:

Якщо у вас є додатковий час або ви хочете попрактикувати свої нові навички роботи з React, ось кілька ідей щодо покращення гри в хрестики-нулики, перелічених у порядку зростання складності:

1. Тільки для поточного ходу показувати "Ви перебуваєте на кроці #..." замість кнопки.
2. Перепишіть Board, щоб використовувати два цикли для створення квадратів замість їх жорсткого кодування.
3. Додано кнопку перемикача, яка дозволяє сортувати ходи за зростанням або спаданням.
4. Коли хтось виграє, підсвічувати три клітинки, які спричинили виграш (а коли ніхто не виграє, виводити повідомлення про нічию).
5. Відображення розташування для кожного переміщення у форматі (рядок, стовпчик) у списку історії переміщень.

Протягом цього підручника ви торкалися концепцій React, таких як елементи, компоненти, пропси та стан. Тепер, коли ви побачили, як ці концепції працюють при створенні гри, перегляньте Мислення в React, щоб побачити, як ті ж концепції React працюють при створенні інтерфейсу програми.