From 2b7b3cd919ea64e0fd8d3966c1e2ed51b618f428 Mon Sep 17 00:00:00 2001 From: Luca Date: Fri, 15 Feb 2019 00:21:06 +0100 Subject: [PATCH 1/6] [WIP] Transtation of the `Tutorial` page --- content/docs/introducing-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index d76c3ace6..fe9982048 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -1,6 +1,6 @@ --- id: introducing-jsx -title: Introducing JSX +title: Introduzione al JSX permalink: docs/introducing-jsx.html prev: hello-world.html next: rendering-elements.html From 2a87420c1b3a249cd75c54929bb5a9d5dfbb8252 Mon Sep 17 00:00:00 2001 From: Luca Nardi Date: Fri, 15 Feb 2019 00:48:13 +0100 Subject: [PATCH 2/6] Translated first part of page --- content/docs/introducing-jsx.md | 20 ++++++++++---------- content/docs/nav.yml | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index fe9982048..f27333ce5 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -1,32 +1,32 @@ --- id: introducing-jsx -title: Introduzione al JSX +title: Introduzione a JSX permalink: docs/introducing-jsx.html prev: hello-world.html next: rendering-elements.html --- -Consider this variable declaration: +Considera questa dichiarazione di variabile: ```js const element =

Hello, world!

; ``` -This funny tag syntax is neither a string nor HTML. +Questa strana sintassi con i tag non è né una stringa né HTML. -It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. +È chiamata JSX, ed è un'estensione della sintassi JavaScript. Ti raccomandiamo di utilizzarla con React per descrivere l'aspetto che dovrebbe avere la UI (*User Interface*, o interfaccia utente). JSX ti potrebbe ricordare un linguaggio di template, ma usufruisce di tutta la potenza del JavaScript. -JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started. +JSX produce "elementi" di React. Studieremo il modo in cui gli elementi vengono renderizzati nel DOM nella [prossima sezione](/docs/rendering-elements.html). Qui sotto troverai le nozioni fondamentali di JSX, sufficienti per iniziare ad utilizzarlo. -### Why JSX? {#why-jsx} +### Perché JSX? {#why-jsx} -React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. +React riconosce il fatto che la logica di renderizzazione è per sua stessa natura accoppiata con le altre logiche che governano la UI: la gestione degli eventi, il cambiamento dello stato nel tempo, la preparazione dei dati per la visualizzazione. -Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise. +Invece di separare artificialmente le *tecnologie* inserendo il codice di markup e la logica in file separati, React [separa le *responsabilità*](https://it.wikipedia.org/wiki/Principio_di_singola_responsabilit%C3%A0) utilizzando unità debolmente accoppiate chiamate "componenti" che contengono entrambi. Torneremo a parlare dei componenti in una [sezione successiva](/docs/components-and-props.html). Se non ti senti ancora a tuo agio a inserire codice di markup nel JavaScript, [questa presentazione](https://www.youtube.com/watch?v=x7cQ3mrcKaY) dovrebbe riuscire a convincerti. -React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages. +React [non obbliga](/docs/react-without-jsx.html) ad utilizzare JSX, ma la maggior parte delle persone lo trovano utile come aiuto visuale quando lavorano con la UI all'interno del codice JavaScript. Inoltre, JSX consente a React di mostrare messaggi di errore e di avvertimento più efficaci. -With that out of the way, let's get started! +Detto questo, incominciamo! ### Embedding Expressions in JSX {#embedding-expressions-in-jsx} diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 4d4a7571f..f5596e2a4 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -14,7 +14,7 @@ - id: hello-world title: Hello World - id: introducing-jsx - title: Introducing JSX + title: Introduzione a JSX - id: rendering-elements title: Rendering Elements - id: components-and-props From 2f1da2d6a24a09d964a0fa0ff8f682e9b79e3227 Mon Sep 17 00:00:00 2001 From: Luca Nardi Date: Sat, 16 Feb 2019 09:40:23 +0100 Subject: [PATCH 3/6] Finishing translation of Introducing JSX page --- content/docs/introducing-jsx.md | 72 ++++++++++++++++----------------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index f27333ce5..df5aeda9b 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -16,7 +16,7 @@ Questa strana sintassi con i tag non è né una stringa né HTML. È chiamata JSX, ed è un'estensione della sintassi JavaScript. Ti raccomandiamo di utilizzarla con React per descrivere l'aspetto che dovrebbe avere la UI (*User Interface*, o interfaccia utente). JSX ti potrebbe ricordare un linguaggio di template, ma usufruisce di tutta la potenza del JavaScript. -JSX produce "elementi" di React. Studieremo il modo in cui gli elementi vengono renderizzati nel DOM nella [prossima sezione](/docs/rendering-elements.html). Qui sotto troverai le nozioni fondamentali di JSX, sufficienti per iniziare ad utilizzarlo. +JSX produce "elementi React". Studieremo il modo in cui gli elementi vengono renderizzati nel DOM nella [prossima sezione](/docs/rendering-elements.html). Qui sotto troverai le nozioni fondamentali di JSX, sufficienti per iniziare ad utilizzarlo. ### Perché JSX? {#why-jsx} @@ -28,12 +28,12 @@ React [non obbliga](/docs/react-without-jsx.html) ad utilizzare JSX, ma la maggi Detto questo, incominciamo! -### Embedding Expressions in JSX {#embedding-expressions-in-jsx} +### Incorporare espressioni in JSX {#embedding-expressions-in-jsx} -In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces: +Nell'esempio in basso, dichiariamo una variabile chiamata `name` e poi la utilizziamo all'interno di JSX racchiudendola in parentesi graffe: ```js{1,2} -const name = 'Josh Perez'; +const name = 'Giuseppe Verdi'; const element =

