You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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).
19
+
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).
20
20
21
-
Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
21
+
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.
22
22
23
-
## Function and Class Components {#function-and-class-components}
23
+
## Funzioni e Classi Componente {#function-and-class-components}
24
24
25
-
The simplest way to define a component is to write a JavaScript function:
25
+
Il modo più semplice di definire un componente è quello di scrivere una funzione JavaScript:
26
26
27
27
```js
28
-
functionWelcome(props) {
29
-
return<h1>Hello, {props.name}</h1>;
28
+
functionCiao(props) {
29
+
return<h1>Ciao, {props.nome}</h1>;
30
30
}
31
31
```
32
32
33
-
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.
33
+
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.
34
34
35
-
You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes)to define a component:
35
+
Puoi anche usare una [classe ES6](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Classes)per definire un componente:
36
36
37
37
```js
38
-
classWelcomeextendsReact.Component {
38
+
classCiaoextendsReact.Component {
39
39
render() {
40
-
return<h1>Hello, {this.props.name}</h1>;
40
+
return<h1>Ciao, {this.props.nome}</h1>;
41
41
}
42
42
}
43
43
```
44
44
45
-
The above two components are equivalent from React's point of view.
45
+
I due componenti appena visti sono equivalenti dal pundo di vista di React.
46
46
47
-
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.
47
+
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à.
48
48
49
-
## Rendering a Component {#rendering-a-component}
49
+
## Renderizzare un Componente {#rendering-a-component}
50
50
51
-
Previously, we only encountered React elements that represent DOM tags:
51
+
In precedenza, abbiamo incontrato elementi React che rappresentano tags DOM:
52
52
53
53
```js
54
-
constelement=<div />;
54
+
constelemento=<div />;
55
55
```
56
56
57
-
However, elements can also represent user-defined components:
57
+
Comunque, gli elementi possono rappresentare anche componenti definiti dall'utente:
58
58
59
59
```js
60
-
constelement=<Welcome name="Sara"/>;
60
+
constelemento=<Ciao nome="Sara"/>;
61
61
```
62
62
63
-
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".
63
+
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".
64
64
65
-
For example, this code renders "Hello, Sara" on the page:
65
+
Ad esempio, il codice seguente renderizza il messaggio "Ciao, Sara" nella pagina:
2. React chiama a sua volta il componente `Ciao` con `{nome: 'Sara'}`passato in input come props.
85
+
3.Il nostro componente `Ciao` ritorna un elemento`<h1>Ciao, Sara</h1>`come risultato.
86
+
4. React DOM aggiorna efficientemente il DOM per far sì che contenga `<h1>Ciao, Sara</h1>`.
87
87
88
-
>**Note:**Always start component names with a capital letter.
88
+
>**Nota Bene:**Ricordati di chiamare i tuoi componenti con la prima lettera in maiuscolo.
89
89
>
90
-
>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.
90
+
>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).
91
91
>
92
-
>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).
92
+
>Per saperne di più riguardo questa convenzione, leggi [JSX In Dettaglio](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
93
93
94
-
## Composing Components {#composing-components}
94
+
## Comporre Componenti {#composing-components}
95
95
96
-
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.
96
+
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.
97
97
98
-
For example, we can create an`App`component that renders `Welcome` many times:
98
+
Per esempio, possiamo creare un componente`App`che renderizza `Ciao` tante volte:
[**Prova in CodePen**](codepen://components-and-props/composing-components)
122
122
123
-
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.
123
+
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.
124
124
125
-
## Extracting Components {#extracting-components}
125
+
## Estrarre Componenti {#extracting-components}
126
126
127
-
Don't be afraid to split components into smaller components.
127
+
Non aver paura di suddividere i componenti in componenti più piccoli.
128
128
129
-
For example, consider this `Comment` component:
129
+
Ad esempio, considera questo componente `Commento`:
[**Prova in CodePen**](codepen://components-and-props/extracting-components)
156
156
157
-
It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
157
+
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.
158
158
159
-
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.
159
+
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.
160
160
161
-
First, we will extract`Avatar`:
161
+
Per cominciare, estraiamo`Avatar`:
162
162
163
163
```js{3-6}
164
164
function Avatar(props) {
165
165
return (
166
166
<img className="Avatar"
167
-
src={props.user.avatarUrl}
168
-
alt={props.user.name}
167
+
src={props.utente.avatarUrl}
168
+
alt={props.utente.nome}
169
169
/>
170
170
);
171
171
}
172
172
```
173
173
174
-
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`.
174
+
`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`.
175
175
176
-
We recommend naming props from the component's own point of view rather than the context in which it is being used.
176
+
Consigliamo di dare il nome alle props dal punto di vista del componente piuttosto che dal contesto in cui viene usato.
177
177
178
-
We can now simplify `Comment` a tiny bit:
178
+
Adesso possiamo semplificare un po' il componente `Commento`:
179
179
180
180
```js{5}
181
-
function Comment(props) {
181
+
function Commento(props) {
182
182
return (
183
-
<div className="Comment">
184
-
<div className="UserInfo">
185
-
<Avatar user={props.author} />
186
-
<div className="UserInfo-name">
187
-
{props.author.name}
183
+
<div className="Commento">
184
+
<div className="InfoUtente">
185
+
<Avatar utente={props.autore} />
186
+
<div className="InfoUtente-nome">
187
+
{props.autore.nome}
188
188
</div>
189
189
</div>
190
-
<div className="Comment-text">
191
-
{props.text}
190
+
<div className="Commento-testo">
191
+
{props.testo}
192
192
</div>
193
-
<div className="Comment-date">
194
-
{formatDate(props.date)}
193
+
<div className="Commento-data">
194
+
{formatDate(props.data)}
195
195
</div>
196
196
</div>
197
197
);
198
198
}
199
199
```
200
200
201
-
Next, we will extract a `UserInfo` component that renders an `Avatar`next to the user's name:
201
+
Andiamo ora ad estrarre il componente `InfoUtente` che renderizza un `Avatar`vicino al nome dell'utente:
202
202
203
203
```js{3-8}
204
-
function UserInfo(props) {
204
+
function InfoUtente(props) {
205
205
return (
206
-
<div className="UserInfo">
207
-
<Avatar user={props.user} />
208
-
<div className="UserInfo-name">
209
-
{props.user.name}
206
+
<div className="InfoUtente">
207
+
<Avatar utente={props.utente} />
208
+
<div className="InfoUtente-nome">
209
+
{props.utente.nome}
210
210
</div>
211
211
</div>
212
212
);
213
213
}
214
214
```
215
215
216
-
This lets us simplify `Comment` even further:
216
+
Ciò ci permette di semplificare `Commento` ancora di più:
[**Prova in CodePen**](codepen://components-and-props/extracting-components-continued)
235
235
236
-
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.
236
+
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.
237
237
238
-
## Props are Read-Only {#props-are-read-only}
238
+
## Le Props Sono in Sola Lettura {#props-are-read-only}
239
239
240
-
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:
240
+
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`:
241
241
242
242
```js
243
-
functionsum(a, b) {
243
+
functionsomma(a, b) {
244
244
return a + b;
245
245
}
246
246
```
247
247
248
-
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.
248
+
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.
249
249
250
-
In contrast, this function is impure because it changes its own input:
250
+
Al contrario, la funzione seguente è impura in quanto altera gli input:
251
251
252
252
```js
253
-
functionwithdraw(account, amount) {
254
-
account.total-=amount;
253
+
functionpreleva(conto, ammontare) {
254
+
conto.totale-=ammontare;
255
255
}
256
256
```
257
257
258
-
React is pretty flexible but it has a single strict rule:
258
+
React è abbastanza flessibile ma ha una sola regola molto importante:
259
259
260
-
**All React components must act like pure functions with respect to their props.**
260
+
**Tutti i componenti React devono comportarsi come funzioni pure rispetto alle proprie props.**
261
261
262
-
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.
262
+
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.
Copy file name to clipboardExpand all lines: content/docs/reference-react-component.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ redirect_from:
15
15
- "tips/use-react-with-other-libraries.html"
16
16
---
17
17
18
-
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.
18
+
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.
19
19
20
20
## Overview {#overview}
21
21
@@ -627,7 +627,7 @@ The `displayName` string is used in debugging messages. Usually, you don't need
627
627
628
628
### `props` {#props}
629
629
630
-
`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.
630
+
`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.
631
631
632
632
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.
0 commit comments