You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
When Webpack comes across this syntax, it automatically starts code-splitting
104
104
your app. If you're using Create React App, this is already configured for you
105
-
and you can [start using it](https://facebook.github.io/create-react-app/docs/code-splitting) immediately. It's also supported
105
+
and you can [start using it](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting) immediately. It's also supported
106
106
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107
107
108
108
If you're setting up Webpack yourself, you'll probably want to read Webpack's
Copy file name to clipboardExpand all lines: content/tutorial/tutorial.md
+38-18Lines changed: 38 additions & 18 deletions
Original file line number
Diff line number
Diff line change
@@ -31,6 +31,8 @@ Il tutorial è diviso nelle seguenti sezioni:
31
31
32
32
Non devi completare tutte le sezioni in una volta per guadagnare qualcosa da questo tutorial. Prova a seguirlo fin quando puoi -- anche se è solo per una o due sezioni.
33
33
34
+
Va bene lo stesso se preferisci copiare ed incollare il codice lungo il tutorial, tuttavia, ti raccomandiamo di scriverlo a mano. Ti aiuterà a sviluppare memoria muscolare ed a capire meglio i concetti espressi.
35
+
34
36
### Cosa Stiamo Costruendo? {#what-are-we-building}
35
37
36
38
In questo tutorial, ti mostreremo come costruire in React una versione interattiva del gioco tic-tac-toe (conosciuto anche come "tris").
@@ -188,8 +190,6 @@ Il componente Square (quadrato) visualizza un singolo `<button>` mentre Board (t
188
190
189
191
Giusto per rompere il ghiaccio, proviamo a passare qualche dato dal componente Board al nostro componente Square.
190
192
191
-
Va bene lo stesso se preferisci copiare ed incollare il codice lungo il tutorial, tuttavia, ti raccomandiamo di scriverlo a mano. Ti aiuterà a sviluppare memoria muscolare ed a capire meglio i concetti espressi.
192
-
193
193
Nel metodo `renderSquare` in Board, modifica il codice per passare una prop chiamata `value` allo Square:
194
194
195
195
```js{3}
@@ -294,7 +294,7 @@ class Square extends React.Component {
294
294
Procediamo alla modifica del metodo `render` di Square per visualizzare il valore corrente dello stato quando lo clicchiamo:
295
295
296
296
* Sostituisci `this.props.value` con `this.state.value` all'interno del tag `<button>`.
297
-
* Sostituisci l'event handler `onClick={...}` con `onClick={() => this.setState({value: 'X'})}`.
* Aggiungi le props `className` e `onClick` come linee separate per miglior leggibilità.
299
299
300
300
Al seguito delle nostre modifiche, il tag `<button>` ritornato dal metodo `render` di Square sarà:
@@ -356,9 +356,7 @@ Possiamo pensare che Board debba solo richiedere ad ogni Square il relativo stat
356
356
357
357
**Per recuperare dati dai componenti figli a partire dal componente padre, o per far comunicare tra di loro due componenti figli, bisogna definire uno stato condiviso nel componente padre. Quest'ultimo può passare di nuovo lo stato in basso, ai figli, usando props; ciò mantiene i componenti figli in sincronia tra di loro ed ovviamente con il componente padre.**
358
358
359
-
Elevare lo stato nel componente padre è un processo comune quando i componenti React vengono rifattorizzati -- proviamo già che ci siamo.
360
-
361
-
Cominciamo aggiungendo un costruttore a Board ed impostandone lo stato iniziale così da contenere un array di 9 nulls. Questi 9 nulls corrispondono ai 9 quadrati:
359
+
Elevare lo stato nel componente padre è un processo comune quando i componenti React vengono rifattorizzati -- proviamo già che ci siamo. Cominciamo aggiungendo un costruttore a Board ed impostandone lo stato iniziale così da contenere un array di 9 nulls. Questi 9 nulls corrispondono ai 9 quadrati:
362
360
363
361
```javascript{2-7}
364
362
class Board extends React.Component {
@@ -372,9 +370,35 @@ class Board extends React.Component {
372
370
renderSquare(i) {
373
371
return <Square value={i} />;
374
372
}
373
+
374
+
render() {
375
+
const status = 'Next player: X';
376
+
377
+
return (
378
+
<div>
379
+
<div className="status">{status}</div>
380
+
<div className="board-row">
381
+
{this.renderSquare(0)}
382
+
{this.renderSquare(1)}
383
+
{this.renderSquare(2)}
384
+
</div>
385
+
<div className="board-row">
386
+
{this.renderSquare(3)}
387
+
{this.renderSquare(4)}
388
+
{this.renderSquare(5)}
389
+
</div>
390
+
<div className="board-row">
391
+
{this.renderSquare(6)}
392
+
{this.renderSquare(7)}
393
+
{this.renderSquare(8)}
394
+
</div>
395
+
</div>
396
+
);
397
+
}
398
+
}
375
399
```
376
400
377
-
Quando riempiremo la tavola più tardi, l'array `this.state.squares`risulterà più o meno così:
401
+
Quando riempiremo la tavola più tardi, risulterà più o meno così:
378
402
379
403
```javascript
380
404
[
@@ -408,7 +432,7 @@ Ogni Square adesso riceverà una prop `value` che sarà valorizzata con `'X'`, `
408
432
409
433
Successivamente, dobbiamo cambiare cosa succede quando uno Square viene cliccato. Il componente Board adesso sa quali quadrati sono riempiti. Dobbiamo fare in modo che gli Square possano modificare lo stato all'interno di Board. Dato che lo stato è considerato privato ed accessibile per definizione solo al componente nel quale è definito, non possiamo modificarlo direttamente da Square.
410
434
411
-
Possiamo però passare una funzione da Board a Square. Questa funzione verrà richiamata ogni qual volta uno Square viene cliccato. Ecco come dobbiamo modificare il metodo `renderSquare` di Board:
435
+
Al fine di mantenere la privacy dello stato di Board, dobbiamo passare da Board a Square una funzione. Questa funzione verrà richiamata ogni qual volta uno Square viene cliccato. Ecco come dobbiamo modificare il metodo `renderSquare` di Board:
412
436
413
437
```javascript{5}
414
438
renderSquare(i) {
@@ -454,11 +478,11 @@ Quando uno Square viene cliccato, viene richiamata la funzione `onClick` provvis
454
478
2. Quando il bottone viene cliccato, React richiama l'event handler `onClick` che è definito nel metodo `render()` di Square.
455
479
3. Questo event handler chiama a sua volta `this.props.onClick()`. La prop `onClick` di Square è stata però specificata da Board.
456
480
4. Dato che Board ha passato `onClick={() => this.handleClick(i)}` a Square, di conseguenza Square richiama `this.handleClick(i)` quando viene cliccato.
457
-
5. Non abbiamo ancora definito alcun metodo `handleClick()`, per questo il nostro codice non funziona al momento. Infatti, se clicchi su uno Square adesso, dovresti ricevere un messaggio di errore che dice qualcosa del tipo: "this.handleClick is not a function".
481
+
5. Non abbiamo ancora definito alcun metodo `handleClick()`, per questo il nostro codice non funziona al momento.
458
482
459
483
>Nota Bene
460
484
>
461
-
>L'attributo `onClick` dell'elemento DOM `<button>` ha un significato speciale in quanto è un componente di fabbrica. Per componenti customizzati come Square, la nomenclatura sta a te. Potremmo dare un nome diverso alla prop `onClick` di Square o al metodo `handleClick` di Board ed il codice continuerebbe a funzionare. In React, comunque, esiste la convenzione di utilizzare i nomi `on[Evento]` per le props che rappresentano eventi ed `handle[Evento]` per i metodi che gestiscono gli eventi.
485
+
>L'attributo `onClick` dell'elemento DOM `<button>` ha un significato speciale in quanto è un componente di fabbrica. Per componenti customizzati come Square, la nomenclatura sta a te. Potremmo dare un nome diverso alla prop `onClick` di Square o al metodo `handleClick` di Board. In React, comunque, esiste la convenzione di utilizzare i nomi `on[Evento]` per le props che rappresentano eventi ed `handle[Evento]` per i metodi che gestiscono gli eventi.
462
486
463
487
Quando proviamo a cliccare su uno Square, dovremmo ricevere un errore visto che non abbiamo ancora definito `handleClick`. Andiamo ora ad aggiungere `handleClick` alla classe Board:
464
488
@@ -515,7 +539,7 @@ class Board extends React.Component {
515
539
516
540
**[Visualizza tutto il codice scritto finora](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
517
541
518
-
A seguito di queste modifiche, siamo ancora in grado di cliccare sui componenti Square, facendo sì che si valorizzino come in precedenza. Tuttavia, adesso lo stato viene mantenuto nel componente Board invece che individualmente nei vari componenti Square. Quando lo stato di Board cambia, i componenti Square vengono renderizzati di nuovo automaticamente. Mantenere lo stato di tutti i quadrati nel componente Board ci permetterà di determinare il vincitore in futuro.
542
+
A seguito di queste modifiche, siamo ancora in grado di cliccare sui componenti Square, facendo sì che si valorizzino. Tuttavia, adesso lo stato viene mantenuto nel componente Board invece che individualmente nei vari componenti Square. Quando lo stato di Board cambia, i componenti Square vengono renderizzati di nuovo automaticamente. Mantenere lo stato di tutti i quadrati nel componente Board ci permetterà di determinare il vincitore in futuro.
519
543
520
544
Dato che i componenti Square non mantengono più il proprio stato, essi ricevono valori dal componente Board ed a loro volta lo informano di quando vengono cliccati. In termini di React, i componenti Square sono ora **componenti controllati**. Board ha infatti il controllo completo su di essi.
521
545
@@ -589,7 +613,7 @@ Abbiamo cambiato `this.props` in `props` in entrambi i casi.
589
613
590
614
>Nota Bene
591
615
>
592
-
>Quando abbiamo convertito Square in un componente funzione, abbiamo anche cambiato `onClick={() => this.props.onClick()}` nella versione più corta `onClick={props.onClick}` (nota l'assenza delle parentesi da *entrambi* i lati).
616
+
>Quando abbiamo convertito Square in un componente funzione, abbiamo anche cambiato `onClick={() => this.props.onClick()}` nella versione più corta `onClick={props.onClick}` (nota l'assenza delle parentesi da *entrambi* i lati). Nella classe, avevamo usato una arrow function per avere accesso al corretto valore di `this`, nel componente funzione, al contrario, non dobbiamo preoccuparci di `this`.
593
617
594
618
### Turni {#taking-turns}
595
619
@@ -621,9 +645,7 @@ Ogni volta che un giocatore muove, `xIsNext` (booleano) viene invertito per dete
621
645
}
622
646
```
623
647
624
-
Con questo cambiamento, "X" e "O" adesso vengono usati alternativamente di turno in turno. Prova!
625
-
626
-
Dobbiamo anche cambiare il testo "status" nel `render` di Board cosicchè verremo informati a video del giocatore che deve muovere nel turno successivo:
648
+
Con questo cambiamento, "X" e "O" adesso vengono usati alternativamente di turno in turno. Dobbiamo anche cambiare il testo "status" nel `render` di Board cosicchè verremo informati a video del giocatore che deve muovere nel turno successivo:
627
649
628
650
```javascript{2}
629
651
render() {
@@ -694,7 +716,7 @@ class Board extends React.Component {
694
716
695
717
### Dichiarare un Vincitore {#declaring-a-winner}
696
718
697
-
Adesso che possiamo visualizzare quale giocatore deve muovere nel prossimo turno, possiamo anche visualizzare quando una partita è finita ed il relativo vincitore. Copia questa funzione aiutante (funzioni che contribuiscono alla risoluzione dell'algoritmo, normalmente chiamate "helper functions") ed incollala alla fine del file:
719
+
Adesso che possiamo visualizzare quale giocatore deve muovere nel prossimo turno, possiamo anche visualizzare quando una partita è finita ed il relativo vincitore. Per determinare il vincitore, aggiungiamo una funzione aiutante (funzioni che contribuiscono alla risoluzione dell'algoritmo, normalmente chiamate "helper functions") alla fine del file:
698
720
699
721
```javascript
700
722
functioncalculateWinner(squares) {
@@ -718,8 +740,6 @@ function calculateWinner(squares) {
718
740
}
719
741
```
720
742
721
-
Dato un array di 9 quadrati, questa funzione determinerà il vincitore e ritornerà `'X'`, `'O'` o `null` di conseguenza.
722
-
723
743
Richiameremo `calculateWinner(squares)` nella funzione `render` di Board per verificare se un giocatore ha vinto. In caso positivo, visualizzeremo il testo "Winner: X" oppure "Winner: O". Sostituiremo la dichiarazione di `status` nella funzione `render` di Board in questo modo:
0 commit comments