From d6592e263a700513a3f0de75082e7430bf63a778 Mon Sep 17 00:00:00 2001
From: Geslain Dahan <geslain.dahan@keyrus.com>
Date: Mon, 11 Feb 2019 01:52:45 +0100
Subject: [PATCH 01/16] Translation of "Components and Props" Doc page with
 simple rereading
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

It remains several questions about:
* Correctness of the translation
  * `App` en haut de leur hiérarchie / `App` component at the very top.
  * to be in the scope /  pour appartenir aux contexte d'exécution
  * Render / Effectue le rendu
* Relevance not to translating:
  * The exemple with `Avatar` and `Comment`, is it relevant to translate those components to understand the example
  * Same question for the example with `user` and `author` (Line 174)
  * Same question for the `sum` function (Line 240)
* Misc:
  * Is it correct that i added `Essayer sur CodePen`
  * I notice some differences with current documentation on reactjs.org
---
 content/docs/components-and-props.md | 106 +++++++++++++--------------
 1 file changed, 53 insertions(+), 53 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 47daaedf9..29e2d533c 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -1,6 +1,6 @@
 ---
 id: components-and-props
-title: Components and Props
+title: Composants et Props
 permalink: docs/components-and-props.html
 redirect_from:
   - "docs/reusable-components.html"
