+
+
+ {props.testo}
-
- {formatDate(props.date)}
+
+ {formatDate(props.data)}
);
}
```
-[](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.
diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index e10441d06..c724c1d92 100644
--- a/content/docs/nav.yml
+++ b/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
diff --git a/content/docs/reference-react-component.md b/content/docs/reference-react-component.md
index ecb4d087c..eead9fdae 100644
--- a/content/docs/reference-react-component.md
+++ b/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.