React questo sconosciuto a cura di web design Umbria

Facebook ha creato questo tools di strumenti che fa il verso ad Angular con la differenza di essere meno complicato su progetti complessi, entrambi i framework utilizzano la logica del MVC dove la C finale si mette in mezzo per non far litigare il Model con la View compattando la comunicazione. Con web design Umbria diamo un occhiata a quelle che sono le sue caratteristiche salienti. All’ indirizzo https://facebook.github.io/react/ abbiamo tutto il necessario per procedere. E’ bene precisare subito con web design Umbria che stiamo parlando di UI di user interface e progettazione componenti interattivi gestiti completamente con il linguaggio client side javascript che però può anche diventare server side in alcune varianti di Node. Il motto del framework é imparare una volta scrivere ovunque. La creazione di applicazioni web coinvolge necessariamente tre colonne portanti e cioé HTML, CSS e ovviamente JS che oggi va tanto di moda in versione server svincolandosi dalla sua natura client side. Si tratta di un approccio di tipo mudulare per cui noi creando dei componenti li possiamo riutilizzare presso altre nostre interfacce. Come caratteristica abbiamo delle SPA ossia delle single page application che funzionano da contenitore ma certamente parliamo di un approccio più pulito anche rispetto a Jquery non solo nei confronti di Angular. Il difetto di JQuery é che noi ci ritroviamo con una pagina sporcata un po’ dal codice logico e un po’ dal codice stilistico di presentazione, ci teniamo a precisare come web designer Umbria. Certamente quando il grado di complessità di una applicazione aumenta quello che vogliamo in ultima analisi é semplificare e ridurre le complicazioni e REACT può fare al caso nostro. Una particolarità di REACT é che noi usiamo qui HTML qui per creare componenti web riutilizzabili! Parliamo di un APPROCCIO DICHIARATIVO non complesso e facilmente digeribile, sostanzialmente le CHIAMATE vanno a finire nella libreria API che restituisce al DOM l’effetto desiderato in una maniera veloce e performante. Certamente nel paradigma MVC qui REACT va a sovrapporsi sulla V di vista visto che genera rappresentazioni complete del componente direttamente sulla pagina. Si tratta sostanzialmente di intercettare gli input dell’ utente come avviene del resto con altre librerie. Certamente la facilità di Jquery é riconducibile alla logica dei padri e dei figli e dei nodi all’ interno del DOM. Anche il modo di scrivere il codice in JQ é facile perché ricorda CSS e la logica fa si che noi contrassegniamo con ID e classi gli elementi del DOM per poi operare su di essi con delle trasformazioni se voluto, agganciandoci a poche basilari funzioni e alla logica dell’ aggancio tramite il famoso simbolo del dollaro. E’ proprio qui che viene evidenziata una delle più grandi differenze tra react e JQ nel senso che nel primo caso non abbiamo bisogno di mappare gli elementi della pagina con ID e classi il che produce meno confusione rispetto a quella logica del del business che rende il contenuto di presentazione caotico. REACY esclude un intervento diretto sul DOM e la generazione del markup avviene all’ interno della definizione dei componenti. Sostanzialmente sarà la libreria a intervenire sul DOM senza contrassegni di ID e classi sugli oggetti della pagina. Jquery é semplice da usare ma ciò implica la perdita del controllo sull’ architettura come evidenziato prima da web designer Umbria. Certamente Angular é molto rigoroso e separa a compartimenti stagni il tutto ma all’aumentare della complessità del progetto si rischia di perdere di vista gli interventi tecnici. Certamente quello che fa Angular più di Jquery é quello di risolvere i problemi complessi della presentazione mescolata dando vino vino e pane al pane o viceversa, se vogliamo giocare un po’ con le capacità letterarie di web designer Umbria. Ma c’è un ma. La curva di apprendimenti di Angular richiede molto più dispendio energetico. Certamente l’obiettivo di tutti questi framework é quello di slegare lo sviluppatore dalla necessità di gestire direttamente il DOM. REACT nella sua essenza é molto più minimalista rispetto ad Angular, ha solo l’aggancio verso librerie esterne non ha al suo interno necessità architetturali legate a servizi REST, Ajax o implementazioni UI. Certamente ANGULAR é una soluzione molto più completa rispetto al facile apprendimento di REACT che tende a isolare il codice solo nell’ ambito del suo effettivo utilizzo rendendo il tutto riutilizzabile in contesti analoghi. Per scrivere i componenti in REACT usiamo una sintassi JSX. I progetti composti da React sono composti da file testo che possono essere modellati con qualunque editor da notepad a sublime text a atom a brackets e chi più ne ha più ne metta. Tutti questi editor, precisa web designer Umbria, consentono di installare plug-in al loro interno per potenziare la scrittura veloce di codice, pensiamo ad Emmet per esempio che con un solo ! + tab genera lo scheletro completo di una pagina html con i TAG predisposti di rito. Vediamo come funziona il nostro primo componnte in react, con il classico hello world:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Primi passi con React</title>
https://fb.me/react-with-addons-0.14.0.js
https://fb.me/react-dom-0.14.0.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
</head>
<body>
<!– … –>
</body>
</html>

