Пишем простую игру на React. React. Lite Level

[haroldfinch]

Просто зашёл в комменты, чтобы сказать вам спасибо, вы просто не представляете как сильно вы помогаете мне и мои друзьям в развитии навыков кодинга. После школы бегу домой смотреть ваши видео)

[vally]

Очень все понятно, нужно только пару раз еще посмотреть и самостоятельно реализовать. Спасибо за труд, Александр !

[prometheusmusic]

Интересный урок, но пару моментов меня напрягли. Первое, в isWinner можно было сделать вложенный цикл (n-1), попарно сравнивая элементы, и если, допустим, первые два элемента не совпадают, выбрасывать continue; (так производительней, как по мне, чем проверять сразу три условия). Второе. Курс как бы по реакту, а тут программа написана даже без разбиения на компоненты. То есть, для этой программы можно было бы просто написать html-верстку (она тут немудрена), и дальше писать на чистом js, заменив this.state объектом и впихнуть его и соответствующую функцию в элементы forEach'ем или обычным циклом

[wildjoe]

Спасибо! Очень интересный урок получился!

[alexmakarov]

автор классно объясняет, особенно про js. Но тут прям жестко по архитектуре react проехались)) Можно чуть чуть улучшить, но это имхо . Для тайминга 18-30.

import React, { Component } from 'react'


export default class App extends Component {
state = {
squares: Array(9).fill(null),
count: 0
}

handleClick = e => {
let data =
if(this.state.squares[data] !== ('X' || 'O'))
{
let list = this.state.squares;
list[data] = (this.state.count % 2 === 0 ) ? 'X' : 'O';

this.setState({
squares: list,
count: this.state.count + 1
})
}
};

divStyle = {
maxWidth: '300px',
display: 'flex',
flexWrap: 'wrap'
};

itemStyle = {
minWidth: '84px',
minHeight: '84px',
margin: '1px',
border: '1px solid black',
display: 'flex',
placeContent: 'center',
}

render() {
const {squares} = this.state
return (
<div
style={
this.divStyle
}>
{squares.map((square, index)=> {
return (
<div key={index}
style={this.itemStyle}
onClick={this.handleClick}
data-index={index}
className=''>
{square}
</div>
)
})}
</div>
)
}
}

[Nikitosss]

Ничего не понятно, но очень интересно))

[VIJana]

чем дальше, тем сложнее. У меня мозги сломались. Вот как это самостоятельно сделать? Под пример скопировать конечно легко, а самостоятельно.... А ведь это простенькая игра.

[ИльгизШарафутдинов-юц]

Подскажите, почему alert раньше выскакивает чем отрисовка ? Как исправить ? Это связано с рендрингом от реакта ?

[ПавелКонстантинов-вя]

Немного запутали строки 28, 29, 30. Перебор массива сравниваются с s. А по разным ходам s может принимать как х, так и о. Туда получается при залёте разных "s"(х или о) условия не выполняются при сравнении и if не выполняется? А при одинаковых значениях s проходит в if? Правильно понимаю? Вот этот момент всё в голове не укладывается. Потому что все значения в сравнении будут равны s, независимо от того что там будет)

[cheatcodezzz]

Обьяснил отлично, все понятно! Но я бы сделал бы немного иначе, сделал бы отдельный компонент-шаблон для всех(9) ячеек , но логика та же!

[kommersant]

Подскажите, а как сделать счёт побед для игрока 1 и игрока 2?

[sltwvgx]

let currentSquares = this.state.squares;
currentSquares[data] = 1; МУТИРУЕТ state т.к. массив передается по ссылке

Копия массива создается так:
let currentSquares = [...this.state.squares]