Introduzione a React: la Prima Libreria Javascript Costruita Per Sviluppatori Frontend

React: per un’interfaccia utente costruita componente su componente



React è una libreria JavaScript, creata da Facebook e Instagram, che permette di creare delle interfacce utente complesse grazie alla suddivisione in diversi componenti.

React supporta la definizione di modelli HTML per ciascun componente attraverso un approccio dichiarativo, che è aggiornato automaticamente dal “core” della libreria nel momento in cui cambiano i dati dello stato su cui si basa il modello stesso.

Per agevolare il lavoro di scrittura del template, gli sviluppatori di React, hanno voluto adottare la sintassi JSX, che consente di mescolare codice e funzioni JavaScript al markup HTML.

Ad esempio, per generare un link all’interno del nostro componente React, basta scrivere una linea di codice simile:

React.renderComponent( 
    return React.DOM.a({href: 'http://facebook.github.io/react/'}, 'Ciao React!'); 
);

Ora la domanda nasce spontanea: nel caso di template complessi, il codice non diventerebbe poco leggibile?

Assolutamento no! Utilizzando JSX, possiamo rappresentare il template, semplificandone la scrittura:

React.renderComponent( 
    <a href="http://facebook.github.io/react/">Ciao React!</a> 
);

Una volta attivato il compilatore con di JSX, con JSXTransformer.js,questo è in grado di interpretare il codice di markup e lo trasforma nel codice corrispondente in linguaggio JavaScript.

Vediamo quindi come creare i componenti fondamentali da combinare per realizzare l’interfaccia.

Il Javascript ci permette di determinare la struttura di un componente. È fondamentale dichiarare:

  1. il DOM da generare, usando (opzionalmente) JSX);
  2. il comportamento. Come il componente reagisce alle azioni dell’utente.

Inoltre il componente può essere considerato una sorta di “macchina a stati”, che indica le variabili che esprimono il suo stato iniziale e che possono essere variate.

Proviamo a creare il classico “Ciao Mondo”.

var HelloReact = React.createClass({ 
 
    render : function() { 
        return <div>Ciao Mondo!</div>; 
    } 
});

Ciascun tag viene tradotto da JSX in un oggetto, percui nel nostro codice sopra ne stiamo restituendo due.

Per poter lavorare con più componenti basta inserirli in un unico “contenitore”:

var HelloWorld = React.createClass({ <bre>
 
    render : function() { 
        return <div><p>Questo è il primo esempio:</p> <span>Ciao Mondo!</span></div>; 
    } 
});

Per poter visualizzare il nostro “Ciao Mondo” , dobbiamo richiamare la funzione React.renderComponent:

 

React.renderComponent( 
    <HelloWorld />, 
    document.body 
);

 

renderComponent() prende due parametri: il componente React che deve essere visualizzato nella pagina e l’elemento del DOM che, ricordiamo, può essere specificato utilizzando la sintassi JSX.

Con React.createClass(), possiamo definire un insieme di proprietà da passare al componente.

var GreetingMessage = React.createClass({ 
 
    render: function() { 
        return <div>Ciao <strong>{this.props.name}</strong></div>; 
    } 
});

Questo è il codice che effettuerà il rendering:

React.renderComponent(, document.body);

Peró attenzione, le proprietà sono immutabili, ossia è impossibile modificare i valori delle proprietà impostati inizialmente: si deve intervenire direttamente sullo stato del componente.

Lo stato di un componente è anche esso un oggetto contenente dei valori che possiamo utilizzare durante il rendering e che, soprattutto, possiamo modificare attraverso delle funzioni specifiche del framework che permettono a React di occuparsi dell’aggiornamento degli elementi del DOM in maniera rapida e performante.

Molto utili anche la funzioni: getInitialState(), che ci restituisce l’oggetto che rappresenta lo stato iniziale del componente ed handleClick(), un callback che intercetta l’azione di clic con il mouse sul testo del componente per variarne lo stato.

