Aula 08 – React – Modularizando o Tic Tac Toe

More videos
   

Aula 08 – React – Modularizando o Tic Tac Toe

Tutorial React

Tutorial React

Voltar para página principal do blog

Todas as aulas desse curso

Aula 07                        Aula 09

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/tic_tac_toe_modular

Link da documentação oficial:

https://reactjs.org/tutorial/

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.  😉

Aula 07                        Aula 09

Todas as aulas desse curso

Voltar para página principal do blog

Código da aula:

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

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:

Hostinger

Digital Ocean

One.com

Obrigado, até a próxima e bons estudos. 😉

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>