In questo tutorial parleremo di React, la pi\u00f9 popolare libreria JavaScript basata su componenti<\/a> utilizzata per creare interfacce utente. Sebbene questo tutorial sia assolutamente adatto ai principianti, pu\u00f2 servire anche come guida di riferimento per gli sviluppatori React pi\u00f9 esperti.<\/p>\n\n Parleremo delle caratteristiche di React, dei pro e dei contro, del perch\u00e9 utilizzarlo e di come installare e usare React. Scopriremo anche alcune delle funzionalit\u00e0 principali di React con esempi pratici di codice.<\/p>\n Alla fine di questo tutorial, dovreste avere un’idea pi\u00f9 chiara di cos’\u00e8 e come funziona React ed essere in grado di utilizzarlo per realizzare fantastici progetti. React.js, normalmente chiamato semplicemente React, \u00e8 una libreria JavaScript<\/a> utilizzata per creare interfacce utente. Ogni applicazione web React \u00e8 composta da componenti riutilizzabili che costituiscono parti dell’interfaccia utente: possiamo avere un componente separato per la nostra barra di navigazione, uno per il footer, un altro per il contenuto principale e cos\u00ec via. Si comprender\u00e0 meglio questo aspetto quando arriveremo alla sezione in cui dovremo lavorare con i componenti.<\/p>\n Avere questi componenti riutilizzabili facilita lo sviluppo perch\u00e9 non dobbiamo ripetere il codice. Dobbiamo solo creare la sua logica e importare il componente dove \u00e8 necessario.<\/p>\n React \u00e8 anche un’applicazione a pagina singola. Quindi, invece di inviare una richiesta al server ogni volta che una nuova pagina deve essere renderizzata, il contenuto della pagina viene caricato direttamente dai componenti React. Questo porta a un rendering pi\u00f9 veloce senza ricaricare la pagina.<\/p>\n Nella maggior parte dei casi, la sintassi utilizzata per la creazione di applicazioni React \u00e8 chiamata JSX (JavaScript XML), che \u00e8 un’estensione della sintassi di JavaScript<\/a>. Questo ci permette di combinare la logica JavaScript e la logica dell’interfaccia utente in un modo unico. Con JSX, non \u00e8 necesario interagire con il DOM utilizzando metodi come Anche se utilizzare JSX non \u00e8 obbligatorio, rende pi\u00f9 semplice lo sviluppo di applicazioni React.<\/p>\n Ecco un esempio di JSX in React:<\/p>\n Nel codice qui sopra, abbiamo utilizzato un componente funzionale React per rendere un testo nel browser. Il nome del componente \u00e8 Abbiamo poi passato questa variabile al markup utilizzando le parentesi graffe. Non si tratta di HTML ma della sintassi per scrivere codice JSX.<\/p>\n Nella prossima sezione analizzeremo alcuni dei motivi per cui utilizzare React.<\/p>\n Molti sviluppatori<\/a> e molte organizzazioni hanno preferito React ad altre librerie\/framework; ecco perch\u00e9:<\/p>\n React \u00e8 stato utilizzato da molti ingegneri front-end sia in startup che in aziende affermate come Facebook, Netflix, Instagram, Yahoo, Uber, The New York Times e altre ancora.<\/p>\n Anche se tutte le aziende sopra elencate non hanno realizzato l’intero prodotto con React, alcune delle loro pagine sono state costruite con React. Questo grazie alle elevate prestazioni, alla facilit\u00e0 d’uso e alla scalabilit\u00e0 di React.<\/p>\n React viene generalmente utilizzato per costruire l’interfaccia utente (frontend) di applicazioni web. Offre un rendering veloce delle pagine e maggiori prestazioni. React pu\u00f2 essere utilizzato per realizzare qualsiasi prodotto che giri sul web.<\/p>\n Ecco solo alcune delle cose che si possono costruire con React:<\/p>\n React vanta una quantit\u00e0 di caratteristiche incredibili che continuano a renderlo un’opzione molto apprezzata tra gli sviluppatori.<\/p>\n Ecco alcune delle principali caratteristiche di React:<\/p>\n React \u00e8 sicuramente uno strumento popolare per la costruzione delle nostre UI, ma ci sono comunque dei motivi per cui alcuni sviluppatori scelgono di non usarlo.<\/p>\n In questa sezione parleremo dei vantaggi e degli svantaggi di React.<\/p>\n Ecco i pro di React:<\/p>\n Ecco alcuni svantaggi di React:<\/p>\n In questa sezione parleremo prima dei prerequisiti di React e poi vedremo come creare un’applicazione React, come creare componenti, come gestire gli eventi e lavorare con gli stati, gli hook<\/a> e le propriet\u00e0 in React.<\/p>\n Prima di utilizzare React, bisogna avere una buona conoscenza ed esperienza di JavaScript<\/a>. Ecco alcuni degli argomenti di JavaScript che consigliamo di ripassare prima di passare a React:<\/p>\n La maggior parte di questi argomenti rientra in ES6. Dovreste anche avere esperienza su HTML<\/a>, dato che il markup costituisce una parte della sintassi JSX.<\/p>\n Prima di installare React, accertatevi di avere installato Node.js sul vostro computer<\/a>.<\/p>\n Una volta completata l’installazione, eseguite questo comando nel terminale:<\/p>\n Se tutto \u00e8 andato per il verso giusto, il comando qui sopra dovrebbe dirvi qual \u00e8 la versione di Node.js installata sul vostro computer.<\/p>\n Successivamente, eseguiremo un altro comando per installare React.<\/p>\n Per prima cosa, create una cartella o navigate nella posizione in cui volete installare l’applicazione React, quindi eseguite questo comando nel terminale:<\/p>\n Il comando precedente installer\u00e0 React in una cartella chiamata react-kit<\/strong>.<\/p>\n Una volta completata l’installazione, aprite la cartella React appena installata nell’editor di codice<\/a> che preferite. In questo tutorial utilizzeremo Visual Studio Code. Visual Studio Code \u00e8 dotato di un terminale integrato. Se intendete utilizzare un terminale diverso, come Git Bash o CMD, andate nella cartella dell’applicazione React ed eseguite questo comando:<\/p>\n Questo comando avvia il vostro server di sviluppo. Dopo un po’ di tempo, nel vostro browser dovrebbe essere visualizzata questa pagina su localhost:3000<\/strong>:<\/p>\n Se avete seguito fino a questo punto, allora avete installato la vostra prima applicazione React. Congratulazioni!<\/p>\n Se date un’occhiata alla struttura delle cartelle, vedrete una cartella chiamata public<\/strong>. Questa cartella contiene un file index.html<\/strong> in cui il nostro codice verr\u00e0 iniettato e servito al browser.<\/p>\n La cartella src<\/strong> \u00e8 dove risiederanno tutta la logica, lo stile e il markup; \u00e8 la nostra cartella di sviluppo con il file App.js<\/strong> che funge da componente principale. Il codice contenuto in questo file \u00e8 quello che vediamo nell’immagine qui sopra.<\/p>\n Aprite il file App.js<\/strong> e apportate alcune modifiche, poi salvate per vedere se le vostre modifiche si riflettono automaticamente nel browser.<\/p>\n Tutto pronto? Ora scriviamo un po’ di codice!<\/p>\n In React esistono due tipi principali di componenti: quelli di classe e quelli funzionali. La documentazione di React \u00e8 attualmente in fase di riscrittura per l’utilizzo degli Hooks, che \u00e8 una caratteristica dei componenti funzionali. Anche in questo tutorial utilizzeremo i componenti funzionali, poich\u00e9 sono diventati i componenti pi\u00f9 utilizzati nelle app React.<\/p>\n Nella maggior parte dei casi, i componenti restituiscono del codice HTML<\/a> con un mix di valori dinamici creati con JavaScript. I componenti vengono creati come le funzioni in JavaScript.<\/p>\n Vediamo un esempio di componente di classe in React.<\/p>\n Ogni componente di classe deve includere l’istruzione Nel componente qui sopra, abbiamo creato una variabile di stato chiamata Quando questo viene visualizzato dal browser, vedremo la scritta “Sto imparando JavaScript” sulla pagina.<\/p>\n In questa sezione ricreeremo l’esempio della sezione precedente utilizzando un componente funzionale.<\/p>\n Aggiungete questa funzione al vostro file:<\/p>\n Il nome del nostro componente \u00e8 lo stesso: Anche questo componente ha una variabile Gli eventi utilizzati in React sono del tutto simili a quelli che utilizziamo in HTML<\/a>. L’unica differenza \u00e8 che gli eventi di React sono scritti con la sintassi camelCase. Quindi “onclick” sarebbe “onClick” in React, “onchange” sarebbe “onChange” e cos\u00ec via.<\/p>\n Quando si passa un evento come attributo in un tag HTML, si usano le parentesi graffe: Ecco un esempio (nel file App.js<\/strong> ):<\/p>\n Nel codice qui sopra, abbiamo creato una funzione che segnala un messaggio nel browser. Abbiamo anche creato un pulsante che richiama questa funzione quando viene cliccato. Il gestore di eventi utilizzato \u00e8 Noterete che il nome della funzione \u00e8 racchiuso tra parentesi graffe e non tra virgolette. Questo \u00e8 il modo per inserire valori dinamici come i nomi delle variabili e delle funzioni nel markup quando si utilizza JSX.<\/p>\n Inoltre, invece di usare “class” come faremmo con l’HTML, usiamo “className”. Questo perch\u00e9 “classe” \u00e8 una parola riservata in JavaScript.<\/p>\n Nell’ultima riga abbiamo esportato il nostro componente. Questo ci permette di importarlo in altri componenti.<\/p>\n Per gestire lo stato della nostra applicazione in React, utilizziamo un hook chiamato Con gli hook possiamo gestire lo stato del nostro componente e persino eseguire determinati effetti quando le variabili di stato vengono rese per la prima volta o modificate.<\/p>\n Senza l’hook Vediamo un esempio.<\/p>\n Ora diamo un’occhiata a quello che abbiamo appena fatto.<\/p>\n Per prima cosa abbiamo importato l’hook Successivamente, abbiamo creato una funzione chiamata changeName<\/strong>, che utilizza la funzione setName<\/strong> per aggiornare il valore della variabile name<\/strong>.<\/p>\n Nel nostro markup, una volta cliccato sul pulsante, “John” viene cambiato in “James”.<\/p>\n Nella prossima sezione vedremo come utilizzare un altro hook in React.<\/p>\n Nella sezione precedente abbiamo visto come gestire lo stato della nostra applicazione utilizzando l’hook L’hook Vediamo alcuni esempi:<\/p>\n La prima cosa da fare \u00e8 importare l’hook Ogni volta che clicchiamo sul pulsante, la variabile name<\/strong> viene incrementata di uno; questa variazione del valore di name<\/strong> fa s\u00ec che l’hook Nella prossima sezione parleremo delle Props e del flusso di dati tra i componenti.<\/p>\n Le Props ci permettono di passare i dati da un componente all’altro. In questo modo il flusso di dati nella nostra applicazione diventa dinamico e manutenibile. Props \u00e8 l’abbreviazione di properties.<\/p>\n Vediamo un esempio di come usare le Props.<\/p>\n Ecco come appare il nostro file App.js<\/strong>:<\/p>\n Creiamo un altro componente chiamato Bio.js<\/strong> e aggiungiamo questo codice:<\/p>\n Successivamente, importeremo il componente Bio<\/strong> nel nostro componente App<\/strong> in questo modo:<\/p>\n La prima riga \u00e8 quella in cui abbiamo importato il componente Bio<\/strong>. Poi inseriamo il componente tra i tag Ora avete capito come il codice pu\u00f2 essere riutilizzato in React. Ma questo codice \u00e8 statico: sar\u00e0 lo stesso in ogni componente in cui viene utilizzato. Questo non \u00e8 efficiente nei casi in cui vogliamo utilizzare lo stesso componente ma con informazioni diverse.<\/p>\n Risolviamo questo problema utilizzando Props.<\/p>\n Nel componente Bio.js<\/strong>, aggiungete:<\/p>\n Abbiamo prima destrutturato e passato come parametri Abbiamo esportato il componente nell’ultima riga di codice: Al momento, non vediamo alcun valore per la loro visualizzazione. Lo faremo nel componente App<\/strong>; ecco come:<\/p>\n Abbiamo aggiunto degli attributi al nostro tag Bio<\/strong> che corrispondono alle props create in precedenza. Qualsiasi valore inserito in questi attributi sar\u00e0 visualizzato nel browser. Questo \u00e8 importante per i componenti che verranno utilizzati in pi\u00f9 componenti ma che richiedono dati diversi.<\/p>\n Questo tutorial ha inteso fornire le conoscenze fondamentali per iniziare a costruire applicazioni web con React, ma non \u00e8 tutto quello che c’\u00e8 da sapere su React. Ci sono altre funzionalit\u00e0 necessarie per costruire un’applicazione efficiente con React, come il routing nelle applicazioni che hanno pi\u00f9 di una pagina e la gestione di un singolo stato utilizzando strumenti come Redux.<\/p>\n Il posto migliore per iniziare ad approfondire la conoscenza di React \u00e8 la documentazione di React<\/a>. Potreste anche dare un’occhiata alla documentazione della beta<\/a> che \u00e8 stata riscritta utilizzando gli Hook. L’utilizzo di React come libreria frontend ha continuato ad aumentare in modo massiccio rispetto ad altre librerie e framework<\/a> nella comunit\u00e0 degli sviluppatori e non mostra alcun segno di arresto. React \u00e8 presente in tutte le roadmap degli sviluppatori web moderni.<\/p>\n Con l’attuale adozione della tecnologia web3 da parte di un numero sempre maggiore di sviluppatori, React \u00e8 rimasto lo strumento preferito per la creazione del frontend delle applicazioni decentralizzate (DApp).<\/p>\n Con React \u00e8 possibile realizzare una grande variet\u00e0 di applicazioni, dalle semplici applicazioni web per le liste di cose da fare ai marketplace, alle dashboard e cos\u00ec via.<\/p>\n React pu\u00f2 essere utilizzato con molte tecnologie come Bootstrap, Tailwind CSS<\/a>, Axios, Redux, Firebase e molte altre. Possiamo anche utilizzare React con Node.js e altri linguaggi<\/a> backend per costruire applicazioni full-stack<\/a> e web app che funzionano alla velocit\u00e0 della luce.<\/p>\n","protected":false},"excerpt":{"rendered":" Il settore del web development ha visto una crescita costante negli ultimi anni e, di pari passo con questa crescita, emergono sempre nuove tecnologie che permettono …<\/p>\n","protected":false},"author":240,"featured_media":57107,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[25648,25920,25846,25707,25919],"topic":[25918,26212],"class_list":["post-57106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-librerie-javascript","tag-react","tag-react-js","tag-sviluppo-frontend","topic-framework-javascript","topic-react"],"yoast_head":"\n
\nCos’\u00e8 React?<\/h2>\n
document.getElementById<\/code>, querySelector<\/code> e altri metodi di manipolazione del DOM.<\/p>\nfunction App() {\n const greetings = \"Hello World\";\n return (\n <div className=\"App\">\n <h1> {greetings} <\/h1>\n <\/div>\n );\n }\n}<\/code><\/pre>\nApp<\/code>. Abbiamo creato una variabile prima della funzione render()<\/code>.<\/p>\nPerch\u00e9 React?<\/h2>\n
\n
Chi Usa React?<\/h2>\n
Casi d’Uso di React<\/h2>\n
\n
Caratteristiche di React<\/h2>\n
\n
\n
\n
Pro e Contro di React<\/h2>\n
\n
\n
Iniziare con React<\/h2>\n
Prerequisiti di React<\/h3>\n
\n
let<\/code> e const<\/code><\/li>\n<\/ul>\nCome Installare React<\/h3>\n
node -v<\/code><\/pre>\nnpx create-react-app react-kit<\/code><\/pre>\nnpm run start<\/code><\/pre>\n![\"Server](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/react-npm-start.png\")
I Componenti in React<\/h3>\n
Creare un Componente di Classe in React<\/h3>\n
React.Component<\/code> e l’istruzione render() subclass.<\/code><\/p>\nclass Student extends React.Component {\n constructor() {\n super();\n this.state = {language: \"JavaScript\"};\n }\n render() {\n return <p>I am learning {this.state.language} <\/p>;\n }\n}<\/code><\/pre>\nlanguage<\/code> con un valore stringa “JavaScript”. Abbiamo poi utilizzato questa variabile nel nostro markup. Questo esempio mostra come sia possibile mescolare JavaScript e HTML senza fare riferimento ad alcun metodo del DOM.<\/p>\nCreare un Componente Funzionale in React<\/h3>\n
function Student() {\n const language = \"JavaScript\";\n return (\n <div>\n <p>I am learning { language } <\/p>\n <\/div>\n );\n}<\/code><\/pre>\nStudent<\/code>. Fate iniziare sempre il nome dei vostri componenti con una lettera maiuscola. Anche questa variabile \u00e8 stata passata nel markup come abbiamo fatto nella sezione precedente senza manipolare il DOM con i metodi DOM di JavaScript.<\/p>\nStudent<\/code> che \u00e8 stata renderizzata, ma man mano che procediamo nel tutorial, utilizzeremo un hook chiamato useState<\/code> per creare le nostre variabili di stato.<\/p>\nLa Gestione gli Eventi in React<\/h3>\n
onClick={changeName}<\/code> invece delle virgolette onClick=\"changeName\"<\/code><\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nonClick<\/code>.<\/p>\nLavorare con gli Stati in React<\/h3>\n
useState<\/code>. Gli hook ci permettono di accedere ad altre funzionalit\u00e0 di React senza scrivere una classe.<\/p>\nuseState<\/code> in un componente funzionale, qualsiasi modifica apportata alle nostre variabili di stato non si rifletter\u00e0 sul DOM e quindi lo stato rimarr\u00e0 invariato.<\/p>\nimport { useState } from \"react\";\nfunction App() {\n const [name, setName] = useState(\"John\");\n const changeName = () => {\n setName(\"James\");\n };\n return (\n <div className=\u201dApp\u201d>\n <p>His name is {name}<\/p>\n <button onClick={changeName}> Click me <\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseState<\/code> da React. Abbiamo poi creato una variabile di stato chiamata name<\/strong> e una funzione – setName<\/strong> – che verr\u00e0 utilizzata per aggiornare il valore della variabile name<\/strong>. Il valore iniziale della variabile name \u00e8 memorizzato nell’hook useState<\/code>, ad es. “John”.<\/p>\nLavorare con gli Hook in React<\/h3>\n
useState<\/code>. In questa sezione vedremo come utilizzare l’hook useEffect<\/code>.<\/p>\nuseEffect<\/code> esegue un effetto ogni volta che si verifica un cambiamento in uno stato. Di default, questo hook viene eseguito al primo rendering e ogni volta che lo stato viene aggiornato, ma possiamo configurare e collegare un effetto a una rispettiva variabile di stato.<\/p>\nimport { useState, useEffect } from \"react\";\nfunction App() {\n const [day, setDay] = useState(1);\n useEffect(() => {\n console.log(`You are in day ${day} of the year`);\n });\n return (\n <div>\n <button onClick={() => setDay(day + 1)}>Click to increase day<\/button>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nuseEffect<\/code>.<\/p>\nuseEffect<\/code> registri un messaggio nella console, il che avviene ogni volta che la variabile name<\/strong> cambia.<\/p>\nLavorare con le Props in React<\/h3>\n
function App() {\n return (\n <div>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nfunction Bio() {\n return (\n <div>\n <p>My name is John<\/p>\n <p>I am a JavaScript developer<\/p>\n <\/div>\n );\n}\nexport default Bio;<\/code><\/pre>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\ndiv<\/code> nel nostro componente App<\/strong>. Quando visualizzate questo file nel browser, vedrete renderizzato il codice creato nel componente Bio<\/strong>.<\/p>\nfunction Bio({name, language}) {\n return (\n <div>\n <p>My name is { name }<\/p>\n <p>I am a { language } developer<\/p>\n <\/div>\n );\n\n}\nexport default Bio;<\/code><\/pre>\nname<\/code> e language<\/code>. Questi parametri sono stati poi utilizzati dinamicamente nel nostro markup.<\/p>\nexport default Bio;<\/code> per poterlo importare in qualsiasi altro componente che richieda la sua logica.<\/p>\nimport Bio from \".\/Bio\";\nfunction App() {\n return (\n <div className=\"App\">\n <Bio name=\"James\" language=\"Python\"\/>\n <\/div>\n );\n}\nexport default App;<\/code><\/pre>\nDove Imparare di Pi\u00f9<\/h2>\n
\n<\/p>\nRiepilogo<\/h2>\n