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,...
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...
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...
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 è...
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...
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...
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>
...
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,...
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...
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...
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...
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...
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...
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...
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 è 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...
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...
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...
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ò...
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...
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....
Abbiamo a cuore la tua privacy
Noi e i nostri partner archiviamo e/o accediamo a informazioni su un dispositivo. Cookie, identificatori del dispositivo o analoghi identificatori online (ad es. identificatori basati sull’accesso, identificatori assegnati casualmente, identificatori basati sulla rete) insieme ad altre informazioni (ad es. tipo di browser e informazioni sul browser, lingua, dimensioni dello schermo, tecnologie supportate, ecc.) possono essere archiviati sul o letti dal dispositivo dell’utente per riconoscerlo ogni volta che l’utente si connette a un’app o a un sito web, per una o più finalità qui presentate.
Con il tuo consenso, i tuoi dati possono essere utilizzati per quanto segue: Pubblicità e contenuti personalizzati, misurazione delle prestazioni dei contenuti e degli annunci, ricerche sul pubblico, sviluppo di servizi; Dati di geolocalizzazione precisi e identificazione attraverso la scansione del dispositivo.
I tuoi dati personali verranno trattati e le informazioni dal tuo dispositivo (cookie, identificatori univoci e altri dati del dispositivo) possono essere memorizzate, consultate e condivise con 181 partner, o utilizzate specificamente da questo sito o questa app. Alcuni fornitori potrebbero trattare i tuoi dati personali sulla base dell'interesse legittimo, al quale puoi opporti gestendo le tue opzioni qui sotto. Puoi revocare il tuo consenso in qualsiasi momento facendo clic sul link delle impostazioni sulla privacy situato in fondo alla pagina.
Alcuni partner non chiedono il tuo consenso al trattamento dei tuoi dati, ma fanno affidamento sul loro legittimo interesse commerciale. Guarda il nostro elenco di partner per conoscere gli scopi per cui credono di avere un interesse legittimo e come puoi opporti.
Questi sono i nostri partner pubblicitari che partecipano al Framework di trasparenza e consenso dello IAB, creato per garantire un uso trasparente e corretto dei dati.
Questi fornitori sono registrati su Google, ma non nel Transparency & Consent Framework di IAB Europe.
{"b_dec":{"def":"Rifiuta e chiudi","res":"Rifiuta e chiudi"},"priclt":"\u003Cdiv class=\u0022cl-consent-settings cl-consent-settings--is-hidden\u0022\u003E\u003Cstyle\u003E.cl-consent-settings{position:fixed;left:16px;bottom:calc(28px + var(--__lxG___css_var_privacy_icon_auto, 0px));z-index:100;transition:all 0.15s ease-in-out;transform:translateY(0)}.cl-consent-settings--is-hidden{transform:translateY(70px);opacity:0}.cl-consent-settings__hint{border-radius:4px;background:#282A3C;box-shadow:0 4px 24px 0 rgba(0,0,0,.15);color:#FFFCF2;position:absolute;right:-195px;top:0;bottom:0;margin:auto;height:40px;width:175px;display:flex;align-items:center;justify-content:center;padding:4px 12px;font-size:12px;font-weight:400;line-height:16px;cursor:default;user-select:none;transition:transform 0.3s ease,opacity 0.3s ease;transform:translateX(-22px);opacity:0;pointer-events:none;z-index:-1}.cl-consent-settings__hint::after{content:\u0022\u0022;position:absolute;left:-16px;top:0;bottom:0;margin:auto;width:0;height:0;border:0 solid transparent;border-top-width:12px;border-bottom-width:12px;border-right:16px solid #282A3C}.cl-consent-settings__btn{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;padding:0;border:none;background-color:#4b81e8!important;background-position:center center;background-size:30px 30px;background-repeat:no-repeat;box-shadow:0 0 20px 0 rgba(0,0,0,.35);z-index:70;position:relative;text-decoration:none;cursor:pointer}.cl-consent-settings__btn::before{content:\u0022\u0022;-webkit-mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);mask-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 width=\u002730\u0027 height=\u002730\u0027 viewBox=\u00270 0 30 30\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 d=\u0027M15 2.813C8.28 2.813 2.812 8.28 2.812 15S8.28 27.188 15 27.188c6.72 0 12.188-5.468 12.188-12.188C27.188 8.28 21.72 2.812 15 2.812Zm0 1.874c5.686 0 10.313 4.627 10.313 10.313 0 5.686-4.627 10.313-10.313 10.313-5.686 0-10.313-4.627-10.313-10.313C4.688 9.314 9.314 4.687 15 4.687Zm-1.875 3.75a.937.937 0 1 0 0 1.875.937.937 0 0 0 0-1.874Zm5.156.938a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.812Zm-7.968 2.813a1.875 1.875 0 1 0 0 3.749 1.875 1.875 0 0 0 0-3.75Zm5.624 1.874a.938.938 0 1 0 0 1.876.938.938 0 0 0 0-1.876Zm4.688.938a.938.938 0 1 0 0 1.875.938.938 0 0 0 0-1.875Zm-8.906 2.813a1.406 1.406 0 1 0 0 2.812 1.406 1.406 0 0 0 0-2.813Zm6.562.937a1.406 1.406 0 1 0 0 2.813 1.406 1.406 0 0 0 0-2.813Z\u0027\/%3E%3C\/svg%3E\u0022);background-color:#ffffff!important;mask-repeat:no-repeat;width:30px;height:30px}.cl-consent-settings__btn:hover+.cl-consent-settings__hint{transform:translateX(0);pointer-events:all;opacity:1}.cl-consent-settings__user{width:18px;height:18px;border-radius:50%;padding:0;border:1px solid #fff;background-color:#00AD98;background-image:url(\u0022data:image\/svg+xml,%3Csvg xmlns=\u0027http:\/\/www.w3.org\/2000\/svg\u0027 viewBox=\u00270 0 10 11\u0027 width=\u002710\u0027 height=\u002711\u0027 fill=\u0027none\u0027%3E%3Cpath fill=\u0027%23fff\u0027 stroke=\u0027%23fff\u0027 stroke-width=\u0027.1\u0027 d=\u0027M6.858 6.262A3.3 3.3 0 0 0 8.2 3.597C8.2 1.796 6.764.325 5 .325s-3.2 1.47-3.2 3.272c0 1.094.53 2.07 1.342 2.665A4.67 4.67 0 0 0 .45 10.5v.05h1v-.05c0-2.012 1.585-3.632 3.55-3.632s3.55 1.62 3.55 3.632v.05h1v-.05a4.67 4.67 0 0 0-2.692-4.238ZM5 1.345c1.22 0 2.2 1.002 2.2 2.252s-.98 2.25-2.2 2.25-2.2-1-2.2-2.25.98-2.252 2.2-2.252Z\u0027\/%3E%3C\/svg%3E\u0022);background-position:center center;background-size:9px 10px;background-repeat:no-repeat;z-index:75;position:absolute;top:-2px;right:-8px;text-decoration:none;visibility:hidden}\u003C\/style\u003E\u003Cbutton type=\u0022button\u0022 class=\u0022cl-consent-settings__btn\u0022 onclick=\u0022if(window.__lxG__consent__ !== undefined) {window.__lxG__consent__.showConsent()} else {alert(\u0027This function only for users from European Economic Area (EEA)\u0027)} return false\u0022\u003E\u003Cspan class=\u0022cl-consent-settings__user\u0022\u003E\u003C\/span\u003E\u003C\/button\u003E\u003Cdiv class=\u0022cl-consent-settings__hint\u0022\u003EPrivacy and cookie settings\u003C\/div\u003E\u003C\/div\u003E","pricds":"show_in_the_footer","pricaa":1,"vcnt":181,"_t":{"titles":"Purposes|Purposes (Legitimate Interest)|Features|Special Features|Special Purposes|Scopi|Scopi (Interesse Legittimo)|Caratteristiche|Caratteristiche Speciali|Scopi Speciali","sp3_ret":"Le scelte che fai riguardo agli scopi e alle entità elencati in questo avviso sono salvate per un massimo di %sp3_retention% nei seguenti cookie e variabili di archiviazione locale","ill_pp_ttl":"Esempi di Utilizzo","vndr_dtls_con":"Trattamento dei dati basato sul tuo consenso","vndr_dtls_li":"Trattamento dei dati basato sul legittimo interesse","vndr_dtls_fi":"Trattamento dei dati basato sul tuo consenso o interesse legittimo","cks_strg_dur":"dura %DURATION%","cks_strg_ses":"per la sessione attuale","cks_strg_not_used":"non utilizzato","cks_strg_dur_s":"sec","cks_strg_dur_i":"min","cks_strg_dur_h":"ora(e)","cks_strg_dur_d":"giorno(i)","cks_strg_dur_m":"mese(i)","cks_strg_dur_y":"anno(i)","vr_dts_purl":"URL della politica sulla privacy","vr_dts_dsurl":"URL di divulgazione dell\u0027archiviazione del dispositivo","vr_dts_dsurl_h":"Informazioni aggiuntive su archiviazione e operazioni","vr_dts_clmurl":"URL della richiesta di interessi legittimi","vr_dts_datac":"Categorie di dati","vr_dts_datac_h":"Categorie di dati raccolti in relazione agli scopi","vr_dts_stdret":"Conservazione dei dati standard (giorni)","vr_dts_stdret_h":"Il periodo standard è utilizzato a meno che non sia dichiarato un altro periodo per scopi specifici.","vr_dts_ret":"Conservazione dei dati (giorni)","vr_dts_usecks":"Usa i cookie","vr_dts_usecks_h":"Indica se il fornitore utilizza l\u0027archiviazione dei cookie (sessione o altro). SÌ indica che l\u0027archiviazione dei cookie è utilizzata. NO - l\u0027archiviazione dei cookie non è utilizzata.","vr_dts_usecksy":"Sì","vr_dts_usecksn":"No","vr_dts_cksage":"Età massima del cookie","vr_dts_cksage_h":"Il numero di secondi che rappresenta la durata potenziale più lunga per l\u0027archiviazione dei cookie su un dispositivo. Se un fornitore utilizza più cookie con durate diverse, rappresenta il cookie con la durata più lunga. Un numero negativo o 0 indica l\u0027archiviazione della sessione simile alla specifica Set-Cookie.","vr_dts_cksref":"Aggiornamento cookie","vr_dts_cksref_h":"Indica se i cookie vengono aggiornati dopo essere stati inizialmente impostati. SÌ - indica che il fornitore può aggiornare i cookie. NO - indica che il fornitore non aggiorna i cookie ogni volta che il browser viene ricaricato.","vr_dts_noncks":"Utilizza l\u0027accesso senza cookie","vr_dts_noncks_h":"Indica l\u0027uso da parte del fornitore di archiviazione non-cookie e accesso alle informazioni già memorizzate sul dispositivo di un utente. SÌ - indica che l\u0027accesso senza cookie è utilizzato. NO - indica che l\u0027archiviazione e l\u0027accesso senza cookie alle informazioni già memorizzate sul dispositivo di un utente non vengono utilizzati.","vr_dts_hgetl":"Limite della lunghezza della richiesta HTTP GET (Kbyte)","vr_dts_hgetl_h":"Dimensione massima della richiesta GET in kilobyte per aiutare a diagnosticare i problemi con il passaggio della stringa TC e limitare le stringhe di dimensioni eccessive.","vr_dts_addtnl":"Dati aggiuntivi","vr_dts_legaddr":"Indirizzo completo dell\u0027entità legale","vr_dts_b2bcont":"Dettagli di contatto B2B","vr_dts_terscp":"Ambito territoriale","vr_dts_terscp_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_env":"Ambiente","vr_dts_env_h":"Indica gli ambienti in cui il venditore opera","vr_dts_tserv":"Tipo di servizi","vr_dts_tserv_h":"Indica il tipo di servizi offerti dal venditore","vr_dts_trnsfout":"Trasferimenti internazionali fuori dall\u0027UE\/SEE","vr_dts_trnsfout_h":"Indica le giurisdizioni UE\/SEE\/UK in cui il fornitore opera con TCF. Nota che questo è diverso dalla sede del fornitore.","vr_dts_trnsfmch":"Meccanismi di trasferimento internazionale"}}