Translation for the page 'Components and props'

GLOSSARY.md

@@ -31,6 +31,7 @@ Suggestion on words and terms:
 | render | renderizzare (verbo), renderizzato (nome) |
 | React component class | classe componente React |
 | React component type | tipo componente React |
+| function component | componente funzione |
 
 ## Problematic terms
 

content/docs/components-and-props.md

@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: Componenti e Props
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,98 +16,98 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
+I Componenti ti permettono di suddividere la UI (*User Interface*, o interfaccia utente) in parti indipendenti, riutilizzabili e di pensare ad ognuna di esse in modo isolato. Questa pagina offre una introduzione al concetto dei componenti. Puoi trovare invece informazioni dettagliate nella [API di riferimento dei componenti](/docs/react-component.html).
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+Concettualmente, i componenti sono come funzioni JavaScript: accettano in input dati arbitrari (sotto il nome di "props") e ritornano elementi React che descrivono cosa dovrebbe apparire sullo schermo.
 
-## Function and Class Components {#function-and-class-components}
+## Funzioni e Classi Componente {#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+Il modo più semplice di definire un componente è quello di scrivere una funzione JavaScript:
 
 ```js
-function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+function Ciao(props) {
+  return <h1>Ciao, {props.nome}</h1>;
 }
 ```
 
-This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
+Questa funzione è un componente React valido in quanto accetta un oggetto parametro contenente dati sotto forma di una singola "props" (che prende il nome da "properties" in inglese, ossia "proprietà") che è un oggetto parametro avente dati al suo interno e ritorna un elemento React. Chiameremo questo tipo di componenti "componenti funzione" perchè sono letteralmente funzioni JavaScript.
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+Puoi anche usare una [classe ES6](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes) per definire un componente:
 
 ```js
-class Welcome extends React.Component {
+class Ciao extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Ciao, {this.props.nome}</h1>;
   }
 }
 ```
 
-The above two components are equivalent from React's point of view.
+I due componenti appena visti sono equivalenti dal pundo di vista di React.
 
-Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
+Le Classi hanno funzionalità aggiuntive che verranno discusse in dettaglio nelle [prossime sezioni](/docs/state-and-lifecycle.html). Fino ad allora, ci limiteremo all'uso dei componenti funzione per via della loro concisività.
 
-## Rendering a Component {#rendering-a-component}
+## Renderizzare un Componente {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+In precedenza, abbiamo incontrato elementi React che rappresentano tags DOM:
 
 ```js
-const element = <div />;
+const elemento = <div />;
 ```
 
-However, elements can also represent user-defined components:
+Comunque, gli elementi possono rappresentare anche componenti definiti dall'utente:
 
 ```js
-const element = <Welcome name="Sara" />;
+const elemento = <Ciao nome="Sara" />;
 ```
 
-When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
+Quando React incontra un elemento che rappresenta un componente definito dall'utente, passa gli attributi JSX a questo componente come un singolo oggetto. Tale oggetto prende il nome di "props".
 
-For example, this code renders "Hello, Sara" on the page:
+Ad esempio, il codice seguente renderizza il messaggio "Ciao, Sara" nella pagina:
 
 ```js{1,5}
-function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+function Ciao(props) {
+  return <h1>Ciao, {props.nome}</h1>;
 }
 
-const element = <Welcome name="Sara" />;
+const elemento = <Ciao nome="Sara" />;
 ReactDOM.render(
-  element,
+  elemento,
   document.getElementById('root')
 );
 ```
 
