Guida React
Introduzione a React
Quella che segue è un'introduzione a React, la libreria di Facebook per creare interfacce utente. In questa guida faremo riferimento alla versione 15.4.2 anche se il team React baserà le future versioni, forse già a partire dalla versione 16.0.0, su un nuovo algoritmo interno che migliorerà le prestazioni della libreria (per maggiori informazioni leggere qui). In ogni caso,...
Primi passi in React
Dopo aver introdotto i concetti basilari di React, vediamo come utilizzare la libreria. Iniziare ad usare React è semplice. Come primo esempio, al fine di semplificare al massimo il codice, creeremo un singolo file index.html contenente il seguente codice:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<title>Primo esempio di applicazione usando React</title>
</head>
<body>
<!-- Nodo radice usato come contenitore...
Introduzione a JSX
Abbiamo visto il nostro primo esempio in React, vediamo ora come usare JSX.
Cos'è JSX
Con React sono stati introdotti diversi concetti e novità, direttamente o indirettamente legati alla libreria. Il Team React, nella documentazione ufficiale, suggerisce di usare JSX per lo sviluppo delle nostre applicazioni web.
JSX sta per JavaScript eXtension. Si tratta di un'estensione sintattica di Javascript che permette di...
Il nostro primo componente React
Nelle precedenti lezioni della nostra Guida a React, abbiamo introdotto alcuni dei concetti chiave per lo sviluppo delle applicazioni in React. Abbiamo più volte fatto riferimento ai Componenti React (React Components) e abbiamo visto come sia teoricamente possibile scomporre un'intera applicazione in più componenti indipendenti. Esaminiamo ora in dettaglio come sia possibile creare dei componenti in React.
In React è...
Componenti React e l’oggetto Props
NOTA IMPORTANTE: L'articolo seguente fa riferimento alla versione 15.4.2. React.PropTypes è stato deprecato a partire da React v15.5, tutte le considerazioni fatte nell'articolo seguente sono valide, ma a partire dalla versione 15.5 di React, al posto di React.PropTypes è necessario usare la libreria prop-types.
Abbiamo visto diversi modi per creare un componente in React e abbiamo creato i...
Componenti React dinamici
Abbiamo ampiamente parlato dell'oggetto props che possiamo usare per passare diverse informazioni ai nostri componenti. In questo articolo introdurremo un secondo concetto fondamentale: l'oggetto state. Finora, infatti, non abbiamo potuto apprezzare in pieno le potenzialità di React e ci siamo limitati a vedere componenti configurabili ma statici. A partire da questo articolo, renderemo i nostri componenti dinamici e vedremo...
Componenti React annidati
In React è possibile annidare i componenti. All'interno del metodo render() di un componente possiamo usare uno o più componenti predefiniti o creati da noi. È possibile annidare Functional Component all'interno di Class Component e viceversa.
Riprendiamo un esempio già visto nei precedenti articoli.
const Button = props => <button className={`btn btn--${props.color}`} >click</button>;
const App = props => (
<div>
...
Ciclo di vita di un Componente React
Ogni componente React è caratterizzato da un ciclo di vita. All'interno dei Class Component abbiamo accesso a dei metodi particolari (lifecycle hooks) che potremo usare per intercettare alcuni istanti del ciclo di vita di un componente e stabilire un determinato comportamento per quel componente. Per esempio potremmo eseguire determinate azioni quando un componente viene creato, aggiornato o distrutto o,...
Gestione degli eventi nei componenti React
Per realizzare un'applicazione dinamica, è indispensabile permettere agli utenti di interagire con i vari componenti che la compongono.
Grazie all'uso di JSX, possiamo registrare un gestore di eventi (Event Handler) direttamente sugli elementi in maniera simile a come faremmo in un documento HTML.
Abbiamo già visto alcuni esempi negli articoli precedenti in cui passavamo la proprietà onClick ad un pulsante. Nel...
Comunicazione e interazione fra Componenti React
Abbiamo visto che uno dei concetti cardine su cui si basa React è il flusso unidirezionale di informazioni. Se immaginiamo la nostra appplicazione come una struttura gerarchica di componenti, i dati scorrono, utilizzando l'oggetto Props, dai componenti più in alto nella gerarchia verso il basso. Può succedere che un componente voglia modificare l'oggetto State del componente padre o debba...
Lavorare con Input e Form
In React è possibile usare dei campi di input e form simili a quelli a cui siamo abituati in HTML. Alcuni elementi sono implementati diversamente rispetto ai corrispettivi elementi HTML al fine di migliorare la compatibilità e la facilità di integrazione con il resto dell'applicazione React. Vedremo per esempio che sia l'elemento <textarea> che l'elemento <select> presentano delle piccole...
Strumenti utili per sviluppare applicazioni React: NPM e Yarn
Nei precedenti articoli abbiamo visto vari aspetti di React e abbiamo introdotto alcuni dei concetti base della libreria. In questo articolo faremo una leggera deviazione di percorso, non parleremo direttamente di React ma tratteremo alcuni argomenti utili per lo sviluppo delle applicazioni in React e più in generale in Javascript. In alcuni dei precedenti articoli, abbiamo più volte fatto...
Realizzare un’applicazione React con Create React App (CRA)
Finora abbiamo visto dei semplici esempi in React in cui abbiamo importato react.js e react-dom.js direttamente all'interno di una pagina HTML. Abbiamo poi inserito i nostri componenti all'interno di un tag script o a limite abbiamo importato un file esterno. Per realizzare applicazioni più complicate, il metodo visto finora non è sicuramente il più efficiente. Non possiamo usufruire di...
React app e comunicazione con un server
In questo articolo vediamo come sia semplice comunicare con un server e utilizzare l'API fornita per salvare lo stato della nostra applicazione in modo da ripristinarlo ogni volta che effettuiamo un refresh della pagina. Infatti, finora l'oggetto State dei nostri componenti manteneva le informazioni in memoria fino al prossimo refresh della pagina del browser. Ogni volta che avviavamo nuovamente...
React: fogli di stile e animazioni
In questo articolo faremo una rapida introduzione alle diverse metodologie che è possibile usare quando si parla di formattare e personalizzare le applicazioni React usando il CSS. Sarà una veloce panoramica, per maggiori dettagli è opportuno consultare la documentazione. Parleremo poi brevemente delle diverse alternative a disposizione quando si vogliono usare delle animazioni in React. Anche in questo caso...
React Router
React Router è una libreria che permette di creare applicazioni React con più pagine in cui la transizione fra una pagina e l'altra avviene in maniera dinamica tramite Javascript, senza dover ogni volta ricaricare la pagina.
Questa è certamente una delle funzionalità indispensabili per una Single Page Application. Potremmo creare il nostro Router da zero usando per esempio la History...
Introduzione a Flux e Redux
Una delle caratteristiche di React è sicuramente quella che prevede il passaggio di informazioni da un componente padre ai suoi discendenti in un flusso unidirezionale di dati. Abbiamo detto che se immaginiamo la struttura della nosta applicazione come un albero, le informazioni scorrono dal nodo radice alle foglie dell'albero. Man mano che la nostra applicazione cresce abbiamo bisogno di...
Guida Redux: come funziona e quali sono gli elementi essenziali
Nella lezione precedente abbiamo fatto una panoramica di Redux elencandone i principi fondamentali. In questo articolo cercheremo di analizzare in dettaglio come funziona Redux. Vedremo prima quali sono gli elementi essenziali per usare Redux nelle nostre applicazioni. In Redux possiamo infatti distinguere tre componenti: Action, Reducer, Store. Vediamo allora di cosa si tratta e come sono fra loro correlati.
Primo...
Collegare Redux e React con react-redux
Nei precedenti articoli abbiamo parlato di Redux e abbiamo visto, nel dettaglio, come funziona. Ricapitolando, Redux fa uso di alcune funzioni chiamate Action creator che restituiscono un oggetto Action. Queste sono semplici oggetti javascript che devono contenere almeno una proprietà type e vengono passati, attraverso il metodo store.dispatch(), al Reducer. Il Reducer, che è una funzione pura e può...
Introduzione ai Redux middleware
Nei precedenti articoli abbiamo introdotto Redux e abbiamo visto come usarlo all'interno delle applicazioni React grazie a React-redux. Al fine di spiegare in maniera più semplice possibile come funziona Redux, abbiamo volontariamente trascurato una funzionalità importante: i Middleware. Negli articoli precedenti abbiamo affermato che, attraverso la funzione store.dispatch(action), passiamo un'Action a quello che abbiamo chiamato rootReducer il quale, a...
Action asincrone in Redux
Nella precedente lezione abbiamo visto cosa sono e come usare i middleware. Illustreremo ora qualche altro esempio di middleware, in particolare affronteremo il caso in cui sia necessario gestire delle Action asincrone.
Finora abbiamo creato delle funzioni Action Creator che restituiscono degli oggetti corrispondenti alle Action che vogliamo lanciare. In alcune situazioni non è però possibile restituire un semplice oggetto....