Introduzione a React: la prima libreria JavaScript costruita per sviluppatori frontend

React: per un’interfaccia utente costruita componente su componente

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);
 
 

tags: react javascript frontend facebook Instragram JSX js library


Questo sito fa uso di cookie, anche di terze parti, per migliorare la tua esperienza di navigazione. Accettando questa informativa dai il consenso al loro utilizzo. È possibile modificare le impostazioni dei cookie o ottenere ulteriori informazioni qui: Politica dei cookies.