{"id":69737,"date":"2023-06-01T10:02:38","date_gmt":"2023-06-01T09:02:38","guid":{"rendered":"https:\/\/kinsta.com\/it\/?p=69737&#038;preview=true&#038;preview_id=69737"},"modified":"2023-06-06T14:52:46","modified_gmt":"2023-06-06T13:52:46","slug":"javascript-react","status":"publish","type":"post","link":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/","title":{"rendered":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React"},"content":{"rendered":"<p>Oggi <a href=\"https:\/\/kinsta.com\/it\/argomenti\/react\/\">React<\/a> \u00e8 una delle <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/\">librerie JavaScript<\/a> pi\u00f9 popolari. Pu\u00f2 essere utilizzata per creare applicazioni dinamiche e reattive, offre prestazioni migliori e pu\u00f2 essere estesa facilmente. La logica sottostante si basa su componenti che possono essere riutilizzati in contesti diversi, riducendo la necessit\u00e0 di scrivere lo stesso codice pi\u00f9 volte. In breve, con React \u00e8 possibile creare <a href=\"https:\/\/kinsta.com\/it\/argomenti\/react\/\">applicazioni efficienti e potenti<\/a>.<\/p>\n<p>Proprio per questo, non c&#8217;\u00e8 mai stato un momento migliore per imparare a creare applicazioni con React.<\/p>\n<p>Tuttavia, senza una solida conoscenza di alcune caratteristiche chiave di <a href=\"https:\/\/kinsta.com\/javascript\/\">JavaScript<\/a>, sviluppare applicazioni React potrebbe essere difficile o addirittura impossibile.<\/p>\n<p>Per questo abbiamo stilato un elenco di caratteristiche e dei concetti JavaScript che \u00e8 necessario conoscere prima di iniziare a lavorare con React. Quanto meglio si comprendono questi concetti, tanto pi\u00f9 facile sar\u00e0 costruire applicazioni React professionali.<\/p>\n<p>Detto questo, ecco di cosa parleremo in questo articolo:<\/p>\n<div><\/div><kinsta-auto-toc heading=\"Table of Contents\" exclude=\"last\" list-style=\"arrow\" selector=\"h2\" count-number=\"-1\"><\/kinsta-auto-toc>\n<h2>JavaScript e ECMAScript<\/h2>\n<p><a href=\"https:\/\/kinsta.com\/it\/blog\/cosa-e-javascript\/\">JavaScript<\/a> \u00e8 un popolare linguaggio di scripting utilizzato insieme a <a href=\"https:\/\/kinsta.com\/it\/blog\/html\/\">HTML<\/a> e CSS per creare pagine web dinamiche. Mentre l&#8217;HTML viene utilizzato per creare la struttura di una pagina web e il CSS per creare lo stile e il layout dei suoi elementi, JavaScript \u00e8 il linguaggio utilizzato per aggiungere comportamento alla pagina, cio\u00e8 per creare funzionalit\u00e0 e interattivit\u00e0.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JavaScript \u00e8 stato sviluppato nel 1995 da Brendan Eich di Netscape Communications per aggiungere interattivit\u00e0 alle pagine web del browser Netscape Navigator.<\/strong><\/p>\n<\/aside>\n\n<p>Da allora il linguaggio \u00e8 stato adottato dai principali browser ed \u00e8 stato scritto un documento per descrivere il modo in cui JavaScript doveva funzionare: <a href=\"https:\/\/en.wikipedia.org\/wiki\/ECMAScript\" target=\"_blank\" rel=\"noopener noreferrer\">lo standard ECMAScript<\/a>.<\/p>\n<p>A partire dal 2015, ogni anno viene rilasciato un aggiornamento dello standard ECMAScript e quindi ogni anno vengono aggiunte nuove funzionalit\u00e0 a JavaScript.<\/p>\n<p><a href=\"https:\/\/262.ecma-international.org\/6.0\/\" target=\"_blank\" rel=\"noopener noreferrer\">ECMAScript 2015<\/a> \u00e8 stata la sesta versione dello standard ed \u00e8 quindi noto anche come <strong>ES6<\/strong>. Le versioni successive sono segnate in progressione, quindi ci riferiamo a ECMAScript 2016 come ES7, ECMAScript 2017 come ES8 e cos\u00ec via.<\/p>\n<p>Per via della frequenza con cui vengono aggiunte nuove funzionalit\u00e0 allo standard, alcune potrebbero non essere supportate da tutti i browser. Quindi, come assicurarsi che le ultime funzionalit\u00e0 di JavaScript aggiunte alla propria applicazione JS funzionino come previsto su tutti i browser?<\/p>\n<p>Ci sono tre possibilit\u00e0:<\/p>\n<ol>\n<li>Aspettare che tutti i principali browser forniscano il supporto per le nuove funzionalit\u00e0. Ma se avete assolutamente bisogno di quella nuova funzione JS per la vostra applicazione, questa non \u00e8 una soluzione percorribile.<\/li>\n<li>Utilizzare un Polyfill, che \u00e8 &#8220;un pezzo di codice (di solito JavaScript sul Web) utilizzato per fornire funzionalit\u00e0 moderne su browser pi\u00f9 vecchi che non le supportano in modo nativo&#8221; (si veda anche <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Polyfill\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/li>\n<li>Utilizzare un transpiler JavaScript come <a href=\"https:\/\/babeljs.io\/docs\/\" target=\"_blank\" rel=\"noopener noreferrer\">Babel<\/a> o <a href=\"https:\/\/github.com\/google\/traceur-compiler\" target=\"_blank\" rel=\"noopener noreferrer\">Traceur<\/a>, che convertono il codice ECMAScript 2015+ in una versione di JavaScript supportata da tutti i browser.<\/li>\n<\/ol>\n\n<h2>Dichiarazioni ed Espressioni<\/h2>\n<p>Capire la differenza tra dichiarazioni ed espressioni \u00e8 essenziale per la creazione di applicazioni React. Quindi torniamo per un attimo ai concetti di base della programmazione.<\/p>\n<p>Un programma per computer \u00e8 un elenco di istruzioni che devono essere eseguite da un computer. Queste istruzioni sono chiamate <strong>dichiarazioni<\/strong>.<\/p>\n<p>A differenza delle dichiarazioni, le <strong>espressioni<\/strong> sono frammenti di codice che producono un valore. In una dichiarazione, un&#8217;espressione \u00e8 una parte che restituisce un valore e di solito si trova alla destra del segno di uguale.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una dichiarazione \u00e8 un blocco di codice che fa qualcosa.<\/strong><\/p>\n<\/aside>\n\n<p>Mentre:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Un&#8217;espressione \u00e8 un frammento di codice che produce un valore.<\/strong><\/p>\n<\/aside>\n\n<p>Le espressioni JavaScript possono essere blocchi o righe di codice che di solito terminano con il punto e virgola o sono racchiuse tra parentesi graffe.<\/p>\n<p>Ecco un semplice esempio di dichiarazione in JavaScript:<\/p>\n<pre><code class=\"language-js\">document.getElementById(\"hello\").innerHTML = \"Hello World!\";<\/code><\/pre>\n<p>La dichiarazione qui sopra scrive <code>\"Hello World!\"<\/code> in un elemento DOM con <code>id=\"hello\"<\/code>.<\/p>\n<p>Come abbiamo detto, le espressioni producono un valore o sono esse stesse un valore. Consideriamo il seguente esempio:<\/p>\n<pre><code class=\"language-js\">msg = document.getElementById(\"hello\").value;<\/code><\/pre>\n<p><code>document.getElementById(\"hello\").value<\/code> \u00e8 un&#8217;espressione in quanto restituisce un valore.<\/p>\n<p>Un altro esempio dovrebbe aiutare a chiarire la differenza tra espressioni e dichiarazioni:<\/p>\n<pre><code class=\"language-js\">const msg = \"Hello World!\";\nfunction sayHello( msg ) {\n\tconsole.log( msg );\n}<\/code><\/pre>\n<p>In questo esempio,<\/p>\n<ul>\n<li>la prima riga \u00e8 una dichiarazione, dove <code>\"Hello World!\"<\/code> \u00e8 un&#8217;espressione,<\/li>\n<li>la dichiarazione della funzione \u00e8 una dichiarazione, mentre il parametro <code>msg<\/code> passato alla funzione \u00e8 un&#8217;espressione,<\/li>\n<li>la riga che stampa il messaggio nella console \u00e8 una dichiarazione, dove il parametro <code>msg<\/code> \u00e8 un&#8217;espressione.<\/li>\n<\/ul>\n<h3>Perch\u00e9 le Espressioni Sono Importanti in React<\/h3>\n<p>Quando <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-react\/\">si crea un&#8217;applicazione React<\/a>, \u00e8 possibile <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" target=\"_blank\" rel=\"noopener noreferrer\">iniettare espressioni JavaScript nel codice JSX<\/a>. Ad esempio, si pu\u00f2 passare una variabile, scrivere un event handler o una condizione. \u00c8 possibile farlo inserendo il codice JS tra parentesi graffe.<\/p>\n<p>Ad esempio, si pu\u00f2 passare una variabile in questo modo:<\/p>\n<pre><code class=\"language-javascript\">const Message = () =&gt; {\n\tconst name = \"Carlo\";\n\treturn &lt;p&gt;Welcome {name}!&lt;\/p&gt;;\n}<\/code><\/pre>\n<p>In breve, le parentesi graffe indicano al transpiler di elaborare il codice racchiuso tra parentesi come codice JS. Tutto ci\u00f2 che viene prima del tag di apertura <code>&lt;p&gt;<\/code> e dopo il tag di chiusura <code>&lt;\/p&gt;<\/code> \u00e8 normale codice JavaScript. Tutto ci\u00f2 che si trova all&#8217;interno dei tag di apertura <code>&lt;p&gt;<\/code> e di chiusura <code>&lt;\/p&gt;<\/code> viene elaborato come codice JSX.<\/p>\n<p>Ecco un altro esempio:<\/p>\n<pre><code class=\"language-jsx\">const Message = () =&gt; {\t\n\tconst name = \"Ann\";\n\tconst heading = &lt;h3&gt;Welcome {name}&lt;\/h3&gt;;\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t{heading}\n\t\t\t&lt;p&gt;This is your dashboard.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Si pu\u00f2 anche passare un oggetto:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22',\n\t\tdescription: 'Content Writer'\n\t}\n\n\treturn (\n\t\t&lt;div&gt;\n\t\t\t&lt;h2&gt;Welcome {person.name}&lt;\/h2&gt;\n\t\t\t&lt;img\n\t\t\t\tclassName=\"card\"\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\/&gt;\n\t\t\t&lt;p&gt;Description: {person.description}.&lt;\/p&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Di seguito \u00e8 riportato un esempio pi\u00f9 completo:<\/p>\n<pre><code class=\"language-jsx\">render(){\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: {\n\t\t\tboxShadow: '0 4px 8px 0 rgba(0,0,0,0.2)', width: '200px'\n\t\t}\n\t}\n\n\treturn (\n\t\t&lt;div style={person.theme}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Si notino le doppie parentesi graffe negli attributi <code>style<\/code> degli elementi <code>img<\/code> e <code>div<\/code>. Abbiamo usato le doppie parentesi per passare due oggetti che contengono gli stili della scheda e dell&#8217;immagine.<\/p>\n<figure id=\"attachment_152320\" aria-describedby=\"caption-attachment-152320\" style=\"width: 1360px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152320\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/card-example.jpg\" alt=\"Un esempio di biglietto da visita creato con React\" width=\"1360\" height=\"694\"><figcaption id=\"caption-attachment-152320\" class=\"wp-caption-text\">Un esempio di biglietto da visita creato con React<\/figcaption><\/figure>\n<p>In tutti gli esempi precedenti abbiamo inserito espressioni JavaScript in <a href=\"https:\/\/kinsta.com\/it\/blog\/guida-su-jsx\/\">JSX<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f JSX accetta solo espressioni JavaScript tra parentesi graffe. Non \u00e8 consentito scrivere dichiarazioni all&#8217;interno del codice JSX.<\/strong><\/p>\n<p><strong>Questo include:<\/strong><\/p>\n<ul>\n<li><strong>Variabili<\/strong><\/li>\n<li><strong>Stringhe con virgolette<\/strong><\/li>\n<li><strong>Chiamate di funzione<\/strong><\/li>\n<li><strong>Oggetti<\/strong><\/li>\n<li><strong>Espressioni condizionali<\/strong><\/li>\n<\/ul>\n<p><\/p>\n<\/aside>\n\n<h2>Immutabilit\u00e0 in React<\/h2>\n<p>La mutabilit\u00e0 e l&#8217;immutabilit\u00e0 sono <a href=\"https:\/\/en.wikipedia.org\/wiki\/Immutable_object\" target=\"_blank\" rel=\"noopener noreferrer\">due concetti chiave<\/a> della programmazione funzionale e orientata agli oggetti.<\/p>\n<p>Immutabilit\u00e0 significa che un valore non pu\u00f2 essere modificato dopo che lo si \u00e8 creato. Mutabilit\u00e0 significa, ovviamente, il contrario.<\/p>\n<p>In Javascript, i <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Primitive\" target=\"_blank\" rel=\"noopener noreferrer\">valori primitivi<\/a> sono <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Immutable\" target=\"_blank\" rel=\"noopener noreferrer\">immutabili<\/a>: ci\u00f2 significa che una volta creato un valore primitivo, questo non pu\u00f2 essere modificato. Al contrario, gli array e gli oggetti sono mutabili perch\u00e9 le loro propriet\u00e0 e i loro elementi possono essere modificati senza riassegnare un nuovo valore.<\/p>\n<p>Ci sono diversi motivi per utilizzare oggetti immutabili in JavaScript:<\/p>\n<ul>\n<li>Miglioramento delle prestazioni<\/li>\n<li>Riduzione del consumo di memoria<\/li>\n<li>Sicurezza dei thread<\/li>\n<li>Semplificazione del codice e del debug<\/li>\n<\/ul>\n<p>Seguendo il modello dell&#8217;immutabilit\u00e0, una volta che una variabile o un oggetto viene assegnato, non pu\u00f2 essere riassegnato o modificato. Quando si ha bisogno di modificare i dati, \u00e8 necessario crearne una copia e modificarne il contenuto, lasciando inalterato il contenuto originale.<\/p>\n<p>L&#8217;<strong>immutabilit\u00e0<\/strong> \u00e8 un concetto chiave anche in React.<\/p>\n<p>La <a href=\"https:\/\/react.dev\/reference\/react\/Component#state\" target=\"_blank\" rel=\"noopener noreferrer\">documentazione di React<\/a> afferma che:<\/p>\n<blockquote><p>Lo stato di un componente di classe \u00e8 disponibile come <code>this.state<\/code>. Il campo dello stato deve essere un oggetto. Non modificare direttamente lo stato. Se si desidera cambiare lo stato, invocare <code>setState<\/code> con il nuovo stato.<\/p><\/blockquote>\n<p>Ogni volta che lo stato di un componente cambia, React calcola se renderizzare nuovamente il componente e aggiornare il DOM virtuale. Se React non avesse traccia dello stato precedente, non potrebbe stabilire se renderizzare nuovamente il componente o meno. La documentazione di React ne fornisce un <a href=\"https:\/\/react.dev\/learn\/updating-objects-in-state#treat-state-as-read-only\" target=\"_blank\" rel=\"noopener noreferrer\">ottimo esempio<\/a>.<\/p>\n<p>Quali caratteristiche di JavaScript possiamo utilizzare per garantire l&#8217;immutabilit\u00e0 dell&#8217;oggetto <code>state<\/code> in React? Scopriamole!<\/p>\n<h3>La Dichiarazione delle Variabili<\/h3>\n<p>Ci sono tre modi per dichiarare una variabile in JavaScript: <code>var<\/code>, <code>let<\/code>, e <code>const<\/code>.<\/p>\n<p>Le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/var#var_hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">dichiarazioni <code>var<\/code><\/a> esistono fin dall&#8217;inizio di JavaScript. Si usano per dichiarare una variabile a livello di funzione o a livello globale, inizializzandola facoltativamente a un valore.<\/p>\n<p>Quando si dichiara una variabile con <code>var<\/code>, \u00e8 possibile ridichiararla e aggiornarla sia nello scopo globale che in quello locale. Il seguente codice \u00e8 consentito:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a variable\nvar msg = \"Hello!\";\n\n\/\/ Redeclare the same variable\nvar msg = \"Goodbye!\"\n\n\/\/ Update the variable\nmsg = \"Hello again!\"<\/code><\/pre>\n<p>Le dichiarazioni <code>var<\/code> vengono elaborate prima dell&#8217;esecuzione di qualsiasi codice. Di conseguenza, dichiarare una variabile in qualsiasi punto del codice equivale a dichiararla all&#8217;inizio. Questo comportamento \u00e8 noto come &#8220;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Hoisting\" target=\"_blank\" rel=\"noopener noreferrer\">hoisting<\/a>&#8220;, o sollevamento.<\/p>\n<p>Vale la pena notare che solo la dichiarazione della variabile viene sollevata, non l&#8217;inizializzazione, che avviene solo quando <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Control_flow\" target=\"_blank\" rel=\"noopener noreferrer\">il flusso di controllo<\/a> raggiunge la dichiarazione di assegnazione. Fino a quel momento, la variabile \u00e8 <code>undefined<\/code>:<\/p>\n<pre><code class=\"language-js\">console.log(msg); \/\/ undefined\nvar msg = \"Hello!\";\nconsole.log(msg); \/\/ Hello!<\/code><\/pre>\n<p>L&#8217;ambito di una <code>var<\/code> dichiarata in una funzione JS \u00e8 l&#8217;<a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\" target=\"_blank\" rel=\"noopener noreferrer\">intero corpo della funzione stessa<\/a>.<\/p>\n<p>Ci\u00f2 significa che la variabile non \u00e8 definita a livello di blocco, ma a livello dell&#8217;intera funzione. Questo comporta una serie di problemi che possono rendere il codice JavaScript buggato e difficile da mantenere.<\/p>\n<p>Per risolvere questi problemi, ES6 ha introdotto la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/let\" target=\"_blank\" rel=\"noopener noreferrer\">parola chiave <code>let<\/code><\/a>.<\/p>\n<blockquote><p>La dichiarazione <code>let<\/code> dichiara una variabile locale <strong>a livello di blocco<\/strong>, inizializzandola facoltativamente a un valore.<\/p><\/blockquote>\n<p>Quali sono i vantaggi di <code>let<\/code> rispetto a <code>var<\/code>? Eccone alcuni:<\/p>\n<ul>\n<li><strong><code>let<\/code> dichiara una variabile nell&#8217;ambito do scopo del blocco<\/strong>, mentre <code>var<\/code> dichiara una variabile a livello globale o locale per un&#8217;intera funzione, indipendentemente dallo scopo del blocco.<\/li>\n<li><strong>Le variabili globali dichiarate con <code>let<\/code> non sono propriet\u00e0 dell&#8217;oggetto <code>window<\/code><\/strong>. Non \u00e8 possibile accedervi con <code>window.variableName<\/code>.<\/li>\n<li><strong>\u00c8 possibile accedere a <code>let<\/code> solo dopo che la sua dichiarazione \u00e8 stata raggiunta<\/strong>. La variabile non viene inizializzata fino a quando il flusso di controllo non raggiunge la riga di codice in cui \u00e8 stata dichiarata (le dichiarazioni let sono <strong>non-hoisted<\/strong>).<\/li>\n<li><strong>La redichiarazione di una variabile con <code>let<\/code> provoca un <code>SyntaxError<\/code>.<\/strong><\/li>\n<\/ul>\n<p>Dal momento che le variabili dichiarate con <code>var<\/code> non possono essere scansionate in blocco, se si definisce una variabile con <code>var<\/code> in un ciclo o all&#8217;interno di Una dichiarazione <code>if<\/code>, \u00e8 possibile accedervi dall&#8217;esterno del blocco e questo pu\u00f2 generare errori nel codice.<\/p>\n<p>Il codice del primo esempio viene eseguito senza errori. Ora sostituite <code>var<\/code> con <code>let<\/code> nel blocco di codice visto sopra:<\/p>\n<pre><code class=\"language-js\">console.log(msg);\nlet msg = \"Hello!\";\nconsole.log(msg);<\/code><\/pre>\n<p>Nel secondo esempio, l&#8217;utilizzo di <code>let<\/code> al posto di <code>var<\/code> produce un <code>Uncaught ReferenceError<\/code>:<\/p>\n<figure id=\"attachment_151741\" aria-describedby=\"caption-attachment-151741\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151741\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-referenceerror.jpg\" alt=\"Uncaught ReferenceError in Chrome\" width=\"1176\" height=\"222\"><figcaption id=\"caption-attachment-151741\" class=\"wp-caption-text\">Uncaught ReferenceError in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Quindi, come regola generale, si dovrebbe sempre utilizzare <code>let<\/code> invece di <code>var<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>ES6 introduce anche una terza parola chiave: <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/const\"><code>const<\/code><\/a>.<\/p>\n<p><code>const<\/code> \u00e8 abbastanza simile a <code>let<\/code>, ma con una differenza fondamentale:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Le variabili dichiarate con <code>const<\/code> non possono essere assegnate a un valore se non nel punto in cui vengono dichiarate.<\/strong><\/p>\n<\/aside>\n\n<p>Consideriamo il seguente esempio:<\/p>\n<pre><code class=\"language-js\">const MAX_VALUE = 1000;\nMAX_VALUE = 2000;<\/code><\/pre>\n<p>Il codice sopra riportato genererebbe il seguente <a href=\"https:\/\/kinsta.com\/it\/blog\/errori-in-javascript\/#typeerror\">TypeError<\/a>:<\/p>\n<figure id=\"attachment_151743\" aria-describedby=\"caption-attachment-151743\" style=\"width: 1012px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151743\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-assignment-to-constant-variable.jpg\" alt=\"Uncaught TypeError: Assignment to constant variable in Google Chrome\" width=\"1012\" height=\"268\"><figcaption id=\"caption-attachment-151743\" class=\"wp-caption-text\"><em>Uncaught TypeError: Assignment to constant variable<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>Inoltre:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Non \u00e8 possibile dichiarare una <code>const<\/code> senza assegnarle un valore.<\/strong><\/p>\n<\/aside>\n\n<p>Dichiarare una <code>const<\/code> senza dargli un valore provocherebbe il seguente <code>SyntaxError<\/code> (vedi anche <a href=\"https:\/\/hacks.mozilla.org\/2015\/07\/es6-in-depth-let-and-const\/\">ES6 In Depth: let e const<\/a>):<\/p>\n<figure id=\"attachment_151746\" aria-describedby=\"caption-attachment-151746\" style=\"width: 1200px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151746\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-syntax-error-missing-initializer-in-const-declaration.jpg\" alt=\"Uncaught SyntaxError: Missing initializer in const declaration in Chrome\" width=\"1200\" height=\"214\"><figcaption id=\"caption-attachment-151746\" class=\"wp-caption-text\"><em>Uncaught SyntaxError: Missing initializer in const declaration<\/em> in Chrome<\/figcaption><\/figure>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una costante non pu\u00f2 essere redichiarata e il suo valore non pu\u00f2 essere modificato attraverso la riassegnazione.<\/strong><\/p>\n<\/aside>\n\n<p>Tuttavia, se una costante \u00e8 un array o un oggetto, \u00e8 possibile modificare le propriet\u00e0 o gli elementi di quell&#8217;array o di quell&#8217;oggetto.<\/p>\n<p>Ad esempio, si possono modificare, aggiungere e rimuovere elementi di un array:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant array\nconst cities = [\"London\", \"New York\", \"Sydney\"];\n\n\/\/ Change an item\ncities[0] = \"Madrid\";\n\n\/\/ Add an item\ncities.push(\"Paris\");\n\n\/\/ Remove an item\ncities.pop();\n\nconsole.log(cities);\n\n\/\/ Array(3)\n\/\/ 0: \"Madrid\"\n\/\/ 1: \"New York\"\n\/\/ 2: \"Sydney\"<\/code><\/pre>\n<p>Ma non si pu\u00f2 riassegnare l&#8217;array:<\/p>\n<pre><code class=\"language-js\">const cities = [\"London\", \"New York\", \"Sydney\"];\n\ncities = [\"Athens\", \"Barcelona\", \"Naples\"];<\/code><\/pre>\n<p>Il codice sopra riportato provocherebbe un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/TypeError\" target=\"_blank\" rel=\"noopener noreferrer\">TypeError<\/a>.<\/p>\n<figure id=\"attachment_151747\" aria-describedby=\"caption-attachment-151747\" style=\"width: 1166px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151747\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-uncaught-type-error-assignment-to-constant-variable-2.jpg\" alt=\"Uncaught TypeError: Assignment to constant variable.\" width=\"1166\" height=\"227\"><figcaption id=\"caption-attachment-151747\" class=\"wp-caption-text\"><em>Uncaught TypeError: Assignment to constant variable<\/em> in Chrome<\/figcaption><\/figure>\n<p>\u00c8 possibile aggiungere, riassegnare e rimuovere propriet\u00e0 e metodi degli oggetti:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language',\n\tcontent: 'JavaScript is a scripting language that enables you to create dynamically updating content.'\n};\n\n\/\/ add a new property\npost.slug = \"javascript-is-awesome\";\n\n\/\/ Reassign property\npost.id = 5;\n\n\/\/ Delete a property\ndelete post.excerpt;\n\nconsole.log(post);\n\n\/\/ {id: 5, name: 'JavaScript is awesome', content: 'JavaScript is a scripting language that enables you to create dynamically updating content.', slug: 'javascript-is-awesome'}<\/code><\/pre>\n<p>Ma non \u00e8 possibile riassegnare l&#8217;oggetto stesso. Il seguente codice genererebbe un <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\npost = {\n\tid: 1,\n\tname: 'React is powerful',\n\texcerpt: 'React lets you build user interfaces'\n};<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In React, dichiarare le variabili con <code>const<\/code> \u00e8 l&#8217;impostazione predefinita. <code>let<\/code> dovrebbe essere utilizzato quando <code>const<\/code> non \u00e8 appropriato. L&#8217;utilizzo di <code>var<\/code> \u00e8 altamente sconsigliato.<\/strong><\/p>\n<\/aside>\n\n<h3>Object.freeze()<\/h3>\n<p>Siamo d&#8217;accordo sul fatto che l&#8217;utilizzo di <code>const<\/code> non garantisce una forte immutabilit\u00e0 (soprattutto quando si lavora con oggetti e array). Quindi, come implementare il pattern di immutabilit\u00e0 nelle applicazioni React?<\/p>\n<p>Innanzitutto, quando si vuole evitare che gli elementi di un array o le propriet\u00e0 di un oggetto vengano modificati, \u00e8 possibile utilizzare il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Object\/freeze\" target=\"_blank\" rel=\"noopener noreferrer\">metodo statico <code>Object.freeze()<\/code><\/a>.<\/p>\n<blockquote><p>Il congelamento di un oggetto impedisce le estensioni e rende le propriet\u00e0 esistenti non scrivibili e non configurabili. Un oggetto congelato non pu\u00f2 pi\u00f9 essere modificato: non si possono aggiungere nuove propriet\u00e0, non si possono rimuovere quelle esistenti, non si possono modificare la loro enumerabilit\u00e0, configurabilit\u00e0, scrivibilit\u00e0 o valore e non si pu\u00f2 riassegnare il prototipo dell&#8217;oggetto. <code>freeze()<\/code> restituisce lo stesso oggetto che \u00e8 stato passato.<\/p><\/blockquote>\n<p>Qualsiasi tentativo di aggiungere, modificare o rimuovere una propriet\u00e0 fallir\u00e0, sia silenziosamente che lanciando un <code>TypeError<\/code>, pi\u00f9 comunemente in <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">modalit\u00e0 strict<\/a>.<\/p>\n<p><code>Object.freeze()<\/code> pu\u00f2 essere utilizzato in questo modo:<\/p>\n<pre><code class=\"language-js\">'use strict'\n\/\/ Declare a constant obj\nconst post = {\n\tid: 1,\n\tname: 'JavaScript is awesome',\n\texcerpt: 'JavaScript is an awesome scripting language'\n};\n\/\/ Freeze the object\nObject.freeze(post);<\/code><\/pre>\n<p>Se ora provate ad aggiungere una propriet\u00e0, riceverete un <code>Uncaught TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Add a new property\npost.slug = \"javascript-is-awesome\"; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151753\" aria-describedby=\"caption-attachment-151753\" style=\"width: 1256px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151753\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-object-is-not-extensible.jpg\" alt=\"Uncaught TypeError: can't define property \"slug\": Object is not extensible\" width=\"1256\" height=\"300\"><figcaption id=\"caption-attachment-151753\" class=\"wp-caption-text\"><em>Uncaught TypeError: can&#8217;t define property &#8220;slug&#8221;: Object is not extensible<\/em> in Firefox<\/figcaption><\/figure>\n<p>Quando si cerca di riassegnare una propriet\u00e0, si ottiene un altro tipo di <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Reassign property\npost.id = 5; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151865\" aria-describedby=\"caption-attachment-151865\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151865\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-read-only-property.jpg\" alt=\"Riassegnando una propriet\u00e0 di sola lettura si genera un Uncaught TypeError\" width=\"1198\" height=\"288\"><figcaption id=\"caption-attachment-151865\" class=\"wp-caption-text\">Riassegnando una propriet\u00e0 di sola lettura si genera un Uncaught TypeError<\/figcaption><\/figure>\n<figure id=\"attachment_151868\" aria-describedby=\"caption-attachment-151868\" style=\"width: 1190px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151868\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-cannot-assign-to-read-only-property.jpg\" alt=\"Uncaught TypeError: Cannot assign to read only property in Chrome\" width=\"1190\" height=\"254\"><figcaption id=\"caption-attachment-151868\" class=\"wp-caption-text\"><em>Uncaught TypeError: Cannot assign to read only property &#8216;id&#8217; of object &#8216;#&lt;Object&gt;&#8217;<\/em> in Google Chrome<\/figcaption><\/figure>\n<p>\u00c8 anche possibile provare a cancellare una propriet\u00e0. Il risultato sar\u00e0 un altro <code>TypeError<\/code>:<\/p>\n<pre><code class=\"language-js\">\/\/ Delete a property\ndelete post.excerpt; \/\/ Uncaught TypeError<\/code><\/pre>\n<figure id=\"attachment_151869\" aria-describedby=\"caption-attachment-151869\" style=\"width: 1370px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151869\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/uncaught-type-error-property-excerpt-is-non-configurable-and-cant-be-deleted-firefox.jpg\" alt=\"Uncaught TypeError: property \"excerpt\" is non-configurable and can't be deleted in Firefox\" width=\"1370\" height=\"298\"><figcaption id=\"caption-attachment-151869\" class=\"wp-caption-text\"><em>Uncaught TypeError: property &#8220;excerpt&#8221; is non-configurable and can&#8217;t be deleted<\/em> in Firefox<\/figcaption><\/figure>\n<h2>Template Literals<\/h2>\n<p>Quando \u00e8 necessario combinare delle stringhe con l&#8217;output di espressioni in JavaScript, di solito si usa l&#8217;operatore di addizione <code>+<\/code>. Tuttavia, \u00e8 possibile anche utilizzare una funzione JavaScript che permette di includere espressioni all&#8217;interno di stringhe senza utilizzare l&#8217;operatore di addizione: i <strong>template literals<\/strong>.<\/p>\n<p>I <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals\" target=\"_blank\" rel=\"noopener noreferrer\">template literals<\/a> sono un tipo speciale di stringhe delimitate da caratteri backtick (<code>`<\/code>).<\/p>\n<p>Nei template literals \u00e8 possibile includere dei placeholder, che sono espressioni incorporate delimitate da un carattere dollaro e incluse in parentesi graffe.<\/p>\n<p>Ecco un esempio:<\/p>\n<pre><code class=\"language-js\">const align = 'left';\nconsole.log(`This string is ${ align }-aligned`);<\/code><\/pre>\n<p>Le stringhe e i placeholder vengono passati a una funzione predefinita che esegue un&#8217;interpolazione delle stringhe per sostituire i segnaposto e concatenare le parti in un&#8217;unica stringa. \u00c8 anche possibile sostituire la funzione predefinita con una funzione personalizzata.<\/p>\n<p>I template literals possono essere utilizzati per:<\/p>\n<p><strong>Stringhe multilinea<\/strong>: i caratteri newline fanno parte del template literals.<\/p>\n<pre><code class=\"language-js\">console.log(`Twinkle, twinkle, little bat!\nHow I wonder what you\u2019re at!`);<\/code><\/pre>\n<p><strong>Interpolazione di stringhe<\/strong>: Senza i template literals, si pu\u00f2 utilizzare solo l&#8217;operatore di addizione per combinare l&#8217;output delle espressioni con le stringhe. Ecco un esempio:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(\"The result of \" + a + \" + \" + b + \" is \" + (a + b));<\/code><\/pre>\n<p>\u00c8 un po&#8217; complicato, vero? Ma \u00e8 possibile scrivere questo codice in modo pi\u00f9 leggibile e mantenibile utilizzando i Template Literals:<\/p>\n<pre><code class=\"language-js\">const a = 3;\nconst b = 7;\nconsole.log(`The result of ${ a } + ${ b } is ${ a + b }`);<\/code><\/pre>\n<p>Ma si tenga presente che c&#8217;\u00e8 una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#string_interpolation\" target=\"_blank\" rel=\"noopener noreferrer\">differenza tra le due sintassi<\/a>:<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f I template literals convertono le espressioni direttamente in stringhe, mentre l&#8217;addizione converte gli operandi prima in primitive.<\/strong><\/p>\n<\/aside>\n\n<p>I template literals si prestano a diversi impieghi. Nell&#8217;esempio che segue, utilizziamo un <a href=\"#ternary-operator\" target=\"_blank\" rel=\"noopener noreferrer\">operatore ternario<\/a> per assegnare un valore all&#8217;attributo <code>class<\/code>.<\/p>\n<pre><code class=\"language-js\">const page = 'archive';\nconsole.log(`class=${ page === 'archive' <code>?<\/code> 'archive' : 'single' }`);<\/code><\/pre>\n<p>Di seguito, eseguiamo un semplice calcolo:<\/p>\n<pre><code class=\"language-js\">const price = 100;\nconst VAT = 0.22;\n\nconsole.log(`Total price: ${ (price * (1 + VAT)).toFixed(2) }`);<\/code><\/pre>\n<p>\u00c8 anche possibile annidare i template literal includendoli all&#8217;interno di un placeholder <code>${expression}<\/code> (ma si consiglia di <a href=\"https:\/\/dev.to\/remrkabledev\/nesting-template-literals-a-recommended-approach-2jgj\" target=\"_blank\" rel=\"noopener noreferrer\">usare i template annidati con cautela<\/a> perch\u00e9 le strutture di stringhe complesse possono essere difficili da leggere e mantenere).<\/p>\n<p><strong>Tagged template<\/strong>: Come abbiamo detto in precedenza, \u00e8 anche possibile definire una funzione personalizzata per eseguire la concatenazione di stringhe. Questo tipo di template literal \u00e8 chiamato <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">tagged template<\/a>.<\/p>\n<blockquote><p>I tag permettono di eseguire il parsing dei template literal con una funzione. Il primo argomento di una funzione tag contiene un array di valori stringa. Gli altri argomenti sono relativi alle espressioni.<\/p><\/blockquote>\n<p>I tag permettono di eseguire il parsing dei template literal con una funzione personalizzata. Il primo argomento di questa funzione \u00e8 un array di stringhe incluse nel template literal, mentre gli altri argomenti sono le espressioni.<\/p>\n<p>\u00c8 possibile creare una funzione personalizzata per eseguire qualsiasi tipo di operazione sugli argomenti del template e restituire la stringa manipolata. Ecco un esempio molto semplice di <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Template_literals#tagged_templates\" target=\"_blank\" rel=\"noopener noreferrer\">tagged template<\/a>:<\/p>\n<pre><code class=\"language-js\">const name = \"Carlo\";\nconst role = \"student\";\nconst organization = \"North Pole University\";\nconst age = 25;\n\nfunction customFunc(strings, ...tags) {\n\tconsole.log(strings); \/\/ ['My name is ', \", I'm \", ', and I am ', ' at ', '', raw: Array(5)]\n\tconsole.log(tags); \/\/ ['Carlo', 25, 'student', 'North Pole University']\n\tlet string = '';\n\tfor ( let i = 0; i &lt; strings.length - 1; i++ ){\n\t\tconsole.log(i + \"\" + strings[i] + \"\" + tags[i]);\n\t\tstring += strings[i] + tags[i];\n\t}\n\treturn string.toUpperCase();\n}\n\nconst output = customFunc`My name is ${name}, I'm ${age}, and I am ${role} at ${organization}`;\nconsole.log(output);<\/code><\/pre>\n<p>Il codice qui sopra stampa gli elementi dell&#8217;array <code>strings<\/code> e <code>tags<\/code> e rende maiuscoli i caratteri della stringa prima di stampare l&#8217;output nella console del browser.<\/p>\n<h2>Arrow Function<\/h2>\n<p>Le arrow function sono un&#8217;alternativa alle funzioni anonime (funzioni senza nome) in JavaScript, ma con alcune differenze e limitazioni.<\/p>\n<p>Le seguenti dichiarazioni sono tutti esempi validi di arrow function:<\/p>\n<pre><code class=\"language-javascript\">\/\/ Arrow function without parameters\nconst myFunction = () =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; expression;\n\n\/\/ Arrow function with one parameter\nconst myFunction = (param) =&gt; expression;\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; expression;\n\n\/\/ Arrow function without parameters\nconst myFunction = () =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with one parameter\nconst myFunction = param =&gt; {\n\tstatements\n}\n\n\/\/ Arrow function with more parameters\nconst myFunction = (param1, param2) =&gt; {\n\tstatements\n}<\/code><\/pre>\n<p>\u00c8 possibile omettere le parentesi tonde se si passa un solo parametro alla funzione. Se si passano due o pi\u00f9 parametri, \u00e8 necessario racchiuderli tra parentesi. Ecco un esempio:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; `${id}: ${title} - ${category}`;\nconsole.log( render ( 5, 'Hello World!', \"JavaScript\" ) );<\/code><\/pre>\n<p>Di default, le arrow function a una riga restituiscono un valore. Se si usa la sintassi a pi\u00f9 righe, \u00e8 necessario restituire manualmente un valore:<\/p>\n<pre><code class=\"language-javascript\">const render = ( id, title, category ) =&gt; {\n\tconsole.log( `Post title: ${ title }` );\n\treturn `${ id }: ${ title } - ${ category }`;\n}\nconsole.log( `Post details: ${ render ( 5, 'Hello World!', \"JavaScript\" ) }` );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Di solito nelle applicazioni React si utilizzano sempre le Arrow Function, a meno che non ci sia una ragione specifica per non utilizzarle.<\/strong><\/p>\n<\/aside>\n\n<p>Una differenza fondamentale da tenere a mente tra le normali funzioni e le arrow function \u00e8 che le arrow function non hanno un proprio legame alla parola chiave <code>this<\/code>. Se si prova a utilizzare <code>this<\/code> in una arrow function, questa uscir\u00e0 dallo scopo della funzione.<\/p>\n<p>Per una descrizione pi\u00f9 approfondita delle arrow function ed esempi di utilizzo, <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>Le Classi<\/h2>\n<p>Le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Learn\/JavaScript\/Objects\/Classes_in_JavaScript\" target=\"_blank\" rel=\"noopener noreferrer\">classi JavaScript<\/a> sono un tipo speciale di funzione per creare oggetti che utilizzano il meccanismo dell&#8217;ereditariet\u00e0 prototipica.<\/p>\n<p>Secondo l&#8217;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Inheritance_and_the_prototype_chain\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>,<\/p>\n<blockquote><p>Quando si parla di ereditariet\u00e0, JavaScript ha un solo costrutto: gli oggetti. Ogni oggetto ha una propriet\u00e0 privata che contiene un link a un altro oggetto chiamato prototipo. Questo oggetto prototipo ha un suo prototipo e cos\u00ec via fino a quando non si raggiunge un oggetto con <code>null<\/code> come prototipo.<\/p><\/blockquote>\n<p>Come per le funzioni, esistono due modi per definire una classe:<\/p>\n<ul>\n<li>Un&#8217;espressione di classe<\/li>\n<li>Una dichiarazione di classe<\/li>\n<\/ul>\n<p>\u00c8 possibile utilizzare la parola chiave <code>class<\/code> per definire una classe all&#8217;interno di un&#8217;espressione, come mostrato nel seguente esempio:<\/p>\n<pre><code class=\"language-javascript\">const Circle = class {\n\tconstructor(radius) {\n\t\tthis.radius = Number(radius);\n\t}\n\tarea() {\n\t\treturn Math.PI * Math.pow(this.radius, 2);\n\t}\n\tcircumference() {\n\t\treturn Math.PI * this.radius * 2;\n\t}\n}\nconsole.log('Circumference: ' + new Circle(10).circumference()); \/\/ 62.83185307179586\nconsole.log('Area: ' + new Circle(10).area()); \/\/ 314.1592653589793<\/code><\/pre>\n<p>Una classe ha un corpo, cio\u00e8 il codice incluso nelle parentesi graffe. Qui si definiscono i costruttori e i metodi, che sono anche chiamati membri della classe. Il corpo della classe viene eseguito in modalit\u00e0 strict anche senza utilizzare la direttiva <code>'strict mode'<\/code>.<\/p>\n<p>Il metodo <code>constructor<\/code> \u00e8 utilizzato per creare e inizializzare un oggetto creato con una classe e viene eseguito automaticamente quando la classe viene istanziata. Se nella classe non si definisce un metodo costruttore, JavaScript utilizzer\u00e0 automaticamente un costruttore predefinito.<\/p>\n<p>Una classe pu\u00f2 essere estesa utilizzando la parola chiave <code>extends<\/code>.<\/p>\n<pre><code class=\"language-javascript\">class Book {\n\tconstructor(title, author) {\n\t\tthis.booktitle = title;\n\t\tthis.authorname = author;\n\t}\n\tpresent() {\n\t\treturn this.booktitle + ' is a great book from ' + this.authorname;\n\t}\n}\n\nclass BookDetails extends Book {\n\tconstructor(title, author, cat) {\n\t\tsuper(title, author);\n\t\tthis.category = cat;\n\t}\n\tshow() {\n\t\treturn this.present() + ', it is a ' + this.category + ' book';\n\t}\n}\n\nconst bookInfo = new BookDetails(\"The Fellowship of the Ring\", \"J. R. R. Tolkien\", \"Fantasy\");\nconsole.log(bookInfo.show());<\/code><\/pre>\n<p>Un costruttore pu\u00f2 utilizzare la parola chiave <code>super<\/code> per invocare il costruttore genitore. Se al metodo <code>super()<\/code> viene passato un argomento, questo argomento sar\u00e0 disponibile anche nella classe del costruttore genitore.<\/p>\n<p>Per un approfondimento sulle classi JavaScript e diversi esempi di utilizzo, si veda <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Classes\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<p>Le classi sono spesso utilizzate per creare componenti React. Di solito non si creano le proprie classi ma si estendono le classi React integrate.<\/p>\n<p>Tutte le <a href=\"https:\/\/react.dev\/reference\/react\/Component#defining-a-class-component\" target=\"_blank\" rel=\"noopener noreferrer\">classi di React<\/a> hanno un metodo <code>render()<\/code> che restituisce un elemento React:<\/p>\n<pre><code class=\"language-javascript\">class Animal extends React.Component {\n\trender() {\n\t\treturn &lt;h2&gt;Hey, I am a {this.props.name}!&lt;\/h2&gt;;\n\t}\n}<\/code><\/pre>\n<p>Nell&#8217;esempio precedente, <code>Animal<\/code> \u00e8 un componente della classe. Si tenga presente che<\/p>\n<ul>\n<li>Il nome del componente deve iniziare con una lettera maiuscola<\/li>\n<li>Il componente deve includere l&#8217;espressione <code>extends React.Component<\/code>. Questo d\u00e0 accesso ai metodi del componente <code>React.Component<\/code>.<\/li>\n<li>Il metodo <code>render()<\/code> restituisce l&#8217;HTML ed \u00e8 obbligatorio.<\/li>\n<\/ul>\n<p>Una volta creato il componente di classe, \u00e8 possibile eseguire il rendering dell&#8217;HTML sulla pagina:<\/p>\n<pre><code class=\"language-javascript\">const root = ReactDOM.createRoot(document.getElementById('root'));\nconst element = &lt;Animal name=\"Rabbit\" \/&gt;;\nroot.render(element);<\/code><\/pre>\n<p>L&#8217;immagine qui sotto mostra il risultato sulla pagina (<a href=\"https:\/\/codepen.io\/carlodaniele\/pen\/LYgPvEP\">in azione su CodePen<\/a>).<\/p>\n<figure id=\"attachment_151880\" aria-describedby=\"caption-attachment-151880\" style=\"width: 2162px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-151880\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-class-component.jpg\" alt=\"Un semplice componente di classe React\" width=\"2162\" height=\"996\"><figcaption id=\"caption-attachment-151880\" class=\"wp-caption-text\">Un semplice componente di classe React<\/figcaption><\/figure>\n<p>Si noti, tuttavia, che l&#8217;<a href=\"https:\/\/react.dev\/reference\/react\/Component#migrating-a-simple-component-from-a-class-to-a-function\" target=\"_blank\" rel=\"noopener noreferrer\">utilizzo di componenti di classe in React non \u00e8 raccomandato<\/a> ed \u00e8 <a href=\"https:\/\/kinsta.com\/it\/blog\/best-practice-react\/#12-make-use-of-functional-components\">preferibile definire i componenti come funzioni<\/a>.<\/p>\n<h2>La Parola Chiave &#8220;this&#8221;<\/h2>\n<p>In JavaScript, la parola chiave <code>this<\/code> \u00e8 un placeholder generico solitamente utilizzato all&#8217;interno di oggetti, classi e funzioni e si riferisce a elementi diversi a seconda del contesto o dello scopo.<\/p>\n<p><strong><code>this<\/code> pu\u00f2 essere utilizzata nell&#8217;ambito globale.<\/strong> Digitando <code>this<\/code> nella console del browser, si ottiene:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>\u00c8 possibile accedere a qualsiasi metodo e propriet\u00e0 dell&#8217;oggetto <code>Window<\/code>. Quindi, se si esegue <code>this.location<\/code> nella console del browser, si ottiene il seguente risultato:<\/p>\n<pre><code>Location {ancestorOrigins: DOMStringList, href: 'https:\/\/kinsta.com\/', origin: 'https:\/\/kinsta.com', protocol: 'https:', host: 'kinsta.com', ...}<\/code><\/pre>\n<p><strong>Se si utilizza <code>this<\/code> in un oggetto, questo si riferisce all&#8217;oggetto stesso.<\/strong> In questo modo, \u00e8 possibile fare riferimento ai valori di un oggetto nei metodi dell&#8217;oggetto stesso:<\/p>\n<pre><code class=\"language-javascript\">const post = { \n\tid: 5,\n\tgetSlug: function(){\n\t\treturn `post-${this.id}`;\n\t},\n\ttitle: 'Awesome post', \n\tcategory: 'JavaScript' \n};\nconsole.log( post.getSlug );<\/code><\/pre>\n<p>Ora proviamo a utilizzare <code>this<\/code> in una funzione:<\/p>\n<pre><code class=\"language-javascript\">const useThis = function () {\n\treturn this;\n}\nconsole.log( useThis() );<\/code><\/pre>\n<p>Se non si \u00e8 in modalit\u00e0 strict, si ottiene:<\/p>\n<pre><code>Window {window: Window, self: Window, document: document, name: '', location: Location, ...}<\/code><\/pre>\n<p>Ma se si invoca la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Strict_mode\" target=\"_blank\" rel=\"noopener noreferrer\">modalit\u00e0 strict<\/a>, si ottiene un risultato diverso:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function () {\n\t'use strict';\n\treturn this;\n}\nconsole.log( doSomething() );<\/code><\/pre>\n<p>In questo caso, la funzione restituisce <code>undefined<\/code>. Questo perch\u00e9 <code>this<\/code> in una funzione si riferisce al suo valore esplicito.<\/p>\n<p>Come impostare esplicitamente <code>this<\/code> in una funzione?<\/p>\n<p>Innanzitutto, \u00e8 possibile assegnare manualmente propriet\u00e0 e metodi alla funzione:<\/p>\n<pre><code class=\"language-javascript\">function doSomething( post ) {\n\tthis.id = post.id;\n\tthis.title = post.title;\n\tconsole.log( `${this.id} - ${this.title}` );\n}\nnew doSomething( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Ma \u00e8 possibile anche utilizzare i metodi <code>call<\/code>, <code>apply<\/code> e <code>bind<\/code>, cos\u00ec come le arrow function.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il metodo <code>call()<\/code> di una funzione accetta un oggetto a cui <code>this<\/code> fa riferimento.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function() {\n\tconsole.log( `${this.id} - ${this.title}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' } );<\/code><\/pre>\n<p>Il metodo <code>call()<\/code> pu\u00f2 essere utilizzato su qualsiasi funzione e fa esattamente quello che dice: chiama la funzione.<\/p>\n<p>Inoltre, <code>call()<\/code> accetta qualsiasi altro parametro definito nella funzione:<\/p>\n<pre><code class=\"language-javascript\">const doSomething = function( cat ) {\n\tconsole.log( `${this.id} - ${this.title} - Category: ${cat}` );\n}\ndoSomething.call( { id: 5, title: 'Awesome post' }, 'JavaScript' );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il metodo <code>apply()<\/code> accetta un oggetto a cui <code>this<\/code> far\u00e0 riferimento e un array di parametri della funzione.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const doSomething = function( cat1, cat2 ) {\n\tconsole.log( `${this.id} - ${this.title} - Categories: ${cat1}, ${cat2}` );\n}\ndoSomething.apply( { id: 5, title: 'Awesome post' }, ['JavaScript', 'React'] );<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il metodo <code>bind()<\/code> associa un oggetto a una funzione in modo che ogni volta che si invoca la funzione, <code>this<\/code> faccia riferimento all&#8217;oggetto.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const post = { id: 5, title: 'Awesome post', category: 'JavaScript' };\nconst doSomething = function() {\n\treturn `${this.id} - ${this.title} - ${this.category}`;\n}\nconst bindRender = doSomething.bind( post );\nconsole.log( bindRender() );<\/code><\/pre>\n<p>Un&#8217;alternativa alle opzioni descritte in precedenza sono le <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Functions\/Arrow_functions\" target=\"_blank\" rel=\"noopener noreferrer\">arrow function<\/a>.<\/p>\n<blockquote><p>Le espressioni delle arrow function dovrebbero essere utilizzate solo per le funzioni senza metodo perch\u00e9 non hanno un proprio <code>this<\/code>.<\/p><\/blockquote>\n<p>Questo rende le arrow function particolarmente utili con gli event handler.<\/p>\n<p>Infatti, &#8220;quando il codice viene richiamato da un attributo di un event handler in linea, il suo <code>this<\/code> viene impostato sull&#8217;elemento DOM su cui \u00e8 posizionato il listener&#8221; (si legga <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/this#this_in_inline_event_handlers\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>).<\/p>\n<p>Ma le cose cambiano con le arrow function perch\u00e9&#8230;<\/p>\n<blockquote><p>&#8230; le arrow function stabiliscono <code>this<\/code> in base allo scopo in cui l&#8217;arrow function \u00e8 definita e il valore <code>this<\/code> non cambia in base al modo in cui la funzione viene invocata.<\/p><\/blockquote>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f L&#8217;uso delle arrow function permette di legare direttamente il contesto a un event handler.<\/strong><\/p>\n<\/aside>\n\n<h3>Legare &#8216;this&#8217; agli Event Handler in React<\/h3>\n<p>In React ci sono diversi modi per assicurarsi che l&#8217;event handler non perda il suo contesto:<\/p>\n<p><strong>1. Utilizzando <code>bind()<\/code> all&#8217;interno del metodo di rendering:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage.bind( this ) }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>2. Legando lo scopo all&#8217;event handler nel costruttore:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tconstructor(props) {\n\t\tsuper(props);\n\t\tthis.showMessage = this.showMessage.bind( this );\n\t}\n\n\tshowMessage(){\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={ this.showMessage }&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>3. Definendo il gestore di eventi utilizzando le arrow function:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage = () =&gt; {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={this.showMessage}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p><strong>4. Utilizzando le arrow function nel metodo di rendering:<\/strong><\/p>\n<pre><code class=\"language-javascript\">import React, { Component } from 'react';\nclass MyComponent extends Component {\n\tstate = { message: 'Hello World!' };\n\n\tshowMessage() {\n\t\tconsole.log( 'This refers to: ', this );\n\t\tconsole.log( 'The message is: ', this.state.message );\n\t}\n\n\trender(){\n\t\treturn( &lt;button onClick={()=&gt;{this.showMessage()}}&gt;Show message from state!&lt;\/button&gt; );\n\t}\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Qualunque sia il metodo scelto, quando si fa clic sul pulsante, la console del browser mostra il seguente output:<\/p>\n<pre><code>This refers to:  MyComponent {props: {\u2026}, context: {\u2026}, refs: {\u2026}, updater: {\u2026}, state: {\u2026}, \u2026}\nThe message is:  Hello World!<\/code><\/pre>\n<h2>Operatore Ternario<\/h2>\n<p>L&#8217;<a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Conditional_Operator\" target=\"_blank\" rel=\"noopener noreferrer\">operatore condizionale<\/a> (o operatore ternario) permette di scrivere semplici espressioni condizionali in JavaScript. Richiede tre operandi:<\/p>\n<ul>\n<li>una condizione seguita da un punto interrogativo (<code>?<\/code>),<\/li>\n<li>un&#8217;espressione da eseguire se la condizione \u00e8 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Truthy\" target=\"_blank\" rel=\"noopener noreferrer\">vera<\/a> seguita da duepunti (<code>:<\/code>),<\/li>\n<li>una seconda espressione da eseguire se la condizione \u00e8 <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Falsy\" target=\"_blank\" rel=\"noopener noreferrer\">falsa<\/a>.<\/li>\n<\/ul>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : \"Juice\";<\/code><\/pre>\n<p>\u00c8 anche possibile concatenare pi\u00f9 espressioni:<\/p>\n<pre><code class=\"language-javascript\">const drink = personAge &gt;= 18 ? \"Wine\" : personAge &gt;= 6 ? \"Juice\" : \"Milk\";<\/code><\/pre>\n<p>Si faccia attenzione, per\u00f2, perch\u00e9 il concatenamento di pi\u00f9 espressioni pu\u00f2 portare a un codice disordinato e difficile da mantenere.<\/p>\n<p>L&#8217;operatore ternario \u00e8 particolarmente utile in React, soprattutto nel codice JSX, che accetta solo espressioni tra parentesi graffe.<\/p>\n<p>Ad esempio, \u00e8 possibile usare l&#8217;operatore ternario per impostare il valore di un attributo in base a una condizione specifica:<\/p>\n<pre><code class=\"language-jsx\">render(){\t\t\t\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/...',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'light'\n\t}\n\n\treturn (\n\t\t&lt;div\n\t\t\tclassName='card' \n\t\t\tstyle={\n\t\t\t\tperson.theme === 'dark' ? \n\t\t\t\t{ background: 'black', color: 'white' } : \n\t\t\t\t{ background: 'white', color: 'black'} \n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc={person.avatar}\n\t\t\t\talt={person.name}\n\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div style={ { padding: '2px 16px' } }&gt;\n\t\t\t\t&lt;h3&gt;{person.name}&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{person.description}.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}<\/code><\/pre>\n<p>Nel codice qui sopra, controlliamo la condizione <code>person.theme === 'dark'<\/code> per impostare il valore dell&#8217;attributo <code>style<\/code> della <code>div<\/code>.<\/p>\n<h2>Valutazione Short Circuit<\/h2>\n<p>L&#8217;operatore logico AND (<code>&&<\/code>) valuta gli operandi da sinistra a destra e restituisce <code>true<\/code> se e solo se tutti gli operandi sono <code>true<\/code>.<\/p>\n<p>L&#8217;operatore logico AND \u00e8 un <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Logical_AND#short-circuit_evaluation\" target=\"_blank\" rel=\"noopener noreferrer\">operatore Short Circuit<\/a>. Ogni operando viene convertito in un booleano e, se il risultato della conversione \u00e8 <code>false<\/code>, l&#8217;operatore AND si ferma e restituisce il valore originale dell&#8217;operando falso. Se tutti i valori sono <code>true<\/code>, restituisce il valore originale dell&#8217;ultimo operando.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f In JavaScript, <code>true &amp;&amp; expression<\/code> restituisce sempre <code>expression<\/code> e <code>false &amp;&amp; expression<\/code> restituisce sempre <code>false<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>La valutazione del cortocircuito \u00e8 una funzione di JavaScript utilizzata spesso in React, in quanto consente di restituire blocchi di codice in base a condizioni specifiche. <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/#add-the-excerpt\">Ecco<\/a> un esempio:<\/p>\n<pre><code class=\"language-jsx\">{\n\tdisplayExcerpt &&\n\tpost.excerpt.rendered && (\n\t\t&lt;p&gt;\n\t\t\t&lt;RawHTML&gt;\n\t\t\t\t{ post.excerpt.rendered }\n\t\t\t&lt;\/RawHTML&gt;\n\t\t&lt;\/p&gt;\n\t)\n}<\/code><\/pre>\n<p>Nel codice qui sopra, se <code>displayExcerpt<\/code> <strong>AND<\/strong> <code>post.excerpt.rendered<\/code> sono <code>true<\/code>, React restituisce il blocco finale di JSX.<\/p>\n<p><a href=\"https:\/\/legacy.reactjs.org\/docs\/conditional-rendering.html#inline-if-with-logical--operator\" target=\"_blank\" rel=\"noopener noreferrer\">Ricapitolando<\/a>, &#8220;se la condizione \u00e8 <code>true<\/code>, l&#8217;elemento subito dopo <code>&&<\/code> apparir\u00e0 nell&#8217;output. Se \u00e8 <code>false<\/code>, React lo ignorer\u00e0 e lo salter\u00e0&#8221;.<\/p>\n<h2>Sintassi Spread<\/h2>\n<p>In JavaScript, la <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Spread_syntax\" target=\"_blank\" rel=\"noopener noreferrer\">sintassi spread<\/a> permette di espandere un elemento iterabile, come un array o un oggetto, in argomenti di funzione, letterali di array o letterali di oggetto.<\/p>\n<p>Nell&#8217;esempio che seguente, scompattiamo un array in una chiamata di funzione:<\/p>\n<pre><code class=\"language-jsx\">function doSomething( x, y, z ){\n\treturn `First: ${x} - Second: ${y} - Third: ${z} - Sum: ${x+y+z}`;\n}\nconst numbers = [3, 4, 7];\nconsole.log( doSomething( ...numbers ) );<\/code><\/pre>\n<p>\u00c8 possibile utilizzare la sintassi spread per duplicare un array (anche multidimensionale) o per concatenare array. Negli esempi seguenti, concateniamo due array in due modi diversi:<\/p>\n<pre><code class=\"language-jsx\">const firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray.push( ...secondArray );\nconsole.log( firstArray );<\/code><\/pre>\n<p>In alternativa:<\/p>\n<pre><code class=\"language-jsx\">let firstArray = [1, 2, 3];\nconst secondArray = [4, 5, 6];\nfirstArray = [ ...firstArray, ...secondArray];\nconsole.log( firstArray );<\/code><\/pre>\n<p>\u00c8 possibile utilizzare la sintassi spread anche per clonare o unire due oggetti:<\/p>\n<pre><code class=\"language-jsx\">const firstObj = { id: '1', title: 'JS is awesome' };\nconst secondObj = { cat: 'React', description: 'React is easy' };\n\n\/\/ clone object\nconst thirdObj = { ...firstObj };\n\n\/\/ merge objects\nconst fourthObj = { ...firstObj, ...secondObj }\n\nconsole.log( { ...thirdObj } );\nconsole.log( { ...fourthObj } );<\/code><\/pre>\n<h2>Destrutturazione<\/h2>\n<p>Un&#8217;altra struttura sintattica spesso utilizzata in React \u00e8 la sintassi di <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">destrutturazione<\/a>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La sintassi di destrutturazione permette di scompattare i valori di un array o le propriet\u00e0 di un oggetto in variabili separate.<\/strong><\/p>\n<\/aside>\n\n<p>Nell&#8217;esempio che segue, scompattiamo i valori da un array:<\/p>\n<pre><code class=\"language-javascript\">const user = ['Carlo', 'Content writer', 'Kinsta'];\nconst [name, description, company] = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Ed ecco un semplice esempio di destrutturazione con un oggetto:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta'\n}\nconst { name, description, company } = user;\nconsole.log( `${name} is ${description} at ${company}` );<\/code><\/pre>\n<p>Ma possiamo fare ancora di pi\u00f9. Nel prossimo esempio, scompattiamo alcune propriet\u00e0 di un oggetto e assegniamo le propriet\u00e0 rimanenti a un altro oggetto utilizzando la spread syntax:<\/p>\n<pre><code class=\"language-javascript\">const user = {\n\tname: 'Carlo',\n\tfamily: 'Daniele',\n\tdescription: 'Content writer',\n\tcompany: 'Kinsta',\n\tpower: 'swimming'\n}\nconst { name, description, company, ...rest } = user;\nconsole.log( rest ); \/\/ {family: 'Daniele', power: 'swimming'}<\/code><\/pre>\n<p>\u00c8 anche possibile assegnare valori a un array:<\/p>\n<pre><code class=\"language-javascript\">const user = [];\nconst object = { name: 'Carlo', company: 'Kinsta' };\n( { name: user[0], company: user[1] } = object );\nconsole.log( user ); \/\/ (2) ['Carlo', 'Kinsta']<\/code><\/pre>\n<p>Si noti che le parentesi intorno alla dichiarazione di assegnazione sono necessarie quando si utilizza una destrutturazione letterale dell&#8217;oggetto senza dichiarazione.<\/p>\n<p>Per un&#8217;analisi pi\u00f9 approfondita della destrutturazione, con diversi esempi di utilizzo, si veda <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Operators\/Destructuring_assignment\" target=\"_blank\" rel=\"noopener noreferrer\">mdn web docs<\/a>.<\/p>\n<h2>filter(), map() e reduce()<\/h2>\n<p>JavaScript offre diversi metodi utili spesso utilizzati in React.<\/p>\n<h3>filter()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/filter\" target=\"_blank\" rel=\"noopener noreferrer\">metodo <code>filter()<\/code><\/a> crea una <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Shallow_copy\" target=\"_blank\" rel=\"noopener noreferrer\">shallow copy<\/a> filtrata di una porzione di un determinato array contenente gli elementi che soddisfano la condizione della funzione fornita.<\/strong><\/p>\n<\/aside>\n\n<p>Nell&#8217;esempio che segue, applichiamo il filtro all&#8217;array <code>numbers<\/code> per ottenere un array i cui elementi sono numeri superiori a 5:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.filter( number =&gt; number &gt; 5);\nconsole.log(result); \/\/ (4) [6, 8, 9, 23]<\/code><\/pre>\n<p>In quest&#8217;altro esempio, otteniamo un array di post con la parola &#8220;JavaScript&#8221; inclusa nel titolo:<\/p>\n<pre><code class=\"language-javascript\">const posts = [\n\t{id: 0, title: 'JavaScript is awesome', content: 'your content'},\n\t{id: 1, title: 'WordPress is easy', content: 'your content'},\n\t{id: 2, title: 'React is cool', content: 'your content'},\n\t{id: 3, title: 'With JavaScript to the moon', content: 'your content'},\n];\n\nconst jsPosts = posts.filter( post =&gt; post.title.includes( 'JavaScript' ) );\n\nconsole.log( jsPosts );<\/code><\/pre>\n<figure id=\"attachment_152106\" aria-describedby=\"caption-attachment-152106\" style=\"width: 1198px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152106\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/filter.jpg\" alt=\"Un array di post il cui titolo contiene la parola 'JavaScript'\" width=\"1198\" height=\"346\"><figcaption id=\"caption-attachment-152106\" class=\"wp-caption-text\">Un array di post il cui titolo contiene la parola &#8220;JavaScript&#8221;<\/figcaption><\/figure>\n<h3>map()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/map\" target=\"_blank\" rel=\"noopener noreferrer\">metodo <code>map()<\/code><\/a> esegue una funzione fornita su ogni elemento di un array e restituisce un nuovo array popolato con ogni elemento risultante dalla funzione di callback.<\/strong><\/p>\n<\/aside>\n\n<pre><code class=\"language-javascript\">const numbers = [2, 6, 8, 2, 5, 9, 23];\nconst result = numbers.map( number =&gt; number * 5 );\nconsole.log(result); \/\/ (7) [10, 30, 40, 10, 25, 45, 115]<\/code><\/pre>\n<p>In un componente React, troverete spesso il metodo <code>map()<\/code> utilizzato per costruire elenchi. Nell&#8217;esempio qui sotto, mappiamo l&#8217;oggetto <code>posts<\/code> di WordPress per <a href=\"https:\/\/kinsta.com\/it\/blog\/blocchi-dinamici\/\">costruire un elenco di post<\/a>:<\/p>\n<pre><code class=\"language-javascript\">&lt;ul&gt;\n\t{ posts && posts.map( ( post ) =&gt; {\n\t\treturn (\n\t\t\t&lt;li key={ post.id }&gt;\n\t\t\t\t&lt;h5&gt;\n\t\t\t\t\t&lt;a href={ post.link }&gt;\n\t\t\t\t\t\t{ \n\t\t\t\t\t\t\tpost.title.rendered ? \n\t\t\t\t\t\t\tpost.title.rendered :\n\t\t\t\t\t\t\t__( 'Default title', 'author-plugin' )\n\t\t\t\t\t\t}\n\t\t\t\t\t&lt;\/a&gt;\n\t\t\t\t&lt;\/h5&gt;\n\t\t\t&lt;\/li&gt;\n\t\t)\n\t})}\n&lt;\/ul&gt;<\/code><\/pre>\n<h3>reduce()<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Il <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">metodo <code>reduce()<\/code><\/a> esegue una funzione di callback (<em>reducer<\/em>) su ogni elemento di un array e passa il valore restituito all&#8217;iterazione successiva. In breve, il reducer &#8220;riduce&#8221; tutti gli elementi di un array a un unico valore.<\/strong><\/p>\n<\/aside>\n\n<p><code>reduce()<\/code> accetta due parametri:<\/p>\n<ul>\n<li>Una funzione di callback da eseguire per ogni elemento dell&#8217;array. Restituisce un valore che diventa il valore del parametro accumulatore alla chiamata successiva. All&#8217;ultima chiamata, la funzione restituisce il valore che sar\u00e0 il valore di ritorno di <code>reduce()<\/code>.<\/li>\n<li>Un valore iniziale che \u00e8 il primo valore dell&#8217;accumulator passato alla funzione di callback.<\/li>\n<\/ul>\n<p>La funzione di callback richiede alcuni parametri:<\/p>\n<ul>\n<li>Un <strong>accumulator<\/strong>: Il valore restituito dalla precedente chiamata alla funzione di callback. Alla prima chiamata, viene impostato su un valore iniziale, se specificato. Altrimenti, assume il valore del primo elemento dell&#8217;array.<\/li>\n<li>Il valore dell&#8217;<strong>elemento corrente<\/strong>: Il valore viene impostato sul primo elemento dell&#8217;array (<code>array[0]<\/code>) se \u00e8 stato impostato un valore iniziale, altrimenti assume il valore del secondo elemento (<code>array[1]<\/code>).<\/li>\n<li>L&#8217;<strong>indice corrente<\/strong> \u00e8 la posizione dell&#8217;indice dell&#8217;elemento corrente.<\/li>\n<\/ul>\n<p>Un esempio render\u00e0 tutto pi\u00f9 chiaro.<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 0;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue ) =&gt; accumulator + currentValue,\n\tinitialValue\n);\nconsole.log( numbers ); \/\/ (5) [1, 2, 3, 4, 5]\nconsole.log( sumElements ); \/\/ 15<\/code><\/pre>\n<p>Scopriamo nel dettaglio cosa succede a ogni iterazione. Torniamo all&#8217;esempio precedente e modifichiamo <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst initialValue = 5;\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log('Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index);\n\t\treturn accumulator + currentValue;\n\t},\n\tinitialValue\n);\nconsole.log( sumElements );<\/code><\/pre>\n<p>L&#8217;immagine seguente mostra l&#8217;output nella console del browser:<\/p>\n<figure id=\"attachment_152231\" aria-describedby=\"caption-attachment-152231\" style=\"width: 1172px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152231\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-with-initial-value.jpg\" alt=\"Uso di reduce() con valore iniziale impostato a 5\" width=\"1172\" height=\"388\"><figcaption id=\"caption-attachment-152231\" class=\"wp-caption-text\">Uso di reduce() con valore iniziale impostato a 5<\/figcaption><\/figure>\n<p>Ora vediamo cosa succede senza il parametro <code>initialValue<\/code>:<\/p>\n<pre><code class=\"language-javascript\">const numbers = [1, 2, 3, 4, 5];\nconst sumElements = numbers.reduce(\n\t( accumulator, currentValue, index ) =&gt; {\n\t\tconsole.log( 'Accumulator: ' + accumulator + ' - currentValue: ' + currentValue + ' - index: ' + index );\n\t\treturn accumulator + currentValue;\n\t}\n);\nconsole.log( sumElements );<\/code><\/pre>\n<figure id=\"attachment_152232\" aria-describedby=\"caption-attachment-152232\" style=\"width: 1176px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152232\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/reduce-without-initial-value.jpg\" alt=\"Uso di reduce() senza valore iniziale\" width=\"1176\" height=\"360\"><figcaption id=\"caption-attachment-152232\" class=\"wp-caption-text\">Uso di reduce() senza valore iniziale<\/figcaption><\/figure>\n<p>Altri esempi e casi d&#8217;uso sono disponibili nel sito <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Global_Objects\/Array\/reduce\" target=\"_blank\" rel=\"noopener noreferrer\">web mdn docs<\/a>.<\/p>\n<h2>Export e Import<\/h2>\n<p>A partire da ECMAScript 2015 (ES6), \u00e8 possibile esportare valori da un modulo JavaScript e importarli in un altro script. Le importazioni e le esportazioni sono molto utilizzate nelle applicazioni React e quindi \u00e8 importante conoscerne bene il funzionamento.<\/p>\n<p>Il codice che segue crea un componente funzionale. La prima riga importa la libreria React:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\n\nfunction MyComponent() {\n\tconst person = {\n\t\tname: 'Carlo',\n\t\tavatar: 'https:\/\/en.gravatar.com\/userimage\/954861\/fc68a728946aac04f8531c3a8742ac22?size=original',\n\t\tdescription: 'Content Writer',\n\t\ttheme: 'dark'\n\t}\n \n\treturn (\n\t\t&lt;div\n\t\t\tclassName = 'card'\n\t\t\tstyle = {\n\t\t\t\tperson.theme === 'dark' ?\n\t\t\t\t{ background: 'black', color: 'white' } :\n\t\t\t\t{ background: 'white', color: 'black'}\n\t\t\t}&gt;\n\t\t\t&lt;img\n\t\t\t\tsrc = { person.avatar }\n\t\t\t\talt = { person.name }\n\t\t\t\tstyle = { { width: '100%' } }\n\t\t\t\/&gt;\n\t\t\t&lt;div\n\t\t\t\tstyle = { { padding: '2px 16px' } }\n\t\t\t&gt;\n\t\t\t\t&lt;h3&gt;{ person.name }&lt;\/h3&gt;\n\t\t\t\t&lt;p&gt;{ person.description }.&lt;\/p&gt;\n\t\t\t&lt;\/div&gt;\n\t\t&lt;\/div&gt;\n\t);\n}\nexport default MyComponent;<\/code><\/pre>\n<p>Abbiamo usato la parola chiave <code>import<\/code> seguita dal nome che vogliamo assegnare a ci\u00f2 che stiamo importando, seguito dal nome del pacchetto che vogliamo installare come viene indicato nel file <strong>package.json<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Le dichiarazioni <code>import<\/code> sono utilizzate per <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">importare binding live di sola lettura<\/a> esportati da altri moduli.<\/strong><\/p>\n<\/aside>\n\n<p>Si noti che nella funzione <code>MyComponent()<\/code> qui sopra, abbiamo utilizzato alcune delle caratteristiche di JavaScript descritte nelle sezioni precedenti. Abbiamo incluso i valori delle propriet\u00e0 tra parentesi graffe e abbiamo assegnato il valore della propriet\u00e0 <code>style<\/code> utilizzando la sintassi dell&#8217;operatore condizionale.<\/p>\n<p>Lo script termina con l&#8217;esportazione del nostro componente personalizzato.<\/p>\n<p>Ora che sappiamo qualcosa in pi\u00f9 sulle importazioni e sulle esportazioni, diamo un&#8217;occhiata pi\u00f9 da vicino al loro funzionamento.<\/p>\n<h3>Export<\/h3>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f La dichiarazione <code>export<\/code> viene utilizzata per esportare valori da un modulo JavaScript.<\/strong><\/p>\n<\/aside>\n\n<p>Ogni modulo React pu\u00f2 avere <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export#description\" target=\"_blank\" rel=\"noopener noreferrer\">due diversi tipi di esportazione<\/a>: <strong>named export<\/strong> e <strong>default export<\/strong>.<\/p>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f \u00c8 possibile avere pi\u00f9 named export per modulo, ma solo una default export.<\/strong><\/p>\n<\/aside>\n\n<p>Ad esempio, \u00e8 possibile esportare pi\u00f9 funzioni contemporaneamente con un&#8217;unica dichiarazione <code>export<\/code>:<\/p>\n<pre><code class=\"language-javascript\">export { MyComponent, MyVariable };<\/code><\/pre>\n<p>\u00c8 anche possibile esportare singole funzioni (<code>function<\/code>, <code>class<\/code>, <code>const<\/code>, <code>let<\/code>):<\/p>\n<pre><code class=\"language-javascript\">export function MyComponent() { ... };\nexport let myVariable = x + y;<\/code><\/pre>\n<p>Ma \u00e8 possibile avere una sola esportazione predefinita:<\/p>\n<pre><code class=\"language-javascript\">export default MyComponent;<\/code><\/pre>\n<p>Infine, \u00e8 possibile utilizzare l&#8217;esportazione predefinita per singole funzionalit\u00e0:<\/p>\n<pre><code class=\"language-javascript\">export default function() { ... }\nexport default class { ... }<\/code><\/pre>\n<h3>Import<\/h3>\n<p>Una volta che il componente \u00e8 stato esportato, pu\u00f2 essere importato in un altro file, ad esempio un file <strong>index.js<\/strong>, insieme ad altri moduli:<\/p>\n<pre><code class=\"language-javascript\">import React from 'react';\nimport ReactDOM from 'react-dom\/client';\nimport '.\/index.css';\nimport MyComponent from '.\/MyComponent';\n\nconst root = ReactDOM.createRoot( document.getElementById( 'root' ) );\nroot.render(\n\t&lt;React.StrictMode&gt;\n\t\t&lt;MyComponent \/&gt;\n\t&lt;\/React.StrictMode&gt;\n);<\/code><\/pre>\n<p>Nel codice qui sopra, abbiamo utilizzato la dichiarazione di importazione in diversi modi.<\/p>\n<p>Nelle prime due righe abbiamo assegnato un nome alle risorse importate, nella terza riga non abbiamo assegnato un nome ma abbiamo semplicemente importato il file <strong>.\/index.css<\/strong>. L&#8217;ultima dichiarazione <code>import<\/code> importa il file <strong>.\/MyComponent<\/strong> e assegna un nome.<\/p>\n<p>Scopriamo le differenze tra queste importazioni.<\/p>\n<p>In totale, esistono quattro tipi di import:<\/p>\n<p><strong>Named import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import { MyFunction, MyVariable } from \".\/my-module\";<\/code><\/pre>\n<p><strong>Default import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import MyComponent from \".\/MyComponent\";<\/code><\/pre>\n<p><strong>Namespace import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import * as name from \"my-module\";<\/code><\/pre>\n<p><strong>Side effect import<\/strong><\/p>\n<pre><code class=\"language-javascript\">import \"module-name\";<\/code><\/pre>\n<aside role=\"note\" class=\"wp-block-kinsta-notice is-style-plain\">\n        <p><strong>\u270d\ufe0f Una dichiarazione <code>import<\/code> senza parentesi graffe viene utilizzata per importare una default <code>export<\/code>. Una dichiarazione <code>import<\/code> con parentesi graffe viene utilizzata per importare una named <code>export<\/code>.<\/strong><\/p>\n<\/aside>\n\n<p>Una volta aggiunti alcuni stili nel vostro <strong>index.css<\/strong>, la nostra scheda dovrebbe apparire come nell&#8217;immagine qui sotto, dove \u00e8 possibile vedere anche il codice HTML corrispondente:<\/p>\n<figure id=\"attachment_152317\" aria-describedby=\"caption-attachment-152317\" style=\"width: 1806px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-152317\" src=\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/04\/react-card.jpg\" alt=\"Un semplice componente React\" width=\"1806\" height=\"678\"><figcaption id=\"caption-attachment-152317\" class=\"wp-caption-text\">Un semplice componente React<\/figcaption><\/figure>\n<p>Si noti che le dichiarazioni <code>import<\/code> possono essere utilizzate solo nei moduli di livello superiore (non all&#8217;interno di funzioni, classi, ecc.).<\/p>\n<p>Per una panoramica pi\u00f9 completa delle dichiarazioni <code>import<\/code> ed <code>export<\/code>, si leggano le seguenti risorse:<\/p>\n<ul>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/export\" target=\"_blank\" rel=\"noopener noreferrer\">export<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\/Reference\/Statements\/import\" target=\"_blank\" rel=\"noopener noreferrer\">import<\/a> (mdn web docs)<\/li>\n<li><a href=\"https:\/\/react.dev\/learn\/importing-and-exporting-components\" target=\"_blank\" rel=\"noopener noreferrer\">Importare ed esportare componenti<\/a> (React dev)<\/li>\n<li><a href=\"https:\/\/stackoverflow.com\/questions\/36795819\/when-should-i-use-curly-braces-for-es6-import\/36796281\" target=\"_blank\" rel=\"noopener noreferrer\">Quando usare le parentesi graffe per importare ES6?<\/a> (Stack Overflow)<\/li>\n<\/ul>\n\n<h2>Riepilogo<\/h2>\n<p>React \u00e8 una delle <a href=\"https:\/\/kinsta.com\/it\/blog\/librerie-javascript\/#reactjs\">librerie JavaScript pi\u00f9 popolari<\/a> ed \u00e8 una delle <a href=\"https:\/\/kinsta.com\/it\/blog\/retribuzione-web-developer\/\">competenze pi\u00f9 richieste<\/a> nel mondo dello <a href=\"https:\/\/kinsta.com\/it\/blog\/sviluppatore-frontend\/\">sviluppo web<\/a>.<\/p>\n<p>Con React \u00e8 possibile creare applicazioni web dinamiche e interfacce avanzate. E grazie ai suoi componenti riutilizzabili, pu\u00f2 essere davvero semplice creare applicazioni grandi, dinamiche e interattive.<\/p>\n<p>Ma React \u00e8 una libreria JavaScript, e una buona conoscenza delle principali caratteristiche di JavaScript \u00e8 essenziale per iniziare un percorso di carriera con React. Ecco perch\u00e9 abbiamo raccolto in un unico posto alcune delle funzionalit\u00e0 di JavaScript pi\u00f9 spesso utilizzate in React. La padronanza di queste funzionalit\u00e0, pu\u00f2 dare una marcia in pi\u00f9 nel <a href=\"https:\/\/kinsta.com\/it\/blog\/migliori-tutorial-react\/\">percorso di apprendimento di React<\/a>.<\/p>\n<p>E quando si tratta di <a href=\"https:\/\/kinsta.com\/it\/blog\/tipi-di-developer\/\">sviluppo web<\/a>, passare da JS\/React a WordPress richiede davvero un piccolissimo sforzo.<\/p>\n<p>Ora tocca a voi: quali sono le funzionalit\u00e0 di JavaScript che ritenete pi\u00f9 utili con React? Abbiamo tralasciato qualcosa di importante che avreste voluto vedere nel nostro elenco? Condividete i vostri pensieri con noi nei commenti qui sotto.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Oggi React \u00e8 una delle librerie JavaScript pi\u00f9 popolari. Pu\u00f2 essere utilizzata per creare applicazioni dinamiche e reattive, offre prestazioni migliori e pu\u00f2 essere estesa facilmente. &#8230;<\/p>\n","protected":false},"author":36,"featured_media":69738,"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],"topic":[25945,26212,25847],"class_list":["post-69737","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-javascript","tag-librerie-javascript","tag-react","topic-linguaggi-sviluppo-web","topic-react","topic-tutorial-javascript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v24.6 (Yoast SEO v24.6) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React\" \/>\n<meta property=\"og:description\" content=\"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstaitalia\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-01T09:02:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-06-06T13:52:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"3042\" \/>\n\t<meta property=\"og:image:height\" content=\"1521\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Carlo Daniele\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@carlodaniele\" \/>\n<meta name=\"twitter:site\" content=\"@Kinsta_IT\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Carlo Daniele\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"35 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\"},\"author\":{\"name\":\"Carlo Daniele\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\"},\"headline\":\"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React\",\"datePublished\":\"2023-06-01T09:02:38+00:00\",\"dateModified\":\"2023-06-06T13:52:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\"},\"wordCount\":5049,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\",\"keywords\":[\"JavaScript\",\"librerie JavaScript\",\"React\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\",\"url\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\",\"name\":\"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\",\"datePublished\":\"2023-06-01T09:02:38+00:00\",\"dateModified\":\"2023-06-06T13:52:46+00:00\",\"description\":\"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg\",\"width\":3042,\"height\":1521},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Linguaggi di Sviluppo Web\",\"item\":\"https:\/\/kinsta.com\/it\/argomenti\/linguaggi-sviluppo-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/it\/#website\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Soluzioni di hosting premium, veloci e sicure\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/it\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstaitalia\/\",\"https:\/\/x.com\/Kinsta_IT\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63\",\"name\":\"Carlo Daniele\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g\",\"caption\":\"Carlo Daniele\"},\"description\":\"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.\",\"sameAs\":[\"https:\/\/frammentidicodice.com\/\",\"https:\/\/x.com\/carlodaniele\"],\"url\":\"https:\/\/kinsta.com\/it\/blog\/author\/carlodaniele\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React - Kinsta\u00ae","description":"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/","og_locale":"it_IT","og_type":"article","og_title":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React","og_description":"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.","og_url":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstaitalia\/","article_published_time":"2023-06-01T09:02:38+00:00","article_modified_time":"2023-06-06T13:52:46+00:00","og_image":[{"width":3042,"height":1521,"url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","type":"image\/jpeg"}],"author":"Carlo Daniele","twitter_card":"summary_large_image","twitter_description":"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.","twitter_image":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","twitter_creator":"@carlodaniele","twitter_site":"@Kinsta_IT","twitter_misc":{"Scritto da":"Carlo Daniele","Tempo di lettura stimato":"35 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/"},"author":{"name":"Carlo Daniele","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63"},"headline":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React","datePublished":"2023-06-01T09:02:38+00:00","dateModified":"2023-06-06T13:52:46+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/"},"wordCount":5049,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","keywords":["JavaScript","librerie JavaScript","React"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/it\/blog\/javascript-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/","url":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/","name":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","datePublished":"2023-06-01T09:02:38+00:00","dateModified":"2023-06-06T13:52:46+00:00","description":"Sfrutta il potenziale di React nello sviluppo di app dinamiche! Scopri le principali caratteristiche di JavaScript da conoscere prima di iniziare.","breadcrumb":{"@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/it\/blog\/javascript-react\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#primaryimage","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/06\/javascript-and-react-01.jpg","width":3042,"height":1521},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/it\/blog\/javascript-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/it\/"},{"@type":"ListItem","position":2,"name":"Linguaggi di Sviluppo Web","item":"https:\/\/kinsta.com\/it\/argomenti\/linguaggi-sviluppo-web\/"},{"@type":"ListItem","position":3,"name":"Caratteristiche di JavaScript da Conoscere per Diventare Esperti di React"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/it\/#website","url":"https:\/\/kinsta.com\/it\/","name":"Kinsta\u00ae","description":"Soluzioni di hosting premium, veloci e sicure","publisher":{"@id":"https:\/\/kinsta.com\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/it\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/it\/wp-content\/uploads\/sites\/2\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstaitalia\/","https:\/\/x.com\/Kinsta_IT","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/962dde02ea6f5df089b5d8d0853bbc63","name":"Carlo Daniele","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/kinsta.com\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/429e5568f88110fd9a409b84cb22197e?s=96&d=mm&r=g","caption":"Carlo Daniele"},"description":"Carlo is a passionate lover of webdesign and front-end development. He has been playing with WordPress for more than 20 years, also in collaboration with Italian and European universities and educational institutions. He has written hundreds of articles and guides about WordPress, published both on Italian and international websites, as well as on printed magazines. You can find him on LinkedIn.","sameAs":["https:\/\/frammentidicodice.com\/","https:\/\/x.com\/carlodaniele"],"url":"https:\/\/kinsta.com\/it\/blog\/author\/carlodaniele\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69737","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/users\/36"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/comments?post=69737"}],"version-history":[{"count":15,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69737\/revisions"}],"predecessor-version":[{"id":69881,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/posts\/69737\/revisions\/69881"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/es"},{"embeddable":true,"hreflang":"sv","title":"Swedish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/se"},{"embeddable":true,"hreflang":"da","title":"Danish","href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/translations\/dk"},{"href":"https:\/\/kinsta.com\/it\/wp-json\/kinsta\/v1\/posts\/69737\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media\/69738"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/media?parent=69737"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/tags?post=69737"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/it\/wp-json\/wp\/v2\/topic?post=69737"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}