React è una potente libreria Javascript per creare applicazioni dinamiche e interattive efficienti. In questo articolo vedremo una breve panoramica di ciò che può fare React, partendo da un esempio costruito da zero, senza utilizzare strumenti o ide particolari, ma solo un semplice notepad.
Installazione
Per utilizzare React basta semplicemente creare un nuovo file HTML e importare le librerie React e React Dom con il classico tag script nel blocco head.
<html>
<head>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
/*
Codice REACT va qui
*/
</script>
</body>
</html>
Abbiamo anche importato la libreria Babel, perchè React utilizza la sintassi JSX (ci ritorneremo più avanti…), che viene convertita da Babel in codice Javascript in modo che il browser possa interpretare correttamente il tutto senza generare errori.
Le altre due cose importanti da attenzionare sul file sono:
- Il <div> con l’id #root. Questa rappresenta la radice della nostra app. E’ qui dove l’app verrà renderizzata.
- Il tag <script type=”text/babel”>: è qui dove scriveremo il nostro codice React.js.
Componenti
Un’app React è formata da componenti che solitamente sono implementazioni di classi JavaScript che estendono la classe React.Component. Per creare un semplice componente Test si utilizza questo codice:
class Test extends React.Component {
render() {
return <h1>Hello world!</h1>;
}
}
Nel nostro esempio, dobbiamo definire un solo metodo chiamato render(). Questo metodo si occupa di ritornare una descrizione in HTML (o meglio in JSX) di ciò che desidera che React “disegni” sulla pagina. Nel caso sopra, vogliamo semplicemente che il browser mostri un tag h1 con il testo Hello world!
Per ottenere il rendering sullo schermo dobbiamo anche usare ReactDOM.render() scrivendo di seguito alla classe queste righe di codice:
ReactDOM.render(
<Test />,
document.getElementById("root")
);
In questo modo abbiamo creato una connessione tra la classe Test e l’elemento div #root. Il browser visualizzerà la scritta Hello world! cosi come noi l’abbiamo descritta in JSX (il quale verrà convertito in HTML). Al momento la nostra app è abbastanza inutile: vediamo adesso come estendere alcune funzionalità interessanti riguardo la gestione dei dati.
Gestione dei dati
Ci sono due tipi di dati in React: props e state. La differenza tra i due è abbastanza semplice da comprendere: gli state sono privati e possono essere modificati all’interno del componente stesso. I props sono esterni, immutabili e non sono controllati dal componente. Un componente non può cambiare i props direttamente.
Props
Al momento, il nostro componente Test è statico e restituisce sempre lo stesso messaggio. Una caratteristica importante di React è la riusabilità, cioè la capacità di scrivere un componente una volta e riutilizzarlo in diversi casi d’uso, ad esempio per visualizzare messaggi diversi. Per ottenere questo tipo di riusabilità, possiamo utilizzare i props. Ecco come si passano i props ad un componente (evidenziato in grassetto):
ReactDOM.render (
<Hello messaggio="io sono un prop" />,
document.getElementById ("root")
);
Questo singolo prop si chiama messaggio e ha il valore “io sono un prop”. Possiamo accedere a questo oggetto all’interno di qualsiasi componente (in questo caso Test) utilizzando this.props.messaggio, in questo modo:
class Test extends React.Component {
render() {
return <h1>Ciao{this.props.messaggio}!</h1>;
}
}
Il motivo per cui scriviamo {this.props.messaggio} tra parentesi graffe è perché dobbiamo dire a JSX che stiamo per aggiungere un’espressione JavaScript. Questa tecnica è chiamata escaping.
Quindi ora abbiamo un componente riutilizzabile che può renderizzare qualunque messaggio desideriamo sulla pagina. Tuttavia, cosa succede se vogliamo che il componente sia in grado di modificare i propri dati? In questo caso dobbiamo usare uno state.
State
L’altro metodo per memorizzare dati in React è lo state. A differenza dei props – che non possono essere modificati direttamente dal componente – lo state può essere modificato in runtime. Quindi, se i dati dell’app vengano modificati, ad esempio in base alle interazioni dell’utente, queste modifiche devono essere memorizzate in uno state all’interno del componente in qualche punto dell’app.
Inizializzazione dello state
Per inizializzare lo state, è sufficiente settare this.state dentro il constructor() della classe. this.state è un oggetto Javascript (un oggetto si definisce con le { }) che nel nostro caso ha una sola key chiamata messaggio.
class Test extends React.Component {
constructor(){
super();
this.state = {
messaggio: "io sono uno state!"
};
}
render() {
return <h1>Ciao. {this.state.messaggio}!</h1>;
}
}
Prima di impostare lo state nel costruttore, dobbiamo chiamare il metodo super(), in modo tale da far inizializzare la parola chiave this (altrimenti inutilizzabile).
Modifica dello state
Per modificare lo state, chiamiamo semplicemente this.setState(), passando il nuovo state come argomento. Lo possiamo fare all’interno di un metodo updateMessage.
Nota: per farlo funzionare, dobbiamo utilizzare this.updateMessage, altrimenti non è possibile accedere al metodo.
Il prossimo passo è creare un pulsante su cui fare clic, in modo da poter attivare il metodo updateMessage(). Nel codice sotto, colleghiamo un listener di eventi al pulsante, ascoltando l’evento onClick (da notare che onclick con la c minuscola non avrebbe funzionato…). Quando viene attivato, chiamiamo il metodo updateMessage:
render() {
return (
<div>
<h1>Ciao.{this.state.message}!</h1>
<button onClick={this.updateMessage}>Clicami!</button>
</div>
)
}
Il metodo updateMessage chiama quindi this.setState() che modifica il valore in this.state.messaggio. Ecco qui il codice completo da inserire all’interno del tag script di cui sopra:
class Test extends React.Component {
constructor(){
super();
this.state = {
messaggio: "io sono uno state!"
};
this.updateMessage = this.updateMessage.bind(this);
}
updateMessage() {
this.setState({
messaggio: "il valore dello state è cambiato!"
});
}
render() {
return (
<div>
<h1>Ciao. {this.state.messaggio}!</h1>
<button onClick={this.updateMessage}>Cliccami!</button>
</div>
)
}
}
ReactDOM.render(
<Test />,
document.getElementById("root")
);
Dopo aver salvato il file html, potete aprire la pagina col browser per vedere il risultato finale. Nelle prossime puntate vedremo come utilizzare React per creare applicazioni più complesse e strutturate e di come poter interfacciare React ad un database MongoDb.