@@ -16,57 +16,57 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-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).
+Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables, permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composant. Vous pouvez trouver une [référence d'API de composant détaillée ic](/docs/react-component.html).
 
-Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
+Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées arbitraires (appelées "props") et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
 
-## Function and Class Components {#function-and-class-components}
+## Fonctions composants et composants à base de classe {#function-and-class-components}
 
-The simplest way to define a component is to write a JavaScript function:
+Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript:
 
 ```js
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Bonjour, {props.name}</h1>;
 }
 ```
 
-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.
+Cette fonction est un composant React valide car elle accepte un seul argument "props" (qui se traduit par "propriétés") contenant des données et renvoie un élément React. Nous appelons de tels composants "fonctions composants" car sont littéralement des fonctions JavaScript.
 
-You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:
+Vous pouvez également utiliser une [classe ES6](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes) pour définir un composant:
 
 ```js
 class Welcome extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Bonjour, {this.props.name}</h1>;
   }
 }
 ```
 
-The above two components are equivalent from React's point of view.
+Les deux composants ci-dessus sont équivalents d'un point de vue React.
 
-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.
+Les classes possèdent quelques fonctionnalités supplémentaires dont nous discuterons dans les [sections suivantes](/docs/state-and-lifecycle.html). En attendant, nous utiliserons les fonctions composants pour leur forme concise.
 
-## Rendering a Component {#rendering-a-component}
+## Rendu d'un Component {#rendering-a-component}
 
-Previously, we only encountered React elements that represent DOM tags:
+Jusque là, nous avons uniquement rencontré des éléments React sous forme de balise DOM:
 
 ```js
 const element = <div />;
 ```
 
-However, elements can also represent user-defined components:
+Cependant, ces éléments peuvent également représenter des composants définis par l'utilisateur:
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-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".
+Lorsque React trouve un élément représentant un composant défini par l'utilisateur, il transmet les attributs JSX à ce composant sous la forme d'un objet unique. Nous appelons cet objet "props".
 
-For example, this code renders "Hello, Sara" on the page:
+Par exemple, ce code affiche "Bonjour, Sara" sur la page:
 
 ```js{1,5}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Bonjour, {props.name}</h1>;
 }
 
 const element = <Welcome name="Sara" />;
@@ -76,30 +76,30 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/rendering-a-component)
+[**Essayer sur CodePen**](codepen://components-and-props/rendering-a-component)
 
-Let's recap what happens in this example:
+Récapitulons ce qui se passe dans cet exemple:
 
-1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
-2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
-3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
-4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
+1. On appelle `ReactDOM.render()` avec l'élément `<Welcome name="Sara" />`.
+2. React appelle le composant `Welcome` avec comme props `{name: 'Sara'}`.
+3. Notre composant `Welcome` retourne un élément `<h1>Bonjour, Sara</h1>` pour résultat.
+4. Le DOM React met à jour efficacement le DOM de manière à correspondre à `<h1>Bonjour, Sara</h1>`.
 
->**Note:** Always start component names with a capital letter.
+>**Note:** Commencez toujours vos noms de composants par une majuscule.
 >
->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.
+>React concidère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, `<div />` représente une balise HTML div, mais `<Welcome />` représente un composant et nécessite `Welcome` pour appartenir aux contexte d'exécution.
 >
->You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Vous pouvez en apprendre plus sur le raisonnement qui se cache derrière cette convention [ici.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
-## Composing Components {#composing-components}
+## Composition de Componsants {#composing-components}
 
-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.
+Les composants peuvent faire référence à d'autres composants dans leur sortie. Ça nous permet d'utiliser la même abstraction de composant pour n'importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran: dans React, ils sont généralement tous exprimées par des composants.
 
-For example, we can create an `App` component that renders `Welcome` many times:
+Par exemple, nous pouvons créer un composant `App` qui fait un rendu mutliple du composant ` Welcome`:
 
 ```js{8-10}
 function Welcome(props) {
-  return <h1>Hello, {props.name}</h1>;
+  return <h1>Bonjour, {props.name}</h1>;
 }
 
 function App() {
@@ -118,15 +118,15 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://components-and-props/composing-components)
+[**Essayer sur CodePen**](codepen://components-and-props/composing-components)
 
-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.
+En règle générale, les nouvelles applications React n'ont un seul composant `App` en haut de leur hiérarchie.  Cependant, si vous intégrez React à une application existante, vous pouvez commencer par un petit composant comme `Button` et vous diriger progressivement vers le haut de la hiérarchie.
 
-## Extracting Components {#extracting-components}
+## Extraire des Composants {#extracting-components}
 
-Don't be afraid to split components into smaller components.
+N'ayez pas peur de scinder des composants en composants plus petits.
 
-For example, consider this `Comment` component:
+Prennons par exemple ce composent `Comment`:
 
 ```js
 function Comment(props) {
@@ -152,13 +152,13 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components)
+[**Essayer sur CodePen**](codepen://components-and-props/extracting-components)
 
-It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
+Il accepte `author` (un objet),` text` (une chaîne de caractères) et `date` (une date) comme props, et décrit un commentaire sur un réseau social en ligne.
 
-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.
+Les différentes imbrications rendent la modification de ce composant fastidieuse, et il est également compliqué de de réutiliser des parties individuelles de celui-ci. Essayons donc d'extraire quelques composants.
 
-First, we will extract `Avatar`:
+Tout d'abord, nous allons extraire `Avatar`:
 
 ```js{3-6}
 function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
 }
 ```
 
-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`.
+Le composant `Avatar` n'a pas besoin de savoir qu'il est rendu dans un composant ` Comment`. C'est pourquoi nous avons donné à ses props un nom plus générique: `user` plutôt que` author`.
 
-We recommend naming props from the component's own point of view rather than the context in which it is being used.
+Nous vous recommandons de nommer les props du point de vue du composant plutôt que de celui du contexte dans lequel il est utilisé.
 
-We can now simplify `Comment` a tiny bit:
+On peut maintenant un peu simplifier `Comment`:
 
 ```js{5}
 function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
+Ensuite, nous allons extraire un composant `UserInfo` qui effectue le rendu du composant `Avatar` à côté du nom de l'utilisateur:
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-This lets us simplify `Comment` even further:
+Ce qui nous permet de simplifer encore plus `Comment`:
 
 ```js{4}
 function Comment(props) {
@@ -231,13 +231,13 @@ function Comment(props) {
 }
 ```
 
-[](codepen://components-and-props/extracting-components-continued)
+[**Essayer sur CodePen**](codepen://components-and-props/extracting-components-continued)
 
-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.
+Au début, extraire des composants peut vous sembler fastidieux, mais disposer d'une palette de composants réutilisables s'avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`,` Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (` App`, `FeedStory`, 'Comment` ), c’est un bon candidat pour être un composant réutilisable.
 
-## Props are Read-Only {#props-are-read-only}
+## Les Props en Lecture Seule {#props-are-read-only}
 
-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:
+Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum`:
 
 ```js
 function sum(a, b) {
@@ -245,9 +245,9 @@ function sum(a, b) {
 }
 ```
 
-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.
+Ces fonctions sont dites ["pure"](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu'ils ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour leurs entrées respectives.
 
-In contrast, this function is impure because it changes its own input:
+En revanche, cette fonction est impure car elle change sa propre entrée:
 
 ```js
 function withdraw(account, amount) {
@@ -255,8 +255,8 @@ function withdraw(account, amount) {
 }
 ```
 
-React is pretty flexible but it has a single strict rule:
+React est assez flexible mais possède une règle stricte:
 
-**All React components must act like pure functions with respect to their props.**
+**Tous les composants React doivent agir comme des fonctions pures vis-à-vis de leurs proprs.**
 
-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.
+Bien entendu, les interfaces utilisateur des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous introduirons un nouveau concept "d'état" (State). Le State permet aux composants React de modifier leur sortie au fil du temps aux regards des actions de l'utilisateur, des réponses réseau et à tout autre chose, mais toujours sans enfreindre cette règle.

From 35387e5684bb06a5ab05189d8f7d445d794957b6 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:41:05 +0100
Subject: [PATCH 02/16] Update content/docs/components-and-props.md

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 29e2d533c..15cc52a4e 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,7 +16,7 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Les composants vous permettent de diviser l'interface utilisateur en éléments indépendants et réutilisables, permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composant. Vous pouvez trouver une [référence d'API de composant détaillée ic](/docs/react-component.html).
+Les composants vous permettent de découper l'interface utilisateur en éléments indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composants. Vous trouverez une [référence détaillée de l'API des composants ici](/docs/react-component.html).
 
 Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées arbitraires (appelées "props") et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
 

From d0e4ff345de0612dd9bbab8fc0b5b4ae7ada640e Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:41:34 +0100
Subject: [PATCH 03/16] Update content/docs/components-and-props.md

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 15cc52a4e..6d0695660 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -48,7 +48,7 @@ Les classes possèdent quelques fonctionnalités supplémentaires dont nous disc
 
 ## Rendu d'un Component {#rendering-a-component}
 
-Jusque là, nous avons uniquement rencontré des éléments React sous forme de balise DOM:
+Jusqu’ici, nous avons uniquement rencontré des éléments React qui représentent des balises DOM :
 
 ```js
 const element = <div />;

From ef7cc77d67630526b89ed46ba20ca0b8096dc88e Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:46:07 +0100
Subject: [PATCH 04/16] Update content/docs/components-and-props.md (Line21)

- Wrong translation on "arbitrary"
- Missing double quotes replacement

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 6d0695660..2150e7e02 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -18,7 +18,7 @@ next: state-and-lifecycle.html
 
 Les composants vous permettent de découper l'interface utilisateur en éléments indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composants. Vous trouverez une [référence détaillée de l'API des composants ici](/docs/react-component.html).
 
-Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées arbitraires (appelées "props") et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
+Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées quelconques (appelées « props ») et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
 
 ## Fonctions composants et composants à base de classe {#function-and-class-components}
 

From 93ef02bba731cabbc4bf3818ff1b5f05fdf1433d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:48:10 +0100
Subject: [PATCH 05/16] Update content/docs/components-and-props.md (Line 23)

- Forgot to preserve title case
- Missing plural on "Classes"

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 2150e7e02..46d4bb4fb 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -20,7 +20,7 @@ Les composants vous permettent de découper l'interface utilisateur en élément
 
 Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées quelconques (appelées « props ») et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
 
-## Fonctions composants et composants à base de classe {#function-and-class-components}
+## Fonctions Composants et Composants à Base de Classes {#function-and-class-components}
 
 Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript:
 

From 33655a1d65ea41bdcb9985726c0cc2b7a27c9c45 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:50:30 +0100
Subject: [PATCH 06/16] Update content/docs/components-and-props.md (Line 25)

- Missing space before colons

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 46d4bb4fb..af58efd29 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -22,7 +22,7 @@ Conceptuellement, les composants sont comme des fonctions JavaScript. Ils accept
 
 ## Fonctions Composants et Composants à Base de Classes {#function-and-class-components}
 
-Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript:
+Le moyen le plus simple de définir un composant consiste à écrire une fonction JavaScript :
 
 ```js
 function Welcome(props) {

From ccd2f3c54f492760106d91988ffdd91a383ee5cf Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:53:16 +0100
Subject: [PATCH 07/16] Update content/docs/components-and-props.md (Line 33)

- Missing double quotes replacement
- Wrong translation of "stands for"

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index af58efd29..605138c49 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -30,7 +30,7 @@ function Welcome(props) {
 }
 ```
 
-Cette fonction est un composant React valide car elle accepte un seul argument "props" (qui se traduit par "propriétés") contenant des données et renvoie un élément React. Nous appelons de tels composants "fonctions composants" car sont littéralement des fonctions JavaScript.
+Cette fonction est un composant React valide car elle accepte un seul argument « props » (qui signifie « propriétés ») contenant des données, et renvoie un élément React. Nous appelons de tels composants des « fonctions composants », car ce sont littéralement des fonctions JavaScript.
 
 Vous pouvez également utiliser une [classe ES6](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes) pour définir un composant:
 

From a4c088148c0398a802788a0bb9592bba49ec0a58 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:54:07 +0100
Subject: [PATCH 08/16] Update content/docs/components-and-props.md (Line 248)

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 605138c49..3125c759a 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -245,7 +245,7 @@ function sum(a, b) {
 }
 ```
 
-Ces fonctions sont dites ["pure"](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu'ils ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour leurs entrées respectives.
+Ces fonctions sont dites [« pures »](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu'elles ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour les mêmes entrées.
 
 En revanche, cette fonction est impure car elle change sa propre entrée:
 

From 764a84c9163b4a45fed3a5b3135305b7d62d3e9d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:57:33 +0100
Subject: [PATCH 09/16] Update content/docs/components-and-props.md (Line 35)

- Missing space before colons

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 3125c759a..3d6562153 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -32,7 +32,7 @@ function Welcome(props) {
 
 Cette fonction est un composant React valide car elle accepte un seul argument « props » (qui signifie « propriétés ») contenant des données, et renvoie un élément React. Nous appelons de tels composants des « fonctions composants », car ce sont littéralement des fonctions JavaScript.
 
-Vous pouvez également utiliser une [classe ES6](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes) pour définir un composant:
+Vous pouvez également utiliser une [classe ES6](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Classes) pour définir un composant :
 
 ```js
 class Welcome extends React.Component {

From 72c04f5f041487181d614142b118ee5f9e40ef94 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 11 Feb 2019 23:58:23 +0100
Subject: [PATCH 10/16] Update content/docs/components-and-props.md (Line 45)

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 3d6562153..755414acc 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -42,7 +42,7 @@ class Welcome extends React.Component {
 }
 ```
 
-Les deux composants ci-dessus sont équivalents d'un point de vue React.
+Les deux composants ci-dessus sont équivalents du point de vue de React.
 
 Les classes possèdent quelques fonctionnalités supplémentaires dont nous discuterons dans les [sections suivantes](/docs/state-and-lifecycle.html). En attendant, nous utiliserons les fonctions composants pour leur forme concise.
 

From 2e39d9017862b1a41c265d5f250f11adad0ed16d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 12 Feb 2019 00:44:43 +0100
Subject: [PATCH 11/16] Apply suggestions from code review

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 38 ++++++++++++++--------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 755414acc..2775bb28f 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -44,9 +44,9 @@ class Welcome extends React.Component {
 
 Les deux composants ci-dessus sont équivalents du point de vue de React.
 
-Les classes possèdent quelques fonctionnalités supplémentaires dont nous discuterons dans les [sections suivantes](/docs/state-and-lifecycle.html). En attendant, nous utiliserons les fonctions composants pour leur forme concise.
+Les classes possèdent quelques fonctionnalités supplémentaires dont nous discuterons dans les [prochaines sections](/docs/state-and-lifecycle.html). En attendant, nous utiliserons les fonctions composants pour leur concision.
 
-## Rendu d'un Component {#rendering-a-component}
+## Produire le rendu d'un Component {#rendering-a-component}
 
 Jusqu’ici, nous avons uniquement rencontré des éléments React qui représentent des balises DOM :
 
@@ -60,7 +60,7 @@ Cependant, ces éléments peuvent également représenter des composants défini
 const element = <Welcome name="Sara" />;
 ```
 
-Lorsque React trouve un élément représentant un composant défini par l'utilisateur, il transmet les attributs JSX à ce composant sous la forme d'un objet unique. Nous appelons cet objet "props".
+Lorsque React rencontre un élément représentant un composant défini par l'utilisateur, il transmet les attributs JSX à ce composant sous la forme d'un objet unique. Nous appelons cet objet « props ».
 
 Par exemple, ce code affiche "Bonjour, Sara" sur la page:
 
@@ -83,19 +83,19 @@ Récapitulons ce qui se passe dans cet exemple:
 1. On appelle `ReactDOM.render()` avec l'élément `<Welcome name="Sara" />`.
 2. React appelle le composant `Welcome` avec comme props `{name: 'Sara'}`.
 3. Notre composant `Welcome` retourne un élément `<h1>Bonjour, Sara</h1>` pour résultat.
-4. Le DOM React met à jour efficacement le DOM de manière à correspondre à `<h1>Bonjour, Sara</h1>`.
+4. React DOM met à jour efficacement le DOM pour correspondre à `<h1>Bonjour, Sara</h1>`.
 
 >**Note:** Commencez toujours vos noms de composants par une majuscule.
 >
->React concidère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, `<div />` représente une balise HTML div, mais `<Welcome />` représente un composant et nécessite `Welcome` pour appartenir aux contexte d'exécution.
+>React considère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, `<div />` représente une balise HTML div, mais `<Welcome />` représente un composant, et exige que l’identifiant `Welcome` existe dans la portée courante.
 >
->Vous pouvez en apprendre plus sur le raisonnement qui se cache derrière cette convention [ici.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
+>Vous pouvez en apprendre plus sur le raisonnement qui sous-tend cette convention [ici.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
 
-## Composition de Componsants {#composing-components}
+## Composition de Composants {#composing-components}
 
-Les composants peuvent faire référence à d'autres composants dans leur sortie. Ça nous permet d'utiliser la même abstraction de composant pour n'importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran: dans React, ils sont généralement tous exprimées par des composants.
+Les composants peuvent faire référence à d'autres composants dans leur sortie. Ça nous permet d'utiliser la même abstraction de composants pour n'importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran: dans React, ils sont généralement tous exprimés par des composants.
 
-Par exemple, nous pouvons créer un composant `App` qui fait un rendu mutliple du composant ` Welcome`:
+Par exemple, nous pouvons créer un composant `App` qui utilise plusieurs fois ` Welcome` :
 
 ```js{8-10}
 function Welcome(props) {
@@ -120,13 +120,13 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](codepen://components-and-props/composing-components)
 
-En règle générale, les nouvelles applications React n'ont un seul composant `App` en haut de leur hiérarchie.  Cependant, si vous intégrez React à une application existante, vous pouvez commencer par un petit composant comme `Button` et vous diriger progressivement vers le haut de la hiérarchie.
+En règle générale, les nouvelles applications React ont un seul composant `App` à la racine.  En revanche, si vous intégrez React à une application existante, vous pouvez commencer tout en bas par un petit composant comme `Button` et remonter progressivement la hiérarchie des vues.
 
 ## Extraire des Composants {#extracting-components}
 
 N'ayez pas peur de scinder des composants en composants plus petits.
 
-Prennons par exemple ce composent `Comment`:
+Prennons par exemple ce composant `Comment`:
 
 ```js
 function Comment(props) {
@@ -171,7 +171,7 @@ function Avatar(props) {
 }
 ```
 
-Le composant `Avatar` n'a pas besoin de savoir qu'il est rendu dans un composant ` Comment`. C'est pourquoi nous avons donné à ses props un nom plus générique: `user` plutôt que` author`.
+Le composant `Avatar` n'a pas besoin de savoir qu'il figure dans un composant `Comment`. C'est pourquoi nous avons donné à sa prop un nom plus générique : `user` plutôt que `author`.
 
 Nous vous recommandons de nommer les props du point de vue du composant plutôt que de celui du contexte dans lequel il est utilisé.
 
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-Ensuite, nous allons extraire un composant `UserInfo` qui effectue le rendu du composant `Avatar` à côté du nom de l'utilisateur:
+Ensuite, nous allons extraire un composant `UserInfo` qui affiche un `Avatar` à côté du nom de l'utilisateur :
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-Ce qui nous permet de simplifer encore plus `Comment`:
+Ce qui nous permet de simplifier encore davantage `Comment`:
 
 ```js{4}
 function Comment(props) {
@@ -233,7 +233,7 @@ function Comment(props) {
 
 [**Essayer sur CodePen**](codepen://components-and-props/extracting-components-continued)
 
-Au début, extraire des composants peut vous sembler fastidieux, mais disposer d'une palette de composants réutilisables s'avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`,` Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (` App`, `FeedStory`, 'Comment` ), c’est un bon candidat pour être un composant réutilisable.
+Au début, extraire des composants peut vous sembler fastidieux, mais disposer d'une palette de composants réutilisables s'avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`, `Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (`App`, `FeedStory`, `Comment`), c’est un bon candidat pour un composant réutilisable.
 
 ## Les Props en Lecture Seule {#props-are-read-only}
 
@@ -247,7 +247,7 @@ function sum(a, b) {
 
 Ces fonctions sont dites [« pures »](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu'elles ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour les mêmes entrées.
 
-En revanche, cette fonction est impure car elle change sa propre entrée:
+En revanche, cette fonction est impure car elle modifie sa propre entrée:
 
 ```js
 function withdraw(account, amount) {
@@ -255,8 +255,8 @@ function withdraw(account, amount) {
 }
 ```
 
-React est assez flexible mais possède une règle stricte:
+React est plutôt flexible mais applique une règle stricte :
 
-**Tous les composants React doivent agir comme des fonctions pures vis-à-vis de leurs proprs.**
+**Tous les composants React doivent agir comme des fonctions pures vis-à-vis de leurs props.**
 
-Bien entendu, les interfaces utilisateur des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous introduirons un nouveau concept "d'état" (State). Le State permet aux composants React de modifier leur sortie au fil du temps aux regards des actions de l'utilisateur, des réponses réseau et à tout autre chose, mais toujours sans enfreindre cette règle.
+Bien entendu, les interfaces utilisateurs des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous présenterons un nouveau concept « d'état local ». L’état local permet aux composants React de modifier leur sortie au fil du temps en fonction des actions de l'utilisateur, des réponses réseau et de n’importe quoi d’autre, mais sans enfreindre cette règle.

From 9a582e53544ebcd6fd4f1095feaf832f7ddcf260 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 12 Feb 2019 15:50:43 +0100
Subject: [PATCH 12/16] Update components-and-props.md

---
 content/docs/components-and-props.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 9c283e090..8980f0605 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -89,7 +89,7 @@ Récapitulons ce qui se passe dans cet exemple:
 >
 >React considère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, `<div />` représente une balise HTML div, mais `<Welcome />` représente un composant, et exige que l’identifiant `Welcome` existe dans la portée courante.
 >
->Pour en en apprendre davantage sur le raisonnement qui sous-tend cette convention, lisez donc [JS en Profondeur](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
+>Pour en en apprendre davantage sur le raisonnement qui sous-tend cette convention, lisez donc [JSX en Profondeur](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized).
 
 ## Composition de Composants {#composing-components}
 

From 286d8ce423fdefc64cf34b9cd56d20989a40c129 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 12 Feb 2019 23:30:59 +0100
Subject: [PATCH 13/16] Apply suggestions from code review

Co-Authored-By: Geslain <geslain.dahan@gmail.com>
---
 content/docs/components-and-props.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 8980f0605..b1b4a90d4 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -158,7 +158,7 @@ Il accepte `author` (un objet),` text` (une chaîne de caractères) et `date` (u
 
 Les différentes imbrications rendent la modification de ce composant fastidieuse, et il est également compliqué de de réutiliser des parties individuelles de celui-ci. Essayons donc d'extraire quelques composants.
 
-Tout d'abord, nous allons extraire `Avatar`:
+Pour commencer, nous allons extraire `Avatar`:
 
 ```js{3-6}
 function Avatar(props) {
@@ -175,7 +175,7 @@ Le composant `Avatar` n'a pas besoin de savoir qu'il figure dans un composant `C
 
 Nous vous recommandons de nommer les props du point de vue du composant plutôt que de celui du contexte dans lequel il est utilisé.
 
-On peut maintenant un peu simplifier `Comment`:
+On peut maintenant simplifier un poil `Comment` :
 
 ```js{5}
 function Comment(props) {
@@ -235,7 +235,7 @@ function Comment(props) {
 
 Au début, extraire des composants peut vous sembler fastidieux, mais disposer d'une palette de composants réutilisables s'avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`, `Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (`App`, `FeedStory`, `Comment`), c’est un bon candidat pour un composant réutilisable.
 
-## Les Props en Lecture Seule {#props-are-read-only}
+## Les Props Sont en Lecture Seule {#props-are-read-only}
 
 Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum`:
 

From 0fc01c4f709530b263c84ea200f4fa440a7f88e1 Mon Sep 17 00:00:00 2001
From: Geslain Dahan <geslain.dahan@keyrus.com>
Date: Tue, 12 Feb 2019 23:39:15 +0100
Subject: [PATCH 14/16] =?UTF-8?q?Fixes=20on=20some=20characters:=20-=20Mis?=
 =?UTF-8?q?sing=20space=20before=20colons=20-=20Change=20'=20for=20?=
 =?UTF-8?q?=E2=80=99=20-=20Change=20""=20for=20=C2=AB=20=C2=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/docs/components-and-props.md | 44 ++++++++++++++--------------
 1 file changed, 22 insertions(+), 22 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index b1b4a90d4..91cf4cfeb 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -16,9 +16,9 @@ prev: rendering-elements.html
 next: state-and-lifecycle.html
 ---
 
-Les composants vous permettent de découper l'interface utilisateur en éléments indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composants. Vous trouverez une [référence détaillée de l'API des composants ici](/docs/react-component.html).
+Les composants vous permettent de découper l’interface utilisateur en éléments indépendants et réutilisables, vous permettant ainsi de considérer chaque élément de manière isolée. Cette page fournit une introduction au concept de composants. Vous trouverez une [référence détaillée de l’API des composants ici](/docs/react-component.html).
 
-Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées quelconques (appelées « props ») et renvoient des éléments React décrivant ce qui doit apparaître à l'écran.
+Conceptuellement, les composants sont comme des fonctions JavaScript. Ils acceptent des entrées quelconques (appelées « props ») et renvoient des éléments React décrivant ce qui doit apparaître à l’écran.
 
 ## Fonctions Composants et Composants à Base de Classes {#function-and-class-components}
 
@@ -46,7 +46,7 @@ Les deux composants ci-dessus sont équivalents du point de vue de React.
 
 Les classes possèdent quelques fonctionnalités supplémentaires dont nous discuterons dans les [prochaines sections](/docs/state-and-lifecycle.html). En attendant, nous utiliserons les fonctions composants pour leur concision.
 
-## Produire le rendu d'un Component {#rendering-a-component}
+## Produire le rendu d’un Component {#rendering-a-component}
 
 Jusqu’ici, nous avons uniquement rencontré des éléments React qui représentent des balises DOM :
 
@@ -54,15 +54,15 @@ Jusqu’ici, nous avons uniquement rencontré des éléments React qui représen
 const element = <div />;
 ```
 
-Cependant, ces éléments peuvent également représenter des composants définis par l'utilisateur:
+Cependant, ces éléments peuvent également représenter des composants définis par l’utilisateur :
 
 ```js
 const element = <Welcome name="Sara" />;
 ```
 
-Lorsque React rencontre un élément représentant un composant défini par l'utilisateur, il transmet les attributs JSX à ce composant sous la forme d'un objet unique. Nous appelons cet objet « props ».
+Lorsque React rencontre un élément représentant un composant défini par l’utilisateur, il transmet les attributs JSX à ce composant sous la forme d’un objet unique. Nous appelons cet objet « props ».
 
-Par exemple, ce code affiche "Bonjour, Sara" sur la page:
+Par exemple, ce code affiche « Bonjour, Sara » sur la page :
 
 ```js{1,5}
 function Welcome(props) {
@@ -78,9 +78,9 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](codepen://components-and-props/rendering-a-component)
 
-Récapitulons ce qui se passe dans cet exemple:
+Récapitulons ce qui se passe dans cet exemple :
 
-1. On appelle `ReactDOM.render()` avec l'élément `<Welcome name="Sara" />`.
+1. On appelle `ReactDOM.render()` avec l’élément `<Welcome name="Sara" />`.
 2. React appelle le composant `Welcome` avec comme props `{name: 'Sara'}`.
 3. Notre composant `Welcome` retourne un élément `<h1>Bonjour, Sara</h1>` pour résultat.
 4. React DOM met à jour efficacement le DOM pour correspondre à `<h1>Bonjour, Sara</h1>`.
@@ -93,7 +93,7 @@ Récapitulons ce qui se passe dans cet exemple:
 
 ## Composition de Composants {#composing-components}
 
-Les composants peuvent faire référence à d'autres composants dans leur sortie. Ça nous permet d'utiliser la même abstraction de composants pour n'importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran: dans React, ils sont généralement tous exprimés par des composants.
+Les composants peuvent faire référence à d’autres composants dans leur sortie. Ça nous permet d’utiliser la même abstraction de composants pour n’importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran : dans React, ils sont généralement tous exprimés par des composants.
 
 Par exemple, nous pouvons créer un composant `App` qui utilise plusieurs fois ` Welcome` :
 
@@ -124,9 +124,9 @@ En règle générale, les nouvelles applications React ont un seul composant `Ap
 
 ## Extraire des Composants {#extracting-components}
 
-N'ayez pas peur de scinder des composants en composants plus petits.
+N’ayez pas peur de scinder des composants en composants plus petits.
 
-Prennons par exemple ce composant `Comment`:
+Prennons par exemple ce composant `Comment` :
 
 ```js
 function Comment(props) {
@@ -156,9 +156,9 @@ function Comment(props) {
 
 Il accepte `author` (un objet),` text` (une chaîne de caractères) et `date` (une date) comme props, et décrit un commentaire sur un réseau social en ligne.
 
-Les différentes imbrications rendent la modification de ce composant fastidieuse, et il est également compliqué de de réutiliser des parties individuelles de celui-ci. Essayons donc d'extraire quelques composants.
+Les nombreuses imbrications au sein du composant le rendent difficile à maintenir, et nous empêchent d’en réutiliser des parties individuelles. Essayons donc d'en extraire quelques composants.
 
-Pour commencer, nous allons extraire `Avatar`:
+Pour commencer, nous allons extraire `Avatar` :
 
 ```js{3-6}
 function Avatar(props) {
@@ -171,11 +171,11 @@ function Avatar(props) {
 }
 ```
 
-Le composant `Avatar` n'a pas besoin de savoir qu'il figure dans un composant `Comment`. C'est pourquoi nous avons donné à sa prop un nom plus générique : `user` plutôt que `author`.
+Le composant `Avatar` n’a pas besoin de savoir qu’il figure dans un composant `Comment`. C’est pourquoi nous avons donné à sa prop un nom plus générique : `user` plutôt que `author`.
 
 Nous vous recommandons de nommer les props du point de vue du composant plutôt que de celui du contexte dans lequel il est utilisé.
 
-On peut maintenant simplifier un poil `Comment` :
+On peut maintenant simplifier un poil`Comment`  :
 
 ```js{5}
 function Comment(props) {
@@ -198,7 +198,7 @@ function Comment(props) {
 }
 ```
 
-Ensuite, nous allons extraire un composant `UserInfo` qui affiche un `Avatar` à côté du nom de l'utilisateur :
+Ensuite, nous allons extraire un composant `UserInfo` qui affiche un `Avatar` à côté du nom de l’utilisateur :
 
 ```js{3-8}
 function UserInfo(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-Ce qui nous permet de simplifier encore davantage `Comment`:
+Ce qui nous permet de simplifier encore davantage `Comment` :
 
 ```js{4}
 function Comment(props) {
@@ -233,11 +233,11 @@ function Comment(props) {
 
 [**Essayer sur CodePen**](codepen://components-and-props/extracting-components-continued)
 
-Au début, extraire des composants peut vous sembler fastidieux, mais disposer d'une palette de composants réutilisables s'avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`, `Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (`App`, `FeedStory`, `Comment`), c’est un bon candidat pour un composant réutilisable.
+Au début, extraire des composants peut vous sembler fastidieux, mais disposer d’une palette de composants réutilisables s’avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`, `Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (`App`, `FeedStory`, `Comment`), c’est un bon candidat pour un composant réutilisable.
 
 ## Les Props Sont en Lecture Seule {#props-are-read-only}
 
-Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum`:
+Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum` :
 
 ```js
 function sum(a, b) {
@@ -245,9 +245,9 @@ function sum(a, b) {
 }
 ```
 
-Ces fonctions sont dites [« pures »](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu'elles ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour les mêmes entrées.
+Ces fonctions sont dites [« pures »](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu’elles ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour les mêmes entrées.
 
-En revanche, cette fonction est impure car elle modifie sa propre entrée:
+En revanche, cette fonction est impure car elle modifie sa propre entrée :
 
 ```js
 function withdraw(account, amount) {
@@ -259,4 +259,4 @@ React est plutôt flexible mais applique une règle stricte :
 
 **Tous les composants React doivent agir comme des fonctions pures vis-à-vis de leurs props.**
 
-Bien entendu, les interfaces utilisateurs des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous présenterons un nouveau concept « d'état local ». L’état local permet aux composants React de modifier leur sortie au fil du temps en fonction des actions de l'utilisateur, des réponses réseau et de n’importe quoi d’autre, mais sans enfreindre cette règle.
+Bien entendu, les interfaces utilisateurs des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous présenterons un nouveau concept « d’état local ». L’état local permet aux composants React de modifier leur sortie au fil du temps en fonction des actions de l’utilisateur, des réponses réseau et de n’importe quoi d’autre, mais sans enfreindre cette règle.

From b99dbb012689a292bb1dde338f4c985c91bd93b8 Mon Sep 17 00:00:00 2001
From: Geslain Dahan <geslain.dahan@keyrus.com>
Date: Tue, 12 Feb 2019 23:51:17 +0100
Subject: [PATCH 15/16] Add non-breaking spaces

---
 content/docs/components-and-props.md | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 91cf4cfeb..47c99d645 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -54,7 +54,7 @@ Jusqu’ici, nous avons uniquement rencontré des éléments React qui représen
 const element = <div />;
 ```
 
-Cependant, ces éléments peuvent également représenter des composants définis par l’utilisateur :
+Cependant, ces éléments peuvent également représenter des composants définis par l’utilisateur :
 
 ```js
 const element = <Welcome name="Sara" />;
@@ -62,7 +62,7 @@ const element = <Welcome name="Sara" />;
 
 Lorsque React rencontre un élément représentant un composant défini par l’utilisateur, il transmet les attributs JSX à ce composant sous la forme d’un objet unique. Nous appelons cet objet « props ».
 
-Par exemple, ce code affiche « Bonjour, Sara » sur la page :
+Par exemple, ce code affiche « Bonjour, Sara » sur la page :
 
 ```js{1,5}
 function Welcome(props) {
@@ -78,7 +78,7 @@ ReactDOM.render(
 
 [**Essayer sur CodePen**](codepen://components-and-props/rendering-a-component)
 
-Récapitulons ce qui se passe dans cet exemple :
+Récapitulons ce qui se passe dans cet exemple :
 
 1. On appelle `ReactDOM.render()` avec l’élément `<Welcome name="Sara" />`.
 2. React appelle le composant `Welcome` avec comme props `{name: 'Sara'}`.
@@ -93,7 +93,7 @@ Récapitulons ce qui se passe dans cet exemple :
 
 ## Composition de Composants {#composing-components}
 
-Les composants peuvent faire référence à d’autres composants dans leur sortie. Ça nous permet d’utiliser la même abstraction de composants pour n’importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran : dans React, ils sont généralement tous exprimés par des composants.
+Les composants peuvent faire référence à d’autres composants dans leur sortie. Ça nous permet d’utiliser la même abstraction de composants pour n’importe quel niveau de détail. Un bouton, un formulaire, une boîte de dialogue, un écran : dans React, ils sont généralement tous exprimés par des composants.
 
 Par exemple, nous pouvons créer un composant `App` qui utilise plusieurs fois ` Welcome` :
 
@@ -126,7 +126,7 @@ En règle générale, les nouvelles applications React ont un seul composant `Ap
 
 N’ayez pas peur de scinder des composants en composants plus petits.
 
-Prennons par exemple ce composant `Comment` :
+Prennons par exemple ce composant `Comment` :
 
 ```js
 function Comment(props) {
@@ -158,7 +158,7 @@ Il accepte `author` (un objet),` text` (une chaîne de caractères) et `date` (u
 
 Les nombreuses imbrications au sein du composant le rendent difficile à maintenir, et nous empêchent d’en réutiliser des parties individuelles. Essayons donc d'en extraire quelques composants.
 
-Pour commencer, nous allons extraire `Avatar` :
+Pour commencer, nous allons extraire `Avatar` :
 
 ```js{3-6}
 function Avatar(props) {
@@ -213,7 +213,7 @@ function UserInfo(props) {
 }
 ```
 
-Ce qui nous permet de simplifier encore davantage `Comment` :
+Ce qui nous permet de simplifier encore davantage `Comment` :
 
 ```js{4}
 function Comment(props) {
@@ -237,8 +237,8 @@ Au début, extraire des composants peut vous sembler fastidieux, mais disposer d
 
 ## Les Props Sont en Lecture Seule {#props-are-read-only}
 
-Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum` :
-
+Que vous déclariez un composant [sous forme de fonction ou de classe](#function-and-class-components), il ne doit jamais modifier ses propres props. Considérons cette fonction `sum` :
+ 
 ```js
 function sum(a, b) {
   return a + b;
@@ -247,7 +247,7 @@ function sum(a, b) {
 
 Ces fonctions sont dites [« pures »](https://fr.wikipedia.org/wiki/Fonction_pure) parce qu’elles ne tentent pas de modifier leurs entrées et retournent toujours le même résultat pour les mêmes entrées.
 
-En revanche, cette fonction est impure car elle modifie sa propre entrée :
+En revanche, cette fonction est impure car elle modifie sa propre entrée :
 
 ```js
 function withdraw(account, amount) {

From f890c9d03f095622ebab4d14ba553980b12b6766 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 11:29:03 +0100
Subject: [PATCH 16/16] Final tweaks to Components and Props for better
 rendering

---
 content/docs/components-and-props.md | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/content/docs/components-and-props.md b/content/docs/components-and-props.md
index 47c99d645..66b3ca729 100644
--- a/content/docs/components-and-props.md
+++ b/content/docs/components-and-props.md
@@ -48,13 +48,13 @@ Les classes possèdent quelques fonctionnalités supplémentaires dont nous disc
 
 ## Produire le rendu d’un Component {#rendering-a-component}
 
-Jusqu’ici, nous avons uniquement rencontré des éléments React qui représentent des balises DOM :
+Jusqu’ici, nous n’avons rencontré que des éléments React représentant des balises DOM :
 
 ```js
 const element = <div />;
 ```
 
-Cependant, ces éléments peuvent également représenter des composants définis par l’utilisateur :
+Mais ces éléments peuvent également représenter des composants définis par l’utilisateur :
 
 ```js
 const element = <Welcome name="Sara" />;
@@ -76,7 +76,7 @@ ReactDOM.render(
 );
 ```
 
-[**Essayer sur CodePen**](codepen://components-and-props/rendering-a-component)
+**[Essayer sur CodePen](codepen://components-and-props/rendering-a-component)**
 
 Récapitulons ce qui se passe dans cet exemple :
 
@@ -85,7 +85,7 @@ Récapitulons ce qui se passe dans cet exemple :
 3. Notre composant `Welcome` retourne un élément `<h1>Bonjour, Sara</h1>` pour résultat.
 4. React DOM met à jour efficacement le DOM pour correspondre à `<h1>Bonjour, Sara</h1>`.
 
->**Note:** Commencez toujours vos noms de composants par une majuscule.
+>**Remarque :** commencez toujours vos noms de composants par une majuscule.
 >
 >React considère les composants commençant par des lettres minuscules comme des balises DOM. Par exemple, `<div />` représente une balise HTML div, mais `<Welcome />` représente un composant, et exige que l’identifiant `Welcome` existe dans la portée courante.
 >
@@ -118,7 +118,7 @@ ReactDOM.render(
 );
 ```
 
-[**Essayer sur CodePen**](codepen://components-and-props/composing-components)
+**[Essayer sur CodePen](codepen://components-and-props/composing-components)**
 
 En règle générale, les nouvelles applications React ont un seul composant `App` à la racine.  En revanche, si vous intégrez React à une application existante, vous pouvez commencer tout en bas par un petit composant comme `Button` et remonter progressivement la hiérarchie des vues.
 
@@ -126,7 +126,7 @@ En règle générale, les nouvelles applications React ont un seul composant `Ap
 
 N’ayez pas peur de scinder des composants en composants plus petits.
 
-Prennons par exemple ce composant `Comment` :
+Prenons par exemple ce composant `Comment` :
 
 ```js
 function Comment(props) {
@@ -152,9 +152,9 @@ function Comment(props) {
 }
 ```
 
-[**Essayer sur CodePen**](codepen://components-and-props/extracting-components)
+**[Essayer sur CodePen](codepen://components-and-props/extracting-components)**
 
-Il accepte `author` (un objet),` text` (une chaîne de caractères) et `date` (une date) comme props, et décrit un commentaire sur un réseau social en ligne.
+Il accepte comme props `author` (un objet), `text` (une chaîne de caractères) et `date` (une date), et décrit un commentaire sur un réseau social en ligne.
 
 Les nombreuses imbrications au sein du composant le rendent difficile à maintenir, et nous empêchent d’en réutiliser des parties individuelles. Essayons donc d'en extraire quelques composants.
 
@@ -231,7 +231,7 @@ function Comment(props) {
 }
 ```
 
-[**Essayer sur CodePen**](codepen://components-and-props/extracting-components-continued)
+**[Essayer sur CodePen](codepen://components-and-props/extracting-components-continued)**
 
 Au début, extraire des composants peut vous sembler fastidieux, mais disposer d’une palette de composants réutilisables s’avère rentable sur des applications de plus grande taille. En règle générale, si une partie de votre interface utilisateur est utilisée plusieurs fois (`Button`, `Panel`, `Avatar`) ou si elle est suffisamment complexe en elle-même (`App`, `FeedStory`, `Comment`), c’est un bon candidat pour un composant réutilisable.
 
@@ -257,6 +257,6 @@ function withdraw(account, amount) {
 
 React est plutôt flexible mais applique une règle stricte :
 
-**Tous les composants React doivent agir comme des fonctions pures vis-à-vis de leurs props.**
+**Tout composant React doit agir comme une fonction pure vis-à-vis de ses props.**
 
-Bien entendu, les interfaces utilisateurs des applications sont dynamiques et évoluent dans le temps. Dans la [section suivante](/docs/state-and-lifecycle.html), nous présenterons un nouveau concept « d’état local ». L’état local permet aux composants React de modifier leur sortie au fil du temps en fonction des actions de l’utilisateur, des réponses réseau et de n’importe quoi d’autre, mais sans enfreindre cette règle.
+Bien entendu, les interfaces utilisateurs des applications sont dynamiques et évoluent dans le temps. Dans la [prochaine section](/docs/state-and-lifecycle.html), nous présenterons un nouveau concept « d’état local ». L’état local permet aux composants React de modifier leur sortie au fil du temps en fonction des actions de l’utilisateur, des réponses réseau et de n’importe quoi d’autre, mais sans enfreindre cette règle.