Transtation of the Introducing jsx page

content/docs/introducing-jsx.md

@@ -1,39 +1,39 @@
 ---
 id: introducing-jsx
-title: Introducing 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 = <h1>Hello, world!</h1>;
 ```
 
-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 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 ad 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}
+### 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 = <h1>Hello, {name}</h1>;
 
 ReactDOM.render(
@@ -42,18 +42,18 @@ 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 `<h1>` element.
+Nell'esempio in basso, includiamo il risultato della chiamata ad una funzione JavaScript, `formatName(user)`, in un elemento `<h1>`.
 
 ```js{12}
 function formatName(user) {
   return user.firstName + ' ' + user.lastName;
 }
 
 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 = <div tabIndex="0"></div>;
 ```
 
-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 = <img src={user.avatarUrl}></img>;
 ```
 
-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 = <img src={user.avatarUrl} />;
 ```
 
-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 = <h1>{title}</h1>;
 ```
 
-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 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/).

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: Renderizzare Elementi
     - id: components-and-props