Aula 08 - React - Modularizando o Tic Tac Toe
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:
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:
Link da documentação oficial:
Aula 08 - React - Modularizando o Tic Tac Toe
Vamos organizar melhor o projeto.
Ele vai ficar com a seguinte estrutura:
| helper.js
│ index.js
│ tic-tac-toe.css
│
└──components
Board.js
Game.js
Square.js
Dentro do
src do projeto temos:
A
helper.js que tem a função helper calculateWinner(), que verifica se já tem ganhador ou não, ela retorna
X, se
X foi o
ganhador,
O se
O foi o ganhador e
null se não tem ganhador.
A
index.js que tem apenas a renderização do Game.
O
tic-tac-toe.css que é o arquivo com a estilização.
Temos uma
pasta components, com os arquivos referentes aos
componentes do
tic tac toe.
Nessa pasta
components temos os componentes:
O
Game.js que é o componente principal, é ele que mantém o estado do jogo, ele quem passa para o Board, o tabuleiro na forma como tá naquela jogada, baseado no history, que é um dos estados que ele mantém.
O
Board.js recebe por
props do
Game o tabuleiro como tá no momento, aí ele chama a
renderSquare() para renderizar os quadrados do tabuleiro com as
props que recebeu do
Game.
A
Square.js recebe por
props qual a situação do quadrado, se tá como
null,
X ou
O.
Ele
renderiza vazio quando
null, e
X ou
O quando já marcados.
Ao ser clicado, se o quadrado tiver como
null, ele define um valor
X ou
O e já renderiza.
Ficamos por aqui, até a próxima. ;)
Código da aula:
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Link do código fluente no Pinterest
Novamente deixo meus link de afiliados:
Obrigado, até a próxima e bons estudos. ;)
