From 884e8db02423f7964e0ca147780f405a9234804a Mon Sep 17 00:00:00 2001
From: Laure RC <laure.retru-chavastel@gadz.org>
Date: Thu, 28 Feb 2019 23:03:45 +0100
Subject: [PATCH 1/6] Start working on render props traduction

---
 content/docs/nav.yml         |  2 +-
 content/docs/render-props.md | 72 ++++++++++++++++++------------------
 2 files changed, 37 insertions(+), 37 deletions(-)

diff --git a/content/docs/nav.yml b/content/docs/nav.yml
index 627af6176..28a3cec63 100644
--- a/content/docs/nav.yml
+++ b/content/docs/nav.yml
@@ -68,7 +68,7 @@
     - id: refs-and-the-dom
       title: Refs and the DOM
     - id: render-props
-      title: Render Props
+      title: Props de rendu
     - id: static-type-checking
       title: Static Type Checking
     - id: strict-mode
diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index c9b6f9c04..7b382eb39 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -1,28 +1,28 @@
 ---
 id: render-props
-title: Render Props
+title: Props de rendu
 permalink: docs/render-props.html
 ---
 
-The term ["render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) refers to a technique for sharing code between React components using a prop whose value is a function.
+Le terme ["prop de rendu"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
 
-A component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.
+Un composant avec une propriété render prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu.
 
 ```jsx
 <DataProvider render={data => (
-  <h1>Hello {data.target}</h1>
+  <h1>Bonjour {data.target}</h1>
 )}/>
 ```
 
-Libraries that use render props include [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) and [Downshift](https://github.com/paypal/downshift).
+Des bibliothèques telles que [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) et [Downshift](https://github.com/paypal/downshift) utilisent ces props de rendu.
 
-In this document, we’ll discuss why render props are useful, and how to write your own.
+Dans cet article, nous vous exposerons pourquoi les props de rendu sont pratiques, et comment écrire les vôtres.
 
-## Use Render Props for Cross-Cutting Concerns {#use-render-props-for-cross-cutting-concerns}
+## Utiliser les props de rendu pour des questions transversales {#use-render-props-for-cross-cutting-concerns}
 
-Components are the primary unit of code reuse in React, but it's not always obvious how to share the state or behavior that one component encapsulates to other components that need that same state.
+Les composants sont l'unité de base de réutilisation du code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant à d'autres composants qui auraient besoin de ce même état.
 
-For example, the following component tracks the mouse position in a web app:
+Par exemple, le composant suivant traque la position de la souris dans une application web :
 
 ```js
 class MouseTracker extends React.Component {
@@ -42,22 +42,22 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Move the mouse around!</h1>
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        <h1>Déplacez votre souris sur l'écran !</h1>
+        <p>La position actuelle de la souris est ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
 }
 ```
 
-As the cursor moves around the screen, the component displays its (x, y) coordinates in a `<p>`.
+Lorsque le curseur se déplace sur l'écran, le composant affiche ses coordonnées (x,y) dans un `<p>`.
 
-Now the question is: How can we reuse this behavior in another component? In other words, if another component needs to know about the cursor position, can we encapsulate that behavior so that we can easily share it with that component?
+La question qui se pose maintenant est : Comment pouvons-nous réutiliser ce comportement dans un autre composant ?En d'autres mots, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
 
-Since components are the basic unit of code reuse in React, let's try refactoring the code a bit to use a `<Mouse>` component that encapsulates the behavior we need to reuse elsewhere.
+Puisque les composants sont l'unité de réutilisation de code dans React, essayons de refactoriser un peu le code pour pouvoir utiliser un composant `<Mouse>` qui encapsule le comportement dont nous avons besoin ailleurs.
 
 ```js
-// The <Mouse> component encapsulates the behavior we need...
+// Le composant <Mouse> encapsule le comportement dont nous avons besoin...
 class Mouse extends React.Component {
   constructor(props) {
     super(props);
@@ -76,8 +76,8 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...but how do we render something other than a <p>? */}
-        <p>The current mouse position is ({this.state.x}, {this.state.y})</p>
+        {/* ...mais comment rendre autre chose qu'un <p> ? */}
+        <p>La position actuelle de la souris est ({this.state.x}, {this.state.y})</p>
       </div>
     );
   }
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Déplacez votre souris sur l'écran !</h1>
         <Mouse />
       </div>
     );
@@ -95,18 +95,18 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now the `<Mouse>` component encapsulates all behavior associated with listening for `mousemove` events and storing the (x, y) position of the cursor, but it's not yet truly reusable.
+Le composant `<Mouse>` encapsule maintenant tous les comportements associés à l'écoute des évènements `mousemove` et à la sauvegarde de la position (x, y) du sauvegarde, mais il n'est pas encore tout à fait réutilisable.
 
-For example, let's say we have a `<Cat>` component that renders the image of a cat chasing the mouse around the screen. We might use a `<Cat mouse={{ x, y }}>` prop to tell the component the coordinates of the mouse so it knows where to position the image on the screen.
+Par exemple, supposons que nous avons un composant `<Cat>` qui rend une image de chat chassant une souris sur l'écran. Nous pourrions utiliser une propriété `<Cat mouse={{ x, y }}>` pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l'écran.
 
-As a first pass, you might try rendering the `<Cat>` *inside `<Mouse>`'s `render` method*, like this:
+En première tentative, vous essayeriez peut-être de rendre `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
 
 ```js
 class Cat extends React.Component {
   render() {
     const mouse = this.props.mouse;
     return (
-      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
+      <img src="/chat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
     );
   }
 }
@@ -130,10 +130,10 @@ class MouseWithCat extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          We could just swap out the <p> for a <Cat> here ... but then
-          we would need to create a separate <MouseWithSomethingElse>
-          component every time we need to use it, so <MouseWithCat>
-          isn't really reusable yet.
+          Nous pourrions simplement remplacer le <p> par un <Cat> ici...
+          mais nous devrions alors créer un composant séparé
+          <MouseWithSomethingElse> chaque fois que nous voudrions l'utiliser,
+          <MouseWithCat> n'est donc pas si réutilisable que ça pour le moment.
         */}
         <Cat mouse={this.state} />
       </div>
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Déplacez votre souris sur l'écran !</h1>
         <MouseWithCat />
       </div>
     );
@@ -153,16 +153,16 @@ class MouseTracker extends React.Component {
 }
 ```
 
-This approach will work for our specific use case, but we haven't achieved the objective of truly encapsulating the behavior in a reusable way. Now, every time we want the mouse position for a different use case, we have to create a new component (i.e. essentially another `<MouseWithCat>`) that renders something specifically for that use case.
+Cette approche fonctionnera dans notre cas d'utilisation, mais nous n'avons pas atteint notre objectif de vraiment encapsuler le comportement de façon réutilisable. En effet, chaque fois que nous aurons besoin de la position de la souris pour un cas d'utilisation différent, nous devrons créer un nouveau composant (i.e. pour ainsi dire un autre `<MouseWithCat>`) that renders something specifically for that use case.
 
-Here's where the render prop comes in: Instead of hard-coding a `<Cat>` inside a `<Mouse>` component, and effectively changing its rendered output, we can provide `<Mouse>` with a function prop that it uses to dynamically determine what to render–a render prop.
+C'est là que la propriété render entre en scène : au lieu d'écrire en dur un composant `<Cat>` dans un composant `<Mouse>`, et changer la valeur de sortie rendue, nous pouvons fournir `<Mouse>` avec une propriété qui est une fonction qui permet de déterminer dynamiquement ce qui doit être rendu, c'est-à-dire une render prop.
 
 ```js
 class Cat extends React.Component {
   render() {
     const mouse = this.props.mouse;
     return (
-      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
+      <img src="/chat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
     );
   }
 }
@@ -186,8 +186,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Instead of providing a static representation of what <Mouse> renders,
-          use the `render` prop to dynamically determine what to render.
+          Au lieu de fournir un représentation statique de ce que rend <Mouse>,
+          utilisez la prop `render` pour déterminer dynamiquement quoi rendre.
         */}
         {this.props.render(this.state)}
       </div>
@@ -199,7 +199,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Déplacez votre souris sur l'écran !</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -209,11 +209,11 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Now, instead of effectively cloning the `<Mouse>` component and hard-coding something else in its `render` method to solve for a specific use case, we provide a `render` prop that `<Mouse>` can use to dynamically determine what it renders.
+Dorénavant, au lieu de cloner le composant `<Mouse>` et d'écrire en dur quelque chose d'autre dans sa méthode `render` pour s'adapter à un cas d'utilisation, nous fournissons une prop `render` que `<Mouse>` peut utiliser pour déterminer dynamiquement quoi rendre.
 
-More concretely, **a render prop is a function prop that a component uses to know what to render.**
+Plus concrètement, **une prop de rendu est une propriété fonction qu'un composant utilise pour savoir quoi rendre.**
 
-This technique makes the behavior that we need to share extremely portable. To get that behavior, render a `<Mouse>` with a `render` prop that tells it what to render with the current (x, y) of the cursor.
+Cette technique facilite énormément le partage d'un comportement. Pour récupérer ce comportement, il suffit de faire le rendu d'un `<Mouse>` avec une propriété `render` qui lui dit quoi rendre avec les coordonnées (x, y) actuelles du curseur.
 
 One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
 

From 3aa954ce605af148fcd9a9c681bfda5b8be7eba8 Mon Sep 17 00:00:00 2001
From: Laure RC <laure.retru-chavastel@gadz.org>
Date: Wed, 6 Mar 2019 00:10:10 +0100
Subject: [PATCH 2/6] next step of traduction

---
 content/docs/render-props.md | 50 ++++++++++++++++++------------------
 1 file changed, 25 insertions(+), 25 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 7b382eb39..3f5f3c9c7 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -215,11 +215,11 @@ Plus concrètement, **une prop de rendu est une propriété fonction qu'un compo
 
 Cette technique facilite énormément le partage d'un comportement. Pour récupérer ce comportement, il suffit de faire le rendu d'un `<Mouse>` avec une propriété `render` qui lui dit quoi rendre avec les coordonnées (x, y) actuelles du curseur.
 
-One interesting thing to note about render props is that you can implement most [higher-order components](/docs/higher-order-components.html) (HOC) using a regular component with a render prop. For example, if you would prefer to have a `withMouse` HOC instead of a `<Mouse>` component, you could easily create one using a regular `<Mouse>` with a render prop:
+Un point intéressant à noter concernant les props de rendu est que vous pouvez implémenter la plupart des [composants d’ordre supérieur](/docs/higher-order-components.html) (HOC) en utilisant un composant classique avec une prop de rendu. Par exemple, si vous préférez avoir un HOC `withMouse` au lieu d'un composant`<Mouse>`, vous pouvez facilement en créer un en utilisant un composant `<Mouse>` avec une prop de rendu :
 
 ```js
-// If you really want a HOC for some reason, you can easily
-// create one using a regular component with a render prop!
+// Si, pour une raison ou une autre, vous voulez vraiment utiliser un HOC, vous pouvez
+// facilement en créer un en utilisant un composant classique avec une prop de rendu !
 function withMouse(Component) {
   return class extends React.Component {
     render() {
@@ -233,21 +233,21 @@ function withMouse(Component) {
 }
 ```
 
-So using a render prop makes it possible to use either pattern.
+Utiliser une prop de rendu rend donc possible l'utilisation des deux méthodes.
 
-## Using Props Other Than `render` {#using-props-other-than-render}
+## Utiliser d'autres propriétés que `render` {#using-props-other-than-render}
 
-It's important to remember that just because the pattern is called "render props" you don't *have to use a prop named `render` to use this pattern*. In fact, [*any* prop that is a function that a component uses to know what to render is technically a "render prop"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Il est important de se rappeler que *ce n'est pas parce que la méthode s'appelle "props de rendu" qu'il est obligatoire d'utiliser une propriété appelée `render` pour utiliser cette méthode*. En fait, [*n'importe quelle* propriété qui est utilisée par un composant pour savoir quoi renvoyer est techniquement une "prop de rendu" ](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
-Although the examples above use `render`, we could just as easily use the `children` prop!
+Même si les exemples ci-dessus utilise `render`, nous pourrions tout aussi simplement utiliser la propriété `children` !
 
 ```js
 <Mouse children={mouse => (
-  <p>The mouse position is {mouse.x}, {mouse.y}</p>
+  <p>La position de la souris est {mouse.x}, {mouse.y}</p>
 )}/>
 ```
 
-And remember, the `children` prop doesn't actually need to be named in the list of "attributes" in your JSX element. Instead, you can put it directly *inside* the element!
+Et rappelez-vous, la propriété `children` n'a en fait pas besoin d'être nommée dans la liste des "attributs" de votre élément JSX. Au lieu de ça, vous pouvez l'utiliser directement *dans* l'élément !
 
 ```js
 <Mouse>
@@ -257,9 +257,9 @@ And remember, the `children` prop doesn't actually need to be named in the list
 </Mouse>
 ```
 
-You'll see this technique used in the [react-motion](https://github.com/chenglou/react-motion) API.
+Vous pouvez découvrir l'utilisation de cette méthode dans l'API [react-motion](https://github.com/chenglou/react-motion).
 
-Since this technique is a little unusual, you'll probably want to explicitly state that `children` should be a function in your `propTypes` when designing an API like this.
+Comme cette méthode est un peu inhabituelle, vous aurez probablement envie de préciser que `children` devrait être une fonction dans vos `propTypes` au moment de faire le design de votre API de la manière suivante.
 
 ```js
 Mouse.propTypes = {
@@ -267,28 +267,28 @@ Mouse.propTypes = {
 };
 ```
 
-## Caveats {#caveats}
+## Exceptions {#caveats}
 
-### Be careful when using Render Props with React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
+### Soyez prudents lors de l'utilisation de props de rendu avec React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Using a render prop can negate the advantage that comes from using [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) if you create the function inside a `render` method. This is because the shallow prop comparison will always return `false` for new props, and each `render` in this case will generate a new value for the render prop.
+Utiliser une prop de rendu peut contrebalancer l'avantage apporté par l'utilisation de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si vous créer une fonction dans une méthode `render`. Cela est dû au fait que la comparaison superficielle des propriétés retournera toujours `false` pour les nouvelles propriétés, et que dans ce cas, chaque `render` génèrera une nouvelle valeur pour la prop de rendu.
 
-For example, continuing with our `<Mouse>` component from above, if `Mouse` were to extend `React.PureComponent` instead of `React.Component`, our example would look like this:
+Par exemple, en gardant l'exemple de notre composant `<Mouse>`, si `Mouse` étendait `React.PureComponent` au lieu de `React.Component`, notre exemple ressemblerait alors à ça :
 
 ```js
 class Mouse extends React.PureComponent {
-  // Same implementation as above...
+  // Même implémentation que plus haut...
 }
 
 class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Déplacez votre souris sur l'écran !</h1>
 
         {/*
-          This is bad! The value of the `render` prop will
-          be different on each render.
+          Il ne faut pas faire ça ! La valeur de la propriété `render`
+          sera différente à chaque render.
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -299,14 +299,14 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In this example, each time `<MouseTracker>` renders, it generates a new function as the value of the `<Mouse render>` prop, thus negating the effect of `<Mouse>` extending `React.PureComponent` in the first place!
+Dans cet exemple, à chaque fois que `<MouseTracker>` est rendu, une nouvelle fonction est générée comme valeur de la propriété `<Mouse render>`, ce qui annule l'effet de `<Mouse>` qui étend `React.PureComponent` !
 
-To get around this problem, you can sometimes define the prop as an instance method, like so:
+Pour éviter ce problème; vous pouvez parfois définir la propriété comme une méthode d'instance, de la façon suivante :
 
 ```js
 class MouseTracker extends React.Component {
-  // Defined as an instance method, `this.renderTheCat` always
-  // refers to *same* function when we use it in render
+  // Définie comme une méthode d'instance, `this.renderTheCat` se réfèrera
+  // toujours à la *même* fonction quand nous l'utiliserons dans le rendu
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }
@@ -314,7 +314,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Move the mouse around!</h1>
+        <h1>Déplacez votre souris sur l'écran !</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-In cases where you cannot define the prop statically (e.g. because you need to close over the component's props and/or state) `<Mouse>` should extend `React.Component` instead.
+Dans les cas où vous ne pourrez pas définir la propriété de manière statique (e.g. parce que vous devez fermer la propriété et/ou l'état local) `<Mouse>` devrait plutôt étendre `React.Component`.

From 053e77c106bd5c06aa1ccd1e7d23ef1ee57cd53e Mon Sep 17 00:00:00 2001
From: Jeremie Patonnier <jeremie.patonnier@gmail.com>
Date: Sat, 9 Mar 2019 18:59:09 +0100
Subject: [PATCH 3/6] Apply suggestions from code review

Co-Authored-By: LaureRC <laurerc@bam.tech>
---
 content/docs/render-props.md | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index 3f5f3c9c7..e20efb99b 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,9 +4,9 @@ title: Props de rendu
 permalink: docs/render-props.html
 ---
 
-Le terme ["prop de rendu"](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
+Le terme [« prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) (_render prop_ en anglais, NdT) fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
 
-Un composant avec une propriété render prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu.
+Un composant avec une prop de rendu prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu.
 
 ```jsx
 <DataProvider render={data => (
@@ -20,7 +20,7 @@ Dans cet article, nous vous exposerons pourquoi les props de rendu sont pratique
 
 ## Utiliser les props de rendu pour des questions transversales {#use-render-props-for-cross-cutting-concerns}
 
-Les composants sont l'unité de base de réutilisation du code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant à d'autres composants qui auraient besoin de ce même état.
+Les composants sont l'unité de base de réutilisation du code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant avec d'autres composants qui auraient besoin de ce même état.
 
 Par exemple, le composant suivant traque la position de la souris dans une application web :
 
@@ -52,7 +52,7 @@ class MouseTracker extends React.Component {
 
 Lorsque le curseur se déplace sur l'écran, le composant affiche ses coordonnées (x,y) dans un `<p>`.
 
-La question qui se pose maintenant est : Comment pouvons-nous réutiliser ce comportement dans un autre composant ?En d'autres mots, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
+La question qui se pose maintenant est : Comment pouvons-nous réutiliser ce comportement dans un autre composant ? En d'autres termes, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
 
 Puisque les composants sont l'unité de réutilisation de code dans React, essayons de refactoriser un peu le code pour pouvoir utiliser un composant `<Mouse>` qui encapsule le comportement dont nous avons besoin ailleurs.
 
@@ -99,7 +99,7 @@ Le composant `<Mouse>` encapsule maintenant tous les comportements associés à
 
 Par exemple, supposons que nous avons un composant `<Cat>` qui rend une image de chat chassant une souris sur l'écran. Nous pourrions utiliser une propriété `<Cat mouse={{ x, y }}>` pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l'écran.
 
-En première tentative, vous essayeriez peut-être de rendre `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
+Au premier essai, vous tenteriez peut-être de rendre `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
 
 ```js
 class Cat extends React.Component {
@@ -153,9 +153,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Cette approche fonctionnera dans notre cas d'utilisation, mais nous n'avons pas atteint notre objectif de vraiment encapsuler le comportement de façon réutilisable. En effet, chaque fois que nous aurons besoin de la position de la souris pour un cas d'utilisation différent, nous devrons créer un nouveau composant (i.e. pour ainsi dire un autre `<MouseWithCat>`) that renders something specifically for that use case.
+Cette approche fonctionnera dans notre cas particulier, mais nous n'avons pas atteint notre objectif qui consiste à vraiment encapsuler le comportement de façon réutilisable. En effet, chaque fois que nous aurons besoin de la position de la souris pour un cas d'utilisation différent, nous devrons créer un nouveau composant (i.e. pour ainsi dire un autre `<MouseWithCat>`) spécifique à ce cas.
 
-C'est là que la propriété render entre en scène : au lieu d'écrire en dur un composant `<Cat>` dans un composant `<Mouse>`, et changer la valeur de sortie rendue, nous pouvons fournir `<Mouse>` avec une propriété qui est une fonction qui permet de déterminer dynamiquement ce qui doit être rendu, c'est-à-dire une render prop.
+C'est là que la prop de rendu entre en scène : au lieu d'écrire en dur un composant `<Cat>` dans un composant `<Mouse>`, et changer la valeur de sortie rendue, nous pouvons créer `<Mouse>` avec une propriété qui prendra une fonction qui permet de déterminer dynamiquement ce qui doit être rendu—une prop de rendu.
 
 ```js
 class Cat extends React.Component {
@@ -237,7 +237,7 @@ Utiliser une prop de rendu rend donc possible l'utilisation des deux méthodes.
 
 ## Utiliser d'autres propriétés que `render` {#using-props-other-than-render}
 
-Il est important de se rappeler que *ce n'est pas parce que la méthode s'appelle "props de rendu" qu'il est obligatoire d'utiliser une propriété appelée `render` pour utiliser cette méthode*. En fait, [*n'importe quelle* propriété qui est utilisée par un composant pour savoir quoi renvoyer est techniquement une "prop de rendu" ](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Il est important de se rappeler que *ce n'est pas parce que la méthode s'appelle « props de rendu » qu'il est obligatoire d'utiliser une propriété appelée `render` pour utiliser cette méthode*. En fait, [*n'importe quelle* propriété qui est utilisée par un composant pour savoir quoi renvoyer est techniquement une « prop de rendu » ](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
 Même si les exemples ci-dessus utilise `render`, nous pourrions tout aussi simplement utiliser la propriété `children` !
 

From a89b07b3d26ef6ff4ec76e3ed04289f8a4bba6e5 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 12 Mar 2019 23:22:38 +0100
Subject: [PATCH 4/6] Apply suggestions from code review

Co-Authored-By: LaureRC <laurerc@bam.tech>
---
 content/docs/render-props.md | 62 ++++++++++++++++++------------------
 1 file changed, 31 insertions(+), 31 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index e20efb99b..b17437fad 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,7 +4,7 @@ title: Props de rendu
 permalink: docs/render-props.html
 ---
 
-Le terme [« prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) (_render prop_ en anglais, NdT) fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
+Le terme [« prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) _(render prop, NdT)_ fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
 
 Un composant avec une prop de rendu prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu.
 
@@ -16,13 +16,13 @@ Un composant avec une prop de rendu prend une fonction qui renvoie un élément
 
 Des bibliothèques telles que [React Router](https://reacttraining.com/react-router/web/api/Route/Route-render-methods) et [Downshift](https://github.com/paypal/downshift) utilisent ces props de rendu.
 
-Dans cet article, nous vous exposerons pourquoi les props de rendu sont pratiques, et comment écrire les vôtres.
+Dans cette page, nous verrons en quoi les props de rendu sont pratiques, et comment écrire les vôtres.
 
 ## Utiliser les props de rendu pour des questions transversales {#use-render-props-for-cross-cutting-concerns}
 
 Les composants sont l'unité de base de réutilisation du code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant avec d'autres composants qui auraient besoin de ce même état.
 
-Par exemple, le composant suivant traque la position de la souris dans une application web :
+Par exemple, le composant suivant piste la position de la souris dans une application web :
 
 ```js
 class MouseTracker extends React.Component {
@@ -52,7 +52,7 @@ class MouseTracker extends React.Component {
 
 Lorsque le curseur se déplace sur l'écran, le composant affiche ses coordonnées (x,y) dans un `<p>`.
 
-La question qui se pose maintenant est : Comment pouvons-nous réutiliser ce comportement dans un autre composant ? En d'autres termes, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
+La question qui se pose maintenant est : comment pouvons-nous réutiliser ce comportement dans un autre composant ? En d'autres termes, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
 
 Puisque les composants sont l'unité de réutilisation de code dans React, essayons de refactoriser un peu le code pour pouvoir utiliser un composant `<Mouse>` qui encapsule le comportement dont nous avons besoin ailleurs.
 
@@ -76,7 +76,7 @@ class Mouse extends React.Component {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
-        {/* ...mais comment rendre autre chose qu'un <p> ? */}
+        {/* ...mais comment afficher autre chose qu'un <p> ? */}
         <p>La position actuelle de la souris est ({this.state.x}, {this.state.y})</p>
       </div>
     );
@@ -95,18 +95,18 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Le composant `<Mouse>` encapsule maintenant tous les comportements associés à l'écoute des évènements `mousemove` et à la sauvegarde de la position (x, y) du sauvegarde, mais il n'est pas encore tout à fait réutilisable.
+Le composant `<Mouse>` encapsule maintenant tous les comportements associés à l'écoute des événements `mousemove` et à la sauvegarde de la position (x, y) du curseur, mais il n'est pas encore tout à fait réutilisable.
 
-Par exemple, supposons que nous avons un composant `<Cat>` qui rend une image de chat chassant une souris sur l'écran. Nous pourrions utiliser une propriété `<Cat mouse={{ x, y }}>` pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l'écran.
+Par exemple, supposons que nous avons un composant `<Cat>` qui affiche une image de chat pourchassant une souris sur l'écran. Nous pourrions utiliser une prop `<Cat mouse={{ x, y }}>` pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l'écran.
 
-Au premier essai, vous tenteriez peut-être de rendre `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
+Au premier essai, vous tenteriez peut-être d’afficher `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
 
 ```js
 class Cat extends React.Component {
   render() {
     const mouse = this.props.mouse;
     return (
-      <img src="/chat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
+      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
     );
   }
 }
@@ -153,16 +153,16 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Cette approche fonctionnera dans notre cas particulier, mais nous n'avons pas atteint notre objectif qui consiste à vraiment encapsuler le comportement de façon réutilisable. En effet, chaque fois que nous aurons besoin de la position de la souris pour un cas d'utilisation différent, nous devrons créer un nouveau composant (i.e. pour ainsi dire un autre `<MouseWithCat>`) spécifique à ce cas.
+Cette approche fonctionnera dans notre cas particulier, mais nous n'avons pas atteint notre objectif qui consiste à vraiment encapsuler le comportement de façon réutilisable. En effet, chaque fois que nous aurons besoin de la position de la souris pour un cas d'utilisation différent, nous devrons créer un nouveau composant (pour ainsi dire un autre `<MouseWithCat>`) spécifique à ce cas.
 
-C'est là que la prop de rendu entre en scène : au lieu d'écrire en dur un composant `<Cat>` dans un composant `<Mouse>`, et changer la valeur de sortie rendue, nous pouvons créer `<Mouse>` avec une propriété qui prendra une fonction qui permet de déterminer dynamiquement ce qui doit être rendu—une prop de rendu.
+C'est là que la prop de rendu entre en scène : au lieu d'écrire en dur un composant `<Cat>` dans un composant `<Mouse>`, et changer le résultat de l’affichage, nous pouvons créer `<Mouse>` avec une prop qui prendra une fonction permettant de déterminer dynamiquement ce qui doit être affiché : une prop de rendu.
 
 ```js
 class Cat extends React.Component {
   render() {
     const mouse = this.props.mouse;
     return (
-      <img src="/chat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
+      <img src="/cat.jpg" style={{ position: 'absolute', left: mouse.x, top: mouse.y }} />
     );
   }
 }
@@ -186,8 +186,8 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Au lieu de fournir un représentation statique de ce que rend <Mouse>,
-          utilisez la prop `render` pour déterminer dynamiquement quoi rendre.
+          Au lieu de fournir un représentation statique de ce qu’affiche <Mouse>,
+          utilisez la prop `render` pour déterminer dynamiquement quoi afficher.
         */}
         {this.props.render(this.state)}
       </div>
@@ -209,13 +209,13 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dorénavant, au lieu de cloner le composant `<Mouse>` et d'écrire en dur quelque chose d'autre dans sa méthode `render` pour s'adapter à un cas d'utilisation, nous fournissons une prop `render` que `<Mouse>` peut utiliser pour déterminer dynamiquement quoi rendre.
+Dorénavant, au lieu de cloner le composant `<Mouse>` et d'écrire en dur quelque chose d'autre dans sa méthode `render` pour s'adapter à un cas d'utilisation, nous fournissons une prop `render` que `<Mouse>` peut utiliser pour déterminer dynamiquement quoi afficher.
 
-Plus concrètement, **une prop de rendu est une propriété fonction qu'un composant utilise pour savoir quoi rendre.**
+Plus concrètement, **une prop de rendu est une prop de type fonction qu'un composant utilise pour savoir quoi afficher.**
 
-Cette technique facilite énormément le partage d'un comportement. Pour récupérer ce comportement, il suffit de faire le rendu d'un `<Mouse>` avec une propriété `render` qui lui dit quoi rendre avec les coordonnées (x, y) actuelles du curseur.
+Cette technique facilite énormément le partage d'un comportement. Pour récupérer ce comportement, il suffit d’afficher un `<Mouse>` avec une prop `render` qui lui dit quoi afficher avec les coordonnées (x, y) actuelles du curseur.
 
-Un point intéressant à noter concernant les props de rendu est que vous pouvez implémenter la plupart des [composants d’ordre supérieur](/docs/higher-order-components.html) (HOC) en utilisant un composant classique avec une prop de rendu. Par exemple, si vous préférez avoir un HOC `withMouse` au lieu d'un composant`<Mouse>`, vous pouvez facilement en créer un en utilisant un composant `<Mouse>` avec une prop de rendu :
+Un point intéressant à noter concernant les props de rendu est que vous pouvez implémenter la plupart des [composants d’ordre supérieur](/docs/higher-order-components.html) *(Higher-Order Components, ou HOC, NdT)* en utilisant un composant classique avec une prop de rendu. Par exemple, si vous préférez avoir un HOC `withMouse` au lieu d'un composant`<Mouse>`, vous pouvez facilement en créer un en utilisant un composant `<Mouse>` avec une prop de rendu :
 
 ```js
 // Si, pour une raison ou une autre, vous voulez vraiment utiliser un HOC, vous pouvez
@@ -235,11 +235,11 @@ function withMouse(Component) {
 
 Utiliser une prop de rendu rend donc possible l'utilisation des deux méthodes.
 
-## Utiliser d'autres propriétés que `render` {#using-props-other-than-render}
+## Utiliser d'autres props que `render` {#using-props-other-than-render}
 
-Il est important de se rappeler que *ce n'est pas parce que la méthode s'appelle « props de rendu » qu'il est obligatoire d'utiliser une propriété appelée `render` pour utiliser cette méthode*. En fait, [*n'importe quelle* propriété qui est utilisée par un composant pour savoir quoi renvoyer est techniquement une « prop de rendu » ](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
+Il est important de se rappeler que *ce n'est pas parce que la technique s'appelle « props de rendu » qu'il est obligatoire d'utiliser une prop appelée `render` pour la mettre en œuvre*. En fait, [*n'importe quelle* prop utilisée par un composant pour savoir quoi renvoyer est techniquement une « prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce).
 
-Même si les exemples ci-dessus utilise `render`, nous pourrions tout aussi simplement utiliser la propriété `children` !
+Même si les exemples ci-dessus utilisent `render`, nous pourrions tout aussi simplement utiliser la prop `children` !
 
 ```js
 <Mouse children={mouse => (
@@ -247,7 +247,7 @@ Même si les exemples ci-dessus utilise `render`, nous pourrions tout aussi simp
 )}/>
 ```
 
-Et rappelez-vous, la propriété `children` n'a en fait pas besoin d'être nommée dans la liste des "attributs" de votre élément JSX. Au lieu de ça, vous pouvez l'utiliser directement *dans* l'élément !
+Et rappelez-vous, la propriété `children` n'a en fait pas besoin d'être nommée dans la liste des « attributs » de votre élément JSX. Au lieu de ça, vous pouvez l'utiliser directement *dans* l'élément !
 
 ```js
 <Mouse>
@@ -257,9 +257,9 @@ Et rappelez-vous, la propriété `children` n'a en fait pas besoin d'être nomm
 </Mouse>
 ```
 
-Vous pouvez découvrir l'utilisation de cette méthode dans l'API [react-motion](https://github.com/chenglou/react-motion).
+Vous pouvez découvrir l'utilisation de cette technique dans l'API [react-motion](https://github.com/chenglou/react-motion).
 
-Comme cette méthode est un peu inhabituelle, vous aurez probablement envie de préciser que `children` devrait être une fonction dans vos `propTypes` au moment de faire le design de votre API de la manière suivante.
+Comme cette technique est un peu inhabituelle, vous aurez probablement envie de préciser que `children` devrait être une fonction dans vos `propTypes` au moment de concevoir votre API de cette façon.
 
 ```js
 Mouse.propTypes = {
@@ -267,11 +267,11 @@ Mouse.propTypes = {
 };
 ```
 
-## Exceptions {#caveats}
+## Limitations {#caveats}
 
 ### Soyez prudents lors de l'utilisation de props de rendu avec React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Utiliser une prop de rendu peut contrebalancer l'avantage apporté par l'utilisation de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si vous créer une fonction dans une méthode `render`. Cela est dû au fait que la comparaison superficielle des propriétés retournera toujours `false` pour les nouvelles propriétés, et que dans ce cas, chaque `render` génèrera une nouvelle valeur pour la prop de rendu.
+Utiliser une prop de rendu peut contrebalancer l'avantage apporté par l'utilisation de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si vous créez la fonction dans une méthode `render`. C’est dû au fait que la comparaison superficielle des propriétés renverra toujours `false` pour les nouvelles props, et que dans ce cas chaque `render` génèrera une nouvelle valeur pour la prop de rendu.
 
 Par exemple, en gardant l'exemple de notre composant `<Mouse>`, si `Mouse` étendait `React.PureComponent` au lieu de `React.Component`, notre exemple ressemblerait alors à ça :
 
@@ -287,8 +287,8 @@ class MouseTracker extends React.Component {
         <h1>Déplacez votre souris sur l'écran !</h1>
 
         {/*
-          Il ne faut pas faire ça ! La valeur de la propriété `render`
-          sera différente à chaque render.
+          Il ne faut pas faire ça ! La valeur de la prop `render`
+          sera différente à chaque rendu.
         */}
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
@@ -299,9 +299,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dans cet exemple, à chaque fois que `<MouseTracker>` est rendu, une nouvelle fonction est générée comme valeur de la propriété `<Mouse render>`, ce qui annule l'effet de `<Mouse>` qui étend `React.PureComponent` !
+Dans cet exemple, à chaque fois que `<MouseTracker>` s’affiche, une nouvelle fonction est générée comme valeur de la prop `<Mouse render>`, ce qui annule l'optimisation recherchée à la base quand on a fait en sorte que `<Mouse>` étende `React.PureComponent` !
 
-Pour éviter ce problème; vous pouvez parfois définir la propriété comme une méthode d'instance, de la façon suivante :
+Pour éviter ce problème; vous pouvez parfois définir la prop comme une méthode d'instance, de la façon suivante :
 
 ```js
 class MouseTracker extends React.Component {
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dans les cas où vous ne pourrez pas définir la propriété de manière statique (e.g. parce que vous devez fermer la propriété et/ou l'état local) `<Mouse>` devrait plutôt étendre `React.Component`.
+Dans les cas où vous ne pourrez pas définir la prop de manière statique (ex. parce qu’elle utilise des valeurs locales à `render`), `<Mouse>` devrait plutôt étendre `React.Component`.

From 8738ce814b4b182388be1abe5f17ae46a3f973ae Mon Sep 17 00:00:00 2001
From: Laure RC <laure.retru-chavastel@gadz.org>
Date: Tue, 12 Mar 2019 23:39:02 +0100
Subject: [PATCH 5/6] last reviews

---
 content/docs/render-props.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index b17437fad..5b0986b4d 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -186,7 +186,7 @@ class Mouse extends React.Component {
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
 
         {/*
-          Au lieu de fournir un représentation statique de ce qu’affiche <Mouse>,
+          Au lieu de fournir une représentation statique de ce qu’affiche <Mouse>,
           utilisez la prop `render` pour déterminer dynamiquement quoi afficher.
         */}
         {this.props.render(this.state)}
@@ -252,7 +252,7 @@ Et rappelez-vous, la propriété `children` n'a en fait pas besoin d'être nomm
 ```js
 <Mouse>
   {mouse => (
-    <p>The mouse position is {mouse.x}, {mouse.y}</p>
+    <p>La position de la souris est {mouse.x}, {mouse.y}</p>
   )}
 </Mouse>
 ```

From 7dd10dfec9a7f5f0427ca707ce415c14f5eea989 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Mar 2019 10:39:14 +0100
Subject: [PATCH 6/6] Final tweaks

---
 content/docs/render-props.md | 38 ++++++++++++++++++------------------
 1 file changed, 19 insertions(+), 19 deletions(-)

diff --git a/content/docs/render-props.md b/content/docs/render-props.md
index b61265e08..011a92e7f 100644
--- a/content/docs/render-props.md
+++ b/content/docs/render-props.md
@@ -4,7 +4,7 @@ title: Props de rendu
 permalink: docs/render-props.html
 ---
 
-Le terme [« prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) _(render prop, NdT)_ fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une propriété dont la valeur est une fonction.
+Le terme [« prop de rendu »](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce) _(render prop, NdT)_ fait référence à une technique qui consiste à partager du code entre des composants React en utilisant une prop dont la valeur est une fonction.
 
 Un composant avec une prop de rendu prend une fonction qui renvoie un élément React et l'appelle au lieu d'implémenter sa propre logique de rendu.
 
@@ -16,11 +16,11 @@ Un composant avec une prop de rendu prend une fonction qui renvoie un élément
 
 Des bibliothèques telles que [React Router](https://reacttraining.com/react-router/web/api/Route/render-func) et [Downshift](https://github.com/paypal/downshift) utilisent ces props de rendu.
 
-Dans cette page, nous verrons en quoi les props de rendu sont pratiques, et comment écrire les vôtres.
+Dans cette page, nous verrons en quoi les props de rendu sont pratiques, et comment vous pouvez écrire les vôtres.
 
 ## Utiliser les props de rendu pour des questions transversales {#use-render-props-for-cross-cutting-concerns}
 
-Les composants sont l'unité de base de réutilisation du code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant avec d'autres composants qui auraient besoin de ce même état.
+Les composants sont l'unité de base de réutilisation de code dans React, mais il n'est pas toujours évident de partager l'état ou le comportement contenu dans un composant avec d'autres composants qui auraient besoin de ce même état.
 
 Par exemple, le composant suivant piste la position de la souris dans une application web :
 
@@ -42,7 +42,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
         <p>La position actuelle de la souris est ({this.state.x}, {this.state.y})</p>
       </div>
     );
@@ -50,9 +50,9 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Lorsque le curseur se déplace sur l'écran, le composant affiche ses coordonnées (x,y) dans un `<p>`.
+Lorsque le curseur se déplace sur l’écran, le composant affiche ses coordonnées (x,y) dans un élément `<p>`.
 
-La question qui se pose maintenant est : comment pouvons-nous réutiliser ce comportement dans un autre composant ? En d'autres termes, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
+La question qui se pose maintenant est : comment pouvons-nous réutiliser ce comportement dans un autre composant ? En d'autres termes, si un autre composant a besoin de connaître la position du curseur, pouvons-nous encapsuler ce comportement pour pouvoir facilement le partager avec ce composant ?
 
 Puisque les composants sont l'unité de réutilisation de code dans React, essayons de refactoriser un peu le code pour pouvoir utiliser un composant `<Mouse>` qui encapsule le comportement dont nous avons besoin ailleurs.
 
@@ -87,7 +87,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
         <Mouse />
       </div>
     );
@@ -97,7 +97,7 @@ class MouseTracker extends React.Component {
 
 Le composant `<Mouse>` encapsule maintenant tous les comportements associés à l'écoute des événements `mousemove` et à la sauvegarde de la position (x, y) du curseur, mais il n'est pas encore tout à fait réutilisable.
 
-Par exemple, supposons que nous avons un composant `<Cat>` qui affiche une image de chat pourchassant une souris sur l'écran. Nous pourrions utiliser une prop `<Cat mouse={{ x, y }}>` pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l'écran.
+Par exemple, supposons que nous avons un composant `<Cat>` qui affiche une image de chat pourchassant une souris sur l’écran. Nous pourrions utiliser une prop `mouse`, comme dans `<Cat mouse={{ x, y }}>`, pour transmettre au composant les coordonnées de la souris pour qu'il sache où positionner l'image sur l’écran.
 
 Au premier essai, vous tenteriez peut-être d’afficher `<Cat>` *dans la méthode `render` de `<Mouse>`*, comme ceci :
 
@@ -132,7 +132,7 @@ class MouseWithCat extends React.Component {
         {/*
           Nous pourrions simplement remplacer le <p> par un <Cat> ici...
           mais nous devrions alors créer un composant séparé
-          <MouseWithSomethingElse> chaque fois que nous voudrions l'utiliser,
+          <MouseWithSomethingElse> chaque fois que nous voudrions l'utiliser.
           <MouseWithCat> n'est donc pas si réutilisable que ça pour le moment.
         */}
         <Cat mouse={this.state} />
@@ -145,7 +145,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
         <MouseWithCat />
       </div>
     );
@@ -199,7 +199,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
         <Mouse render={mouse => (
           <Cat mouse={mouse} />
         )}/>
@@ -269,11 +269,11 @@ Mouse.propTypes = {
 
 ## Limitations {#caveats}
 
-### Soyez prudents lors de l'utilisation de props de rendu avec React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
+### Soyez prudent·e lors de l'utilisation de props de rendu avec React.PureComponent {#be-careful-when-using-render-props-with-reactpurecomponent}
 
-Utiliser une prop de rendu peut contrebalancer l'avantage apporté par l'utilisation de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si vous créez la fonction dans une méthode `render`. C’est dû au fait que la comparaison superficielle des propriétés renverra toujours `false` pour les nouvelles props, et que dans ce cas chaque `render` génèrera une nouvelle valeur pour la prop de rendu.
+Utiliser une prop de rendu peut contrebalancer l'avantage apporté par l'utilisation de [`React.PureComponent`](/docs/react-api.html#reactpurecomponent) si vous créez la fonction dans une méthode `render`. C’est dû au fait que la comparaison superficielle des props renverra toujours `false` pour les nouvelles props, et que dans ce cas chaque `render` génèrera justement une nouvelle valeur pour la prop de rendu.
 
-Par exemple, en gardant l'exemple de notre composant `<Mouse>`, si `Mouse` étendait `React.PureComponent` au lieu de `React.Component`, notre exemple ressemblerait alors à ça :
+Pour revenir sur l'exemple de notre composant `<Mouse>`, si `Mouse` étendait `React.PureComponent` au lieu de `React.Component`, notre exemple ressemblerait à ça :
 
 ```js
 class Mouse extends React.PureComponent {
@@ -284,7 +284,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
 
         {/*
           Il ne faut pas faire ça ! La valeur de la prop `render`
@@ -305,8 +305,8 @@ Pour éviter ce problème; vous pouvez parfois définir la prop comme une métho
 
 ```js
 class MouseTracker extends React.Component {
-  // Définie comme une méthode d'instance, `this.renderTheCat` se réfèrera
-  // toujours à la *même* fonction quand nous l'utiliserons dans le rendu
+  // Définie comme une méthode d’instance, `this.renderTheCat` se réfèrera
+  // toujours à la *même* fonction quand nous l‘utiliserons dans le rendu.
   renderTheCat(mouse) {
     return <Cat mouse={mouse} />;
   }
@@ -314,7 +314,7 @@ class MouseTracker extends React.Component {
   render() {
     return (
       <div>
-        <h1>Déplacez votre souris sur l'écran !</h1>
+        <h1>Déplacez votre souris sur l’écran !</h1>
         <Mouse render={this.renderTheCat} />
       </div>
     );
@@ -322,4 +322,4 @@ class MouseTracker extends React.Component {
 }
 ```
 
-Dans les cas où vous ne pourrez pas définir la prop de manière statique (ex. parce qu’elle utilise des valeurs locales à `render`), `<Mouse>` devrait plutôt étendre `React.Component`.
+Dans les cas où vous ne pourriez pas définir la prop de manière statique (ex. parce qu’elle utilise des valeurs locales à `render`), `<Mouse>` devrait plutôt étendre `React.Component`.