Guida introduttiva a React

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?

1. Realizzare applicazioni web estremamente veloci, responsive e isomorfiche, indipendenti dai frameworks. React non fa alcuna ipotesi sullo stack di tecnologia in cui risiede.
2. 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.
3. 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.