Vídeo: criando um Jogo da Velha com React

Há um tempo atrás eu fiz uma pesquisa no meu canal do Telegram, perguntando que tipo de conteúdo queríam que eu produzisse. De longe, o que foi mais pedido foi JavaScript e específicamente React. De lá pra cá, eu venho estudando e também usando React, tanto em projetos pessoais como na empresa onde eu trabalho.

Por estes motivos, vou começar a produzir mais conteúdos sobre esse assunto! Eis abaixo o primeiro resultado dessa mudança: eu gravei um screencast mostrando como criar um jogo da velha usando React e React Hooks! 😃

Honestando falando, foi um dos vídeos mais divertidos que já fiz e que, ao mesmo tempo, também contém insights valiosos caso você queira trabalhar com essas tecnologias!


Abaixo você encontra o CSS utilizado no vídeo:

src/TicTacToe.css
:root {
  --O-color: #2196f3;
  --X-color: #f44336;
  --E-color: #777;

  --green: #4caf50;
}

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

body {
  display: grid;
  align-items: center;
  justify-content: center;

  font-family: sans-serif;
  height: 100vh;
  background-color: #eee;
}

.title {
  text-align: center;
  font-size: 3rem;
  color: #555;
  margin-bottom: 2rem;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 240px);
  grid-template-rows: repeat(3, 200px);
  gap: 1rem;
}

.board.game-over {
  opacity: 0.8;
}

.cell {
  display: grid;
  align-items: center;
  justify-content: center;

  background-color: white;
  border-radius: 5px;
  font-size: 3rem;
  font-weight: bold;
  color: #00000066;

  cursor: pointer;
}

.cell:not(.O):not(.X):hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.cell.O, .cell.X, .game-over .cell {
  cursor: not-allowed;
}

.cell.O {
  background-color: var(--O-color);
}

.cell.X {
  background-color: var(--X-color);
}

footer {
  text-align: center;
}

.winner-message {
  margin: 2rem;
}

.winner-message span.O {
  color: var(--O-color);
}

.winner-message span.X {
  color: var(--X-color);
}

.winner-message span.E {
  color: var(--E-color);
}

button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 5px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  background-color: var(--green);
  color: white;
  font-size: 1.2rem;
}

Me conte nos comentários o que você achou! Deixe também seu email abaixo para ser avisado quando eu publicar novos conteúdos!

Atualizado em:

Deixe um comentário