Aula 08 – React – Modularizando o Tic Tac Toe

toticavalcanti

Aula 08 – React – Modularizando o Tic Tac Toe

Tutorial React

Voltar para página principal do blog

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:

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

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.