questo per quanto riguarda la parte preliminare per agganciare le librerie, ora vediamo come diventa la pagina all’ interno del tag body:

<body>

var HelloWorld = React.createClass({
render: function() {
return

Hello React!

;
}
});

ReactDOM.render(, document.getElementById(“hello”));

</body>

in questo topo di sintassi si vede già una prima stranezza, che roba é type=”text/babel ? Mai visto prima dichiara in trasparenza web design Umbria. Con la funzione React.createClass() pescata dalla libreria esterna creiamo l’oggetto JavaScript che conterrà la logica del nostro componente. Per produrre una pagina visibile, dobbiamo usare la funzione render() che avrà il compito di restituire il contenuto che si vuole mostrare, ottenuto citando il markup HTML o richiamando altri componenti della libreria. Sicuramente in questo modo di scrivere il codice c’è qualcosa di strano stiamo usando JS come se fosse HTML e il rendering della pagina con i tag di formattazione avviene all’ interno della funzione. Generare elementi all’ interno della pagina con una sintassi JSX significa richiamare quelle librerie che ci consentono di modellare il DOM a nostro piacimento per esempio:

var HelloWorld = React.createClass({

render: function() {
return <p>Hello <strong>React</strong>!</p>;
}
});

dove React.createClass é il consueto contenitore dove al suo interno viene costruita la pagina. Ma per creare una lista di elementi con REACT come faccio? Simple chess, sentenzia web design Umbria:

// Crea la lista degli elementi
var listElement = <ul className=”list-of-items”>
<li className=”item-1″>Item 1</li>
<li className=”item-2″>Item 2</li>
<li className=”item-3″>Item 3</li>
</ul>;

// Lancia il rendering nella pagina
ReactDOM.render(listElement, document.getElementById(“container”));

Curioso, il neofita che si avvicina a JS é abituato a implementare i suoi script dentro HTML qui invece avviene esattamente il contrario con il metodo RENDER vado a generare la pagina con i suoi tag! Finora con questi esempi preliminari abbiamo visto solo il codice statico, ma come vengono gestiti gli eventi esterni dell’ utente? Questa libreria nasce per permettere il caricamento veloce di tutte quelle interazioni tipiche dei social network (non a caso react nasce da FB) e quindi permette un aggiornamento in tempo reale dei componenti senza interruzioni. In altre parole React ci consente di trasmettere informazioni ai componenti Web utilizzando uno oggetto che rappresenta ne rappresenta uno STATO, come insieme di dati che dinamicamente vengono aggiornati e le proprietà che invece vengono usate staticamente per definire le impostazioni iniziali. Diamo un occhiata a questo codice:

var LoggedUser = React.createClass({

render: function() {

return

Benvenuto {this.props.user.fullName().toUpperCase()},
sei collegato come {this.props.user.userName}.

}
});

var userInfo = {

userName : ‘admin’,
firstName : ‘Albert’,
lastName : ‘Einstein’,

fullName : function() {

return this.firstName + ‘ ‘ + this.lastName;
}
};

ReactDOM.render(, document.body);

