Guida introduttiva a React
Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)



MVC è un paradigma molto popolare nello sviluppo web ed è in circolazione ormai da qualche tempo. Il framework React è una parte potente della trinità Model-View-Controller, poichè si focalizza puramente sulla View. React è scritto in Javascript e realizzato dai teams di sviluppo di Facebook e Instagram.
React viene usato nel web per realizzare veloci applicazioni web, facili da mantenere grazie al modo in cui il framework React struttura il codice a livello di View.
Cosa può fare React?
- Realizzare applicazioni web estremamente veloci, responsive e isomorfiche, indipendenti dai frameworks. React non fa alcuna ipotesi sullo stack di tecnologia in cui risiede.
- La manipolazione virtuale del DOM vi fornisce un semplice modello di programmazione che può essere renderizzato nel browser, su server o desktop tramite React Native.
- Le associazioni di flussi di dati con React sono progettate come un flusso di dati unidirezionale reattivo. Ciò riduce i requisiti standard ed è più facile lavorarci rispetto ai metodi tradizionali.
Hello World
Per iniziare, ecco un semplice esempio di React preso dalla documentazione ufficiale:
var HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); React.render( <HelloMessage name="John" />, document.getElementById('container') );
In questo esempio verrà eseguito il rendering di 'Hello John' in un contenitore <div>
. Prendete nota della sintassi in stile XML/HTML utilizzata nelle linee 3 e 8. Viene definita JSX.
Cos'è JSX?
JSX è una sintassi simile all'XML/HTML che viene usata per il rendering di HTML dall'interno del codice Javascript. React trasforma JSX in Javascript nativo per il browser, e con gli strumenti forniti potrete convertire l'HTML di siti esistenti in JSX!
JSX rende facile il rimescolamento di codice perché sembra di scrivere HTML nativo, ma dall'interno di JavaScript. Combinato con Node, garantisce un flusso di lavoro piuttosto consistente.
JSX non è richiesto per usare React - potrete usare puro JS - ma è uno strumento davvero potente che rende facile definire strutture ad albero e assegnare attributi, così ne consigliamo caldamente l'utilizzo.
Per avere il rendering di un tag HTML in React, usate semplicemente nomi per tag a carattere minuscolo con del codice JSX come questo:
//className is used in JSX for class attribute var fooDiv = <div className="foo" />; // Render where div#example is our placeholder for insertion ReactDOM.render(fooDiv, document.getElementById('example'));
Installare React
Ci sono diversi metodi per usare React. Il metodo ufficiale raccomandato è utilizzare npm o i CDN di Facebook, ma in aggiunta potrete clonare il git e sviluppare il vostro metodo. Potrete anche usare lo starter kit o risparmiare tempo con un generatore di struttura Yeoman. Vedremo tutti questi metodi per una comprensione esaustiva.
Usare il CDN Facebook
Il modo più veloce di proseguire consiste nell'includere le librerie React e React Dom dal CDN fb.me come segue:
<!-- The core React library --> <script src="https://fb.me/react-0.14.0.js"></script> <!-- The ReactDOM Library --> <script src="https://fb.me/react-dom-0.14.0.js"></script>
Installazione da NPM
Il manuale React raccomanda di usare React con un modulo di sistema CommonJS come browserify o webpack.
Il manuale React raccomanda inoltre di usare i pacchetti npm react
e react-dom
. Per installarli sul vostro sistema, eseguite quanto segue al prompt del terminale bash all'interno della directory del progetto, o create una nuova directory ed eseguite cd
per entrarvi.
$ npm install --save react react-dom $ browserify -t babelify main.js -o bundle.js
Sarete ora in grado di vedere l'installazione di React dentro la directory node_modules
.
Installazione da Sorgente Git
Dipendenze
Dovrete avere Node V4.0.0+ e npm v2.0.0+. Potete verificare la versione di node con l'istruzione node version
e di npm con l'istruzione npm version
.
Aggiornare Node attraverso NVM
Raccomandiamo l'utilizzo di nvm - il version manager di node per aggiornare e scegliere la versione di node. È facile acquisire nvm eseguendo:
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash
Questo script clona la repository nvm in ~/.nvm
e aggiunge la linea di sorgente al vostro profilo (~/.bash_profile
, ~/.zshrc
o ~/.profile
)
Se volete installare manualmente nvm
potete farlo attraverso git
con:
git clone https://github.com/creationix/nvm.git ~/.nvm && cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`
Per attivare nvm con questo metodo, avete bisogno di accedere tramite shell con:
. ~/.nvm/nvm.sh
Nota: Aggiungete questa linea ai vostri rispettivi files ~/.bashrc
, ~/.profile
, o ~/.zshrc
per avere nvm automaticamente caricato al login.
Usare NVM
Ora che nvm è installato, possiamo avere qualsiasi versione di node richiesta, e possiamo controllare la lista delle versioni installate attraverso node list
e quelle disponibili tramite node ls-remote
. Abbiamo bisogno di una versione più alta della 4.0.0 per lavorare con React.
Installate la versione più recente e impostatela come versione di default con i seguenti comandi:
$ nvm install 4.2.1 $ nvm alias default 4.2.1 default -> 4.2.1 (-> v4.2.1) $ nvm use default Now using node v4.2.1 (npm v2.14.7)
Node viene aggiornato ed npm è incluso nel prezzo. Siete ora pronti per procedere con l'installazione.
Build React da Sorgente Git
Clonate la repository tramite git sul vostro sistema in una directory denominata react
con l'istruzione:
git clone https://github.com/facebook/react.git
Una volta che avete clonato la repository potete usare grunt
per una build di React:
# grunt-cli is needed by grunt; you might have this installed already but lets make sure with the following $ sudo npm install -g grunt-cli $ npm install $ grunt build
A questo punto, una directory build/
è stata popolata con ciò che vi occorre per usare React. Controllate la directory /examples
per vedere alcuni esempi funzionanti!
Usare lo Starter Kit
Prima di tutto effettuate il download dello starter kit.
Estraete l'archivio zip e nella cartella principale create un file helloworld.html
, aggiungendo il codice seguente:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.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"> ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') ); </script> </body> </html>
In questo esempio, React sfrutta Babel per trasformare JSX in puro Javascript attraverso <script type="text/babel">
.
Usare un file Javascript a parte
Create un nuovo file al percorso src/helloworld.js
e inseritevi il seguente codice:
ReactDOM.render( <h1>Hello, world!</h1>, document.getElementById('example') );
Ora ciò di cui avete bisogno è un riferimento all'interno del vostro HTML, aprite quindi helloworld.html
e caricate lo script che avete appena creato usando un tag script
con un attributo type text/babel
nel modo seguente
<script type="text/babel" src="src/helloworld.js"></script>
Aggiornate la pagina e vedrete il rendering di helloworld.js
grazie a babel.
Nota: Alcuni browsers (per esempio Chrome) non riusciranno a caricare il file a meno che non sia servito tramite HTTP, così assicuratevi di usare un server locale. Raccomandiamo il progetto browsersync.
Trasformazione offline
Potete anche usare l'interfaccia a riga di comando (CLI) per trasformare il vostro JSX attraverso gli strumenti di babel per la linea di comando. Facilmente ottenibile tramite il comando di npm:
$ sudo npm install --global babel
Il flag --global
o abbreviato -g
installerà il package babel globalmente in modo che sia accessibile dovunque. Questa è una buona pratica quando si usa Node per progetti multipli e strumenti a riga di comando.
Ora che babel è installato, procediamo alla traduzione di helloworld.js
che abbiamo creato nel passaggio precedente. Al prompt di comandi dalla directory principale dove avete estratto l'archivio zip dello starter kit, eseguite:
$ babel src --watch --out-dir build
Ora il file build/helloworld.js
sarà auto-generato ogni volta che farete cambiamenti! Se siete interessati, leggete la documentazione di Babel CLI per approfondire la conoscenza.
Ora che babel ha generato build/helloworld.js
, che contiene solo puro JavaScript, aggiornate l'HTML senza tags di tipo script per abilitare babel.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <!-- No need for Babel! --> </head> <body> <div id="example"></div> <script src="build/helloworld.js"></script> </body> </html>
Ricapitolando, con babel possiamo caricare JSX direttamente dentro un tag script
attraverso l'attributo type text/babel
. Questo è un bene a fini di sviluppo, ma per andare in produzione possiamo fornire un file JavaScript generato che possa essere memorizzato nella cache della macchina locale dell'utente.
La generazione di questa copia è eseguita sulla linea di comando, e dal momento che è un compito ripetitivo raccomandiamo caldamente di automatizzare il processo usando il flag --watch
. Oppure potete fare un passo in più e utilizzare webpack
e browsersync
per automatizzare completamente il vostro flusso di lavoro di sviluppo. Per farlo nel modo più semplice possibile, possiamo automatizzare il setup di un nuovo progetto con un generatore Yeoman.
Installazione con struttura Yeoman
Yeoman è uno strumento molto utile per iniziare rapidamente progetti, con un ottimo flusso di lavoro e configurazione degli strumenti. L'idea è di permettervi di investire maggior tempo nello sviluppo rispetto alla configurazione dell'area di lavoro del progetto, e di minimizzare operazioni ripetitive (state attenti - RSI è la ragione numero uno per cui i programmatori smettono di programmare). Così, come best practice, risparmiare tempo con strumenti e implementare una logica D.R.Y (Don't Repeat Yourself) nella vostra vita quotidiana migliorerà la vostra salute ed efficienza, e vi farà trascorrere più tempo a sviluppare codice effettivo anziché di configurazione.
Ci sono molte strutture disponibili, in tanti gusti e per diverse scale di progetto. Per questo primo esempio useremo la struttura react-fullstack
tra i generatori Yeoman; potete vedere una demo del risultato finale.
Nota: Questa è una configurazione fullstack, che è probabilmente eccessiva per piccoli progetti. La ragione per cui abbiamo scelto questa struttura è per darvi un ambiente completamente impostato, cosicché possiate vedere come lo starter kit possa evolversi in un'applicazione più grande. Ci sono un header e un footer, e potete vedere dove andranno le funzionalità di login e registrazione utente, sebbene non siano state codificate nell'esempio.
Utilizzo
Per usare yeoman, prima installatelo, e se non avete le controparti di yeoman gulp
, bower
e grunt-cli
richieste, installatele in questo modo:
$ sudo npm install -g yo bower grunt-cli gulp
Ora installate la struttura React con:
$ sudo npm install -g generator-react-fullstack
Ora create una directory per il vostro progetto e digitate cd
per accedervi:
$ mkdir react-project $ cd react-project
Infine usate il comando yo
con il generatore di struttura React-fullstack per creare la vostra app react all'interno della directory:
$ yo react-fullstack
Yeoman creerà ora le directories e i files richiesti; sarete in grado di vedere gli aggiornamenti a riguardo nella linea di comando.
Con la struttura ormai impostata, costruiamo il nostro progetto:
$ npm start
Di default iniziamo in modalità debug, e per andare live aggiungiamo semplicemente il flag --release
, e.g. npm run start --release
.
Vedrete ora crearsi la build e l'inizializzazione di webpack. Una volta fatto questo, vedrete l'output di webpack che vi fornirà informazioni dettagliate circa la build e gli URLs da cui accedere.
Accedete alla vostra app attraverso gli URLs elencati alla fine dell'output, con il vostro browser puntato di default all'indirizzo http://localhost:3000. Per accedere all'interfaccia di amministrazione sincronizzata del browser, andate all'indirizzo http://localhost:3001.
Nota: Potrebbe essere necessario aprire la porta del server per la porta di sviluppo. In ubuntu / debian gli utenti con ufw
, devono eseguire:
$ ufw allow 3001/tcp $ ufw allow 3000/tcp
Convertire un Sito Esistente in JSX
Facebook fornisce uno strumento online se avete bisogno di convertire uno snippet del vostro HTML in JSX.
Per esigenze maggiori c'è uno strumento adatto in npm
denominato htmltojsx
. Effettuate il download:
npm install htmltojsx
Utilizzato tramite la riga di comando è semplice come:
$ htmltojsx -c MyComponent existing_code.htm
Dal momento che htmltojsx
è un modulo node, potete anche usarlo direttamente nel codice, per esempio:
var HTMLtoJSX = require('htmltojsx'); var converter = new HTMLtoJSX({ createClass: true, outputClassName: 'HelloWorld' }); var output = converter.convert('<div>Hello world!</div>');
Elenco di Esempi
Cominciamo a lavorare creando un elementare elenco di cose da fare così potrete vedere come funziona React. Prima di iniziare, configurate il vostro IDE. Raccomandiamo l'utilizzo di Atom.
Al prompt di bash, installate i linters per React tramite apm:
apm install linter linter-eslint react Installing linter to /Users/tom/.atom/packages ✓ Installing linter-eslint to /Users/tom/.atom/packages ✓ Installing react to /Users/tom/.atom/packages ✓
Nota: l'ultima versione di linter-eslint
rendeva il mio MacBook Pro molto lento, così l'ho disabilitato.
Una volta fatto, possiamo proseguire creando un elementare elenco all'interno della struttura che abbiamo realizzato nel passaggio precedente con Yeoman, per mostrarvi un esempio funzionante del flusso dati.
Fate attenzione che il vostro server sia stato avviato con npm start
, e ora provvediamo a fare delle modifiche.
Prima di tutto ci sono tre files di template jade a disposizione in questa struttura. Non li utilizzeremo per l'esempio, cominciate così a pulire il file index.jade
in modo che sia solo un file vuoto. Una volta salvato, controllate il browser e l'output del terminale.
La modifica è visualizzata istantaneamente, senza bisogno di aggiornare. Questo è l'effetto della configurazione di webpack e browsersync fornito dalla struttura dei file.
Aprite successivamente la directory dei componenti e create una nuova directory:
$ cd components $ mkdir UserList
Ora, dentro la directory UserList
, create un file package.json
con il codice seguente:
{ "name": "UserList", "version": "0.0.0", "private": true, "main": "./UserList.js" }
In aggiunta, sempre dentro la directory UserList
, create il file UserList.js
e aggiungete:
//Import React import React, { PropTypes, Component } from 'react'; //Create the UserList component class UserList extends Component { //The main method render is called in all components for display render(){ //Uncomment below to see the object inside the console //console.log(this.props.data); //Iterate the data provided here var list = this.props.data.map(function(item) { return <li key={item.id}>{item.first} <strong>{item.last}</strong></li> }); //Return the display return ( <ul> {list} </ul> ); } } //Make it accessible to the rest of the app export default UserList;
Ora per finire, abbiamo bisogno di aggiungere alcuni dati per questo elenco. Lo faremo dentro components/ContentPage/ContentPage.js
Aprite quel file e impostate i contenuti in modo che appaiano come segue:
/*! React Starter Kit | MIT License | http://www.reactstarterkit.com/ */ import React, { PropTypes, Component } from 'react'; import styles from './ContentPage.css'; import withStyles from '../../decorators/withStyles'; import UserList from '../UserList'; //Here we import the UserList component we created @withStyles(styles) class ContentPage extends Component { static propTypes = { path: PropTypes.string.isRequired, content: PropTypes.string.isRequired, title: PropTypes.string, }; static contextTypes = { onSetTitle: PropTypes.func.isRequired, }; render() { //Define some data for the list var listData = [ {first:'Peter',last:'Tosh'}, {first:'Robert',last:'Marley'}, {first:'Bunny',last:'Wailer'}, ]; this.context.onSetTitle(this.props.title); return ( <div className="ContentPage"> <div className="ContentPage-container"> { this.props.path === '/' ? null : <h1>{this.props.title}</h1> } <div dangerouslySetInnerHTML={{__html: this.props.content || ''}} /> //Use the UserList component as JSX <UserList data={listData} /> </div> </div> ); } } export default ContentPage;
Ora quando salveremo, webpack creerà una nuova build e browsersync mostrerà i cambiamenti sul browser. Guardate il codice sorgente per vedere come è stato renderizzato.
Sommario
Abbiamo usato il generatore di struttura di Yeoman react-fullstack
per cominciare un'applicazione web React a partire da uno starter kit. Per un'ulteriore spiegazione del layout di file e directory, controllate il file readme nella repository git dello starter kit di react.
Da qui abbiamo modificato il file index.jade
in modo da annullarlo e cominciare a creare il nostro layout, creando un nuovo componente denominato UserList
.
Dentro components/UserList/UserList.js
abbiamo definito il rendering dell'elenco attraverso:
var list = this.props.data.map(function(item) { return <li key={item.id}>{item.first} <strong>{item.last}</strong></li> });
Qui è importante notare che React richiede che tutti gli oggetti iterati abbiano un unico identificatore fornito dall'attributo key
.
Per visualizzare l'elenco lo includiamo dentro il file ContentPage.js
con import UserList from '.../UserList';
e definiamo dei dati di testo con:
var listData = [ {first:'Peter',last:'Tosh'}, {first:'Robert',last:'Marley'}, {first:'Bunny',last:'Wailer'}, ];
All'interno di ContentPage.js
chiamiamo il componente UserList
tramite JSX <UserList data={listData} />
.
Ora il componente UserList
può accedere all'attributo data
tramite this.props.data
.
Ogni volta che passiamo un valore con un attributo di un componente, può essere raggiunto tramite this.props
. Potete anche definire il tipo di dato che deve essere fornito usando la variabile statica propTypes
all'interno della sua classe.
Componenti Estesi vs. Sintassi React.createClass
Infine, un punto importante da notare è che questo esempio fa uso di componenti estesi. Ciò ha parecchi benefici nella strutturazione semantica del vostro codice. Potreste però desiderare un approccio più scarno, come presente in altri esempi.
Così invece di class ComponentName extends Component
che avete già visto precedentemente in questo tutorial, create per esempio una classe React con la seguente sintassi:
var MyListItem = React.createClass({ render: function() { return <li>{this.props.data.text}</li>; } }); var MyNewComponent = React.createClass({ render: function() { return ( <ul> {this.props.results.map(function(result) { return <MyListItem key={result.id} data={result}/>; })} </ul> ); } });
Bene questo conclude la nostra introduzione a React. Dovreste ora avere una buona comprensione dei seguenti temi:
- ottenere React
- come usare Babel con React
- usare JSX
- creare un componente attraverso il metodo extend
- usare il vostro componente e fornirgli dati
Nelle sezioni successive, discuteremo in maniera più approfondita di come utilizzare JSX, come lavorare con un database come risorsa di dati persistente, e anche come React lavora con altre popolari tecnologie web come PHP, Rails, Python e .NET.