From 8fdcb0023d479f94a3da54420f95cd62a545459e Mon Sep 17 00:00:00 2001 From: Agostino <65028567+Ago95Dev@users.noreply.github.com> Date: Wed, 26 Apr 2023 19:38:09 +0200 Subject: [PATCH 01/16] Traduzione iniziale Writing Markup Tradotto fino a sezione 3 regola camelCase Da revisionare --- src/content/learn/writing-markup-with-jsx.md | 67 ++++++++++---------- 1 file changed, 34 insertions(+), 33 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 62670150a..0b42b27c1 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -1,24 +1,25 @@ --- -title: Writing Markup with JSX +title: Scrittura del Markup con JSX --- -*JSX* is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it. +*JSX* è un'estensione della sintassi JavaScript che consente di scrivere markup simile all'HTML all'interno di un file JavaScript. Sebbene esistano altri modi per scrivere i componenti, la maggior parte degli sviluppatori React preferisce la concisione di JSX, e la maggior parte dei codebase lo utilizza. + -* Why React mixes markup with rendering logic -* How JSX is different from HTML -* How to display information with JSX +* Perché React mescola markup e logica di rendering +* Come JSX differisce dall'HTML +* Come visualizzare le informazioni con JSX -## JSX: Putting markup into JavaScript {/*jsx-putting-markup-into-javascript*/} +## JSX: Inserire il markup in JavaScript {/*jsx-putting-markup-into-javascript*/} -The Web has been built on HTML, CSS, and JavaScript. For many years, web developers kept content in HTML, design in CSS, and logic in JavaScript—often in separate files! Content was marked up inside HTML while the page's logic lived separately in JavaScript: +Il Web è stato costruito su HTML, CSS e JavaScript. Per molti anni, gli sviluppatori Web hanno tenuto il contenuto in HTML, il design in CSS e la logica in JavaScript, spesso in file separati! Il contenuto veniva marcato all'interno dell'HTML mentre la logica della pagina viveva separata in JavaScript: @@ -36,37 +37,37 @@ JavaScript -But as the Web became more interactive, logic increasingly determined content. JavaScript was in charge of the HTML! This is why **in React, rendering logic and markup live together in the same place—components.** +Ma mentre il Web diventava sempre più interattivo, la logica determinava sempre più il contenuto. JavaScript era responsabile dell'HTML! Ecco perché **in React, la logica di rendering e il markup vivono insieme nello stesso posto, ovvero nei componenti.** -`Sidebar.js` React component +`Sidebar.js`componente React -`Form.js` React component +`Form.js` componente React -Keeping a button's rendering logic and markup together ensures that they stay in sync with each other on every edit. Conversely, details that are unrelated, such as the button's markup and a sidebar's markup, are isolated from each other, making it safer to change either of them on their own. +Mantenere la logica di rendering e il markup di un pulsante insieme garantisce che rimangano sincronizzati ogni volta che vengono modificati. Al contrario, i dettagli non correlati, come il markup di un pulsante e il markup di una barra laterale, sono isolati l'uno dall'altro, rendendolo più sicuro modificare ognuno di essi da solo. -Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information. The best way to understand this is to convert some HTML markup to JSX markup. +Ogni componente React è una funzione JavaScript che può contenere del markup che React renderizza nel browser. I componenti React utilizzano un'estensione di sintassi chiamata JSX per rappresentare quel markup. JSX assomiglia molto all'HTML, ma è un po' più rigoroso e può visualizzare informazioni dinamiche. La migliore maniera per comprenderlo è quella di convertire un po' di markup HTML in markup JSX. -JSX and React are two separate things. They're often used together, but you *can* [use them independently](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) of each other. JSX is a syntax extension, while React is a JavaScript library. +JSX e React sono due cose separate. Sono spesso utilizzati insieme, ma *puoi* [utilizzarli indipendentemente](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#whats-a-jsx-transform) l'uno dall'altro. JSX è un'estensione di sintassi, mentre React è una libreria JavaScript. -## Converting HTML to JSX {/*converting-html-to-jsx*/} +## Convertire HTML in JSX {/*converting-html-to-jsx*/} -Suppose that you have some (perfectly valid) HTML: +Supponiamo di avere qualche HTML(perfettamente valido): ```html

