traducció de "list-and-keys.md #75
Conversation
|
Deploy preview for ca-reactjs ready! Built with commit 8fb6bb9 |
Hi havia alguns duplicats. Canviat el link a la versió catalana "https://developer.mozilla.org/ca/docs/Web/JavaScript/Reference/Global_Objects/Array/map"
@nglvnyls, em sembla bé no traduir array. Respecte usar en JavaScript o a JavaScript, d'acord amb el que es defineix en aquest article https://www.uoc.edu/portal/ca/servei-linguistic/criteris/gramatica/preposicions/index.html, crec que la manera correcta seria usar la preposició a. |
|
|
||
| In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical. | ||
| En React, transformar matrius en llistes [d'elements](/docs/rendering-elements.html) és gairebé idèntic. |
There was a problem hiding this comment.
Si al final optem per usar a JavaScript enlloc de en JavaScript, crec que aquí hauríem d'usar A React.
| ); | ||
| ``` | ||
|
|
||
| We include the entire `listItems` array inside a `<ul>` element, and [render it to the DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom): | ||
| Finalment Incluim tota la llista sencera dins un element `<ul>`, i [la renderitzem al DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom): |
There was a problem hiding this comment.
Finalment Incluim --> Finalment, incloem
| const numbers = props.numbers; | ||
| const listItems = numbers.map((number) => | ||
| <li>{number}</li> | ||
| function LListaNumeros(props) { |
|
|
||
| Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity: | ||
| Les claus ajuden React a identificar quins elements han canviat. O bé s'han afegit, o bé s'han eliminat. Les claus s'han de donar als elements de dins de la matriu per donar-los una identitat estable: |
There was a problem hiding this comment.
Les claus ajuden React a identificar quins elements han canviat. O bé s'han afegit, o bé s'han eliminat.
-->
Les claus ajuden React a identificar quins elements han canviat, afegit o eliminat
| document.getElementById('root') | ||
| ); | ||
| ``` | ||
|
|
||
| **Example: Correct Key Usage** | ||
| **Exemple: ÚS CORRECTE de 'key'** |
There was a problem hiding this comment.
ÚS CORRECTE --> Ús correcte
| function LListaDeNumeros(props) { | ||
| const numeros = props.numeros; | ||
| const LListaDElemets = numeros.map((numeros) => | ||
| //Malament!. La clau hauria d'haver sigut especificada aquí: |
There was a problem hiding this comment.
//Malament!. La clau --> // Malament! La clau
| // Wrong! There is no need to specify the key here: | ||
| <li key={value.toString()}> | ||
| {value} | ||
| //Malament!. No hi ha cap necessitat d'especificar una clau ('key') aquí: |
There was a problem hiding this comment.
//Malament!. No hi --> // Malament! No hi
| For example, if you [extract](/docs/components-and-props.html#extracting-components) a `ListItem` component, you should keep the key on the `<ListItem />` elements in the array rather than on the `<li>` element in the `ListItem` itself. | ||
|
|
||
| **Example: Incorrect Key Usage** | ||
| **Exemple: ÚS INCORRECTE de 'key'** |
There was a problem hiding this comment.
ÚS INCORRECTE --> Ús incorrecte
|
|
||
| Below, we loop through the `numbers` array using the JavaScript [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function. We return a `<li>` element for each item. Finally, we assign the resulting array of elements to `listItems`: | ||
| Per començar, farem servir el mètode de Javascript [`map()`](https://developer.mozilla.org/ca/docs/Web/JavaScript/Reference/Global_Objects/Array/map) a l'array `numeros`. Aquest ens retornarà un element `<li>` per a cada element de l'array. Per últim, li assignarem l'array resultant a la variable `llistaDElements` |
There was a problem hiding this comment.
a la variable llistaDElements --> a la variable llistaDElements:
| document.getElementById('root') | ||
| ); | ||
| ``` | ||
|
|
||
| When you run this code, you'll be given a warning that a key should be provided for list items. A "key" is a special string attribute you need to include when creating lists of elements. We'll discuss why it's important in the next section. | ||
| Quan executis aquest codi rebràs un avís que diu que s'ha de donat una 'clau' a cada elements de la llista. Una clau (`key`) és un atribut de cadena especial que has d'incloure en crear llistes d'elements. Parlarem de per què és important a la següent secció. |
There was a problem hiding this comment.
diu que s'ha de donat una 'clau' a cada elements de --> diu que s'ha de donat una clau (key) a cada element de
|
|
||
| Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue. | ||
| Assignem doncs, una clau (`key`) als elements de la nostra llista dins de `numeros. map()` que corregeixi el problema de la clau que falta. |
There was a problem hiding this comment.
de numeros. map() que --> de numeros.map() que
| @@ -119,183 +119,183 @@ const todoItems = todos.map((todo) => | |||
| ); | |||
| ``` | |||
|
|
|||
| When you don't have stable IDs for rendered items, you may use the item index as a key as a last resort: | |||
| Quan no tinguis més remei perque no tens un ID estable per a cada elements de la llista, pots fer servir l'índex de l'element com a clau : | |||
There was a problem hiding this comment.
Quan no tinguis més remei perque no tens un ID estable per a cada elements de la llista, pots fer servir l'índex de l'element com a clau :
-->
Quan no tinguis més remei perquè no tens una ID estable per a cada element de la llista, pots fer servir l'índex de l'element com a clau:
| ); | ||
| ``` | ||
|
|
||
| With the example above, the `Post` component can read `props.id`, but not `props.key`. | ||
| A l'exemple anterior, el component `Post` pot llegir `props.id`, però no `props.key` |
There was a problem hiding this comment.
però no props.key --> però no props.key. (Punt a final de frase)
| </ul> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result: | ||
| JSX permet [incrustar expressions](/docs/introducing-jsx.html#embedding-expressions-in-jsx) tancades entre claus de manera que podem tenir-hi el resultat de `map()` : |
There was a problem hiding this comment.
resultat de map() : --> resultat de map():
|
Also, it would be cool if you could solve merge conflicts in |
sobre la traducció.
Paraules que em sembla que no s'han de traduir
array = array
He traduit les parts dels exemples que es poden traduir.
Em sembla que això facilita la comprensió pel lector novell de quines paraules són del lleguatge i quines són de lliure elecció
Dubtes:
"en Javascript" o "a Javascript".
Ex: Tot això es fa igual que a Javascript -- Tot això es fa igual que en Javascript