![\"React](\"/static/878d91461c78d8f238e116477dfe0b46/e45a9/devtools.png\")
\n \n \n \n Даний посібник не потребує попереднього ознайомлення з React.
\nУ цьому посібнику ми працюватимемо над створенням маленької гри. Вам це може здатися непотрібним, оскільки ви не плануєте створювати ігри, але ми рекомендуємо спробувати. Методи, які ви вивчите у даному посібнику, є основоположними для створення будь-якого React-додатка, і освоєння цих методів допоможе вам глибше зрозуміти React.
\n\n\nПорада
\nДаний посібник призначений для людей, які надають перевагу навчанню на практиці. Якщо вам більше подобається вчитися з нуля, зверніться до нашого покрокового довідника. Можливо, ви виявите для себе, що обидва чудово доповнюють одне одного.
\n
Посібник розбито на декілька розділів:
\nЩоб отримати користь від цього посібника, вам зовсім не потрібно опрацьовувати усі розділи відразу. Продовжуйте працювати стільки, скільки вважаєте за потрібне, навіть якщо це один чи два розділи.
\nУ цьому посібнику ми розглянемо створення інтерактивної гри в хрестики-нулики за допомогою React.
\nКінцевий результат ви можете розглянути за наступним посиланням: Завершена гра . Не хвилюйтесь, якщо код здається вам незрозумілим, або ви не знайомі з синтаксисом! Мета даного посібника — допомогти вам зрозуміти React і його синтаксис.
\nМи радимо уважно роздивитися гру перед тим як продовжувати працювати над посібником. Одна з її помітних властивостей — пронумеровани список з правої сторони ігрового поля. Цей список відображає історію всіх ходів і оновлюється по ходу гри.
\nВи можете закрити гру, коли закінчите ознайомлюватись. Ми почнемо з простішого зразка. Наш наступний крок — підготуватись до створення гри.
\nМи припустимо, що ви вже трохи знайомі з HTML і JavaScript. Але навіть якщо в повсякденному житті ви використовуєте іншу мову програмування, проходження даного посібника не має скласти труднощів. Також вважатимемо, що ви знайомі з функціями, об’єктами, масивами і, меншою мірою, класами.
\nЯкщо вам потрібно повторити основи JavaScript, ми рекомендуємо проглянути цей довідник. Зверніть увагу, що ми також використовуємо деякі особливості ES6 — нещодавньої версії JavaScript. У цьому посібинку ми застосовуємо стрілкові функції, класи, let та const. Ви можете скористатися Babel REPL, щоб дізнатися у що компілюється код ES6.
Існує два способи проходження цього посібника: ви можете писати код у браузері, або налаштувати локальне середовище розробки на своєму комп’ютері.
\nЯкщо вам кортить почати, цей спосіб найшвидший!
\nСпершу, відкрийте стартовий код у новій вкладці. Ви побачите пусте поле для гри в хрестики-нулики і React-код. У даному розділі ми поступово змінюватимемо цей код.
\nВи можете пропустити другий варіант налаштувань і відразу перейти до огляду React.
\nЦей крок необов’язковий і не вимагається для проходження даного посібника!
\nЦе налаштування вимагає трохи більше роботи, але дозволяє опрацьовувати посібник у власному редакторі. Ось що вам потрібно зробити:
\nnpx create-react-app my-appsrc/ нового проекту. \n\nПримітка:
\nНе видаляйте саму папку
\nsrc, тільки вихідні файли, що містяться в ній. Наступним кроком ми замінимо ці файли прикладами, потрібними для проекту.
cd my-app\ncd src\n\n# Якщо ви використовуєте Mac або Linux:\nrm -f *\n\n# Або якщо використовуєте Windows:\ndel *\n\n# Після цього поверніться до папки проекту\ncd ..index.css у папці src/ з цим CSS кодом.index.js у папці src/ з цим JS кодом.index.js у папці src/:import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';Тепер, якщо ви запустите npm start у папці проекту і відкриєте http://localhost:3000 у браузері, перед вами має відкритися пусте поле для гри в хрестики-нулики.
Ми рекомендуємо слідувати цим інструкціям, щоб налаштувати підсвічування синтаксису у вашому редакторі.
\nЯкщо ви застрягли, зверніться до ресурсів підтримки спільноти. Зокрема, чат Reactiflux — чудовий спосіб швидко знайти допомогу. Якщо ви не отримали належну відповідь і все ще не знаєте, як вирішити проблему, будь ласка, напишіть нам, і ми вам допоможемо.
\nТепер, коли ви закінчили попередні налаштування, давайте перейдемо до огляду React!
\nReact — це декларативна, ефективна і гнучка JavaScript-бібліотека, призначена для створення інтерфейсів користувача. Вона дозволяє компонувати складні інтерфейси з невеликих окремих частин коду — “компонентів”.
\nУ React існує кілька різних видів компонентів, але ми почнемо з підкласів React.Component:
class ShoppingList extends React.Component {\n render() {\n return (\n <div className=\"shopping-list\">\n <h1>Список покупок для {this.props.name}</h1>\n <ul>\n <li>Instagram</li>\n <li>WhatsApp</li>\n <li>Oculus</li>\n </ul>\n </div>\n );\n }\n}\n\n// Приклад використання: <ShoppingList name=\"Mark\" />Ми ще повернемося до незвичних, схожих на XML-тегів. Ми використовуємо компоненти, щоб повідомити React, що саме хочемо бачити на екрані. Кожного разу при зміні даних, React ефективно оновлює і повторно рендерить наші компоненти.
\nТак, ShoppingList вище — це класовий компонент React. Компонент приймає параметри, які називаються props (скорочено від “properties” — властивості), і повертає ієрархію перегляду, використовуючи метод render.
Метод render повертає опис того, що ви хочете бачити на екрані. React приймає цей опис і відтворює результат. Зокрема, render повертає React-елемент — полегшену версію того, що треба відрендерити. Більшість React-розробників користується спеціальним синтаксисом під назвою “JSX”, який спрощує написання цих конструкцій. Під час компіляції синтаксис <div /> перетворюється у React.createElement('div'), тож приклад вище рівноцінний до:
return React.createElement('div', {className: 'shopping-list'},\n React.createElement('h1', /* ... дочірні компоненти h1 ... */),\n React.createElement('ul', /* ... дочірні компоненти ul ... */)\n);Проглянути повну розширену версію.
\nЯкщо вам цікаво, детальніше про createElement() можна дізнатися у довіднику API. Ми не використовуватимемо даний синтаксис у цьому посібнику, натомість ми продовжимо працювати з JSX.
JSX має повну силу JavaScript. У межах фігурних дужок JSX ви можете використовувати будь-які JavaScript-вирази. Кожен елемент React є об’єктом, який можна зберегти у змінній або розповсюдити у вашій програмі.
\nКомпонент ShoppingList вище рендерить тільки вбудовані DOM-компоненти як <div /> або <li />. Але ви також можете створювати і рендерити власні React-компоненти. Наприклад, тепер ми можемо посилатися на весь список покупок відразу використовуючи <ShoppingList />. Кожен React-компонент інкапсульований і може використовуватись незалежно від інших; це дозволяє створювати складні інтерфейси з простих компонентів.
Якщо ви збираєтесь працювати над посібником у браузері, відкрийте цей код у новій вкладці: стартовий код. Якщо ж ви працюватимете на власному комп’ютері, відкрийте src/index.js у папці проекту (ви вже працювали з цим файлом під час налаштувань).
Цей стартовий код є фундаментом того, що ми будуватимемо. Ми завчасно подбали про CSS-стиль, тож ви можете повністю сконцентруватися на вивченні React і створенні гри у хрестики-нулики.
\nРозглядаючи код, ви помітите, що ми маємо три React-компоненти:
\nКомпонент Square рендерить окремий елемент <button>, а компонент Board рендерить 9 таких клітинок. Компонент Game рендерить ігрове поле з заповнювачами, які ми змінимо пізніше. Наразі ми не маємо жодного інтерактивного компонента.
Для початку спробуємо передати деякі дані з компоненту Board у компонент Square.
\nМи наполегливо рекомендуємо набирати код вручну під час роботи з посібником, а не копіювати і вставляти його. Це допоможе розвити м’язову пам’ять і досягти кращого розуміння.
\nУ методі renderSquare компонента Board змініть код, щоб передати проп value компоненту Square:
class Board extends React.Component {\n renderSquare(i) {\n return <Square value={i} />; }\n}Щоб відобразити значення, змініть render метод компонента Square, замінивши {/* TODO */} на {this.props.value}:
class Square extends React.Component {\n render() {\n return (\n <button className=\"square\">\n {this.props.value} </button>\n );\n }\n}До:
\n\n
Проглянути повний код цього кроку
\nВітаємо! Ви щойно “передали проп” від батьківського компонента Board до дочірнього компонента Square. Передача даних через пропси від батьківського компонента до дочірнього — це те як дані перетікають у React-додатках.
\nДавайте при натисканні заповнимо компонент Square позначкою “X”.\nДля початку змінимо тег кнопки, який повертається з функції render(), на наступний код:
class Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={function() { alert('click'); }}> {this.props.value}\n </button>\n );\n }\n}Тепер, при натисканні на Square, у браузері щоразу має з’являтись повідомлення.
\n\n\nПримітка
\nЩоб не вводити зайві символи і уникнути заплутаної поведінки
\nthis, тут і далі для обробників події ми використовуватимемо синтаксис стрілкової функції:\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => alert('click')}> {this.props.value}\n </button>\n );\n }\n}Зверніть увагу, що у
\nonClick={() => alert('click')}ми передаємо функцію як пропonClick. React викличе цю функцію тільки після натискання. Типовою помилкою є використання синтаксисуonClick={alert('click')}без() =>, оскільки такий код буде спрацьовувати при кожному рендері компонента.
Наступним кроком ми хочемо, щоб компонент Square “запам’ятав”, що на нього клікнули і відобразив позначку “X”. Для “запам’ятовування” компоненти використовують стан.
\nЩоб налаштувати стан у компоненті React, вам потрібно вписати this.state у його конструктор. this.state варто розглядати як особисту властивість компонента, у якому його визначено. Давайте збережемо поточне значення Square у this.state і змінюватимемо його при кожному натисканні.
Спершу додамо конструктор до класу, щоб ініціалізувати стан:
\nclass Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => alert('click')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nПримітка
\nУ класах JavaScript при визначенні конструктора підкласу ви завжди повинні викликати
\nsuper. Класові компоненти React, що маютьconstructor, повинні починатися з викликуsuper(props).
Тепер змінимо метод render компонента Square, щоб відобразити значення поточного стану під час натискання:
this.props.value на this.state.value усередині тегу <button>.onClick={...} на onClick={() => this.setState({value: 'X'})}.className та onClick на окремих рядках.Після цих змін тег <button>, повернений з метода render компонента Square, має виглядати наступним чином:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}Викликаючи this.setState з обробника onClick у методі render компонента Square, ми наказуємо React перерендерити компонент щоразу під час натиску на <button>. Після оновлення, this.state.value компонента набуде значення 'X', що ми також побачимо на ігровому полі. При натиску на будь-який Square-компонент, відповідна клітинка заповниться позначкою X.
Під час виклику setState у компоненті, React також автоматично оновлює його дочірні компоненти.
Проглянути повний код цього кроку
\nРозширення React Devtools для Chrome та Firefox дозволяє вам інспектувати дерево React-компонентів у панелі інструметів розробника вашого браузера.
\n\n \n \n \n \n\n \n \n \n \n \nReact DevTools дозволяють перевірити пропси і стан вашого React-компонента.
\nПісля встановлення React DevTools натисніть на будь-який елемент на сторінці, виберіть “Inspect”, і у панелі інструментів розробника з правого краю ви побачите дві нові вкладки React (“⚛️ Components” та “⚛️ Profiler”). Виберіть “⚛️ Components”, щоб перевірити дерево компонентів.
\nЗауважте, що для коректної роботи інструментів розробника на CodePen вам слід зробити декілька додаткових кроків:
\nТепер у нашому розпорядженні ми маємо базові елементи для створення гри у хрестики-нулики. Щоб гра набула завершеного вигляду, нам потрібно всановити почерговість “X” та “O” на ігровому полі і відобразити переможця по завершенню гри.
\nНа даний момент кожен Square-компонент зберігає у собі стан гри. Для визначення переможця ми збережемо значення кожної клітинки в одному місці.
\nМоже здатися, що Board має надсилати запит до кожного Square-компонента, щоб дізнатися стан. І хоча такий підхід можливий, ми не рекомендуємо звертатися до нього, оскільки це робить код важким для розуміння, вразливим до помилок та ускладнює рефакторинг. Натомість краще зберегти стан гри у батьківському Board-компоненті замість кожного окремого Square-компонента. Компонент Board може вказувати що відображати Square-компонентам, передаючи стан через пропси. Схожим чином ми передали число кожному Square-компоненту.
\nЩоб зібрати дані з кількох дочірніх компонентів чи дати можливість двом дочірнім компонентам контактувати один з одним, вам потрібно визначити спільний стан у батьківському компоненті. Батьківський компонент може передавати стан до дочірніх компонентів через пропси. Цей спосіб підтримує синхронізацію дочірніх компонентів один з одним і з батьківським компонентом.
\nПідйом стану до батьківського компонента — звична справа при рефакторингу React-компонентів, тож давайте скористаємося нагодою і спробуємо цей спосіб.
\nДодайте конструктор до компонента Board і визначте початковий стан, який міститиме масив з 9 null-елементами, що відповідають 9 клітинкам:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }Пізніше, коли ми заповнимо поле, масив this.state.squaresвиглядатиме приблизно так:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]Метод renderSquare компонента Board зараз виглядає наступним чином:
renderSquare(i) {\n return <Square value={i} />;\n }На початку ми передали проп value з компонента Board, щоб відобразити числа від 0 до 8 у кожному Square. Попереднім кроком ми замінили числа на позначку “X”, що визначалась власним станом компонента Square. Саме тому на даному етапі компонент Square ігнорує проп value, переданий компонентом Board.
Ми знову скористаємося способом передачі пропсів. Ми модифікуємо Board, щоб передати кожному Square-компоненту його поточні значення ('X', 'O', або null). Ми вже визначили масив squares у конструкторі Board і тепер модифікуємо метод renderSquare цього компонента, щоб мати змогу читати дані з цього масиву:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }Поглянути повний код цього кроку
\nКожен компонент Square тепер отримуватиме проп value, який відповідатиме 'X', 'O', або null для пустих клітинок.
Далі нам потрібно налаштувати подію, що спрацьовуватиме при натиску на компонент Square. Компонент Board тепер зберігає інформацію про натиснуті клітинки. Нам потрібно визначити спосіб, щоб оновити стан Board зі Square-компонента. Оскільки стан є приватним для компонента у якому його визначено, ми не можемо оновити стан Board з дочірнього Square.
\nНатомість ми передамо функцію від Board до Square і налаштуємо виклик цієї функції зі Square, коли на нього натиснуто. Змінимо метод renderSquare компонента Board на наступний код:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nПримітка
\nМи розбили код вище для кращої читабельності і додали круглі дужки, щоб JavaScript не зруйнував код, вставляючи крапку з комою після
\nreturn.
Тепер, від Board до Square, ми передаємо два пропси вниз: value та onClick. Проп onClick — функція, що спрацьовує коли клітинку компонента Square натиснуто. Внесемо наступні зміни до Square:
this.state.value на this.props.value у методі render компонента Squarethis.setState() на this.props.onClick() у методі render компонента Squareconstructor зі Square, тому що цей компонент більше не відслідковує стан гриПісля цих змін компонент Square має виглядати так:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}При натисканні Square з компонента Board викликається функція onClick. Розглянемо, чому так відбувається:
onClick у вбудованому DOM-компоненті <button> наказує React налаштувати прослуховувач події натиску.onClick, який визначено у методі render() компонента Square.this.props.onClick(). Проп onClick для Square визначено у компоненті Board.onClick={() => this.handleClick(i)} до Square, Square при натиску викличе this.handleClick(i).handleClick(), тож наш код не працюватиме як слід. Якщо ви натисните на клітинку, то побачите червоний екран з помилкою, яка зазначає: “this.handleClick is not a function”.\n\nПримітка
\nАтрибут
\nonClickDOM-елемента<button>має для React особливе значення, оскільки це вбудований компонент. Для звичайних компонентів, як Square, найменування пропсів може бути довільним. Ми можемо назвати пропonClickкомпонента Square чи методhandleClickкомпонента Board будь-яким іменем, і код працюватиме так само. У React загальноприйнятим вважається використанняon[Event]імен для пропсів, що представляють події, іhandle[Event]для методів, що цю подію обробляють.
Якщо ми натиснемо клітинку Square, то отримаємо помилку, оскільки ми ще не визначили handleClick. Додамо цей метод до класу Board:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Проглянути повний код цього кроку
\nПісля цих змін ми як і раніше знову можемо натискати клітинки, щоб заповнити їх. Однак тепер стан зберігається у компоненті Board замість кожного індивідуального компонента Square. Коли стан Board змінюється, Square перерендерюється автоматично. Збереження стану всіх клітинок у компоненті Board у майбутньому дозволить нам визначити переможця.
\nОскільки компоненти Square більше не зберігають стан, вони отримують значення від компонента Board і інформують його при кожному натиску. Згідно з термінологією React, компоненти Square є контрольованими компонентами, оскільки Board тепер має повний контроль над ними.
\nЗверніть увагу, як усередині handleClick ми використали метод .slice(), щоб створити копію масиву squares, яку ми змінюватимемо замість уже існуючого масиву. Ми пояснимо, навіщо ми створили цю копію у наступному розділі.
У попередньому прикладі коду ми запропонували використати метод .slice() для створення копії масиву squares, щоб у подальшому модифікувати цю копію замість оригінального масиву. Тепер ми обговоримо, що таке незмінність, і чому важливо її вивчати.
Загалом існує два загальних підходи до зміни данних. Перший підхід — змінити дані напряму, встановлюючи нові значення. Другий підхід — замінити дані копією з уже включеними змінами.
\nvar player = {score: 1, name: 'Андрій'};\nplayer.score = 2;\n// Тепер черга гравця {score: 2, name: 'Андрій'}var player = {score: 1, name: 'Андрій'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// У цьому прикладі player залишився незмінним, а newPlayer набув значення {score: 2, name: 'Андрій'}\n\n// Або якщо ви використовуєте синтаксис розширення, ви можете написати:\n// var newPlayer = {...player, score: 2};Кінцевий результат залишиться таким самим, але без прямої зміни базових даних. Нижче розглянуті переваги даного способу.
\nНезмінність робить реалізацію складних властивостей набагато простішою. Пізніше у цьому посібнику ми втілимо властивість “подорожі у часі”, що дозволить нам переглянути історію гри у хрестики-нулики і “повернутися” до попередніх ходів. Дана властивість не обмежена іграми, можливість відмінити і повторити певні дії знову є необхідною умовою багатьох додатків. Уникаючи прямої зміни даних, ми можемо звертатись до попередніх версій історії гри і повторно використовувати їх.
\nВиявити зміни у змінних об’єктах досить важко, оскільки вони модифіковані напряму. У цьому випадку нам доведеться порівнювати змінений об’єкт як з його попередніми копіями, так і з усім деревом об’єктів.
\nВиявити зміни в незмінних об’єктах набагато легше. Якщо згаданий незмінний об’єкт відрізняється від попереднього, тоді він змінився.
\nГоловною перевагою незмінності у React є те, що вона допомагає створити чисті компоненти. Незмінні дані дозволяють легко виявити наявність змін, що дозволяє встановити необхідність повторного рендерингу.
\nБільше про shouldComponentUpdate() і як створювати чисті компоненти ви можете дізнатись прочитавши розділ Оптимізація продуктивності.
Змінимо Square на функціональний компонент.
\nУ React функціональні компоненти — це спрощений спосіб написання компонентів, що складаються тільки з render-метода і не мають власного стану. Замість визначення класу, який поширює React.Component, ми можемо створити функцію, яка приймає пропси і повертає те, що треба відрендерити. Функціональні компоненти коротші у написанні, і більшість компонентів можна оформити таким чином.
Замінимо клас Square на наступну функцію:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}Ми замінили this.props на props обидва рази.
Проглянути повний код цього кроку
\n\n\nПримітка
\nКоли ми перетворили Square у функціональний компонент, ми також змінили
\nonClick={() => this.props.onClick()}на коротшийonClick={props.onClick}(зверніть увагу на відсутність круглих дужок з обох сторін).
Тепер нам треба виправити один очевидний дефект у нашій грі — на полі не можна поставити “O”.
\nЗа замовчуванням встановимо перший хід за “X”. Зробити це можливо модифікувавши початковий стан у конструкторі компонента Board:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }З кожним ходом xIsNext (логічний (булевий) тип даних) змінюватиме значення на протилежне, щоб визначити який гравець ходить наступним, після чого стан гри збережеться. Оновимо функцію handleClick у Board для інверсії значення xIsNext:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }Після цих змін позначки “X” та “O” матимуть можливість чергуватися. Спробуйте!
\nДавайте також змінимо текст “статусу” у методі render компонента Board таким чином, щоб він відображав який гравець ходить наступним:
render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // решта не зміниласяПісля застосування цих змін компонент Board має виглядати так:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Проглянути повний код цього кроку
\nТепер, коли ми показуємо, який гравець ходить наступним, ми також маємо показати переможця у кінці гри і зробити наступні ходи неможливими. Скопіюйте цю допоміжну функцію і вставте її в кінці файлу:
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}Маючи масив з 9 клітинок, ця функція перевірить на наявність переможця і поверне 'X', 'O', або null.
Викличемо calculateWinner(squares) у методі render компонента Board, щоб перевірити чи гравець виграв. Якщо гравець виграв, ми можемо відобразити текст: “Переможець: X” або “Переможець: O”. Замінимо значення status у render-методі компонента Board наступним кодом:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // решта не зміниласьТепер ми можемо змінити метод handleClick у Board для завершення функції та ігнорування натиску, якщо хтось вже переміг, або поле повністю заповнене:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }Проглянути повний код цього кроку
\nВітаємо! Тепер ви маєте повністю робочу гру у хрестики-нулики. І ви щойно освоїли основи React. Схоже, справжній переможець тут це ви.
\nНаостанок давайте створимо здатність “подорожувати у часі”, щоб мати змогу повернутися до попередніх ходів у грі.
\nЯкби ми змінили масив squares, реалізувати подорожі у часі було б дуже важко.
Утім, ми скористалися методом slice() для створення нової копії squares після кожного ходу і залишили оригінальний масив незмінним. Це дозволить нам зберегти усі попередні версії масиву squares і переміщатися між уже зробленими ходами.
Збережемо масиви squares у іншому масиві і назвемо його history. Масив history відображає загальний стан ігрового поля, від першого до останнього ходу, і виглядає так:
history = [\n // До першого ходу\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // Після першого ходу\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // Після другого ходу\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]Залишилось вирішити, який компонент відповідатиме за стан history.
Нам потрібно, щоб вищепоставлений компонент Game відображав список попередніх ходів. Для цього йому потрібно мати доступ до history, тож логічним буде помістити стан history у компоненті Game.
Розміщення history у компоненті Game дозволяє нам видалити стан squares з його дочірнього компонента Board. Так само, як ми “підняли стан” з компонента Square у компонент Board, тепер ми піднімемо його з Board до вищепоставленого Game. Це надасть компоненту Game повний контроль над даними Board і дозволить вказувати, коли рендерити попередні ходи з history.
Спершу встановимо початковий стан у конструкторі компонента Game:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}Після цього нам потрібно, щоб компонент 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.Компонент Board тепер має виглядати наступним чином:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Оновимо функцію render компонента Game, щоб скористатися останнім записом у історії для визначення і відображення статусу гри:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }Оскільки компонент Game тепер рендерить статус гри, ми можемо видалити відповідний код з методу render компонента Board. Після цих змін функція render у Board має виглядати так:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }Наостанок нам потрібно перенести метод handleClick з компонента Board у компонент Game. Нам також потрібно змінити handleClick, оскільки стан компонента Game має іншу структуру. Усередині методу handleClick компонента Game додамо новий запис до history.
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nПримітка
\nНа відміну від більш знайомого методу
\npush(), методconcat()не змінює оригінального масиву, тому ми й надаємо йому перевагу.
На даний момент компоненту Board потрібні тільки renderSquare та render методи. Стан гри та метод handleClick мають знаходитись у компоненті Game.
Проглянути повний код цього кроку
\nОскільки ми записуємо історію гри у хрестики-нулики, то тепер, у вигляді списку попередніх ходів, ми можемо показати її гравцю.
\nЯк ми вже довідались раніше, елементи React — це першокласні об’єкти JavaScript, які ми можемо передавати всередині нашого додатку. Щоб відрендерити численні об’єкти у React, ми можемо скористатися масивом React-елементів.
\nУ JavaScript масиви мають метод map(), який зазвичай використовється для перетворення данних, наприклад:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]Використовуючи метод map, ми можемо відтворити історію ходів у вигляді React-елементів, репрезентованих кнопками на екрані, і відобразити їх у вигляді списку, щоб мати змогу “перескочити” до попередніх ходів.
Тож давайте застосуємо map до history у методі render компонента Game:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }Проглянути повний код цього кроку
\nДля кожного ходу в історії гри ми створюємо пункт списку <li>, який містить кнопку <button>. Кнопка має обробник onClick, який викликає метод this.jumpTo(). Ми ще не запровадили метод jumpTo(). На даний момент ми маємо бачити список ходів, зроблених під час гри, та попередження в інструментах розробника, що перекладається наступним чином:
\n\nПопередження:\nКожен дочірній компонент у масиві або ітераторі повинен мати унікальний проп “key”. Перевірте метод render у “Game”.
\n
Давайте обговоримо, що значить це попередження.
\nКоли ми рендеримо список, React зберігає певну інформацію про кожен відрендерений пункт списку. Якщо ми оновлюємо список, React має визначити, що у ньому змінилося. Ми могли б додати, видалити, пересунути або оновити список пунктів.
\nУявимо зміни від
\n<li>Олег: 7 задач залишилось</li>\n<li>Данило: 5 задач залишилося</li>до
\n<li>Данило: 9 задач залишилось</li>\n<li>Катерина: 8 задач залишилось</li>\n<li>Олег: 5 задач залишилось</li>На додачу до оновлених чисел, людина, що читатиме цей код, можливо, скаже, що ми поміняли Олега та Данила місцями, а між ними додали Катерину. Але React — це комп’ютерна програма, яка не знає нашого наміру. І саме через це нам потрібно визначити властивість key для кожного пункту у списку, щоб мати змогу розрізнити їх одне від одного. Одним з варіантів можуть бути рядки oleg, danylo, kateryna. Або якщо ми беремо дані з бази даних, то у якості ключів ми могли б використати ідентифікатори Олега, Данила та Катерини.
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>Коли список рендериться повторно, React бере ключ у кожного пункту списку і перевіряє попередній список на наявність відповідного ключа. Якщо поточний список має ключ, який до цього не існував, React створює новий компонент. Якщо поточний список не має ключа, який існував у попередньому списку, React видаляє попередній компонент. Якщо два ключі співпадають, то відповідний компонент переміщується. Ключі вказують на ідентичність кожного компонента, що дозволяє React підтримувати стан між повторними рендерингами. Якщо ключ компонента змінюється, компонент буде видалено і створено з новим станом.
\nkey — це особлива зарезервована властивість React (разом з ref, більш передовою особливістю). Коли елемент створено, React видобуває властивість key і зберігає її безпосередньо у поверненому елементі. Хоча key і виглядає як props, на нього не можна посилатися використовуючи this.props.key. React автоматично використовує key, щоб визначити який компонент оновити. Компонент не має доступу до key.
Ми наполегливо рекомендуємо призначати належні ключі при створенні динамічних списків. Якщо у вас не має відповідного ключа, вам варто розглянути можливість перебудови даних, щоб він у вас з’явився.
\nЯкщо жодного ключа не зазначено, React видасть попередження і за замовчуванням використовуватиме індекси масиву у ролі ключів. Використання індексів масиву може бути проблематичним при реорганізації списку або доданні/видаленні пунктів. Явне створення key={i} змусить попередження зникнути, але матиме ті самі проблеми, що і використання індексів масиву, тому не рекомендується у більшості випадків.
Ключам не потрібно бути унікальними глобально, тільки між компонентами та їх родичами
\nУ історії гри в хрестики-нулики кожен попередній хід має унікальний, асоційований з ним ідентифікатор — порядковий номер ходу. Ходи мають чітку послідовність і ніколи не видаляються чи додаються у середині списку, тож ми безпечно можемо використовувати індекси у ролі ключів.
\nУ методі render компонента Game ми можемо додати ключ <li key={move}> і відповідне попередження від React має зникнути:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });Проглянути повний код цього кроку
\nНатиснення будь-якої з кнопок списку видасть помилку, оскільки метод jumpTo ще не визначено. Перед тим як створити цей метод, додамо stepNumber до стану компонента Game, щоб вказати який хід ми наразі розглядаємо.
Спершу додамо stepNumber: 0 до початкового стану у constructor компонента Game:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }Далі визначимо метод jumpTo у Game для оновлення stepNumber. Ми також визначимо значення xIsNext як true, якщо номер ходу, на який ми змінюємо stepNumber, парний:
handleClick(i) {\n // цей метод не змінився\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // цей метод не змінився\n }Тепер внесемо деякі зміни до методу handleClick у Game, що спрацьовуватиме при кожному натисканні на клітинки.
Стан stepNumber, який ми щойно додали, відображає хід, який користувач бачить на даний момент. Після кожного наступного ходу нам потрібно оновити stepNumber використовуючи stepNumber: history.length як частину аргументу this.setState. Це дозволить нам впевнитись, що ми не застрягнемо на тому самому місці, після того як новий хід буде зроблено.
Також замінимо this.state.history на this.state.history.slice(0, this.state.stepNumber + 1). Це гарантує, що якщо ми повернемося “назад у часі” і зробимо наступний хід з того моменту, ми скинемо усю неактуальну “майбутню” історію.
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }Накінець, змінимо render метод компонента Game так, щоб той замість рендерингу останнього ходу рендерив хід обраний на даний момент відповідно до stepNumber:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // решта не зміниласяЯкщо ми натиснемо на будь-який крок ігрової історії, поле мусить оновитися, демонструючи як воно виглядало після цього ходу.
\nПроглянути повний код цього кроку
\nВітаємо! Ви щойно створили гру у хрестики-нулики яка:
\nЧудова робота! Ми сподіваємося, що тепер ви почуваєтеся впевненіше у роботі з React.
\nПродивитися фінальний результат ви можете за наступним посиланням: Завершена гра.
\nЯкщо ви маєте додатковий час або хочете попрактикувати нові навички в React, ось кілька ідей, які допоможуть покращити гру у хрестики-нулики. Ідеї розташовані за зростанням важкості:
\nУпродовж роботи з посібником ми розглянули такі концепти React, як елементи, компоненти, пропси та стан. За більш детальною інформацією для кожної з цих тем зверніться до решти документації. Щоб дізнатися більше про визначення компонентів, зверніться до React.Component у довіднику API.