Aula 09 – React – Tic Tac Toe – Estilo e deploy

toticavalcanti

Aula 09 – React – Tic Tac Toe – Estilo e deploy

Tutorial React

Voltar para página principal do blog

Todas as aulas desse curso

Aula 08 Aula 10

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Esse é o link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Melhore seu NETWORKING

Participe de comunidades de desenvolvedores:

Fiquem a vontade para me adicionar ao linkedin.

E também para me seguir no GITHUB.

Ah, se puder, clica na estrela nos meus repositórios pra dá uma força ao meu perfil no GITHUB

Código da aula:

https://github.com/toticavalcanti/tutorial-react/tree/style

Link da documentação oficial:

https://reactjs.org/tutorial/

Aula 09 – React – Tic Tac Toe – Estilo e deploy

Vamos colocar um estilo melhor no Jogo da Velha, pra que ele fique melhor apresentável na tela do browser.

E também refatorar algumas coisinhas no código.

Obs. Como os detalhes são difíceis de explicar textualmente, optei por fazer isso unicamente através do vídeo.

O arquivos que serão alterados são o Game.js, o Board.js, o Square.js e o tic-tac-toe.css.

/src/components/Game.js


import React, { useState } from "react";
import Board from "./Board";
import { calculateWinner } from "../helper";

const Game = () => {
  const [history, setHistory] = useState([Array(9).fill(null)]);
  const [stepNumber, setStepNumber] = useState(0);
  const [xIsNext, setXisNext] = useState(true);
  const winner = calculateWinner(history[stepNumber]);
  const xO = xIsNext ? "X" : "O";

   const handleClick = (i) => {
    const historyPoint = history.slice(0, stepNumber + 1);
    const current = historyPoint[stepNumber];
    const squares = [...current];
    // return if won or occupied
    if (winner || squares[i]) return;
    // select square
    squares[i] = xO;
    setHistory([...historyPoint, squares]);
    setStepNumber(historyPoint.length);
    setXisNext(!xIsNext);
    
  };

  const jumpTo = (step) => {
    setStepNumber(step);
    setXisNext(step % 2 === 0);
  };

  const renderMoves = () =>
    history.map((_step, move) => {
      const destination = move ? `Go to move #${move}` : "Go to Start";
      return (
        <li key={move}>
          <button onClick={() => jumpTo(move)}>{destination}</button>
        </li>
      );
    });
  return (
    <>
      <h1>React Tic Tac Toe</h1>
      <Board squares={history[stepNumber]} onClick={handleClick} />
      <div className="info-wrapper">
        <div>
          <h3>History</h3>
          {renderMoves()}
        </div>
        <h3>{winner ? "Winner: " + winner : "Next Player: " + xO}</h3>
      </div>
    </>
  );
};

export default Game;

Spread

O operador spread é usado em várias situações.

O uso do spread em:
const squares = […current];

É para apontar sempre para um objeto diferente a cada vez que o usuário clica em um quadrado.

Aplicando em um contexto mais simples

Faça o seguinte teste:


let arr1 = ['a', 'b', 'c']
let arr2 = arr1
console.log(arr2)
arr1.push(...['d', 'e'])
console.log(arr2)
console.log(arr1)

Veja que a gente só adicionou uma lista espalhada com os caracteres ‘d’ e ‘e’ no arr1, mas, quando demos um console no arr2, ele também foi modificado.

Na verdade, dessa forma, as duas variáveis estão apontando para o mesmo endereço de memória, isto é, para o mesmo objeto em memória.

O uso do spread no código do tic-tac-toe é porque queremos que o squares aponte para um objeto novo, ou seja, uma configuração de tabuleiro nova.

No historyPoint, estamos criando sempre um tabuleiro novo a cada jogada para poder voltar no histórico.

Agora outro teste usando o spread nesse contexto mais simples, mas a ideia é a mesma da que estamos usando no jogo:


let arr1 = ['a', 'b', 'c']
let arr2 = [...arr1]
console.log(arr2)
arr1.push(...['d', 'e'])
console.log(arr2)
console.log(arr1)

Veja que agora sim, funcionou como esperado.

/src/components/Board.js


import React from "react";
import Square from "./Square";

const Board = ({ squares, onClick }) => (
  <div className="board">
    {squares.map((square, i) => (
      <Square key={i} value={square} onClick={() => onClick(i)} />
    ))}
  </div>
);
export default Board

/src/components/Square.js


import React from "react";

const Square = ({ value, onClick }) => {
  const style = value ? `squares ${value}` : `squares`;

  return (
    <button className={style} onClick={onClick}>
      {value}
    </button>
  );
};

export default Square;

/src/tic-tac-toe.css


@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-color: black;
  color: white;
  font-family: "Roboto", sans-serif;
  display: flex;
  /* align-items: center; */
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

h1 {
  margin: 2rem;
  text-align: center;
}

.board {
  border: 1rem solid #ffffff;
  background:#ffffff;
  width: 700px;
  height: 700px;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 1rem;
}

.squares {
  background:black;
  border: none;
  font-size: 5rem;
  /* font-weight: 800; */
  cursor: pointer;
  outline: none;
}

.X {
  color: #ffffff;
}
.O {
  color: #ffffff;
}

.info-wrapper {
  display: flex;
  justify-content: space-between;
}

h3 {
  padding: 1rem;
}

li {
  list-style: none;
}

.info-wrapper button {
  background: black;
  color: white;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0.5rem;
  margin: 0.5rem 1rem;
}