From bd354eabd30257887ffd9b1291eb6e2373d133dc Mon Sep 17 00:00:00 2001
From: thib92 <thibhenry92@gmail.com>
Date: Mon, 11 Feb 2019 16:42:57 +0100
Subject: [PATCH 1/4] Translate Lists and Keys page to French

---
 content/docs/lists-and-keys.md | 96 +++++++++++++++++-----------------
 1 file changed, 49 insertions(+), 47 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index c82739a6a..8851bf321 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,14 +1,14 @@
 ---
 id: lists-and-keys
-title: Lists and Keys
+title: Listes et Clés
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
 ---
 
-First, let's review how you transform lists in JavaScript.
+Tout d'abord, voyons comment transformer des listes en JavaScript.
 
-Given the code below, we use the [`map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) function to take an array of `numbers` and double their values. We assign the new array returned by `map()` to the variable `doubled` and log it:
+Avec le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On assigne le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche à la console :
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -16,15 +16,16 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-This code logs `[2, 4, 6, 8, 10]` to the console.
+Ce code affiche `[2, 4, 6, 8, 10]` à la console.
 
-In React, transforming arrays into lists of [elements](/docs/rendering-elements.html) is nearly identical.
+Avec React, transformer un tableau en une liste d'[éléments](/docs/rendering-elements.html) est presque identique.
 
-### Rendering Multiple Components {#rendering-multiple-components}
+### Afficher Plusieurs Composants {#rendering-multiple-components}
 
-You can build collections of elements and [include them in JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) using curly braces `{}`.
+On peut construire des collections d'éléments et [les inclure dans du JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) en utilisant les accolades `{}`.
 
-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`:
+Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `<li>` pour chaque entrée du tableau.
+Enfin, on assigne le tableau d'éléments résultant à `listItems` :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +34,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-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):
+On inclue l'intégralité du tableau `listItems` dans un élément `<ul>`, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom).
 
 ```javascript{2}
 ReactDOM.render(
@@ -42,15 +43,15 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/GjPyQr?editors=0011)
 
-This code displays a bullet list of numbers between 1 and 5.
+Ce code affiche une liste à puces de nombres entre 1 et 5.
 
-### Basic List Component {#basic-list-component}
+### Composant Basique de Liste {#basic-list-component}
 
-Usually you would render lists inside a [component](/docs/components-and-props.html).
+Généralement, on souhaite rendre une liste dans un [composant](/docs/components-and-props.html).
 
-We can refactor the previous example into a component that accepts an array of `numbers` and outputs an unordered list of elements.
+On peut changer le dernier exemple pour le mettre dans un composant qui accepte un tableau de nombres et fait le rendu d'une liste non ordonnée d'éléments.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -70,9 +71,9 @@ ReactDOM.render(
 );
 ```
 
-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.
+En exécutant ce code, vous obtiendrez une alerte disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » (« key » en anglais, NdT), est un attribut spécial sous forme de chaîne de caractères que vous devez inclure quand vous créez une liste d'éléments. Nous discuterons de pourquoi c'est important dans la section suivante.
 
-Let's assign a `key` to our list items inside `numbers.map()` and fix the missing key issue.
+Assignons une `key` aux éléments de notre liste dans `numbers.map()` afin de réparer le problème de clés manquantes.
 
 ```javascript{4}
 function NumberList(props) {
@@ -94,11 +95,11 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/jrXYRR?editors=0011)
 
-## Keys {#keys}
+## Les clés {#keys}
 
-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 clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin de donner aux éléments une identité stable :
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +110,8 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often you would use IDs from your data as keys:
+Le meilleur moyen de choisir une clé est d'utiliser une chaîne de caractères qui identifie de façon unique un élément d'une liste parmi ses voisins. Le plus souvent on utilise l'ID de notre donnée comme clé :
+
 
 ```js{2}
 const todoItems = todos.map((todo) =>
@@ -119,34 +121,34 @@ 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:
+Quand vous n'avez pas d'ID stable pour les éléments rendus, vous pouvez utiliser l'index de l'élément en dernier recours :
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
-  // Only do this if items have no stable IDs
+  // Faites uniquement ceci si les éléments n'ont pas d'ID stable
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-We don't recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny's article for an [in-depth explanation on the negative impacts of using an index as a key](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318). If you choose not to assign an explicit key to list items then React will default to using indexes as keys.
+Nous ne recommandons pas d'utiliser l'index comme clé si l'ordre des éléments change. Cela peut avoir un effet négatif sur les performances, et peut causer des problèmes avec l'état du composant. Vous pouvez lire l'article de Robin Pokorny pour une [explication en profondeur de l'impact négatif de l'utilisation de l'index comme clé](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) (en anglais). Si vous choisissez de ne pas donner explicitement de clé aux éléments d'une liste, React utilisera les index par défaut.
 
-Here is an [in-depth explanation about why keys are necessary](/docs/reconciliation.html#recursing-on-children) if you're interested in learning more.
+Voici une [explication en profondeur de la raison pour laquelle les clés sont nécessaires](/docs/reconciliation.html#recursing-on-children) si vous voulez en apprendre plus.
 
-### Extracting Components with Keys {#extracting-components-with-keys}
+### Extraire des Composants Avec des Clés {#extracting-components-with-keys}
 
-Keys only make sense in the context of the surrounding array.
+Les clés n'ont une signification que dans le contexte du tableau qui les entoure.
 
-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.
+Par exemple, si on [extrait](/docs/components-and-props.html#extracting-components) un composant `ListItem`, on doit garder la clé sur l'élément `<ListItem />` dans le tableau, et non pas sur l'élément `<li>` dans le composant `ListItem` lui-même.
 
-**Example: Incorrect Key Usage**
+**Exemple : Utilisation des clés erroné**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Wrong! There is no need to specify the key here:
+    // Erroné ! Pas la peine de spécifier la clé ici :
     <li key={value.toString()}>
       {value}
     </li>
@@ -156,7 +158,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Wrong! The key should have been specified here:
+    // Erroné : la clé doit être spécifiée ici :
     <ListItem value={number} />
   );
   return (
@@ -173,18 +175,18 @@ ReactDOM.render(
 );
 ```
 
-**Example: Correct Key Usage**
+**Exemple : Utilisation correcte des clés**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct! There is no need to specify the key here:
+  // Correct ! Pas la peine de spécifier la clé ici :
   return <li>{props.value}</li>;
 }
 
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Correct! Key should be specified inside the array.
+    // Correct ! La clé doit être spécifiée dans le tableau.
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -202,13 +204,13 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-A good rule of thumb is that elements inside the `map()` call need keys.
+Une règle à garder en tête est que chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
 
-### Keys Must Only Be Unique Among Siblings {#keys-must-only-be-unique-among-siblings}
+### Les Clés Doivent Uniquement Être Uniques Parmi Leurs Voisins {#keys-must-only-be-unique-among-siblings}
 
-Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays:
+Les clés utilisées dans un tableau doivent être uniques parmi leurs voisins. Cependant, elles n'ont pas besoin d'être globalement uniques. On peut utiliser les mêmes clés dans des tableaux différents :
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -237,8 +239,8 @@ function Blog(props) {
 }
 
 const posts = [
-  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
-  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
+  {id: 1, title: 'Bonjour, monde', content: 'Bienvenue sur la documentation de React !'},
+  {id: 2, title: 'Installation', content: 'Vous pouvez installer React depuis npm.'}
 ];
 ReactDOM.render(
   <Blog posts={posts} />,
@@ -246,9 +248,9 @@ ReactDOM.render(
 );
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Keys serve as a hint to React but they don't get passed to your components. If you need the same value in your component, pass it explicitly as a prop with a different name:
+Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur à l'intérieur de votre composant, passez-le dans une prop avec un nom différent :
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -259,11 +261,11 @@ const content = posts.map((post) =>
 );
 ```
 
-With the example above, the `Post` component can read `props.id`, but not `props.key`.
+Avec l'exemple ci-dessus, le composant `Post` peut accéder à `props.id`, mais pas à `props.key`.
 
-### Embedding map() in JSX {#embedding-map-in-jsx}
+### Intégrer map() dans du JSX {#embedding-map-in-jsx}
 
-In the examples above we declared a separate `listItems` variable and included it in JSX:
+Dans l'exemple précédent, nous avons déclaré séparément la variable `listItems` et l'avons inclue dans le JSX :
 
 ```js{3-6}
 function NumberList(props) {
@@ -280,7 +282,7 @@ function NumberList(props) {
 }
 ```
 
-JSX allows [embedding any expression](/docs/introducing-jsx.html#embedding-expressions-in-jsx) in curly braces so we could inline the `map()` result:
+JSX autorise [d'intégrer des expressions](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` dans notre code JSX :
 
 ```js{5-8}
 function NumberList(props) {
@@ -296,6 +298,6 @@ function NumberList(props) {
 }
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
+[**Essayer sur CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Sometimes this results in clearer code, but this style can also be abused. Like in JavaScript, it is up to you to decide whether it is worth extracting a variable for readability. Keep in mind that if the `map()` body is too nested, it might be a good time to [extract a component](/docs/components-and-props.html#extracting-components).
+Ça donne un code plus lisible, mais ce style peut être utilisé de façon excessive. Comme JavaScript, c'est vous qui décidez quand ça vaut le coup d'extraire l'expression dans une variable pour plus de lisibilité. Gardez en tête que si le corps de `map()` est trop grand, il pourait être temps d'[extraire un composant](/docs/components-and-props.html#extracting-components).

From 1a4c3d9833fd155e87893d9818e3a2935ea4564f Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 12 Feb 2019 18:36:23 +0100
Subject: [PATCH 2/4] Apply suggestions from code review

Co-Authored-By: thib92 <thibhenry92@gmail.com>
---
 content/docs/lists-and-keys.md | 40 +++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 8851bf321..50f129386 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -8,7 +8,7 @@ next: forms.html
 
 Tout d'abord, voyons comment transformer des listes en JavaScript.
 
-Avec le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On assigne le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche à la console :
+Dans le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On affecte le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche dans la console :
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -34,7 +34,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-On inclue l'intégralité du tableau `listItems` dans un élément `<ul>`, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom).
+On inclut l'intégralité du tableau `listItems` dans un élément `<ul>`, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom) :
 
 ```javascript{2}
 ReactDOM.render(
@@ -49,9 +49,9 @@ Ce code affiche une liste à puces de nombres entre 1 et 5.
 
 ### Composant Basique de Liste {#basic-list-component}
 
-Généralement, on souhaite rendre une liste dans un [composant](/docs/components-and-props.html).
+Généralement, on souhaite afficher une liste au sein d’un [composant](/docs/components-and-props.html).
 
-On peut changer le dernier exemple pour le mettre dans un composant qui accepte un tableau de nombres et fait le rendu d'une liste non ordonnée d'éléments.
+On peut transformer l’exemple précédent pour en faire un composant qui accepte un tableau de nombres et produit une liste non ordonnée d'éléments.
 
 ```javascript{3-5,7,13}
 function NumberList(props) {
@@ -71,9 +71,9 @@ ReactDOM.render(
 );
 ```
 
-En exécutant ce code, vous obtiendrez une alerte disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » (« key » en anglais, NdT), est un attribut spécial sous forme de chaîne de caractères que vous devez inclure quand vous créez une liste d'éléments. Nous discuterons de pourquoi c'est important dans la section suivante.
+En exécutant ce code, vous obtiendrez un avertissement disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » *(key, NdT)*, est un attribut spécial que vous devez inclure quand vous créez une liste d'éléments. Nous verrons pourquoi c'est important dans la prochaine section.
 
-Assignons une `key` aux éléments de notre liste dans `numbers.map()` afin de réparer le problème de clés manquantes.
+Assignons une `key` aux éléments de notre liste dans `numbers.map()` afin de corriger  le problème de clés manquantes.
 
 ```javascript{4}
 function NumberList(props) {
@@ -99,7 +99,7 @@ ReactDOM.render(
 
 ## Les clés {#keys}
 
-Les clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin de donner aux éléments une identité stable :
+Les clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin d’apporter aux éléments une identité stable :
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -121,28 +121,28 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-Quand vous n'avez pas d'ID stable pour les éléments rendus, vous pouvez utiliser l'index de l'élément en dernier recours :
+Quand vous n'avez pas d'ID stable pour les éléments affichés, vous pouvez utiliser l'index de l'élément en dernier recours :
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
-  // Faites uniquement ceci si les éléments n'ont pas d'ID stable
+  // Ne faites ceci que si les éléments n'ont pas d'ID stable
   <li key={index}>
     {todo.text}
   </li>
 );
 ```
 
-Nous ne recommandons pas d'utiliser l'index comme clé si l'ordre des éléments change. Cela peut avoir un effet négatif sur les performances, et peut causer des problèmes avec l'état du composant. Vous pouvez lire l'article de Robin Pokorny pour une [explication en profondeur de l'impact négatif de l'utilisation de l'index comme clé](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) (en anglais). Si vous choisissez de ne pas donner explicitement de clé aux éléments d'une liste, React utilisera les index par défaut.
+Nous vous recommandons de ne pas utiliser l'index comme clé si l'ordre des éléments est susceptible de changer. Ça peut avoir un effet négatif sur les performances, et causer des problèmes avec l'état du composant. Vous pouvez lire l'article de Robin Pokorny pour une [explication en profondeur de l'impact négatif de l'utilisation de l'index comme clé](https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318) (en anglais). Si vous choisissez de ne pas donner explicitement de clé aux éléments d'une liste, React utilisera l’index par défaut.
 
-Voici une [explication en profondeur de la raison pour laquelle les clés sont nécessaires](/docs/reconciliation.html#recursing-on-children) si vous voulez en apprendre plus.
+Si vous voulez en apprendre davantage, consultez cette [explication en profondeur de la raison pour laquelle les clés sont nécessaires](/docs/reconciliation.html#recursing-on-children).
 
 ### Extraire des Composants Avec des Clés {#extracting-components-with-keys}
 
 Les clés n'ont une signification que dans le contexte du tableau qui les entoure.
 
-Par exemple, si on [extrait](/docs/components-and-props.html#extracting-components) un composant `ListItem`, on doit garder la clé sur l'élément `<ListItem />` dans le tableau, et non pas sur l'élément `<li>` dans le composant `ListItem` lui-même.
+Par exemple, si on [extrait](/docs/components-and-props.html#extracting-components) un composant `ListItem`, on doit garder la clé sur l'élément `<ListItem />` dans le tableau, et non sur l'élément `<li>` dans le composant `ListItem` lui-même.
 
-**Exemple : Utilisation des clés erroné**
+**Exemple : Utilisation erronée des clés**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
@@ -206,9 +206,9 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-Une règle à garder en tête est que chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
+Gardez en tête cette règle simple : chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
 
-### Les Clés Doivent Uniquement Être Uniques Parmi Leurs Voisins {#keys-must-only-be-unique-among-siblings}
+### Les Clés n’ont Besoin d’Être Uniques qu’au Sein de la Liste {#keys-must-only-be-unique-among-siblings}
 
 Les clés utilisées dans un tableau doivent être uniques parmi leurs voisins. Cependant, elles n'ont pas besoin d'être globalement uniques. On peut utiliser les mêmes clés dans des tableaux différents :
 
@@ -250,7 +250,7 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur à l'intérieur de votre composant, passez-le dans une prop avec un nom différent :
+Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur dans de votre composant, passez-la dans une prop avec un nom différent :
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -261,11 +261,11 @@ const content = posts.map((post) =>
 );
 ```
 
-Avec l'exemple ci-dessus, le composant `Post` peut accéder à `props.id`, mais pas à `props.key`.
+Dans l'exemple ci-dessus, le composant `Post` peut accéder à `props.id`, mais pas à `props.key`.
 
 ### Intégrer map() dans du JSX {#embedding-map-in-jsx}
 
-Dans l'exemple précédent, nous avons déclaré séparément la variable `listItems` et l'avons inclue dans le JSX :
+Dans les exemples précédents, nous déclarions séparément la variable `listItems` pour ensuite l’inclure dans le JSX :
 
 ```js{3-6}
 function NumberList(props) {
@@ -282,7 +282,7 @@ function NumberList(props) {
 }
 ```
 
-JSX autorise [d'intégrer des expressions](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` dans notre code JSX :
+JSX permet [d'intégrer des expressions quelconques](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` directement dans notre code JSX :
 
 ```js{5-8}
 function NumberList(props) {
@@ -300,4 +300,4 @@ function NumberList(props) {
 
 [**Essayer sur CodePen**](https://codepen.io/gaearon/pen/BLvYrB?editors=0010)
 
-Ça donne un code plus lisible, mais ce style peut être utilisé de façon excessive. Comme JavaScript, c'est vous qui décidez quand ça vaut le coup d'extraire l'expression dans une variable pour plus de lisibilité. Gardez en tête que si le corps de `map()` est trop grand, il pourait être temps d'[extraire un composant](/docs/components-and-props.html#extracting-components).
+Ça rend parfois le code plus lisible, mais il faut éviter d’en abuser. Comme avec JavaScript, c'est vous qui décidez quand ça vaut le coup d'extraire l'expression dans une variable pour plus de lisibilité. Gardez en tête que si le corps de `map()` est trop profond ou trop riche, c’est sans doute le signe qu’il faudrait [extraire un composant](/docs/components-and-props.html#extracting-components).

From f39439248c9f245753f858d101cb0844dd195528 Mon Sep 17 00:00:00 2001
From: thib92 <thibhenry92@gmail.com>
Date: Wed, 13 Feb 2019 10:20:39 +0100
Subject: [PATCH 3/4] Last fixes from review

---
 content/docs/lists-and-keys.md | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 50f129386..752cb5d89 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -16,7 +16,7 @@ const doubled = numbers.map((number) => number * 2);
 console.log(doubled);
 ```
 
-Ce code affiche `[2, 4, 6, 8, 10]` à la console.
+Ce code affiche `[2, 4, 6, 8, 10]` dans la console.
 
 Avec React, transformer un tableau en une liste d'[éléments](/docs/rendering-elements.html) est presque identique.
 
@@ -24,8 +24,7 @@ Avec React, transformer un tableau en une liste d'[éléments](/docs/rendering-e
 
 On peut construire des collections d'éléments et [les inclure dans du JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) en utilisant les accolades `{}`.
 
-Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `<li>` pour chaque entrée du tableau.
-Enfin, on assigne le tableau d'éléments résultant à `listItems` :
+Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `<li>` pour chaque entrée du tableau. Enfin, on assigne le tableau d'éléments résultant à `listItems` :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];

From f0d2527ca90ae10bb21c18ec2d957845be6e4a7c Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 11:53:07 +0100
Subject: [PATCH 4/4] Final tweaks
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Suite à revue visuelle :

- Espaces insécables devant les signes de ponctuation doubles et dans les guillemets français
- Utilisation de la nouvelle capitalisation des titres (française), fraîchement confirmée
- Quelques retouches cosmétiques pour éviter les orphelines
---
 content/docs/lists-and-keys.md | 50 +++++++++++++++++-----------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/content/docs/lists-and-keys.md b/content/docs/lists-and-keys.md
index 752cb5d89..fc01073ca 100644
--- a/content/docs/lists-and-keys.md
+++ b/content/docs/lists-and-keys.md
@@ -1,6 +1,6 @@
 ---
 id: lists-and-keys
-title: Listes et Clés
+title: Listes et clés
 permalink: docs/lists-and-keys.html
 prev: conditional-rendering.html
 next: forms.html
@@ -8,7 +8,7 @@ next: forms.html
 
 Tout d'abord, voyons comment transformer des listes en JavaScript.
 
-Dans le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On affecte le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche dans la console :
+Dans le code suivant, on utilise la méthode [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map) pour prendre un tableau de nombres et doubler leurs valeurs. On affecte le nouveau tableau retourné par `map()` à une variable `doubled` et on l'affiche dans la console :
 
 ```javascript{2}
 const numbers = [1, 2, 3, 4, 5];
@@ -20,11 +20,11 @@ Ce code affiche `[2, 4, 6, 8, 10]` dans la console.
 
 Avec React, transformer un tableau en une liste d'[éléments](/docs/rendering-elements.html) est presque identique.
 
-### Afficher Plusieurs Composants {#rendering-multiple-components}
+### Afficher plusieurs composants {#rendering-multiple-components}
 
 On peut construire des collections d'éléments et [les inclure dans du JSX](/docs/introducing-jsx.html#embedding-expressions-in-jsx) en utilisant les accolades `{}`.
 
-Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `<li>` pour chaque entrée du tableau. Enfin, on assigne le tableau d'éléments résultant à `listItems` :
+Ci-dessous, on itère sur le tableau de nombres en utilisant la méthode JavaScript [`map()`](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Array/map). On retourne un élément `<li>` pour chaque entrée du tableau. Enfin, on affecte le tableau d'éléments résultant à `listItems` :
 
 ```javascript{2-4}
 const numbers = [1, 2, 3, 4, 5];
@@ -33,7 +33,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-On inclut l'intégralité du tableau `listItems` dans un élément `<ul>`, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom) :
+On inclut tout le tableau `listItems` dans un élément `<ul>`, et [on l'affiche dans le DOM](/docs/rendering-elements.html#rendering-an-element-into-the-dom) :
 
 ```javascript{2}
 ReactDOM.render(
@@ -46,7 +46,7 @@ ReactDOM.render(
 
 Ce code affiche une liste à puces de nombres entre 1 et 5.
 
-### Composant Basique de Liste {#basic-list-component}
+### Composant basique de liste {#basic-list-component}
 
 Généralement, on souhaite afficher une liste au sein d’un [composant](/docs/components-and-props.html).
 
@@ -70,7 +70,7 @@ ReactDOM.render(
 );
 ```
 
-En exécutant ce code, vous obtiendrez un avertissement disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » *(key, NdT)*, est un attribut spécial que vous devez inclure quand vous créez une liste d'éléments. Nous verrons pourquoi c'est important dans la prochaine section.
+En exécutant ce code, vous obtiendrez un avertissement disant qu'une clé devrait être fournie pour les éléments d'une liste. Une « clé » *(key, NdT)*, est un attribut spécial que vous devez inclure quand vous créez une liste d'éléments. Nous verrons pourquoi c'est important dans la prochaine section.
 
 Assignons une `key` aux éléments de notre liste dans `numbers.map()` afin de corriger  le problème de clés manquantes.
 
@@ -98,7 +98,7 @@ ReactDOM.render(
 
 ## Les clés {#keys}
 
-Les clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin d’apporter aux éléments une identité stable :
+Les clés aident React à identifier quels éléments d'une liste ont changé, ont été ajoutés ou supprimés. Vous devez donner une clé à chaque élément dans un tableau afin d’apporter aux éléments une identité stable :
 
 ```js{3}
 const numbers = [1, 2, 3, 4, 5];
@@ -109,7 +109,7 @@ const listItems = numbers.map((number) =>
 );
 ```
 
-Le meilleur moyen de choisir une clé est d'utiliser une chaîne de caractères qui identifie de façon unique un élément d'une liste parmi ses voisins. Le plus souvent on utilise l'ID de notre donnée comme clé :
+Le meilleur moyen de choisir une clé est d'utiliser quelque chose qui identifie de façon unique un élément d'une liste parmi ses voisins. Le plus souvent on utilise l'ID de notre donnée comme clé :
 
 
 ```js{2}
@@ -120,7 +120,7 @@ const todoItems = todos.map((todo) =>
 );
 ```
 
-Quand vous n'avez pas d'ID stable pour les éléments affichés, vous pouvez utiliser l'index de l'élément en dernier recours :
+Quand vous n'avez pas d'ID stable pour les éléments affichés, vous pouvez utiliser l'index de l'élément en dernier recours :
 
 ```js{2,3}
 const todoItems = todos.map((todo, index) =>
@@ -135,19 +135,19 @@ Nous vous recommandons de ne pas utiliser l'index comme clé si l'ordre des él
 
 Si vous voulez en apprendre davantage, consultez cette [explication en profondeur de la raison pour laquelle les clés sont nécessaires](/docs/reconciliation.html#recursing-on-children).
 
-### Extraire des Composants Avec des Clés {#extracting-components-with-keys}
+### Extraire des composants avec des clés {#extracting-components-with-keys}
 
 Les clés n'ont une signification que dans le contexte du tableau qui les entoure.
 
 Par exemple, si on [extrait](/docs/components-and-props.html#extracting-components) un composant `ListItem`, on doit garder la clé sur l'élément `<ListItem />` dans le tableau, et non sur l'élément `<li>` dans le composant `ListItem` lui-même.
 
-**Exemple : Utilisation erronée des clés**
+**Exemple : utilisation erronée des clés**
 
 ```javascript{4,5,14,15}
 function ListItem(props) {
   const value = props.value;
   return (
-    // Erroné ! Pas la peine de spécifier la clé ici :
+    // Erroné ! Pas la peine de spécifier la clé ici :
     <li key={value.toString()}>
       {value}
     </li>
@@ -157,7 +157,7 @@ function ListItem(props) {
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Erroné : la clé doit être spécifiée ici :
+    // Erroné : la clé doit être spécifiée ici :
     <ListItem value={number} />
   );
   return (
@@ -174,18 +174,18 @@ ReactDOM.render(
 );
 ```
 
-**Exemple : Utilisation correcte des clés**
+**Exemple : utilisation correcte des clés**
 
 ```javascript{2,3,9,10}
 function ListItem(props) {
-  // Correct ! Pas la peine de spécifier la clé ici :
+  // Correct ! Pas la peine de spécifier la clé ici :
   return <li>{props.value}</li>;
 }
 
 function NumberList(props) {
   const numbers = props.numbers;
   const listItems = numbers.map((number) =>
-    // Correct ! La clé doit être spécifiée dans le tableau.
+    // Correct ! La clé doit être spécifiée dans le tableau.
     <ListItem key={number.toString()}
               value={number} />
   );
@@ -205,11 +205,11 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](https://codepen.io/gaearon/pen/ZXeOGM?editors=0010)
 
-Gardez en tête cette règle simple : chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
+Gardez en tête cette règle simple : chaque élément à l'intérieur d'un appel à `map()` a besoin d'une clé.
 
-### Les Clés n’ont Besoin d’Être Uniques qu’au Sein de la Liste {#keys-must-only-be-unique-among-siblings}
+### Les clés n’ont besoin d’être uniques qu’au sein de la liste {#keys-must-only-be-unique-among-siblings}
 
-Les clés utilisées dans un tableau doivent être uniques parmi leurs voisins. Cependant, elles n'ont pas besoin d'être globalement uniques. On peut utiliser les mêmes clés dans des tableaux différents :
+Les clés utilisées dans un tableau doivent être uniques parmi leurs voisins. Cependant, elles n'ont pas besoin d'être globalement uniques. On peut utiliser les mêmes clés dans des tableaux différents :
 
 ```js{2,5,11,12,19,21}
 function Blog(props) {
@@ -238,7 +238,7 @@ function Blog(props) {
 }
 
 const posts = [
-  {id: 1, title: 'Bonjour, monde', content: 'Bienvenue sur la documentation de React !'},
+  {id: 1, title: 'Bonjour, monde', content: 'Bienvenue sur la doc de React !'},
   {id: 2, title: 'Installation', content: 'Vous pouvez installer React depuis npm.'}
 ];
 ReactDOM.render(
@@ -249,7 +249,7 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](https://codepen.io/gaearon/pen/NRZYGN?editors=0010)
 
-Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur dans de votre composant, passez-la dans une prop avec un nom différent :
+Les clés servent d'indicateur à React mais ne sont pas passées à vos composants. Si vous avez besoin de la même valeur dans de votre composant, passez-la dans une prop avec un nom différent :
 
 ```js{3,4}
 const content = posts.map((post) =>
@@ -262,9 +262,9 @@ const content = posts.map((post) =>
 
 Dans l'exemple ci-dessus, le composant `Post` peut accéder à `props.id`, mais pas à `props.key`.
 
-### Intégrer map() dans du JSX {#embedding-map-in-jsx}
+### Intégrer `map()` dans du JSX {#embedding-map-in-jsx}
 
-Dans les exemples précédents, nous déclarions séparément la variable `listItems` pour ensuite l’inclure dans le JSX :
+Dans les exemples précédents, nous déclarions séparément la variable `listItems` pour ensuite l’inclure dans le JSX :
 
 ```js{3-6}
 function NumberList(props) {
@@ -281,7 +281,7 @@ function NumberList(props) {
 }
 ```
 
-JSX permet [d'intégrer des expressions quelconques](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` directement dans notre code JSX :
+JSX permet [d'intégrer des expressions quelconques](/docs/introducing-jsx.html#embedding-expressions-in-jsx) entre accolades. Nous pouvons donc utiliser `map()` directement dans notre code JSX :
 
 ```js{5-8}
 function NumberList(props) {