Skip to content

Commit 416807e

Browse files
committed
Revert "Sync with reactjs.org @ 8803c63 (#120)"
This reverts commit ec1067b.
1 parent ec1067b commit 416807e

File tree

3 files changed

+45
-53
lines changed

3 files changed

+45
-53
lines changed

content/docs/code-splitting.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -102,7 +102,7 @@ import("./math").then(math => {
102102
103103
When Webpack comes across this syntax, it automatically starts code-splitting
104104
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
106106
out of the box in [Next.js](https://github.com/zeit/next.js/#dynamic-import).
107107

108108
If you're setting up Webpack yourself, you'll probably want to read Webpack's

content/languages.yml

Lines changed: 6 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Status enums indicate what percentage of "core" content has been translated:
2-
# 0: Incomplete (0-49%)
3-
# 1: Partially complete (50-99%)
4-
# 2: Complete (100%)
2+
# 0: Incomplete (049%)
3+
# 1: Partially complete (50–94%)
4+
# 2: Complete (95–100%)
55

66
- name: English
77
translated_name: English
@@ -27,10 +27,6 @@
2727
translated_name: Deutsch
2828
code: de
2929
status: 0
30-
- name: Greek
31-
translated_name: Ελληνικά
32-
code: el
33-
status: 0
3430
- name: Spanish
3531
translated_name: Español
3632
code: es
@@ -42,10 +38,6 @@
4238
- name: French
4339
translated_name: Français
4440
code: fr
45-
status: 1
46-
- name: Gujarati
47-
translated_name: ગુજરાતી
48-
code: gu
4941
status: 0
5042
- name: Hebrew
5143
translated_name: עברית
@@ -70,23 +62,11 @@
7062
- name: Japanese
7163
translated_name: 日本語
7264
code: ja
73-
status: 2
74-
- name: Central Khmer
75-
translated_name: ភាសាខ្មែរ
76-
code: km
77-
status: 0
65+
status: 1
7866
- name: Korean
7967
translated_name: 한국어
8068
code: ko
8169
status: 0
82-
- name: Kurdish
83-
translated_name: کوردی‎
84-
code: ku
85-
status: 0
86-
- name: Lithuanian
87-
translated_name: Lietuvių kalba
88-
code: lt
89-
status: 0
9070
- name: Malayalam
9171
translated_name: മലയാളം
9272
code: ml
@@ -118,7 +98,7 @@
11898
- name: Russian
11999
translated_name: Русский
120100
code: ru
121-
status: 1
101+
status: 0
122102
- name: Sinhala
123103
translated_name: සිංහල
124104
code: si
@@ -127,21 +107,13 @@
127107
translated_name: தமிழ்
128108
code: ta
129109
status: 0
130-
- name: Telugu
131-
translated_name: తెలుగు
132-
code: te
133-
status: 0
134110
- name: Turkish
135111
translated_name: Türkçe
136112
code: tr
137113
status: 0
138114
- name: Ukrainian
139115
translated_name: Українська
140116
code: uk
141-
status: 1
142-
- name: Urdu
143-
translated_name: اردو
144-
code: ur
145117
status: 0
146118
- name: Uzbek
147119
translated_name: Oʻzbekcha
@@ -154,7 +126,7 @@
154126
- name: Simplified Chinese
155127
translated_name: 简体中文
156128
code: zh-hans
157-
status: 1
129+
status: 0
158130
- name: Traditional Chinese
159131
translated_name: 繁體中文
160132
code: zh-hant

content/tutorial/tutorial.md

Lines changed: 38 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,8 @@ Il tutorial è diviso nelle seguenti sezioni:
3131

3232
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.
3333

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+
3436
### Cosa Stiamo Costruendo? {#what-are-we-building}
3537

3638
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
188190

189191
Giusto per rompere il ghiaccio, proviamo a passare qualche dato dal componente Board al nostro componente Square.
190192

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-
193193
Nel metodo `renderSquare` in Board, modifica il codice per passare una prop chiamata `value` allo Square:
194194

195195
```js{3}
@@ -294,7 +294,7 @@ class Square extends React.Component {
294294
Procediamo alla modifica del metodo `render` di Square per visualizzare il valore corrente dello stato quando lo clicchiamo:
295295

296296
* 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'})}`.
297+
* Sostituisci l'event handler `() => alert()` con `() => this.setState({value: 'X'})`.
298298
* Aggiungi le props `className` e `onClick` come linee separate per miglior leggibilità.
299299

300300
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
356356

357357
**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.**
358358

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:
362360

363361
```javascript{2-7}
364362
class Board extends React.Component {
@@ -372,9 +370,35 @@ class Board extends React.Component {
372370
renderSquare(i) {
373371
return <Square value={i} />;
374372
}
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+
}
375399
```
376400

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ì:
378402

379403
```javascript
380404
[
@@ -408,7 +432,7 @@ Ogni Square adesso riceverà una prop `value` che sarà valorizzata con `'X'`, `
408432

409433
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.
410434

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:
412436

413437
```javascript{5}
414438
renderSquare(i) {
@@ -454,11 +478,11 @@ Quando uno Square viene cliccato, viene richiamata la funzione `onClick` provvis
454478
2. Quando il bottone viene cliccato, React richiama l'event handler `onClick` che è definito nel metodo `render()` di Square.
455479
3. Questo event handler chiama a sua volta `this.props.onClick()`. La prop `onClick` di Square è stata però specificata da Board.
456480
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.
458482

459483
>Nota Bene
460484
>
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.
462486
463487
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:
464488

@@ -515,7 +539,7 @@ class Board extends React.Component {
515539

516540
**[Visualizza tutto il codice scritto finora](https://codepen.io/gaearon/pen/ybbQJX?editors=0010)**
517541

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.
519543

520544
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.
521545

@@ -589,7 +613,7 @@ Abbiamo cambiato `this.props` in `props` in entrambi i casi.
589613

590614
>Nota Bene
591615
>
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`.
593617
594618
### Turni {#taking-turns}
595619

@@ -621,9 +645,7 @@ Ogni volta che un giocatore muove, `xIsNext` (booleano) viene invertito per dete
621645
}
622646
```
623647

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:
627649

628650
```javascript{2}
629651
render() {
@@ -694,7 +716,7 @@ class Board extends React.Component {
694716

695717
### Dichiarare un Vincitore {#declaring-a-winner}
696718

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:
698720

699721
```javascript
700722
function calculateWinner(squares) {
@@ -718,8 +740,6 @@ function calculateWinner(squares) {
718740
}
719741
```
720742

721-
Dato un array di 9 quadrati, questa funzione determinerà il vincitore e ritornerà `'X'`, `'O'` o `null` di conseguenza.
722-
723743
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:
724744

725745
```javascript{2-8}

0 commit comments

Comments
 (0)