chore(i18n,curriculum): update translations (#42659)
This commit is contained in:
camperbot
GitHub
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403618a
|
||||
title: Use Array.map() to Dynamically Render Elements
|
||||
title: Usare Array.map() per presentare dinamicamente gli elementi
|
||||
challengeType: 6
|
||||
forumTopicId: 301417
|
||||
dashedName: use-array-map-to-dynamically-render-elements
|
||||
@@ -8,21 +8,21 @@ dashedName: use-array-map-to-dynamically-render-elements
|
||||
|
||||
# --description--
|
||||
|
||||
Conditional rendering is useful, but you may need your components to render an unknown number of elements. Often in reactive programming, a programmer has no way to know what the state of an application is until runtime, because so much depends on a user's interaction with that program. Programmers need to write their code to correctly handle that unknown state ahead of time. Using `Array.map()` in React illustrates this concept.
|
||||
Il rendering condizionale è utile, ma potresti aver bisogno che i tuoi componenti presentino un numero sconosciuto di elementi. Spesso nella programmazione reattiva, un programmatore non ha modo di sapere qual è lo stato di un'applicazione fino al runtime, perché molto dipende dall'interazione di un utente con quel programma. I programmatori devono quindi scrivere il loro codice per gestire correttamente quello stato sconosciuto prima di conoscerlo. L'uso di `Array.map()` in React illustra questo concetto.
|
||||
|
||||
For example, you create a simple "To Do List" app. As the programmer, you have no way of knowing how many items a user might have on their list. You need to set up your component to dynamically render the correct number of list elements long before someone using the program decides that today is laundry day.
|
||||
Creiamo ad esempio una semplice app "To Do List". Come programmatore, non hai modo di sapere quanti elementi un utente potrebbe avere nella sua lista. È necessario impostare il componente per presentare dinamicamente il numero corretto di elementi della lista molto prima che qualcuno che utilizza il programma decida che oggi è giorno di bucato.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor has most of the `MyToDoList` component set up. Some of this code should look familiar if you completed the controlled form challenge. You'll notice a `textarea` and a `button`, along with a couple of methods that track their states, but nothing is rendered to the page yet.
|
||||
Nell'editor di codice troverai il componente `MyToDoList` quasi completamente configurato. Alcune parti di questo codice dovrebbero esserti familiari se hai completato la sfida del modulo controllato. Noterai una `textarea` e un `button`, insieme a un paio di metodi che tracciano i loro stati, ma per il momento niente è ancora presentato nella pagina.
|
||||
|
||||
Inside the `constructor`, create a `this.state` object and define two states: `userInput` should be initialized as an empty string, and `toDoList` should be initialized as an empty array. Next, delete the comment in the `render()` method next to the `items` variable. In its place, map over the `toDoList` array stored in the component's internal state and dynamically render a `li` for each item. Try entering the string `eat, code, sleep, repeat` into the `textarea`, then click the button and see what happens.
|
||||
All'interno del `constructor`, crea un oggetto `this.state` e definisci due stati: `userInput` dovrebbe essere inizializzato con una stringa vuota, e `toDoList` dovrebbe essere inizializzato con un array vuoto. Successivamente, elimina il commento nel metodo `render()` accanto alla variabile `items`. Al suo posto, mappa l'array `toDoList` memorizzato nello stato interno del componente e presenta dinamicamente un `li` per ogni elemento. Prova ad inserire la stringa `eat, code, sleep, repeat` nella `textarea`, quindi fai clic sul bottone per vedere cosa succede.
|
||||
|
||||
**Note:** You may know that all sibling child elements created by a mapping operation like this do need to be supplied with a unique `key` attribute. Don't worry, this is the topic of the next challenge.
|
||||
**Nota:** Forse sai già che tutti gli elementi figli (e fratelli tra loro) creati da un'operazione di mappatura come questa devono essere forniti con un attributo `key` univoco. Non ti preoccupare, questo è il tema della prossima sfida.
|
||||
|
||||
# --hints--
|
||||
|
||||
The MyToDoList component should exist and render to the page.
|
||||
Il componente MyToDoList dovrebbe esistere ed essere presentato nella pagina.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The first child of `MyToDoList` should be a `textarea` element.
|
||||
Il primo figlio di `MyToDoList` dovrebbe essere un elemento `textarea`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -47,7 +47,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The second child of `MyToDoList` should be a `br` element.
|
||||
Il secondo figlio di `MyToDoList` dovrebbe essere un elemento `br`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -60,7 +60,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The third child of `MyToDoList` should be a `button` element.
|
||||
Il terzo figlio di `MyToDoList` dovrebbe essere un elemento `button`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -74,7 +74,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyToDoList` should be initialized with `toDoList` as an empty array.
|
||||
Lo stato di `MyToDoList` dovrebbe essere inizializzato con `toDoList` come un array vuoto.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -89,7 +89,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyToDoList` should be initialized with `userInput` as an empty string.
|
||||
Lo stato di `MyToDoList` dovrebbe essere inizializzato con `userInput` come una stringa vuota.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
When the `Create List` button is clicked, the `MyToDoList` component should dynamically return an unordered list that contains a list item element for every item of a comma-separated list entered into the `textarea` element.
|
||||
Quando viene cliccato il bottone `Create List`, il componente `MyToDoList` dovrebbe restituire dinamicamente una lista non ordinata che contiene un li (list item) per ogni elemento di una lista separata da virgole inserito nell'elemento `textarea`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616b
|
||||
title: Use Default Props
|
||||
title: Usare le proprietà predefinite
|
||||
challengeType: 6
|
||||
forumTopicId: 301418
|
||||
dashedName: use-default-props
|
||||
@@ -8,15 +8,15 @@ dashedName: use-default-props
|
||||
|
||||
# --description--
|
||||
|
||||
React also has an option to set default props. You can assign default props to a component as a property on the component itself and React assigns the default prop if necessary. This allows you to specify what a prop value should be if no value is explicitly provided. For example, if you declare `MyComponent.defaultProps = { location: 'San Francisco' }`, you have defined a location prop that's set to the string `San Francisco`, unless you specify otherwise. React assigns default props if props are undefined, but if you pass `null` as the value for a prop, it will remain `null`.
|
||||
React ha anche un'opzione per impostare props predefinite. È possibile assegnare props predefinite a un componente come una proprietà del componente stesso, in modo che React le assegni quando necessario. Questo ti permette di specificare quale valore dovrebbe avere una prop se nessun valore è esplicitamente fornito. Ad esempio, se dichiari `MyComponent.defaultProps = { location: 'San Francisco' }`, hai definito una prop location impostata sulla stringa `San Francisco`, a meno che non specifichi diversamente. React assegna le prop di default se non sono definite, ma se passi `null` come valore per una prop, essa rimarrà pari a `null`.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The code editor shows a `ShoppingCart` component. Define default props on this component which specify a prop `items` with a value of `0`.
|
||||
L'editor di codice mostra un componente `ShoppingCart`. Definisci gli elementi predefiniti su questo componente in modo che specifichino una prop `items` con un valore di `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ShoppingCart` component should render.
|
||||
Il componente `ShoppingCart` dovrebbe essere presentato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -27,7 +27,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `ShoppingCart` component should have a default prop of `{ items: 0 }`.
|
||||
Il componente `ShoppingCart` dovrebbe avere una prop predefinita di `{ items: 0 }`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403616d
|
||||
title: Use PropTypes to Define the Props You Expect
|
||||
title: Usare i PropTypes per definire le Prop attese
|
||||
challengeType: 6
|
||||
forumTopicId: 301419
|
||||
dashedName: use-proptypes-to-define-the-props-you-expect
|
||||
@@ -8,25 +8,25 @@ dashedName: use-proptypes-to-define-the-props-you-expect
|
||||
|
||||
# --description--
|
||||
|
||||
React provides useful type-checking features to verify that components receive props of the correct type. For example, your application makes an API call to retrieve data that you expect to be in an array, which is then passed to a component as a prop. You can set `propTypes` on your component to require the data to be of type `array`. This will throw a useful warning when the data is of any other type.
|
||||
React fornisce utili funzioni di verifica del tipo per verificare che i componenti ricevano proprietà del tipo corretto. Ad esempio, la tua applicazione effettua una chiamata API per recuperare dei dati che ti aspetti essere in un array, che viene poi passato a un componente come proprietà. Puoi impostare `propTypes` sul tuo componente per richiedere che i dati siano di tipo `array`. Questo generà un avviso utile quando i dati saranno di qualsiasi altro tipo.
|
||||
|
||||
It's considered a best practice to set `propTypes` when you know the type of a prop ahead of time. You can define a `propTypes` property for a component in the same way you defined `defaultProps`. Doing this will check that props of a given key are present with a given type. Here's an example to require the type `function` for a prop called `handleClick`:
|
||||
È considerata una buona pratica impostare `propTypes` quando si conosce il tipo di una prop in anticipo. Puoi definire una proprietà `propTypes` per un componente nello stesso modo in cui hai definito `defaultProps`. In questo modo si verificherà che la prop con una data chiave sia presenti con un dato tipo. Ecco un esempio per richiedere il tipo `function` per una prop chiamata `handleClick`:
|
||||
|
||||
```js
|
||||
MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
|
||||
```
|
||||
|
||||
In the example above, the `PropTypes.func` part checks that `handleClick` is a function. Adding `isRequired` tells React that `handleClick` is a required property for that component. You will see a warning if that prop isn't provided. Also notice that `func` represents `function`. Among the seven JavaScript primitive types, `function` and `boolean` (written as `bool`) are the only two that use unusual spelling. In addition to the primitive types, there are other types available. For example, you can check that a prop is a React element. Please refer to the [documentation](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) for all of the options.
|
||||
Nell'esempio sopra, la parte `PropTypes.func` controlla che `handleClick` sia una funzione. Aggiungendo `isRequired` si dice a React che `handleClick` è una proprietà richiesta per quel componente. Se quella prop non è fornita vedrai un avviso. Nota anche che `func` rappresenta `function`. Tra i sette tipi primitivi JavaScript, `function` e `boolean` (scritto come `bool`) sono gli unici che usano un'ortografia insolita. Oltre ai tipi primitivi, ci sono altri tipi disponibili. Ad esempio, puoi controllare che una prop sia un elemento React. Fai riferimento alla [documentazione](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) per tutte le opzioni.
|
||||
|
||||
**Note:** As of React v15.5.0, `PropTypes` is imported independently from React, like this: `import PropTypes from 'prop-types';`
|
||||
**Nota:** A partire da React v15.5.0, `PropTypes` viene importato indipendentemente da React, in questo modo: `import PropTypes from 'prop-types';`
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define `propTypes` for the `Items` component to require `quantity` as a prop and verify that it is of type `number`.
|
||||
Definisci `propTypes` in modo che il componente `Items` richieda `quantity` come prop e verifica che sia di tipo `number`.
|
||||
|
||||
# --hints--
|
||||
|
||||
The `ShoppingCart` component should render.
|
||||
Il componente `ShoppingCart` dovrebbe essere presentato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -37,7 +37,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Items` component should render.
|
||||
Il componente `Items` dovrebbe essere presentato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -48,7 +48,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Items` component should include a `propTypes` check to require a value for `quantity` and ensure that its value is a number.
|
||||
Il componente `Items` dovrebbe includere un controllo di `propTypes` per richiedere un valore per `quantity` e assicurarsi che il suo valore sia un numero.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036165
|
||||
title: Use React to Render Nested Components
|
||||
title: Usare React per presentare i componenti annidati
|
||||
challengeType: 6
|
||||
forumTopicId: 301420
|
||||
dashedName: use-react-to-render-nested-components
|
||||
@@ -8,23 +8,23 @@ dashedName: use-react-to-render-nested-components
|
||||
|
||||
# --description--
|
||||
|
||||
The last challenge showed a simple way to compose two components, but there are many different ways you can compose components with React.
|
||||
L'ultima sfida ha mostrato un modo semplice per comporre due componenti, ma ci sono molti modi diversi per comporre componenti con React.
|
||||
|
||||
Component composition is one of React's powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in the last challenge. You break down your UI into its basic building blocks, and those pieces become the components. This helps to separate the code responsible for the UI from the code responsible for handling your application logic. It can greatly simplify the development and maintenance of complex projects.
|
||||
La composizione dei componenti è una delle potenti caratteristiche di React. Quando si lavora con React, è importante iniziare a pensare alla tua interfaccia utente in termini di componenti come abbiamo visto nell'App di esempio dell'ultima sfida. Scomponi la tua interfaccia utente nei suoi blocchi di base e quei pezzi diventeranno i componenti. Questo aiuta a separare il codice responsabile dell'interfaccia utente dal codice responsabile della gestione della logica dell'applicazione. Questo può semplificare notevolmente lo sviluppo e il mantenimento di progetti complessi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There are two functional components defined in the code editor, called `TypesOfFruit` and `Fruits`. Take the `TypesOfFruit` component and compose it, or *nest* it, within the `Fruits` component. Then take the `Fruits` component and nest it within the `TypesOfFood` component. The result should be a child component, nested within a parent component, which is nested within a parent component of its own!
|
||||
Ci sono due componenti funzionali definiti nell'editor di codice, chiamati `TypesOfFruit` e `Fruits`. Prendi il componente `TypesOfFruit` e componilo o *annidalo* all'interno del componente `Fruits`. Quindi prendi il componente `Fruits` e annidalo all'interno del componente `TypesOfFood`. Il risultato dovrebbe essere un componente figlio, annidato all'interno di un componente genitore, che è annidato all'interno di un componente genitore proprio!
|
||||
|
||||
# --hints--
|
||||
|
||||
The `TypesOfFood` component should return a single `div` element.
|
||||
Il componente `TypesOfFood` dovrebbe restituire un singolo elemento `div`.
|
||||
|
||||
```js
|
||||
assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
|
||||
```
|
||||
|
||||
The `TypesOfFood` component should return the `Fruits` component.
|
||||
Il componente `TypesOfFood` dovrebbe restituire il componente `Fruits`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,7 +33,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `Fruits` component should return the `TypesOfFruit` component.
|
||||
Il componente `Fruits` dovrebbe restituire il componente `TypesOfFruit`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -42,7 +42,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `TypesOfFruit` component should return the `h2` and `ul` elements.
|
||||
Il componente `TypesOfFruit` dovrebbe restituire gli elementi `h2` e `ul`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036176
|
||||
title: Use State to Toggle an Element
|
||||
title: Usare lo stato per attivare e disattivare un elemento
|
||||
challengeType: 6
|
||||
forumTopicId: 301421
|
||||
dashedName: use-state-to-toggle-an-element
|
||||
@@ -8,7 +8,7 @@ dashedName: use-state-to-toggle-an-element
|
||||
|
||||
# --description--
|
||||
|
||||
Sometimes you might need to know the previous state when updating the state. However, state updates may be asynchronous - this means React may batch multiple `setState()` calls into a single update. This means you can't rely on the previous value of `this.state` or `this.props` when calculating the next value. So, you should not use code like this:
|
||||
A volte potrebbe essere necessario conoscere lo stato precedente quando si aggiorna lo stato. Tuttavia, gli aggiornamenti dello stato possono essere asincroni - questo significa che React può raggruppare più chiamate `setState()` in un singolo aggiornamento. Questo significa che non puoi fare affidamento sul valore precedente di `this.state` o di `this.props` quando calcoli il valore successivo. Quindi, non si dovrebbe utilizzare il codice in questo modo:
|
||||
|
||||
```jsx
|
||||
this.setState({
|
||||
@@ -16,7 +16,7 @@ this.setState({
|
||||
});
|
||||
```
|
||||
|
||||
Instead, you should pass `setState` a function that allows you to access state and props. Using a function with `setState` guarantees you are working with the most current values of state and props. This means that the above should be rewritten as:
|
||||
Invece, dovresti passare a `setState` una funzione che ti permetta di accedere a stato e props. L'utilizzo di una funzione con `setState` garantisce che si sta lavorando con i valori più aggiornati di stato e props. Questo significa che quanto sopra dovrebbe essere riscritto come:
|
||||
|
||||
```jsx
|
||||
this.setState((state, props) => ({
|
||||
@@ -24,7 +24,7 @@ this.setState((state, props) => ({
|
||||
}));
|
||||
```
|
||||
|
||||
You can also use a form without `props` if you need only the `state`:
|
||||
Puoi anche usare una forma senza `props` se hai bisogno solo dello `state`:
|
||||
|
||||
```jsx
|
||||
this.setState(state => ({
|
||||
@@ -32,21 +32,21 @@ this.setState(state => ({
|
||||
}));
|
||||
```
|
||||
|
||||
Note that you have to wrap the object literal in parentheses, otherwise JavaScript thinks it's a block of code.
|
||||
Nota che devi avvolgere l'oggetto letterale tra parentesi, altrimenti JavaScript pensa che sia un blocco di codice.
|
||||
|
||||
# --instructions--
|
||||
|
||||
`MyComponent` has a `visibility` property which is initialized to `false`. The render method returns one view if the value of `visibility` is true, and a different view if it is false.
|
||||
`MyComponent` ha una proprietà `visibility` che viene inizializzata a `false`. Il metodo render restituisce una vista se il valore di `visibility` è true, e una vista diversa se è false.
|
||||
|
||||
Currently, there is no way of updating the `visibility` property in the component's `state`. The value should toggle back and forth between true and false. There is a click handler on the button which triggers a class method called `toggleVisibility()`. Pass a function to `setState` to define this method so that the `state` of `visibility` toggles to the opposite value when the method is called. If `visibility` is `false`, the method sets it to `true`, and vice versa.
|
||||
Attualmente, non c'è modo di aggiornare la proprietà `visibility` nello `state` del componente. Il valore dovrebbe commutare avanti e indietro tra vero e falso. C'è un gestore di click sul bottone che attiva un metodo di classe chiamato `toggleVisibility()`. Passa una funzione a `setState` per definire questo metodo in modo che lo `state` di `visibility` commuti al valore opposto quando viene chiamato il metodo. Se `visibility` è `false`, il metodo lo imposta a `true`, e viceversa.
|
||||
|
||||
Finally, click the button to see the conditional rendering of the component based on its `state`.
|
||||
Infine, fai click sul pulsante per vedere il rendering condizionale del componente in base al suo `state`.
|
||||
|
||||
**Hint:** Don't forget to bind the `this` keyword to the method in the `constructor`!
|
||||
**Suggerimento:** Non dimenticare di associare la parola chiave `this` al metodo nel `constructor`!
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should return a `div` element which contains a `button`.
|
||||
`MyComponent` dovrebbe restituire un elemento `div` che contiene un `button`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -56,7 +56,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `MyComponent` should initialize with a `visibility` property set to `false`.
|
||||
Lo stato di `MyComponent` dovrebbe essere inizializzato con una proprietà `visibility` impostata su `false`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(
|
||||
@@ -65,7 +65,7 @@ assert.strictEqual(
|
||||
);
|
||||
```
|
||||
|
||||
Clicking the button element should toggle the `visibility` property in state between `true` and `false`.
|
||||
Cliccando sul bottone si dovrebbe commutare la proprietà `visibility` nello stato, tra i due valori `true` e `false`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
@@ -89,7 +89,7 @@ Clicking the button element should toggle the `visibility` property in state bet
|
||||
})();
|
||||
```
|
||||
|
||||
An anonymous function should be passed to `setState`.
|
||||
Una funzione anonima dovrebbe essere passata a `setState`.
|
||||
|
||||
```js
|
||||
const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?';
|
||||
@@ -104,7 +104,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`this` should not be used inside `setState`
|
||||
`this` non dovrebbe essere usato all'interno di `setState`
|
||||
|
||||
```js
|
||||
assert(!/this\.setState\([^}]*this/.test(code));
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617d
|
||||
title: Use the Lifecycle Method componentDidMount
|
||||
title: Usare il metodo del ciclo di vita componentDidMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301422
|
||||
dashedName: use-the-lifecycle-method-componentdidmount
|
||||
@@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentdidmount
|
||||
|
||||
# --description--
|
||||
|
||||
Most web developers, at some point, need to call an API endpoint to retrieve data. If you're working with React, it's important to know where to perform this action.
|
||||
La maggior parte degli sviluppatori web, a un certo punto, deve chiamare un'API endpoint per recuperare i dati. Se stai lavorando con React, è importante sapere dove eseguire questa azione.
|
||||
|
||||
The best practice with React is to place API calls or any calls to your server in the lifecycle method `componentDidMount()`. This method is called after a component is mounted to the DOM. Any calls to `setState()` here will trigger a re-rendering of your component. When you call an API in this method, and set your state with the data that the API returns, it will automatically trigger an update once you receive the data.
|
||||
La migliore pratica con React è quella di effettuare chiamate API o qualsiasi chiamata al server nel metodo del ciclo di vita `componentDidMount()`. Questo metodo viene chiamato dopo che un componente è stato montato nel DOM. Qualsiasi chiamata a `setState()` qui attiverà un re-rendering del tuo componente. Quando chiami un'API in questo metodo, e imposti il tuo stato con i dati che l'API restituisce, si attiverà automaticamente un aggiornamento una volta che i dati saranno ricevuti.
|
||||
|
||||
# --instructions--
|
||||
|
||||
There is a mock API call in `componentDidMount()`. It sets state after 2.5 seconds to simulate calling a server to retrieve data. This example requests the current total active users for a site. In the render method, render the value of `activeUsers` in the `h1` after the text `Active Users:`. Watch what happens in the preview, and feel free to change the timeout to see the different effects.
|
||||
C'è una chiamata API finta in `componentDidMount()`. Essa imposta lo stato dopo 2.5 secondi per simulare la chiamata a un server per recuperare i dati. Questo esempio richiede il numero di utenti attivi per un sito. Nel metodo render, presenta il valore di `activeUsers` nell'`h1` dopo il testo `Active Users:`. Guarda cosa succede nell'anteprima e sentiti libero di cambiare il timeout per vedere i diversi effetti.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element which wraps an `h1` tag.
|
||||
`MyComponent` dovrebbe mostrare un elemento `div` che contiene un tag `h1`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -32,7 +32,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
Component state should be updated with a timeout function in `componentDidMount`.
|
||||
Lo stato del componente dovrebbe essere aggiornato con una funzione timeout in `componentDidMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -45,7 +45,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The `h1` tag should render the `activeUsers` value from `MyComponent`'s state.
|
||||
Il tag `h1` dovrebbe presentare il valore `activeUsers` dallo stato di `MyComponent`.
|
||||
|
||||
```js
|
||||
(() => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d403617c
|
||||
title: Use the Lifecycle Method componentWillMount
|
||||
title: Usare il metodo del ciclo di vita componentWillMount
|
||||
challengeType: 6
|
||||
forumTopicId: 301423
|
||||
dashedName: use-the-lifecycle-method-componentwillmount
|
||||
@@ -8,17 +8,17 @@ dashedName: use-the-lifecycle-method-componentwillmount
|
||||
|
||||
# --description--
|
||||
|
||||
React components have several special methods that provide opportunities to perform actions at specific points in the lifecycle of a component. These are called lifecycle methods, or lifecycle hooks, and allow you to catch components at certain points in time. This can be before they are rendered, before they update, before they receive props, before they unmount, and so on. Here is a list of some of the main lifecycle methods: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` The next several lessons will cover some of the basic use cases for these lifecycle methods.
|
||||
I componenti React hanno diversi metodi speciali che offrono l'opportunità di eseguire azioni in punti specifici del ciclo di vita di un componente. Questi sono chiamati metodi del ciclo di vita, o hooks (ganci) del ciclo di vita, e consentono di intercettare i componenti in determinati istanti. Ad esempio prima che sia fatto il render del componente, prima di aggiornarlo, prima di ricevere le prop, prima di smontarlo, e così via. Ecco un elenco di alcuni dei principali metodi del ciclo di vita: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` Le prossime lezioni copriranno alcuni dei casi di base per questi metodi del ciclo di vita.
|
||||
|
||||
**Note:** The `componentWillMount` Lifecycle method will be deprecated in a future version of 16.X and removed in version 17. [(Source)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
**Nota:** Il metodo del ciclo di vita `componentWillMount` sarà deprecato in una versione futura di 16.X e rimosso nella versione 17. [(Fonte)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `componentWillMount()` method is called before the `render()` method when a component is being mounted to the DOM. Log something to the console within `componentWillMount()` - you may want to have your browser console open to see the output.
|
||||
Il metodo `componentWillMount()` viene chiamato prima del metodo `render()` quando un componente viene montato sul DOM. Scrivi qualcosa nella console all'interno di `componentWillMount()` - potresti aprire la console del browser per vedere l'output.
|
||||
|
||||
# --hints--
|
||||
|
||||
`MyComponent` should render a `div` element.
|
||||
`MyComponent` dovrebbe presentare un elemento `div`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -29,7 +29,7 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`console.log` should be called in `componentWillMount`.
|
||||
`console.log` dovrebbe essere chiamato in `componentWillMount`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036168
|
||||
title: Write a React Component from Scratch
|
||||
title: Scrivere un componente React da zero
|
||||
challengeType: 6
|
||||
forumTopicId: 301424
|
||||
dashedName: write-a-react-component-from-scratch
|
||||
@@ -8,17 +8,17 @@ dashedName: write-a-react-component-from-scratch
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you've learned the basics of JSX and React components, it's time to write a component on your own. React components are the core building blocks of React applications so it's important to become very familiar with writing them. Remember, a typical React component is an ES6 `class` which extends `React.Component`. It has a render method that returns HTML (from JSX) or `null`. This is the basic form of a React component. Once you understand this well, you will be prepared to start building more complex React projects.
|
||||
Ora che hai imparato le basi dei componenti JSX e React, è il momento di scrivere un componente da solo. I componenti di React sono gli elementi fondamentali delle applicazioni React quindi è importante acquisire familiarità con la loro scrittura. Ricorda, un componente React tipico è una `class` ES6 che estende `React.Component`. Essa ha un metodo render che restituisce HTML (da JSX) o `null`. Questa è la forma di base di una componente React. Una volta che avrai capito bene questo, sarai pronto a iniziare a costruire progetti React più complessi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
Define a class `MyComponent` that extends `React.Component`. Its render method should return a `div` that contains an `h1` tag with the text: `My First React Component!` in it. Use this text exactly, the case and punctuation matter. Make sure to call the constructor for your component, too.
|
||||
Definisci una classe `MyComponent` che estenda `React.Component`. Il suo metodo render dovrebbe restituire un `div` che contiene un tag `h1` con il testo: `My First React Component!` in esso. Usa questo testo esattamente, le maiuscole e la punteggiatura contano. Assicurati di chiamare anche il costruttore per il tuo componente.
|
||||
|
||||
Render this component to the DOM using `ReactDOM.render()`. There is a `div` with `id='challenge-node'` available for you to use.
|
||||
Presenta questo componente nel DOM usando `ReactDOM.render()`. C'è un `div` con `id='challenge-node'` pronto all'uso per te.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be a React component called `MyComponent`.
|
||||
Ci dovrebbe essere un componente React chiamato `MyComponent`.
|
||||
|
||||
```js
|
||||
(getUserInput) =>
|
||||
@@ -29,7 +29,7 @@ There should be a React component called `MyComponent`.
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should contain an `h1` tag with text `My First React Component!` Case and punctuation matter.
|
||||
`MyComponent` dovrebbe contenere un tag `h1` con testo `My First React Component!` Maiuscole e punteggiatura contano.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -40,13 +40,13 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
`MyComponent` should render to the DOM.
|
||||
`MyComponent` dovrebbe essere presentato nel DOM.
|
||||
|
||||
```js
|
||||
assert(document.getElementById('challenge-node').childNodes.length === 1);
|
||||
```
|
||||
|
||||
`MyComponent` should have a constructor calling `super` with `props`.
|
||||
`MyComponent` dovrebbe avere un costruttore che chiama `super` con `props`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5a24c314108439a4d4036177
|
||||
title: Write a Simple Counter
|
||||
title: Scrivere un semplice contatore
|
||||
challengeType: 6
|
||||
forumTopicId: 301425
|
||||
dashedName: write-a-simple-counter
|
||||
@@ -8,17 +8,17 @@ dashedName: write-a-simple-counter
|
||||
|
||||
# --description--
|
||||
|
||||
You can design a more complex stateful component by combining the concepts covered so far. These include initializing `state`, writing methods that set `state`, and assigning click handlers to trigger these methods.
|
||||
È possibile progettare un componente stateful più complesso combinando i concetti visti finora. Questi includono l'inizializzazione dello `state`, la scrittura di metodi che impostano lo `state` e l'assegnazione di gestori di click per attivare questi metodi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
The `Counter` component keeps track of a `count` value in `state`. There are two buttons which call methods `increment()` and `decrement()`. Write these methods so the counter value is incremented or decremented by 1 when the appropriate button is clicked. Also, create a `reset()` method so when the reset button is clicked, the count is set to 0.
|
||||
Il componente `Counter` tiene traccia di un valore `count` nello `state`. Ci sono due bottoni che chiamano i metodi `increment()` e `decrement()`. Scrivi questi metodi in modo che il valore del contatore venga incrementato o decrementato di 1 quando viene fatto click sul bottone appropriato. Inoltre, crea un metodo `reset()` in modo che quando si clicca il pulsante reset, il conteggio venga impostato a 0.
|
||||
|
||||
**Note:** Make sure you don't modify the `className`s of the buttons. Also, remember to add the necessary bindings for the newly-created methods in the constructor.
|
||||
**Nota:** Assicurati di non modificare le `className` dei bottoni. Inoltre, ricordati di aggiungere i legami (bindings) necessari ai metodi appena creati nel costruttore.
|
||||
|
||||
# --hints--
|
||||
|
||||
`Counter` should return a `div` element which contains three buttons with text content in this order `Increment!`, `Decrement!`, `Reset`.
|
||||
`Counter` dovrebbe restituire un elemento `div` che contiene tre pulsanti con contenuto di testo nell'ordine: `Increment!`, `Decrement!`, `Reset`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
@@ -33,14 +33,14 @@ assert(
|
||||
);
|
||||
```
|
||||
|
||||
The state of `Counter` should initialize with a `count` property set to `0`.
|
||||
Lo stato di `Counter` dovrebbe essere inizializzato con una proprietà `count` impostata a `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 0');
|
||||
```
|
||||
|
||||
Clicking the increment button should increment the count by `1`.
|
||||
Cliccando sul bottone di incremento il conteggio dovrebbe aumentare di `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@@ -48,7 +48,7 @@ mockedComponent.find('.inc').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: 1');
|
||||
```
|
||||
|
||||
Clicking the decrement button should decrement the count by `1`.
|
||||
Cliccando sul bottone di decremento il conteggio dovrebbe diminuire di `1`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
@@ -56,7 +56,7 @@ mockedComponent.find('.dec').simulate('click');
|
||||
assert(mockedComponent.find('h1').text() === 'Current Count: -1');
|
||||
```
|
||||
|
||||
Clicking the reset button should reset the count to `0`.
|
||||
Cliccando sul bottone di reset il conteggio dovrebbe essere reimpostato a `0`.
|
||||
|
||||
```js
|
||||
const mockedComponent = Enzyme.mount(React.createElement(Counter));
|
||||
|
||||
Reference in New Issue
Block a user