Vídeo: criando um Jogo da Velha com React

Bora criar um web app de Jogo da Velha, utilizando ⚛️ React & ⚛ React Hooks! 💚

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`

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 achou do vídeo! 😃