Hello, {name}

; ReactDOM.render( @@ -42,9 +42,9 @@ ReactDOM.render( ); ``` -You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions. +Puoi inserire qualsiasi [espressione JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) all'interno delle parentesi graffe in JSX. Ad esempio, `2 + 2`, `user.firstName` o `formatName(user)` sono tutte espressioni JavaScript valide. -In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `

` element. +Nell'esempio in basso, includiamo il risultato della chiamata a una funzione JavaScript, `formatName(user)`, in un elemento `

`. ```js{12} function formatName(user) { @@ -52,8 +52,8 @@ function formatName(user) { } const user = { - firstName: 'Harper', - lastName: 'Perez' + firstName: 'Giuseppe', + lastName: 'Verdi' }; const element = ( @@ -70,13 +70,13 @@ ReactDOM.render( [](codepen://introducing-jsx) -We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283). +Abbiamo suddiviso il codice JSX su più linee per renderlo più leggibile. Sebbene non sia obbligatorio, se segui questa pratica ti consigliamo di racchiudere il codice in parentesi per evitare i problemi che possono derivare dall'[inserimento automatico dei punto e virgola](http://stackoverflow.com/q/2846283). -### JSX is an Expression Too {#jsx-is-an-expression-too} +### JSX è un'Espressione {#jsx-is-an-expression-too} -After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects. +Dopo la compilazione, le espressioni JSX diventano normali chiamate a funzioni JavaScript che producono oggetti JavaScript. -This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions: +Questo significa che puoi utilizzare JSX all'interno di istruzioni `if` e cicli `for`, assegnarlo a variabili, utilizzarlo come argomento di una funzione e restituirlo come risultato di una funzione: ```js{3,5} function getGreeting(user) { @@ -87,37 +87,37 @@ function getGreeting(user) { } ``` -### Specifying Attributes with JSX {#specifying-attributes-with-jsx} +### Specificare gli Attributi con JSX {#specifying-attributes-with-jsx} -You may use quotes to specify string literals as attributes: +Puoi utilizzare le virgolette per valorizzare gli attributi con una stringa: ```js const element =
; ``` -You may also use curly braces to embed a JavaScript expression in an attribute: +Puoi anche utilizzare le parentesi graffe per includere un'espressione JavaScript in un attributo: ```js const element = ; ``` -Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute. +Non aggiungere le virgolette attorno alle parentesi graffe quando includi un'espressione JavaScript in un attributo. Dovresti utilizzare o le virgolette (per le stringhe) o le parentesi graffe (per le espressioni), ma mai entrambe nello stesso attributo. ->**Warning:** +>**Attenzione:** > ->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names. +>Dal momento che JSX è più vicino al JavaScript che all'HTML, React DOM utilizza la convenzione [`camelCase`](https://it.wikipedia.org/wiki/Notazione_a_cammello) nell'assegnare il nome agli attributi, invece che quella utilizzata normalmente nell'HTML, e modifica il nome di alcuni attributi. > ->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). +>Ad esempio, `class` diventa [`className`](https://developer.mozilla.org/it/docs/Web/API/Element/className) in JSX e `tabindex` diventa [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex). -### Specifying Children with JSX {#specifying-children-with-jsx} +### Specificare Figli in JSX {#specifying-children-with-jsx} -If a tag is empty, you may close it immediately with `/>`, like XML: +Se un tag è vuoto, puoi chiuderlo immediatamente con `/>`, come in XML: ```js const element = ; ``` -JSX tags may contain children: +I tag JSX possono contenere figli: ```js const element = ( @@ -128,23 +128,23 @@ const element = ( ); ``` -### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks} +### JSX Previene gli Attacchi di Iniezione del Codice {#jsx-prevents-injection-attacks} -It is safe to embed user input in JSX: +Utilizzare l'input degli utenti in JSX è sicuro: ```js -const title = response.potentiallyMaliciousInput; -// This is safe: +const title = response.contenutoPotenzialmentePericoloso; +// Questo è sicuro: const element =

{title}

; ``` -By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. +React DOM effettua automaticamente l'[escape](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) di qualsiasi valore inserito in JSX prima di renderizzarlo. In questo modo, garantisce che non sia possibile iniettare nulla che non sia esplicitamente scritto nella tua applicazione. Ogni cosa è convertita in stringa prima di essere renderizzata. Questo aiuta a prevenire gli attacchi [XSS (cross-site-scripting)](https://it.wikipedia.org/wiki/Cross-site_scripting). -### JSX Represents Objects {#jsx-represents-objects} +### JSX Rappresenta Oggetti {#jsx-represents-objects} -Babel compiles JSX down to `React.createElement()` calls. +Babel compila JSX in chiamate a `React.createElement()`. -These two examples are identical: +Questi due esempi sono identici: ```js const element = ( @@ -162,10 +162,10 @@ const element = React.createElement( ); ``` -`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this: +`React.createElement()` effettua alcuni controlli per aiutarti a scrivere codice senza bug, ma fondamentalmente crea un oggetto come questo: ```js -// Note: this structure is simplified +// Nota: questa struttura è semplificata const element = { type: 'h1', props: { @@ -175,10 +175,10 @@ const element = { }; ``` -These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date. +Questi oggetti sono chiamati "elementi React". Puoi pensare a loro come a descrizioni di ciò che vuoi vedere sullo schermo. React legge questi oggetti e li utilizza per costruire il DOM e tenerlo aggiornato. -We will explore rendering React elements to the DOM in the next section. +Esploreremo la renderizzazione degli elementi React nel DOM nella prossima sezione. ->**Tip:** +>**Consiglio:** > ->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it. +>Ti raccomandiamo di [indicare "Babel" come linguaggio](http://babeljs.io/docs/editors) nel tuo editor preferito, in modo che il codice ES6 e il codice JSX siano entrambi evidenziati correttamente. Questo sito utilizza lo schema di colori compatibile [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/). From b84f347bc56f8929a5a9ad7c677732c6b4a71c12 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Sun, 17 Feb 2019 12:21:41 +0100 Subject: [PATCH 4/6] Update content/docs/introducing-jsx.md Co-Authored-By: LucaBlackDragon --- content/docs/introducing-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index df5aeda9b..cebcecaed 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -22,7 +22,7 @@ JSX produce "elementi React". Studieremo il modo in cui gli elementi vengono ren React riconosce il fatto che la logica di renderizzazione è per sua stessa natura accoppiata con le altre logiche che governano la UI: la gestione degli eventi, il cambiamento dello stato nel tempo, la preparazione dei dati per la visualizzazione. -Invece di separare artificialmente le *tecnologie* inserendo il codice di markup e la logica in file separati, React [separa le *responsabilità*](https://it.wikipedia.org/wiki/Principio_di_singola_responsabilit%C3%A0) utilizzando unità debolmente accoppiate chiamate "componenti" che contengono entrambi. Torneremo a parlare dei componenti in una [sezione successiva](/docs/components-and-props.html). Se non ti senti ancora a tuo agio a inserire codice di markup nel JavaScript, [questa presentazione](https://www.youtube.com/watch?v=x7cQ3mrcKaY) dovrebbe riuscire a convincerti. +Invece di separare artificialmente le *tecnologie* inserendo il codice di markup e la logica in file separati, React [separa le *responsabilità*](https://it.wikipedia.org/wiki/Principio_di_singola_responsabilit%C3%A0) utilizzando unità debolmente accoppiate chiamate "componenti" che contengono entrambi. Torneremo a parlare dei componenti in una [sezione successiva](/docs/components-and-props.html). Se non ti senti ancora a tuo agio ad inserire codice di markup nel JavaScript, [questa presentazione](https://www.youtube.com/watch?v=x7cQ3mrcKaY) dovrebbe riuscire a convincerti. React [non obbliga](/docs/react-without-jsx.html) ad utilizzare JSX, ma la maggior parte delle persone lo trovano utile come aiuto visuale quando lavorano con la UI all'interno del codice JavaScript. Inoltre, JSX consente a React di mostrare messaggi di errore e di avvertimento più efficaci. From 89d1475699c3a6f8b138d64b14954730cc358e20 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Sun, 17 Feb 2019 12:21:49 +0100 Subject: [PATCH 5/6] Update content/docs/introducing-jsx.md Co-Authored-By: LucaBlackDragon --- content/docs/introducing-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index cebcecaed..446e2aee9 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -44,7 +44,7 @@ ReactDOM.render( Puoi inserire qualsiasi [espressione JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) all'interno delle parentesi graffe in JSX. Ad esempio, `2 + 2`, `user.firstName` o `formatName(user)` sono tutte espressioni JavaScript valide. -Nell'esempio in basso, includiamo il risultato della chiamata a una funzione JavaScript, `formatName(user)`, in un elemento `

`. +Nell'esempio in basso, includiamo il risultato della chiamata ad una funzione JavaScript, `formatName(user)`, in un elemento `

`. ```js{12} function formatName(user) { From 5cd2fd32998fa1ce7d8970a70a33aee166744d40 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Sun, 17 Feb 2019 12:22:04 +0100 Subject: [PATCH 6/6] Update content/docs/introducing-jsx.md Co-Authored-By: LucaBlackDragon --- content/docs/introducing-jsx.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md index 446e2aee9..14e051adb 100644 --- a/content/docs/introducing-jsx.md +++ b/content/docs/introducing-jsx.md @@ -181,4 +181,4 @@ Esploreremo la renderizzazione degli elementi React nel DOM nella prossima sezio >**Consiglio:** > ->Ti raccomandiamo di [indicare "Babel" come linguaggio](http://babeljs.io/docs/editors) nel tuo editor preferito, in modo che il codice ES6 e il codice JSX siano entrambi evidenziati correttamente. Questo sito utilizza lo schema di colori compatibile [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/). +>Ti raccomandiamo di [indicare "Babel" come linguaggio](http://babeljs.io/docs/editors) nel tuo editor preferito, in modo che il codice ES6 ed il codice JSX siano entrambi evidenziati correttamente. Questo sito utilizza lo schema di colori compatibile [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/).