claudiopro
9 years ago
42 changed files with 5340 additions and 0 deletions
@ -0,0 +1,29 @@ |
|||
--- |
|||
id: why-react-it-IT |
|||
title: Perché React? |
|||
permalink: why-react-it-IT.html |
|||
next: displaying-data-it-IT.html |
|||
--- |
|||
React è una libreria JavaScript per creare interfacce utente scritta da Facebook e Instagram. A molti piace pensare a React come alla **V** di **[MVC](https://it.wikipedia.org/wiki/Model-View-Controller)**. |
|||
|
|||
Abbiamo costruito React per risolvere un problema: **costruire applicazioni di grandi dimensioni con dati che cambiano nel tempo**. |
|||
|
|||
## Semplice |
|||
|
|||
Dichiara semplicemente come la tua app debba apparire in ogni istante, e React gestirà automaticamente tutti gli aggiornamenti della UI quando i dati sottostanti cambiano. |
|||
|
|||
## Dichiarativo |
|||
|
|||
Quando i dati cambiano, React preme idealmente il bottone "aggiorna", e sa come aggiornare soltanto le parti che sono cambiate. |
|||
|
|||
## Costruisci Componenti Componibili |
|||
|
|||
React è basato interamente sulla costruzione di componenti riutilizzabili. Infatti, con React l'*unica* cosa che fai è costruire componenti. Dal momento che sono così incapsulati, i componenti facilitano il riutilizzo del codice, la verifica e la separazione dei concetti. |
|||
|
|||
## Dagli Cinque Minuti |
|||
|
|||
React sfida molte convenzioni, e a prima vista alcune delle idee potrebbero sembrare folli. [Dagli cinque minuti](https://signalvnoise.com/posts/3124-give-it-five-minutes) mentre leggi questa guida; quelle idee folli hanno funzionato per costruire migliaia di componenti sia dentro che fuori da Facebook e Instagram. |
|||
|
|||
## Per Approfondire |
|||
|
|||
Puoi approfondire le nostre motivazioni per la costruzione di React leggendo [questo articolo del blog](/react/blog/2013/06/05/why-react.html). |
|||
@ -0,0 +1,128 @@ |
|||
--- |
|||
id: displaying-data-it-IT |
|||
title: Visualizzare Dati |
|||
permalink: displaying-data-it-IT.html |
|||
prev: why-react-it-IT.html |
|||
next: jsx-in-depth-it-IT.html |
|||
--- |
|||
|
|||
L'attività più basilare che puoi effettuare con una UI è mostrare dei dati. React rende visualizzare dati semplice e mantiene automaticamente l'interfaccia aggiornata quando i dati cambiano. |
|||
|
|||
|
|||
## Per Cominciare |
|||
|
|||
Diamo un'occhiata ad un esempio davvero semplice. Creiamo un file dal nome `hello-react.html` con il codice seguente: |
|||
|
|||
```html |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<title>Hello React</title> |
|||
<script src="https://fb.me/react-{{site.react_version}}.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="example"></div> |
|||
<script type="text/babel"> |
|||
|
|||
// ** Il tuo codice va qui! ** |
|||
|
|||
</script> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
Nel resto della documentazione, ci concentreremo soltanto sul codice JavaScript e assumeremo che sia inserito in un modello come quello qui sopra. Sostituisci il commento segnaposto qui sopra con il seguente codice JSX: |
|||
|
|||
```javascript |
|||
var HelloWorld = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<p> |
|||
Ciao, <input type="text" placeholder="Scrivi il tuo nome" />! |
|||
È il {this.props.date.toTimeString()} |
|||
</p> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
setInterval(function() { |
|||
React.render( |
|||
<HelloWorld date={new Date()} />, |
|||
document.getElementById('example') |
|||
); |
|||
}, 500); |
|||
``` |
|||
|
|||
|
|||
## Aggiornamenti Reattivi |
|||
|
|||
Apri `hello-react.html` in un browser web e scrivi il tuo nome nel campo di testo. Osserva che React cambia soltanto la stringa di testo dell'ora nella UI — ogni input che inserisci nel campo di testo rimane, anche se non hai scritto alcun codice che gestisce questo comportamento. React lo capisce da solo al tuo posto e fa la cosa giusta. |
|||
|
|||
La maniera in cui siamo in grado di capirlo è che React non manipola il DOM a meno che non sia necessario. **Utilizza un DOM interno fittizio e veloce per effettuare confronti ed effettuare le mutazioni del DOM più efficienti al tuo posto.** |
|||
|
|||
Gli input di questo componente sono chiamati `props` — breve per "properties". Sono passati come attributi nella sintassi JSX. Puoi pensare ad essi come immutabili nel contesto del componente, ovvero, **non assegnare mai `this.props`**. |
|||
|
|||
|
|||
## I Componenti Sono Come Funzioni |
|||
|
|||
I componenti React sono molto semplici. Puoi immaginarli come semplici funzioni che ricevono in ingresso `props` e `state` (discusso in seguito) e rendono HTML. Fatta questa premessa, i componenti sono molto semplici da descrivere. |
|||
|
|||
> Nota: |
|||
> |
|||
> **Una limitazione**: i componenti React possono rendere soltanto un singolo nodo radice. Se desideri restituire nodi multipli, essi *devono* essere avvolti in un singolo nodo radice. |
|||
|
|||
|
|||
## Sintassi JSX |
|||
|
|||
Crediamo fermamente che i componenti sono la maniera corretta di separare i concetti anziché i "modelli" e la "logica di presentazione." Pensiamo che il markup e il codice che lo genera siano intimamente collegati. Inoltre, la logica di presentazione è solitamente molto complessa e usare un linguaggio di modello per esprimerla risulta dispendioso. |
|||
|
|||
Abbiamo scoperto che la migliore soluzione a questo problema è generare HTML e un albero di componenti direttamente dal codice JavaScript in maniera da poter utilizzare tutta la potenza espressiva di un vero linguaggio di programmazione per costruire UI. |
|||
|
|||
Per rendere il compito più facile, abbiamo aggiunto una semplice e **opzionale** sintassi simile all'HTML per creare questi nodi di albero React. |
|||
|
|||
**JSX ti permette di creare oggetti JavaScript usando una sintassi HTML.** Per generare un collegamento in React usando puro JavaScript puoi scrivere: |
|||
|
|||
`React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Ciao!')` |
|||
|
|||
Con JSX ciò diventa: |
|||
|
|||
`<a href="https://facebook.github.io/react/">Ciao!</a>` |
|||
|
|||
Abbiamo scoperto che questo ha reso la costruzione di applicazioni React più semplice e i designer tendono a preferire la sintassi, ma ciascuno ha un diverso flusso di lavoro, quindi **JSX non è richiesto per utilizzare React.** |
|||
|
|||
JSX è di dimensioni contenute. Per maggiori informazioni, consulta [JSX in profondità](/react/docs/jsx-in-depth-it-IT.html). Oppure osserva la trasformazione in tempo reale sulla [REPL di Babel](https://babeljs.io/repl/). |
|||
|
|||
JSX è simile all'HTML, ma non proprio identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per alcune differenze fondamentali. |
|||
|
|||
[Babel offre una varietà di strumenti per cominciare a usare JSX](http://babeljs.io/docs/setup/), dagli strumenti a riga di comando alle integrazioni in Ruby on Rails. Scegli lo strumento che funziona meglio per te. |
|||
|
|||
|
|||
## React senza JSX |
|||
|
|||
JSX è completamente opzionale; non è necessario utilizzare JSX con React. Puoi creare elementi React in puro JavaScript usando `React.createElement`, che richiede un nome di tag o di componente, un oggetto di proprietà e un numero variabile di argomenti che rappresentano nodi figli opzionali. |
|||
|
|||
```javascript |
|||
var child1 = React.createElement('li', null, 'Primo Contenuto di Testo'); |
|||
var child2 = React.createElement('li', null, 'Secondo Contenuto di Testo'); |
|||
var root = React.createElement('ul', { className: 'my-list' }, child1, child2); |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
Per comodità, puoi creare funzioni factory scorciatoia per costruire elementi da componenti personalizzati. |
|||
|
|||
```javascript |
|||
var Factory = React.createFactory(ComponentClass); |
|||
... |
|||
var root = Factory({ custom: 'prop' }); |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
React possiede già delle factory predefinite per i tag HTML comuni: |
|||
|
|||
```javascript |
|||
var root = React.DOM.ul({ className: 'my-list' }, |
|||
React.DOM.li(null, 'Contenuto di Testo') |
|||
); |
|||
``` |
|||
@ -0,0 +1,228 @@ |
|||
--- |
|||
id: jsx-in-depth-it-IT |
|||
title: JSX in Profondità |
|||
permalink: jsx-in-depth-it-IT.html |
|||
prev: displaying-data-it-IT.html |
|||
next: jsx-spread-it-IT.html |
|||
--- |
|||
|
|||
[JSX](https://facebook.github.io/jsx/) è un'estensione della sintassi JavaScript che somiglia all'XML. Puoi usare una semplice trasformazione sintattica di JSX con React. |
|||
|
|||
## Perché JSX? |
|||
|
|||
Non devi per forza utilizzare JSX con React. Puoi anche usare semplice JS. Tuttavia, raccomandiamo di utilizzare JSX perché usa una sintassi concisa e familiare per definire strutture ad albero dotate di attributi. |
|||
|
|||
È più familiare a sviluppatori occasionali come i designer. |
|||
|
|||
L'XML ha i benefici di tag di apertura e chiusura bilanciati. Ciò rende la lettura di grandi strutture ad albero più semplice di chiamate a funzione o oggetti letterali. |
|||
|
|||
Non altera la semantica di JavaScript. |
|||
|
|||
## Tag HTML o Componenti React |
|||
|
|||
React può sia rendere tag HTML (stringhe) che componenti React (classi). |
|||
|
|||
Per rendere untag HTML, usa nomi di tag minuscoli in JSX: |
|||
|
|||
```javascript |
|||
var myDivElement = <div className="foo" />; |
|||
React.render(myDivElement, document.getElementById('example')); |
|||
``` |
|||
|
|||
Per rendere un componente React, definisci una variabile locale che comincia con una lettera maiuscola: |
|||
|
|||
```javascript |
|||
var MyComponent = React.createClass({/*...*/}); |
|||
var myElement = <MyComponent someProperty={true} />; |
|||
React.render(myElement, document.getElementById('example')); |
|||
``` |
|||
|
|||
Il JSX di React utilizza la convenzione maiuscolo o minuscolo per distinguere tra classi di componenti locali e tag HTML. |
|||
|
|||
> Nota: |
|||
> |
|||
> Poiché JSX è JavaScript, gli identificatori come `class` e `for` sono sconsigliati |
|||
> come nomi di attributi XML. Invece, i componenti DOM React si aspettano nomi di proprietà |
|||
> come `className` e `htmlFor` rispettivamente. |
|||
|
|||
## La Trasformazione |
|||
|
|||
Il JSX di React viene trasformato da una sintassi XML a JavaScript nativo. Gli elementi XML, gli attributi e i figli sono trasformati in argomenti passati a `React.createElement`. |
|||
|
|||
```javascript |
|||
var Nav; |
|||
// Input (JSX): |
|||
var app = <Nav color="blue" />; |
|||
// Output (JS): |
|||
var app = React.createElement(Nav, {color:"blue"}); |
|||
``` |
|||
|
|||
Osserva che per utilizzare `<Nav />`, la variabile `Nav` deve essere visibile. |
|||
|
|||
JSX permette anche di specificare i figli usando una sintassi XML: |
|||
|
|||
```javascript |
|||
var Nav, Profile; |
|||
// Input (JSX): |
|||
var app = <Nav color="blue"><Profile>click</Profile></Nav>; |
|||
// Output (JS): |
|||
var app = React.createElement( |
|||
Nav, |
|||
{color:"blue"}, |
|||
React.createElement(Profile, null, "click") |
|||
); |
|||
``` |
|||
|
|||
JSX inferirà il [displayName](/react/docs/component-specs-it-IT.html#displayname) della classe dall'assegnazione delle variabile, quando il valore di displayName è indefinito: |
|||
|
|||
```javascript |
|||
// Input (JSX): |
|||
var Nav = React.createClass({ }); |
|||
// Output (JS): |
|||
var Nav = React.createClass({displayName: "Nav", }); |
|||
``` |
|||
|
|||
Usa la [REPL di Babel](https://babeljs.io/repl/) per provare il JSX e vedere come viene trasformato |
|||
in JavaScript nativo, e il |
|||
[convertitore da HTML a JSX](/react/html-jsx.html) per convertire il tuo HTML esistente a |
|||
JSX. |
|||
|
|||
Se desideri utilizzare JSX, la guida [Primi Passi](/react/docs/getting-started-it-IT.html) ti mostra come impostare la compilazione. |
|||
|
|||
> Nota: |
|||
> |
|||
> L'espressione JSX viene sempre valutata come un ReactElement. Le implementazioni |
|||
> attuali potrebbero differire. Un modo ottimizzato potrebbe porre il |
|||
> ReactElement in linea come un oggetto letterale per evitare il codice di validazione in |
|||
> `React.createElement`. |
|||
|
|||
## Namespace dei Componenti |
|||
|
|||
Se stai costruendo un componente che ha parecchi figli, come ad esempio un modulo, potresti facilmente trovarti con una quantità di dichiarazioni di variabili: |
|||
|
|||
```javascript |
|||
// Imbarazzante blocco di dichiarazioni di variabili |
|||
var Form = MyFormComponent; |
|||
var FormRow = Form.Row; |
|||
var FormLabel = Form.Label; |
|||
var FormInput = Form.Input; |
|||
|
|||
var App = ( |
|||
<Form> |
|||
<FormRow> |
|||
<FormLabel /> |
|||
<FormInput /> |
|||
</FormRow> |
|||
</Form> |
|||
); |
|||
``` |
|||
|
|||
Per rendere tutto ciò più semplice e leggibile, *i componenti con un namespace* ti permettono di usare un componente che dispone di altri componenti come proprietà: |
|||
|
|||
```javascript |
|||
var Form = MyFormComponent; |
|||
|
|||
var App = ( |
|||
<Form> |
|||
<Form.Row> |
|||
<Form.Label /> |
|||
<Form.Input /> |
|||
</Form.Row> |
|||
</Form> |
|||
); |
|||
``` |
|||
|
|||
Per fare ciò, devi semplicemente creare i tuoi *"sub-componenti"* come proprietà del componente principale: |
|||
|
|||
```javascript |
|||
var MyFormComponent = React.createClass({ ... }); |
|||
|
|||
MyFormComponent.Row = React.createClass({ ... }); |
|||
MyFormComponent.Label = React.createClass({ ... }); |
|||
MyFormComponent.Input = React.createClass({ ... }); |
|||
``` |
|||
|
|||
JSX gestirà il tutto correttamente al momento di compilare il tuo codice. |
|||
|
|||
```javascript |
|||
var App = ( |
|||
React.createElement(Form, null, |
|||
React.createElement(Form.Row, null, |
|||
React.createElement(Form.Label, null), |
|||
React.createElement(Form.Input, null) |
|||
) |
|||
) |
|||
); |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> Questa funzionalità è disponibile nella [v0.11](/react/blog/2014/07/17/react-v0.11.html#jsx) e successive. |
|||
|
|||
## Espressioni JavaScript |
|||
|
|||
### Expressioni come Attributi |
|||
|
|||
Per usare un'espressione JavaScript come valore di un attributo, racchiudi l'espressione in un paio |
|||
di parentesi graffe (`{}`) anziché doppi apici (`""`). |
|||
|
|||
```javascript |
|||
// Input (JSX): |
|||
var person = <Person name={window.isLoggedIn ? window.name : ''} />; |
|||
// Output (JS): |
|||
var person = React.createElement( |
|||
Person, |
|||
{name: window.isLoggedIn ? window.name : ''} |
|||
); |
|||
``` |
|||
|
|||
### Attributi Booleani |
|||
|
|||
Omettere il valore di un attributo fa in modo che JSX lo tratti come `true`. Per passare `false` occorre utilizzare un'espressione come attributo. Ciò capita spesso quando si usano elementi di moduli HTML, con attributi come `disabled`, `required`, `checked` e `readOnly`. |
|||
|
|||
```javascript |
|||
// Queste due forme sono equivalenti in JSX per disabilitare un bottone |
|||
<input type="button" disabled />; |
|||
<input type="button" disabled={true} />; |
|||
|
|||
// E queste due forme sono equivalenti in JSX per non disabilitare un bottone |
|||
<input type="button" />; |
|||
<input type="button" disabled={false} />; |
|||
``` |
|||
|
|||
### Expressioni per Figli |
|||
|
|||
Similmente, espressioni JavaScript possono essere utilizzate per rappresentare figli: |
|||
|
|||
```javascript |
|||
// Input (JSX): |
|||
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>; |
|||
// Output (JS): |
|||
var content = React.createElement( |
|||
Container, |
|||
null, |
|||
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login) |
|||
); |
|||
``` |
|||
|
|||
### Commenti |
|||
|
|||
È facile aggiungere commenti al tuo codice JSX; sono semplici espressioni JS. Devi soltanto prestare attenzione a porre `{}` attorno ai commenti quando ti trovi dentro la sezione figli di un tag. |
|||
|
|||
```javascript |
|||
var content = ( |
|||
<Nav> |
|||
{/* commento figlio, racchiuso in {} */} |
|||
<Person |
|||
/* commento |
|||
su più |
|||
righe */ |
|||
name={window.isLoggedIn ? window.name : ''} // fine del commento su una riga |
|||
/> |
|||
</Nav> |
|||
); |
|||
``` |
|||
|
|||
> NOTA: |
|||
> |
|||
> JSX è simile all'HTML, ma non esattamente identico. Consulta la guida [JSX gotchas](/react/docs/jsx-gotchas-it-IT.html) per le differenze fondamentali. |
|||
@ -0,0 +1,52 @@ |
|||
--- |
|||
id: jsx-spread-it-IT |
|||
title: Attributi Spread JSX |
|||
permalink: jsx-spread-it-IT.html |
|||
prev: jsx-in-depth-it-IT.html |
|||
next: jsx-gotchas-it-IT.html |
|||
--- |
|||
|
|||
Se sai in anticipo che tutte le proprietà che desideri assegnare ad un componente, usare JSX è facile: |
|||
|
|||
```javascript |
|||
var component = <Component foo={x} bar={y} />; |
|||
``` |
|||
|
|||
## Le Props Mutevoli sono il Male |
|||
|
|||
Se non sai quali proprietà desideri impostare, potresti essere tentato di aggiungerle all'oggetto in seguito: |
|||
|
|||
```javascript |
|||
var component = <Component />; |
|||
component.props.foo = x; // male |
|||
component.props.bar = y; // altrettanto male |
|||
``` |
|||
|
|||
Questo è un anti-pattern perché significa che non possiamo aiutarti a verificare i propTypes per tempo. Ciò significa che i tuoi errori di propTypes finiscono per avere uno stack trace indecifrabile. |
|||
|
|||
Le props dovrebbero essere considerate immutabili. Mutare l'oggetto props altrove potrebbe causare conseguenze inattese, quindi a questo punto dovrebbe essere idealmente considerato un oggetto congelato. |
|||
|
|||
## Attributi Spread |
|||
|
|||
Adesso puoi utilizzare una nuova caratteristica di JSX chiamata attributi spread: |
|||
|
|||
```javascript |
|||
var props = {}; |
|||
props.foo = x; |
|||
props.bar = y; |
|||
var component = <Component {...props} />; |
|||
``` |
|||
|
|||
Le proprietà dell'oggetto che passi al componente sono copiate nelle sue props. |
|||
|
|||
Puoi usarlo più volte o combinarlo con altri attributi. L'ordine in cui sono specificati è rilevante. Attributi successivi ridefiniscono quelli precedentemente impostati. |
|||
|
|||
```javascript |
|||
var props = { foo: 'default' }; |
|||
var component = <Component {...props} foo={'override'} />; |
|||
console.log(component.props.foo); // 'override' |
|||
``` |
|||
|
|||
## Cos'è la strana notazione `...`? |
|||
|
|||
L'operatore `...` (o operatore spread) è già supportato per gli [array in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). Esiste anche una proposta per ES7 per le proprietà [Spread e Rest di Object](https://github.com/sebmarkbage/ecmascript-rest-spread). Stiamo prendendo spunto da questi standard supportati o in corso di sviluppo per fornire una sintassi più pulita a JSX. |
|||
@ -0,0 +1,68 @@ |
|||
--- |
|||
id: jsx-gotchas-it-IT |
|||
title: JSX Gotchas |
|||
permalink: jsx-gotchas-it-IT.html |
|||
prev: jsx-spread-it-IT.html |
|||
next: interactivity-and-dynamic-uis-it-IT.html |
|||
--- |
|||
|
|||
JSX somiglia all'HTML ma ci sono delle differenze importanti da tenere in considerazione. |
|||
|
|||
> Nota: |
|||
> |
|||
> Per le differenze del DOM, come l'attributo `style` in linea, consulta [here](/react/docs/dom-differences-it-IT.html). |
|||
|
|||
## Entità HTML |
|||
|
|||
Puoi inserire entità HTML nel testo letterale in JSX: |
|||
|
|||
```javascript |
|||
<div>Primo · Secondo</div> |
|||
``` |
|||
|
|||
Se desideri visualizzare un'entità HTML all'interno di un contenuto dinamico, avrai problemi con il doppio escape, poiché React effettua in maniera predefinita l'escape di tutte le stringhe visualizzate per prevenire un'ampia gamma di attacchi XSS. |
|||
|
|||
```javascript |
|||
// Male: Mostra "Primo · Secondo" |
|||
<div>{'Primo · Secondo'}</div> |
|||
``` |
|||
|
|||
Esistono molte maniere di aggirare questo problema. La più facile è scrivere i caratteri Unicode direttamente in JavaScript. Dovrai assicurarti che il file sia salvato come UTF-8 e che le appropriate direttive UTF-8 siano impostate in modo che il browser li visualizzi correttamente. |
|||
|
|||
```javascript |
|||
<div>{'Primo · Secondo'}</div> |
|||
``` |
|||
|
|||
Un'alternativa più sicura consiste nel trovare il [codice Unicode corrispondente all'entità](http://www.fileformat.info/info/unicode/char/b7/index.htm) e usarlo all'interno di una stringa JavaScript. |
|||
|
|||
```javascript |
|||
<div>{'Primo \u00b7 Secondo'}</div> |
|||
<div>{'Primo ' + String.fromCharCode(183) + ' Secondo'}</div> |
|||
``` |
|||
|
|||
Puoi usare array misti con stringhe ed elementi JSX. |
|||
|
|||
```javascript |
|||
<div>{['Primo ', <span>·</span>, ' Secondo']}</div> |
|||
``` |
|||
|
|||
Come ultima risorsa, puoi sempre [inserire HTML nativo](/react/tips/dangerously-set-inner-html.html). |
|||
|
|||
```javascript |
|||
<div dangerouslySetInnerHTML={{'{{'}}__html: 'Primo · Secondo'}} /> |
|||
``` |
|||
|
|||
|
|||
## Attributi HTML Personalizzati |
|||
|
|||
Se passi proprietà che non esistono nella specifica HTML ad elementi HTML nativi, React li ignorerà. Se vuoi usare un attributo personalizzato, devi prefiggerlo con `data-`. |
|||
|
|||
```javascript |
|||
<div data-custom-attribute="foo" /> |
|||
``` |
|||
|
|||
Gli attributi per [l'Accessibilità del Web](http://www.w3.org/WAI/intro/aria) che iniziano per `aria-` saranno gestiti correttamente. |
|||
|
|||
```javascript |
|||
<div aria-hidden={true} /> |
|||
``` |
|||
@ -0,0 +1,84 @@ |
|||
--- |
|||
id: interactivity-and-dynamic-uis-it-IT |
|||
title: Interattività e UI Dinamiche |
|||
permalink: interactivity-and-dynamic-uis-it-IT.html |
|||
prev: jsx-gotchas-it-IT.html |
|||
next: multiple-components-it-IT.html |
|||
--- |
|||
|
|||
Hai già [imparato a mostrare dati](/react/docs/displaying-data-it-IT.html) con React. Adesso vediamo come rendere le nostre UI interattive. |
|||
|
|||
|
|||
## Un Esempio Semplice |
|||
|
|||
```javascript |
|||
var LikeButton = React.createClass({ |
|||
getInitialState: function() { |
|||
return {liked: false}; |
|||
}, |
|||
handleClick: function(event) { |
|||
this.setState({liked: !this.state.liked}); |
|||
}, |
|||
render: function() { |
|||
var text = this.state.liked ? 'mi piace' : 'non mi piace'; |
|||
return ( |
|||
<p onClick={this.handleClick}> |
|||
You {text} this. Click to toggle. |
|||
</p> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<LikeButton />, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
|
|||
## Gestione degli Eventi ed Eventi Sintetici |
|||
|
|||
Con React devi semplicemente passare il tuo gestore di eventi come una proprietà camelCased in modo simile a come faresti nel normale HTML. React si assicura che tutti gli eventi si comportano in maniera identica in IE8 e successivi implementando un sistema di eventi sintetici. Ovvero, React sa come propagare e catturare eventi secondo la specifica, e garantisce che gli eventi passati ai tuoi gestori di eventi siano consistenti con la [specifica W3C](http://www.w3.org/TR/DOM-Level-3-Events/), qualunque browser tu stia utilizzando. |
|||
|
|||
|
|||
## Dietro le Quinte: Binding Automatico e Delega degli Eventi |
|||
|
|||
Dietro le quinte, React esegue alcune operazioni per mantenere il tuo codice ad alte prestazioni e facile da comprendere. |
|||
|
|||
**Binding automatico:** Quando crei le callback in JavaScript, solitamente devi fare il binding esplicito del metodo alla sua istanza, in modo che il valore di `this` sia corretto. Con React, ogni metodo è automaticamente legato alla propria istanza del componente (eccetto quando si usa la sintassi delle classi ES6). React immagazzina il metodo legato in maniera tale da essere estremamente efficiente in termini di CPU e memoria. Ti permette anche di scrivere meno codice! |
|||
|
|||
**Delega degli eventi:** React non associa realmente i gestori di eventi ai nodi stessi. Quando React si avvia, comincia ad ascoltare tutti gli eventi a livello globale usando un singolo event listener. Quando un componente viene montato o smontato, i gestori di eventi sono semplicemente aggiunti o rimossi da un mapping interno. Quando si verifica un evento, React sa come inoltrarlo utilizzando questo mapping. Quando non ci sono più gestori di eventi rimasti nel mapping, i gestori di eventi di React sono semplici operazioni fittizie. Per saperne di più sul perché questo approccio è veloce, leggi [l'eccellente articolo sul blog di David Walsh](http://davidwalsh.name/event-delegate). |
|||
|
|||
|
|||
## I Componenti Sono Macchine a Stati Finiti |
|||
|
|||
React considera le UI come semplici macchine a stati finiti. Pensando alla UI come in uno di tanti stati diversi e visualizzando questi stati, è facile mantenere la UI consistente. |
|||
|
|||
In React, aggiorni semplicemente lo stato di un componente, e quindi visualizzi una nuova UI basata su questo nuovo stato. React si occupa di aggiornare il DOM al tuo posto nella maniera più efficiente. |
|||
|
|||
|
|||
## Come Funziona lo Stato |
|||
|
|||
Una maniera comune di informare React di un cambiamento nei dati è chiamare `setState(data, callback)`. Questo metodo effettua il merge di `data` in `this.state` e ridisegna il componente. Quando il componente ha terminato la fase di ri-rendering, la `callback` opzionale viene invocata. Nella maggior parte dei casi non avrai bisogno di fornire una `callback` dal momento che React si occuperà di mantenere la UI aggiornata per te. |
|||
|
|||
|
|||
## Quali Componenti Devono Avere uno Stato? |
|||
|
|||
La maggior parte dei tuoi componenti dovrebbero semplicemente ricevere dei dati da `props` e visualizzarli. Tuttavia, a volte hai bisogno di reagire all'input dell'utente, una richiesta al server o il trascorrere del tempo. In questi casi utilizzi lo stato. |
|||
|
|||
**Prova a mantenere il maggior numero possibile dei tuoi componenti privi di stato.** Facendo ciò, isolerai lo stato nel suo luogo logicamente corretto e minimizzerai la ridondanza, rendendo più semplice ragionare sulla tua applicazione. |
|||
|
|||
Un pattern comune è quello di creare diversi componenti privi di stato che mostrano semplicemente dati, e di avere un componente dotato di stato al di sopra di essi nella gerarchia, che passa il proprio stato ai suoi figli tramite le `props`. Il componente dotato di stato incapsula tutta la logica di interazione, mentre i componenti privi di stato si occupano della visualizzazione dei dati in maniera dichiarativa. |
|||
|
|||
|
|||
## Cosa *Dovrebbe* Contenere lo Stato? |
|||
|
|||
**Lo stato dovrebbe contenere dati che i gestori di eventi del componente possono modificare per scatenare un aggiornamento della UI.** In applicazioni reali, questi dati tendono ad essere molto limitati e serializzabili come JSON. Quando costruisci un componente dotato di stato, pensa alla minima rappresentazione possibile del suo stato, e conserva solo quelle proprietà in `this.state`. All'interno di `render()` calcola quindi ogni altra informazione necessaria basandoti sullo stato. Ti accorgerai che pensare e scrivere applicazioni in questo modo porta alla scrittura dell'applicazione più corretta, dal momento che aggiungere valori ridondanti o calcolati allo stato significherebbe doverli mantenere sincronizzati esplicitamente, anziché affidarti a React perché li calcoli al tuo posto. |
|||
|
|||
## Cosa *Non Dovrebbe* Contenere lo Stato? |
|||
|
|||
`this.state` dovrebbe contenere soltanto la quantità minima di dati indispensabile a rappresentare lo stato della tua UI. In quanto tale, non dovrebbe contenere: |
|||
|
|||
* **Dati calcolati:** Non preoccuparti di precalcolare valori basati sullo stato — è più semplice assicurarti che la tua UI sia consistente se effettui tutti i calcoli all'interno di `render()`. Per esempio, se lo stato contiene un array di elementi di una lista, e vuoi mostrare il numero di elementi come stringa, mostra semplicemente `this.state.listItems.length + ' elementi nella lista'` nel tuo metodo `render()` anziché conservarlo nello stato. |
|||
* **Componenti React:** Costruiscili in `render()` basandoti sulle proprietà e sullo stato del componente. |
|||
* **Dati duplicati dalle proprietà:** Prova ad utilizzare le proprietà come fonte di verità ove possibile. Un uso valido dello stato per i valori delle proprietà è conservarne il valore precedente quando le proprietà cambiano nel tempo. |
|||
@ -0,0 +1,190 @@ |
|||
--- |
|||
id: multiple-components-it-IT |
|||
title: Componenti Multipli |
|||
permalink: multiple-components-it-IT.html |
|||
prev: interactivity-and-dynamic-uis-it-IT.html |
|||
next: reusable-components-it-IT.html |
|||
--- |
|||
|
|||
Finora abbiamo visto come scrivere un singolo componente per mostrare dati e gestire l'input dell'itente. Adesso esaminiamo una delle migliori caratteristiche di React: la componibilità. |
|||
|
|||
|
|||
## Motivazione: Separazione dei Concetti |
|||
|
|||
Costruendo componenti modulari che riutilizzano altri componenti con interfacce ben definite, ottieni gli stessi benefici che otterresti usando funzioni o classi. Nello specifico, puoi *separare i diversi concetti* della tua applicazione nel modo che preferisci semplicemente costruendo nuovi componenti. Costruendo una libreria di componenti personalizzati per la tua applicazione, stai esprimendo la tua UI in una maniera che si adatta meglio al tuo dominio. |
|||
|
|||
|
|||
## Esepmio di Composizione |
|||
|
|||
Creiamo un semplice componente Avatar che mostra una foto del profilo e un nome utente usando la Graph API di Facebook. |
|||
|
|||
```javascript |
|||
var Avatar = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
<ProfilePic username={this.props.username} /> |
|||
<ProfileLink username={this.props.username} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
var ProfilePic = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<img src={'https://graph.facebook.com/' + this.props.username + '/picture'} /> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
var ProfileLink = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<a href={'https://www.facebook.com/' + this.props.username}> |
|||
{this.props.username} |
|||
</a> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<Avatar username="pwh" />, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
|
|||
## Possesso |
|||
|
|||
Nell'esempio precedente, le istanze di `Avatar` *posseggono* instanze di `ProfilePic` e `ProfileLink`. In React, **un proprietario è il componente che imposta le `props` di altri componenti**. Più formalmente, se un componente `X` è creato nel metodo `render()` del componente `Y`, si dice che `X` è *di proprietà di* `Y`. Come discusso in precedenza, un componente non può mutare le sue `props` — sono sempre consistenti con il valore che il suo proprietario ha impostato. Questa invariante fondamentale porta a UI la cui consistenza può essere garantita. |
|||
|
|||
È importante distinguere tra la relazione di proprietario-proprietà e la relazione genitore-figlio. La relazione proprietario-proprietà è specifica di React, mentre la relazione genitore-figlio è semplicemente quella che conosci e ami del DOM. Nell'esempio precedente, `Avatar` possiede il `div`, le istanze di `ProfilePic` e `ProfileLink`, e `div` è il **genitore** (ma non il proprietario) delle istanze di `ProfilePic` e `ProfileLink`. |
|||
|
|||
|
|||
## Figli |
|||
|
|||
Quando crei un'istanza di un componente React, puoi includere componenti React aggiuntivi o espressioni JavaScript tra i tag di apertura e chiusura come segue: |
|||
|
|||
```javascript |
|||
<Parent><Child /></Parent> |
|||
``` |
|||
|
|||
`Parent` può accedere ai propri figli leggendo la speciale proprietà `this.props.children`. **`this.props.children` è una struttura dati opaca:** usa le [utilità React.Children](/react/docs/top-level-api.html#react.children) per manipolare i figli. |
|||
|
|||
|
|||
### Riconciliazione dei Figli |
|||
|
|||
**La riconciliazione è il processo per il quale React aggiorna il DOM ad ogni passata di rendering.** In generale, i figli sono riconciliati secondo l'ordine in cui sono mostrati. Per esempio, supponiamo che due passate di rendering generino rispettivamente il markup seguente: |
|||
|
|||
```html |
|||
// Prima passata di rendering |
|||
<Card> |
|||
<p>Paragrafo 1</p> |
|||
<p>Paragrafo 2</p> |
|||
</Card> |
|||
// Seconda passata di rendering |
|||
<Card> |
|||
<p>Paragrafo 2</p> |
|||
</Card> |
|||
``` |
|||
|
|||
Intuitivamente, `<p>Paragrafo 1</p>` è stato rimosso. Invece, React riconcilierà il DOM cambiando il testo contenuto nel primo figlio e distruggerà l'ultimo figlio. React reconcilia secondo l'*ordine* dei figli. |
|||
|
|||
|
|||
### Figli Dotati di Stato |
|||
|
|||
Per molti componenti, questo non è un grande problema. Tuttavia, per i componenti dotati di stato che mantengono dati in `this.state` attraverso le diverse passate di rendering, questo può essere problematico. |
|||
|
|||
In molti casi, questo problema può essere aggirato nascondendo gli elementi anziché distruggendoli: |
|||
|
|||
```html |
|||
// Prima passata di rendering |
|||
<Card> |
|||
<p>Paragrafo 1</p> |
|||
<p>Paragrafo 2</p> |
|||
</Card> |
|||
// Seconda passata di rendering |
|||
<Card> |
|||
<p style={{'{{'}}display: 'none'}}>Paragrafo 1</p> |
|||
<p>Paragrafo 2</p> |
|||
</Card> |
|||
``` |
|||
|
|||
|
|||
### Figli Dinamici |
|||
|
|||
La situazione si complica quando i figli sono rimescolati (come nei risultati della ricerca) o se nuovi componenti sono aggiunti all'inizio della lista (come negli stream). In questi casi quando l'identità e lo stato di ogni figlio deve essere preservato attraverso passate di rendering, puoi unicamente identificare ciascun figlio assegnandogli una proprietà `key`: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
var results = this.props.results; |
|||
return ( |
|||
<ol> |
|||
{results.map(function(result) { |
|||
return <li key={result.id}>{result.text}</li>; |
|||
})} |
|||
</ol> |
|||
); |
|||
} |
|||
``` |
|||
|
|||
Quando React riconcilia i figli dotati di `key`, si assicurerà che ciascun figlio con la proprietà `key` sia riordinato (anziché clobbered) o distrutto (anziché riutilizzato). |
|||
|
|||
La proprietà `key` dovrebbe *sempre* essere fornita direttamente all'elemento del componente nell'array, non al contenitore HTML di ciascun componente dell'array: |
|||
|
|||
```javascript |
|||
// SBAGLIATO! |
|||
var ListItemWrapper = React.createClass({ |
|||
render: function() { |
|||
return <li key={this.props.data.id}>{this.props.data.text}</li>; |
|||
} |
|||
}); |
|||
var MyComponent = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<ul> |
|||
{this.props.results.map(function(result) { |
|||
return <ListItemWrapper data={result}/>; |
|||
})} |
|||
</ul> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
```javascript |
|||
// Corretto :) |
|||
var ListItemWrapper = React.createClass({ |
|||
render: function() { |
|||
return <li>{this.props.data.text}</li>; |
|||
} |
|||
}); |
|||
var MyComponent = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<ul> |
|||
{this.props.results.map(function(result) { |
|||
return <ListItemWrapper key={result.id} data={result}/>; |
|||
})} |
|||
</ul> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Puoi anche assegnare chiavi ai figli passandogli un oggetto ReactFragment. Leggi [Frammenti con Chiave](create-fragment.html) per maggiori dettagli. |
|||
|
|||
## Flusso dei Dati |
|||
|
|||
In React, i dati fluiscono dal proprietario al componente posseduto attraverso le `props` come discusso in precedenza. Questo è a tutti gli effetti un binding di dati unidirezionale: i proprietari legano le proprietà dei componenti di loro proprietà a dei valori che il proprietario stesso ha calcolato in base ai propri `props` o `state`. Dal momento che questo processo avviene ricorsivamente, i cambiamenti dei dati vengono riflessi automaticamente ovunque vengano usati. |
|||
|
|||
|
|||
## Una Nota sulle Prestazioni |
|||
|
|||
Ti starai chiedendo che cambiare i dati sia un'operazione costosa in presenza di un gran numero di nodi sotto un proprietario. La buona notizia è che JavaScript è veloce e i metodi `render()` tendono ad essere molto semplici, quindi in molte applicazioni questo è un processo estremamente veloce. Inoltre, il collo di bottiglia è quasi sempre la mutazione del DOM e non l'esecuzione di JS. React ottimizzerà tutto per te usando il raggruppamento e osservando i cambiamenti. |
|||
|
|||
Tuttavia, a volte vorrai avere un controllo più raffinato sulle tue prestazioni. In tal caso, ridefinisci il metodo `shouldComponentUpdate()` per restituire false quando vuoi che React salti il trattamento di un sottoalbero. Consulta [la documentazione di riferimento di React](/react/docs/component-specs.html) per maggiori informazioni. |
|||
|
|||
> Nota: |
|||
> |
|||
> Se `shouldComponentUpdate()` restituisce false quando i dati sono effettivamente cambiati, React non è in grado di mantenere la tua UI in sincronia. Assicurati di usare questa tecnica con cognizione di causa, e soltanto in presenza di problemi percettibili di prestazioni. Non sottovalutare l'estrema velocità di esecuzione di JavaScript se paragonata a quella del DOM. |
|||
@ -0,0 +1,263 @@ |
|||
--- |
|||
id: reusable-components-it-IT |
|||
title: Componenti Riutilizzabili |
|||
permalink: reusable-components-it-IT.html |
|||
prev: multiple-components-it-IT.html |
|||
next: transferring-props-it-IT.html |
|||
--- |
|||
|
|||
Quando disegni interfacce, separa gli elementi comuni di design (bottoni, campi dei moduli, componenti di layout, etc.) in componenti riutilizzabili con interfacce ben definite. In questo modo, la prossima volta che dovrai costruire una nuova UI, puoi scrivere molto meno codice. Ciò significa tempi di sviluppo più brevi, meno bachi, e meno byte trasferiti sulla rete. |
|||
|
|||
|
|||
## Validazione delle Proprietà |
|||
|
|||
Mentre la tua applicazione cresce, è utile assicurarsi che i tuoi componenti vengano usati correttamente. Ciò viene fatto permettendoti di specificare i `propTypes`. `React.PropTypes` esporta una gamma di validatori che possono essere usati per assicurarsi che i dati che ricevi siano validi. Quando ad una proprietà è assegnato un valore non valido, sarà mostrato un avvertimento nella console JavaScript. Nota che per motivi di prestazioni, `propTypes` è utilizzato soltanto nella modalità di sviluppo. Di seguito trovi un esempio che documenta i diversi validatori che vengono forniti: |
|||
|
|||
```javascript |
|||
React.createClass({ |
|||
propTypes: { |
|||
// Puoi dichiarare che una proprietà è uno specifico tipo primitivo JS. In |
|||
// maniera predefinita, questi sono tutti opzionali. |
|||
optionalArray: React.PropTypes.array, |
|||
optionalBool: React.PropTypes.bool, |
|||
optionalFunc: React.PropTypes.func, |
|||
optionalNumber: React.PropTypes.number, |
|||
optionalObject: React.PropTypes.object, |
|||
optionalString: React.PropTypes.string, |
|||
|
|||
// Tutto ciò che può essere mostrato: numeri, stringhe, elementi, o un array |
|||
// (o frammento) contenente questi tipi. |
|||
optionalNode: React.PropTypes.node, |
|||
|
|||
// Un elemento React. |
|||
optionalElement: React.PropTypes.element, |
|||
|
|||
// Puoi anche dichiarare che una proprietà è un'istanza di una classe. Questo |
|||
// validatore usa l'operatore instanceof di JS. |
|||
optionalMessage: React.PropTypes.instanceOf(Message), |
|||
|
|||
// Puoi assicurarti che la tua proprietà sia ristretta a valori specifici |
|||
// trattandoli come una enumerazione. |
|||
optionalEnum: React.PropTypes.oneOf(['News', 'Photos']), |
|||
|
|||
// Un oggetto che può essere di uno tra diversi tipi |
|||
optionalUnion: React.PropTypes.oneOfType([ |
|||
React.PropTypes.string, |
|||
React.PropTypes.number, |
|||
React.PropTypes.instanceOf(Message) |
|||
]), |
|||
|
|||
// Un array di un tipo specificato |
|||
optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number), |
|||
|
|||
// Un oggetto con proprietà dai valori di un tipo specificato |
|||
optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number), |
|||
|
|||
// Un oggetto che accetta una forma particolare |
|||
optionalObjectWithShape: React.PropTypes.shape({ |
|||
color: React.PropTypes.string, |
|||
fontSize: React.PropTypes.number |
|||
}), |
|||
|
|||
// Puoi concatenare ciascuna delle precedenti con `isRequired` per assicurarti |
|||
// che venga mostrato un avvertimento se la proprietà non viene impostata. |
|||
requiredFunc: React.PropTypes.func.isRequired, |
|||
|
|||
// Un valore di un tipo qualsiasi |
|||
requiredAny: React.PropTypes.any.isRequired, |
|||
|
|||
// Puoi inoltre specificare un validatore personalizzato. Deve restituire un |
|||
// oggetto di tipo Error se la validazione fallisce. Non lanciare eccezioni |
|||
// o utilizzare `console.warn`, in quanto non funzionerebbe all'interno di |
|||
// `oneOfType`. |
|||
customProp: function(props, propName, componentName) { |
|||
if (!/matchme/.test(props[propName])) { |
|||
return new Error('Validazione fallita!'); |
|||
} |
|||
} |
|||
}, |
|||
/* ... */ |
|||
}); |
|||
``` |
|||
|
|||
|
|||
## Valori Predefiniti delle Proprietà |
|||
|
|||
React ti permette di definire valori predefiniti per le tue `props` in una maniera molto dichiarativa: |
|||
|
|||
```javascript |
|||
var ComponentWithDefaultProps = React.createClass({ |
|||
getDefaultProps: function() { |
|||
return { |
|||
value: 'valore predefinito' |
|||
}; |
|||
} |
|||
/* ... */ |
|||
}); |
|||
``` |
|||
|
|||
Il risultato di `getDefaultProps()` sarà conservato e usato per assicurarsi che `this.props.value` avrà sempre un valore se non è stato specificato dal componente proprietario. Ciò ti permette di utilizzare in sicurezza le tue proprietà senza dover scrivere codice fragile e ripetitivo per gestirlo da te. |
|||
|
|||
|
|||
## Trasferire le Proprietà: Una Scorciatoia |
|||
|
|||
Un tipo comune di componente React è uno che estende un elemento basico HTML in maniera semplice. Spesso vorrai copiare qualsiasi attributo HTML passato al tuo componente all'elemento HTML sottostante per risparmiare del codice. Puoi usare la sintassi _spread_ di JSX per ottenerlo: |
|||
|
|||
```javascript |
|||
var CheckLink = React.createClass({ |
|||
render: function() { |
|||
// Questo prende ciascuna proprietà passata a CheckLink e la copia su <a> |
|||
return <a {...this.props}>{'√ '}{this.props.children}</a>; |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<CheckLink href="/checked.html"> |
|||
Clicca qui! |
|||
</CheckLink>, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
## Figlio Singolo |
|||
|
|||
Con `React.PropTypes.element` puoi specificare che solo un figlio unico possa essere passato come figli ad un componente. |
|||
|
|||
```javascript |
|||
var MyComponent = React.createClass({ |
|||
propTypes: { |
|||
children: React.PropTypes.element.isRequired |
|||
}, |
|||
|
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
{this.props.children} // Questo deve essere esattamente un elemento oppure lancerà un'eccezione. |
|||
</div> |
|||
); |
|||
} |
|||
|
|||
}); |
|||
``` |
|||
|
|||
## Mixin |
|||
|
|||
I componenti sono la maniera migliore di riutilizzare il codice in React, ma a volte componenti molto diversi possono condividere funzionalità comune. Questi sono a volte chiamate [responsabilità trasversali](https://en.wikipedia.org/wiki/Cross-cutting_concern). React fornisce i `mixin` per risolvere questo problema. |
|||
|
|||
Un caso d'uso comune è un componente che desidera aggiornarsi ad intervalli di tempo. È facile usare `setInterval()`, ma è anche importante cancellare la chiamata ripetuta quando non è più necessaria per liberare memoria. React fornisce dei [metodi del ciclo di vita](/react/docs/working-with-the-browser.html#component-lifecycle) che ti permettono di sapere quando un componente sta per essere creato o distrutto. Creiamo un semplice mixin che usa questi metodi per fornire una facile funzione `setInterval()` che sarà automaticamente rimossa quando il tuo componente viene distrutto. |
|||
|
|||
```javascript |
|||
var SetIntervalMixin = { |
|||
componentWillMount: function() { |
|||
this.intervals = []; |
|||
}, |
|||
setInterval: function() { |
|||
this.intervals.push(setInterval.apply(null, arguments)); |
|||
}, |
|||
componentWillUnmount: function() { |
|||
this.intervals.forEach(clearInterval); |
|||
} |
|||
}; |
|||
|
|||
var TickTock = React.createClass({ |
|||
mixins: [SetIntervalMixin], // Usa il mixin |
|||
getInitialState: function() { |
|||
return {seconds: 0}; |
|||
}, |
|||
componentDidMount: function() { |
|||
this.setInterval(this.tick, 1000); // Chiama un metodo del mixin |
|||
}, |
|||
tick: function() { |
|||
this.setState({seconds: this.state.seconds + 1}); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<p> |
|||
React has been running for {this.state.seconds} seconds. |
|||
</p> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<TickTock />, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
Una caratteristica interessante dei mixin è che, se un componente usa molteplici mixin e diversi mixin definiscono lo stesso metodo del ciclo di vita (cioè diversi mixin desiderano effettuare una pulizia quando il componente viene distrutto), viene garantito che tutti i metodi del ciclo di vita verranno chiamati. I metodi definiti nei mixin vengono eseguiti nell'ordine in cui i mixin sono elencati, seguiti da una chiamata al metodo definito nel componente. |
|||
|
|||
## Classi ES6 |
|||
|
|||
Puoi anche definire le tue classi React come pure classi JavaScript. Per esempio, usando la sintassi delle classi ES6: |
|||
|
|||
```javascript |
|||
class HelloMessage extends React.Component { |
|||
render() { |
|||
return <div>Ciao {this.props.name}</div>; |
|||
} |
|||
} |
|||
React.render(<HelloMessage name="Sebastian" />, mountNode); |
|||
``` |
|||
|
|||
L'API è simile a `React.createClass` con l'eccezione del metodo `getInitialState`. Anziché fornire un metodo `getInitialState` a parte, imposti la tua proprietà `state` nel costruttore. |
|||
|
|||
Un'altra differenza è che `propTypes` e `defaultProps` sono definite come proprietà del costruttore anziché nel corpo della classe. |
|||
|
|||
```javascript |
|||
export class Counter extends React.Component { |
|||
constructor(props) { |
|||
super(props); |
|||
this.state = {count: props.initialCount}; |
|||
} |
|||
tick() { |
|||
this.setState({count: this.state.count + 1}); |
|||
} |
|||
render() { |
|||
return ( |
|||
<div onClick={this.tick.bind(this)}> |
|||
Click: {this.state.count} |
|||
</div> |
|||
); |
|||
} |
|||
} |
|||
Counter.propTypes = { initialCount: React.PropTypes.number }; |
|||
Counter.defaultProps = { initialCount: 0 }; |
|||
``` |
|||
|
|||
### Niente Binding Automatico |
|||
|
|||
I metodi seguono la stessa semantica delle classi ES6 regolari, ciò significa che non effettuano il binding automatico di `this` all'istanza. Dovrai pertanto usare esplicitamente `.bind(this)` oppure [le funzioni freccia](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`. |
|||
|
|||
### Niente Mixin |
|||
|
|||
Sfortunatamente, ES6 è stato lanciato senza alcun supporto per i mixin. Di conseguenza non vi è alcun supporto per i mixin quando usi React con le classi ES6. Stiamo lavorando per rendere più semplice il supporto dei relativi casi d'uso senza ricorrere ai mixin. |
|||
|
|||
|
|||
|
|||
## Funzioni Prive di Stato |
|||
|
|||
Puoi anche definire le tue classi React come semplici funzioni JavaScript. Ad esempio usando la sintassi della funzione priva di stato: |
|||
|
|||
```javascript |
|||
function HelloMessage(props) { |
|||
return <div>Ciao {props.name}</div>; |
|||
} |
|||
React.render(<HelloMessage name="Sebastian" />, mountNode); |
|||
``` |
|||
|
|||
Oppure usando la nuova sintassi freccia di ES6: |
|||
|
|||
```javascript |
|||
var HelloMessage = (props) => <div>Ciao {props.name}</div>; |
|||
React.render(<HelloMessage name="Sebastian" />, mountNode); |
|||
``` |
|||
|
|||
|
|||
Questa API semplificata dei componenti è intesa per i componenti che sono pure funzioni dele proprietà. Questi componenti non devono trattenere stato interno, non hanno istanze di supporto, e non posseggono metodi di ciclo di vita. Sono pure trasformate funzionali del loro input, con zero codice boilerplate. |
|||
|
|||
> NOTA: |
|||
> |
|||
> Poiché le funzioni prive di stato non hanno un'istanza di supporto, non puoi assegnare un ref a un componente creato con una funzione priva di stato. Normalmente questo non è un problema, poiché le funzioni prive di stato non forniscono un'API imperativa. Senza un'API imperativa, non puoi comunque fare molto con un'istanza. Tuttavia, se un utente desidera trovare il nodo DOM di un componente creato con una funzione priva di stato, occorre avvolgere il componente in un altro componente dotato di stato (ad es. un componente classe ES6) e assegnare il ref al componente dotato di stato. |
|||
|
|||
In un mondo ideale, la maggior parte dei tuoi componenti sarebbero funzioni prive di stato poiché questi componenti privi di stato seguono un percorso più rapido all'interno del core di React. Questo è un pattern raccomandato, quando possibile. |
|||
@ -0,0 +1,163 @@ |
|||
--- |
|||
id: transferring-props-it-IT |
|||
title: Trasferimento delle Proprietà |
|||
permalink: transferring-props-it-IT.html |
|||
prev: reusable-components-it-IT.html |
|||
next: forms-it-IT.html |
|||
--- |
|||
|
|||
Un pattern comune in React è l'uso di un'astrazione per esporre un componente. Il componente esterno espone una semplice proprietà per effettuare un'azione che può richiedere un'implementazione più complessa. |
|||
|
|||
Puoi usare gli [attributi spread di JSX](/react/docs/jsx-spread.html) per unire le vecchie props con valori aggiuntivi: |
|||
|
|||
```javascript |
|||
<Component {...this.props} more="values" /> |
|||
``` |
|||
|
|||
Se non usi JSX, puoi usare qualsiasi helper come l'API `Object.assign` di ES6, o il metodo `_.extend` di Underscore: |
|||
|
|||
```javascript |
|||
React.createElement(Component, Object.assign({}, this.props, { more: 'values' })); |
|||
``` |
|||
|
|||
Nel resto di questo tutorial vengono illustrate le best practices, usando JSX e sintassi sperimentale di ES7. |
|||
|
|||
## Trasferimento Manuale |
|||
|
|||
Nella maggior parte dei casi dovresti esplicitamente passare le proprietà. Ciò assicura che venga esposto soltanto un sottoinsieme dell'API interna, del cui funzionamento si è certi. |
|||
|
|||
```javascript |
|||
var FancyCheckbox = React.createClass({ |
|||
render: function() { |
|||
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked'; |
|||
return ( |
|||
<div className={fancyClass} onClick={this.props.onClick}> |
|||
{this.props.children} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
React.render( |
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}> |
|||
Ciao mondo! |
|||
</FancyCheckbox>, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
E se aggiungessimo una proprietà `name`? O una proprietà `title`? O `onMouseOver`? |
|||
|
|||
## Trasferire con `...` in JSX |
|||
|
|||
> NOTA: |
|||
> |
|||
> La sintassi `...` fa parte della proposta Object Rest Spread. Questa proposta è in processo di diventare uno standard. Consulta la sezione [Proprietà Rest e Spread ...](/react/docs/transferring-props.html#rest-and-spread-properties-...) di seguito per maggiori dettagli. |
|||
|
|||
A volte passare manualmente ciascuna proprietà può essere noioso e fragile. In quei casi puoi usare l'[assegnamento destrutturante](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) con le proprietà residue per estrarre un insieme di proprietà sconosciute. |
|||
|
|||
Elenca tutte le proprietà che desideri consumare, seguite da `...other`. |
|||
|
|||
```javascript |
|||
var { checked, ...other } = this.props; |
|||
``` |
|||
|
|||
Ciò assicura che vengano passate tutte le proprietà TRANNE quelle che stai consumando tu stesso. |
|||
|
|||
```javascript |
|||
var FancyCheckbox = React.createClass({ |
|||
render: function() { |
|||
var { checked, ...other } = this.props; |
|||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; |
|||
// `other` contiene { onClick: console.log } ma non la proprietà checked |
|||
return ( |
|||
<div {...other} className={fancyClass} /> |
|||
); |
|||
} |
|||
}); |
|||
React.render( |
|||
<FancyCheckbox checked={true} onClick={console.log.bind(console)}> |
|||
Ciao mondo! |
|||
</FancyCheckbox>, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
> NOTA: |
|||
> |
|||
> Nell'esempio precedente, la proprietà `checked` è anche un attributo DOM valido. Se non utilizzassi la destrutturazione in questo modo, potresti inavvertitamente assegnarlo al `div`. |
|||
|
|||
Usa sempre il pattern di destrutturazione quando trasferisci altre proprietà sconosciute in `other`. |
|||
|
|||
```javascript |
|||
var FancyCheckbox = React.createClass({ |
|||
render: function() { |
|||
var fancyClass = this.props.checked ? 'FancyChecked' : 'FancyUnchecked'; |
|||
// ANTI-PATTERN: `checked` sarebbe passato al componente interno |
|||
return ( |
|||
<div {...this.props} className={fancyClass} /> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
## Consumare e Trasferire la Stessa Proprietà |
|||
|
|||
Se il tuo componente desidera consumare una proprietà, ma anche passarla ad altri, puoi passarla esplicitamente mediante `checked={checked}`. Questo è preferibile a passare l'intero oggetto `this.props` dal momento che è più facile effettuarne il linting e il refactoring. |
|||
|
|||
```javascript |
|||
var FancyCheckbox = React.createClass({ |
|||
render: function() { |
|||
var { checked, title, ...other } = this.props; |
|||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; |
|||
var fancyTitle = checked ? 'X ' + title : 'O ' + title; |
|||
return ( |
|||
<label> |
|||
<input {...other} |
|||
checked={checked} |
|||
className={fancyClass} |
|||
type="checkbox" |
|||
/> |
|||
{fancyTitle} |
|||
</label> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
> NOTA: |
|||
> |
|||
> L'ordine è importante. Mettendo il `{...other}` prima delle tue proprietà JSX ti assicuri che il consumatore del tuo componente non possa ridefinirle. Nell'esempio precedente, abbiamo garantito che l'elemento input sarà del tipo `"checkbox"`. |
|||
|
|||
## Proprietà Rest e Spread `...` |
|||
|
|||
Le proprietà Rest ti permettono di estrarre le proprietà residue di un oggetto in un nuovo oggetto. Vengono escluse tutte le altre proprietà elencate nel pattern di destrutturazione. |
|||
|
|||
Questa è un'implementazione sperimentale di una [proposta ES7](https://github.com/sebmarkbage/ecmascript-rest-spread). |
|||
|
|||
```javascript |
|||
var { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }; |
|||
x; // 1 |
|||
y; // 2 |
|||
z; // { a: 3, b: 4 } |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> Questa proposta ha raggiunto lo stadio 2 ed è attivata in modo predefinito in Babel. Vecchie versioni di Babel potrebbero richiedere l'abilitazione esplicita di questa trasformazione con `babel --optional es7.objectRestSpread` |
|||
|
|||
## Trasferire con Underscore |
|||
|
|||
Se non usi JSX, puoi usare una libreria per ottenere il medesimo pattern. Underscore supporta `_.omit` per omettere delle proprietà ed `_.extend` per copiare le proprietà in un nuovo oggetto. |
|||
|
|||
```javascript |
|||
var FancyCheckbox = React.createClass({ |
|||
render: function() { |
|||
var checked = this.props.checked; |
|||
var other = _.omit(this.props, 'checked'); |
|||
var fancyClass = checked ? 'FancyChecked' : 'FancyUnchecked'; |
|||
return ( |
|||
React.DOM.div(_.extend({}, other, { className: fancyClass })) |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
@ -0,0 +1,165 @@ |
|||
--- |
|||
id: forms-it-IT |
|||
title: Moduli |
|||
permalink: forms-it-IT.html |
|||
prev: transferring-props-it-IT.html |
|||
next: working-with-the-browser-it-IT.html |
|||
--- |
|||
|
|||
I componenti dei moduli come `<input>`, `<textarea>` e `<option>` differiscono dagli altri componenti nativi poiché possono essere alterati tramite interazione dell'utente. Questi componenti forniscono interfacce che rendono più semplice gestire i moduli in risposta all'interazione dell'utente. |
|||
|
|||
Per maggiori informazioni sugli eventi dell'elemento `<form>` consulta [Eventi dei Moduli](/react/docs/events.html#form-events). |
|||
|
|||
## Proprietà Interattive |
|||
|
|||
I componenti dei moduli supportano un numero di proprietà che vengono modificate dall'interazione dell'utente: |
|||
|
|||
* `value`, supportato dai elementi `<input>` e `<textarea>`. |
|||
* `checked`, supportato dagli elementi `<input>` dal tipo `checkbox` o `radio`. |
|||
* `selected`, supportato dagli elementi `<option>`. |
|||
|
|||
In HTML, in valore di `<textarea>` è impostato tramite un nodo di testo figlio. In React, devi invece usare la proprietà `value`. |
|||
|
|||
I componenti dei moduli ti permettono di reagire ai cambiamenti impostando una callback come proprietà `onChange`. La proprietà `onChange` funziona in tutti i browser e viene scatenata in risposta all'interazione dell'utente quando: |
|||
|
|||
* Il `value` di `<input>` o `<textarea>` cambia. |
|||
* Lo stato `checked` di `<input>` cambia. |
|||
* Lo stato `selected` di `<option>` cambia. |
|||
|
|||
Come tutti gli eventi DOM, la proprietà `onChange` è supportata su tutti i componenti nativi e può essere usata per gestire la propagazione di eventi di cambiamento. |
|||
|
|||
> Nota: |
|||
> |
|||
> Per `<input>` e `<textarea>`, `onChange` rimpiazza — e dovrebbe generalmente essere utilizzata in sostituzione — il gestore di eventi [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) nativo del DOM. |
|||
|
|||
|
|||
## Componenti Controllati |
|||
|
|||
Un `<input>` il cui `value` è impostato è un componente *controllato*. In un `<input>` controllato, il valore dell'elemento visualizzato si riflette sempre nella sua proprietà `value`. Ad esempio: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
return <input type="text" value="Ciao!" />; |
|||
} |
|||
``` |
|||
|
|||
Ciò visualizzerà un input che ha sempre il valore di `value` impostato a `Ciao!`. Ciascuna immissione dell'utente non avrà effetto sull'elemento visualizzato poiché React ha dichiarato il suo `value` pari a `Ciao!`. Se volessi aggiornare il `value` in risposta all'input dell'utente, puoi usare l'evento `onChange`: |
|||
|
|||
```javascript |
|||
getInitialState: function() { |
|||
return {value: 'Ciao!'}; |
|||
}, |
|||
handleChange: function(event) { |
|||
this.setState({value: event.target.value}); |
|||
}, |
|||
render: function() { |
|||
var value = this.state.value; |
|||
return <input type="text" value={value} onChange={this.handleChange} />; |
|||
} |
|||
``` |
|||
|
|||
In questo esempio, stiamo semplicemente accettando il valore più recente fornito dall'utente e aggiornando la proprietà `value` del componente `<input>`. Questo pattern semplifica l'implementazione di interfacce che rispondono o validano l'interazione dell'utente. Ad esempio: |
|||
|
|||
```javascript |
|||
handleChange: function(event) { |
|||
this.setState({value: event.target.value.substr(0, 140)}); |
|||
} |
|||
``` |
|||
|
|||
Così si può accettare l'input dell'utente ma ne tronca il valore ai primi 140 caratteri. |
|||
|
|||
### Potenziali Problemi con Checkbox e Radio Button |
|||
|
|||
Fai attenzione che, allo scopo di normalizzare la gestione del cambiamento degli elementi checkbox e radio button, React usa un evento `click` al posto di un evento `change`. Nella maggior parte dei casi questo funziona nel modo previsto, tranne quando viene usato `preventDefault` in un gestore dell'evento `change`. `preventDefault` impedisce al browser di aggiornare visualmente l'input, anche se `checked` cambia il suo valore. Questo può essere evitato rimuovendo la chiamata a `preventDefault`, oppure effettuando il cambio del valore di `checked` tramite `setTimeout`. |
|||
|
|||
|
|||
## Componenti Non Controllati |
|||
|
|||
Un `<input>` che non fornisce un `value` (o lo imposta a `null`) è un componente *non controllato*. In un `<input>` non controllato, il valore dell'elemento visualizzato rifletterà l'input dell'utente. Ad esempio: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
return <input type="text" />; |
|||
} |
|||
``` |
|||
|
|||
Questo visualizzerà un campo di input il cui valore iniziale è vuoto. Ciascun input dell'utente si rifletterà immediatamente nell'elemento visualizzato. Se desideri reagire ai cambiamenti del valore, puoi usare il gestore di eventi `onChange` proprio come con i componenti controllati. |
|||
|
|||
### Valore Predefinito |
|||
|
|||
Se desideri inizializzare il componente con un valore non vuoto, puoi fornire una proprietà `defaultValue`. Ad esempio: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
return <input type="text" defaultValue="Ciao!" />; |
|||
} |
|||
``` |
|||
|
|||
Questo esempio funzionerà in maniera simile all'esempio precedente sui **Componenti Controllati**. |
|||
|
|||
Similmente, `<input>` supporta `defaultChecked` e `<select>` supporta `defaultValue`. |
|||
|
|||
> Nota: |
|||
> |
|||
> Le proprietà `defaultValue` e `defaultChecked` sono usate soltanto durante il rendering iniziale. Se devi aggiornare il valore in un rendering successivo, dovrai usare un [componente controllato](#controlled-components). |
|||
|
|||
|
|||
## Argomenti Avanzati |
|||
|
|||
|
|||
### Perché Componenti Controllati? |
|||
|
|||
Usare componenti di moduli come `<input>` in React presenta una difficoltà aggiuntiva, assente quando si scrive un modulo tradizionale in HTML. Ad esempio, in HTML: |
|||
|
|||
```html |
|||
<input type="text" name="title" value="Senza titolo" /> |
|||
``` |
|||
|
|||
Questo visualizza un campo di input *inizializzato* con il valore `Senza titolo`. Quando l'utente modifica il campo, la *proprietà* `value` del nodo cambierà. Tuttavia, `node.getAttribute('value')` restituirà ancora il valore usato durante l'inizializzazione, `Senza titolo`. |
|||
|
|||
Diversamente dall'HTML, i componenti React devono rappresentare lo stato della vista in ciascun momento e non soltanto durante l'inizializzazione. Ad esempio, in React: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
return <input type="text" name="title" value="Senza titolo" />; |
|||
} |
|||
``` |
|||
|
|||
Dal momento che questo metodo descrive la vista in ogni momento, il valore del campo di testo deve *sempre* essere `Senza titolo`. |
|||
|
|||
|
|||
### Perché il Valore della Textarea? |
|||
|
|||
In HTML, il valore di `<textarea>` è solitamente impostato usando un nodo di testo figlio: |
|||
|
|||
```html |
|||
<!-- antipattern: NON FARLO! --> |
|||
<textarea name="description">Questa è la descrizione.</textarea> |
|||
``` |
|||
|
|||
Per l'HTML, questo approccio permette agli sviluppatori di fornire facilmente valori su più righe. Tuttavia, dal momento che React è JavaScript, non abbiamo limitazioni sulle stringhe e possiamo usare `\n` se desideriamo andare a capo. In un mondo in cui abbiamo `value` e `defaultValue`, il ruolo giocato dal nodo figlio è ambiguo. Per questa ragione, non dovresti utilizzare il nodo figlio quando imposti il valore delle `<textarea>`: |
|||
|
|||
```javascript |
|||
<textarea name="description" value="Questa è la descrizione." /> |
|||
``` |
|||
|
|||
Se tuttavia decidi di *usare* il nodo di testo figlio, questo si comporterà come `defaultValue`. |
|||
|
|||
|
|||
### Perché il Value di Select? |
|||
|
|||
L'elemento `<option>` selezionato in un elemento HTML `<select>` è normalmente specificato attraverso l'attributo `selected` dell'opzione stessa. In React, allo scopo di rendere i componenti più semplici da manipolare, viene invece adottato il formato seguente: |
|||
|
|||
```javascript |
|||
<select value="B"> |
|||
<option value="A">Arancia</option> |
|||
<option value="B">Banana</option> |
|||
<option value="C">Ciliegia</option> |
|||
</select> |
|||
``` |
|||
|
|||
Per creare un componente non controllato, viene invece usato `defaultValue`. |
|||
|
|||
> Nota: |
|||
> |
|||
> Puoi passare un array come valore dell'attributo `value`, se desideri selezionare più opzioni in un tag `select` a scelta multipla: `<select multiple={true} value={['B', 'C']}>`. |
|||
@ -0,0 +1,109 @@ |
|||
--- |
|||
id: working-with-the-browser-it-IT |
|||
title: Lavorare con il Browser |
|||
permalink: working-with-the-browser-it-IT.html |
|||
prev: forms-it-IT.html |
|||
next: more-about-refs-it-IT.html |
|||
--- |
|||
|
|||
React offre potenti astrazioni che ti liberano in molti casi dal compito di manipolare direttamente il DOM, ma a volte potresti avere bisogno di accedere alle API sottostanti, ad esempio per lavorare con una libreria di terze parti o altro codice preesistente. |
|||
|
|||
|
|||
## Il DOM Virtuale |
|||
|
|||
React è così veloce perché non interagisce direttamente con il DOM. React gestisce una rappresentazione veloce del DOM in memoria. I metodi `render()` restituiscono una *descrizione* del DOM, e React può confrontare questa descrizione con la rappresentazione in memoria per calcolare la maniera più veloce di aggiornare il browser. |
|||
|
|||
In aggiunta, React implementa un intero sistema di eventi sintetici che fa in modo che tutti gli oggetti evento siano conformi alle specifiche W3C nonostante le incompatibilità dei browser, e ciascun evento si propaga in maniera consistente ed efficiente in ogni browser. Puoi anche utilizzare alcuni eventi HTML5 in IE8! |
|||
|
|||
Nella maggior parte dei casi è sufficiente rimanere nel mondo del "browser fittizio" di React poiché più efficiente e facile da concepire. Tuttavia, a volte potresti aver bisogno di accedere alle API sottostanti, ad esempio per lavorare con una libreria di terze parti come un plugin jQuery. React fornisce convenienti vie di fuga perché tu possa utilizzare direttamente le API DOM sottostanti. |
|||
|
|||
|
|||
## I Ref e findDOMNode() |
|||
|
|||
Per interagire con il browser, avrai bisogno di un riferimento a un nodo DOM. Puoi assegnare un attributo `ref` a ciascun elemento, ciò ti permette di fare riferimento all'**istanza di supporto** del componente. Questo è utile se devi invocare funzioni imperative sul componente, oppure desideri accedere ai nodi DOM sottostanti. Per saperne di piu sui ref, incluso la maniera di usarli con efficacia, leggi la nostra documentazione [riferimenti a componenti](/react/docs/more-about-refs-it-IT.html). |
|||
|
|||
|
|||
## Ciclo di Vita del Componente |
|||
|
|||
I componenti hanno tree fasi principali del ciclo di vita: |
|||
|
|||
* **Montaggio:** Un componente sta venendo inserito nel DOM. |
|||
* **Aggiornamento:** Viene effettuato nuovamente il rendering del componente per determinare se il DOM vada aggiornato. |
|||
* **Smontaggio:** Un componente sta venendo rimosso dal DOM. |
|||
|
|||
React offre metodi del ciclo di vita che puoi specificare per inserirti in questo processo. Offriamo dei metodi il cui nome inizia per **will**, chiamati immediatamente prima che qualcosa accada, o per **did** che sono chiamati immediatamente dopo che qualcosa è accaduto. |
|||
|
|||
|
|||
### Montaggio |
|||
|
|||
* `getInitialState(): object` è invocato prima che un componente viene montato. Componenti dotati di stato dovrebbero implementare questo metodo e restituire lo stato iniziale. |
|||
* `componentWillMount()` è invocato immediatamente prima che si effettui il montaggio. |
|||
* `componentDidMount()` è invocato immediatamente dopo che il montaggio è avvenuto. L'inizializzazione che richiede l'esistenza di nodi DOM dovrebbe avvenire in questo metodo. |
|||
|
|||
|
|||
### Aggiornamento |
|||
|
|||
* `componentWillReceiveProps(object nextProps)` è invocato quando un componente montato riceve nuove proprietà. Questo metodo dovrebbe essere utilizzato per confrontare `this.props` e `nextProps` per effettuare transizioni di stato utilizzando `this.setState()`. |
|||
* `shouldComponentUpdate(object nextProps, object nextState): boolean` è invocato quando un componente decide se i cambiamenti debbano risultare in un aggiornamento del DOM. Implementa questo metodo come un'ottimizzazione per confrontare `this.props` con `nextProps` e `this.state` con `nextState`, e restituisci `false` se React debba rimandare l'aggiornamento. |
|||
* `componentWillUpdate(object nextProps, object nextState)` è invocato immediatamente prima che l'aggiornamento avvenga. Non puoi chiamare `this.setState()` al suo interno. |
|||
* `componentDidUpdate(object prevProps, object prevState)` è invocato immediatamente dopo che l'aggiornamento è avvenuto. |
|||
|
|||
|
|||
### Smontaggio |
|||
|
|||
* `componentWillUnmount()` è invocato immediatamente prima che un componente venga smontato e distrutto. Puoi effettuare operazioni di pulizia al suo interno. |
|||
|
|||
|
|||
### Metodi Montati |
|||
|
|||
Componenti compositi _montati_ supportano anche i seguenti metodi: |
|||
|
|||
* `findDOMNode(): DOMElement` può essere invocato su ciascun componente montato per ottenere un riferimento al suo nodo DOM. |
|||
* `forceUpdate()` può essere invocato su ciascun componente montato quando si è certi che un aspetto interno del componente è cambiato senza usare `this.setState()`. |
|||
|
|||
|
|||
## Supporto per i Browser e Polyfill |
|||
|
|||
A Facebook supportiamo vecchi browser, incluso IE8. Abbiamo impiegato per un lungo tempo i polyfill per consentirci di scrivere JS con un occhio al futuro. Ciò significa che non abbiamo una quantità di hack sparsi nel nostro codice e possiamo tuttavia aspettarci che il nostro codice "semplicemente funzioni". Ad esempio, anziché usare `+new Date()`, possiamo scrivere `Date.now()`. Dal momento che la versione open source di React è la stessa che usiamo internamente, vi abbiamo applicato la stessa filosofia di scrivere JS guardando avanti. |
|||
|
|||
In aggiunta a questa filosofia, abbiamo anche deciso, in qualità di autori di una libreria JS, non dovremmo fornire i polyfill assieme alla nostra libreria. Se ciascuna libreria facesse ciò, con buona probabilità invieresti lo stesso polyfill diverse volte, cosa che potrebbe risultare in una rilevante quantità di codice inutilizzato. Se il tuo prodotto deve supportare vecchi browser, con buona probabilità stai già usando qualcosa come [es5-shim](https://github.com/es-shims/es5-shim). |
|||
|
|||
|
|||
### Polyfill Richiesti per Supportare Vecchi Browser |
|||
|
|||
`es5-shim.js` tratto da [es5-shim di kriskowal](https://github.com/es-shims/es5-shim) fornisce le seguenti API indispensabili a React: |
|||
|
|||
* `Array.isArray` |
|||
* `Array.prototype.every` |
|||
* `Array.prototype.forEach` |
|||
* `Array.prototype.indexOf` |
|||
* `Array.prototype.map` |
|||
* `Date.now` |
|||
* `Function.prototype.bind` |
|||
* `Object.keys` |
|||
* `String.prototype.split` |
|||
* `String.prototype.trim` |
|||
|
|||
`es5-sham.js`, anch'esso tratto da [es5-shim di kriskowal](https://github.com/es-shims/es5-shim), provides the following that React needs: |
|||
|
|||
* `Object.create` |
|||
* `Object.freeze` |
|||
|
|||
La build non minificata di React richiede le seguenti API tratte da [console-polyfill di paulmillr](https://github.com/paulmillr/console-polyfill). |
|||
|
|||
* `console.*` |
|||
|
|||
Quando si usano elementi HTML5 in IE8 incluso `<section>`, `<article>`, `<nav>`, `<header>` e `<footer>`, è inoltre necessario includere [html5shiv](https://github.com/aFarkas/html5shiv) o uno script equivalente. |
|||
|
|||
|
|||
### Problemi Cross-browser |
|||
|
|||
Nonostante React sia molto buono ad astrarre le differenze tra browser, alcuni browser sono limitati o presentano comportamenti scorretti per i quali non abbiamo potuto trovare un rimedio. |
|||
|
|||
|
|||
#### Evento onScroll su IE8 |
|||
|
|||
Su IE8 l'evento `onScroll` non viene propagato, e IE8 non possiede una API per definire gestori di eventi nella fase di cattura dell'evento, con il risultato che React non ha alcun modo di reagire a questi eventi. |
|||
Al momento i gestori di questo evento vengono ignorati su IE8. |
|||
|
|||
Leggi la issue [onScroll doesn't work in IE8](https://github.com/facebook/react/issues/631) su GitHub per maggiori informazioni. |
|||
@ -0,0 +1,141 @@ |
|||
--- |
|||
id: more-about-refs-it-IT |
|||
title: Riferimenti ai Componenti |
|||
permalink: more-about-refs-it-IT.html |
|||
prev: working-with-the-browser-it-IT.html |
|||
next: tooling-integration-it-IT.html |
|||
--- |
|||
Dopo aver costruito il tuo componente, potresti trovarti nella situazione di volere invocare dei metodi sulle istanze di componenti restituite da `render()`. Nella maggior parte dei casi, questo non è necessario poiché il flusso di dati reattivo assicura sempre che le proprietà più recenti siano assegnate a ciascun figlio prodotto da `render()`. Tuttavia, esistono dei casi in cui potrebbe essere necessario o desiderabile, quindi React fornisce una via d'uscita conosciuta come `refs`. Queste `refs` (riferimenti) sono particolarmente utili quando vuoi: trovare il markup DOM prodotto da un componente (ad esempio, per posizionarlo in modo assoluto), usare componenti React in una più ampia applicazione non-React, oppure effettuare la transizione del tuo codice a React. |
|||
|
|||
Vediamo come ottenere un ref, e quindi passiamo ad un esempio completo. |
|||
|
|||
## Il ref restituito da React.render |
|||
|
|||
Da non confondersi con il metodo `render()` che definisci sul tuo componente (il quale restituisce un elemento DOM virtuale), [React.render()](/react/docs/top-level-api-it-IT.html#react.render) restituisce un riferimento all'**istanza di supporto** del tuo componente (o `null` per i [componenti privi di stato](/react/docs/reusable-components.html#stateless-functions)). |
|||
|
|||
|
|||
```js |
|||
var myComponent = React.render(<MyComponent />, myContainer); |
|||
``` |
|||
|
|||
Tieni a mente, tuttavia, che JSX non restituisce un'istanza di un componente! È solo un **ReactElement**: una rappresentazione leggera che istruisce React su come il componente montato debba apparire. |
|||
|
|||
```js |
|||
var myComponentElement = <MyComponent />; // Questo è un semplice ReactElement. |
|||
|
|||
// Qui va del codice... |
|||
|
|||
var myComponentInstance = React.render(myComponentElement, myContainer); |
|||
myComponentInstance.doSomething(); |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> Questo deve essere usato soltanto al livello più alto. All'interno dei componenti, lascia che i tuoi `props` e `state` gestiscano la comunicazione con i componenti figli, oppure utilizza uno degli altri metodi per ottenere un ref (attributo stringa o callback). |
|||
|
|||
|
|||
## L'Attributo ref Come Callback |
|||
|
|||
React supporta un attributo speciale che puoi assegnare a qualsiasi componente. L'attributo `ref` può essere una funzione callback, che sarà eseguita immediatamente dopo che il componente viene montato. Il componente referenziato sarà passato come parametro, e la funzione callback può utilizzare il componente immediatamente, oppure conservarne un riferimento per un uso successivo, o entrambe. |
|||
|
|||
È semplice come aggiungere un attributo `ref` a qualsiasi cosa restituita da `render` usando una funzione freccia di ES6: |
|||
|
|||
```js |
|||
render: function() { |
|||
return ( |
|||
<TextInput |
|||
ref={function(input) { |
|||
if (input != null) { |
|||
input.focus(); |
|||
} |
|||
}} /> |
|||
); |
|||
}, |
|||
``` |
|||
|
|||
oppure usando una funzione freccia ES6: |
|||
|
|||
```js |
|||
render: function() { |
|||
return <TextInput ref={(c) => this._input = c} />; |
|||
}, |
|||
componentDidMount: function() { |
|||
this._input.focus(); |
|||
}, |
|||
``` |
|||
|
|||
Nota che quando il componente referenziato viene smontato e quando il valore di ref cambia, ref sarà chiamata con `null` come argomento. Ciò impedisce i memory leak nel caso in cui l'istanza venga conservata, come nel primo esempio. Nota che quando assegni il valore di ref a un'espressione di funzione in linea come negli esempi precedenti, React vede un oggetto funzione diverso ogni volta e pertanto in occasione di ciascun aggiornamento, ref verrà chiamata con `null` immediatamente prima di essere chiamata con l'istanza del componente. |
|||
|
|||
Puoi accedere al nodo DOM del componente direttamente chiamando `React.findDOMNode(argomentoDellaTuaCallback)`. |
|||
|
|||
|
|||
## L'Attributo ref Come Stringa |
|||
|
|||
React supporta anche l'uso di una stringa (anziché una callback) come proprietà ref su qualsiasi componente, sebbene allo stato attuale questo approccio sia quasi esclusivamente superato. |
|||
|
|||
1. Assegna un attributo `ref` a qualsiasi cosa restituita da `render` come: |
|||
|
|||
```html |
|||
<input ref="myInput" /> |
|||
``` |
|||
|
|||
2. Altrove nel codice (tipicamente in un gestore di eventi), accedi all'**istanza di supporto** tramite `this.refs` come segue: |
|||
|
|||
```javascript |
|||
this.refs.myInput |
|||
``` |
|||
|
|||
Puoi accedere direttamente al nodo DOM del componente chiamando `React.findDOMNode(this.refs.myInput)`. |
|||
|
|||
|
|||
## Un Esempio Completo |
|||
Per ottenere un riferimento a un componente React, puoi usare `this` per ottenere il componente React attuale, oppure usare un ref per ottenere un riferimento a un componente di tua proprietà. Il funzionamento è il seguente: |
|||
|
|||
```javascript |
|||
var MyComponent = React.createClass({ |
|||
handleClick: function() { |
|||
// Assegna il focus esplicitamente al campo di testo usando l'API DOM nativa. |
|||
this.myTextInput.focus(); |
|||
}, |
|||
render: function() { |
|||
// L'attributo ref aggiunge un riferimento al componente a this.refs quando |
|||
// il componente viene montato |
|||
return ( |
|||
<div> |
|||
<input type="text" ref={(ref) => this.myTextInput = ref} /> |
|||
<input |
|||
type="button" |
|||
value="Assegna il focus al campo di testo" |
|||
onClick={this.handleClick} |
|||
/> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<MyComponent />, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
In questo esempio, otteniamo un riferimento all'**istanza di supporto** del campo di testo e vi invochiamo il metodo `focus()` quando il bottone viene cliccato. |
|||
|
|||
Per componenti compositi, il riferimento si riferisce a un'istanza della classe del componente, quindi puoi invocare ogni metodo definito in tale classe. Se devi accedere al nodo DOM sottostante per il componente, puoi usare [React.findDOMNode](/react/docs/top-level-api-it-IT.html#react.finddomnode). |
|||
|
|||
## Riassunto |
|||
|
|||
I riferimenti `ref` sono la maniera corretta di inviare un messaggio a una precisa istanza di un figlio in una maniera che sarebbe impraticabile attraverso le normali proprietà `props` e `state` di React. Tuttavia, esse non dovrebbero essere la tua astrazione principale per far fluire i dati attraverso la tua applicazione. In modo predefinito, usa il flusso dati di React e utilizza i `ref` per casi d'uso che sono intrinsecamente non reattivi. |
|||
|
|||
### Benefici: |
|||
|
|||
- Puoi definire ogni metodo pubblico nelle classi dei tuoi componenti (come un metodo per reimpostare un Typeahead) e chiamare tali metodi pubblici attraverso i riferimenti (come ad esempio `this.refs.myTypeahead.reset()`). |
|||
- Effettuare misure sul DOM richiede quasi sempre l'accesso ad un componente "nativo" come `<input />` accedendo il suo nodo DOM sottostante attraverso `React.findDOMNode(this.refs.myInput)`. I riferimenti sono uno degli unici metodi praticabili per fare ciò in maniera affidabile. |
|||
- I riferimenti sono gestiti automaticamente per te! Se un figlio è distrutto, anche il suo riferimento è distrutto. Pertanto non preoccuparti del consumo di memoria (a meno che tu non faccia qualcosa di folle per conservare un riferimento). |
|||
|
|||
### Precauzioni: |
|||
|
|||
- *Non accedere mai* ai riferimenti dentro il metodo render di un componente - oppure mentre il metodo render di qualsiasi componente è in esecuzione ovunque nella pila di chiamate. |
|||
- Se vuoi preservare la resilienza al Crushing del compilatore Google Closure Compiler, assicurati di non accedere mai come proprietà a ciò che è stato specificato come stringa. Ciò significa che devi accedere come `this.refs['myRefString']` se il tuo ref è stato definito come `ref="myRefString"`. |
|||
- Se non hai ancora programmato parecchie applicazioni con React, la tua prima inclinazione è solitamente di provare a utilizzare i riferimenti per "fare succedere qualcosa" nella tua applicazione. Se questo è il tuo caso, fermati un momento e pensa in maniera critica al luogo corretto nella gerarchia dei componenti in cui lo `state` debba trovarsi. Spesso ti accorgerai che il luogo corretto per "possedere" lo stato si trova a un livello più alto nella gerarchia. Posizionare lì lo stato spesso elimina ogni necessità di usare i `ref` per "fare accadere qualcosa" – al contrario, il flusso dei dati solitamente otterrà lo scopo desiderato. |
|||
- I ref non possono essere assegnati a [funzioni prive di stato](/react/docs/reusable-components-it-IT.html#stateless-functions), poiché il componente non possiede un'istanza di supporto. Puoi tuttavia racchiudere un componente privo di stato in un componente composito standard e assegnare il ref al componente composito. |
|||
@ -0,0 +1,74 @@ |
|||
--- |
|||
id: tooling-integration-it-IT |
|||
title: Integrazione con Strumenti |
|||
permalink: tooling-integration-it-IT.html |
|||
prev: more-about-refs-it-IT.html |
|||
next: addons-it-IT.html |
|||
--- |
|||
|
|||
Ciascun progetto utilizza un sistema differente per la build e il deploy di JavaScript. Abbiamo provato a rendere React il più possibile indipendente dall'ambiente di sviluppo. |
|||
|
|||
## React |
|||
|
|||
### React hosted su un CDN |
|||
|
|||
Offriamo versioni di React su CDN [nella nostra pagina dei download](/react/downloads.html). Questi file precompilati usano il formato dei moduli UMD. Inserirli con un semplice tag `<script>` inietterà una variabile globale `React` nel tuo ambiente. Questo approccio dovrebbe funzionare senza alcuna configurazione in ambienti CommonJS ed AMD. |
|||
|
|||
|
|||
### Usare il ramo master |
|||
|
|||
Abbiamo istruzioni per compilare dal ramo `master` [nel nostro repositorio GitHub](https://github.com/facebook/react). Costruiamo un albero di moduli CommonJS sotto `build/modules` che puoi inserire in ogni ambiente o strumento di packaging che supporta CommonJS. |
|||
|
|||
## JSX |
|||
|
|||
### Trasformazione di JSX nel browser |
|||
|
|||
Se preferisci usare JSX, Babel fornisce un [trasformatore ES6 e JSX nel browser per lo sviluppo](http://babeljs.io/docs/usage/browser/) chiamato browser.js che può essere incluso da una release npm `babel-core` oppure da [CDNJS](http://cdnjs.com/libraries/babel-core). Includi un tag `<script type="text/babel">` per scatenare il trasformatore JSX. |
|||
|
|||
> Nota: |
|||
> |
|||
> Il trasformatore JSX nel browser è piuttosto grande e risulta in calcoli aggiuntivi lato client che possono essere evitati. Non utilizzare in produzione — vedi la sezione successiva. |
|||
|
|||
|
|||
### In Produzione: JSX Precompilato |
|||
|
|||
Se hai [npm](https://www.npmjs.com/), puoi eseguire `npm install -g babel`. Babel include il supporto per React v0.12 e v0.13. I tag sono automaticamente trasformati negli equivalenti `React.createElement(...)`, `displayName` è automaticamente desunto e aggiunto a tutte le classi React.createClass. |
|||
|
|||
Questo strumento tradurrà i file che usano la sintassi JSX a file in semplice JavaScript che possono essere eseguiti direttamente dal browser. Inoltre, osserverà le directory per te e trasformerà automaticamente i file quando vengono modificati; ad esempio: `babel --watch src/ --out-dir lib/`. |
|||
|
|||
In maniera predefinita, vengono trasformati i file JSX con un'estensione `.js`. Esegui `babel --help` per maggiori informazioni su come usare Babel. |
|||
|
|||
Output di esempio: |
|||
|
|||
``` |
|||
$ cat test.jsx |
|||
var HelloMessage = React.createClass({ |
|||
render: function() { |
|||
return <div>Ciao {this.props.name}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render(<HelloMessage name="John" />, mountNode); |
|||
$ babel test.jsx |
|||
"use strict"; |
|||
|
|||
var HelloMessage = React.createClass({ |
|||
displayName: "HelloMessage", |
|||
|
|||
render: function render() { |
|||
return React.createElement( |
|||
"div", |
|||
null, |
|||
"Hello ", |
|||
this.props.name |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render(React.createElement(HelloMessage, { name: "John" }), mountNode); |
|||
``` |
|||
|
|||
|
|||
### Progetti Open Source Utili |
|||
|
|||
La comunità open source ha creato strumenti che integrano JSX con diversi editor e sistemi di build. Consulta [integrazioni JSX ](https://github.com/facebook/react/wiki/Complementary-Tools#jsx-integrations) per una lista completa. |
|||
@ -0,0 +1,25 @@ |
|||
--- |
|||
id: addons-it-IT |
|||
title: Add-ons |
|||
permalink: addons-it-IT.html |
|||
prev: tooling-integration-it-IT.html |
|||
next: animation-it-IT.html |
|||
--- |
|||
|
|||
`React.addons` è il luogo in cui parcheggiamo utili strumenti per costruire applicazioni React. **Questi strumenti devono essere considerati sperimentali** ma saranno eventualmente inclusi nel nucleo o una libreria ufficiale di utilities: |
|||
|
|||
- [`TransitionGroup` e `CSSTransitionGroup`](animation-it-IT.html), per gestire animazioni e transizioni che sono solitamente difficili da implementare, come ad esempio prima della rimozione di un componente. |
|||
- [`LinkedStateMixin`](two-way-binding-helpers-it-IT.html), per semplificare la coordinazione tra lo stato del componente e l'input dell'utente in un modulo. |
|||
- [`cloneWithProps`](clone-with-props-it-IT.html), per eseguire una copia superficiale di componenti React e cambiare le loro proprietà. |
|||
- [`createFragment`](create-fragment-it-IT.html), per creare un insieme di figli con chiavi esterne. |
|||
- [`update`](update-it-IT.html), una funzione di utilità che semplifica la gestione di dati immutabili in JavaScript. |
|||
- [`PureRenderMixin`](pure-render-mixin-it-IT.html), un aiuto per incrementare le prestazioni in certe situazioni. |
|||
|
|||
Gli add-ons elencati di seguito si trovano esclusivamente nella versione di sviluppo (non minificata) di React: |
|||
|
|||
- [`TestUtils`](test-utils-it-IT.html), semplici helper per scrivere dei test case (soltanto nella build non minificata). |
|||
- [`Perf`](perf-it-IT.html), per misurare le prestazioni e fornirti suggerimenti per l'ottimizzazione. |
|||
|
|||
Per ottenere gli add-on, usa `react-with-addons.js` (e la sua controparte non minificata) anziché il solito `react.js`. |
|||
|
|||
Quandi si usa il pacchetto react di npm, richiedi semplicemente `require('react/addons')` anziché `require('react')` per ottenere React con tutti gli add-on. |
|||
@ -0,0 +1,252 @@ |
|||
--- |
|||
id: animation-it-IT |
|||
title: Animazioni |
|||
permalink: animation-it-IT.html |
|||
prev: addons-it-IT.html |
|||
next: two-way-binding-helpers-it-IT.html |
|||
--- |
|||
|
|||
React offre un componente addon `ReactTransitionGroup` come una API di basso livello per le animazioni, e un `ReactCSSTransitionGroup` per implementare facilmente animazioni e transizioni CSS di base. |
|||
|
|||
## API di Alto Livello: `ReactCSSTransitionGroup` |
|||
|
|||
`ReactCSSTransitionGroup` è basato su `ReactTransitionGroup` ed è una maniera semplice di effettuare transizioni e animazioni CSS quando un componente React viene aggiunto o rimosso dal DOM. È ispirato all'eccellente libreria [ng-animate](http://www.nganimate.org/). |
|||
|
|||
### Per Cominciare |
|||
|
|||
`ReactCSSTransitionGroup` è l'interfaccia a `ReactTransitions`. Questo è un semplice elemento che racchiude tutti i componenti che desideri animare. Ecco un esempio in cui facciamo apparire e scomparire gli elementi di una lista. |
|||
|
|||
```javascript{28-30} |
|||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; |
|||
|
|||
var TodoList = React.createClass({ |
|||
getInitialState: function() { |
|||
return {items: ['ciao', 'mondo', 'clicca', 'qui']}; |
|||
}, |
|||
handleAdd: function() { |
|||
var newItems = |
|||
this.state.items.concat([prompt('Scrivi del testo')]); |
|||
this.setState({items: newItems}); |
|||
}, |
|||
handleRemove: function(i) { |
|||
var newItems = this.state.items; |
|||
newItems.splice(i, 1); |
|||
this.setState({items: newItems}); |
|||
}, |
|||
render: function() { |
|||
var items = this.state.items.map(function(item, i) { |
|||
return ( |
|||
<div key={item} onClick={this.handleRemove.bind(this, i)}> |
|||
{item} |
|||
</div> |
|||
); |
|||
}.bind(this)); |
|||
return ( |
|||
<div> |
|||
<button onClick={this.handleAdd}>Aggiungi Elemento</button> |
|||
<ReactCSSTransitionGroup transitionName="example" transitionEnterTimeout={500} transitionLeaveTimeout={300} > |
|||
{items} |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
> Nota: |
|||
> |
|||
> Devi fornire [l'attributo `key`](/react/docs/multiple-components.html#dynamic-children) per tutti i figli di `ReactCSSTransitionGroup`, anche quando stai visualizzando un singolo elemento. Questo è il modo in cui React determina quali figli sono stati aggiunti, rimossi, o sono rimasti. |
|||
|
|||
In questo componente, quando un nuovo elemento viene aggiunto a `ReactCSSTransitionGroup` riceverà la classe CSS `example-enter` e la classe CSS `example-enter-active` allo scatto successivo. Questa è una convenzione basata sul valore della proprietà `transitionName`. |
|||
|
|||
Puoi usare queste classi per scatenare una animazione o transizione CSS. Ad esempio, prova ad aggiungere questo CSS e aggiungere un nuovo elemento alla lista: |
|||
|
|||
```css |
|||
.example-enter { |
|||
opacity: 0.01; |
|||
} |
|||
|
|||
.example-enter.example-enter-active { |
|||
opacity: 1; |
|||
transition: opacity 500ms ease-in; |
|||
} |
|||
|
|||
.example-leave { |
|||
opacity: 1; |
|||
} |
|||
|
|||
.example-leave.example-leave-active { |
|||
opacity: 0.01; |
|||
transition: opacity 300ms ease-in; |
|||
} |
|||
``` |
|||
|
|||
Ti accorgerai che la durata delle animazioni devono essere specificate sia nel CSS che nel metodo render; questo suggerisce a React quando rimuovere le classi di animazione dall'elemento e -- se sta venendo rimosso -- quando rimuovere l'elemento dal DOM. |
|||
|
|||
### Animare il Montaggio Iniziale |
|||
|
|||
`ReactCSSTransitionGroup` fornisce la proprietà opzionale `transitionAppear`, per aggiungere una fase aggiuntiva di transizione al montaggio iniziale del componente. In genere non c'è alcuna fase di transizione al montaggio iniziale in quanto il valore predefinito di `transitionAppear` è `false`. L'esempio seguente passa la proprietà `transitionAppear` con il valore `true`. |
|||
|
|||
```javascript{3-5} |
|||
render: function() { |
|||
return ( |
|||
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500}> |
|||
<h1>Dissolvenza al Montaggio Iniziale</h1> |
|||
</ReactCSSTransitionGroup> |
|||
); |
|||
} |
|||
``` |
|||
|
|||
Durante il montaggio iniziale `ReactCSSTransitionGroup` otterrà la classe CSS `example-appear` e la classe CSS `example-appear-active` allo scatto successivo. |
|||
|
|||
```css |
|||
.example-appear { |
|||
opacity: 0.01; |
|||
} |
|||
|
|||
.example-appear.example-appear-active { |
|||
opacity: 1; |
|||
transition: opacity .5s ease-in; |
|||
} |
|||
``` |
|||
|
|||
Al montaggio iniziale, tutti i figli di `ReactCSSTransitionGroup` saranno marcati come `appear` ma non `enter`. Tuttavia, tutti i figli aggiunti in seguito ad un `ReactCSSTransitionGroup` esistente saranno marcati come `enter` ma non `appear`. |
|||
|
|||
> Nota: |
|||
> |
|||
> La proprietà `transitionAppear` è stata aggiunta a `ReactCSSTransitionGroup` nella versione `0.13`. Per mantenere la compatibilità con le versioni precedenti, il valore predefinito è impostato a `false`. |
|||
|
|||
### Classi Personalizzate |
|||
|
|||
È anche possibile usare nomi di classi personalizzate per ciascuna delle fasi delle tue transizioni. Anziché passare una stringa come valore di `transitionName` puoi assegnare un oggetto che contiene i nomi delle classi `enter` o `leave`, oppure un oggetto contenente i nomi delle classi per `enter`, `enter-active`, `leave-active`e `leave`. Se vengono forniti soltanto i nomi delle classi enter e leave, le classi per enter-active e leave-active saranno determinate aggiungendo il suffisso '-active' ai rispettivi nomi delle classi. Ecco due esempi che usano le classi personalizzate: |
|||
|
|||
```javascript |
|||
... |
|||
<ReactCSSTransitionGroup |
|||
transitionName={ { |
|||
enter: 'enter', |
|||
enterActive: 'enterActive', |
|||
leave: 'leave', |
|||
leaveActive: 'leaveActive', |
|||
appear: 'appear', |
|||
appearActive: 'appearActive' |
|||
} }> |
|||
{item} |
|||
</ReactCSSTransitionGroup> |
|||
|
|||
<ReactCSSTransitionGroup |
|||
transitionName={ { |
|||
enter: 'enter', |
|||
leave: 'leave', |
|||
appear: 'appear' |
|||
} }> |
|||
{item2} |
|||
</ReactCSSTransitionGroup> |
|||
... |
|||
``` |
|||
|
|||
### I Gruppi di Animazioni Devono Essere Montati per Funzionare |
|||
|
|||
Per applicare le transizioni ai suoi figli, il `ReactCSSTransitionGroup` deve già essere montato nel DOM oppure la proprietà `transitionAppear` deve essere impostata a `true`. L'esempio seguente non funziona, poiché `ReactCSSTransitionGroup` sta venendo montato assieme al nuovo elemento, anziché il nuovo elemento venire montato dentro di esso. Confronta questo esempio con la sezione precedente [Per Cominciare](#getting-started) per notare la differenza. |
|||
|
|||
```javascript{12-15} |
|||
render: function() { |
|||
var items = this.state.items.map(function(item, i) { |
|||
return ( |
|||
<div key={item} onClick={this.handleRemove.bind(this, i)}> |
|||
<ReactCSSTransitionGroup transitionName="example"> |
|||
{item} |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
}, this); |
|||
return ( |
|||
<div> |
|||
<button onClick={this.handleAdd}>Aggiungi Elemento</button> |
|||
{items} |
|||
</div> |
|||
); |
|||
} |
|||
``` |
|||
|
|||
### Animare Uno o Nessun Elemento |
|||
|
|||
Nell'esempio precedente, abbiamo visualizzato una lista di elementi in `ReactCSSTransitionGroup`. Tuttavia, i figli di `ReactCSSTransitionGroup` possono anche essere un solo o nessun elemento. Questo rende possibile animare un singolo elemento che viene aggiunto o rimosso. Similarmente, puoi animare un nuovo elemento che sistituisce l'elemento corrente. Ad esempio, possiamo implementare un semplice carosello di immagini come segue: |
|||
|
|||
```javascript{10-12} |
|||
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; |
|||
|
|||
var ImageCarousel = React.createClass({ |
|||
propTypes: { |
|||
imageSrc: React.PropTypes.string.isRequired |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
<ReactCSSTransitionGroup transitionName="carousel" transitionEnterTimeout={300} transitionLeaveTimeout={300}> |
|||
<img src={this.props.imageSrc} key={this.props.imageSrc} /> |
|||
</ReactCSSTransitionGroup> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
### Disattivare le Animazioni |
|||
|
|||
Se lo desideri, puoi disattivare le animazioni `enter` o `leave`. Ad esempio, a volte potresti volere un'animazione per `enter` ma non una per `leave`, ma `ReactCSSTransitionGroup` attende che l'animazione sia completata prima di rimuovere il tuo nodo DOM. Puoi aggiungere le proprietà `transitionEnter={false}` o `transitionLeave={false}` a `ReactCSSTransitionGroup` per disattivare le rispettive animazioni. |
|||
|
|||
> Nota: |
|||
> |
|||
> Quando si usa `ReactCSSTransitionGroup`, non c'è alcun modo per cui i tuoi componenti vengano avvisati quando la transizione è terminata o per effettuare una logica complessa durante l'animazione. Se vuoi un controllo più fine, puoi usare la API di basso livello `ReactTransitionGroup` che fornisce degli hook che puoi utilizzare per effettuare transizioni personalizzate. |
|||
|
|||
## API di Basso Livello: `ReactTransitionGroup` |
|||
|
|||
`ReactTransitionGroup` è la base per le animazioni. È accessibile come `React.addons.TransitionGroup`. Quando vi sono aggiunti o rimossi dichiarativamente dei figli (come negli esempi precedenti) degli speciali hook del ciclo di vita sono invocati su di essi. |
|||
|
|||
### `componentWillAppear(callback)` |
|||
|
|||
Viene chiamato allo stesso momento di `componentDidMount()` per i componenti inizialmente montati in un `TransitionGroup`. Bloccherà l'esecuzione di altre animazioni finché `callback` non viene chiamata. Viene chiamata solo durante il rendering iniziale di un `TransitionGroup`. |
|||
|
|||
### `componentDidAppear()` |
|||
|
|||
Viene chiamato dopo che la funzione `callback` passata a `componentWillAppear` è stata chiamata. |
|||
|
|||
### `componentWillEnter(callback)` |
|||
|
|||
Viene chiamato allo stesso momento di `componentDidMount()` per i componenti aggiunti ad un `TransitionGroup` esistente. Bloccherà l'esecuzione di altre animazioni finché `callback` non viene chiamata. Non viene chiamata durante il rendering iniziale di un `TransitionGroup`. |
|||
|
|||
### `componentDidEnter()` |
|||
|
|||
Viene chiamato dopo che la funzione `callback` passata a `componentWillEnter` è stata chiamata. |
|||
|
|||
### `componentWillLeave(callback)` |
|||
|
|||
Viene chiamato quando il figlio è stato rimosso dal `ReactTransitionGroup`. Nonostante il figlio sia stato rimosso, `ReactTransitionGroup` lo manterrà nel DOM finché `callback` non viene chiamata. |
|||
|
|||
### `componentDidLeave()` |
|||
|
|||
Viene chiamato quando la `callback` `willLeave` viene chiamata (contemporaneamente a `componentWillUnmount`). |
|||
|
|||
### Rendering di un Componente Diverso |
|||
|
|||
In maniera predefinita, `ReactTransitionGroup` viene visualizzato come uno `span`. Puoi cambiare questo comportamento fornento una proprietà `component`. Ad esempio, ecco come puoi visualizzare un `<ul>`: |
|||
|
|||
```javascript{1} |
|||
<ReactTransitionGroup component="ul"> |
|||
... |
|||
</ReactTransitionGroup> |
|||
``` |
|||
|
|||
È possibile utilizzare ciascun componente DOM che React può visualizzare. Tuttavia, `component` non deve necessariamente essere un componente DOM. Può infatti essere qualunque componente React; anche componenti scritti da te! |
|||
|
|||
> Nota: |
|||
> |
|||
> Prima della v0.12, quando venivano usati componenti DOM, la proprietà `component` doveva essere un riferimento a `React.DOM.*`. Dal momento che il componente è semplicemente passato a `React.createElement`, deve ora essere una stringa. Per componenti compositi si deve passare il metodo factory. |
|||
|
|||
Ciascuna proprietà aggiuntiva definita dall'utente diverrà una proprietà del componente visualizzato. Ad esempio, ecco come visualizzeresti un `<ul>` con una classe CSS: |
|||
|
|||
```javascript{1} |
|||
<ReactTransitionGroup component="ul" className="animated-list"> |
|||
... |
|||
</ReactTransitionGroup> |
|||
``` |
|||
@ -0,0 +1,114 @@ |
|||
--- |
|||
id: two-way-binding-helpers-it-IT |
|||
title: Helper Per Binding Bidirezionali |
|||
permalink: two-way-binding-helpers-it-IT.html |
|||
prev: animation-it-IT.html |
|||
next: test-utils-it-IT.html |
|||
--- |
|||
|
|||
`ReactLink` è una maniera semplice di esprimere binding bidirezionali con React. |
|||
|
|||
> Nota: |
|||
> |
|||
> Se hai poca esperienza del framework, nota che `ReactLink` non è necessario per molte applicazioni e dovrebbe essere utilizzato con cautela. |
|||
|
|||
In React, i dati fluiscono in una direzione: dal proprietario ai figli. Questo poiché i dati fluiscono in una sola direzione nel [modello di computazione di Von Neumann](https://en.wikipedia.org/wiki/Von_Neumann_architecture). Puoi pensare ad esso come "binding unidirezionale dei dati." |
|||
|
|||
Tuttavia, esistono parecchie applicazioni che richiedono di leggere dati e farli fluire nuovamente nel tuo programma. Ad esempio, quando sviluppi dei moduli, vorrai spesso aggiornare uno `state` di React quando ricevi un input dall'utente. O forse vuoi effettuare il layout in JavaScript e reagire ai cambiamenti nelle dimensioni di alcuni elementi DOM. |
|||
|
|||
In React, questo verrebbe implementato ascoltando un evento "change", leggendo la tua fonte di dati (solitamente il DOM) e chiamando `setState()` su uno dei tuoi componenti. "Chiudere il ciclo del flusso dei dati" esplicitamente conduce a programmi più comprensibili e mantenibili. Consulta [la nostra documentazione sui moduli](/react/docs/forms.html) per maggiori informazioni. |
|||
|
|||
Il binding bidirezionale -- assicurarsi implicitamente che alcuni valori nel DOM siano sempre consistenti con degli `state` in React -- è più conciso e supporta un'ampia varietà di applicazioni. Abbiamo fornito `ReactLink`: zucchero sintattico per impostare il pattern del ciclo del flusso di dati descritto in predecenza, ovvero "collegare" una fonte di dati con lo `state` di React. |
|||
|
|||
> Nota: |
|||
> |
|||
> `ReactLink` è soltanto uno strato di astrazione e convenzioni attorno al pattern `onChange`/`setState()`. Non cambia fondamentalmente la maniera in cui i dati fluiscono all'interno della tua applicazione React. |
|||
|
|||
## ReactLink: Prima e Dopo |
|||
|
|||
Ecco un semplice esempio di modulo che non utilizza `ReactLink`: |
|||
|
|||
```javascript |
|||
var NoLink = React.createClass({ |
|||
getInitialState: function() { |
|||
return {message: 'Ciao!'}; |
|||
}, |
|||
handleChange: function(event) { |
|||
this.setState({message: event.target.value}); |
|||
}, |
|||
render: function() { |
|||
var message = this.state.message; |
|||
return <input type="text" value={message} onChange={this.handleChange} />; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Ciò funziona molto bene e il flusso di dati è molto chiaro. Tuttavia, in presenza di un gran numero di campi del modulo può risultare assai prolisso. Utilizziamo `ReactLink` per risparmiarci la scrittura di un po' di codice: |
|||
|
|||
```javascript{2,7} |
|||
var WithLink = React.createClass({ |
|||
mixins: [React.addons.LinkedStateMixin], |
|||
getInitialState: function() { |
|||
return {message: 'Ciao!'}; |
|||
}, |
|||
render: function() { |
|||
return <input type="text" valueLink={this.linkState('message')} />; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
`LinkedStateMixin` aggiunge un metodo chiamato `linkState()` al tuo componente React. `linkState()` restituisce un oggetto `ReactLink` contenente il valore attuae dello stato React e una callback per cambiarlo. |
|||
|
|||
Gli oggetti `ReactLink` possono essere passati su e giù nell'albero come proprietà, quindi è facile (ed esplicito) impostare un binding bidirezionale tra un componente in profondità nella gerarchia e dello stato che si trova più in alto nella gerarchia. |
|||
|
|||
Nota che i checkbox hanno un comportamento speciale riguardo il loro attributo `value`, che è il valore che sarà inviato all'inoltro del modulo se il checkbox è spuntato (il valore predefinito è `on`). L'attributo `value` non è aggiornato quando il checkbox viene spuntato o deselezionato. Per i checkbox occorre usare `checkedLink` anziché `valueLink`: |
|||
``` |
|||
<input type="checkbox" checkedLink={this.linkState('booleanValue')} /> |
|||
``` |
|||
|
|||
|
|||
## Dietro le Quinte |
|||
|
|||
Ci sono due ambiti in `ReactLink`: il posto in cui crei l'istanza di `ReactLink` e il posto in cui la utilizzi. Per dimostrare quanto sia semplice usare `ReactLink`, riscriviamo ciascun ambito separatamente perché sia più esplicito. |
|||
|
|||
### ReactLink Senza LinkedStateMixin |
|||
|
|||
```javascript{5-7,9-12} |
|||
var WithoutMixin = React.createClass({ |
|||
getInitialState: function() { |
|||
return {message: 'Ciao!'}; |
|||
}, |
|||
handleChange: function(newValue) { |
|||
this.setState({message: newValue}); |
|||
}, |
|||
render: function() { |
|||
var valueLink = { |
|||
value: this.state.message, |
|||
requestChange: this.handleChange |
|||
}; |
|||
return <input type="text" valueLink={valueLink} />; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Come puoi vedere, gli oggetti `ReactLink` sono semplici oggetti che hanno due proprietà: `value` e `requestChange`. `LinkedStateMixin` è altrettanto semplice: popola semplicemente questi campi con un valore da `this.state` e una callback che invoca `this.setState()`. |
|||
|
|||
### ReactLink Senza valueLink |
|||
|
|||
```javascript |
|||
var WithoutLink = React.createClass({ |
|||
mixins: [React.addons.LinkedStateMixin], |
|||
getInitialState: function() { |
|||
return {message: 'Ciao!'}; |
|||
}, |
|||
render: function() { |
|||
var valueLink = this.linkState('message'); |
|||
var handleChange = function(e) { |
|||
valueLink.requestChange(e.target.value); |
|||
}; |
|||
return <input type="text" value={valueLink.value} onChange={handleChange} />; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
La proprietà `valueLink` è anche abbastanza semplice. Gestisce semplicemente l'evento `onChange` e invoca `this.props.valueLink.requestChange()`, e inoltre utilizza `this.props.valueLink.value` anziché `this.props.value`. Tutto qua! |
|||
@ -0,0 +1,62 @@ |
|||
--- |
|||
id: class-name-manipulation-it-IT |
|||
title: Manipolazione del Nome di Classe |
|||
permalink: class-name-manipulation-it-IT.html |
|||
prev: two-way-binding-helpers-it-IT.html |
|||
next: test-utils-it-IT.html |
|||
--- |
|||
|
|||
> NOTA: |
|||
> |
|||
> Questo modulo esiste adesso in forma separata come [JedWatson/classnames](https://github.com/JedWatson/classnames) ed è indipendente da React. Questo add-on verrà quindi rimosso nell'immediato futuro. |
|||
|
|||
`classSet()` è una elegante utility per manipolare facilmente la stringa dell'attributo `class` del DOM. |
|||
|
|||
Ecco uno scenario comune e la sua soluzione senza `classSet()`: |
|||
|
|||
```javascript |
|||
// all'interno di un componente React `<Message />` |
|||
render: function() { |
|||
var classString = 'message'; |
|||
if (this.props.isImportant) { |
|||
classString += ' message-important'; |
|||
} |
|||
if (this.props.isRead) { |
|||
classString += ' message-read'; |
|||
} |
|||
// 'message message-important message-read' |
|||
return <div className={classString}>Fantastico, vediamoci lì.</div>; |
|||
} |
|||
``` |
|||
|
|||
Questo può facilmente diventare noioso, in quanto assegnare stringhe per nomi di classi può essere difficile da leggere e soggetto ad errori. `classSet()` risolve questo problema: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
var cx = React.addons.classSet; |
|||
var classes = cx({ |
|||
'message': true, |
|||
'message-important': this.props.isImportant, |
|||
'message-read': this.props.isRead |
|||
}); |
|||
// same final string, but much cleaner |
|||
return <div className={classes}>Fantastico, vediamoci lì.</div>; |
|||
} |
|||
``` |
|||
|
|||
Quando usi `classSet()`, passa un oggetto le cui chiavi sono i nomi di classe CSS di cui potresti o meno avere bisogno. Valori di verità risulteranno nell'inclusione della chiave nella stringa risultante. |
|||
|
|||
`classSet()` ti permette inoltre di passare nomi di classe che devono essere concatenati come argomenti: |
|||
|
|||
```javascript |
|||
render: function() { |
|||
var cx = React.addons.classSet; |
|||
var importantModifier = 'message-important'; |
|||
var readModifier = 'message-read'; |
|||
var classes = cx('message', importantModifier, readModifier); |
|||
// Final string is 'message message-important message-read' |
|||
return <div className={classes}>Fantastico, vediamoci lì.</div>; |
|||
} |
|||
``` |
|||
|
|||
Niente più hack per concatenare le stringhe! |
|||
@ -0,0 +1,233 @@ |
|||
--- |
|||
id: test-utils-it-IT |
|||
title: Utilità di Test |
|||
permalink: test-utils-it-IT.html |
|||
prev: two-way-binding-helpers-it-IT.html |
|||
next: clone-with-props-it-IT.html |
|||
--- |
|||
|
|||
`React.addons.TestUtils` semplifica la validazione dei componenti React nel framework di test di tua scelta (noi utilizziamo [Jest](https://facebook.github.io/jest/)). |
|||
|
|||
### Simulate |
|||
|
|||
```javascript |
|||
Simulate.{eventName}( |
|||
DOMElement element, |
|||
[object eventData] |
|||
) |
|||
``` |
|||
|
|||
Simula l'inoltro di un evento su un nodo DOM con dei dati dell'evento opzionali `eventData`. **Questa è probabilmente l'utilità più essenziale in `ReactTestUtils`.** |
|||
|
|||
**Cliccare un elemento** |
|||
|
|||
```javascript |
|||
var node = React.findDOMNode(this.refs.button); |
|||
React.addons.TestUtils.Simulate.click(node); |
|||
``` |
|||
|
|||
**Cambiare il valore di un campo di input e in seguito premere INVIO** |
|||
|
|||
```javascript |
|||
var node = React.findDOMNode(this.refs.input); |
|||
node.value = 'giraffe' |
|||
React.addons.TestUtils.Simulate.change(node); |
|||
React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter", keyCode: 13, which: 13}); |
|||
``` |
|||
|
|||
*nota che dovrai fornire tu stesso ciascuna proprietà dell'evento utilizzata nel tuo componente (ad es. keyCode, which, etc...) in quanto React non crea alcuna di esse per te* |
|||
|
|||
`Simulate` possiede un metodo per ciascun evento che React comprende. |
|||
|
|||
### renderIntoDocument |
|||
|
|||
```javascript |
|||
ReactComponent renderIntoDocument( |
|||
ReactElement instance |
|||
) |
|||
``` |
|||
|
|||
Effettua il rendering di un componente in un nodo DOM staccato dal documento. **Questa funzione richiede la presenza del DOM.** |
|||
|
|||
### mockComponent |
|||
|
|||
```javascript |
|||
object mockComponent( |
|||
function componentClass, |
|||
[string mockTagName] |
|||
) |
|||
``` |
|||
|
|||
Passa il mock di un componente a questo metodo per aumentarlo con metodi utili che gli permettono di essere utilizzato come un componente React fantoccio. Anziché essere visualizzato come al solito, il componente diventerà un semplice `<div>` (o qualsiasi altro tag se fornito come valore di `mockTagName`) contenente ciascun figlio fornito. |
|||
|
|||
### isElement |
|||
|
|||
```javascript |
|||
boolean isElement( |
|||
ReactElement element |
|||
) |
|||
``` |
|||
|
|||
Restituisce `true` se `element` è un qualunque ReactElement. |
|||
|
|||
### isElementOfType |
|||
|
|||
```javascript |
|||
boolean isElementOfType( |
|||
ReactElement element, |
|||
function componentClass |
|||
) |
|||
``` |
|||
|
|||
Restituisce `true` se `element` è un ReactElement il cui tipo è la classe React `componentClass`. |
|||
|
|||
### isDOMComponent |
|||
|
|||
```javascript |
|||
boolean isDOMComponent( |
|||
ReactComponent instance |
|||
) |
|||
``` |
|||
|
|||
Restituisce `true` se `instance` è un componente DOM (come ad esempio `<div>` o `<span>`). |
|||
|
|||
### isCompositeComponent |
|||
|
|||
```javascript |
|||
boolean isCompositeComponent( |
|||
ReactComponent instance |
|||
) |
|||
``` |
|||
|
|||
Restituisce `true` se `instance` è un componente composito (creato tramite `React.createClass()`). |
|||
|
|||
### isCompositeComponentWithType |
|||
|
|||
```javascript |
|||
boolean isCompositeComponentWithType( |
|||
ReactComponent instance, |
|||
function componentClass |
|||
) |
|||
``` |
|||
|
|||
Restituisce `true` se `instance` è un componente composito (creato tramite `React.createClass()`) il cui tipo è una classe React dal nome `componentClass`. |
|||
|
|||
### findAllInRenderedTree |
|||
|
|||
```javascript |
|||
array findAllInRenderedTree( |
|||
ReactComponent tree, |
|||
function test |
|||
) |
|||
``` |
|||
|
|||
Attraversa tutti i componenti in `tree` e accumula tutti i componenti per i quali `test(component)` è `true`. Non è molto utile usata da sola, ma diventa ptente se usata come primitiva per altre utilità di test. |
|||
|
|||
### scryRenderedDOMComponentsWithClass |
|||
|
|||
```javascript |
|||
array scryRenderedDOMComponentsWithClass( |
|||
ReactComponent tree, string className |
|||
) |
|||
``` |
|||
|
|||
Trova tutte le istanze di componenti nell'albero visualizzato che sono componenti DOM il cui nome di classe corrisponde a `className`. |
|||
|
|||
### findRenderedDOMComponentWithClass |
|||
|
|||
```javascript |
|||
ReactComponent findRenderedDOMComponentWithClass( |
|||
ReactComponent tree, |
|||
string className |
|||
) |
|||
``` |
|||
|
|||
Simile a `scryRenderedDOMComponentsWithClass()` ma si aspetta di trovare un solo risultato, e restituisce quel solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno. |
|||
|
|||
### scryRenderedDOMComponentsWithTag |
|||
|
|||
```javascript |
|||
array scryRenderedDOMComponentsWithTag( |
|||
ReactComponent tree, |
|||
string tagName |
|||
) |
|||
``` |
|||
|
|||
Trova tutte le istanze di componenti nell'albero visualizzato che sono componenti DOM il cui nome di tag corrisponde a `tagName`. |
|||
|
|||
### findRenderedDOMComponentWithTag |
|||
|
|||
```javascript |
|||
ReactComponent findRenderedDOMComponentWithTag( |
|||
ReactComponent tree, |
|||
string tagName |
|||
) |
|||
``` |
|||
|
|||
Simile a `scryRenderedDOMComponentsWithTag()` ma si aspetta di trovare un solo risultato, e restituisce quel solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno. |
|||
|
|||
### scryRenderedComponentsWithType |
|||
|
|||
```javascript |
|||
array scryRenderedComponentsWithType( |
|||
ReactComponent tree, |
|||
function componentClass |
|||
) |
|||
``` |
|||
|
|||
Trova tutte le istanze di componenti il cui tipo corrisponde a `componentClass`. |
|||
|
|||
### findRenderedComponentWithType |
|||
|
|||
```javascript |
|||
ReactComponent findRenderedComponentWithType( |
|||
ReactComponent tree, function componentClass |
|||
) |
|||
``` |
|||
|
|||
Simile a `scryRenderedComponentsWithType()` si aspetta di trovare un solo risultato, oppure lancia un'eccezione se viene trovato qualunque altro numero di occorrenze diverso da uno. |
|||
|
|||
|
|||
## Rendering superficiale |
|||
|
|||
Il rendering superficiale è una caratteristica sperimentale che ti permette di effettuare il rendering di un componente "ad un livello di profondità" e asserire dei fatti su ciò che viene restituito dal suo metodo render, senza preoccuparti del comportamento dei componenti figli, i quali non sono né istanziati né viene effettuato il rendering. Questo non richiede la presenza di un DOM. |
|||
|
|||
```javascript |
|||
ReactShallowRenderer createRenderer() |
|||
``` |
|||
|
|||
Chiama questo metodo nei tuoi test per creare un renderer superficiale. Puoi pensare ad esso come un "luogo" in cui effettuare il rendering del componente che stai validando, dove può rispondere ad eventi e aggiornarsi. |
|||
|
|||
```javascript |
|||
shallowRenderer.render( |
|||
ReactElement element |
|||
) |
|||
``` |
|||
|
|||
Simile a `React.render`. |
|||
|
|||
```javascript |
|||
ReactComponent shallowRenderer.getRenderOutput() |
|||
``` |
|||
|
|||
Dopo che `render` è stato chiamato, restituisce un output di cui è stato effettuato un rendering superficiale. Puoi quindi iniziare ad asserire fatti sull'output. Ad esempio, se il metodo render del tuo componente resituisce: |
|||
|
|||
```javascript |
|||
<div> |
|||
<span className="heading">Titolo</span> |
|||
<Subcomponent foo="bar" /> |
|||
</div> |
|||
``` |
|||
|
|||
Allora puoi asserire: |
|||
|
|||
```javascript |
|||
result = renderer.getRenderOutput(); |
|||
expect(result.type).toBe('div'); |
|||
expect(result.props.children).toEqual([ |
|||
<span className="heading">Titolo</span>, |
|||
<Subcomponent foo="bar" /> |
|||
]); |
|||
``` |
|||
|
|||
La validazione superficiale ha al momento alcune limitazioni, in particolare non supporta i riferimenti. Stiamo rilasciando questa caratteristica in anticipo e gradiremmo ascoltare il parere della comunità React per la direzione in cui debba evolvere. |
|||
@ -0,0 +1,34 @@ |
|||
--- |
|||
id: clone-with-props-it-IT |
|||
title: Clonare ReactElements |
|||
permalink: clone-with-props-it-IT.html |
|||
prev: test-utils-it-IT.html |
|||
next: create-fragment-it-IT.html |
|||
--- |
|||
|
|||
> Nota: |
|||
> `cloneWithProps` è deprecato. Usa [React.cloneElement](top-level-api.html#react.cloneelement) al suo posto. |
|||
|
|||
In rare condizioni, potresti voler creare una copia di un elemento React con proprietà diverse da quelle dell'elemento originale. Un esempio è clonare gli elementi passati come `this.props.children` ed effettuarne il rendering con proprietà diverse: |
|||
|
|||
```js |
|||
var _makeBlue = function(element) { |
|||
return React.addons.cloneWithProps(element, {style: {color: 'blue'}}); |
|||
}; |
|||
|
|||
var Blue = React.createClass({ |
|||
render: function() { |
|||
var blueChildren = React.Children.map(this.props.children, _makeBlue); |
|||
return <div>{blueChildren}</div>; |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<Blue> |
|||
<p>Questo testo è blu.</p> |
|||
</Blue>, |
|||
document.getElementById('container') |
|||
); |
|||
``` |
|||
|
|||
`cloneWithProps` non trasferisce gli attributi `key` o `ref` agli elementi clonati. Le proprietà `className` e `style` sono automaticamente riunite. |
|||
@ -0,0 +1,73 @@ |
|||
--- |
|||
id: create-fragment-it-IT |
|||
title: Frammenti con Chiave |
|||
permalink: create-fragment-it-IT.html |
|||
prev: clone-with-props-it-IT.html |
|||
next: update-it-IT.html |
|||
--- |
|||
|
|||
In molti casi, puoi utilizzare la proprietà `key` per specificare chiavi sugli elementi che restituisci da `render`. Tuttavia, questo approccio fallisce in una situazione: se hai due insiemi di figli che devi riordinare, non esiste alcun modo di assegnare una chiave a ciascuno di essi senza aggiungere un elemento contenitore. |
|||
|
|||
Ovvero, se hai un componente come il seguente: |
|||
|
|||
```js |
|||
var Swapper = React.createClass({ |
|||
propTypes: { |
|||
// `leftChildren` e `rightChildren` possono essere una stringa, un elemento, un array, etc. |
|||
leftChildren: React.PropTypes.node, |
|||
rightChildren: React.PropTypes.node, |
|||
|
|||
swapped: React.PropTypes.bool |
|||
} |
|||
render: function() { |
|||
var children; |
|||
if (this.props.swapped) { |
|||
children = [this.props.rightChildren, this.props.leftChildren]; |
|||
} else { |
|||
children = [this.props.leftChildren, this.props.rightChildren]; |
|||
} |
|||
return <div>{children}</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
I figli saranno smontati e rimontati nel momento in cui cambi la proprietà `swapped` poiché non ci sono chiavi che marcano i due insiemi di figli. |
|||
|
|||
Per risolvere questo problema, puoi utilizzare `React.addons.createFragment` per dare una chiave a ciascun insieme di figli. |
|||
|
|||
#### `ReactFragment React.addons.createFragment(object children)` |
|||
|
|||
Anziché creare array, scriviamo: |
|||
|
|||
```js |
|||
if (this.props.swapped) { |
|||
children = React.addons.createFragment({ |
|||
right: this.props.rightChildren, |
|||
left: this.props.leftChildren |
|||
}); |
|||
} else { |
|||
children = React.addons.createFragment({ |
|||
left: this.props.leftChildren, |
|||
right: this.props.rightChildren |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
Le chiavi degli oggetti passati (ovvero, `left` e `right`) sono usate come chiavi per l'intero insieme di figli, e l'ordine delle chiavi dell'oggetto è utilizzato per determinare l'ordine dei figli visualizzati. Con questo cambiamento, i due insiemi di figli saranno correttamente riordinati nel DOM senza bisogno di smontaggio. |
|||
|
|||
Il valore di ritorno di `createFragment` deve essere trattato come un oggetto opaco; puoi usare gli helper `React.Children` per iterare su un frammento ma non dovresti accedervi direttamente. Nota anche che ci stiamo affidando al motore JavaScript per preservare l'ordine dell'enumerazione degli oggetti, che non viene garantito dalla specifica ma è implementato dai principali browser e macchine virtuali per oggetti con chiavi non numeriche. |
|||
|
|||
> **Nota:** |
|||
> |
|||
> In un futuro, `createFragment` potrebbe essere sostituito da una API quale |
|||
> |
|||
> ```js |
|||
> return ( |
|||
> <div> |
|||
> <x:frag key="right">{this.props.rightChildren}</x:frag>, |
|||
> <x:frag key="left">{this.props.leftChildren}</x:frag> |
|||
> </div> |
|||
> ); |
|||
> ``` |
|||
> |
|||
> che ti permette di assegnare chiavi direttamente in JSX senza aggiungere elementi contenitore. |
|||
@ -0,0 +1,100 @@ |
|||
--- |
|||
id: update-it-IT |
|||
title: Helper per l'Immutabilità |
|||
permalink: update-it-IT.html |
|||
prev: create-fragment-it-IT.html |
|||
next: pure-render-mixin-it-IT.html |
|||
--- |
|||
|
|||
React ti permette di usare qualunque stile per la gestione dei dati che desideri, incluso la mutazione. Tuttavia, se puoi usare dati immutabili in parti critiche per le prestazioni della tua applicazione è facile implementare rapidamente un metodo `shouldComponentUpdate()` che aumenta significativamente la velocità della tua applicazione. |
|||
|
|||
Avere a che fare con dati immutabili in JavaScript è più difficile che in linguaggi progettati a tale scopo, come [Clojure](http://clojure.org/). Tuttavia, abbiamo fornito un semplice helper per l'immutabilità, `update()`, che rende avere a che fare con questo tipo di dati molto più semplice, *senza* cambiare fondamentalmente la rappresentazione dei tuoi dati. Se puoi anche dare un'occhiata alla libreria [Immutable-js](https://facebook.github.io/immutable-js/docs/) di Facebook e la sezione [Prestazioni Avanzate](/react/docs/advanced-performance.html) per maggiori dettagli su Immutable-js. |
|||
|
|||
## L'idea fondamentale |
|||
|
|||
Se muti i tuoi dati nella seguente maniera: |
|||
|
|||
```js |
|||
myData.x.y.z = 7; |
|||
// oppure... |
|||
myData.a.b.push(9); |
|||
``` |
|||
|
|||
non hai modo di determinare quali dati siano cambiati dal momento che la copia precedente è stata sovrascritta. Invece, devi creare una nuova copia di `myData` e cambiare solo le parti che vanno cambiate. Allora puoi confrontare la vecchia copia di `myData` con la nuova in `shouldComponentUpdate()` usando l'operatore di uguaglianza stretta `===`: |
|||
|
|||
```js |
|||
var newData = deepCopy(myData); |
|||
newData.x.y.z = 7; |
|||
newData.a.b.push(9); |
|||
``` |
|||
|
|||
Sfortunatamente, le copie profonde sono costose, e a volte impossibili. Puoi alleviare questa limitazione copiando soltanto gli oggetti che devono essere cambiati e riutilizzando gli oggetti che nonsono cambiati. Sfortunatamente, nel JavaScript odierno questa può essere un'operazione difficoltosa: |
|||
|
|||
```js |
|||
var newData = extend(myData, { |
|||
x: extend(myData.x, { |
|||
y: extend(myData.x.y, {z: 7}), |
|||
}), |
|||
a: extend(myData.a, {b: myData.a.b.concat(9)}) |
|||
}); |
|||
``` |
|||
|
|||
Mentre questo codice ha prestazioni accettabili (dal momento che effettua soltanto una copia superficiale di `log n` oggetti e riutilizza i rimanenti), è una gran scocciatura da scrivere. Guarda quanta ripetizione! Questo non è soltanto fastidioso, ma offre una grande superficie di attacco per i bachi. |
|||
|
|||
`update()` fornisce un semplice zucchero sintattico attorno a questo pattern per rendere più semplice la scrittura di questo codice. Questo codice diventa: |
|||
|
|||
```js |
|||
var newData = React.addons.update(myData, { |
|||
x: {y: {z: {$set: 7}}}, |
|||
a: {b: {$push: [9]}} |
|||
}); |
|||
``` |
|||
|
|||
Mentre la sintassi richiede qualche tempo per abituarsi (anche se è ispirata dal [linguaggio di query di MongoDB](http://docs.mongodb.org/manual/core/crud-introduction/#query)) non c'è ridondanza, può essere analizzato staticamente e non richiede la scrittura di più codice della versione mutativa. |
|||
|
|||
Le chiavi con il prefisso `$` sono chiamate *comandi*. La struttura dati che stanno "mutando" viene chiamata *bersaglio*. |
|||
|
|||
## Comandi disponibili |
|||
|
|||
* `{$push: array}` invoca `push()` sul bersagio passando ciascun elemento di `array`. |
|||
* `{$unshift: array}` invoca `unshift()` sul bersagio passando ciascun elemento di `array`. |
|||
* `{$splice: array of arrays}` per ogni elemento di `arrays` invoca `splice()` sul bersaglio con i parametri forniti dall'elemento. |
|||
* `{$set: any}` sostituisce l'intero bersaglio. |
|||
* `{$merge: object}` unisce le chiavi di `object` con il bersaglio. |
|||
* `{$apply: function}` passa il valore attuale alla funzione e lo aggiorna con il nuovo valore da essa restituito. |
|||
|
|||
## Esempi |
|||
|
|||
### Semplice inserimento in coda |
|||
|
|||
```js |
|||
var initialArray = [1, 2, 3]; |
|||
var newArray = update(initialArray, {$push: [4]}); // => [1, 2, 3, 4] |
|||
``` |
|||
`initialArray` is still `[1, 2, 3]`. |
|||
|
|||
### Collezioni annidate |
|||
|
|||
```js |
|||
var collection = [1, 2, {a: [12, 17, 15]}]; |
|||
var newCollection = update(collection, {2: {a: {$splice: [[1, 1, 13, 14]]}}}); |
|||
// => [1, 2, {a: [12, 13, 14, 15]}] |
|||
``` |
|||
Questo accede all'indice `2` di `collection`, alla chiave `a`, ed effettua lo splice di un elemento a partire dall'indice `1` (per rimuovere `17`) e al contempo inserisce `13` e `14`. |
|||
|
|||
### Aggiornare un valore basandosi sul suo valore attuale |
|||
|
|||
```js |
|||
var obj = {a: 5, b: 3}; |
|||
var newObj = update(obj, {b: {$apply: function(x) {return x * 2;}}}); |
|||
// => {a: 5, b: 6} |
|||
// Questa è una forma equivalente, ma diventa prolissa per profonde collezioni annidate: |
|||
var newObj2 = update(obj, {b: {$set: obj.b * 2}}); |
|||
``` |
|||
|
|||
### Unione (superficiale) |
|||
|
|||
```js |
|||
var obj = {a: 5, b: 3}; |
|||
var newObj = update(obj, {$merge: {b: 6, c: 7}}); // => {a: 5, b: 6, c: 7} |
|||
``` |
|||
@ -0,0 +1,30 @@ |
|||
--- |
|||
id: pure-render-mixin-it-IT |
|||
title: PureRenderMixin |
|||
permalink: pure-render-mixin-it-IT.html |
|||
prev: update-it-IT.html |
|||
next: perf-it-IT.html |
|||
--- |
|||
|
|||
Se la funzione render del tuo componente React è "pura" (in altre parole, visualizza lo stesso risultato a partire dagli stessi proprietà e stato), puoi usare questo mixin per un incremento di prestazioni in alcuni casi. |
|||
|
|||
Esempio: |
|||
|
|||
```js |
|||
var PureRenderMixin = require('react/addons').addons.PureRenderMixin; |
|||
React.createClass({ |
|||
mixins: [PureRenderMixin], |
|||
|
|||
render: function() { |
|||
return <div className={this.props.className}>foo</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Dietro le quinte, il mixin implementa [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate), nel quale confronta i valori attuali di `this.props` e `this.state` con i successivi e restituisce `false` se l'uguaglianza è verificata. |
|||
|
|||
> Nota: |
|||
> |
|||
> Questo confronto tra gli oggetti è soltanto superficiale. Se questi contengono strutture dati complesse, può causare dei falsi negativi per differenze in profondità. Effettua il mix in componenti la cui struttura di `this.props` e `this.state` sia semplice, oppure utilizza `forceUpdate()` quando si ha la certezza che le strutture dati siano cambiate in profondità. In alternativa, considera l'utilizzo di [oggetti immutabili](https://facebook.github.io/immutable-js/) per facilitare il confronto rapido di oggetti annidati. |
|||
> |
|||
> Inoltre, `shouldComponentUpdate` rimanda gli aggiornamenti per l'intero sotto albero di componenti. Assicurati che tutti i componenti figli siano anch'essi "puri". |
|||
@ -0,0 +1,74 @@ |
|||
--- |
|||
id: perf-it-IT |
|||
title: Strumenti per la Performance |
|||
permalink: perf-it-IT.html |
|||
prev: pure-render-mixin-it-IT.html |
|||
next: advanced-performance-it-IT.html |
|||
--- |
|||
|
|||
React è solitamente assai veloce. Tuttavia, in situazioni nelle quali devi spremere fino all'ultima goccia di prestazioni dalla tua applicazione, fornisce un hook [shouldComponentUpdate](/react/docs/component-specs.html#updating-shouldcomponentupdate) nel quale puoi aggiungere controlli di ottimizzazione per l'algoritmo di confronto di React. |
|||
|
|||
Oltre a darti una panoramica sulle prestazioni generali della tua applicazione, ReactPerf è uno strumento di profilazione che ti dice esattamente dove è necessario aggiungere questi hook. |
|||
|
|||
> Nota: |
|||
> |
|||
> La build di sviluppo di React è più lenta della build di produzione, per via di tutta la logica aggiuntiva per fornire, ad esempio, gli avvisi amichevoli di React nella console (eliminati dalla build di produzione). Pertanto, il profilatore serve soltanto ad indicare le parti _relativamente_ costose della tua applicazione. |
|||
|
|||
## API Generale |
|||
|
|||
L'oggetto `Perf` documentato di seguito è esposto come `React.addons.Perf` quando si usa la build `react-with-addons.js` in modalità di sviluppo. |
|||
|
|||
### `Perf.start()` and `Perf.stop()` |
|||
Avvia/interrompe la misurazione. Le operazioni React intermedie sono registrate per analisi in seguito. Le operazioni che hanno impiegato un tempo trascurabile vengono ignorate. |
|||
|
|||
Dopo l'interruzione, dovrai chiamare `Perf.getLastMeasurements()` (descritta in seguito) per ottenere le misurazioni. |
|||
|
|||
### `Perf.printInclusive(measurements)` |
|||
Stampa il tempo complessivo impiegato. Se non vengono passati argomenti, stampa tutte le misurazioni dall'ultima registrazione. Stampa una tabella gradevolmente formattata nella console, come segue: |
|||
|
|||
 |
|||
|
|||
### `Perf.printExclusive(measurements)` |
|||
I tempi "esclusivi" non includono il tempo impiegato a montare i componenti: processare le proprietà, `getInitialState`, chiamare `componentWillMount` e `componentDidMount`, etc. |
|||
|
|||
 |
|||
|
|||
### `Perf.printWasted(measurements)` |
|||
|
|||
**La parte più utile in assoluto del profilatore**. |
|||
|
|||
Il tempo "sprecato" è impiegato nei componenti che non hanno di fatto visualizzato nulla, ad es. il rendering è rimasto inalterato, quindi il DOM non è stato toccato. |
|||
|
|||
 |
|||
|
|||
### `Perf.printDOM(measurements)` |
|||
Stampa le manipolazioni sottostanti del DOM, ad es. "imposta innerHTML" e "rimuovi". |
|||
|
|||
 |
|||
|
|||
## API Avanzata |
|||
|
|||
I metodi di stampa precedenti utilizzano `Perf.getLastMeasurements()` per effettuare una gradevole stampa dei risultati. |
|||
|
|||
### `Perf.getLastMeasurements()` |
|||
Ottieni l'array delle misurazioni dall'ultima sessione di avvio-interruzione. L'array contiene oggetti, ciascuno dei quali assomiglia a quanto segue: |
|||
|
|||
```js |
|||
{ |
|||
// I termini "inclusive" ed "exclusive" sono spiegati in seguito |
|||
"exclusive": {}, |
|||
// '.0.0' è l'identificativo React del nodo |
|||
"inclusive": {".0.0": 0.0670000008540228, ".0": 0.3259999939473346}, |
|||
"render": {".0": 0.036999990697950125, ".0.0": 0.010000003385357559}, |
|||
// Numero di istanze |
|||
"counts": {".0": 1, ".0.0": 1}, |
|||
// Scritture sul DOM |
|||
"writes": {}, |
|||
// Informazioni aggiuntive per il debug |
|||
"displayNames": { |
|||
".0": {"current": "App", "owner": "<root>"}, |
|||
".0.0": {"current": "Box", "owner": "App"} |
|||
}, |
|||
"totalTime": 0.48499999684281647 |
|||
} |
|||
``` |
|||
@ -0,0 +1,207 @@ |
|||
--- |
|||
id: advanced-performance-it-IT |
|||
title: Performance Avanzata |
|||
permalink: advanced-performance-it-IT.html |
|||
prev: perf-it-IT.html |
|||
--- |
|||
|
|||
Una tra le prime domande che la gente si pone quando considera React per un progetto è se l'applicazione sarà altrettanto veloce e scattante di una versione equivalente non basata su React. L'idea di ripetere il rendering di un intero sottoalbero di componenti in risposta a ciascun cambiamento dello stato rende la gente curiosa se questo processo influisce negativamente sulle prestazioni. React utilizza diverse tecniche intelligenti per minimizzare il numero di operazioni costose sul DOM richieste dall'aggiornamento della UI. |
|||
|
|||
## Evitare di riconciliare il DOM |
|||
|
|||
React fa uso di un *DOM virtuale*, che è un descrittore di un sottoalbero DOM visualizzato nel browser. Questa rappresentazione parallela permette a React di evitare di creare nodi DOM e accedere nodi esistenti, che è di gran lunga più lento di operazioni su oggetti JavaScript. Quando le proprietà di un componente o il suo stato cambiano, React decide se un'aggiornamento effettivo del DOM sia necessario costruendo un nuovo virtual DOM e confrontandolo con quello vecchio. Solo nel caso in cui non siano uguali, React [riconcilierà](/react/docs/reconciliation.html) il DOM, applicando il minor numero di mutamenti possibile. |
|||
|
|||
In aggiunta a questo, React offre una funzione per il ciclo di vita del componente, `shouldComponentUpdate`, che viene scatenata prima che il processo di ri-rendering cominci (il confronto del DOM virtuale e una possibile eventuale riconciliazione del DOM), dando allo sviluppatore la possibilità di cortocircuitare questo processo. L'implementazione predefinita di questa funzione restituisce `true`, lasciando che React effettui l'aggiornamento: |
|||
|
|||
```javascript |
|||
shouldComponentUpdate: function(nextProps, nextState) { |
|||
return true; |
|||
} |
|||
``` |
|||
|
|||
Tieni in mente che React invocherà questa funzione abbastanza spesso, quindi l'implementazione deve essere veloce. |
|||
|
|||
Supponiamo che hai un'applicazione di messaggistica con parecchi thread di conversazioni. Supponi che solo uno dei thread sia cambiato. Se implementassimo `shouldComponentUpdate` sul componente `ChatThread`, React potrebbe saltare la fase di rendering per gli altri thread: |
|||
|
|||
```javascript |
|||
shouldComponentUpdate: function(nextProps, nextState) { |
|||
// TODO: restituisci true se il thread attuale è diverso |
|||
// da quello precedente. |
|||
} |
|||
``` |
|||
|
|||
Quindi, riassumendo, React evita di effettuare operazioni costose sul DOM richieste a riconciliare sottoalberi del DOM, permettendo all'utente di cortocircuitare il processo usando `shouldComponentUpdate`, e, per i casi in cui si debba aggiornare, confrontando i DOM virtuali. |
|||
|
|||
## shouldComponentUpdate in azione |
|||
|
|||
Ecco un sottoalbero di componenti. Per ciascuno di essi viene indicato cosa `shouldComponentUpdate` ha restituito e se i DOM virtuali siano equivalenti o meno. Infine, il colore del cerchio indica se il componente sia stato riconciliato o meno. |
|||
|
|||
<figure><img src="/react/img/docs/should-component-update.png" /></figure> |
|||
|
|||
Nell'esempio precedente, dal momento che `shouldComponentUpdate` ha restituito `false` per il sottoalbero di radice C2, React non ha avuto bisogno di generare il nuovo DOM virtuale, e quindi non ha nemmeno avuto bisogno di riconciliare il DOM. Nota che React non ha nemmeno avuto bisogno di invocare `shouldComponentUpdate` su C4 e C5. |
|||
|
|||
Per C1 e C3, `shouldComponentUpdate` ha restituito `true`, quindi React è dovuto scendere giù fino alle foglie e controllarle. Per C6 ha restituito `true`; dal momento che i DOM virtuali non erano equivalenti, ha dovuto riconciliare il DOM. |
|||
L'ultimo caso interessante è C8. Per questo nodo React ha dovuto calcolare il DOM virtuale, ma dal momento che era uguale al vecchio, non ha dovuto riconciliare il suo DOM. |
|||
|
|||
Nota che React ha dovuto effettuare mutazioni del DOM soltanto per C6, che era inevitabile. Per C8, lo ha evitato confrontando i DOM virtuali, e per il sottoalbero di C2 e C7, non ha neppure dovuto calcolare il DOM virtuale in quanto è stato esonerato da `shouldComponentUpdate`. |
|||
|
|||
Quindi, come dovremmo implementare `shouldComponentUpdate`? Supponiamo di avere un componente che visualizza soltanto un valore stringa: |
|||
|
|||
```javascript |
|||
React.createClass({ |
|||
propTypes: { |
|||
value: React.PropTypes.string.isRequired |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div>{this.props.value}</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Potremmo facilmente implementare `shouldComponentUpdate` come segue: |
|||
|
|||
```javascript |
|||
shouldComponentUpdate: function(nextProps, nextState) { |
|||
return this.props.value !== nextProps.value; |
|||
} |
|||
``` |
|||
|
|||
Finora tutto a posto, maneggiare queste semplici strutture proprietà e stato è molto facile. Potremmo anche generalizzare un'implementazione basata sull'uguaglianza superficiale e farne il mix dentro i componenti. Infatti, React fornisce già una tale implementazione: [PureRenderMixin](/react/docs/pure-render-mixin.html). |
|||
|
|||
Ma che succede se le proprietà o lo stato del tuo componente sono strutture dati mutevoli? Supponiamo che la proprietà che il componente riceve sia, anziché una stringa come `'bar'`, un oggetto JavaScript che contiene una stringa, come `{ foo: 'bar' }`: |
|||
|
|||
```javascript |
|||
React.createClass({ |
|||
propTypes: { |
|||
value: React.PropTypes.object.isRequired |
|||
}, |
|||
|
|||
render: function() { |
|||
return <div>{this.props.value.foo}</div>; |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
L'implementazione di `shouldComponentUpdate` che avevamo prima non funzionerebbe sempre come ci aspettiamo: |
|||
|
|||
```javascript |
|||
// assumiamo che this.props.value sia { foo: 'bar' } |
|||
// assumiamo che nextProps.value sia { foo: 'bar' }, |
|||
// ma questo riferimento è diverso da this.props.value |
|||
this.props.value !== nextProps.value; // true |
|||
``` |
|||
|
|||
Il problema è che `shouldComponentUpdate` restituirà `true` quando la proprietà non è in realtà cambiata. Per risolvere questo problema, potremmo proporre questa implementazione alternativa: |
|||
|
|||
```javascript |
|||
shouldComponentUpdate: function(nextProps, nextState) { |
|||
return this.props.value.foo !== nextProps.value.foo; |
|||
} |
|||
``` |
|||
|
|||
In breve, abbiamo finito per effettuare un confronto in profondità per assicurarci di accorgerci correttamente dei cambiamenti. In termini di prestazioni, questo approccio è molto costoso. Non scala in quanto dovremmo scrivere codice diverso per valutare l'uguaglianza in profondità per ciascun modello. Inoltre, potrebbe anche non funzionare per nulla se non gestiamo correttamente i riferimenti agli oggetti. Supponiamo che il componente sia usato da un genitore: |
|||
|
|||
```javascript |
|||
React.createClass({ |
|||
getInitialState: function() { |
|||
return { value: { foo: 'bar' } }; |
|||
}, |
|||
|
|||
onClick: function() { |
|||
var value = this.state.value; |
|||
value.foo += 'bar'; // ANTI-PATTERN! |
|||
this.setState({ value: value }); |
|||
}, |
|||
|
|||
render: function() { |
|||
return ( |
|||
<div> |
|||
<InnerComponent value={this.state.value} /> |
|||
<a onClick={this.onClick}>Click me</a> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
La prima volta che viene effettuato il rendering del componente interno, la sua proprietà value avrà il valore `{ foo: 'bar' }`. Se l'utente clicca l'ancora, lo stato del componente genitore sarà aggiornato a `{ value: { foo: 'barbar' } }`, scatenando il processo di ri-rendering sul componente interno, il quale riceverà `{ foo: 'barbar' }` come il nuovo valore della proprietà. |
|||
|
|||
Il problema è che, dal momento che il genitore e il componente interno condividono un riferimento allo stesso oggetto, quando l'oggetto viene modificato nella riga 2 della funzione `onClick`, la proprietà che il componente interno possedeva cambierà anch'essa. Quindi, quando il processo di ri-rendering inizia, e `shouldComponentUpdate` viene invocato, `this.props.value.foo` sarà uguale a `nextProps.value.foo`, perché infatti, `this.props.value` si riferisce allo stesso oggetto di `nextProps.value`. |
|||
|
|||
Di conseguenza, dal momento che non ci accorgiamo del cambiamento della proprietà e cortocircuitiamo il processo di ri-rendering, la UI non sarà aggiornata da `'bar'` a `'barbar'`. |
|||
|
|||
## Immutable-js viene in nostro soccorso |
|||
|
|||
[Immutable-js](https://github.com/facebook/immutable-js) è una libreria di collezioni JavaScript scritta da Lee Byron, che Facebook ha recentemente rilasciato come open source. Fornisce collezioni *immutabili e persistenti* attraverso *condivisione strutturale*. Vediamo cosa significano queste proprietà: |
|||
|
|||
* *Immutabile*: una volta creata, una collezione non può essere alterata in un momento successivo. |
|||
* *Persistente*: nuove collezioni possono essere create da una collezione precedente e una mutazione come un assegnamento. La collezione originale è ancora valida dopo che la nuova collezione è stata creata. |
|||
* *Condivisione Strutturale*: nuove collezioni sono create riutilizzando quanto più possibile della stessa struttura della collezione originale, riducendo le operazioni di copia al minimo, per ottenere efficienza spaziale e prestazioni accettabili. Se la nuova collezione è identica all'originale, l'originale è spesso restituita. |
|||
|
|||
L'immutabilità ci permette di tenere traccia dei cambiamenti in modo economico; un cambiamento risulterà sempre in un nuovo oggetto, quindi dobbiamo soltanto controllare se il riferimento all'oggeto sia cambiato. Ad esempio, in questo codice regolare JavaScript: |
|||
|
|||
```javascript |
|||
var x = { foo: "bar" }; |
|||
var y = x; |
|||
y.foo = "baz"; |
|||
x === y; // true |
|||
``` |
|||
|
|||
Sebbene `y` sia stato modificato, dal momento che si tratta di un riferimento allo stesso oggetto di `x`, questo confronto restituisce `true`. Tuttavia, questo codice potrebbe essere scritto usando immutable-js come segue: |
|||
|
|||
```javascript |
|||
var SomeRecord = Immutable.Record({ foo: null }); |
|||
var x = new SomeRecord({ foo: 'bar' }); |
|||
var y = x.set('foo', 'baz'); |
|||
x === y; // false |
|||
``` |
|||
|
|||
In questo caso, poiché un nuovo riferimento è restituito quando si modifica `x`, possiamo assumere in tutta sicurezza che `x` sia cambiato. |
|||
|
|||
Un'altra maniera possibile di tener traccia dei cambiamenti potrebbe essere il dirty checking, ovvero usare un flag impostato dai metodi setter. Un problema con questo approccio è che ti forza ad usare i setter e scrivere un sacco di codice aggiuntivo, oppure instrumentare in qualche modo le tue classi. In alternativa, puoi effettuare una copia profonda dell'oggetto immediatamente prima della mutazione ed effettuare un confronto in profondità per determinare se vi è stato un cambiamento oppure no. Un problema con questo approccio è che sia deepCopy che deepCompare sono operazioni costose. |
|||
|
|||
Quindi, le strutture dati Immutable ti forniscono una maniera economica e concisa di osservare i cambiamenti degli oggetti, che è tutto ciò che ci serve per implementare `shouldComponentUpdate`. Pertanto, se modelliamo gli attributi delle proprietà e dello stato usando le astrazioni fornite da immutable-js saremo in grado di usare `PureRenderMixin` e ottenere un grande aumento di prestazioni. |
|||
|
|||
## Immutable-js e Flux |
|||
|
|||
Se stai usando [Flux](https://facebook.github.io/flux/), dovresti cominciare a scrivere i tuoi store usando immutable-js. Dài un'occhiata alla [API completa](https://facebook.github.io/immutable-js/docs/#/). |
|||
|
|||
Vediamo una delle possibili maniere di modellare l'esempio dei thread usando strutture dati Immutable. Anzitutto, dobbiamo definire un `Record` per ciascuna delle entità che desideriamo modellare. I Record sono semplicemente contenitori immutabili che contengono valori per un insieme specifico di campi: |
|||
|
|||
```javascript |
|||
var User = Immutable.Record({ |
|||
id: undefined, |
|||
name: undefined, |
|||
email: undefined |
|||
}); |
|||
|
|||
var Message = Immutable.Record({ |
|||
timestamp: new Date(), |
|||
sender: undefined, |
|||
text: '' |
|||
}); |
|||
``` |
|||
|
|||
La funzione `Record` riceve un oggetto che definisce i campi che l'oggetto possiede e i loro valori predefiniti. |
|||
|
|||
Lo *store* dei messaggi potrebbe tenere traccia degli utenti e dei messaggi usando due liste: |
|||
|
|||
```javascript |
|||
this.users = Immutable.List(); |
|||
this.messages = Immutable.List(); |
|||
``` |
|||
|
|||
Dovrebbe essere abbastanza banale implementare funzioni che gestiscono ciascun tipo di *payload*. Ad esempio, quando lo store vede un payload che rappresenta un messaggio, possiamo semplicemente creare un nuovo record e metterlo in coda alla lista di messaggi: |
|||
|
|||
```javascript |
|||
this.messages = this.messages.push(new Message({ |
|||
timestamp: payload.timestamp, |
|||
sender: payload.sender, |
|||
text: payload.text |
|||
}); |
|||
``` |
|||
|
|||
Nota che dal momento che le strutture dati sono immutabili, dobbiamo assegnare il valore di ritorno del metodo push a `this.messages`. |
|||
|
|||
Dal punto di vista di React, se usiamo strutture dati immutable-js anche per contenere lo stato del componente, possiamo fare il mix di `PureRenderMixin` in tutti i nostri componenti e cortocircuitare il processo di ri-rendering. |
|||
@ -0,0 +1,9 @@ |
|||
--- |
|||
id: complementary-tools-it-IT |
|||
title: Strumenti Complementari |
|||
permalink: complementary-tools-it-IT.html |
|||
prev: videos-it-IT.html |
|||
next: examples-it-IT.html |
|||
--- |
|||
|
|||
Questa pagina è stata spostata sul [wiki di GitHub](https://github.com/facebook/react/wiki/Complementary-Tools). |
|||
@ -0,0 +1,19 @@ |
|||
--- |
|||
id: conferences-it-IT |
|||
title: Conferenze |
|||
permalink: conferences-it-IT.html |
|||
prev: thinking-in-react-it-IT.html |
|||
next: videos-it-IT.html |
|||
--- |
|||
|
|||
### React.js Conf 2015 |
|||
28 e 29 Gennaio |
|||
|
|||
[Sito web](http://conf.reactjs.com/) - [Agenda](http://conf.reactjs.com/schedule.html) - [Video](https://www.youtube-nocookie.com/playlist?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr) |
|||
|
|||
<iframe width="650" height="315" src="//www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
### ReactEurope 2015 |
|||
2 e 3 Luglio |
|||
|
|||
[Sito web](http://www.react-europe.org/) - [Agenda](http://www.react-europe.org/#schedule) |
|||
@ -0,0 +1,8 @@ |
|||
--- |
|||
id: examples-it-IT |
|||
title: Esempi |
|||
permalink: examples-it-IT.html |
|||
prev: complementary-tools-it-IT.html |
|||
--- |
|||
|
|||
Questa pagina è stata spostata sul [wiki di GitHub](https://github.com/facebook/react/wiki/Examples). |
|||
@ -0,0 +1,7 @@ |
|||
--- |
|||
id: flux-overview-it-IT |
|||
title: Architettura di un'Applicazione Flux |
|||
permalink: flux-overview-it-IT.html |
|||
--- |
|||
|
|||
Questa pagina è stata spostata sul sito di Flux. [Leggila qui](https://facebook.github.io/flux/docs/overview.html). |
|||
@ -0,0 +1,7 @@ |
|||
--- |
|||
id: flux-todo-list-it-IT |
|||
title: Tutorial TodoMVC Flux |
|||
permalink: flux-todo-list-it-IT.html |
|||
--- |
|||
|
|||
Questa pagina è stata spostata sul sito di Flux. [Leggila qui](https://facebook.github.io/flux/docs/todo-list.html). |
|||
@ -0,0 +1,123 @@ |
|||
--- |
|||
id: getting-started-it-IT |
|||
title: Primi Passi |
|||
permalink: getting-started-it-IT.html |
|||
next: tutorial-it-IT.html |
|||
redirect_from: "docs/index.html" |
|||
--- |
|||
|
|||
## JSFiddle |
|||
|
|||
La maniera più semplice di cominciare ad hackerare con React è usare i seguenti esempi di Hello World su JSFiddle: |
|||
|
|||
* **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)** |
|||
* [React JSFiddle senza JSX](https://jsfiddle.net/reactjs/5vjqabv3/) |
|||
|
|||
## Starter Kit |
|||
|
|||
Scarica lo starter kit per cominciare. |
|||
|
|||
<div class="buttons-unit downloads"> |
|||
<a href="/react/downloads/react-{{site.react_version}}.zip" class="button"> |
|||
Scarica lo Starter Kit {{site.react_version}} |
|||
</a> |
|||
</div> |
|||
|
|||
Nella directory principale dello starter kit, crea `helloworld.html` con il seguente contenuto. |
|||
|
|||
```html |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<title>Ciao React!</title> |
|||
<script src="build/react.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="example"></div> |
|||
<script type="text/babel"> |
|||
React.render( |
|||
<h1>Cial, mondo!</h1>, |
|||
document.getElementById('example') |
|||
); |
|||
</script> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
La sintassi XML all'interno di JavaScript è chiamata JSX; dài un'occhiata alla [sintassi JSX](/react/docs/jsx-in-depth.html) per saperne di più. Allo scopo di tradurla in puro JavaScript usiamo `<script type="text/babel">` e includiamo Babel per effettuare la trasformazione effettiva nel browser. |
|||
|
|||
### File Separato |
|||
|
|||
Il tuo codice React JSX può trovarsi in un file a parte. Crea il seguente `src/helloworld.js`. |
|||
|
|||
```javascript |
|||
React.render( |
|||
<h1>Ciao, mondo!</h1>, |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
Quindi fai riferimento ad esso da `helloworld.html`: |
|||
|
|||
```html{10} |
|||
<script type="text/babel" src="src/helloworld.js"></script> |
|||
``` |
|||
|
|||
Nota che in alcuni browsers (Chrome, ad esempio) falliranno nel caricamento del file a meno che non sia servito tramite HTTP. |
|||
|
|||
### Trasformazione Offline |
|||
|
|||
Anzitutto installa gli strumenti da riga di comando di [Babel](http://babeljs.io/) (è richiesto [npm](https://www.npmjs.com/)): |
|||
|
|||
``` |
|||
npm install --global babel |
|||
``` |
|||
|
|||
Quindi, traduci il tuo file `src/helloworld.js` a semplice JavaScript: |
|||
|
|||
``` |
|||
babel src --watch --out-dir build |
|||
|
|||
``` |
|||
|
|||
Il file `build/helloworld.js` è generato automaticamente ogni qualvolta effettui un cambiamento. Leggi la [documentazione di Babel CLI](http://babeljs.io/docs/usage/cli/) per un uso più avanzato. |
|||
|
|||
```javascript{2} |
|||
React.render( |
|||
React.createElement('h1', null, 'Ciao, mondo!'), |
|||
document.getElementById('example') |
|||
); |
|||
``` |
|||
|
|||
|
|||
Aggiorna il tuo file HTML come segue: |
|||
|
|||
```html{7,11} |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<title>Ciao React!</title> |
|||
<script src="build/react.js"></script> |
|||
<!-- Non c'è bisogno di Babel! --> |
|||
</head> |
|||
<body> |
|||
<div id="example"></div> |
|||
<script src="build/helloworld.js"></script> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
## Vuoi CommonJS? |
|||
|
|||
Se vuoi usare React con [browserify](http://browserify.org/), [webpack](https://webpack.github.io/), o un altro sistema modulare compatibile con CommonJS, usa il [pacchetto npm `react`](https://www.npmjs.com/package/react). In aggiunta, lo strumento di build `jsx` può essere integrato in quasi tutti i sistemi di packaging (non soltanto CommonJS) assai facilmente. |
|||
|
|||
## Passi Successivi |
|||
|
|||
Dài un'occhiata [al tutorial](/react/docs/tutorial-it-IT.html) e agli altri esempi nella directory `examples` dello starter kit per saperne di più. |
|||
|
|||
Abbiamo anche un wiki al quale la comunità contribuisce con [flussi di lavoro, componenti UI, routing, gestione dati etc.](https://github.com/facebook/react/wiki/Complementary-Tools) |
|||
|
|||
In bocca al lupo, e benvenuto/a! |
|||
@ -0,0 +1,195 @@ |
|||
--- |
|||
id: top-level-api-it-IT |
|||
title: API di Livello Elevato |
|||
permalink: top-level-api-it-IT.html |
|||
next: component-api-it-IT.html |
|||
redirect_from: "/docs/reference.html" |
|||
--- |
|||
|
|||
## React |
|||
|
|||
`React` è il punto di ingresso alla libreria React. Se stai usando uno dei pacchetti precompilati, è disponibile come variabile globale; se stai usando i moduli CommonJS puoi richiederlo con `require()`. |
|||
|
|||
|
|||
### React.Component |
|||
|
|||
```javascript |
|||
class Component |
|||
``` |
|||
|
|||
Questa è la classe base per i componenti React quando sono definiti usando le classi ES6. Vedi [Componenti Riutilizzabili](/react/docs/reusable-components.html#es6-classes) per usare le classi ES6 con React. Per i metodi forniti dalla classe base, vedi la [API dei Componenti](/react/docs/component-api.html). |
|||
|
|||
|
|||
### React.createClass |
|||
|
|||
```javascript |
|||
ReactClass createClass(object specification) |
|||
``` |
|||
|
|||
Crea la classe di un componente, data una specifica. Un componente implementa un metodo `render` che restituisce **un singolo** figlio. Tale figlio può avere una struttura di fogli arbitrariamente profonda. Una cosa che rende i componenti diversi dalle classi prototipiche standard è che non hai bisogno di chiamare `new` su di esse. Sono delle convenienti astrazioni che costruiscono (attraverso `new`) istanze dietro le quinte per te. |
|||
|
|||
Per maggiori informazioni sull'oggetto specifica, vedi [Specifiche dei Componenti e Ciclo di Vita](/react/docs/component-specs.html). |
|||
|
|||
|
|||
### React.createElement |
|||
|
|||
```javascript |
|||
ReactElement createElement( |
|||
string/ReactClass type, |
|||
[object props], |
|||
[children ...] |
|||
) |
|||
``` |
|||
|
|||
Crea e restituisce un nuovo `ReactElement` del tipo desiderato. L'argomento `type` può essere una stringa contenente il nome di un tag HTML (ad es. 'div', 'span', etc), oppure una `ReactClass` (creata attraverso `React.createClass`). |
|||
|
|||
|
|||
### React.cloneElement |
|||
|
|||
``` |
|||
ReactElement cloneElement( |
|||
ReactElement element, |
|||
[object props], |
|||
[children ...] |
|||
) |
|||
``` |
|||
|
|||
Clona e restituisce un nuovo `ReactElement` usando `element` come punto di partenza. L'elemento risultante avrà le proprietà dell'elemento originale, con le nuove proprietà unite in maniera superficiale. I figli esistenti sono sostituiti dai figli passati come `children`. Diversamente da `React.addons.cloneWithProps`, `key` e `ref` dell'elemento originale saranno preservati. Non esiste alcun comportamento speciale per riunire le proprietà (diversamente da `cloneWithProps`). Vedi l'[articolo del blog sulla v0.13 RC2](/react/blog/2015/03/03/react-v0.13-rc2.html) per maggiori dettagli. |
|||
|
|||
|
|||
### React.createFactory |
|||
|
|||
```javascript |
|||
factoryFunction createFactory( |
|||
string/ReactClass type |
|||
) |
|||
``` |
|||
|
|||
Restituisce una funzione che produce ReactElements di un tipo desiderato. Come `React.createElement`, |
|||
l'argomento `type` può essere sia la stringa contenente il nome di un tag HTML (ad es. 'div', 'span', etc), oppure una |
|||
`ReactClass`. |
|||
|
|||
|
|||
### React.render |
|||
|
|||
```javascript |
|||
ReactComponent render( |
|||
ReactElement element, |
|||
DOMElement container, |
|||
[function callback] |
|||
) |
|||
``` |
|||
|
|||
Effettua il rendering di un ReactElement nel DOM all'interno dell'elemento `container` fornito e restituisce un [riferimento](/react/docs/more-about-refs-it-IT.html) al componente (oppure restituisce `null` per i [componenti privi di stato](/react/docs/reusable-components-it-IT.html#stateless-functions)). |
|||
|
|||
Se il rendering del ReactElement è stato precedentemente effettuato all'interno di `container`, questa operazione effettuerà un aggiornamento su di esso e modificherà il DOM in modo necessario a riflettere il più recente componente React. |
|||
|
|||
Se la callback opzionale è fornita, sarà eseguita dopo che il rendering o l'aggiornamento del componente sono stati effettuati. |
|||
|
|||
> Nota: |
|||
> |
|||
> `React.render()` controlla i contenuti del nodo contenitore che viene passato come argomento `container`. Gli elementi DOM |
|||
> esistenti al suo interno sono sostituiti quando viene chiamata la prima volta. Le chiamate successive usano l'algoritmo di |
|||
> differenza di React per aggiornamenti efficienti. |
|||
> |
|||
> `React.render()` non modifica il nodo contenitore (modifica soltanto i figli del contenitore). In |
|||
> futuro potrebbe essere possibile inserire un componente in un nodo DOM esistente senza sovrascrivere i figli esistenti. |
|||
|
|||
|
|||
### React.unmountComponentAtNode |
|||
|
|||
```javascript |
|||
boolean unmountComponentAtNode(DOMElement container) |
|||
``` |
|||
|
|||
Rimuove un componente React montato nel DOM e ripulisce i suoi gestori di evento e lo stato. Se nessun componente è stato montato nel contenitore `container`, chiamare questa funzione non ha alcun effetto. Restituisce `true` se il componente è stato smontato e `false` se non è stato trovato un componente da smontare. |
|||
|
|||
|
|||
### React.renderToString |
|||
|
|||
```javascript |
|||
string renderToString(ReactElement element) |
|||
``` |
|||
|
|||
Effettua il rendering di un ReactElement come il suo HTML iniziale. Questo dovrebe essere utilizzato soltanto lato server. React restituirà una stringa di HTML. Puoi usare questo metodo per generare HTML sul server e inviare il markup come risposta alla richiesta iniziale per un più rapido caricamento della pagina, e permettere ai motori di ricerca di effettuare il crawling della tua pagina per ottimizzazione SEO. |
|||
|
|||
Se chiami `React.render()` su un nodo che possiede già questo markup generato lato server, React lo preserverà e vi attaccherà soltanto i gestori di eventi, permettendoti di avere una esperienza di primo caricamento altamente efficiente. |
|||
|
|||
|
|||
### React.renderToStaticMarkup |
|||
|
|||
```javascript |
|||
string renderToStaticMarkup(ReactElement element) |
|||
``` |
|||
|
|||
Simile a `renderToString`, eccetto che non crea attributi DOM aggiuntivi come `data-react-id`, che React utilizza internamente. Questo è utile se vuoi usare React come un semplice generatore di pagine statiche, in quanto eliminare gli attributi aggiuntivi può risparmiare parecchi byte. |
|||
|
|||
|
|||
### React.isValidElement |
|||
|
|||
```javascript |
|||
boolean isValidElement(* object) |
|||
``` |
|||
|
|||
Verifica che `object` sia un ReactElement. |
|||
|
|||
|
|||
### React.findDOMNode |
|||
|
|||
```javascript |
|||
DOMElement findDOMNode(ReactComponent component) |
|||
``` |
|||
Se questo componente è stato montato nel DOM, restituisce il corrispondente elemento DOM nativo del browser. Questo metodo è utile per leggere i valori dal DOM, come i valori dei campi dei moduli ed effettuare misure sul DOM. Quando `render` restituisce `null` o `false`, `findDOMNode` restituisce `null`. |
|||
|
|||
> Nota: |
|||
> |
|||
> `findDOMNode()` è una via di fuga usata per accedere al nodo DOM sottostante. Nella maggior parte dei casi, l'uso di questa via di fuga è scoraggiato perché viola l'astrazione del componente. Tuttavia, esistono delle situazioni in cui questo è necessario (ad esempio, potresti aver bisogno di trovare un nodo DOM per posizionarlo in maniera assoluta oppure determinarne la larghezza visualizzata misurata in pixel). |
|||
|
|||
> |
|||
> `findDOMNode()` funziona soltanto su componenti montati (cioè, componenti che sono stati posizionati nel DOM). Se provi a chiamarlo su un componente che non è stato ancora montato (come chiamare `findDOMNode()` in `render()` su un componente che deve ancora essere creato) lancerà un'eccezione. |
|||
|
|||
### React.DOM |
|||
|
|||
`React.DOM` fornisce convenienti utilità che espongono `React.createElement` per componenti del DOM. Questi dovrebbero essere usate soltanto quando non si utilizza JSX. Ad esempio, `React.DOM.div(null, 'Ciao Mondo!')` |
|||
|
|||
|
|||
### React.PropTypes |
|||
|
|||
`React.PropTypes` include tipi che possono essere usati con l'oggetto `propTypes` di un componente per validare le proprietà passate ai tuoi componenti. Per maggiori informazioni su `propTypes`, vedi [Componenti Riutilizzabili](/react/docs/reusable-components.html). |
|||
|
|||
|
|||
### React.Children |
|||
|
|||
`React.Children` fornisce utilitià per gestire la struttura dati opaca `this.props.children`. |
|||
|
|||
#### React.Children.map |
|||
|
|||
```javascript |
|||
object React.Children.map(object children, function fn [, object thisArg]) |
|||
``` |
|||
|
|||
Invoca `fn` su ciascuno dei diretti discendenti contenuti in `children`, con `this` impostato a `thisArg`. Se `children` è un oggetto annidato o un array, esso verrà attraversato: ad `fn` non saranno mai passati gli oggetti contenitori. Se `children` è `null` o `undefined` restituisce `null` o `undefined` anziché un oggetto vuoto. |
|||
|
|||
#### React.Children.forEach |
|||
|
|||
```javascript |
|||
React.Children.forEach(object children, function fn [, object thisArg]) |
|||
``` |
|||
|
|||
Come `React.Children.map()` con la differenza che non restituisce un oggetto. |
|||
|
|||
#### React.Children.count |
|||
|
|||
```javascript |
|||
number React.Children.count(object children) |
|||
``` |
|||
|
|||
Restituisce il numero totale di componenti in `children`, uguale al numero di volte che una callback passata a `map` o `forEach` verrebbe invocata. |
|||
|
|||
#### React.Children.only |
|||
|
|||
```javascript |
|||
object React.Children.only(object children) |
|||
``` |
|||
|
|||
Restituisce il figlio unico contenuto in `children`, altrimenti lancia un'eccezione. |
|||
@ -0,0 +1,146 @@ |
|||
--- |
|||
id: component-api-it-IT |
|||
title: API dei Componenti |
|||
permalink: component-api-it-IT.html |
|||
prev: top-level-api-it-IT.html |
|||
next: component-specs-it-IT.html |
|||
--- |
|||
|
|||
## React.Component |
|||
|
|||
Istanze di un React Component sono create internamente a React durante il rendering. Queste istanze sono riutilizzate in rendering successivi, e possono essere accedute dai metodi del tuo componente come `this`. L'unica maniera di ottenere un riferimento a una istanza di un React Component fuori da React è conservare il valore restituito da `React.render`. All'interno di altri Component, puoi utilizzare [i ref](/react/docs/more-about-refs.html) per ottenere il medesimo risultato. |
|||
|
|||
|
|||
### setState |
|||
|
|||
```javascript |
|||
setState( |
|||
function|object nextState, |
|||
[function callback] |
|||
) |
|||
``` |
|||
Effettua una combinazione di `nextState` nello stato attuale. Questo è il metodo principale che va usato per scatenare aggiornamenti della UI da gestori di eventi e callback di richieste al server. |
|||
|
|||
Il primo argomento può essere un oggetto (contenente zero o più chiavi da aggiornare) o una funzione (con argomenti `state` e `props`) che restituisce un oggetto contenente chiavi da aggiornare. |
|||
|
|||
Ecco come utilizzarla passando un oggetto: |
|||
|
|||
```javascript |
|||
setState({mykey: 'my new value'}); |
|||
``` |
|||
|
|||
È anche possibile passare una funzione con la firma `function(state, props)`. Questo può essere utile in certi casi quando desideri accodare un aggiornamento atomico che consulta i valori precedenti di state+props prima di impostare i nuovi valori. Ad esempio, supponi che vogliamo incrementare un valore nello stato: |
|||
|
|||
```javascript |
|||
setState(function(previousState, currentProps) { |
|||
return {myInteger: previousState.myInteger + 1}; |
|||
}); |
|||
``` |
|||
|
|||
Il secondo parametro (opzionale) è una funzione callback che verrà eseguita quando `setState` ha terminato e il rendering del componente è stato effettuato. |
|||
|
|||
> Note: |
|||
> |
|||
> *MAI* modificare `this.state` direttamente, in quanto chiamare `setState()` successivamente potrebbe sovrascrivere la modifica fatta. Tratta `this.state` come se fosse immutabile. |
|||
> |
|||
> `setState()` non cambia immediatamente `this.state`, ma crea una transizione di stato in corso. Accedere `this.state` subito dopo aver chiamato questo metodo potrebbe potenzialmente restituire il valore precedente. |
|||
> |
|||
> Non viene garantita alcuna sincronicità per le chiamate di `setState`, e le chiamate stesse potrebbero essere raggruppate per migliorare le prestazioni. |
|||
> |
|||
> `setState()` scatena sempre un ri-rendering a meno che la logica di rendering condizionale venga implementata in `shouldComponentUpdate()`. Se oggetti mutabili sono usati e la logica non può essere implementata in `shouldComponentUpdate()`, chiamare `setState()` solo quando il nuovo stato differisce dal precedente eviterà ri-rendering superflui. |
|||
|
|||
|
|||
### replaceState |
|||
|
|||
```javascript |
|||
replaceState( |
|||
object nextState, |
|||
[function callback] |
|||
) |
|||
``` |
|||
|
|||
Come `setState()`, ma elimina ogni chiave preesistente che non si trova in `nextState`. |
|||
|
|||
> Nota: |
|||
> |
|||
> Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React. |
|||
|
|||
|
|||
### forceUpdate |
|||
|
|||
```javascript |
|||
forceUpdate( |
|||
[function callback] |
|||
) |
|||
``` |
|||
|
|||
In modo predefinito, quando lo stato o le proprietà del tuo componente cambiano, ne verrà effettuato il ri-rendering. Tuttavia, se questi cambiano implicitamente (ad es.: dati profondi all'interno di un oggetto cambiano senza che l'oggetto stesso cambi) o se il tuo metodo `render()` dipende da altri dati, puoi istruire React perché riesegua `render()` chiamando `forceUpdate()`. |
|||
|
|||
Chiamare `forceUpdate()` causerà la chiamata di `render()` sul componente, saltando l'esecuzione di `shouldComponentUpdate()`. Questo scatenerà i normali metodi del ciclo di vita per i componenti figli, incluso il metodo `shouldComponentUpdate()` di ciascun figlio. React tuttavia aggiornerà il DOM soltanto se il markup effettivamente cambia. |
|||
|
|||
Normalmente dovresti cercare di evitare l'uso di `forceUpdate()` e leggere soltanto `this.props` e `this.state` all'interno di `render()`. Ciò rende il tuo componente "puro" e la tua applicazione molto più semplice ed efficiente. |
|||
|
|||
|
|||
### getDOMNode |
|||
|
|||
```javascript |
|||
DOMElement getDOMNode() |
|||
``` |
|||
|
|||
Se questo componente è stato montato nel DOM, restituisce il corrispondente elemento DOM nativo del browser. Questo metodo è utile per leggere valori dal DOM, come valori dei campi dei moduli ed effettuare misure sul DOM. Quando `render` restituisce `null` o `false`, `this.getDOMNode()` restituisce `null`. |
|||
|
|||
> Nota: |
|||
> |
|||
> getDOMNode è deprecato ed è stato sostituito da [React.findDOMNode()](/react/docs/top-level-api.html#react.finddomnode). |
|||
> |
|||
> Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React. |
|||
|
|||
|
|||
### isMounted |
|||
|
|||
```javascript |
|||
bool isMounted() |
|||
``` |
|||
|
|||
`isMounted()` restituisce `true` se il rendering del componente è stato effettuato nel DOM, `false` altrimenti. Puoi usare questo metodo come guardia per chiamate asincrone a `setState()` o `forceUpdate()`. |
|||
|
|||
> Nota: |
|||
> |
|||
> Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React. |
|||
|
|||
|
|||
### setProps |
|||
|
|||
```javascript |
|||
setProps( |
|||
object nextProps, |
|||
[function callback] |
|||
) |
|||
``` |
|||
|
|||
Quando stai integrando con un'applicazione JavaScript esterna puoi voler segnalare un cambiamento a un componente React il cui rendering è stato effettuato con `React.render()`. |
|||
|
|||
Chiamare `setProps()` su un componente al livello radice cambierà le sue proprietà e scatenerà un ri-rendering. Inoltre, puoi fornire una funzione callback opzionale che verrà eseguita quando `setProps` ha terminato e il rendering del componente è terminato. |
|||
|
|||
> Nota: |
|||
> |
|||
> Quando possibile, l'approccio dichiarativo di invocare nuovamente `React.render()` sullo stesso nodo è preferibile. Quest'ultimo tende a rendere gli aggiornamenti più comprensibili. (Non vi è una differenza significativa di prestazioni tra i due approcci.) |
|||
> |
|||
> Questo metodo può essere chiamato soltanto su un componente al livello radice. Ovvero, è disponibile soltanto sul componente passato direttamente a `React.render()` e nessuno dei suoi figli. Se il tuo intento è usare `setProps()` su un componente figlio, approfitta degli aggiornamenti reattivi e passa la nuova proprietà al componente figlio quando viene creato in `render()`. |
|||
> |
|||
> Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React. |
|||
|
|||
### replaceProps |
|||
|
|||
```javascript |
|||
replaceProps( |
|||
object nextProps, |
|||
[function callback] |
|||
) |
|||
``` |
|||
|
|||
Come `setProps()` ma elimina ogni proprietà preesistente anziché riunire i due oggetti. |
|||
|
|||
> Nota: |
|||
> |
|||
> Questo metodo non è disponibile il componenti `class` ES6 che estendono `React.Component`. Potrebbe essere eliminato del tutto in una versione futura di React. |
|||
@ -0,0 +1,217 @@ |
|||
--- |
|||
id: component-specs-it-IT |
|||
title: Specifica dei Componenti e Ciclo di Vita |
|||
permalink: component-specs-it-IT.html |
|||
prev: component-api-it-IT.html |
|||
next: tags-and-attributes-it-IT.html |
|||
--- |
|||
|
|||
## Specifica dei Componenti |
|||
|
|||
Quando crei una classe di componente invocando `React.createClass()`, devi fornire un oggetto specifica che contiene un metodo `render` che può contenere opzionalmete altri metodi del ciclo di vita descritti di seguito. |
|||
|
|||
> Nota: |
|||
> |
|||
> È anche possibile usare pure classi JavaScript come classi di componente. Queste classi possono implementare la maggior parte degli stessi metodi, sebbene vi siano delle differenze. Per maggiori informazioni su queste differenze, leggi la nostra documentazione sulle [classi ES6](/react/docs/reusable-components.html#es6-classes). |
|||
|
|||
### render |
|||
|
|||
```javascript |
|||
ReactElement render() |
|||
``` |
|||
|
|||
Il metodo `render()` è richiesto. |
|||
|
|||
Quando viene chiamato, dovrebbe esaminare `this.props` e `this.state` e restituire un singolo elemento figlio. Questo elemento figlio può essere sia una rappresentazione virtuale di un componente DOM nativo (come `<div />` o `React.DOM.div()`) o un altro componente composito che hai definito tu stesso. |
|||
|
|||
Puoi anche restituire `null` o `false` per indicare che desideri che non venga visualizzato nulla. Dietro le quinte, React visualizza un tag `<noscript>` per lavorare con il nostro attuale algoritmo di differenza. Quando si restituisce `null` o `false`, `React.findDOMNode(this)` restituirà `null`. |
|||
|
|||
La funzione `render()` dovrebbe essere *pura*, nel senso che non modifica lo stato del componente, restituisce lo stesso risultato ogni volta che viene invocato, e non legge o scrive il DOM o interagisce in altro modo con il browser (ad es. usando `setTimeout`). Se devi interagire con il browser, effettua le tue operazioni in `componentDidMount()` o negli altri metodi del ciclo di vita. Mantenere `render()` puro rende il rendering lato server più praticabile e rende i componenti più facili da comprendere. |
|||
|
|||
|
|||
### getInitialState |
|||
|
|||
```javascript |
|||
object getInitialState() |
|||
``` |
|||
|
|||
Invocato una volta prima che il componente venga montato. Il valore di ritorno sarà usato come il valore iniziale di `this.state`. |
|||
|
|||
|
|||
### getDefaultProps |
|||
|
|||
```javascript |
|||
object getDefaultProps() |
|||
``` |
|||
|
|||
Invocato una volta e conservato quando la classe è creata. I valori nella mappa saranno impostati in `this.props` se tale proprietà non è specificata dal componente genitore (ad es. usando un controllo `in`). |
|||
|
|||
Questo metodo è invocato prima che un'istanza sia creata e quindi non può dipendere da `this.props`. Inoltre, tieni presente che ogni oggetto complesso restituito da `getDefaultProps()` sarà condiviso tra le diverse istanze, non copiato. |
|||
|
|||
|
|||
### propTypes |
|||
|
|||
```javascript |
|||
object propTypes |
|||
``` |
|||
|
|||
L'oggetto `propTypes` ti permette di validare le proprietà passate ai tuoi componenti. Per maggiori informazioni su `propTypes`, leggi [Componenti Riutilizzabili](/react/docs/reusable-components-it-IT.html). |
|||
|
|||
|
|||
### mixins |
|||
|
|||
```javascript |
|||
array mixins |
|||
``` |
|||
|
|||
L'array `mixins` ti permette di usare i mixin per condividere il comportamento tra componenti multipli. Per maggiori informazioni sui mixin, leggi [Componenti Riutilizzabili](/react/docs/reusable-components-it-IT.html). |
|||
|
|||
|
|||
### statics |
|||
|
|||
```javascript |
|||
object statics |
|||
``` |
|||
|
|||
L'oggetto `statics` ti permette di definire metodi statici che possono essere chiamati sulla classe del componente. Ad esempio: |
|||
|
|||
```javascript |
|||
var MyComponent = React.createClass({ |
|||
statics: { |
|||
customMethod: function(foo) { |
|||
return foo === 'bar'; |
|||
} |
|||
}, |
|||
render: function() { |
|||
} |
|||
}); |
|||
|
|||
MyComponent.customMethod('bar'); // true |
|||
``` |
|||
|
|||
I metodi definiti in questo blocco sono _statici_, ovvero puoi eseguirli prima che un'istanza del componente venga creata, e i metodi non hanno accesso alle proprietà e lo stato dei tuoi componenti. Se desideri confrontare i valori delle proprietà in un metodo statico, devi farle passare dal chiamante al metodo statico tramite un argomento. |
|||
|
|||
|
|||
### displayName |
|||
|
|||
```javascript |
|||
string displayName |
|||
``` |
|||
|
|||
La stringa `displayName` viene usata nei messaggi di debug. JSX imposta questo valore automaticamente; vedi [JSX in Profondità](/react/docs/jsx-in-depth-it-IT.html#the-transform). |
|||
|
|||
|
|||
## Metodi del Ciclo di Vita |
|||
|
|||
Vari metodi vengono eseguiti durante precisi momenti del ciclo di vita di un componente. |
|||
|
|||
|
|||
### Montaggio: componentWillMount |
|||
|
|||
```javascript |
|||
componentWillMount() |
|||
``` |
|||
|
|||
Invocato una volta, sia sul client che sul server, immediatamente prima che il rendering iniziale abbia luogo. Se chiami `setState` all'interno di questo metodo, `render()` vedrà lo stato aggiornato e sarà eseguito solo una volta nonostante il cambiamento di stato. |
|||
|
|||
|
|||
### Montaggio: componentDidMount |
|||
|
|||
```javascript |
|||
componentDidMount() |
|||
``` |
|||
|
|||
Invocato una volta, solo sul client (e non sul server), immediatamente dopo che il rendering iniziale ha avuto luogo. A questo punto del ciclo di vita, il componente ha una rappresentazione DOM che puoi accedere attraverso `React.findDOMNode(this)`. Il metodo `componentDidMount()` dei componenti figli è invocato prima di quello dei componenti genitori. |
|||
|
|||
Se desideri integrare con altri framework JavaScript, impostare dei timer usando `setTimeout` o `setInterval`, oppure inviare richieste AJAX, effettua tali operazioni in questo metodo. |
|||
|
|||
|
|||
### Aggiornamento: componentWillReceiveProps |
|||
|
|||
```javascript |
|||
componentWillReceiveProps( |
|||
object nextProps |
|||
) |
|||
``` |
|||
|
|||
Invocato quando un componente sta ricevendo nuove proprietà. Questo metodo non viene chiamato durante il rendering iniziale. |
|||
|
|||
Usa questo metodo come opportunità per reagire a una transizione di proprietà prima che `render()` venga chiamato, aggiornando lo stato usando `this.setState()`. I vecchi valori delle proprietà possono essere letti tramite `this.props`. Chiamare `this.setState()` all'interno di questa funzione non scatenerà un rendering addizionale. |
|||
|
|||
```javascript |
|||
componentWillReceiveProps: function(nextProps) { |
|||
this.setState({ |
|||
likesIncreasing: nextProps.likeCount > this.props.likeCount |
|||
}); |
|||
} |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> Non esiste un metodo analogo `componentWillReceiveState`. Una imminente transizione delle proprietà potrebbe causare un cambiamento di stato, ma il contrario non è vero. Se devi effettuare delle operazioni in risposta a un cambiamento di stato, usa `componentWillUpdate`. |
|||
|
|||
|
|||
### Aggiornamento: shouldComponentUpdate |
|||
|
|||
```javascript |
|||
boolean shouldComponentUpdate( |
|||
object nextProps, object nextState |
|||
) |
|||
``` |
|||
|
|||
Invocato prima del rendering quando vengono ricevuti nuove proprietà o un nuovo stato. Questo metodo non viene chiamato per il rendering iniziale o quando viene usato `forceUpdate`. |
|||
|
|||
Usa questo metodo come opportunità per restituire `false` quando si è certi che la transizione alle nuove proprietà e al nuovo stato non richieda un aggiornamento del componente. |
|||
|
|||
```javascript |
|||
shouldComponentUpdate: function(nextProps, nextState) { |
|||
return nextProps.id !== this.props.id; |
|||
} |
|||
``` |
|||
|
|||
Se `shouldComponentUpdate` restituisce false, allora `render()` sarà saltato completamente fino al prossimo cambiamento di stato. Inoltre, `componentWillUpdate` e `componentDidUpdate` non verranno chiamati. |
|||
|
|||
In modo predefinito, `shouldComponentUpdate` restituisce sempre `true` per evitare bachi subdoli quando `state` viene modificato direttamente, ma se hai l'accortezza di trattare sempre `state` come immutabile e accedere a `props` e `state` in sola lettura in `render()`, allora puoi tranquillamente ridefinire `shouldComponentUpdate` con un'implementazione che confronta i vecchi valori di props e state con quelli nuovi. |
|||
|
|||
Se le prestazioni diventano un collo di bottiglia, specialmente in presenza di decine o centinaia di componenti, usa `shouldComponentUpdate` per accelerare la tua applicazione. |
|||
|
|||
|
|||
### Aggiornamento: componentWillUpdate |
|||
|
|||
```javascript |
|||
componentWillUpdate( |
|||
object nextProps, object nextState |
|||
) |
|||
``` |
|||
|
|||
Invocato immediatamente prima del rendering quando nuove proprietà o un nuovo stato vengono ricevuti. Questo metodo non viene chiamato per il rendering iniziale. |
|||
|
|||
Usa questo metodo come opportunità per effettuare la preparazione prima che si verifichi un aggiornamento. |
|||
|
|||
> Nota: |
|||
> |
|||
> *Non puoi* usare `this.setState()` in questo metodo. Se devi aggiornare lo stato in risposta al cambiamento di una proprietà, usa `componentWillReceiveProps`. |
|||
|
|||
|
|||
### Aggiornamento: componentDidUpdate |
|||
|
|||
```javascript |
|||
componentDidUpdate( |
|||
object prevProps, object prevState |
|||
) |
|||
``` |
|||
|
|||
Invocato immediatamente dopo che gli aggiornamenti del componente sono stati trasmessi al DOM. Questo metodo non viene chiamato per il rendering iniziale. |
|||
|
|||
Usa questo metodo come opportunità per operare sul DOM quando il componente è stato the component has been updated. |
|||
|
|||
|
|||
### Smontaggio: componentWillUnmount |
|||
|
|||
```javascript |
|||
componentWillUnmount() |
|||
``` |
|||
|
|||
Invocato immediatamente prima che un componente venga smontato dal DOM. |
|||
|
|||
Effettua la necessaria pulizia in questo metodo, come invalidare i timer o ripulire ciascun elemento DOM creato all'interno di `componentDidMount`. |
|||
@ -0,0 +1,90 @@ |
|||
--- |
|||
id: tags-and-attributes-it-IT |
|||
title: Tag e Attributi |
|||
permalink: tags-and-attributes-it-IT.html |
|||
prev: component-specs-it-IT.html |
|||
next: events-it-IT.html |
|||
--- |
|||
|
|||
## Tag Supportati |
|||
|
|||
React tenta di supportare tutti gli elementi comuni. Se hai bisogno di un elemento che non è elencato di seguito, per favore [apri una issue](https://github.com/facebook/react/issues/new). |
|||
|
|||
### Elementi HTML |
|||
|
|||
I seguenti elementi HTML sono supportati: |
|||
|
|||
``` |
|||
a abbr address area article aside audio b base bdi bdo big blockquote body br |
|||
button canvas caption cite code col colgroup data datalist dd del details dfn |
|||
dialog div dl dt em embed fieldset figcaption figure footer form h1 h2 h3 h4 h5 |
|||
h6 head header hr html i iframe img input ins kbd keygen label legend li link |
|||
main map mark menu menuitem meta meter nav noscript object ol optgroup option |
|||
output p param picture pre progress q rp rt ruby s samp script section select |
|||
small source span strong style sub summary sup table tbody td textarea tfoot th |
|||
thead time title tr track u ul var video wbr |
|||
``` |
|||
|
|||
### Elementi SVG |
|||
|
|||
I seguenti elementi SVG sono supportati: |
|||
|
|||
``` |
|||
circle clipPath defs ellipse g line linearGradient mask path pattern polygon polyline |
|||
radialGradient rect stop svg text tspan |
|||
``` |
|||
|
|||
Potresti trovare utile [react-art](https://github.com/facebook/react-art), una libreria di disegno per React che può disegnare su Canvas, SVG oppure VML (per IE8). |
|||
|
|||
|
|||
## Attributi Supportati |
|||
|
|||
React supporta tutti gli attributi `data-*` e `aria-*`, oltre a ciascun attributo nelle liste seguenti. |
|||
|
|||
> Nota: |
|||
> |
|||
> Tutti gli attributi sono camel-cased, e gli attributi `class` e `for` sono resi come `className` e `htmlFor` rispettivamente, per adeguarsi alla specifica delle API del DOM. |
|||
|
|||
Per una lista di eventi, consulta gli [Eventi Supportati](/react/docs/events.html). |
|||
|
|||
### Attributi HTML |
|||
|
|||
Questi attributi standard sono supportati: |
|||
|
|||
``` |
|||
accept acceptCharset accessKey action allowFullScreen allowTransparency alt |
|||
async autoComplete autoFocus autoPlay capture cellPadding cellSpacing charSet |
|||
challenge checked classID className cols colSpan content contentEditable contextMenu |
|||
controls coords crossOrigin data dateTime defer dir disabled download draggable |
|||
encType form formAction formEncType formMethod formNoValidate formTarget frameBorder |
|||
headers height hidden high href hrefLang htmlFor httpEquiv icon id inputMode |
|||
keyParams keyType label lang list loop low manifest marginHeight marginWidth max |
|||
maxLength media mediaGroup method min minlength multiple muted name noValidate open |
|||
optimum pattern placeholder poster preload radioGroup readOnly rel required role |
|||
rows rowSpan sandbox scope scoped scrolling seamless selected shape size sizes |
|||
span spellCheck src srcDoc srcSet start step style summary tabIndex target title |
|||
type useMap value width wmode wrap |
|||
``` |
|||
|
|||
In aggiunta, i seguenti attributi non-standard sono supportati: |
|||
|
|||
- `autoCapitalize autoCorrect` per Mobile Safari. |
|||
- `property` per i meta tag [Open Graph](http://ogp.me/). |
|||
- `itemProp itemScope itemType itemRef itemID` per i [microdata HTML5](http://schema.org/docs/gs.html). |
|||
- `unselectable` per Internet Explorer. |
|||
- `results autoSave` per campi di input del tipo `search` in WebKit/Blink. |
|||
|
|||
Esiste anche l'attributo specifico di React `dangerouslySetInnerHTML` ([maggiori informazioni](/react/docs/special-non-dom-attributes.html)), usato per inserire direttamente stringhe di HTML in un componente. |
|||
|
|||
### Attributi SVG |
|||
|
|||
``` |
|||
clipPath cx cy d dx dy fill fillOpacity fontFamily |
|||
fontSize fx fy gradientTransform gradientUnits markerEnd |
|||
markerMid markerStart offset opacity patternContentUnits |
|||
patternUnits points preserveAspectRatio r rx ry spreadMethod |
|||
stopColor stopOpacity stroke strokeDasharray strokeLinecap |
|||
strokeOpacity strokeWidth textAnchor transform version |
|||
viewBox x1 x2 x xlinkActuate xlinkArcrole xlinkHref xlinkRole |
|||
xlinkShow xlinkTitle xlinkType xmlBase xmlLang xmlSpace y1 y2 y |
|||
``` |
|||
@ -0,0 +1,237 @@ |
|||
--- |
|||
id: events-it-IT |
|||
title: Sistema di Eventi |
|||
permalink: events-it-IT.html |
|||
prev: tags-and-attributes-it-IT.html |
|||
next: dom-differences-it-IT.html |
|||
--- |
|||
|
|||
## SyntheticEvent |
|||
|
|||
Ai tuoi gestori di eventi saranno passate istanze di `SyntheticEvent`, un involucro cross-browser attorno all'evento nativo del browser. Possiede la stessa interfaccia dell'evento nativo del browser, incluso `stopPropagation()` e `preventDefault()`, con l'eccezione che gli eventi funzionano in modo identico su tutti i browser. |
|||
|
|||
Se ti trovi nella situazione di avere bisogno dell'evento sottostante del browser per qualunque ragione, usa semplicemente l'attributo `nativeEvent` per ottenerlo. Ogni oggetto `SyntheticEvent` ha i seguenti attributi: |
|||
|
|||
```javascript |
|||
boolean bubbles |
|||
boolean cancelable |
|||
DOMEventTarget currentTarget |
|||
boolean defaultPrevented |
|||
number eventPhase |
|||
boolean isTrusted |
|||
DOMEvent nativeEvent |
|||
void preventDefault() |
|||
boolean isDefaultPrevented() |
|||
void stopPropagation() |
|||
boolean isPropagationStopped() |
|||
DOMEventTarget target |
|||
number timeStamp |
|||
string type |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> A partire dalla v0.14, restituire `false` da un gestore di eventi non fermerà più la propagazione dell'evento. Invece, `e.stopPropagation()` o `e.preventDefault()` devono essere invocati manualmente, in maniera appropriata. |
|||
|
|||
## Riutilizzo degli eventi |
|||
|
|||
Gli oggetti `SyntheticEvent` sono gestiti come un pool. Ciò significa che ciascun oggetto `SyntheticEvent` sarà riutilizzato e tutte le sue proprietà annullate dopo che la callback dell'evento è stata invocata. |
|||
Ciò avviene per ragioni di performance. |
|||
Per questo motivo non potrai accedere all'evento in maniera asincrona. |
|||
|
|||
```javascript |
|||
function onClick(event) { |
|||
console.log(event); // => oggetto annullato. |
|||
console.log(event.type); // => "click" |
|||
var eventType = event.type; // => "click" |
|||
|
|||
setTimeout(function() { |
|||
console.log(event.type); // => null |
|||
console.log(eventType); // => "click" |
|||
}, 0); |
|||
|
|||
this.setState({clickEvent: event}); // Non funzionerà. this.state.clickEvent conterrà soltanto valori null. |
|||
this.setState({eventType: event.type}); // Puoi sempre esportare le singole proprietà dell'evento. |
|||
} |
|||
``` |
|||
|
|||
> Nota: |
|||
> |
|||
> Se vuoi accedere alle proprietà dell'evento in maniera asincrona, devi invocare `event.persist()` sull'evento, che rimuoverà l'evento sintetico dal pool e permetterà ai riferimenti all'evento di essere mantenuti nel codice dell'utente. |
|||
|
|||
## Eventi Supportati |
|||
|
|||
React normalizza gli eventi in modo che abbiano proprietà consistenti su browser differenti. |
|||
|
|||
I gestori di eventi seguenti sono scatenati da un evento nella fase di propagazione. Per registrare un gestore di eventi per la fase di cattura, aggiungi il suffisso `Capture` al nome dell'evento; ad esempio, anziché usare `onClick`, useresti `onClickCapture` per gestire l'evento click nella fase di cattura. |
|||
|
|||
|
|||
### Eventi della Clipboard |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onCopy onCut onPaste |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
DOMDataTransfer clipboardData |
|||
``` |
|||
|
|||
|
|||
### Eventi di Tastiera |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onKeyDown onKeyPress onKeyUp |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
Number charCode |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
String key |
|||
Number keyCode |
|||
String locale |
|||
Number location |
|||
boolean metaKey |
|||
boolean repeat |
|||
boolean shiftKey |
|||
Number which |
|||
``` |
|||
|
|||
|
|||
### Eventi del Focus |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onFocus onBlur |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
DOMEventTarget relatedTarget |
|||
``` |
|||
|
|||
|
|||
### Eventi dei Moduli |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onChange onInput onSubmit |
|||
``` |
|||
|
|||
Per maggiori informazioni sull'evento onChange, leggi [Moduli](/react/docs/forms.html). |
|||
|
|||
|
|||
### Eventi del Mouse |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit |
|||
onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave |
|||
onMouseMove onMouseOut onMouseOver onMouseUp |
|||
``` |
|||
|
|||
Gli eventi `onMouseEnter` e `onMouseLeave` vengono propagati dal componente che viene abbandonato a quello in cui viene effettuato l'ingresso anziché seguire la propagazione ordinaria, e non posseggono una fase di cattura. |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
Number button |
|||
Number buttons |
|||
Number clientX |
|||
Number clientY |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
boolean metaKey |
|||
Number pageX |
|||
Number pageY |
|||
DOMEventTarget relatedTarget |
|||
Number screenX |
|||
Number screenY |
|||
boolean shiftKey |
|||
``` |
|||
|
|||
|
|||
### Eventi del Tocco |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onTouchCancel onTouchEnd onTouchMove onTouchStart |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
boolean altKey |
|||
DOMTouchList changedTouches |
|||
boolean ctrlKey |
|||
function getModifierState(key) |
|||
boolean metaKey |
|||
boolean shiftKey |
|||
DOMTouchList targetTouches |
|||
DOMTouchList touches |
|||
``` |
|||
|
|||
|
|||
### Eventi UI |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onScroll |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
Number detail |
|||
DOMAbstractView view |
|||
``` |
|||
|
|||
|
|||
### Eventi della Rotellina |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onWheel |
|||
``` |
|||
|
|||
Proprietà: |
|||
|
|||
```javascript |
|||
Number deltaMode |
|||
Number deltaX |
|||
Number deltaY |
|||
Number deltaZ |
|||
``` |
|||
|
|||
### Eventi dei Media |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onAbort onCanPlay onCanPlayThrough onDurationChange onEmptied onEncrypted onEnded onError onLoadedData onLoadedMetadata onLoadStart onPause onPlay onPlaying onProgress onRateChange onSeeked onSeeking onStalled onSuspend onTimeUpdate onVolumeChange onWaiting |
|||
``` |
|||
|
|||
### Eventi delle Immagini |
|||
|
|||
Nomi degli eventi: |
|||
|
|||
``` |
|||
onLoad onError |
|||
``` |
|||
@ -0,0 +1,15 @@ |
|||
--- |
|||
id: dom-differences-it-IT |
|||
title: Differenze del DOM |
|||
permalink: dom-differences-it-IT.html |
|||
prev: events-it-IT.html |
|||
next: special-non-dom-attributes-it-IT.html |
|||
--- |
|||
|
|||
React ha implementato eventi indipendenti dal browser e un sistema DOM per ragioni di prestazioni e compatibilità cross-browser. Abbiamo colto l'occasione di dare una ripulita ad alcuni aspetti trascurati nelle implementazioni del DOM nei browser. |
|||
|
|||
* Tutte le proprietà e attributi del DOM (incluso i gestori di eventi) dovrebbero essere camelCased per essere consistenti con lo stile standard JavaScript. Abbiamo intenzionalmente deviato dalla specifica perché la specifica stessa è inconsistente. **Tuttavia**, gli attributi `data-*` e `aria-*` [sono conformi alle specifiche](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes#data-*) e dovrebbero essere soltanto in minuscolo. |
|||
* L'attributo `style` accetta un oggetto JavaScript con proprietà camelCased anziché una stringa CSS. Questo è consistente con la proprietà DOM `style` di JavaScript, è più efficiente, e previene falle nella sicurezza XSS. |
|||
* Tutti gli oggetti evento sono conformi con la specifica W3C, e tutti gli eventi (incluso il submit) si propagano correttamente secondo la specifica W3C. Consulta il [Sistema degli Eventi](/react/docs/events.html) per maggiori dettagli. |
|||
* L'evento `onChange` si comporta come ti aspetteresti: questo evento è emesso ogni qualvolta il valore di un campo di un modulo cambia anziché, in maniera inconsistente, quando il campo perde il focus. Abbiamo intenzionalmente deviato dal comportamento corrente dei browser perché `onChange` è un nome incorretto per questo comportamento e React dipende dall'emissione di questo evento in tempo reale in risposta all'input dell'utente. Leggi [Moduli](/react/docs/forms.html) per maggiori dettagli. |
|||
* Attributi dei campi di modulo come `value` e `checked`, oppure `textarea`. [Maggiori dettagli](/react/docs/forms.html). |
|||
@ -0,0 +1,13 @@ |
|||
--- |
|||
id: special-non-dom-attributes-it-IT |
|||
title: Attributi Speciali Non-DOM |
|||
permalink: special-non-dom-attributes-it-IT.html |
|||
prev: dom-differences-it-IT.html |
|||
next: reconciliation-it-IT.html |
|||
--- |
|||
|
|||
Oltre alle [Differenze del DOM](/react/docs/dom-differences.html), React offre alcuni attributi che semplicemente non esistono nel DOM. |
|||
|
|||
- `key`: un identificatore univoco opzionale. Quando il tuo componente viene riordinato durante i passaggi di `render`, potrebbe essere distrutto e ricreato in base all'algoritmo di calcolo delle differenze. Assegnargli una chiave che persiste assicura che il componente venga preservato. Scopri maggiori dettagli [qui](/react/docs/multiple-components.html#dynamic-children). |
|||
- `ref`: leggi [qui](/react/docs/more-about-refs.html). |
|||
- `dangerouslySetInnerHTML`: Offre l'abilità di inserire HTML grezzo, principalmente per cooperare con librerie di manipolazione di stringhe DOM. Scopri maggiori dettagli [qui](/react/tips/dangerously-set-inner-html.html). |
|||
@ -0,0 +1,132 @@ |
|||
--- |
|||
id: reconciliation-it-IT |
|||
title: Riconciliazione |
|||
permalink: reconciliation-it-IT.html |
|||
prev: special-non-dom-attributes-it-IT.html |
|||
next: glossary-it-IT.html |
|||
--- |
|||
|
|||
La decisione chiave del design di React è fare in modo che l'API sembri ripetere il rendering dell'intera applicazione per ciascun aggiornamento. Ciò rende la scrittura delle applicazione molto più semplice, ma è anche una sfida incredibile per renderlo trattabile. Questo articolo spiega come siamo riusciti a trasformare, tramite potenti euristiche, un problema O(n<sup>3</sup>) in uno O(n). |
|||
|
|||
|
|||
## Motivazione |
|||
|
|||
Generare il minimo numero di operazioni necessarie a trasformare un albero in un altro è un problema complesso e ben noto. Gli [algoritmi dello stato dell'arte](http://grfia.dlsi.ua.es/ml/algorithms/references/editsurvey_bille.pdf) hanno una complessità dell'ordine di O(n<sup>3</sup>) dove n è il numero di nodi dell'albero. |
|||
|
|||
Ciò significa che visualizzare 1000 nodi richiederebbe un numero di confronti dell'ordine del miliardo. Ciò è decisamente troppo costoso per il nostro caso d'uso. Per mettere questo numero in prospettiva, le CPU oggi giorno eseguono approssimativamente 3 miliardi di istruzioni al secondo. Quindi anche con l'implementazione più efficiente, non saremmo in grado di calcolare la differenza in meno di un secondo. |
|||
|
|||
Dal momento che un algoritmo ottimo non è trattabile, implementiamo un algoritmo O(n) non ottimale usando euristiche basate su due assunzioni: |
|||
|
|||
1. Due componenti della stessa classe genereranno alberi simili e due componenti di classi diverse genereranno alberi diversi. |
|||
2. È possibile fornire una chiave unica per gli elementi che sia stabile durante rendering differenti. |
|||
|
|||
In pratica, queste assunzioni sono eccezionalmente veloci per quasi tutti i casi d'uso pratici. |
|||
|
|||
|
|||
## Differenza a coppie |
|||
|
|||
Per effettuare la differenza di due alberi, dobbiamo prima essere capaci di effettuare la differenza tra due nodi. Esistono tre diversi casi da considerare. |
|||
|
|||
|
|||
### Tipi di Nodo Differenti |
|||
|
|||
Se il tipo di nodo è differente, React li tratterà come due sottoalberi diversi, getterà via il primo e costruirà e inserirà il secondo. |
|||
|
|||
```xml |
|||
renderA: <div /> |
|||
renderB: <span /> |
|||
=> [removeNode <div />], [insertNode <span />] |
|||
``` |
|||
|
|||
La stessa logica è usata per i componenti personalizzati. Se non sono dello stesso tipo, React non proverà neppure a confrontare ciò che visualizzano. Rimuoverà soltanto il primo dal DOM e inserirà il secondo. |
|||
|
|||
```xml |
|||
renderA: <Header /> |
|||
renderB: <Content /> |
|||
=> [removeNode <Header />], [insertNode <Content />] |
|||
``` |
|||
|
|||
Possedere questa conoscenza di alto livello è un aspetto molto importante del perché l'algoritmo di differenza di React è sia veloce che preciso. Ciò fornisce una buona euristica per potare rapidamente gran parte dell'albero e concentrarsi su parti che hanno una buona probabilità di essere simili. |
|||
|
|||
È molto improbabile che un elemento `<Header>` generi un DOM che somigli a quello generato da un elemento `<Content>`. Anziché perdere tempo provando a confrontare queste due strutture, React semplicemente ricostruisce l'albero da zero. |
|||
|
|||
Come corollario, se c'è un elemento `<Header>` nella stessa posizione in due rendering consecutivi, ti puoi aspettare di trovare una struttura molto simile che vale la pena di esplorare. |
|||
|
|||
|
|||
### Nodi DOM |
|||
|
|||
Quando vengono confrontati nodi DOM, guardiamo gli attributi di entrambi e decidiamo quali di essi sono cambiati in un tempo lineare. |
|||
|
|||
```xml |
|||
renderA: <div id="before" /> |
|||
renderB: <div id="after" /> |
|||
=> [replaceAttribute id "after"] |
|||
``` |
|||
|
|||
Anziché trattare lo stile come una stringa opaca, viene rappresentato come un oggetto chiave-valore. Ciò ci permette di aggiornare solo le proprietà che sono cambiate. |
|||
|
|||
```xml |
|||
renderA: <div style={{'{{'}}color: 'red'}} /> |
|||
renderB: <div style={{'{{'}}fontWeight: 'bold'}} /> |
|||
=> [removeStyle color], [addStyle font-weight 'bold'] |
|||
``` |
|||
|
|||
Dopo che gli attributi sono stati aggiornati, effettuiamo un confronto ricorsivo su ciascuno dei nodi figli. |
|||
|
|||
|
|||
### Componenti Personalizzati |
|||
|
|||
We decided that the two custom components are the same. Since components are stateful, we cannot just use the new component and call it a day. React takes all the attributes from the new component and calls `component[Will/Did]ReceiveProps()` on the previous one. |
|||
|
|||
The previous component is now operational. Its `render()` method is called and the diff algorithm restarts with the new result and the previous result. |
|||
|
|||
|
|||
## List-wise diff |
|||
|
|||
### Problematic Case |
|||
|
|||
In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there's a difference. |
|||
|
|||
For example if you add an element at the end: |
|||
|
|||
```xml |
|||
renderA: <div><span>first</span></div> |
|||
renderB: <div><span>first</span><span>second</span></div> |
|||
=> [insertNode <span>second</span>] |
|||
``` |
|||
|
|||
Inserting an element at the beginning is problematic. React is going to see that both nodes are spans and therefore run into a mutation mode. |
|||
|
|||
```xml |
|||
renderA: <div><span>first</span></div> |
|||
renderB: <div><span>second</span><span>first</span></div> |
|||
=> [replaceAttribute textContent 'second'], [insertNode <span>first</span>] |
|||
``` |
|||
|
|||
There are many algorithms that attempt to find the minimum sets of operations to transform a list of elements. [Levenshtein distance](https://en.wikipedia.org/wiki/Levenshtein_distance) can find the minimum using single element insertion, deletion and substitution in O(n<sup>2</sup>). Even if we were to use Levenshtein, this doesn't find when a node has moved into another position and algorithms to do that have much worse complexity. |
|||
|
|||
### Keys |
|||
|
|||
In order to solve this seemingly intractable issue, an optional attribute has been introduced. You can provide for each child a key that is going to be used to do the matching. If you specify a key, React is now able to find insertion, deletion, substitution and moves in O(n) using a hash table. |
|||
|
|||
|
|||
```xml |
|||
renderA: <div><span key="first">first</span></div> |
|||
renderB: <div><span key="second">second</span><span key="first">first</span></div> |
|||
=> [insertNode <span>second</span>] |
|||
``` |
|||
|
|||
In practice, finding a key is not really hard. Most of the time, the element you are going to display already has a unique id. When that's not the case, you can add a new ID property to your model or hash some parts of the content to generate a key. Remember that the key only has to be unique among its siblings, not globally unique. |
|||
|
|||
|
|||
## Trade-offs |
|||
|
|||
It is important to remember that the reconciliation algorithm is an implementation detail. React could re-render the whole app on every action; the end result would be the same. We are regularly refining the heuristics in order to make common use cases faster. |
|||
|
|||
In the current implementation, you can express the fact that a sub-tree has been moved amongst its siblings, but you cannot tell that it has moved somewhere else. The algorithm will re-render that full sub-tree. |
|||
|
|||
Because we rely on two heuristics, if the assumptions behind them are not met, performance will suffer. |
|||
|
|||
1. The algorithm will not try to match sub-trees of different components classes. If you see yourself alternating between two components classes with very similar output, you may want to make it the same class. In practice, we haven't found this to be an issue. |
|||
|
|||
2. If you don't provide stable keys (by using Math.random() for example), all the sub-trees are going to be re-rendered every single time. By giving the users the choice to choose the key, they have the ability to shoot themselves in the foot. |
|||
@ -0,0 +1,192 @@ |
|||
--- |
|||
id: glossary-it-IT |
|||
title: Terminologia del DOM (Virtuale) |
|||
permalink: glossary-it-IT.html |
|||
prev: reconciliation-it-IT.html |
|||
--- |
|||
|
|||
Nella terminologia di React, esistono cinque tipi base che è importante distinguere: |
|||
|
|||
- [ReactElement / ReactElement Factory](#react-elements) |
|||
- [ReactNode](#react-nodes) |
|||
- [ReactComponent / ReactComponent Class](#react-components) |
|||
|
|||
## Elementi React |
|||
|
|||
Il tipo primario in React è il `ReactElement`. Possiede quattro proprietà: `type`, `props`, `key` e `ref`. Non possiede alcun metodo e non espone nulla sul prototype. |
|||
|
|||
Puoi creare uno di questi oggetti attraverso `React.createElement`. |
|||
|
|||
```javascript |
|||
var root = React.createElement('div'); |
|||
``` |
|||
|
|||
Per effettuare il rendering di un nuovo albero nel DOM, crei dei `ReactElement` ande li passi a `React.render` assieme a un `Element` DOM regolare (`HTMLElement` o `SVGElement`). I `ReactElement` non vanno confusi con gli `Element` del DOM. Un `ReactElement` è una rappresentazione leggera, priva di stato, immutabile e virtuale di un `Element` del DOM. È un DOM virtuale. |
|||
|
|||
```javascript |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
Per aggiungere proprietà ad un elemento DOM, passa un oggetto di proprietà come secondo argomento, e i figli come terzo argomento. |
|||
|
|||
```javascript |
|||
var child = React.createElement('li', null, 'Contenuto di Testo'); |
|||
var root = React.createElement('ul', { className: 'my-list' }, child); |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
Se usi React JSX, allora questi `ReactElement` verranno creati per te. Questa espressione è equivalente: |
|||
|
|||
```javascript |
|||
var root = <ul className="my-list"> |
|||
<li>Contenuto di Testo</li> |
|||
</ul>; |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
### Le Factory |
|||
|
|||
Una factory di `ReactElement` è semplicemente una funzione che genera un `ReactElement` con una particolare proprietà `type`. React ha uno helper integrato per permetterti di creare factory. La sua implementazione è semplicemente: |
|||
|
|||
```javascript |
|||
function createFactory(type) { |
|||
return React.createElement.bind(null, type); |
|||
} |
|||
``` |
|||
|
|||
Ti permette di creare una conveniente scorciatoia anziché scrivere ogni volta `React.createElement('div')`. |
|||
|
|||
```javascript |
|||
var div = React.createFactory('div'); |
|||
var root = div({ className: 'my-div' }); |
|||
React.render(root, document.getElementById('example')); |
|||
``` |
|||
|
|||
React possiede già factory integrate per tag HTML comuni: |
|||
|
|||
```javascript |
|||
var root = React.DOM.ul({ className: 'my-list' }, |
|||
React.DOM.li(null, 'Contenuto di Testo') |
|||
); |
|||
``` |
|||
|
|||
Se stai usando JSX non hai bisogno di factory. JSX fornisce già una conveniente scorciatoia per creare `ReactElement`. |
|||
|
|||
|
|||
## Nodi React |
|||
|
|||
Un `ReactNode` può essere uno tra: |
|||
|
|||
- `ReactElement` |
|||
- `string` (ovvero `ReactText`) |
|||
- `number` (ovvero `ReactText`) |
|||
- Array di `ReactNode` (ovvero `ReactFragment`) |
|||
|
|||
Questi sono usati come proprietà di altri `ReactElement` per rappresentare i figli. Effettivamente creano un albero di `ReactElement`. |
|||
|
|||
|
|||
## Componenti React |
|||
|
|||
Puoi usare React usando soltanto `ReactElement`, ma per avvantaggiarti seriamente di React vorrai usare i `ReactComponent` per creare incapsulamento con uno stato incluso. |
|||
|
|||
Una classe `ReactComponent` è semplicemente una classe JavaScript (o una "funzione costruttore"). |
|||
|
|||
```javascript |
|||
var MyComponent = React.createClass({ |
|||
render: function() { |
|||
... |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Quando questo costruttore è invocato, ci si aspetta che restituisca un oggetto con almeno un metodo `render`. Questo oggetto è chiamato `ReactComponent`. |
|||
|
|||
```javascript |
|||
var component = new MyComponent(props); // non farlo mai! |
|||
``` |
|||
|
|||
Per scopi diversi dai test, *non chiamerai mai* questo costruttore direttamente. React lo chiamerà per te. |
|||
|
|||
Invece, passa una classe `ReactComponent` a `createElement` per ottenere un `ReactElement`. |
|||
|
|||
```javascript |
|||
var element = React.createElement(MyComponent); |
|||
``` |
|||
|
|||
OPPURE usando JSX: |
|||
|
|||
```javascript |
|||
var element = <MyComponent />; |
|||
``` |
|||
|
|||
Quando `element` viene passato a `React.render`, React chiamerà il costruttore al tuo posto e creerà un`ReactComponent`, che verrà restituito. |
|||
|
|||
```javascript |
|||
var component = React.render(element, document.getElementById('example')); |
|||
``` |
|||
|
|||
Se chiami ripetutamente `React.render` con lo stesso tipo di `ReactElement` e lo stesso `Element` DOM come contenitore, ti restituirà sempre la stessa istanza. Questa istanza è dotata di stato. |
|||
|
|||
```javascript |
|||
var componentA = React.render(<MyComponent />, document.getElementById('example')); |
|||
var componentB = React.render(<MyComponent />, document.getElementById('example')); |
|||
componentA === componentB; // true |
|||
``` |
|||
|
|||
Questo è il motivo per cui non dovresti mai costruire la tua istanza. Invece, `ReactElement` è un `ReactComponent` virtuale prima che venga costruito. Un vecchio `ReactElement` e uno nuovo possono essere confrontati per vedere se una nuova istanza di `ReactComponent` è stata creata o quella esistente è stata riutilizzata. |
|||
|
|||
Ci si aspetta che il metodo `render` di un `ReactComponent` restituisca un altro `ReactElement`. Ciò permette a questi componenti di essere composti. In ultima analisi, il rendering si risolve in un `ReactElement` con un tag `string` che viene istanziato come un `Element` DOM e viene inserito nel documento. |
|||
|
|||
|
|||
## Definizioni Formali dei Tipi |
|||
|
|||
### Punto di Entrata |
|||
|
|||
``` |
|||
React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent; |
|||
``` |
|||
|
|||
### Nodi ed Elementi |
|||
|
|||
``` |
|||
type ReactNode = ReactElement | ReactFragment | ReactText; |
|||
|
|||
type ReactElement = ReactComponentElement | ReactDOMElement; |
|||
|
|||
type ReactDOMElement = { |
|||
type : string, |
|||
props : { |
|||
children : ReactNodeList, |
|||
className : string, |
|||
etc. |
|||
}, |
|||
key : string | boolean | number | null, |
|||
ref : string | null |
|||
}; |
|||
|
|||
type ReactComponentElement<TProps> = { |
|||
type : ReactClass<TProps>, |
|||
props : TProps, |
|||
key : string | boolean | number | null, |
|||
ref : string | null |
|||
}; |
|||
|
|||
type ReactFragment = Array<ReactNode | ReactEmpty>; |
|||
|
|||
type ReactNodeList = ReactNode | ReactEmpty; |
|||
|
|||
type ReactText = string | number; |
|||
|
|||
type ReactEmpty = null | undefined | boolean; |
|||
``` |
|||
|
|||
### Classi e Componenti |
|||
|
|||
``` |
|||
type ReactClass<TProps> = (TProps) => ReactComponent<TProps>; |
|||
|
|||
type ReactComponent<TProps> = { |
|||
props : TProps, |
|||
render : () => ReactElement |
|||
}; |
|||
``` |
|||
@ -0,0 +1,147 @@ |
|||
--- |
|||
id: thinking-in-react-it-IT |
|||
title: Pensare in React |
|||
prev: tutorial-it-IT.html |
|||
next: conferences-it-IT.html |
|||
redirect_from: 'blog/2013/11/05/thinking-in-react.html' |
|||
--- |
|||
|
|||
di Pete Hunt |
|||
|
|||
React è, a mio parere, la maniera più adeguata di costruire veloci applicazioni Web di grandi dimensioni con JavaScript. Ha scalato molto bene per noi a Facebook e Instagram. |
|||
|
|||
Una delle molte parti migliori di React è come ti fa pensare alle applicazioni mentre le costruisci. In questo articolo vi guiderò attraverso il processo di pensiero per la costruzione di una tabella di dati di prodotti che possono essere cercati usando React. |
|||
|
|||
## Comincia con un mock |
|||
|
|||
Immagina di possedere già una API JSON e un mock prodotto dai nostri designer. I nostri designer apparentemente non sono molto capaci perché il mock ha questo aspetto: |
|||
|
|||
 |
|||
|
|||
La nostra API JSON restituisce dei dati che somigliano a quanto segue: |
|||
|
|||
``` |
|||
[ |
|||
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"}, |
|||
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"}, |
|||
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"}, |
|||
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"}, |
|||
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"}, |
|||
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"} |
|||
]; |
|||
``` |
|||
|
|||
## Passo 1: suddividi la UI in una gerarchia di componenti |
|||
|
|||
La prima azione che vorrai compiere è disegnare dei rettangoli attorno a ciascun componente (e subcomponenti) nel mock e dare un nome a ciascuno di essi. Se stai lavorando con i designer, potrebbero averlo già fatto, quindi parla anzitutto con loro! I nomi dei loro layer di Photoshop potrebbero finire per diventare i nomi dei tuoi componenti React! |
|||
|
|||
Come fai tuttavia a sapere cosa dovrebbe essere un componente a sé? Usa una delle tecniche per decidere se devi creare un nuovo oggetto o una nuova funzione. Una di tali tecniche è il [principio della singola responsibilità](https://en.wikipedia.org/wiki/Single_responsibility_principle), ovvero, un componente dovrebbe idealmente servire a un solo scopo. Se finisce per crescere, dovrebbe essere decomposto in componenti più piccoli. |
|||
|
|||
Dal momento che stai spesso mostrando un modello di dati JSON all'utente, ti accorgerai che se il tuo modello è stato costruito correttamente, la tua UI (e quindi anche la struttura dei tuoi componenti) si adatterà facilmente. Ciò accade perché le UI e i modelli di dati tendono ad aderire alla medesima *architettura dell'informazione*, che significa che il compito di separare la tua UI in componenti è spesso banale. Suddividila semplicemente in componenti che rappresentano esattamente un frammento del tuo modello di dati. |
|||
|
|||
 |
|||
|
|||
Vedrai che abbiamo in tutto cinque componenti nella nostra semplice applicazione. Ho scritto in corsivo i dati che ciascun componente rappresenta. |
|||
|
|||
1. **`FilterableProductTable` (arancione):** contiene l'intero esempio |
|||
2. **`SearchBar` (blu):** riceve tutti gli *input dell'utente* |
|||
3. **`ProductTable` (verde):** mostra e filtra la *collezione dei dati* basandosi sull'*input dell'utente* |
|||
4. **`ProductCategoryRow` (turchese):** mostra un titolo per ciascuna *categoria* |
|||
5. **`ProductRow` (rosso):** mostra una riga per ciascun *prodotto* |
|||
|
|||
Se osservi la `ProductTable`, ti accorgerai che l'intestazione della tabella (che contiene le etichette "Name" e "Price") non è un componente a sé. Questa è una questione di gusti, e ci sono ragioni valide per ciascun approccio. Per questo esempio, l'ho lasciata parte di `ProductTable` perché fa parte della visualizzazione della *collezione dei dati* che è la responsabilità di `ProductTable`. Tuttavia, se questa intestazione cresce fino a diventare complessa (cioè se dovessimo aggiungere la possibilità di riordinare i dati), avrebbe certamente senso renderla un componente `ProductTableHeader` a sé. |
|||
|
|||
Adesso che abbiamo identificato i componenti nel nostro mock, organizziamoli in una gerarchia. Questo è un compito facile. I componenti che appaiono all'interno di un altro componente nel the mock devono apparire come figli nella gerarchia: |
|||
|
|||
* `FilterableProductTable` |
|||
* `SearchBar` |
|||
* `ProductTable` |
|||
* `ProductCategoryRow` |
|||
* `ProductRow` |
|||
|
|||
## Passo 2: Costruisci una versione statica in React |
|||
|
|||
<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/yun1vgqb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> |
|||
|
|||
Adesso che hai la tua gerarchia di componenti, è venuto il momento di implementare la tua applicazione. La maniera più semplice è costruire una versione che prende il tuo modello di dati e visualizza la UI ma non è interattiva. È buona norma disaccoppiare questi processi perché costruire una versione statica richiede la scrittura di parecchio codice e poco pensare, mentre aggiungere l'interattività richiede un parecchio pensare ma non un granché di scrittura. Vedremo perché. |
|||
|
|||
Per costruire una versione statica della tua applicazione dhe visualizzi il tuo modello dei dati, vorrai costruire componenti che riutilizano altri componenti e passano loro dati usando le *props*. Le *props* sono una maniera di passare dati da genitore a figlio. Se hai dimestichezza con il concetto di *state*, **non usare lo stato** per costruire questa versione statica. Lo stato è riservato solo per l'interattività, cioè dati che cambiano nel tempo. Dal momento che questa è una versione statica dell'applicazione, non ne avrai bisogno. |
|||
|
|||
Puoi costruire dall'alto in basso, o dal basso in alto. Ovvero, puoi cominciare a costruire i componenti più in alto nella gerarchia (cioè cominciare con `FilterableProductTable`) oppure con quelli più in basso (`ProductRow`). In esempi più semplici, è solitamente più facile andare dall'alto in basso, mentre in progetti più grandi è più facile andare dal basso in alto e scrivere test mentre costruisci. |
|||
|
|||
Alla fine di questo passo avrai una libreria di componenti riutilizzabili che visualizzano il tuo modello dati. I componenti avranno soltanto metodi `render()` dal momento che questa è una versione statica della tua applicazione. Il componente al vertice della gerarchia (`FilterableProductTable`) prenderà il tuo modello dati come una proprietà. Se apporti un cambiamento al tuo modello dati sottostante e chiami nuovamente `React.render()`, la UI sarà aggiornata. È facile vedere come la tua UI viene aggiornata e dove applicare cambiamenti dal momento che non c'è nulla di complicato. Il **flusso dati unidirezionale** di React (detto anche *binding unidirezionale*) mantiene tutto modulare e veloce. |
|||
|
|||
Fai riferimento alla [documentazione React](/react/docs/) se hai bisogno di aiuto nell'eseguire questo passo. |
|||
|
|||
### Un breve intermezzo: proprietà oppure stato |
|||
|
|||
Esistono due tipi di dati "modello" in React: proprietà e stato. È importante capire la distinzione tra i due; scorri [la documentazione ufficiale di React](/react/docs/interactivity-and-dynamic-uis.html) se non hai ben chiara la differenza. |
|||
|
|||
## Passo 3: Identifica la rappresentazione minima (ma completa) dello stato della UI |
|||
|
|||
Per rendere la tua UI interattiva, hai bisogno di poter scatenare cambiamenti al tuo modello dati sottostante. React lo rende facile tramite lo **stato**. |
|||
|
|||
Per costruire correttamente la tua applicaizone, devi prima pensare all'insieme minimo di stato mutevole di cui la tua applicazione ha bisogno. La chiave qui è il principio DRY: *Don't Repeat Yourself (Non ripeterti)*. Una volta compresa la rappresentazione minima in assoluto dello stato della tua applicazione e calcola tutto lil resto sul momento. Ad esempio, se stai costruendo una lista di cose da fare, mantieni un array delle cose da fare; non tenere una variabile di stato separata per il conteggio. Invece, quando vuoi visualizzare il conteggio degli elementi, prendi semplicemente la lunghezza dell'arraiy delle cose da fare. |
|||
|
|||
Pensa a tutti gli elementi di dati nella nostra applicazione di esempio. Abbiamo: |
|||
|
|||
* La lista originaria dei prodotti |
|||
* Il testo di ricerca che l'utente ha introdotto |
|||
* Il valore del checkbox |
|||
* La lista filtrata dei prodotti |
|||
|
|||
Rivediamo ciascuno di essi e capiamo se si tratta di stato. Chiediti queste tre semplici domande su ciascun elemento di dati: |
|||
|
|||
1. Viene passato da un genitore attraverso le proprietà? Se sì, probabilmente non è stato. |
|||
2. Cambia nel tempo? Se no, probabilmente non è stato. |
|||
3. Puoi calcolarlo basandoti su altro stato o proprietà del tuo componente? Se sì, non è stato. |
|||
|
|||
La lista originaria di prodotti viene passata come proprietà, quindi non si tratta di stato. Il testo di ricerca e la checkbox sembrano essere stato perché cambiano nel tempo e non possono essere ricavate da altri dati. Infine, la lista filtrata di prodotti non è stato, perché può essere calcolata combinando la lista originaria dei prodotti con il testo di ricerca e il valore della checkbox. |
|||
|
|||
Quindi, per concludere, il nostro stato è: |
|||
|
|||
* Il testo di ricerca che l'utente ha introdotto |
|||
* Il valore del checkbox |
|||
|
|||
## Passo 4: Identifica dove debba risiedere il tuo stato |
|||
|
|||
<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/zafjbw1e/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> |
|||
|
|||
OK, abbiamo dunque identificato quale sia l'insieme minimo dello stato dell'applicazione. Successivamente, dobbiamo identificare quale componente muta, o *possiede*, questo stato. |
|||
|
|||
Ricorda: React è basato esclusivamente su flusso dati unidirezionale verso il basso della gerarchia dei componenti. Potrebbe non essere immediatamente chiaro quale componente debba possedere quale stato. **Questa è spesso la parte più difficile da capire per i principianti,** quindi segui questi passi per capirlo: |
|||
|
|||
Per ogni elemento dello stato nella tua applicazione: |
|||
|
|||
* Identifica ciascun componente che visualizza qualcosa basato su quello stato. |
|||
* Trova un componente proprietario comune (un singolo componente più in alto nella gerarchia di ciascun componente che ha bisogno dello stato). |
|||
* Il proprietario comune o un altro componente più in alto nella gerarchia deve possedere lo stato. |
|||
* Se non riesci a trovare un componente per cui abbia senso possedere lo stato, crea un nuovo componente con il solo scopo di contenere lo stato e aggiungilo da qualche parte nella gerarchia sopra il componente proprietario comune. |
|||
|
|||
Applichiamo questa strategia per la nostra applicazione: |
|||
|
|||
* `ProductTable` deve filtrare la lista dei prodotti basandosi sullo stato e `SearchBar` deve visualizzare il testo di ricerca e lo stato della checkbox. |
|||
* Il componente proprietario comune è `FilterableProductTable`. |
|||
* Ha concettualmente senso che il testo di ricerca e lo stato della checkbox appartengano a `FilterableProductTable` |
|||
|
|||
Bene, abbiamo deciso che il nostro stato appartenga a `FilterableProductTable`. Anzitutto aggiungiamo un metodo `getInitialState()` a `FilterableProductTable` che restituisce `{filterText: '', inStockOnly: false}` per riflettere lo stato iniziale della tua applicazione. Dunque, passiamo `filterText` e `inStockOnly` a `ProductTable` e `SearchBar` come una proprietà. Infine, usiamo queste proprietà per filtrare le righe in `ProductTable` e impostare i valori dei campi del modulo in `SearchBar`. |
|||
|
|||
Puoi cominciare a vedere come si comporterà la tua applicazione: imposta `filterText` a `"ball"` e aggiorna la tua applicazione. Vedrai che la tabella dei dati è correttamente aggiornata. |
|||
|
|||
## Passo 5: Aggiungi il flusso dati inverso |
|||
|
|||
<iframe width="100%" height="300" src="https://jsfiddle.net/reactjs/n47gckhr/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe> |
|||
|
|||
Finora abbiamo costruito un'applicazione che visualizza correttamente come una funzione di proprietà e stato che fluiscono verso il basso della gerarchia. Adesso è il momento di supportare il flusso dei dati nella direzione opposta: i componenti del modulo in profondità nella gerarchia devono aggiornare lo stato in `FilterableProductTable`. |
|||
|
|||
React rende questo flusso dati esplicito per rendere più semplice la comprensione di come funziona la tua applicazione, ma richiede leggermente più codice di un tradizionale binding bidirezionale dei dati. React offre un add-on chiamato `ReactLink` per rendere questo pattern altrettanto conveniente del binding bidirezionale ma, per gli scopi di questo articolo, faremo tutto in modo esplicito. |
|||
|
|||
Se provi a scrivere o spunti la casella nella versione attuale dell'esempio, vedrai che React ignora il tuo input. Questo è un comportamento intenzionale, in quanto abbiamo impostato la proprietà `value` del campo `input` perché sia sempre uguale al valore di `state` passato da `FilterableProductTable`. |
|||
|
|||
Pensiamo a cosa vogliamo che accada. Vogliamo assicurarci che quando l'utente cambia il modulo noi aggiorniamo lo stato per riflettere l'input dell'utente. Dal momento che i componenti devono soltanto aggiornare il proprio stato, `FilterableProductTable` passerà una callback a `SearchBar` che sarà eseguita quando lo stato debba essere aggiornato. Possiamo utilizzare l'evento `onChange` sui campi di input per esserne notificati. E la callback passata da `FilterableProductTable` chiamerà `setState()`, e l'applicazione verrà aggiornata. |
|||
|
|||
Anche se sembra complesso, si tratta realmente di poche righe di codice. Inoltre, il flusso dati attraverso l'applicazione è davvero esplicito. |
|||
|
|||
## Tutto qui |
|||
|
|||
Speriamo che questo ti abbia dato un'idea di come pensare a costruire componenti e applicazioni con React. Mentre potrebbe richiedere leggermente più codice di quanto si sia abituati a scrivere, ricorda che il codice è letto più spesso di quanto sia scritto, ed è estremamente facile leggere codice così esplicito e modulare. Mentre ti avvii a costruire grandi librerie di componenti, apprezzerai questa chiarezza e modularità, e con il riutilizzo del codice le tue righe di codice cominceranno a ridursi. :) |
|||
@ -0,0 +1,712 @@ |
|||
--- |
|||
id: tutorial-it-IT |
|||
title: Tutorial |
|||
prev: getting-started-it-IT.html |
|||
next: thinking-in-react-it-IT.html |
|||
--- |
|||
|
|||
Costruiremo una semplice ma realistica casella dei commenti che puoi inserire in un blog, una versione base dei commenti in tempo reale offerti da Disqus, LiveFyre o Facebook. |
|||
|
|||
Forniremo: |
|||
|
|||
* Una vista di tutti i commenti |
|||
* Un modulo per inviare un commento |
|||
* Hook perché tu fornisca un backend personalizzato |
|||
|
|||
Avrà anche un paio di caratteristiche interessanti: |
|||
|
|||
* **Commenti ottimistici:** i commenti appaiono nella lista prima che vengano salvati sul server, in modo da sembrare più veloce. |
|||
* **Aggiornamenti in tempo reale:** i commenti degli altri utenti sono aggiunti alla vista dei commenti in tempo reale. |
|||
* **Formattazione Markdown:** gli utenti possono utilizzare il Markdown per formattare il proprio testo. |
|||
|
|||
### Vuoi saltare tutto questo e vedere semplicemente il sorgente? |
|||
|
|||
[It's all on GitHub.](https://github.com/reactjs/react-tutorial) |
|||
|
|||
### Eseguire un server |
|||
|
|||
Per cominciare questo tutorial dobbiamo richiedere un server in esecuzione. Questo servirà puramente come un endpoint per le API che useremo per ottenere e salvare i dati. Per rendere questo compito il più semplice possibile, abbiamo creato un seplice server in un numero di linguaggi di scripting che fa esattamente ciò che ci serve. **Puoi [leggere il sorgente](https://github.com/reactjs/react-tutorial/) o [scaricare un file zip](https://github.com/reactjs/react-tutorial/archive/master.zip) contenente tutto ciò che ti serve per cominciare.** |
|||
|
|||
Per semplicità, il server che eseguiremo usa un file `JSON` come database. Non è ciò che eseguiresti in produzione, ma rende più facile simulare ciò che faresti per consumare una API. Non appena avvii il server, supporterà il nostro endpoint API e servirà anche le pagine statiche di cui abbiamo bisogno. |
|||
|
|||
### Per Cominciare |
|||
|
|||
Per questo tutorial renderemo il tutto il più semplice possibile. Incluso nel pacchetto del server discusso in precedenza si trova un file HTML su cui lavoreremo. Apri `public/index.html` nel tuo editor preferito. Dovrebbe apparire simile a quanto segue (con qualche piccola differenza, aggiungeremo un tag `<script>` aggiuntivo in seguito): |
|||
|
|||
```html |
|||
<!-- index.html --> |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>React Tutorial</title> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
|||
</head> |
|||
<body> |
|||
<div id="content"></div> |
|||
<script type="text/babel" src="scripts/example.js"></script> |
|||
<script type="text/babel"> |
|||
// To get started with this tutorial running your own code, simply remove |
|||
// the script tag loading scripts/example.js and start writing code here. |
|||
</script> |
|||
</body> |
|||
</html> |
|||
``` |
|||
|
|||
Nel resto di questo tutorial, scriveremo il nostro codice JavaScript in questo tag script. Non disponiamo di alcun aggiornamento in tempo reale avanzato, quindi dovremo aggiornare il browser per vedere gli aggiornamenti dopo il salvataggio. Segui il tuo progresso aprendo `http://localhost:3000` nel tuo browser (dopo aver avviato il server). Quando carichi la pagina per la prima volta senza apportare cambiamenti, vedrai il risultato finale di ciò che ci apprestiamo a costruire. Quando sei pronto per cominciare a lavorare, elimina il tag `<script>` precedente e quindi sei pronto a continuare. |
|||
|
|||
> Nota: |
|||
> |
|||
> Abbiamo incluso jQuery perché vogliamo semplificare il codice delle nostre chiamate ajax future, ma **NON** è richiesto per far funzionare React. |
|||
|
|||
### Il tuo primo componente |
|||
|
|||
In React ciò che importa sono i componenti modulari e componibili. Per il nostro esempio della casella dei commenti, avremo la seguente struttura dei componenti: |
|||
|
|||
``` |
|||
- CommentBox |
|||
- CommentList |
|||
- Comment |
|||
- CommentForm |
|||
``` |
|||
|
|||
Costruiamo il componente `CommentBox`, che consiste in un semplice `<div>`: |
|||
|
|||
```javascript |
|||
// tutorial1.js |
|||
var CommentBox = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
Ciao, mondo! Sono un CommentBox. |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
React.render( |
|||
<CommentBox />, |
|||
document.getElementById('content') |
|||
); |
|||
``` |
|||
|
|||
Nota che i nomi degli elementi nativi HTML cominciano con una lettera minuscola, mentre i nomi di classe personalizzati di React cominciano con una lettera maiuscola. |
|||
|
|||
#### Sintassi JSX |
|||
|
|||
La prima cosa che noterai è la sintassi simile a XML nel tuo JavaScript. Abbiamo un semplice preprocessore che traduce lo zucchero sintattico a questo semplice JavaScript: |
|||
|
|||
```javascript |
|||
// tutorial1-raw.js |
|||
var CommentBox = React.createClass({displayName: 'CommentBox', |
|||
render: function() { |
|||
return ( |
|||
React.createElement('div', {className: "commentBox"}, |
|||
"Ciao, mondo! Sono un CommentBox." |
|||
) |
|||
); |
|||
} |
|||
}); |
|||
React.render( |
|||
React.createElement(CommentBox, null), |
|||
document.getElementById('content') |
|||
); |
|||
``` |
|||
|
|||
Il suo uso è opzionale ma abbiamo trovato la sintassi JSX più facile da usare del semplice JavaScript. Leggi maggiori dettagli sull'[articolo sulla sintassi JSX](/react/docs/jsx-in-depth.html). |
|||
|
|||
#### Cosa sta succedendo? |
|||
|
|||
Passiamo dei metodi in un oggetto JavaScript a `React.createClass()` per creare un nuovo componente React. Il più importante di questi metodi è chiamato `render` il quale restituisce un albero di componenti React che saranno eventualmente visualizzati come HTML. |
|||
|
|||
I tag `<div>` non sono veri nodi DOM; sono istanze dei componenti React `div`. Puoi pensare a questi come marcatori o a elementi di dati che React sa come gestire. React è **sicuro**. Non stiamo generando stringhe HTML quindi la protezione XSS è predefinita. |
|||
|
|||
Non devi necessariamente restituire semplice HTML. Puoi anche restituire un albero di componenti costruiti da te (o da qualcun altro). Questo è ciò che rende React **componibile**: una caratteristica chiave dei front-end manutenibili. |
|||
|
|||
`React.render()` istanzia il componente radice, avvia il framework, e inietta il markup in un elemento DOM nativo, fornito come secondo argomento. |
|||
|
|||
## Comporre componenti |
|||
|
|||
Costruiamo degli scheletri per `CommentList` e `CommentForm` che saranno, nuovamente, dei semplici `<div>`. Aggiungi questi due componenti al tuo file, mantenendo la dichiarazione esistente di `CommentBox` e la chiamata a `React.render`: |
|||
|
|||
```javascript |
|||
// tutorial2.js |
|||
var CommentList = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentList"> |
|||
Hello, world! I am a CommentList. |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
var CommentForm = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentForm"> |
|||
Hello, world! I am a CommentForm. |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Successivamente, aggiorna il componente `CommentBox` per utilizzare questi due nuovi componenti: |
|||
|
|||
```javascript{6-8} |
|||
// tutorial3.js |
|||
var CommentBox = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList /> |
|||
<CommentForm /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Nota come stiamo mescolando tag HTML e i componenti che abbiamo costruito. I componenti HTML sono componenti regolari React, proprio come quelli che definisci, con una differenza. Il compilatore JSX riscriverà automaticamente i tag HTML come espressioni `React.createElement(tagName)` e lascerà tutto il resto inalterato. Questo è per impedire che il namespace globale venga inquinato. |
|||
|
|||
### Usare le proprietà |
|||
|
|||
Creiamo il componente `Comment`, che dipenderà dai dati passatigli dal suo genitore. I dati passati da un componente genitore sono disponibili come una 'proprietà' nel componente figlio. Queste 'proprietà' sono accessibili attraverso `this.props`. Usando le proprietà, saremo in grado di leggere i dati passati al componente `Comment` dal componente `CommentList`, e visualizzare del markup: |
|||
|
|||
```javascript |
|||
// tutorial4.js |
|||
var Comment = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="comment"> |
|||
<h2 className="commentAuthor"> |
|||
{this.props.author} |
|||
</h2> |
|||
{this.props.children} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Racchiudendo un'espressione JavaScript dentro parentesi graffe all'interno di JSX (sia come attributo che come figlio), puoi inserire del testo o componenti React all'interno dell'albero. Accediamo per nome ad attributi passati al componente tramite chiavi in `this.props` e ciascun elemento annidato come `this.props.children`. |
|||
|
|||
### Proprietà dei Componenti |
|||
|
|||
Adesso che abbiamo definito il componente `Comment`, vogliamo passargli il nome dell'autore e il testo del commento. Questo ci permette di riutilizzare lo stesso codice per ciascun commento individuale. Ora aggiungiamo dei commenti all'interno del nostro `CommentList`: |
|||
|
|||
```javascript{6-7} |
|||
// tutorial5.js |
|||
var CommentList = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentList"> |
|||
<Comment author="Pete Hunt">Questo è un commento</Comment> |
|||
<Comment author="Jordan Walke">Questo è un *altro* commento</Comment> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Nota che abbiamo passato dei dati dal componente genitore `CommentList` al componente figlio `Comment`. Ad esempio, abbiamo passato *Pete Hunt* (tramite un attributo) e *Questo è un commento* (tramite un nodo figlio simil-XML) al primo `Comment`. Come detto in precedenza, il componente `Comment` accederà a queste 'proprietà' attraverso `this.props.author` e `this.props.children`. |
|||
|
|||
### Aggiungiamo il Markdown |
|||
|
|||
Il Markdown è una maniera semplice di formattare il tuo testo in linea. Ad esempio, racchiudendo il testo con asterischi gli aggiungerà dell'enfasi. |
|||
|
|||
Per prima cosa, aggiungiamo la libreria di terze parti **marked** alla tua applicazione. Questa è una libreria JavaScript che prende il testo Markdown e lo converte in HTML nativo. Per fare ciò è richiesto un tag script nel tag head (che abbiamo già incluso nel playground React): |
|||
|
|||
```html{8} |
|||
<!-- index.html --> |
|||
<head> |
|||
<meta charset="utf-8" /> |
|||
<title>React Tutorial</title> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/{{site.react_version}}/react.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> |
|||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script> |
|||
</head> |
|||
``` |
|||
|
|||
Successivamente, convertiamo il testo del commento da Markdown e scriviamolo: |
|||
|
|||
```javascript{9} |
|||
// tutorial6.js |
|||
var Comment = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="comment"> |
|||
<h2 className="commentAuthor"> |
|||
{this.props.author} |
|||
</h2> |
|||
{marked(this.props.children.toString())} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Tutto ciò che stiamo facendo qui è chiamare la libreria marked. Dobbiamo convertire `this.props.children` dal testo racchiuso di React a una stringa che marked è in grado di capire, quindi vi chiamiamo esplicitamente `toString()`. |
|||
|
|||
Ma c'è un problema! I nostri commenti visualizzati appaiono come segue nel browser: "`<p>`Questo è un `<em>`altro`</em>` commento`</p>`". Noi vogliamo che questi tag vengano in realtà visualizzati come HTML. |
|||
|
|||
Questo è il risultato della protezione di React da parte di un [attacco XSS](https://en.wikipedia.org/wiki/Cross-site_scripting). C'è una maniera di aggirare questo comportamento, ma il framework ti avvisa di non farlo: |
|||
|
|||
```javascript{4,10} |
|||
// tutorial7.js |
|||
var Comment = React.createClass({ |
|||
rawMarkup: function() { |
|||
var rawMarkup = marked(this.props.children.toString(), {sanitize: true}); |
|||
return { __html: rawMarkup }; |
|||
}, |
|||
|
|||
render: function() { |
|||
return ( |
|||
<div className="comment"> |
|||
<h2 className="commentAuthor"> |
|||
{this.props.author} |
|||
</h2> |
|||
<span dangerouslySetInnerHTML={this.rawMarkup()} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Questa è una speciale API che rende intenzionalmente difficile inserire HTML nativo, ma per marked ci avvantaggeremo di questa possibilità. |
|||
|
|||
**Ricorda:** usando questa funzionalità stai assumendo che marked sia sicuro. In questo caso, passiamo `sanitize: true` che istruisce marked a fare l'escape di ogni markup HTML nel sorgente, anziché restituirlo inalterato. |
|||
|
|||
### Collega il modello dei dati |
|||
|
|||
Finora abbiamo inserito i commenti direttamente nel codice sorgente. Invece, visualizziamo un pacchetto di dati JSON nella lista dei commenti. In seguito questi verranno restituiti dal server, ma per adesso scriviamoli nel tuo sorgente: |
|||
|
|||
```javascript |
|||
// tutorial8.js |
|||
var data = [ |
|||
{author: "Pete Hunt", text: "Questo è un commento"}, |
|||
{author: "Jordan Walke", text: "Questo è un *altro* commento"} |
|||
]; |
|||
``` |
|||
|
|||
Dobbiamo inserire questi dati in `CommentList` in maniera modulare. Modifica `CommentBox` e la chiamata a `React.render()` per passare questi dati a `CommentList` tramite proprietà: |
|||
|
|||
```javascript{7,15} |
|||
// tutorial9.js |
|||
var CommentBox = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.props.data} /> |
|||
<CommentForm /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<CommentBox data={data} />, |
|||
document.getElementById('content') |
|||
); |
|||
``` |
|||
|
|||
Adesso che i dati sono disponibili in `CommentList`, visualizziamo i commenti dinamicamente: |
|||
|
|||
```javascript{4-10,13} |
|||
// tutorial10.js |
|||
var CommentList = React.createClass({ |
|||
render: function() { |
|||
var commentNodes = this.props.data.map(function (comment) { |
|||
return ( |
|||
<Comment author={comment.author}> |
|||
{comment.text} |
|||
</Comment> |
|||
); |
|||
}); |
|||
return ( |
|||
<div className="commentList"> |
|||
{commentNodes} |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Tutto qui! |
|||
|
|||
### Richiedere dati dal server |
|||
|
|||
Sostituiamo i dati scritti nel codice con dati dinamici ottenuti dal server. Rimuoveremo le proprietà dei dati e le sostituiremo con uno URL da richiedere: |
|||
|
|||
```javascript{3} |
|||
// tutorial11.js |
|||
React.render( |
|||
<CommentBox url="/api/comments" />, |
|||
document.getElementById('content') |
|||
); |
|||
``` |
|||
|
|||
Questo componente differisce dal precedente perché dovrà effettuare un nuovo rendering di se stesso. Il componente non avrà dati finché la risposta del server non sia disponibile, e a quel punto il componente potrebbe dover visualizzare dei nuovi commenti. |
|||
|
|||
Nota: il codice non funzionerà a questo passo. |
|||
|
|||
### Stato reattivo |
|||
|
|||
Finora, basandosi sulle sue proprietà, ogni componente si è visualizzato solo una volta. I valori di `props` sono immutabili: sono passati dal genitore e sono "posseduti" dal genitore. Per implementare le interazioni, introduciamo uno **stato** mutevole nel componente. `this.state` è privato al componente e può essere cambiato chiamando `this.setState()`. Quando lo stato si aggiorna, il componente effettua nuovamente il rendering di se stesso. |
|||
|
|||
I metodi `render()` sono scritti dichiarativamente come funzioni di `this.props` e `this.state`. Il framework garantisce che la UI sia sempre consistente con gli input. |
|||
|
|||
Quando il server ci fornisce i dati, dovremo cambiare i dati dei commenti in nostro possesso. Aggiungiamo un array di dati dei commenti al componente `CommentBox` come il suo stato: |
|||
|
|||
```javascript{3-5,10} |
|||
// tutorial12.js |
|||
var CommentBox = React.createClass({ |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
`getInitialState()` viene eseguito esattamente una volta durante il ciclo di vita del componente e imposta lo stato iniziale del componente stesso. |
|||
|
|||
#### Aggiornare lo stato |
|||
Quando il componente è creato per la prima volta, vogliamo richiedere tramite GET del JSON dal server e aggiornare lo stato per riflettere i dati più recenti. Useremo jQuery per effettuare una richiesta asincrona al server che abbiamo avviato in precedenza per richiedere i dati che ci servono. Somiglieranno a qualcosa di simile: |
|||
|
|||
```json |
|||
[ |
|||
{"author": "Pete Hunt", "text": "Questo è un commento"}, |
|||
{"author": "Jordan Walke", "text": "Questo è un *altro* commento"} |
|||
] |
|||
``` |
|||
|
|||
```javascript{6-18} |
|||
// tutorial13.js |
|||
var CommentBox = React.createClass({ |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
componentDidMount: function() { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
cache: false, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Qui, `componentDidMount` è un metodo chiamato automaticamente da React quando un componente viene visualizzato. La chiave agli aggiornamenti dinamici è la chiamata a `this.setState()`. Sostituiamo il vecchio array di commenti con il nuovo ottenuto dal server e la UI si aggiorna automaticamente. Per via di questa reattività, è richiesto soltanto un piccolo cambiamento per aggiungere gli aggiornamenti in tempo reale. Qui useremo un semplice polling, ma potrai facilmente usare WebSockets o altre tecnologie. |
|||
|
|||
```javascript{3,15,20-21,35} |
|||
// tutorial14.js |
|||
var CommentBox = React.createClass({ |
|||
loadCommentsFromServer: function() { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
cache: false, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
componentDidMount: function() { |
|||
this.loadCommentsFromServer(); |
|||
setInterval(this.loadCommentsFromServer, this.props.pollInterval); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
|
|||
React.render( |
|||
<CommentBox url="/api/comments" pollInterval={2000} />, |
|||
document.getElementById('content') |
|||
); |
|||
|
|||
``` |
|||
|
|||
Tutto ciò che abbiamo fatto finora è spostare la chiamata AJAX in un metodo a parte e chiamarlo quando il componente viene caricato per la prima volta e successivamente ogni 2 secondi. Prova ad eseguire questa versione nel tuo browser e a cambiare il file `comments.json` (si trova nella stessa directory del tuo server); entro 2 secondi i cambiamenti saranno visibili! |
|||
|
|||
### Aggiungere nuovi commenti |
|||
|
|||
È giunto il momento di costruire il modulo. Il nostro componente `CommentForm` deve chiedere all'utente il nome e un testo del commento, e inviare una richiesta al server per salvare il commento. |
|||
|
|||
```javascript{5-9} |
|||
// tutorial15.js |
|||
var CommentForm = React.createClass({ |
|||
render: function() { |
|||
return ( |
|||
<form className="commentForm"> |
|||
<input type="text" placeholder="Il tuo nome" /> |
|||
<input type="text" placeholder="Di' qualcosa..." /> |
|||
<input type="submit" value="Invia" /> |
|||
</form> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Rendiamo il modulo interattivo. Quando l'utente invia il modulo, dobbiamo ripulirlo, inviare una richiesta al server, e aggiornare la lista dei commenti. Per cominciare, ascoltiamo l'evento `submit` del modulo e ripuliamolo. |
|||
|
|||
```javascript{3-14,16-19} |
|||
// tutorial16.js |
|||
var CommentForm = React.createClass({ |
|||
handleSubmit: function(e) { |
|||
e.preventDefault(); |
|||
var author = React.findDOMNode(this.refs.author).value.trim(); |
|||
var text = React.findDOMNode(this.refs.text).value.trim(); |
|||
if (!text || !author) { |
|||
return; |
|||
} |
|||
// TODO: invia la richiesta al server |
|||
React.findDOMNode(this.refs.author).value = ''; |
|||
React.findDOMNode(this.refs.text).value = ''; |
|||
return; |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<form className="commentForm" onSubmit={this.handleSubmit}> |
|||
<input type="text" placeholder="Il tuo nome" ref="author" /> |
|||
<input type="text" placeholder="Di' qualcosa..." ref="text" /> |
|||
<input type="submit" value="Invia" /> |
|||
</form> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
##### Eventi |
|||
|
|||
React assegna i gestori degli eventi ai componenti usando una convenzione di nomi camelCased. Assegnamo un gestore `onSubmit` al modulo in maniera che ripulisca i campi del modulo quando il modulo stesso è inviato con un input valido. |
|||
|
|||
Chiamiamo `preventDefault()` sull'evento per prevenire l'azione predefinita del browser per l'invio del modulo. |
|||
|
|||
##### Refs |
|||
|
|||
Usiamo l'attributo `ref` per assegnare un nome a un componente figlio e `this.refs` per riferirsi al componente. Possiamo chiamare `React.findDOMNode(component)` su di un componente per ottenere l'elemento nativo del DOM del browser. |
|||
|
|||
##### Callback come proprietà |
|||
|
|||
Quando un utente invia un commento, dobbiamo aggiornare la lista dei commenti per includere il nuovo commento. Ha senso posizionare questa logica in `CommentBox` dal momento che `CommentBox` possiede lo stato che rappresenta la lista dei commenti. |
|||
|
|||
Dobbiamo passare i dati dal componente figlio su fino al suo genitore. Lo facciamo nel metodo `render` del nostro genitore passando una nuova callback (`handleCommentSubmit`) al figlio, legandola all'evento `onCommentSubmit` del figlio. Quando questo evento viene emesso, la callback verrà eseguita: |
|||
|
|||
```javascript{16-18,31} |
|||
// tutorial17.js |
|||
var CommentBox = React.createClass({ |
|||
loadCommentsFromServer: function() { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
cache: false, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
handleCommentSubmit: function(comment) { |
|||
// TODO: invia al server e aggiorna la lista |
|||
}, |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
componentDidMount: function() { |
|||
this.loadCommentsFromServer(); |
|||
setInterval(this.loadCommentsFromServer, this.props.pollInterval); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm onCommentSubmit={this.handleCommentSubmit} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Chiamiamo la callback da `CommentForm` quando l'utente invia il modulo: |
|||
|
|||
```javascript{10} |
|||
// tutorial18.js |
|||
var CommentForm = React.createClass({ |
|||
handleSubmit: function(e) { |
|||
e.preventDefault(); |
|||
var author = React.findDOMNode(this.refs.author).value.trim(); |
|||
var text = React.findDOMNode(this.refs.text).value.trim(); |
|||
if (!text || !author) { |
|||
return; |
|||
} |
|||
this.props.onCommentSubmit({author: author, text: text}); |
|||
React.findDOMNode(this.refs.author).value = ''; |
|||
React.findDOMNode(this.refs.text).value = ''; |
|||
return; |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<form className="commentForm" onSubmit={this.handleSubmit}> |
|||
<input type="text" placeholder="Il tuo nome" ref="author" /> |
|||
<input type="text" placeholder="Di' qualcosa..." ref="text" /> |
|||
<input type="submit" value="Invia" /> |
|||
</form> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
Adesso che le callback sono al loro posto, non ci resta che inviare al server e aggiornare la lista: |
|||
|
|||
```javascript{17-28} |
|||
// tutorial19.js |
|||
var CommentBox = React.createClass({ |
|||
loadCommentsFromServer: function() { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
cache: false, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
handleCommentSubmit: function(comment) { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
type: 'POST', |
|||
data: comment, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
componentDidMount: function() { |
|||
this.loadCommentsFromServer(); |
|||
setInterval(this.loadCommentsFromServer, this.props.pollInterval); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm onCommentSubmit={this.handleCommentSubmit} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
### Ottimizzazione: aggiornamenti ottimistici |
|||
|
|||
La nostra applicazione è adesso completa, ma aspettare che la richiesta completi prima di vedere il commento apparire nella lista la fa sembrare lenta. Possiamo aggiungere ottimisticamente questo commento alla lista per fare apparire l'applicazione più veloce. |
|||
|
|||
```javascript{17-19} |
|||
// tutorial20.js |
|||
var CommentBox = React.createClass({ |
|||
loadCommentsFromServer: function() { |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
cache: false, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
handleCommentSubmit: function(comment) { |
|||
var comments = this.state.data; |
|||
var newComments = comments.concat([comment]); |
|||
this.setState({data: newComments}); |
|||
$.ajax({ |
|||
url: this.props.url, |
|||
dataType: 'json', |
|||
type: 'POST', |
|||
data: comment, |
|||
success: function(data) { |
|||
this.setState({data: data}); |
|||
}.bind(this), |
|||
error: function(xhr, status, err) { |
|||
console.error(this.props.url, status, err.toString()); |
|||
}.bind(this) |
|||
}); |
|||
}, |
|||
getInitialState: function() { |
|||
return {data: []}; |
|||
}, |
|||
componentDidMount: function() { |
|||
this.loadCommentsFromServer(); |
|||
setInterval(this.loadCommentsFromServer, this.props.pollInterval); |
|||
}, |
|||
render: function() { |
|||
return ( |
|||
<div className="commentBox"> |
|||
<h1>Commenti</h1> |
|||
<CommentList data={this.state.data} /> |
|||
<CommentForm onCommentSubmit={this.handleCommentSubmit} /> |
|||
</div> |
|||
); |
|||
} |
|||
}); |
|||
``` |
|||
|
|||
### Congratulazioni! |
|||
|
|||
Hai appena costruito una casella di commenti in pochi semplici passi. Leggi maggiori dettagli sul [perché usare React](/react/docs/why-react.html), o approfondisci [la guida di riferimento dell'API](/react/docs/top-level-api.html) e comincia ad hackerare! In bocca al lupo! |
|||
@ -0,0 +1,173 @@ |
|||
--- |
|||
id: videos-it-IT |
|||
title: Video |
|||
permalink: videos-it-IT.html |
|||
prev: conferences-it-IT.html |
|||
next: complementary-tools-it-IT.html |
|||
--- |
|||
|
|||
### Riconsiderare le best practice - JSConf.eu |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/x7cQ3mrcKaY" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"A Facebook e Instagram, con React stiamo provando a spingerci oltre i limiti di ciò che è possibile realizzare sul web. Il mio talk comincerà con una breve introduzione al framework, e poi approfondirà tre argomenti controversi: Gettare via la nozione dei template e costruire le viste con JavaScript, effettuare il “ri-rendering” dell'intera applicazione quando i dati cambiano, e un'implementazione leggera del DOM e degli eventi." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Pensare in react - tagtree.tv |
|||
|
|||
Un video di [tagtree.tv](http://tagtree.tv/) che espone i principi di [Pensare in React](/react/docs/thinking-in-react.html) mentre costruisci una semplice applicazione |
|||
<figure>[](http://tagtree.tv/thinking-in-react)</figure> |
|||
|
|||
* * * |
|||
|
|||
### I Segreti del DOM Virtuale - MtnWest JS |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/h3KksH8gfcQ" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
"In questo talk discuterò perché abbiamo costruito un DOM virtuale, i vantaggi rispetto ad altri sistemi, e la sua rilevanza per il futuro della tecnologia dei browser." -- [Pete Hunt](http://www.petehunt.net/) |
|||
|
|||
* * * |
|||
|
|||
### Pensare in grande con React ### |
|||
|
|||
"Sulla carta, tutti questi framework JS sembrano promettenti: implementazioni pulite, design veloce del codice, esecuzione perfetta. Ma che succede quando metti Javascript sotto stress? Che succede se gli dài in pasto 6 megabyte di codice? In questo talk investigheremo come si comporta React in situazioni di stress elevato, e come ha aiutato il nostro team a costruire codice sicuro ad una scala enorme." |
|||
<figure>[](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)</figure> |
|||
|
|||
* * * |
|||
|
|||
### CodeWinds |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) ha parlato con [Jeff Barczewski](http://jeff.barczewski.com/) a proposito di React nell'Episodio 4 di CodeWinds. |
|||
<figure>[](http://codewinds.com/4)</figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
02:08 - Cos'è React e perché usarlo?<br /> |
|||
03:08 - La relazione simbiotica di ClojureScript e React<br /> |
|||
04:54 - La storia di React e il perché è stato creato<br /> |
|||
09:43 - Aggiornare una pagina web con React senza usare data binding<br /> |
|||
13:11 - Usare il DOM virtuale per cambiare il DOM del browser<br /> |
|||
13:57 - Programmare con React, rendering in HTML, canvas, ed altro<br /> |
|||
16:45 - Lavorare con i designer. Paragone con Ember ed AngularJS<br /> |
|||
21:45 - Il Compilatore JSX che unisce HTML e il javascript di React<br /> |
|||
23:50 - Autobuilding JSX e strumenti nel browser per React<br /> |
|||
24:50 - Trucchi e suggerimenti per lavorare con React, primi passi<br /> |
|||
</td><td> |
|||
27:17 - Rendering HTML lato server con Node.js. Rendering backend<br /> |
|||
29:20 - React evoluto tramite sopravvivenza del più adatto a Facebook<br /> |
|||
30:15 - Idee per avere lo stato sul server e il client, usando web sockets.<br /> |
|||
32:05 - React-multiutente - stato mutevole distribuito usando Firebase<br /> |
|||
33:03 - Miglior debug con React usando le transizioni di stato, ripetere eventi<br /> |
|||
34:08 - Differenze con i Web Components<br /> |
|||
34:25 - Compagnie rilevanti che usano React<br /> |
|||
35:16 - Si può creare un plugin backend di React per generare PDF?<br /> |
|||
36:30 - Futuro di React, cosa viene dopo?<br /> |
|||
39:38 - Contribuire e ricevere aiuto<br /> |
|||
</td></tr></table> |
|||
|
|||
[Leggi le note dell'episodio](http://codewinds.com/4) |
|||
|
|||
* * * |
|||
|
|||
### JavaScript Jabber |
|||
|
|||
[Pete Hunt](http://www.petehunt.net/) e [Jordan Walke](https://github.com/jordwalke) hanno parlato di React in JavaScript Jabber 73. |
|||
<figure>[](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/#content)</figure> |
|||
|
|||
<table width="100%"><tr><td> |
|||
01:34 – Introduzione di Pete Hunt<br /> |
|||
02:45 – Introduzione di Jordan Walke<br /> |
|||
04:15 – React<br /> |
|||
06:38 – 60 Frame Al Secondo<br /> |
|||
09:34 – Data Binding<br /> |
|||
12:31 – Performance<br /> |
|||
17:39 – Algoritmo di Differenza<br /> |
|||
19:36 – Manipolazione del DOM |
|||
</td><td> |
|||
23:06 – Supporto per node.js<br /> |
|||
24:03 – rendr<br /> |
|||
26:02 – JSX<br /> |
|||
30:31 – requestAnimationFrame<br /> |
|||
34:15 – React e le Applicazioni<br /> |
|||
38:12 – Utenti React Khan Academy<br /> |
|||
39:53 – Farlo funzionare |
|||
</td></tr></table> |
|||
|
|||
[Leggi la trascrizione completa](http://javascriptjabber.com/073-jsj-react-with-pete-hunt-and-jordan-walke/) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React.js - Facebook Seattle |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/XxVg_s8xAms" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Tom Occhino](http://tomocchino.com/) e [Jordan Walke](https://github.com/jordwalke) |
|||
|
|||
* * * |
|||
|
|||
### Backbone + React + Middleman Screencast |
|||
<iframe width="650" height="488" src="https://www.youtube-nocookie.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Backbone è una grande maniera di interfacciare una API REST con React. Questo screencast mostra come integrare i due usando [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman è il framework utilizzato in questo esempio, ma può essere facilmente sostituito con altri framework. Si può trovare un template supportato per questo esempio [qui](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/) |
|||
|
|||
* * * |
|||
|
|||
### Sviluppare Interfacce Utente Con React - Super VanJS |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Steven Luscher](https://github.com/steveluscher) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React - LAWebSpeed meetup |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/SMMRJif5QW0" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Di [Stoyan Stefanov](http://www.phpied.com/) |
|||
|
|||
* * * |
|||
|
|||
### React, o come rendere la vita più semplice - FrontEnd Dev Conf '14 |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/YJNUK0EA_Jo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
**In Russo** di [Alexander Solovyov](http://solovyov.net/) |
|||
|
|||
* * * |
|||
|
|||
### "Programmazione funzionale del DOM" - Meteor DevShop 11 |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/qqVbr_LaCIo" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### "Ripensare lo Sviluppo di Applicazioni Web a Facebook" - Facebook F8 Conference 2014 |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/nYkdrAPrdcw" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
* * * |
|||
|
|||
### React e Flux: Costruire Applicazioni con un Flusso Dati Unidirezionale - Forward JS 2014 |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
Gli ingegneri di Facebook [Bill Fisher](https://twitter.com/fisherwebdev) e [Jing Chen](https://twitter.com/jingc) parlano di Flux e React, e di come usare un'architettura dell'applicazione con un flusso di dati unidirezionale rende gran parte del loro codice più pulito. |
|||
|
|||
* * * |
|||
|
|||
### Rendering Lato Server di Applicazioni Isomorfiche a SoundCloud |
|||
|
|||
<iframe src="https://player.vimeo.com/video/108488724" width="650" height="365" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> |
|||
|
|||
[Andres Suarez](https://github.com/zertosh) ci accompagna alla scoperta di come [SoundCloud](https://developers.soundcloud.com/blog/) usa React e Flux per il rendering lato server. |
|||
|
|||
[Slide e codice d'esempio](https://github.com/zertosh/ssr-demo-kit) |
|||
|
|||
* * * |
|||
|
|||
### Introduzione a React Native (+Playlist) - React.js Conf 2015 |
|||
|
|||
<iframe width="650" height="366" src="https://www.youtube-nocookie.com/embed/KVZ-P-ZI6W4?list=PLb0IAmt7-GS1cbw4qonlQztYV1TAW0sCr" frameborder="0" allowfullscreen></iframe> |
|||
|
|||
[Tom Occhino](https://twitter.com/tomocchino) ripercorre il passato e il presente di React nel 2015, e ci mostra dove è diretto nell'immediato futuro. |
|||
Loading…
Reference in new issue