From 9fe2cb88c9cf74019c2adf0466816264e6e46666 Mon Sep 17 00:00:00 2001 From: Mattia Sanfilippo Date: Tue, 2 May 2023 11:23:16 +0200 Subject: [PATCH 1/9] docs: translate tutorial: tic tac toe --- src/content/learn/tutorial-tic-tac-toe.md | 481 +++++++++++----------- 1 file changed, 241 insertions(+), 240 deletions(-) diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 9e41232e6..3db7d4b71 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -4,28 +4,28 @@ title: 'Tutorial: Tic-Tac-Toe' -You will build a small tic-tac-toe game during this tutorial. This tutorial does not assume any existing React knowledge. The techniques you'll learn in the tutorial are fundamental to building any React app, and fully understanding it will give you a deep understanding of React. +Costruirai un piccolo gioco di tic-tac-toe (tris) durante questo tutorial. Questo tutorial non presuppone alcuna conoscenza esistente di React. Le tecniche che imparerai nel tutorial sono fondamentali per la creazione di qualsiasi app React e comprenderle ti darà una profonda comprensione di React. -This tutorial is designed for people who prefer to **learn by doing** and want to quickly try making something tangible. If you prefer learning each concept step by step, start with [Describing the UI.](/learn/describing-the-ui) +Questo tutorial è progettato per le persone che preferiscono **imparare facendo** e vogliono provare rapidamente a creare qualcosa di tangibile. Se preferisci apprendere ogni concetto passo dopo passo, inizia con [Descrivere la UI.](/learn/describing-the-ui) -The tutorial is divided into several sections: +Il tutorial è diviso in diverse sezioni: -- [Setup for the tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -- [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -- [Completing the game](#completing-the-game) will teach you **the most common techniques** in React development. -- [Adding time travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +- [Configurazione per il tutorial](#setup-for-the-tutorial) ti darà **un punto di partenza** per seguire il tutorial. +- [Panoramica](#overview) ti insegnerà **le fondamenta** di React: componenti, props e state. +- [Completare il gioco](#completing-the-game) ti insegnerà le **tecniche più comuni** nello sviluppo React. +- [Aggiunga del viaggio nel tempo](#adding-time-travel) ti darà una **visione più approfondita** dei punti di forza unici di React. -### What are you building? {/*what-are-you-building*/} +### Che cosa costruirai? {/*what-are-you-building*/} -In this tutorial, you'll build an interactive tic-tac-toe game with React. +In questo tutorial, costruirai un gioco interattivo di tic-tac-toe con React. -You can see what it will look like when you're finished here: +Puoi vedere come sarà quando avrai finito qui: @@ -194,15 +194,16 @@ body { -If the code doesn't make sense to you yet, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. +Se il codice non ha ancora senso per te, o se non hai familiarità con la sintassi del codice, non preoccuparti! L'obiettivo di questo tutorial è di aiutarti a comprendere React e la sua sintassi. -We recommend that you check out the tic-tac-toe game above before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and it is updated as the game progresses. +Ti consigliamo di dare un'occhiata al gioco di tic-tac-toe sopra prima di continuare con il tutorial. Una delle caratteristiche che noterai è che c'è un elenco numerato a destra del tabellone del gioco. Questo elenco ti fornisce una cronologia di tutte le mosse che si sono verificate nel gioco e viene aggiornato man mano che il gioco procede. -Once you've played around with the finished tic-tac-toe game, keep scrolling. You'll start with a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. +Una volta che hai giocato con il gioco di tic-tac-toe finito, continua a scorrere. In questo tutorial inizierai con un modello più semplice. Il nostro prossimo passo è prepararti in modo che tu possa iniziare a costruire il gioco. -## Setup for the tutorial {/*setup-for-the-tutorial*/} +## Configurazione per il tutorial {/*setup-for-the-tutorial*/} + +Nel live editor di codice di seguito, fai click su **Fork** nell'angolo in alto a destra per aprire l'editor in una nuova scheda utilizzando il sito CodeSandbox. CodeSandbox ti consente di scrivere codice nel tuo browser e visualizzare in anteprima come i tuoi utenti vedranno l'app che hai creato. La nuova scheda dovrebbe visualizzare un quadrato vuoto e il codice iniziale per questo tutorial. -In the live code editor below, click **Fork** in the top-right corner to open the editor in a new tab using the website CodeSandbox. CodeSandbox lets you write code in your browser and preview how your users will see the app you've created. The new tab should display an empty square and the starter code for this tutorial. @@ -261,33 +262,33 @@ body { -You can also follow this tutorial using your local development environment. To do this, you need to: +Puoi anche seguire questo tutorial usando il tuo ambiente di sviluppo locale. Per fare ciò, è necessario: -1. Install [Node.js](https://nodejs.org/en/) -1. In the CodeSandbox tab you opened earlier, press the top-left corner button to open the menu, and then choose **File > Export to ZIP** in that menu to download an archive of the files locally -1. Unzip the archive, then open a terminal and `cd` to the directory you unzipped -1. Install the dependencies with `npm install` -1. Run `npm start` to start a local server and follow the prompts to view the code running in a browser +1. Installa [Node.js](https://nodejs.org/it) +2. Nella scheda CodeSandbox che hai aperto prima, premi il pulsante nell'angolo in alto a sinistra per aprire il menu, quindi scegli **File > Export to Zip** in quel menu per scaricare un archivio dei file in locale +3. Decomprimi l'archivio, quindi apri un terminale e `cd` nella cartella che hai decompresso. +4. Installa le dipendenze con `npm install` +5. Esegui `npm start` per avviare un server locale e segui le istruzioni per visualizzare il codice in esecuzione in un browser -If you get stuck, don't let this stop you! Follow along online instead and try a local setup again later. +Se rimani bloccato, non lasciare che questo ti fermi! Segui invece online e riprova a configurare in locale più tardi. -## Overview {/*overview*/} +## Panoramica {/*overview*/} -Now that you're set up, let's get an overview of React! +Ora che sei pronto, vediamo una panoramica di React! -### Inspecting the starter code {/*inspecting-the-starter-code*/} +### Ispezione del codice iniziale {/*inspecting-the-starter-code*/} -In CodeSandbox you'll see three main sections: +In CodeSandbox vedrai tre sezioni principali: -![CodeSandbox with starter code](../images/tutorial/react-starter-code-codesandbox.png) +![CodeSandbox con codice iniziale](../images/tutorial/react-starter-code-codesandbox.png) -1. The _Files_ section with a list of files like `App.js`, `index.js`, `styles.css` and a folder called `public` -1. The _code editor_ where you'll see the source code of your selected file -1. The _browser_ section where you'll see how the code you've written will be displayed +1. La sezione _Files_ con una lista di file come `App.js`, `index.js`, `styles.css` e una cartella chiamata `public` +2. L'_editor del codice_ dove vedrai il codice sorgente del tuo file selezionato +3. La sezione _browser_ dove vedrai come il codice che hai scritto sarà visualizzato -The `App.js` file should be selected in the _Files_ section. The contents of that file in the _code editor_ should be: +Il file `App.js` dovrebbe essere selezionato nella sezione _Files_. Il contenuto di quel file nell'_editor del codice_ dovrebbe essere: ```jsx export default function Square() { @@ -295,15 +296,15 @@ export default function Square() { } ``` -The _browser_ section should be displaying a square with a X in it like this: +La sezione _browser_ dovrebbe visualizzare un quadrato con una X all'interno come questo: -![x-filled square](../images/tutorial/x-filled-square.png) +![quadrato riempito con x](../images/tutorial/x-filled-square.png) -Now let's have a look at the files in the starter code. +Adesso diamo un'occhiata ai file nel codice iniziale. #### `App.js` {/*appjs*/} -The code in `App.js` creates a _component_. In React, a component is a piece of reusable code that represents a part of a user interface. Components are used to render, manage, and update the UI elements in your application. Let's look at the component line by line to see what's going on: +Il codice in `App.js` crea un _componente_. In React, un componente è una pezzo di codice riutilizzabile che rappresenta una parte di un'interfaccia utente. I componenti sono usati per renderizzare, gestire e aggiornare gli elementi di UI nella tua applicazione. Diamo un'occhiata al componente riga per riga per vedere cosa sta succedendo: ```js {1} export default function Square() { @@ -311,7 +312,7 @@ export default function Square() { } ``` -The first line defines a function called `Square`. The `export` JavaScript keyword makes this function accessible outside of this file. The `default` keyword tells other files using your code that it's the main function in your file. +La prima riga definisce una funzione chiamata `Square`. La keyword di JavaScript `export` rende questa funzione accessibile dall'esterno di questo file. La keyword `default` dice agli altri file che stanno usando il tuo codice che è la funzione principale nel tuo file. ```js {2} export default function Square() { @@ -319,15 +320,15 @@ export default function Square() { } ``` -The second line returns a button. The `return` JavaScript keyword means whatever comes after is returned as a value to the caller of the function. `` closes the JSX element to indicate that any following content shouldn't be placed inside the button. +La seconda riga restituisce un pulsante. La keyword di JavaScript `return` significa che tutto ciò che viene dopo viene restituito come valore al chiamante della funzione. `` chiude l'elemento JSX per indicare che qualsiasi contenuto successivo non deve essere inserito all'interno del pulsante. #### `styles.css` {/*stylescss*/} -Click on the file labeled `styles.css` in the _Files_ section of CodeSandbox. This file defines the styles for your React app. The first two _CSS selectors_ (`*` and `body`) define the style of large parts of your app while the `.square` selector defines the style of any component where the `className` property is set to `square`. In your code, that would match the button from your Square component in the `App.js` file. +Fai click sul file denominato `styles.css` nella sezione _Files_ di CodeSandbox. Questo file definisce gli stili per la tua app React. I primi due _selettori CSS_ (`*` e `body`) definiscono lo stile di grandi parti della tua app mentre il selettore `.square` definisce lo stile di qualsiasi componente in cui la proprietà `className` è impostata su `square`. Nel tuo codice, ciò corrisponderebbe al pulsante del tuo componente Square nel file `App.js`. #### `index.js` {/*indexjs*/} -Click on the file labeled `index.js` in the _Files_ section of CodeSandbox. You won't be editing this file during the tutorial but it is the bridge between the component you created in the `App.js` file and the web browser. +Fai click sul file denominato `index.js` nella sezione _Files_ di CodeSandbox. Non modificherai questo file durante il tutorial, ma è il ponte tra il componente che hai creato nel file `App.js` e il browser web. ```jsx import { StrictMode } from 'react'; @@ -337,20 +338,20 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 brings all the necessary pieces together: +Le righe 1-5 mettono insieme tutti i pezzi necessari: * React -* React's library to talk to web browsers (React DOM) -* the styles for your components -* the component you created in `App.js`. +* La libreria di React per parlare con il browser web (React DOM) +* gli stili per i tuoi componenti +* il componente che hai creato in `App.js`. -The remainder of the file brings all the pieces together and injects the final product into `index.html` in the `public` folder. +Il resto del file mette insieme tutti i pezzi e inserisce il prodotto finale all'interno di `index.html`nella cartella `public`. -### Building the board {/*building-the-board*/} +### Costruire il tabellone {/*building-the-board*/} -Let's get back to `App.js`. This is where you'll spend the rest of the tutorial. +Torniamo a `App.js`. Qui è dove trascorrerai il resto del tutorial. -Currently the board is only a single square, but you need nine! If you just try and copy paste your square to make two squares like this: +Attualmente il tabellone è solo un quadrato, ma te ne servono nove! Se provi a copiare e incollare il tuo quadrato per creare due quadrati in questo modo: ```js {2} export default function Square() { @@ -358,7 +359,7 @@ export default function Square() { } ``` -You'll get this error: +Otterrai questo errore: @@ -366,7 +367,7 @@ You'll get this error: -React components need to return a single JSX element and not multiple adjacent JSX elements like two buttons. To fix this you can use *fragments* (`<>` and ``) to wrap multiple adjacent JSX elements like this: +I componenti React devono restituire un singolo elemento JSX e non multipli elementi JSX adiacenti come due pulsanti. Per risolvere questo problema puoi usare i *fragments* (`<>` e ``) per avvolgere più elementi JSX adiacenti in questo modo: ```js {3-6} export default function Square() { @@ -379,17 +380,17 @@ export default function Square() { } ``` -Now you should see: +Adesso dovresti vedere: -![two x-filled squares](../images/tutorial/two-x-filled-squares.png) +![due quadrati riempiti con x](../images/tutorial/two-x-filled-squares.png) -Great! Now you just need to copy-paste a few times to add nine squares and... +Grande! Ora devi solo copiare e incollare un po' di volte per aggiungere nove quadrati e... -![nine x-filled squares in a line](../images/tutorial/nine-x-filled-squares.png) +![nove quadrati in una riga riempiti con x](../images/tutorial/nine-x-filled-squares.png) -Oh no! The squares are all in a single line, not in a grid like you need for our board. To fix this you'll need to group your squares into rows with `div`s and add some CSS classes. While you're at it, you'll give each square a number to make sure you know where each square is displayed. +Oh no! I quadrati sono tutti in una singola riga, non in una griglia come necessario per il nostro tabellone. Per risolvere questo problema dovrai raggruppare i quadrati in righe con `div` e aggiungere alcune classi CSS. Già che ci sei, assegnerai ad ogni quadrato un numero per assicurarti di sapere dove viene visualizzato ogni quadrato. -In the `App.js` file, update the `Square` component to look like this: +Nel file `App.js`, modifica il componente `Square` in modo che assomigli a questo: ```js {3-19} export default function Square() { @@ -415,11 +416,11 @@ export default function Square() { } ``` -The CSS defined in `styles.css` styles the divs with the `className` of `board-row`. Now that you've grouped your components into rows with the styled `div`s you have your tic-tac-toe board: +Il CSS definito in `styles.css` stilizza i div con il `className` di `board-row`. Adesso che hai raggruppato i tuoi componenti in righe con i `div` stilizzati, hai il tuo tabellone di tic-tac-toe: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![tabellone di tic-tac-toe riempito con numeri da 1 a 9](../images/tutorial/number-filled-board.png) -But you now have a problem. Your component named `Square`, really isn't a square anymore. Let's fix that by changing the name to `Board`: +Ma ora hai un problema. Il tuo componente chiamato `Square`, in realtà non è più un quadrato. Risolviamo il problema cambiando il nome in `Board`: ```js {1} export default function Board() { @@ -427,7 +428,7 @@ export default function Board() { } ``` -At this point your code should look something like this: +A questo punto il tuo codice dovrebbe essere simile a questo: @@ -504,15 +505,15 @@ body { -Psssst... That's a lot to type! It's okay to copy and paste code from this page. However, if you're up for a little challenge, we recommend only copying code that you've manually typed at least once yourself. +Psssst... C'è molto da scrivere! Puoi copiare e incollare il codice da questa pagina. Tuttavia, se sei pronto per una piccola sfida, ti consigliamo di copiare solo il codice che hai scritto manualmente almeno una volta tu stesso. -### Passing data through props {/*passing-data-through-props*/} +### Passare dati tramite props {/*passing-data-through-props*/} -Next, you'll want to change the value of a square from empty to "X" when the user clicks on the square. With how you've built the board so far you would need to copy-paste the code that updates the square nine times (once for each square you have)! Instead of copy-pasting, React's component architecture allows you to create a reusable component to avoid messy, duplicated code. +Successivamente, vorrai cambiare il valore di un quadrato da vuoto a "X" quando l'utente clicca su di esso. Con il modo in cui hai costruito il tabellone finora, dovresti copiare e incollare il codice che aggiorna il quadrato nove volte (una volta per ogni quadrato che hai)! Invece di copiare e incollare, l'architettura dei componenti di React ti consente di creare un componente riutilizzabile per evitare codice duplicato e disordinato. -First, you are going to copy the line defining your first square (``) from your `Board` component into a new `Square` component: +Per prima cosa, copierai la linea che definisce il tuo primo quadrato (``) dal tuo componente `Board` in un nuovo componente `Square`: ```js {1-3} function Square() { @@ -524,7 +525,7 @@ export default function Board() { } ``` -Then you'll update the Board component to render that `Square` component using JSX syntax: +Quindi aggiornerai il componente Board per eseguire il rendering del componente `Square` utilizzando la sintassi JSX: ```js {5-19} // ... @@ -551,15 +552,15 @@ export default function Board() { } ``` -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +Nota come, a differenza dei `div` del browser, i tuoi componenti `Board` e `Square` devono iniziare con una lettera maiuscola. -Let's take a look: +Diamo un'occhiata: -![one-filled board](../images/tutorial/board-filled-with-ones.png) +![tabellone riempito di uno](../images/tutorial/board-filled-with-ones.png) -Oh no! You lost the numbered squares you had before. Now each square says "1". To fix this, you will use *props* to pass the value each square should have from the parent component (`Board`) to its child (`Square`). +Oh no! Hai perso le caselle numerate che avevi prima. Ora ogni quadrato dice "1". Per risolvere questo problema, userai le *props* per passare il valore che ogni quadrato dovrebbe avere dal componente genitore (`Board`) al suo figlio (`Square`). -Update the `Square` component to read the `value` prop that you'll pass from the `Board`: +Aggiorna il componente `Square` per leggere la prop `value` che passerai da `Board`: ```js {1} function Square({ value }) { @@ -567,9 +568,9 @@ function Square({ value }) { } ``` -`function Square({ value })` indicates the Square component can be passed a prop called `value`. +`function Square({ value })` indica che al componente Square può essere passata una prop chiamata `value`. -Now you want to display that `value` instead of `1` inside every square. Try doing it like this: +Ora vuoi visualizzare quel `value` invece di `1` all'interno di ogni quadrato. Prova a farlo in questo modo: ```js {2} function Square({ value }) { @@ -577,11 +578,11 @@ function Square({ value }) { } ``` -Oops, this is not what you wanted: +Oops, questo non è ciò che volevi: -![value-filled board](../images/tutorial/board-filled-with-value.png) +![tabellone riempito di valori](../images/tutorial/board-filled-with-value.png) -You wanted to render the JavaScript variable called `value` from your component, not the word "value". To "escape into JavaScript" from JSX, you need curly braces. Add curly braces around `value` in JSX like so: +Volevi renderizzare la variabile JavaScript chiamata `value` dal tuo componente, non la parola "value". Per "scappare in JavaScript" da JSX, hai bisogno delle parentesi graffe. Aggiungi le parentesi graffe attorno a `value` in JSX in questo modo: ```js {2} function Square({ value }) { @@ -589,11 +590,11 @@ function Square({ value }) { } ``` -For now, you should see an empty board: +Per ora, dovresti vedere un tabellone vuoto: -![empty board](../images/tutorial/empty-board.png) +![tabellone vuoto](../images/tutorial/empty-board.png) -This is because the `Board` component hasn't passed the `value` prop to each `Square` component it renders yet. To fix it you'll add the `value` prop to each `Square` component rendered by the `Board` component: +Questo perché il componente `Board` non ha ancora passato la prop `value` a ciascun componente `Square` che renderizza. Per risolvere aggiungerai la prop `value` a ciascun componente `Square` renderizzato dal componente `Board`: ```js {5-7,10-12,15-17} export default function Board() { @@ -619,11 +620,11 @@ export default function Board() { } ``` -Now you should see a grid of numbers again: +Ora dovresti vedere di nuovo una griglia di numeri: -![tic-tac-toe board filled with numbers 1 through 9](../images/tutorial/number-filled-board.png) +![tabellone di tic-tac-toe riempito di numeri da 1 a 9](../images/tutorial/number-filled-board.png) -Your updated code should look like this: +Il tuo codice aggiornato dovrebbe assomigliare a questo: @@ -702,9 +703,9 @@ body { -### Making an interactive component {/*making-an-interactive-component*/} +### Creazione di un componente interattivo {/*making-an-interactive-component*/} -Let's fill the `Square` component with an `X` when you click it. Declare a function called `handleClick` inside of the `Square`. Then, add `onClick` to the props of the button JSX element returned from the `Square`: +Riempiamo il componente `Square` con una `X` quando fai click su di esso. Dichiara una funzione chiamata `handleClick` all'interno di `Square`. Quindi, aggiungi `onClick` alle props dell'elemento JSX del pulsante restituito da `Square`: ```js {2-4,9} function Square({ value }) { @@ -723,19 +724,19 @@ function Square({ value }) { } ``` -If you click on a square now, you should see a log saying `"clicked!"` in the _Console_ tab at the bottom of the _Browser_ section in CodeSandbox. Clicking the square more than once will log `"clicked!"` again. Repeated console logs with the same message will not create more lines in the console. Instead, you will see an incrementing counter next to your first `"clicked!"` log. +Se fai click su un quadrato ora, dovresti vedere un log che dice `"clicked!"` nella scheda _Console_ nella parte inferiore della sezione _Browser_ in CodeSandbox. Facendo click sul quadratino più di una volta verrà loggato nuovamente `"clicked!"`. I log ripetuti della console con lo stesso messaggio non creeranno più righe nella console. Vedrai invece un contatore incrementale accanto al tuo primo log `"clicked!"`. -If you are following this tutorial using your local development environment, you need to open your browser's Console. For example, if you use the Chrome browser, you can view the Console with the keyboard shortcut **Shift + Ctrl + J** (on Windows/Linux) or **Option + ⌘ + J** (on macOS). +Se stai seguendo questo tutorial utilizzando il tuo ambiente di sviluppo locale, devi aprire la Console del tuo browser. Ad esempio, se utilizzi il browser Chrome, puoi visualizzare la Console con la scorciatoia da tastiera **Shift + Ctrl + J** (su Windows/Linux) o **Option + ⌘ + J** (su macOS). -As a next step, you want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use *state*. +Come passaggio successivo, vuoi che il componente Square "ricordi" che è stato cliccato e lo riempia con un segno "X". Per "ricordare" le cose, i componenti usano lo *state*. -React provides a special function called `useState` that you can call from your component to let it "remember" things. Let's store the current value of the `Square` in state, and change it when the `Square` is clicked. +React fornisce una funzione speciale chiamata `useState` che puoi chiamare dal tuo componente per fargli "ricordare" le cose. Memorizziamo il valore corrente di `Square` nello state e cambiamolo quando si fa click su `Square`. -Import `useState` at the top of the file. Remove the `value` prop from the `Square` component. Instead, add a new line at the start of the `Square` that calls `useState`. Have it return a state variable called `value`: +Importa `useState` nella parte superiore del file. Rimuovi la prop `value` dal componente `Square`. Invece, aggiungi una nuova riga all'inizio di `Square` che chiama `useState`. Chiedigli di restituire una variabile state chiamata `value`: ```js {1,3,4} import { useState } from 'react'; @@ -747,9 +748,9 @@ function Square() { //... ``` -`value` stores the value and `setValue` is a function that can be used to change the value. The `null` passed to `useState` is used as the initial value for this state variable, so `value` here starts off equal to `null`. +`value` memorizza il valore e `setValue` è una funzione che può essere utilizzata per modificare il valore. Il `null` passato a `useState` viene utilizzato come valore iniziale per questa variabile di state, quindi `value` qui inizia uguale a `null`. -Since the `Square` component no longer accepts props anymore, you'll remove the `value` prop from all nine of the Square components created by the Board component: +Poiché il componente `Square` non accetta più props, rimuoverai la prop `value` da tutti e nove i componenti Square creati dal componente Board: ```js {6-8,11-13,16-18} // ... @@ -776,7 +777,7 @@ export default function Board() { } ``` -Now you'll change `Square` to display an "X" when clicked. Replace the `console.log("clicked!");` event handler with `setValue('X');`. Now your `Square` component looks like this: +Ora cambierai `Square` per visualizzare una "X" quando si fa click su di esso. Sostituisci l'event handler `console.log("clicked!");` con `setValue('X');`. Ora il tuo componente `Square` ha questo aspetto: ```js {5} function Square() { @@ -797,13 +798,13 @@ function Square() { } ``` -By calling this `set` function from an `onClick` handler, you're telling React to re-render that `Square` whenever its `