- Tutorial: Jogo da Velha

 O que você está construindo?
Configuração para o tutorial
Visão geral
Construindo o tabuleiro
Passando dados por meio de adereços
Fazendo um componente interativo
Ferramentas de desenvolvedor React

app/src/Board.jsx

@@ -1,22 +1,24 @@
+import Square from "./Components/Square";
+
 const Board = () => {
   return (
     <>
       <div className='board-row'>
-        <button className='square'>1</button>
-        <button className='square'>2</button>
-        <button className='square'>3</button>
+        <Square />
+        <Square />
+        <Square />
       </div>
 
       <div className='board-row'>
-        <button className='square'>4</button>
-        <button className='square'>5</button>
-        <button className='square'>6</button>
+        <Square />
+        <Square />
+        <Square />
       </div>
 
       <div className='board-row'>
-        <button className='square'>7</button>
-        <button className='square'>8</button>
-        <button className='square'>9</button>
+        <Square />
+        <Square />
+        <Square />
       </div>
     </>
   );

app/src/Components/Square.jsx

@@ -0,0 +1,17 @@
+import { useState } from "react";
+
+const Square = () => {
+  const [value, setValue] = useState(null)
+
+  function handleClick() {
+    setValue('X')
+  }
+
+  return (
+    <button className='square' onClick={handleClick}>
+      {value}
+    </button>
+  );
+};
+
+export default Square;