Inizia con React

Le biblioteche di JavaScript che hanno il compito di manipolare le viste e il modo in cui visualizzano le informazioni includono sempre più funzionalità che rendono lo sviluppo delle applicazioni più facile per lo sviluppatore e più piacevole per gli utenti che le utilizzano.

Tra queste librerie abbiamo Reagire, che è una libreria di JavaScript di open source focalizzato principalmente sulla creazione di interfacce utente per applicazioni a pagina singola o applicazioni a pagina singola utilizzate da Facebook e Instagram per gestire tutto ciò che si riferisce alle visualizzazioni, risolvendo il problema delle grandi applicazioni dove i dati mostrati all'utente cambiano continuamente.

Funzionalità di reazione

Per risolvere questo problema di cui abbiamo parlato Reagire basa la sua filosofia sulle seguenti caratteristiche:

SempliceQuesta caratteristica esprime come dovrebbe apparire la nostra applicazione a un certo punto e in che modo lo fa, e cosa fa Reagire è che gestisce automaticamente tutti gli aggiornamenti dell'interfaccia utente quando vengono apportate modifiche fondamentali all'applicazione.
DichiarativoQuando le informazioni cambiano nella nostra applicazione Reagire svolge la funzione di rinfrescare la nostra pagina ma solo dove le informazioni sono cambiate.
Costruzione di componenti combinabiliQuando si parla di Reagire, si parla principalmente di costruzione di componenti riutilizzabili, infatti con questa libreria quello che facciamo la maggior parte del tempo è costruire componenti e grazie al fatto che sono incapsulati, rendono estremamente il riutilizzo del codice, i test e la separazione delle funzionalità semplice.

Reagire

Ora che sappiamo in cosa consiste Reagire e le sue caratteristiche, otterremo l'ultima versione della libreria e realizzeremo una semplice implementazione per mostrare il famoso Hello World.

Per ottenere l'ultima versione, scarichiamo un tablet con la libreria al seguente link. Dopo il download, decomprimiamo e posizioniamo il contenuto in una cartella chiamata Hello_React e all'interno creiamo un file chiamato ciao_react.html che conterrà il seguente contenuto:

Come possiamo vedere, è un codice abbastanza semplice che ci permette di rendere un testo nella nostra vista principale grazie all'inclusione di reagire.js. Inoltre usiamo JSX cos'è la sintassi? XML all'interno del nostro JavaScript e quindi effettuare la trasformazione nel browser, che possiamo utilizzare grazie all'implementazione della seconda libreria chiamata JSXTransformer.js

Oltre a questo possiamo rendere il nostro codice più leggibile e modulare separando la sua logica, possiamo farlo creando due file, per questo ne creiamo uno chiamato ciao_react.js e mettiamo il seguente codice:

 React.render (, document.getElementById ('example_react'));

Allora nel nostro HTML quello che facciamo è includere il nostro file .js all'interno del tag script e avremo la stessa operazione:

Vediamo quindi quando eseguiamo il nostro esempio nel browser la sua risposta:

Come possiamo vedere, la manipolazione dei dati è stata abbastanza semplice, tuttavia c'è un modo migliore per implementare Reagire, dal momento che lo stiamo facendo, il codice utilizza il trasformatore di JSX del browser come vedremo nel messaggio che riceviamo tramite la console.

Questo messaggio della console ci dà la soluzione a questo piccolo avvertimento, ed è per eseguire una pre-compilazione del nostro codice .js, per questo useremo il gestore di pacchetti di Nodo.js per questa attività, quindi se non abbiamo questo ambiente installato sul nostro PC andiamo alla pagina ufficiale e lo scarichiamo nel caso in cui stiamo lavorando in Windows e nel caso in cui stiamo lavorando in Linux possiamo seguire i passaggi in questo tutorial.

Pre-compilare il nostro codice

Per eseguire questo compito andiamo alla nostra console Node.js e con l'aiuto di npm abbiamo installato lo strumento Reagire per la console di comando chiamata strumenti di reazione per cui dobbiamo solo eseguire questa riga:

 npm install -g react-tools

Ora quello che facciamo è tradurre il nostro codice in JavaScript puro come segue:

 jsx --watch hello_react.js

Questo non solo traduce il nostro codice, ma genera automaticamente il file ciao_react.js Ogni volta che viene apportata una modifica alla nostra applicazione, vediamo la risposta dalla console quando eseguiamo questo comando:

Infine modifichiamo il nostro HTML rimozione dell'inclusione della libreria JSXTransformer.js poiché non ne abbiamo bisogno e facciamo l'inclusione del nostro script in modo convenzionale, vediamo:

 Ciao Reagisci!

Come accennato, l'ultima operazione che eseguiamo tramite la console genera automaticamente il file ogni volta che apportiamo una modifica alla nostra applicazione, quindi se abbiamo apportato modifiche la console ci avviserà come segue:

Come possiamo vedere, abbiamo due notifiche che sono state apportate modifiche al file, che erano effettivamente quelle che abbiamo fatto rispetto alla rimozione della libreria e all'inclusione convenzionale di un file JavaScript.

Ecco come abbiamo terminato questo tutorial, dove abbiamo potuto muovere i primi passi con Reagire e la sua implementazione nelle nostre applicazioni, questo per aiutarci con la costruzione di componenti per la visualizzazione dei dati nelle nostre viste, verificando che non solo sia semplice ma che ci fornisca strumenti che renderanno molto più facile il nostro sviluppo.