La scelta di far transitare informazioni ai componenti sotto forma di proprietà o inserendoli nello stato dipende in primo luogo dalla multiforme natura variabile prevista per le informazioni su cui si basa la propria applicazione web. Mi serve qualcosa di statico o di autoaggiornante? L’oggetto LoggedUser viene istanziato con la classe React.createClass che é da considerarsi come passo iniziale per generare la nostra applicazione. Il metodo render genera il codice della pagina con i tag fisici dell’ html. L’oggetto props ha una proprietà user , il valore di user viene passato alla funzione incaricata di sparare l’output sulla pagina ReactDOM.render(). Questo esempio delel proprietà statiche non possono essere modificate ma che possono essere lette accedento all’ oggetto corrispondente ci fa capire l’importanza di STATO o di aggiornamento dinamico della pagina. In una situazione in cui l’utente deve cliccare per dire mi piace abbiamo a che fare con contenuti dinamici che si aggiornano automaticamente, vediamo un esempio concreto:

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<title>Primi passi con React</title>
https://fb.me/react-with-addons-0.14.0.js
https://fb.me/react-dom-0.14.0.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
</head>
<body>

var LikeButton = React.createClass({

getInitialState: function() {
return { liked: false };
},

render: function() {
if (this.state.liked)
return

Ti piace!

else
return Mi piace
}

doLike: function() {
this.setState({ liked: true });
}

});

</body>
</html>

il nostro componente istanziato deve intercettare il click dell’utente sul link “mi piace” e modificare di conseguenza lo stato del componente sqitchando la proprietà liked. React vedrà tutto ciò e si farà carico di updatare automaticamente la rappresentazione visuale agendo sul DOM in maniera rapida e indolore. per completare il tutto sarà sufficiente introdurre nel componente una nuova funzione – che chiameremo doLike() – la quale richiamerà il metodo setState() per aggiornare lo stato del componente; la funzione sarà agganciata all’evento OnClick dell’elemento <a>. il metodo setState() permette di trasmettere un oggetto al componente React con l’obiettivo di specificare quali proprietà dello stato hanno subito una modificazione: nel nostro caso, il flag liked è stato impostato al valore true. Quando lo stato viene modificato, React chiama nuovamente il metodo render() per ottenere la rappresentazione aggiornata del contenuto che terrà conto dello stato attuale. Questo codice illustra chiaramente quello che si intende per aggiornamento dinamico di stato in REACT. Documentazione, risorse  ed esempi:

http://www.farwebdesign.com/example/react/react.html
http://www.farwebdesign.com/example/react/react1.html
http://www.farwebdesign.com/example/react/react2.html
http://www.farwebdesign.com/example/react/react3.html

https://github.com/facebook/react/wiki/Examples
https://facebook.github.io/react/docs/hello-world.html
https://www.cantierecreativo.net/blog/2016/02/08/react-newbies-tutorial/
http://codingjam.it/react-tutorial/
https://vins78.gitbooks.io/reactjs/chapter_3/reactjs_hello_world.html
https://devnews.it/guide/corso-reactjs-completo-italiano/cosa-sono-components
https://code.tutsplus.com/it/articles/getting-started-with-react–cms-25031
https://code.tutsplus.com/it/tutorials/using-jsx-and-react–cms-25131
http://www.html.it/articoli/react-linterfaccia-utente-costruita-componente-su-componente-3/
https://www.mrwebmaster.it/javascript/primi-passi-react_12364.html

Le interfacce utente costruite con REACT sono scatole chiuse come abbiamo visto dagli esempi precedenti. L’idea é che in base alle azioni degli utenti io posso con questa libreria modificare l’interfaccia utente (abbiamo visto la proprietà STATO su questa dinamicità). Il window.document contiene una gerarchia di oggetti e il DOM é Il DOM (Document Object Model) è la struttura dati che si trova nella memoria del browser. Lelemento caricato nella pagina é figlio di questa gerarchia di oggetti e ognuno di questi nodi può essere modificato tramite il valore delle sue proprietà con dei metodi specifici. Il DOM ha bisogno di essere manipolato, devo appendere nuovi elementi, oppurea volte mi ritroverò nella necessità di rimuoverli. Indipendentemente dal tipo di framework utilizzato per le mie applicazioni le modificazioni che avvengono sulla mia interfaccia avvengono sempre nel DOM come minimo comune denominatore. A questo punto ci sarebbe molto da dire sul VIRTAUL DOM e le API ma qui la trattazione introduttiva su REACT da parte di web design Umbria é già abbastanza coacerva per dirla in maniera sibillina e non é il caso di spingersi troppo oltre nella foresta

Annunci

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...