-[](codepen://components-and-props/rendering-a-component)
+[**Prova in CodePen**](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
+Ricapitoliamo cosa succede nell'esempio:
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+1. Richiamiamo `ReactDOM.render()` con l'elemento `<Ciao nome="Sara" />`.
+2. React chiama a sua volta il componente `Ciao` con `{nome: 'Sara'}` passato in input come props.
+3. Il nostro componente `Ciao` ritorna un elemento `<h1>Ciao, Sara</h1>` come risultato.
+4. React DOM aggiorna efficientemente il DOM per far sì che contenga `<h1>Ciao, Sara</h1>`.
 
->**Note:** Always start component names with a capital letter.
+>**Nota Bene:** Ricordati di chiamare i tuoi componenti con la prima lettera in maiuscolo.
 >
->React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
+>React tratta i componenti che iniziano con una lettera minuscola come normali tags DOM. per esempio, `<div />` rappresenta un tag HTML div,  `<Ciao />` rappresenta invece un componente e richiede `Ciao` all'interno dello [scope](https://developer.mozilla.org/en-US/docs/Glossary/Scope).
 >
->To learn more about the reasoning behind this convention, please read [JSX In Depth](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
+>Per saperne di più riguardo questa convenzione, leggi [JSX In Dettaglio](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
 
-## Composing Components {#composing-components}
+## Comporre Componenti {#composing-components}
 
-Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
+I componenti possono far riferimento ad altri componenti nel loro output. Ciò permette di utilizzare la stessa astrazione ad ogni livello di dettaglio. Un bottone, un form, una finestra di dialogo, una schermata: nelle applicazioni React, tutte queste cose di solito sono espresse come componenti.
 
-For example, we can create an `App` component that renders `Welcome` many times:
+Per esempio, possiamo creare un componente `App` che renderizza `Ciao` tante volte:
 
 ```js{8-10}
-function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+function Ciao(props) {
+  return <h1>Ciao, {props.nome}</h1>;
 }
 
 function App() {
   return (
     <div>
-      <Welcome name="Sara" />
-      <Welcome name="Cahal" />
-      <Welcome name="Edite" />
+      <Ciao nome="Sara" />
+      <Ciao nome="Cahal" />
+      <Ciao nome="Edite" />
     </div>
   );
 }
@@ -118,145 +118,145 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/composing-components)
+[**Prova in CodePen**](codepen://components-and-props/composing-components)
 
-Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
+Normalmente, le nuove applicazioni React hanno un singolo componente chiamato `App` al livello più alto che racchiude tutti gli altri componenti. Ad ogni modo, quando si va ad integrare React in una applicazione già esistente, è bene partire dal livello più basso e da piccoli componenti come ad esempio `Bottone` procedendo da lì fino alla cima della gerarchia della vista.
 
-## Extracting Components {#extracting-components}
+## Estrarre Componenti {#extracting-components}
 
-Don't be afraid to split components into smaller components.
+Non aver paura di suddividere i componenti in componenti più piccoli.
 
-For example, consider this `Comment` component:
+Ad esempio, considera questo componente `Commento`:
 
 ```js
-function Comment(props) {
+function Commento(props) {
   return (
-    <div className="Comment">
-      <div className="UserInfo">
+    <div className="Commento">
+      <div className="InfoUtente">
         <img className="Avatar"
-          src={props.author.avatarUrl}
-          alt={props.author.name}
+          src={props.autore.avatarUrl}
+          alt={props.autore.nome}
         />
-        <div className="UserInfo-name">
-          {props.author.name}
+        <div className="InfoUtente-nome">
+          {props.autore.nome}
         </div>
       </div>
-      <div className="Comment-text">
-        {props.text}
+      <div className="Commento-testo">
+        {props.testo}
       </div>
-      <div className="Comment-date">
-        {formatDate(props.date)}
+      <div className="Commento-data">
+        {formatDate(props.data)}
       </div>
     </div>
   );
 }
 ```
 
-[](codepen://components-and-props/extracting-components)
+[**Prova in CodePen**](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+Esso accetta come props: `autore` (un oggetto), `testo` (una stringa) e `data` (sotto forma di oggetto [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)) al fine di renderizzare un commento in un sito di social media, come Facebook.
 
-This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
+Un componente scritto in quel modo, con codice molto annidato, è difficile da modificare. Per lo stesso motivo, non si possono riutilizzare con facilità parti dello stesso. Procediamo quindi ad estrarre qualche componente.
 
-First, we will extract `Avatar`:
+Per cominciare, estraiamo `Avatar`:
 
 ```js{3-6}
 function Avatar(props) {
   return (
     <img className="Avatar"
-      src={props.user.avatarUrl}
-      alt={props.user.name}
+      src={props.utente.avatarUrl}
+      alt={props.utente.nome}
     />
   );
 }
 ```
 
-The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
+`Avatar` non ha bisogno di sapere che viene renderizzato all'interno di un `Commento`. Ecco perchè abbiamo dato alla sua prop un nome più generico: `utente` al posto di `autore`.
 
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
+Consigliamo di dare il nome alle props dal punto di vista del componente piuttosto che dal contesto in cui viene usato.
 
-We can now simplify `Comment` a tiny bit:
+Adesso possiamo semplificare un po' il componente `Commento`:
 
 ```js{5}
-function Comment(props) {
+function Commento(props) {
   return (
-    <div className="Comment">
-      <div className="UserInfo">
-        <Avatar user={props.author} />
-        <div className="UserInfo-name">
-          {props.author.name}
+    <div className="Commento">
+      <div className="InfoUtente">
+        <Avatar utente={props.autore} />
+        <div className="InfoUtente-nome">
+          {props.autore.nome}
         </div>
       </div>
-      <div className="Comment-text">
-        {props.text}
+      <div className="Commento-testo">
+        {props.testo}
       </div>
-      <div className="Comment-date">
-        {formatDate(props.date)}
+      <div className="Commento-data">
+        {formatDate(props.data)}
       </div>
     </div>
   );
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+Andiamo ora ad estrarre il componente `InfoUtente` che renderizza un `Avatar` vicino al nome dell'utente:
 
 ```js{3-8}
-function UserInfo(props) {
+function InfoUtente(props) {
   return (
-    <div className="UserInfo">
-      <Avatar user={props.user} />
-      <div className="UserInfo-name">
-        {props.user.name}
+    <div className="InfoUtente">
+      <Avatar utente={props.utente} />
+      <div className="InfoUtente-nome">
+        {props.utente.nome}
       </div>
     </div>
   );
 }
 ```
 
-This lets us simplify `Comment` even further:
+Ciò ci permette di semplificare `Commento` ancora di più:
 
 ```js{4}
-function Comment(props) {
+function Commento(props) {
   return (
-    <div className="Comment">
-      <UserInfo user={props.author} />
-      <div className="Comment-text">
-        {props.text}
+    <div className="Commento">
+      <InfoUtente utente={props.autore} />
+      <div className="Commento-testo">
+        {props.testo}
       </div>
-      <div className="Comment-date">
-        {formatDate(props.date)}
+      <div className="Commento-data">
+        {formatDate(props.data)}
       </div>
     </div>
   );
 }
 ```
 
-[](codepen://components-and-props/extracting-components-continued)
+[**Prova in CodePen**](codepen://components-and-props/extracting-components-continued)
 
-Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (`Button`, `Panel`, `Avatar`), or is complex enough on its own (`App`, `FeedStory`, `Comment`), it is a good candidate to be a reusable component.
+Estrarre componenti può semprare un'attività pesante ma avere una tavolozza di componenti riutilizzabili ripaga molto bene nelle applicazioni più complesse. Una buona regola da tenere a mente è che se una parte della tua UI viene usata diverse volte (`Bottone`, `Pannello`, `Avatar`) o se è abbastanza complessa di per sé (`App`, `StoriaFeed`, `Commento`), allora questi componenti sono buoni candidati ad essere riutilizzabili.
 
-## Props are Read-Only {#props-are-read-only}
+## Le Props Sono in Sola Lettura {#props-are-read-only}
 
-Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
+Ogni volta che dichiari un componente [come funzione o classe](#function-and-class-components), non deve mai modificare le proprie props. Considera la funzione `somma`:
 
 ```js
-function sum(a, b) {
+function somma(a, b) {
   return a + b;
 }
 ```
 
-Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
+Funzioni di questo tipo vengono chiamate ["pure"](https://en.wikipedia.org/wiki/Pure_function) perché non provano a cambiare i propri dati in input, ritornano sempre lo stesso risultato a partire dagli stessi dati in ingresso.
 
-In contrast, this function is impure because it changes its own input:
+Al contrario, la funzione seguente è impura in quanto altera gli input:
 
 ```js
-function withdraw(account, amount) {
-  account.total -= amount;
+function preleva(conto, ammontare) {
+  conto.totale -= ammontare;
 }
 ```
 
-React is pretty flexible but it has a single strict rule:
+React è abbastanza flessibile ma ha una sola regola molto importante:
 
-**All React components must act like pure functions with respect to their props.**
+**Tutti i componenti React devono comportarsi come funzioni pure rispetto alle proprie props.**
 
-Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
+Ovviamente, le UI delle applicazioni sono dinamiche e cambiano nel tempo. Nella [prossima sezione](/docs/state-and-lifecycle.html), introdurremo il nuovo concetto di "stato". Lo stato permette ai componenti React di modificare il loro output nel tempo in seguito ad azioni dell'utente, risposte dalla rete (API) e qualsiasi altra cosa possa far renderizzare un output diverso di volta in volta, ciò avviene senza violare questa regola molto importante.

content/docs/nav.yml

@@ -18,7 +18,7 @@
     - id: rendering-elements
       title: Renderizzare Elementi
     - id: components-and-props
-      title: Components and Props
+      title: Componenti e Props
     - id: state-and-lifecycle
       title: State and Lifecycle
     - id: handling-events

content/docs/reference-react-component.md

@@ -15,7 +15,7 @@ redirect_from:
   - "tips/use-react-with-other-libraries.html"
 ---
 
-This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Components and Props](/docs/components-and-props.html), as well as [State and Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first.
+This page contains a detailed API reference for the React component class definition. It assumes you're familiar with fundamental React concepts, such as [Componenti e Props](/docs/components-and-props.html), as well as [State and Lifecycle](/docs/state-and-lifecycle.html). If you're not, read them first.
 
 ## Overview {#overview}
 
@@ -627,7 +627,7 @@ The `displayName` string is used in debugging messages. Usually, you don't need
 
 ### `props` {#props}
 
-`this.props` contains the props that were defined by the caller of this component. See [Components and Props](/docs/components-and-props.html) for an introduction to props.
+`this.props` contains the props that were defined by the caller of this component. See [Componenti e Props](/docs/components-and-props.html) for an introduction to props.
 
 In particular, `this.props.children` is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.