Skip to content

Commit afada44

Browse files
deblasisLucaBlackDragon
authored andcommitted
rendering-elements: done (#16)
1 parent 4e7963c commit afada44

File tree

3 files changed

+31
-31
lines changed

3 files changed

+31
-31
lines changed

Diff for: content/docs/nav.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,15 @@
88
title: Create a New React App
99
- id: cdn-links
1010
title: CDN Links
11-
- title: Main Concepts
11+
- title: Concetti Chiave
1212
isOrdered: true
1313
items:
1414
- id: hello-world
1515
title: Hello World
1616
- id: introducing-jsx
1717
title: Introducing JSX
1818
- id: rendering-elements
19-
title: Rendering Elements
19+
title: Renderizzare Elementi
2020
- id: components-and-props
2121
title: Components and Props
2222
- id: state-and-lifecycle

Diff for: content/docs/rendering-elements.md

+28-28
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
11
---
22
id: rendering-elements
3-
title: Rendering Elements
3+
title: Renderizzare Elementi
44
permalink: docs/rendering-elements.html
55
redirect_from:
66
- "docs/displaying-data.html"
77
prev: introducing-jsx.html
88
next: components-and-props.html
99
---
1010

11-
Elements are the smallest building blocks of React apps.
11+
Gli elementi sono i più piccoli tra i vari mattoni costituenti apps scritte in React.
1212

13-
An element describes what you want to see on the screen:
13+
Un elemento descrive cosa vuoi vedere sullo schermo:
1414

1515
```js
1616
const element = <h1>Hello, world</h1>;
1717
```
1818

19-
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
19+
Contrariamente agli elementi [DOM](https://developer.mozilla.org/it/docs/Web/API/Document_Object_Model) del browser, gli elementi React sono oggetti semplici e per questo poco costosi da creare. Il DOM di React tiene cura di aggiornare il DOM del browser per essere consistente con gli elementi React.
2020

21-
>**Note:**
21+
>**Nota bene:**
2222
>
23-
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
23+
>Potresti ritrovarti a confondere gli elementi con un concetto più ampiamente utilizzato: i "componenti". Introdurremo i componenti nella [prossima sezione](/docs/components-and-props.html). Gli elementi sono ciò di cui i componenti "sono fatti", per questo ti consigliamo di proseguire alla lettura di questa sezione prima di proseguire.
2424
25-
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
25+
## Renderizzare un Elemento nel DOM {#rendering-an-element-into-the-dom}
2626

27-
Let's say there is a `<div>` somewhere in your HTML file:
27+
Supponiamo di avere un `<div>` da qualche parte nel tuo file HTML:
2828

2929
```html
3030
<div id="root"></div>
3131
```
3232

33-
We call this a "root" DOM node because everything inside it will be managed by React DOM.
33+
Lo chiameremo nodo DOM "radice" (o root) in quanto ogni cosa al suo interno verrà gestita dal DOM di React.
3434

35-
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
35+
Applicazioni costruite solo con React di solito hanno un solo nodo DOM radice. Se stai integranto Reat all'interno di apps esistenti, potresti avere più elementi DOM radice isolati, dipende dai casi.
3636

37-
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
37+
Per renderizzare un elemento React nel nodo DOM radice, bisogna passare entrambi a `ReactDOM.render()`:
3838

3939
`embed:rendering-elements/render-an-element.js`
4040

41-
[](codepen://rendering-elements/render-an-element)
41+
[Prova in CodePen](codepen://rendering-elements/render-an-element)
4242

43-
It displays "Hello, world" on the page.
43+
Ciò visualizzerà "Hello, world" nella pagina.
4444

45-
## Updating the Rendered Element {#updating-the-rendered-element}
45+
## Aggiornare un Elemento Renderizzato {#updating-the-rendered-element}
4646

47-
React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
47+
Gli elementi React sono [immutabili](https://en.wikipedia.org/wiki/Immutable_object). Una volta creato un elemento, non puoi cambiare i suoi figli o attributi. Un elemento è come un singolo fotogramma di un film: rappresenta la UI (interfaccia utente) ad un certo punto nel tempo.
4848

49-
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
49+
Con la conoscenza che abbiamo fino a questo punto, l'unico modo per aggiornare l'UI è quello di creare un nuovo elemento e di passarlo a `ReactDOM.render()`.
5050

51-
Consider this ticking clock example:
51+
Preniamo in considerazione il prossimo esempio, nel quale abbiamo un orologio:
5252

5353
`embed:rendering-elements/update-rendered-element.js`
5454

55-
[](codepen://rendering-elements/update-rendered-element)
55+
[Prova in CodePen](codepen://rendering-elements/update-rendered-element)
5656

57-
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
57+
La funzione `ReactDOM.render()` viene richiamata ogni secondo dalla [callback](https://it.wikipedia.org/wiki/Callback) passata a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval).
5858

59-
>**Note:**
59+
>**Nota bene:**
6060
>
61-
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
61+
>In pratica, la maggioranza delle apps React chiamano `ReactDOM.render()` solo una volta. Nelle sezioni successive imparerai come questo codice possa essere incapsulato in [componenti aventi stato / componenti stateful](/docs/state-and-lifecycle.html).
6262
>
63-
>We recommend that you don't skip topics because they build on each other.
63+
>Ti raccomandiamo di non saltare questi argomenti man mano che li incontriamo in quanto essi si basano l'uno sull'altro.
6464
65-
## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
65+
## React Aggiorna Solo Quanto Necessario {#react-only-updates-whats-necessary}
6666

67-
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
67+
Il DOM di React confronta l'elemento ed i suoi figli con il precedente, applicando solo gli aggiornamenti al DOM del browser necessari a renderlo consistente con lo stato desiderato.
6868

69-
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
69+
Puoi verificare questo fatto ispezionando [l'ultimo esempio](codepen://rendering-elements/update-rendered-element) usando i developer tools:
7070

71-
![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
71+
![Ispezionando l'elemento DOM si vedono aggiornamenti granulari](../images/docs/granular-dom-updates.gif)
7272

73-
Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
73+
Anche se abbiamo creato un elemento che descrive l'intero albero della UI ad ogni tick (ogni qual volta la callback viene richiamata, nell'esempio, ogni secondo), solo il nodo testo il quale contenuto è stato modificato viene aggiornato dal DOM di React.
7474

75-
In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
75+
Nella nostra esperienza, pensare a come la UI deve essere rappresentata in ogni momento piuttosto che pensare a come alterarla nel tempo elimina una intera classe di bugs.

Diff for: content/docs/state-and-lifecycle.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ next: handling-events.html
1010

1111
This page introduces the concept of state and lifecycle in a React component. You can find a [detailed component API reference here](/docs/react-component.html).
1212

13-
Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Rendering Elements](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
13+
Consider the ticking clock example from [one of the previous sections](/docs/rendering-elements.html#updating-the-rendered-element). In [Renderizzare Elementi](/docs/rendering-elements.html#rendering-an-element-into-the-dom), we have only learned one way to update the UI. We call `ReactDOM.render()` to change the rendered output:
1414

1515
```js{8-11}
1616
function tick() {

0 commit comments

Comments
 (0)