Hedy Lamarr's Todos

@@ -82,7 +83,7 @@ Suppose that you have some (perfectly valid) HTML: ``` -And you want to put it into your component: +E vogliamo inserirlo nel nostro componente: ```js export default function TodoList() { @@ -92,7 +93,7 @@ export default function TodoList() { } ``` -If you copy and paste it as is, it will not work: +Se lo copiamo e incolliamo così com'è, non funzionerà: @@ -122,21 +123,21 @@ img { height: 90px } -This is because JSX is stricter and has a few more rules than HTML! If you read the error messages above, they'll guide you to fix the markup, or you can follow the guide below. +Ciò è dovuto al fatto che JSX è più rigoroso e ha alcune regole in più rispetto a HTML! Se leggi i messaggi di errore sopra, ti guideranno nella correzione del markup o puoi seguire la guida di seguito. -Most of the time, React's on-screen error messages will help you find where the problem is. Give them a read if you get stuck! +La maggior parte delle volte, i messaggi di errore di React ti aiuteranno a trovare il problema. Leggili se ti blocchi! -## The Rules of JSX {/*the-rules-of-jsx*/} +## Le regole di JSX {/*the-rules-of-jsx*/} -### 1. Return a single root element {/*1-return-a-single-root-element*/} +### 1. Restituisci un singolo elemento root {/*1-return-a-single-root-element*/} -To return multiple elements from a component, **wrap them with a single parent tag.** +Per restituire più elementi da un componente, **utilizza un tag padre per incapsularli(wrap)** -For example, you can use a `
`: +Per esempio, puoi usare un `
`: ```js {1,11}
@@ -153,7 +154,7 @@ For example, you can use a `
`: ``` -If you don't want to add an extra `
` to your markup, you can write `<>` and `` instead: +Se non vuoi aggiungere un ulteriore `
` al tuo markup, puoi scrivere invece `<>` e ``: ```js {1,11} <> @@ -169,21 +170,21 @@ If you don't want to add an extra `
` to your markup, you can write `<>` and ``` -This empty tag is called a *[Fragment.](/reference/react/Fragment)* Fragments let you group things without leaving any trace in the browser HTML tree. +Questo tag vuoto è chiamato *[Fragment.](/reference/react/Fragment)* I fragments ti consentono di raggruppare elementi senza lasciare traccia nell'albero HTML del browser. -#### Why do multiple JSX tags need to be wrapped? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} +#### Perché i tag JSX multipli devono essere wrappati? {/*why-do-multiple-jsx-tags-need-to-be-wrapped*/} -JSX looks like HTML, but under the hood it is transformed into plain JavaScript objects. You can't return two objects from a function without wrapping them into an array. This explains why you also can't return two JSX tags without wrapping them into another tag or a Fragment. +JSX sembra HTML, ma sotto il cofano viene trasformato in semplici oggetti JavaScript. Non è possibile restituire due oggetti da una funzione senza wrapparli in un array. Questo spiega perché non è possibile restituire due tag JSX senza wrapparli in un altro tag o in un Fragment. -### 2. Close all the tags {/*2-close-all-the-tags*/} +### 2. Chiudi tutti i tag {/*2-close-all-the-tags*/} -JSX requires tags to be explicitly closed: self-closing tags like `` must become ``, and wrapping tags like `
  • oranges` must be written as `
  • oranges
    • `. +JSX richiede che i tag vengano chiusi esplicitamente: i tag auto-chiusi come `` devono diventare ``, e i tag di wrapping come `
  • oranges` devono essere scritti come `
  • oranges
    • `. -This is how Hedy Lamarr's image and list items look closed: +Ecco come appaiono chiusi l'immagine di Hedy Lamarr e gli elementi della lista: ```js {2-6,8-10} <> @@ -200,11 +201,11 @@ This is how Hedy Lamarr's image and list items look closed: ``` -### 3. camelCase all most of the things! {/*3-camelcase-salls-most-of-the-things*/} +### 3. Scrivi in camelCase tutte quasi tutte le cose! {/*3-camelcase-salls-most-of-the-things*/} -JSX turns into JavaScript and attributes written in JSX become keys of JavaScript objects. In your own components, you will often want to read those attributes into variables. But JavaScript has limitations on variable names. For example, their names can't contain dashes or be reserved words like `class`. +JSX diventa JavaScript e gli attributi scritti in JSX diventano chiavi degli oggetti JavaScript. Nelle proprie componenti, spesso si vorrà leggere questi attributi in variabili. Ma JavaScript ha limitazioni sui nomi delle variabili. Ad esempio, i loro nomi non possono contenere trattini o essere parole riservate come `class`. -This is why, in React, many HTML and SVG attributes are written in camelCase. For example, instead of `stroke-width` you use `strokeWidth`. Since `class` is a reserved word, in React you write `className` instead, named after the [corresponding DOM property](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): +Ecco perché in React molti attributi HTML e SVG sono scritti in camelCase. Ad esempio, invece di `stroke-width` si usa `strokeWidth`. Poiché `class` è una parola riservata, in React si scrive `className` invece, nominata in base alla [corrispondente proprietà DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): ```js {4} Date: Wed, 26 Apr 2023 22:58:44 +0200 Subject: [PATCH 02/16] Translate "Writing Markup with JSX" Tradotto "Writing Markup with JSX" e relativa voce nella sidebar Learn --- src/content/learn/writing-markup-with-jsx.md | 28 ++++++++++---------- src/sidebarLearn.json | 2 +- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 0b42b27c1..6857b081a 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -1,5 +1,5 @@ --- -title: Scrittura del Markup con JSX +title: Scrivere Markup con JSX --- @@ -135,7 +135,7 @@ La maggior parte delle volte, i messaggi di errore di React ti aiuteranno a trov ### 1. Restituisci un singolo elemento root {/*1-return-a-single-root-element*/} -Per restituire più elementi da un componente, **utilizza un tag padre per incapsularli(wrap)** +Per restituire più elementi da un componente, **utilizza un tag padre per wrapparli** Per esempio, puoi usare un `
    `: @@ -215,19 +215,19 @@ Ecco perché in React molti attributi HTML e SVG sono scritti in camelCase. Ad e /> ``` -You can [find all these attributes in the list of DOM component props.](/reference/react-dom/components/common) If you get one wrong, don't worry—React will print a message with a possible correction to the [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console) +Puoi [trovare tutti questi attributi nell'elenco delle props del componente DOM.](/reference/react-dom/components/common) Se ne sbagli uno, non preoccuparti: React stamperà un messaggio con una possibile correzione nella [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console) -For historical reasons, [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) and [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) attributes are written as in HTML with dashes. +Per ragioni storiche, gli attributi [`aria-*`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA) e [`data-*`](https://developer.mozilla.org/docs/Learn/HTML/Howto/Use_data_attributes) sono scritti come in HTML con i trattini. -### Pro-tip: Use a JSX Converter {/*pro-tip-use-a-jsx-converter*/} +### Pro-tip: Usa un convertitore JSX {/*pro-tip-use-a-jsx-converter*/} -Converting all these attributes in existing markup can be tedious! We recommend using a [converter](https://transform.tools/html-to-jsx) to translate your existing HTML and SVG to JSX. Converters are very useful in practice, but it's still worth understanding what is going on so that you can comfortably write JSX on your own. +Convertire tutti questi attributi nel markup esistente può essere noioso! Raccomandiamo di utilizzare un [converter](https://transform.tools/html-to-jsx) per tradurre il vostro HTML e SVG esistenti in JSX. I convertitori sono molto utili nella pratica, ma è comunque utile capire cosa succede in modo da poter scrivere JSX autonomamente. -Here is your final result: +Ecco il tuo risultato finale: @@ -259,11 +259,11 @@ img { height: 90px } -Now you know why JSX exists and how to use it in components: +Ora sai perché JSX esiste e come usarlo nei componenti: -* React components group rendering logic together with markup because they are related. -* JSX is similar to HTML, with a few differences. You can use a [converter](https://transform.tools/html-to-jsx) if you need to. -* Error messages will often point you in the right direction to fixing your markup. +* I componenti React raggruppano la logica di rendering insieme al markup poiché sono correlati. +* JSX è simile all'HTML, con alcune differenze. Puoi usare un [converter](https://transform.tools/html-to-jsx) se ne hai bisogno. +* I messaggi di errore spesso ti indirizzeranno nella giusta direzione per correggere il tuo markup. @@ -271,9 +271,9 @@ Now you know why JSX exists and how to use it in components: -#### Convert some HTML to JSX {/*convert-some-html-to-jsx*/} +#### Converti un po' di HTML in JSX {/*convert-some-html-to-jsx*/} -This HTML was pasted into a component, but it's not valid JSX. Fix it: +Questo HTML è stato copiato in un componente, ma non è un JSX valido. Correggilo: @@ -309,7 +309,7 @@ export default function Bio() { -Whether to do it by hand or using the converter is up to you! +Che tu lo faccia a mano o usando il convertitore, dipende da te! diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index ca75cd663..79d07c112 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -60,7 +60,7 @@ "path": "/learn/importing-and-exporting-components" }, { - "title": "Writing Markup with JSX", + "title": "Scrivere Markup con JSX", "path": "/learn/writing-markup-with-jsx" }, { From 0c3d930b221b8b8067e5a5498048f3c841a41b32 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:16:18 +0200 Subject: [PATCH 03/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 6857b081a..2f75555cd 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -43,7 +43,7 @@ Ma mentre il Web diventava sempre più interattivo, la logica determinava sempre -`Sidebar.js`componente React +Componente React `Sidebar.js` From 016faef08273d5252788c6db768f9ef8555dc890 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:16:43 +0200 Subject: [PATCH 04/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 2f75555cd..1c41726e3 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -49,7 +49,7 @@ Componente React `Sidebar.js` -`Form.js` componente React +Componente React `Form.js` From 9348b1593d07e2b5c9bb200c83d6218fa1553efa Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:17:28 +0200 Subject: [PATCH 05/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 1c41726e3..729efe792 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -55,7 +55,7 @@ Componente React `Form.js` -Mantenere la logica di rendering e il markup di un pulsante insieme garantisce che rimangano sincronizzati ogni volta che vengono modificati. Al contrario, i dettagli non correlati, come il markup di un pulsante e il markup di una barra laterale, sono isolati l'uno dall'altro, rendendolo più sicuro modificare ognuno di essi da solo. +Mantenere la logica di rendering e il markup di un pulsante insieme garantisce che rimangano sincronizzati ogni volta che vengono modificati. Al contrario, i dettagli non correlati, come il markup di un pulsante e il markup di una barra laterale, sono isolati l'uno dall'altro, rendendo più sicuro modificare ognuno di essi da solo. Ogni componente React è una funzione JavaScript che può contenere del markup che React renderizza nel browser. I componenti React utilizzano un'estensione di sintassi chiamata JSX per rappresentare quel markup. JSX assomiglia molto all'HTML, ma è un po' più rigoroso e può visualizzare informazioni dinamiche. La migliore maniera per comprenderlo è quella di convertire un po' di markup HTML in markup JSX. From 0dbfbd79b21d7df285cadf40729d6b47cedd6c79 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:18:38 +0200 Subject: [PATCH 06/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 729efe792..0c89fe996 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -65,7 +65,7 @@ JSX e React sono due cose separate. Sono spesso utilizzati insieme, ma *puoi* [u -## Convertire HTML in JSX {/*converting-html-to-jsx*/} +## Convertire HTML in JSX {/*converting-html-to-jsx*/} Supponiamo di avere qualche HTML(perfettamente valido): From 1fe32ed44063358043273bfd8297f174fe38065a Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:19:22 +0200 Subject: [PATCH 07/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 0c89fe996..d66e70654 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -131,7 +131,7 @@ La maggior parte delle volte, i messaggi di errore di React ti aiuteranno a trov -## Le regole di JSX {/*the-rules-of-jsx*/} +## Le Regole di JSX {/*the-rules-of-jsx*/} ### 1. Restituisci un singolo elemento root {/*1-return-a-single-root-element*/} From 011aea4152e0f64193f39075ab13b457c0159770 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:20:33 +0200 Subject: [PATCH 08/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index d66e70654..88e1f8146 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -201,7 +201,7 @@ Ecco come appaiono chiusi l'immagine di Hedy Lamarr e gli elementi della lista: ``` -### 3. Scrivi in camelCase tutte quasi tutte le cose! {/*3-camelcase-salls-most-of-the-things*/} +### 3. Scrivi in camelCase quasi tutte le cose! {/*3-camelcase-salls-most-of-the-things*/} JSX diventa JavaScript e gli attributi scritti in JSX diventano chiavi degli oggetti JavaScript. Nelle proprie componenti, spesso si vorrà leggere questi attributi in variabili. Ma JavaScript ha limitazioni sui nomi delle variabili. Ad esempio, i loro nomi non possono contenere trattini o essere parole riservate come `class`. From c7abef799051f129d868d1c98338d470ae943de5 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:21:02 +0200 Subject: [PATCH 09/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 88e1f8146..46411340a 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -203,7 +203,7 @@ Ecco come appaiono chiusi l'immagine di Hedy Lamarr e gli elementi della lista: ### 3. Scrivi in camelCase quasi tutte le cose! {/*3-camelcase-salls-most-of-the-things*/} -JSX diventa JavaScript e gli attributi scritti in JSX diventano chiavi degli oggetti JavaScript. Nelle proprie componenti, spesso si vorrà leggere questi attributi in variabili. Ma JavaScript ha limitazioni sui nomi delle variabili. Ad esempio, i loro nomi non possono contenere trattini o essere parole riservate come `class`. +JSX diventa JavaScript e gli attributi scritti in JSX diventano chiavi degli oggetti JavaScript. Nei propri componenti, spesso si vorrà leggere questi attributi in variabili. Ma JavaScript ha limitazioni sui nomi delle variabili. Ad esempio, i loro nomi non possono contenere trattini o essere parole riservate come `class`. Ecco perché in React molti attributi HTML e SVG sono scritti in camelCase. Ad esempio, invece di `stroke-width` si usa `strokeWidth`. Poiché `class` è una parola riservata, in React si scrive `className` invece, nominata in base alla [corrispondente proprietà DOM](https://developer.mozilla.org/en-US/docs/Web/API/Element/className): From 597d1ae7e6eefc1af495238a3fb0777cc875771f Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:21:23 +0200 Subject: [PATCH 10/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 46411340a..473e8eb66 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -215,7 +215,7 @@ Ecco perché in React molti attributi HTML e SVG sono scritti in camelCase. Ad e /> ``` -Puoi [trovare tutti questi attributi nell'elenco delle props del componente DOM.](/reference/react-dom/components/common) Se ne sbagli uno, non preoccuparti: React stamperà un messaggio con una possibile correzione nella [browser console.](https://developer.mozilla.org/docs/Tools/Browser_Console) +Puoi [trovare tutti questi attributi nell'elenco delle props del componente DOM.](/reference/react-dom/components/common) Se ne sbagli uno, non preoccuparti: React stamperà un messaggio con una possibile correzione nella [console del browser.](https://developer.mozilla.org/docs/Tools/Browser_Console) From a2cabc75b2ebe400414bf7931528f8e59d936dea Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:22:01 +0200 Subject: [PATCH 11/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 473e8eb66..8b887034e 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -223,7 +223,7 @@ Per ragioni storiche, gli attributi [`aria-*`](https://developer.mozilla.org/doc -### Pro-tip: Usa un convertitore JSX {/*pro-tip-use-a-jsx-converter*/} +### Pro-tip: Usa un Convertitore JSX {/*pro-tip-use-a-jsx-converter*/} Convertire tutti questi attributi nel markup esistente può essere noioso! Raccomandiamo di utilizzare un [converter](https://transform.tools/html-to-jsx) per tradurre il vostro HTML e SVG esistenti in JSX. I convertitori sono molto utili nella pratica, ma è comunque utile capire cosa succede in modo da poter scrivere JSX autonomamente. From e6f8f9fd7007dfdcf1a65a91c78daab22be5cd2b Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:22:36 +0200 Subject: [PATCH 12/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 8b887034e..04d3368d2 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -225,7 +225,7 @@ Per ragioni storiche, gli attributi [`aria-*`](https://developer.mozilla.org/doc ### Pro-tip: Usa un Convertitore JSX {/*pro-tip-use-a-jsx-converter*/} -Convertire tutti questi attributi nel markup esistente può essere noioso! Raccomandiamo di utilizzare un [converter](https://transform.tools/html-to-jsx) per tradurre il vostro HTML e SVG esistenti in JSX. I convertitori sono molto utili nella pratica, ma è comunque utile capire cosa succede in modo da poter scrivere JSX autonomamente. +Convertire tutti questi attributi nel markup esistente può essere noioso! Raccomandiamo di utilizzare un [convertitore](https://transform.tools/html-to-jsx) per tradurre il tuo HTML e SVG esistenti in JSX. I convertitori sono molto utili nella pratica, ma è comunque utile capire cosa succede in modo da poter scrivere JSX autonomamente. Ecco il tuo risultato finale: From 3a501db27295cee90b6ae8636cbc9cc6fbac3815 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 11:23:07 +0200 Subject: [PATCH 13/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 04d3368d2..9e9a8026f 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -262,7 +262,7 @@ img { height: 90px } Ora sai perché JSX esiste e come usarlo nei componenti: * I componenti React raggruppano la logica di rendering insieme al markup poiché sono correlati. -* JSX è simile all'HTML, con alcune differenze. Puoi usare un [converter](https://transform.tools/html-to-jsx) se ne hai bisogno. +* JSX è simile all'HTML, con alcune differenze. Puoi usare un [convertitore](https://transform.tools/html-to-jsx) se ne hai bisogno. * I messaggi di errore spesso ti indirizzeranno nella giusta direzione per correggere il tuo markup. From 35bb9a3679c6d0b476e7e5531a9fb4e3d0d3d307 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 14:56:48 +0200 Subject: [PATCH 14/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 9e9a8026f..a96e5a266 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -67,7 +67,7 @@ JSX e React sono due cose separate. Sono spesso utilizzati insieme, ma *puoi* [u ## Convertire HTML in JSX {/*converting-html-to-jsx*/} -Supponiamo di avere qualche HTML(perfettamente valido): +Supponiamo di avere qualche HTML (perfettamente valido): ```html

    Hedy Lamarr's Todos

    From 865d64ba188621672660135d87dfae8f4eef6cbe Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 14:57:15 +0200 Subject: [PATCH 15/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index a96e5a266..56e71d4c3 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -83,7 +83,7 @@ Supponiamo di avere qualche HTML (perfettamente valido): ``` -E vogliamo inserirlo nel nostro componente: +E di volerlo inserire nel nostro componente: ```js export default function TodoList() { From 1e85ab26e67a9c3661076a11b72f68bf8acf3bb1 Mon Sep 17 00:00:00 2001 From: Agostino D'Agostino Date: Thu, 27 Apr 2023 17:20:22 +0200 Subject: [PATCH 16/16] Update src/content/learn/writing-markup-with-jsx.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/writing-markup-with-jsx.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/writing-markup-with-jsx.md b/src/content/learn/writing-markup-with-jsx.md index 56e71d4c3..1f08e521d 100644 --- a/src/content/learn/writing-markup-with-jsx.md +++ b/src/content/learn/writing-markup-with-jsx.md @@ -6,7 +6,6 @@ title: Scrivere Markup con JSX *JSX* è un'estensione della sintassi JavaScript che consente di scrivere markup simile all'HTML all'interno di un file JavaScript. Sebbene esistano altri modi per scrivere i componenti, la maggior parte degli sviluppatori React preferisce la concisione di JSX, e la maggior parte dei codebase lo utilizza. -