Per scoprire altre caratteristiche di React, analizziamo la To Do List presente sul sito ufficiale.

Creazione dell'elenco TO DO LIST:

var TodoList = React.createClass({ 
     
    render: function() { 
        var createItem = function(itemText) { 
            return <li>{itemText}</li>; 
        }; 
         
        return <ul>{this.props.items.map(createItem)}</ul>; 
    } 
});

Viene implementa la funzione render() per generare il markup e la funzione createItem() genera il markup di una singolo item e viene richiamata per ciascun elemento presente nella lista delle attività; la lista è memorizzata nella proprietà items del componente.

Vediamo il codice completo:

 

var TodoApp = React.createClass({  
 
    getInitialState: function() {  
        return {items: [], text: ''};  
    },  
 
    onChange: function(e) {  
        this.setState({text: e.target.value});  
    }, 
 
    handleSubmit: function(e) {  
        e.preventDefault();  
        var nextItems = this.state.items.concat([this.state.text]);  
        var nextText = ''; 
        this.setState({items: nextItems, text: nextText});  
    }, 
  
    render: function() {  
        return (  
            <div>   
            <h3>TODO</h3>  
            <TodoList items={this.state.items} />  
            <form onSubmit={this.handleSubmit}>  
                <input onChange={this.onChange} value={this.state.text} />  
                <button>{'Add #' + (this.state.items.length + 1)}</button>  
            </form>  
            </div>  
        );  
    }  
}); 

Con la funzione getInitialState() si impostano i valori iniziali dell’interfaccia, creando un array vuoto di attività da svolgere ed il testo della descrizione. Nel metodo render() troviamo la dichiarazione del componente <TodoList> a cui viene passata la lista degli elementi ;ad ogni cambiamento alla lista corrisponderà l’azione di React che aggiornerà il DOM del componente sulla pagina.

Il form serve per l’inserimento di nuove attività, con i callback per l’evento onSubmit e dell’evento onChange per la casella di testo in cui inseriamo la descrizione.

Le funzioni di callback svolgono il compito di aggiornare lo stato del componente, delegando a React il compito di intervenire sul DOM.

Infine, per visualizzare il controllo contenitore dell’intera applicazione nel <body> della pagina basta scrivere:

 React .renderComponent(<TodoApp />, document.body);
 
by admin admin Date: 27-11-2015 react javascript frontend facebook Instragram JSX js library visite : 1929  
 
 
 
 

Articoli correlati

    Un'estate pessima per Internet

    Se in queste ultime settimane avete avuto la sensazione che che l'universo digitale stesse implodendo, non eravate soli. Nell'ultimo mese ci sono state diverse ed importanti interruzioni  e malfunzionamenti della rete, che…

    30 Manuali di riferimento per JavaScript: jQuery, Node.js, React

    Questa lista ha lo scopo di introdurre i nuovi sviluppatori a JavaScript (jQuery, Node.js e React) e agevolare il compito degli sviluppatori più esperti. jQuery jQuery API (Official) Leggi → jQuery Cheatsheet (Devhints) Leggi → jQuery Cheat Sheet (JavaScript Toolbox) Leggi…

    Le migliori librerie JavaScript del 2018

    Dal momento che Javascript si è rivelato il linguaggio di programmazione più popolare e ampiamente utilizzato nel 2018, l'ecosistema che si sviluppa intorno ad esso sta cominciando a diventare importante. JavaScript…

    App iOS con React : Creare un Layout System Nativo

    Se hai lavorato con le tecnologie web per un pò, saltare a React Native ti risulterà abbastanza semplice, soprattutto se hai familiarità con ES6. Se poi conosci NPM, ti basterà seguire…

    jQuery: consigli e trucchi utili per migliorare le performance di un sito web

    Quando si sviluppa in jQuery ci si rende conto che esistono diverse maniere di implementare la stessa cosa. La tendenza è di migliorare e semplificare sempre più scrivendo meno righe di…