2023-07-31 13:16:42 +02:00
|
|
|
import './App.css';
|
|
|
|
|
2023-07-31 13:58:07 +02:00
|
|
|
function Square({ value }) {
|
2023-07-31 14:05:46 +02:00
|
|
|
function handleClick() {
|
|
|
|
console.log('clicked!');
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<button
|
|
|
|
className="square"
|
|
|
|
onClick={handleClick}
|
|
|
|
>
|
|
|
|
{value}
|
|
|
|
</button>
|
|
|
|
);
|
2023-07-31 13:58:07 +02:00
|
|
|
}
|
|
|
|
|
2023-07-31 13:16:42 +02:00
|
|
|
function App() {
|
|
|
|
return (
|
2023-07-31 13:35:46 +02:00
|
|
|
<>
|
2023-07-31 13:44:31 +02:00
|
|
|
<div className="board-row">
|
2023-07-31 13:58:07 +02:00
|
|
|
<Square value="1"/>
|
|
|
|
<Square value="2"/>
|
|
|
|
<Square value="3"/>
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
|
|
|
<div className="board-row">
|
2023-07-31 13:58:07 +02:00
|
|
|
<Square value="4"/>
|
|
|
|
<Square value="5"/>
|
|
|
|
<Square value="6"/>
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
|
|
|
<div className="board-row">
|
2023-07-31 13:58:07 +02:00
|
|
|
<Square value="7"/>
|
|
|
|
<Square value="8"/>
|
|
|
|
<Square value="9"/>
|
2023-07-31 13:44:31 +02:00
|
|
|
</div>
|
2023-07-31 13:35:46 +02:00
|
|
|
</>
|
2023-07-31 13:16:42 +02:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
export default App;
|