From 059ed99d9a289a157c578a832ef62d0175aeac23 Mon Sep 17 00:00:00 2001
From: juliettelofaro <33547826+juliettelofaro@users.noreply.github.com>
Date: Wed, 6 Mar 2019 15:13:33 +0100
Subject: [PATCH 1/6] All translated

---
 content/docs/jsx-in-depth.md | 175 +++++++++++++++++------------------
 1 file changed, 87 insertions(+), 88 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 3dcf2ac26..5c0571d88 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,31 +13,31 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fundamentally, JSX just provides syntactic sugar for the `React.createElement(component, props, ...children)` function. The JSX code:
+Fondamentalement, JSX fournit du sucre syntaxique pour la fonction `React.createElement(component, props, ...children)`. Le code JSX:
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Click Me
+  Cliquez!
 </MyButton>
 ```
 
-compiles into:
+est compilé en:
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Click Me'
+  'Cliquez!'
 )
 ```
 
-You can also use the self-closing form of the tag if there are no children. So:
+Il est aussi possible d'utiliser la balise à fermeture automatique si il n'y a pas d'enfants. Donc:
 
 ```js
 <div className="sidebar" />
 ```
 
-compiles into:
+est compilé en:
 
 ```js
 React.createElement(
@@ -46,20 +46,19 @@ React.createElement(
   null
 )
 ```
+Si vous souhaitez voir comment certains éléments JSX spécifiques sont compilés en Javascript, vous pouvez utiliser [le compileur en ligne Babel](babel://jsx-simple-example).
 
-If you want to test out how some specific JSX is converted into JavaScript, you can try out [the online Babel compiler](babel://jsx-simple-example).
+## Spécifier le type d'un élément React {#specifying-the-react-element-type}
 
-## Specifying The React Element Type {#specifying-the-react-element-type}
+La première partie d'une balise JSX détermine le type de l'élément React en question.
 
-The first part of a JSX tag determines the type of the React element.
+Les types commençant par une lettre majuscule indiquent que la balise JSX fait référence à un composant React. Ces balises sont compilées en références directes à la variable nommée, donc si vous utilisez l'expression JSX  `<Foo />`, `Foo` doit être dans le scope.
 
-Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX `<Foo />` expression, `Foo` must be in scope.
+### React doit être dans le scope {#react-must-be-in-scope}
 
-### React Must Be in Scope {#react-must-be-in-scope}
+Étant donné que JSX se compile en appel à `React.createElement`, la librairie `React` doit aussi être dans le scope de votre code JSX.
 
-Since JSX compiles into calls to `React.createElement`, the `React` library must also always be in scope from your JSX code.
-
-For example, both of the imports are necessary in this code, even though `React` and `CustomButton` are not directly referenced from JavaScript:
+Par exemple, les deux imports sont nécessaires dans le code ci-dessous même si `React` et `CustomButton` ne sont pas directement référencés depuis Javascript:
 
 ```js{1,2,5}
 import React from 'react';
@@ -71,18 +70,18 @@ function WarningButton() {
 }
 ```
 
-If you don't use a JavaScript bundler and loaded React from a `<script>` tag, it is already in scope as the `React` global.
+Si vous n'utilisez pas un bundler Javascript et que vous ne chargez pas React à partir d'une balise `<script>`, il est déjà dans le scope en tant que `React` global.
 
-### Using Dot Notation for JSX Type {#using-dot-notation-for-jsx-type}
+### Utilisation de la notation en point pour les types JSX {#using-dot-notation-for-jsx-type}
 
-You can also refer to a React component using dot-notation from within JSX. This is convenient if you have a single module that exports many React components. For example, if `MyComponents.DatePicker` is a component, you can use it directly from JSX with:
+Vous pouvez également vous référez à un composant React en utilisant la notation en point de JSX. Ceci est pratique si vous avez un seul module qui exporte plusieurs composants React. Par exemple si `MyComponents.DatePicker` est un composant, vous pouvez directement l'utiliser dans JSX avec:
 
 ```js{10}
 import React from 'react';
 
 const MyComponents = {
   DatePicker: function DatePicker(props) {
-    return <div>Imagine a {props.color} datepicker here.</div>;
+    return <div>Imaginez une {props.color} datepicker ici.</div>;
   }
 }
 
@@ -91,49 +90,49 @@ function BlueDatePicker() {
 }
 ```
 
-### User-Defined Components Must Be Capitalized {#user-defined-components-must-be-capitalized}
+### Les composants qui définissent les utilisateurs doivent commencés par une majuscule {#user-defined-components-must-be-capitalized}
 
-When an element type starts with a lowercase letter, it refers to a built-in component like `<div>` or `<span>` and results in a string `'div'` or `'span'` passed to `React.createElement`. Types that start with a capital letter like `<Foo />` compile to `React.createElement(Foo)` and correspond to a component defined or imported in your JavaScript file.
+Quand un élément commence avec une lettre minuscule il fait référence à un composant intégré tel que `<div>` ou `<span>` et donne une chaîne de caractères `'div'` ou `'span'` passée à `React.createElement`. Les types qui commencent avec une lettre majuscule comme `<Foo />` sont compilés en `React.createElement(Foo)` et correspondent à un composant défini ou importé dans votre fichié Javascript.
 
-We recommend naming components with a capital letter. If you do have a component that starts with a lowercase letter, assign it to a capitalized variable before using it in JSX.
+Nous recommandons de nommer les composants avec une lettre majuscule. Si vous avez un composant qui démarre avec une lettre minuscule, affectez-le à une variable avec une lettre majuscule avant de l'utiliser dans votre JSX.
 
-For example, this code will not run as expected:
+Par exemple, ce code ne s'executera pas comme prévu:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Wrong! This is a component and should have been capitalized:
+// Faux! Ceci est un composant est devrait commencé par une lettre majuscule:
 function hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Correct! Cette utilisation de <div> fonctionne car div est une balise HTML valide:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Wrong! React thinks <hello /> is an HTML tag because it's not capitalized:
+  // Faux! React pense que <hello /> est une balise HTML car il ne commence pas par une majuscule:
   return <hello toWhat="World" />;
 }
 ```
 
-To fix this, we will rename `hello` to `Hello` and use `<Hello />` when referring to it:
+Pour corriger cela, nous allons renommer `hello` en `Hello` et utiliser `<Hello />` lorsqu'on le mentionne:
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! This is a component and should be capitalized:
+// Correct! Ceci est un composant et doit être en majuscule:
 function Hello(props) {
-  // Correct! This use of <div> is legitimate because div is a valid HTML tag:
+  // Correct! Cette utilisation de <div> fonctionne car div est une balise HTML valide:
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React knows <Hello /> is a component because it's capitalized.
+  // Correct! React sait que <Hello /> est un composant car il commence par une majuscule.
   return <Hello toWhat="World" />;
 }
 ```
 
-### Choosing the Type at Runtime {#choosing-the-type-at-runtime}
+### Choix du type au moment de l'exécution {#choosing-the-type-at-runtime}
 
-You cannot use a general expression as the React element type. If you do want to use a general expression to indicate the type of the element, just assign it to a capitalized variable first. This often comes up when you want to render a different component based on a prop:
+Vous ne pouvez pas utiliser une expression générale pour le type d'un élément React. Si vous voulez utiliser une expression pour définir le type d'un élément, initialisez-la d'abord à une variable en minuscule. Cela arrive en général lorsque vous voulez afficher un composant différent basé sur une props:
 
 ```js{10,11}
 import React from 'react';
@@ -145,12 +144,12 @@ const components = {
 };
 
 function Story(props) {
-  // Wrong! JSX type can't be an expression.
+  // Faux! Un type JSX ne peut pas être une expression.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-To fix this, we will assign the type to a capitalized variable first:
+Pour corriger cela, nous allons d'abord initialiser le type à une variable commençant par une majuscule:
 
 ```js{10-12}
 import React from 'react';
@@ -162,45 +161,44 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! JSX type can be a capitalized variable.
+  // Correct! Un type JSX peut être une variable commeçant par une majuscule.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
 ```
 
-## Props in JSX {#props-in-jsx}
+## Les props en JSX {#props-in-jsx}
 
-There are several different ways to specify props in JSX.
+Il y a différents moyens de définir les props en JSX.
 
-### JavaScript Expressions as Props {#javascript-expressions-as-props}
+### Les expressions Javascript comme props {#javascript-expressions-as-props}
 
-You can pass any JavaScript expression as a prop, by surrounding it with `{}`. For example, in this JSX:
+Vous pouvez passer n'importe quelle expression Javascript comme props, en l'entourant de `{}`. Par exemple, dans ce code JSX:
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
 ```
 
-For `MyComponent`, the value of `props.foo` will be `10` because the expression `1 + 2 + 3 + 4` gets evaluated.
+Pour `MyComponent`, la valeur de `props.foo` sera `10` parce que l'expression `1 + 2 + 3 + 4` est calculée.
 
-`if` statements and `for` loops are not expressions in JavaScript, so they can't be used in JSX directly. Instead, you can put these in the surrounding code. For example:
+Les déclarations `if` et les boucles `for` ne sont pas des expressions en Javascript, donc elle ne peuvent pas être directement utilisées en JSX. À la place, vous pouvez les mettre dans le code environnant. Par exemple:
 
 ```js{3-7}
 function NumberDescriber(props) {
   let description;
   if (props.number % 2 == 0) {
-    description = <strong>even</strong>;
+    description = <strong>pair</strong>;
   } else {
-    description = <i>odd</i>;
+    description = <i>impair</i>;
   }
-  return <div>{props.number} is an {description} number</div>;
+  return <div>{props.number} est un nombre {description}</div>;
 }
 ```
+Vous pouvez en savoir plus sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes.
 
-You can learn more about [conditional rendering](/docs/conditional-rendering.html) and [loops](/docs/lists-and-keys.html) in the corresponding sections.
-
-### String Literals {#string-literals}
+### Les expressions littérales {#string-literals}
 
-You can pass a string literal as a prop. These two JSX expressions are equivalent:
+Vous pouvez passer une expression littérale comme props. Les deux expressions JSX ci-dessous sont équivalentes:
 
 ```js
 <MyComponent message="hello world" />
@@ -208,7 +206,7 @@ You can pass a string literal as a prop. These two JSX expressions are equivalen
 <MyComponent message={'hello world'} />
 ```
 
-When you pass a string literal, its value is HTML-unescaped. So these two JSX expressions are equivalent:
+Quand vous passez une expression littérale, sa valeur est du HTML non-échappé. Donc ces deux expressions JSX sont équivalentes:
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,11 +214,11 @@ When you pass a string literal, its value is HTML-unescaped. So these two JSX ex
 <MyComponent message={'<3'} />
 ```
 
-This behavior is usually not relevant. It's only mentioned here for completeness.
+Ce comportement n'est en général pas pertinent, ce n'est mentionné ici que par souci d'exhaustivité.
 
-### Props Default to "True" {#props-default-to-true}
+### Les props initialisées à "true" {#props-default-to-true}
 
-If you pass no value for a prop, it defaults to `true`. These two JSX expressions are equivalent:
+Si vous n'affectez aucune valeur à une props, sa valeur par défaut sera `true`. Ces deux expressions JSX sont équivalentes:
 
 ```js
 <MyTextBox autocomplete />
@@ -228,11 +226,11 @@ If you pass no value for a prop, it defaults to `true`. These two JSX expression
 <MyTextBox autocomplete={true} />
 ```
 
-In general, we don't recommend using this because it can be confused with the [ES6 object shorthand](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` which is short for `{foo: foo}` rather than `{foo: true}`. This behavior is just there so that it matches the behavior of HTML.
+En général, nous ne recommandons pas cette utilisationcar cela peut être confondu avec [l'abrévation des objets ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` qui est l'abréviation de `{foo: foo}` aulieu de `{foo: true}`. Ce comportement existe uniquement pour qu'il corresponde au comportement du HTML.
 
-### Spread Attributes {#spread-attributes}
+### Syntaxe de décomposition {#spread-attributes}
 
-If you already have `props` as an object, and you want to pass it in JSX, you can use `...` as a "spread" operator to pass the whole props object. These two components are equivalent:
+Si vous avez déjà un objet `props` et vous voulez l'utiliser en JSX, vous pouvez utiliser l'opérateur de diffusion ("spread operator") `...` pour faire passer l'ensemble de l'objet props. Ces deux composants sont équivalents:
 
 ```js{7}
 function App1() {
@@ -245,7 +243,7 @@ function App2() {
 }
 ```
 
-You can also pick specific props that your component will consume while passing all other props using the spread operator.
+Vous pouvez aussi choisir certaines props que votre composant utilisera en passant toutes les autres props avec l'opérateur de diffusion.
 
 ```js{2}
 const Button = props => {
@@ -257,7 +255,7 @@ const Button = props => {
 const App = () => {
   return (
     <div>
-      <Button kind="primary" onClick={() => console.log("clicked!")}>
+      <Button kind="primary" onClick={() => console.log("cliqué!")}>
         Hello World!
       </Button>
     </div>
@@ -265,30 +263,30 @@ const App = () => {
 };
 ```
 
-In the example above, the `kind` prop is safely consumed and *is not* passed on to the `<button>` element in the DOM.
-All other props are passed via the `...other` object making this component really flexible. You can see that it passes an `onClick` and `children` props.
+Dans l'exemple ci-dessus, la prop `kind` est utilisée en toute sécurité et *n'est pas* passée à l'élément `<button>` dans le DOM.
+Toutes les autres props sont passées via l'objet `...other` rendant ce composant très flexible. Vous pouvez voir que cela passe les props `onClick` et `children`.
 
-Spread attributes can be useful but they also make it easy to pass unnecessary props to components that don't care about them or to pass invalid HTML attributes to the DOM. We recommend using this syntax sparingly.  
+Les attributs de diffusion peuvent être utiles, mais ils permettent aussi de passer facilement des props inutiles aux composants qui ne s'en soucient pas ou de passer des attributs HTML invalides au DOM. Nous vous recommandons d'utiliser cette syntaxe avec parcimonie.  
 
-## Children in JSX {#children-in-jsx}
+## Les enfants en JSX {#children-in-jsx}
 
-In JSX expressions that contain both an opening tag and a closing tag, the content between those tags is passed as a special prop: `props.children`. There are several different ways to pass children:
+Dans les expressions JSX qui contiennent une balise ouvrante et une balise fermante, le contenu entre ces deux balises est passé comme une prop spéciale: `props.children`. Il existe plusieurs moyens pour passer ces enfants:
 
-### String Literals {#string-literals-1}
+### Littéraux de chaînes de caractères {#string-literals-1}
 
-You can put a string between the opening and closing tags and `props.children` will just be that string. This is useful for many of the built-in HTML elements. For example:
+Vous pouvez mettre une chaîne de caractères entre une balise ouvrante et une fermante et `props.children` définira cette chaîne de caractère. Ceci est utile pour la plupart des éléments HTML intégrés. Par exemple:
 
 ```js
 <MyComponent>Hello world!</MyComponent>
 ```
 
-This is valid JSX, and `props.children` in `MyComponent` will simply be the string `"Hello world!"`. HTML is unescaped, so you can generally write JSX just like you would write HTML in this way:
+Ceci est du JSX valide, et `props.children` dans `MyComponent` sera simplement la chaîne de caractères `"Hello world!"`. Le HTML est non-échappé, donc vous pouvez généralement écrire du JSX de la même façon que vous écrivez du HTML, c'est-à-dire :
 
 ```html
-<div>This is valid HTML &amp; JSX at the same time.</div>
+<div>Ceci est à la fois du HTML &amp; du JSX valides.</div>
 ```
 
-JSX removes whitespace at the beginning and ending of a line. It also removes blank lines. New lines adjacent to tags are removed; new lines that occur in the middle of string literals are condensed into a single space. So these all render to the same thing:
+JSX supprime les espaces en début et en fin de ligne. Il supprime également les lignes vides. Les nouvelles lignes adjacentes aux balises sont supprimées; les nouvelles lignes qui apparaissent au milieu d'une chaîne de caractères sont condensées en un seul espace. Donc, tous les codes ci-dessous donnent le même résultat :
 
 ```js
 <div>Hello World</div>
@@ -308,9 +306,9 @@ JSX removes whitespace at the beginning and ending of a line. It also removes bl
 </div>
 ```
 
-### JSX Children {#jsx-children}
+### Enfants JSX {#jsx-children}
 
-You can provide more JSX elements as the children. This is useful for displaying nested components:
+Vous pouvez fournir plus d'éléments JSX en tant qu'enfants. Ceci est utile pour afficher les composants imbriqués :
 
 ```js
 <MyContainer>
@@ -319,7 +317,7 @@ You can provide more JSX elements as the children. This is useful for displaying
 </MyContainer>
 ```
 
-You can mix together different types of children, so you can use string literals together with JSX children. This is another way in which JSX is like HTML, so that this is both valid JSX and valid HTML:
+Vous pouvez mélanger ensemble différents types d'enfants, il est donc possible d'utiliser des chaînes de caractères littérales avec des enfants JSX. Nous avons ici encore un aspect où JSX fonctionne comme le HTML, ceci est du code JSX et HTML valide:
 
 ```html
 <div>
@@ -331,13 +329,13 @@ You can mix together different types of children, so you can use string literals
 </div>
 ```
 
-A React component can also return an array of elements:
+Un composant React peut aussi renvoyer un tableau d'éléments:
 
 ```js
 render() {
-  // No need to wrap list items in an extra element!
+  // Pas besoin d'envelopper les éléments de la liste dans un élément supplémentaire !
   return [
-    // Don't forget the keys :)
+    // N'oubliez pas les "keys" :)
     <li key="A">First item</li>,
     <li key="B">Second item</li>,
     <li key="C">Third item</li>,
@@ -345,9 +343,9 @@ render() {
 }
 ```
 
-### JavaScript Expressions as Children {#javascript-expressions-as-children}
+### Les expressions JavaScript comme Enfants {#javascript-expressions-as-children}
 
-You can pass any JavaScript expression as children, by enclosing it within `{}`. For example, these expressions are equivalent:
+Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en l'enfermant dans des `{}`. Par exemple, ces expressions sont équivalentes :
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -355,7 +353,7 @@ You can pass any JavaScript expression as children, by enclosing it within `{}`.
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-This is often useful for rendering a list of JSX expressions of arbitrary length. For example, this renders an HTML list:
+Ceci est souvent utile pour rendre une liste d'expressions JSX de longueur arbitraire. Par exemple, cela rend une liste HTML :
 
 ```js{2,9}
 function Item(props) {
@@ -372,7 +370,7 @@ function TodoList() {
 }
 ```
 
-JavaScript expressions can be mixed with other types of children. This is often useful in lieu of string templates:
+Les expressions JavaScript peuvent être mélangées avec d'autres types d'enfants. Ceci est souvent utile à la place des modèles de chaînes de caractères:
 
 ```js{2}
 function Hello(props) {
@@ -380,12 +378,13 @@ function Hello(props) {
 }
 ```
 
-### Functions as Children {#functions-as-children}
+### Les fonctions comme Enfants {#functions-as-children}
 
-Normally, JavaScript expressions inserted in JSX will evaluate to a string, a React element, or a list of those things. However, `props.children` works just like any other prop in that it can pass any sort of data, not just the sorts that React knows how to render. For example, if you have a custom component, you could have it take a callback as `props.children`:
+Normalement, les expressions Javascript insérées dans JSX évalueront une chaîne, un élément React ou une liste de ceux-ci. Cependant, `props.children` fonctionne exactement comme n'importe quelle prop dans le sens qu'elle peut passer n'importe quel genre de données, pas seulement celles que React sait rendre. Par exemple, si vous avez un composant personnalisé, vous pouvez lui faire prendre le callback `props.children' : 
 
 ```js{4,13}
-// Calls the children callback numTimes to produce a repeated component
+
+// Appelle les enfants callback numTimes pour produire un composant répété
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -397,17 +396,17 @@ function Repeat(props) {
 function ListOfTenThings() {
   return (
     <Repeat numTimes={10}>
-      {(index) => <div key={index}>This is item {index} in the list</div>}
+      {(index) => <div key={index}>Ceci est l'item {index} de la liste</div>}
     </Repeat>
   );
 }
 ```
 
-Children passed to a custom component can be anything, as long as that component transforms them into something React can understand before rendering. This usage is not common, but it works if you want to stretch what JSX is capable of.
+Les enfants passés à un composant personnalisé peuvent être n'importe quoi, tant que ce composant les transforme en quelque chose que React peut comprendre avant le rendu. Cette utilisation n'est pas courante, mais elle fonctionne si vous voulez étendre ce dont JSX est capable.
 
-### Booleans, Null, and Undefined Are Ignored {#booleans-null-and-undefined-are-ignored}
+### Booléens, Null, et Undefined Sont Ignorés {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, and `true` are valid children. They simply don't render. These JSX expressions will all render to the same thing:
+`false`, `null`, `undefined`, et `true` sont des enfants valides. Ils ne sont pas rendus. Ces expressions JSX rendront toutes la même chose :
 
 ```js
 <div />
@@ -423,7 +422,7 @@ Children passed to a custom component can be anything, as long as that component
 <div>{true}</div>
 ```
 
-This can be useful to conditionally render React elements. This JSX only renders a `<Header />` if `showHeader` is `true`:
+Ceci peut être utile pour le rendu conditionnel des éléments React. Ce JSX rend un `<Header />` uniquement si `showHeader` est à `true`:
 
 ```js{2}
 <div>
@@ -432,7 +431,7 @@ This can be useful to conditionally render React elements. This JSX only renders
 </div>
 ```
 
-One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), such as the `0` number, are still rendered by React. For example, this code will not behave as you might expect because `0` will be printed when `props.messages` is an empty array:
+Une mise en garde s'impose : certaines valeurs ["falsy"](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), comme le nombre `0`, sont rendus par React. Par exemple, ce code ne se comportera pas comme vous l'esperez car `0` sera affichée lorsque `props.messages` est un tableau vide:
 
 ```js{2}
 <div>
@@ -442,7 +441,7 @@ One caveat is that some ["falsy" values](https://developer.mozilla.org/en-US/doc
 </div>
 ```
 
-To fix this, make sure that the expression before `&&` is always boolean:
+Pour corriger cela, assurez-vous que l'expression avant `&&` est toujours un booléen:
 
 ```js{2}
 <div>
@@ -452,10 +451,10 @@ To fix this, make sure that the expression before `&&` is always boolean:
 </div>
 ```
 
-Conversely, if you want a value like `false`, `true`, `null`, or `undefined` to appear in the output, you have to [convert it to a string](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) first:
+À l'inverse, si vous voulez qu'une valeur comme `false`, `true`, `null`, ou `undefined` apparaisse comme rendu, vous devez d'abord la [convertir en une chaîne de caractères](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) 
 
 ```js{2}
 <div>
-  My JavaScript variable is {String(myVariable)}.
+  Ma variable Javascript est {String(myVariable)}.
 </div>
 ```

From d9f39dac3c62235977bfde1c2040b1734e5debc6 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 18 Mar 2019 13:47:56 +0100
Subject: [PATCH 2/6] Update content/docs/jsx-in-depth.md

Co-Authored-By: juliettelofaro <33547826+juliettelofaro@users.noreply.github.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 5c0571d88..edc3682c0 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -13,7 +13,7 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fondamentalement, JSX fournit du sucre syntaxique pour la fonction `React.createElement(component, props, ...children)`. Le code JSX:
+Fondamentalement, JSX fournit juste du sucre syntaxique pour la fonction `React.createElement(component, props, ...children)`. Le code JSX :
 
 ```js
 <MyButton color="blue" shadowSize={2}>

From fdfe7dbf2f3e6c26c61925572157e6582af389c0 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 18 Mar 2019 13:53:59 +0100
Subject: [PATCH 3/6] Apply suggestions from code review

Co-Authored-By: juliettelofaro <33547826+juliettelofaro@users.noreply.github.com>
---
 content/docs/jsx-in-depth.md | 153 ++++++++++++++++++-----------------
 1 file changed, 77 insertions(+), 76 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index edc3682c0..f3bac19fd 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -17,27 +17,27 @@ Fondamentalement, JSX fournit juste du sucre syntaxique pour la fonction `React.
 
 ```js
 <MyButton color="blue" shadowSize={2}>
-  Cliquez!
+  Cliquez ici
 </MyButton>
 ```
 
-est compilé en:
+est compilé en :
 
 ```js
 React.createElement(
   MyButton,
   {color: 'blue', shadowSize: 2},
-  'Cliquez!'
+  'Cliquez ici'
 )
 ```
 
-Il est aussi possible d'utiliser la balise à fermeture automatique si il n'y a pas d'enfants. Donc:
+Il est aussi possible d'utiliser la balise auto-fermante si il n'y a pas d'enfants. Donc :
 
 ```js
 <div className="sidebar" />
 ```
 
-est compilé en:
+est compilé en :
 
 ```js
 React.createElement(
@@ -46,19 +46,19 @@ React.createElement(
   null
 )
 ```
-Si vous souhaitez voir comment certains éléments JSX spécifiques sont compilés en Javascript, vous pouvez utiliser [le compileur en ligne Babel](babel://jsx-simple-example).
+Si vous souhaitez voir comment certains éléments JSX spécifiques sont compilés en JavaScript, vous pouvez utiliser [le compilateur Babel en ligne](babel://jsx-simple-example).
 
 ## Spécifier le type d'un élément React {#specifying-the-react-element-type}
 
 La première partie d'une balise JSX détermine le type de l'élément React en question.
 
-Les types commençant par une lettre majuscule indiquent que la balise JSX fait référence à un composant React. Ces balises sont compilées en références directes à la variable nommée, donc si vous utilisez l'expression JSX  `<Foo />`, `Foo` doit être dans le scope.
+Les types commençant par une lettre majuscule indiquent que la balise JSX fait référence à un composant React. Ces balises sont compilées en références directes à la variable nommée, donc si vous utilisez l'expression JSX  `<Foo />`, `Foo` doit être présente dans la portée.
 
-### React doit être dans le scope {#react-must-be-in-scope}
+### React doit être présent dans la portée {#react-must-be-in-scope}
 
-Étant donné que JSX se compile en appel à `React.createElement`, la librairie `React` doit aussi être dans le scope de votre code JSX.
+Étant donné que JSX se compile en appels à `React.createElement`, la bibliothèque `React` doit aussi être présente dans la portée de votre code JSX.
 
-Par exemple, les deux imports sont nécessaires dans le code ci-dessous même si `React` et `CustomButton` ne sont pas directement référencés depuis Javascript:
+Par exemple, les deux imports sont nécessaires dans le code ci-dessous même si `React` et `CustomButton` ne sont pas directement référencés depuis JavaScript :
 
 ```js{1,2,5}
 import React from 'react';
@@ -70,18 +70,18 @@ function WarningButton() {
 }
 ```
 
-Si vous n'utilisez pas un bundler Javascript et que vous ne chargez pas React à partir d'une balise `<script>`, il est déjà dans le scope en tant que `React` global.
+Si vous n'utilisez pas un *bundler* JavaScript mais que vous chargez React à partir d'une balise `<script>`, il est déjà dans la portée en tant que variable globale `React`.
 
-### Utilisation de la notation en point pour les types JSX {#using-dot-notation-for-jsx-type}
+### Utiliser la notation à points pour un type JSX {#using-dot-notation-for-jsx-type}
 
-Vous pouvez également vous référez à un composant React en utilisant la notation en point de JSX. Ceci est pratique si vous avez un seul module qui exporte plusieurs composants React. Par exemple si `MyComponents.DatePicker` est un composant, vous pouvez directement l'utiliser dans JSX avec:
+Vous pouvez également référencer un composant React en utilisant la notation à points dans JSX. C’est pratique si vous avez un seul module qui exporte de nombreux composants React. Par exemple si `MyComponents.DatePicker` est un composant, vous pouvez directement l'utiliser dans JSX comme ceci :
 
 ```js{10}
 import React from 'react';
 
 const MyComponents = {
   DatePicker: function DatePicker(props) {
-    return <div>Imaginez une {props.color} datepicker ici.</div>;
+    return <div>Imaginez un sélecteur de dates {props.color} ici.</div>;
   }
 }
 
@@ -90,49 +90,49 @@ function BlueDatePicker() {
 }
 ```
 
-### Les composants qui définissent les utilisateurs doivent commencés par une majuscule {#user-defined-components-must-be-capitalized}
+### Les composants utilisateurs doivent commencer par une majuscule {#user-defined-components-must-be-capitalized}
 
-Quand un élément commence avec une lettre minuscule il fait référence à un composant intégré tel que `<div>` ou `<span>` et donne une chaîne de caractères `'div'` ou `'span'` passée à `React.createElement`. Les types qui commencent avec une lettre majuscule comme `<Foo />` sont compilés en `React.createElement(Foo)` et correspondent à un composant défini ou importé dans votre fichié Javascript.
+Quand un élément commence par une lettre minuscule il fait référence à un composant natif tel que `<div>` ou `<span>`, ce qui donne une chaîne de caractères `'div'` ou `'span'` passée à `React.createElement`. Les types qui commencent par une lettre majuscule comme `<Foo />` sont compilés en `React.createElement(Foo)` et correspondent à un composant défini ou importé dans votre fichier JavaScript.
 
-Nous recommandons de nommer les composants avec une lettre majuscule. Si vous avez un composant qui démarre avec une lettre minuscule, affectez-le à une variable avec une lettre majuscule avant de l'utiliser dans votre JSX.
+Nous recommandons de nommer vos composants avec une initiale majuscule. Si vous avez un composant qui démarre avec une lettre minuscule, affectez-le à une variable avec une initiale majuscule avant de l'utiliser dans votre JSX.
 
-Par exemple, ce code ne s'executera pas comme prévu:
+Par exemple, ce code ne s'exécutera pas comme prévu :
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Faux! Ceci est un composant est devrait commencé par une lettre majuscule:
+// Faux ! C’est un composant, il devrait commencer par une lettre majuscule :
 function hello(props) {
-  // Correct! Cette utilisation de <div> fonctionne car div est une balise HTML valide:
+  // Correct ! Cette utilisation de <div> fonctionne car div est une balise HTML valide :
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Faux! React pense que <hello /> est une balise HTML car il ne commence pas par une majuscule:
+  // Faux ! React pense que <hello /> est une balise HTML car il ça commence pas par une majuscule :
   return <hello toWhat="World" />;
 }
 ```
 
-Pour corriger cela, nous allons renommer `hello` en `Hello` et utiliser `<Hello />` lorsqu'on le mentionne:
+Pour corriger ça, nous allons renommer `hello` en `Hello` et utiliser `<Hello />` lorsqu'on y fait référence :
 
 ```js{3,4,10,11}
 import React from 'react';
 
-// Correct! Ceci est un composant et doit être en majuscule:
+// Correct ! C’est un composant, il doit avoir une initiale majuscule :
 function Hello(props) {
-  // Correct! Cette utilisation de <div> fonctionne car div est une balise HTML valide:
+  // Correct ! Cette utilisation de <div> fonctionne car div est une balise HTML valide :
   return <div>Hello {props.toWhat}</div>;
 }
 
 function HelloWorld() {
-  // Correct! React sait que <Hello /> est un composant car il commence par une majuscule.
+  // Correct ! React sait que <Hello /> est un composant car il commence par une majuscule.
   return <Hello toWhat="World" />;
 }
 ```
 
 ### Choix du type au moment de l'exécution {#choosing-the-type-at-runtime}
 
-Vous ne pouvez pas utiliser une expression générale pour le type d'un élément React. Si vous voulez utiliser une expression pour définir le type d'un élément, initialisez-la d'abord à une variable en minuscule. Cela arrive en général lorsque vous voulez afficher un composant différent basé sur une props:
+Vous ne pouvez pas utiliser une expression générale pour le type d'un élément React. Si vous voulez utiliser une expression pour définir le type d'un élément, affectez-la d'abord à une variable dont l'initiale est majuscule. Ça arrive en général lorsque vous voulez afficher un composant différent en fonction d’une prop :
 
 ```js{10,11}
 import React from 'react';
@@ -144,12 +144,12 @@ const components = {
 };
 
 function Story(props) {
-  // Faux! Un type JSX ne peut pas être une expression.
+  // Faux ! Un type JSX ne peut pas être une expression.
   return <components[props.storyType] story={props.story} />;
 }
 ```
 
-Pour corriger cela, nous allons d'abord initialiser le type à une variable commençant par une majuscule:
+Pour corriger ça, nous allons d'abord affecter le type à une variable commençant par une majuscule :
 
 ```js{10-12}
 import React from 'react';
@@ -161,7 +161,7 @@ const components = {
 };
 
 function Story(props) {
-  // Correct! Un type JSX peut être une variable commeçant par une majuscule.
+  // Correct ! Un type JSX peut être une variable commençant par une majuscule.
   const SpecificStory = components[props.storyType];
   return <SpecificStory story={props.story} />;
 }
@@ -171,9 +171,9 @@ function Story(props) {
 
 Il y a différents moyens de définir les props en JSX.
 
-### Les expressions Javascript comme props {#javascript-expressions-as-props}
+### Les expressions JavaScript comme props {#javascript-expressions-as-props}
 
-Vous pouvez passer n'importe quelle expression Javascript comme props, en l'entourant de `{}`. Par exemple, dans ce code JSX:
+Vous pouvez passer n'importe quelle expression JavaScript comme prop, en l'entourant avec `{}`. Par exemple, dans ce code JSX :
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
@@ -181,7 +181,7 @@ Vous pouvez passer n'importe quelle expression Javascript comme props, en l'ento
 
 Pour `MyComponent`, la valeur de `props.foo` sera `10` parce que l'expression `1 + 2 + 3 + 4` est calculée.
 
-Les déclarations `if` et les boucles `for` ne sont pas des expressions en Javascript, donc elle ne peuvent pas être directement utilisées en JSX. À la place, vous pouvez les mettre dans le code environnant. Par exemple:
+Les instructions `if` et les boucles `for` ne sont pas des expressions en JavaScript, donc elle ne peuvent pas être directement utilisées en JSX. Au lieu de ça, vous pouvez les mettre dans le code environnant. Par exemple :
 
 ```js{3-7}
 function NumberDescriber(props) {
@@ -194,11 +194,11 @@ function NumberDescriber(props) {
   return <div>{props.number} est un nombre {description}</div>;
 }
 ```
-Vous pouvez en savoir plus sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes.
+Vous pouvez en apprendre davantage sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes.
 
 ### Les expressions littérales {#string-literals}
 
-Vous pouvez passer une expression littérale comme props. Les deux expressions JSX ci-dessous sont équivalentes:
+Vous pouvez passer un littéral chaîne comme prop. Les deux expressions JSX ci-dessous sont équivalentes :
 
 ```js
 <MyComponent message="hello world" />
@@ -206,7 +206,7 @@ Vous pouvez passer une expression littérale comme props. Les deux expressions J
 <MyComponent message={'hello world'} />
 ```
 
-Quand vous passez une expression littérale, sa valeur est du HTML non-échappé. Donc ces deux expressions JSX sont équivalentes:
+Quand vous passez un littéral chaîne, sa valeur subit un échappement HTML inverse. Ces deux expressions JSX sont donc équivalentes :
 
 ```js
 <MyComponent message="&lt;3" />
@@ -216,9 +216,9 @@ Quand vous passez une expression littérale, sa valeur est du HTML non-échappé
 
 Ce comportement n'est en général pas pertinent, ce n'est mentionné ici que par souci d'exhaustivité.
 
-### Les props initialisées à "true" {#props-default-to-true}
+### Les props valent `true` par défaut {#props-default-to-true}
 
-Si vous n'affectez aucune valeur à une props, sa valeur par défaut sera `true`. Ces deux expressions JSX sont équivalentes:
+Si vous n'affectez aucune valeur à une prop, sa valeur par défaut sera `true`. Ces deux expressions JSX sont équivalentes :
 
 ```js
 <MyTextBox autocomplete />
@@ -226,11 +226,11 @@ Si vous n'affectez aucune valeur à une props, sa valeur par défaut sera `true`
 <MyTextBox autocomplete={true} />
 ```
 
-En général, nous ne recommandons pas cette utilisationcar cela peut être confondu avec [l'abrévation des objets ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Object_initializer#New_notations_in_ECMAScript_2015) `{foo}` qui est l'abréviation de `{foo: foo}` aulieu de `{foo: true}`. Ce comportement existe uniquement pour qu'il corresponde au comportement du HTML.
+En général, nous déconseillons cette syntaxe car ça peut être confondu avec [la notation ES6 de propriétés concises](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Opérateurs/Initialisateur_objet) `{foo}` qui est l'abréviation de `{foo: foo}` et non de `{foo: true}`. Ce comportement existe uniquement par souci de cohérence avec HTML.
 
-### Syntaxe de décomposition {#spread-attributes}
+### Décomposition des props {#spread-attributes}
 
-Si vous avez déjà un objet `props` et vous voulez l'utiliser en JSX, vous pouvez utiliser l'opérateur de diffusion ("spread operator") `...` pour faire passer l'ensemble de l'objet props. Ces deux composants sont équivalents:
+Si vous avez déjà un objet `props` et souhaitez l'utiliser en JSX, vous pouvez utiliser l'opérateur de décomposition *(spread operator, NdT)* `...` pour passer l'ensemble de l'objet props. Ces deux composants sont équivalents :
 
 ```js{7}
 function App1() {
@@ -243,7 +243,7 @@ function App2() {
 }
 ```
 
-Vous pouvez aussi choisir certaines props que votre composant utilisera en passant toutes les autres props avec l'opérateur de diffusion.
+Vous pouvez également choisir certaines props que votre composant utilisera en passant toutes les autres props avec l'opérateur de *rest*.
 
 ```js{2}
 const Button = props => {
@@ -255,41 +255,41 @@ const Button = props => {
 const App = () => {
   return (
     <div>
-      <Button kind="primary" onClick={() => console.log("cliqué!")}>
-        Hello World!
+      <Button kind="primary" onClick={() => console.log("cliqué !")}>
+        Bonjour monde !
       </Button>
     </div>
   );
 };
 ```
 
-Dans l'exemple ci-dessus, la prop `kind` est utilisée en toute sécurité et *n'est pas* passée à l'élément `<button>` dans le DOM.
-Toutes les autres props sont passées via l'objet `...other` rendant ce composant très flexible. Vous pouvez voir que cela passe les props `onClick` et `children`.
+Dans l'exemple ci-dessus, la prop `kind` est extraite pour le composant principal et *n'est pas* passée à l'élément `<button>` du DOM.
+Toutes les autres props sont passées via l'objet `...other`, ce qui rend ce composant très flexible. Vous pouvez voir qu’il passe les props `onClick` et `children`.
 
-Les attributs de diffusion peuvent être utiles, mais ils permettent aussi de passer facilement des props inutiles aux composants qui ne s'en soucient pas ou de passer des attributs HTML invalides au DOM. Nous vous recommandons d'utiliser cette syntaxe avec parcimonie.  
+La décomposition des props peut être utile, mais elle permet aussi de passer trop facilement des props inutiles aux composants, ou de passer des attributs HTML invalides au DOM. Nous vous conseillons d'utiliser cette syntaxe avec parcimonie.  
 
-## Les enfants en JSX {#children-in-jsx}
+## Les éléments enfants en JSX {#children-in-jsx}
 
-Dans les expressions JSX qui contiennent une balise ouvrante et une balise fermante, le contenu entre ces deux balises est passé comme une prop spéciale: `props.children`. Il existe plusieurs moyens pour passer ces enfants:
+Dans les expressions JSX qui comportent une balise ouvrante et une balise fermante, le contenu entre ces deux balises est passé comme une prop spéciale : `props.children`. Il existe plusieurs moyens pour passer ces enfants :
 
-### Littéraux de chaînes de caractères {#string-literals-1}
+### Littéraux chaînes {#string-literals-1}
 
-Vous pouvez mettre une chaîne de caractères entre une balise ouvrante et une fermante et `props.children` définira cette chaîne de caractère. Ceci est utile pour la plupart des éléments HTML intégrés. Par exemple:
+Vous pouvez mettre une chaîne de caractères entre une balise ouvrante et une fermante et `props.children` sera juste cette chaîne de caractères. C’est utile pour la plupart des éléments HTML natifs. Par exemple :
 
 ```js
-<MyComponent>Hello world!</MyComponent>
+<MyComponent>Bonjour monde !</MyComponent>
 ```
 
-Ceci est du JSX valide, et `props.children` dans `MyComponent` sera simplement la chaîne de caractères `"Hello world!"`. Le HTML est non-échappé, donc vous pouvez généralement écrire du JSX de la même façon que vous écrivez du HTML, c'est-à-dire :
+C’est du JSX valide, et `props.children` dans `MyComponent` sera simplement la chaîne de caractères `"Bonjour monde !"`. Le HTML subit un échappement inverse, donc vous pouvez généralement écrire du JSX de la même façon que vous écrivez du HTML, c'est-à-dire :
 
 ```html
-<div>Ceci est à la fois du HTML &amp; du JSX valides.</div>
+<div>Ce contenu est valide en HTML &amp; en JSX.</div>
 ```
 
-JSX supprime les espaces en début et en fin de ligne. Il supprime également les lignes vides. Les nouvelles lignes adjacentes aux balises sont supprimées; les nouvelles lignes qui apparaissent au milieu d'une chaîne de caractères sont condensées en un seul espace. Donc, tous les codes ci-dessous donnent le même résultat :
+JSX supprime les espaces en début et en fin de ligne. Il supprime également les lignes vides. Les sauts de lignes adjacents aux balises sont retirés ; les sauts de lignes apparaissant au sein de littéraux chaînes sont ramenés à une seule espace. Du coup, tous les codes ci-dessous donnent le même résultat :
 
 ```js
-<div>Hello World</div>
+<div>Bonjour monde</div>
 
 <div>
   Hello World
@@ -306,9 +306,9 @@ JSX supprime les espaces en début et en fin de ligne. Il supprime également le
 </div>
 ```
 
-### Enfants JSX {#jsx-children}
+### Éléments JSX enfants {#jsx-children}
 
-Vous pouvez fournir plus d'éléments JSX en tant qu'enfants. Ceci est utile pour afficher les composants imbriqués :
+Vous pouvez fournir plus d'éléments JSX en tant qu'enfants. C’est utile pour afficher des composants imbriqués :
 
 ```js
 <MyContainer>
@@ -317,7 +317,7 @@ Vous pouvez fournir plus d'éléments JSX en tant qu'enfants. Ceci est utile pou
 </MyContainer>
 ```
 
-Vous pouvez mélanger ensemble différents types d'enfants, il est donc possible d'utiliser des chaînes de caractères littérales avec des enfants JSX. Nous avons ici encore un aspect où JSX fonctionne comme le HTML, ceci est du code JSX et HTML valide:
+Vous pouvez mélanger différents types d'enfants, comme par exemple des littéraux chaînes et des éléments JSX. Là encore, JSX est similaire à HTML, de sorte que le code suivant est valide tant en HTML qu'en JSX :
 
 ```html
 <div>
@@ -329,11 +329,11 @@ Vous pouvez mélanger ensemble différents types d'enfants, il est donc possible
 </div>
 ```
 
-Un composant React peut aussi renvoyer un tableau d'éléments:
+Un composant React peut aussi renvoyer un tableau d'éléments :
 
 ```js
 render() {
-  // Pas besoin d'envelopper les éléments de la liste dans un élément supplémentaire !
+  // Pas besoin d'enrober les éléments de la liste dans un élément supplémentaire !
   return [
     // N'oubliez pas les "keys" :)
     <li key="A">First item</li>,
@@ -343,9 +343,9 @@ render() {
 }
 ```
 
-### Les expressions JavaScript comme Enfants {#javascript-expressions-as-children}
+### Les expressions JavaScript comme enfants {#javascript-expressions-as-children}
 
-Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en l'enfermant dans des `{}`. Par exemple, ces expressions sont équivalentes :
+Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en l'enrobant avec `{}`. Ainsi, ces expressions sont équivalentes :
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -353,7 +353,7 @@ Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en
 <MyComponent>{'foo'}</MyComponent>
 ```
 
-Ceci est souvent utile pour rendre une liste d'expressions JSX de longueur arbitraire. Par exemple, cela rend une liste HTML :
+C’est souvent utile pour afficher une liste d'expressions JSX de longueur quelconque. Par exemple, ce code affiche une liste HTML :
 
 ```js{2,9}
 function Item(props) {
@@ -370,21 +370,22 @@ function TodoList() {
 }
 ```
 
-Les expressions JavaScript peuvent être mélangées avec d'autres types d'enfants. Ceci est souvent utile à la place des modèles de chaînes de caractères:
+Les expressions JavaScript peuvent être mélangées avec d'autres types d'enfants. C‘est souvent utile en remplacement de gabarits textuels :
 
 ```js{2}
 function Hello(props) {
-  return <div>Hello {props.addressee}!</div>;
+  return <div>Bonjour {props.addressee} !</div>;
 }
 ```
 
-### Les fonctions comme Enfants {#functions-as-children}
+### Les fonctions comme enfants {#functions-as-children}
 
-Normalement, les expressions Javascript insérées dans JSX évalueront une chaîne, un élément React ou une liste de ceux-ci. Cependant, `props.children` fonctionne exactement comme n'importe quelle prop dans le sens qu'elle peut passer n'importe quel genre de données, pas seulement celles que React sait rendre. Par exemple, si vous avez un composant personnalisé, vous pouvez lui faire prendre le callback `props.children' : 
+En temps normal, les expressions Javascript insérées dans JSX produiront une chaîne, un élément React ou une liste de ces types. Cependant, `props.children` fonctionne exactement comme n'importe quelle prop dans le sens où elle peut passer n'importe quel genre de données, pas seulement celles que React sait afficher. Par exemple, si vous avez un composant personnalisé, vous pouvez lui faire accepter une fonction de rappel dans `props.children' : 
 
 ```js{4,13}
 
-// Appelle les enfants callback numTimes pour produire un composant répété
+// Appelle la fonction de rappel children à raison de numTimes fois
+// afin de produire une répétition du composant
 function Repeat(props) {
   let items = [];
   for (let i = 0; i < props.numTimes; i++) {
@@ -396,17 +397,17 @@ function Repeat(props) {
 function ListOfTenThings() {
   return (
     <Repeat numTimes={10}>
-      {(index) => <div key={index}>Ceci est l'item {index} de la liste</div>}
+      {(index) => <div key={index}>Ceci est l'élément {index} de la liste</div>}
     </Repeat>
   );
 }
 ```
 
-Les enfants passés à un composant personnalisé peuvent être n'importe quoi, tant que ce composant les transforme en quelque chose que React peut comprendre avant le rendu. Cette utilisation n'est pas courante, mais elle fonctionne si vous voulez étendre ce dont JSX est capable.
+Les enfants passés à un composant personnalisé peuvent être n'importe quoi, du moment que ce composant les transforme en quelque chose que React peut comprendre avant le rendu. Cette utilisation n'est pas courante, mais elle fonctionne si vous voulez étendre ce dont JSX est capable.
 
-### Booléens, Null, et Undefined Sont Ignorés {#booleans-null-and-undefined-are-ignored}
+### Les booléens ainsi que null et undefined sont ignorés {#booleans-null-and-undefined-are-ignored}
 
-`false`, `null`, `undefined`, et `true` sont des enfants valides. Ils ne sont pas rendus. Ces expressions JSX rendront toutes la même chose :
+`false`, `null`, `undefined`, et `true` sont des enfants valides. Ils ne sont simplement pas exploités. Ces expressions JSX produiront toutes la même chose :
 
 ```js
 <div />
@@ -422,7 +423,7 @@ Les enfants passés à un composant personnalisé peuvent être n'importe quoi,
 <div>{true}</div>
 ```
 
-Ceci peut être utile pour le rendu conditionnel des éléments React. Ce JSX rend un `<Header />` uniquement si `showHeader` est à `true`:
+Ça peut être utile pour afficher des éléments React de façon conditionnelle. Ce JSX produit un `<Header />` uniquement si `showHeader` est à `true` :
 
 ```js{2}
 <div>
@@ -431,7 +432,7 @@ Ceci peut être utile pour le rendu conditionnel des éléments React. Ce JSX re
 </div>
 ```
 
-Une mise en garde s'impose : certaines valeurs ["falsy"](https://developer.mozilla.org/en-US/docs/Glossary/Falsy), comme le nombre `0`, sont rendus par React. Par exemple, ce code ne se comportera pas comme vous l'esperez car `0` sera affichée lorsque `props.messages` est un tableau vide:
+Une mise en garde s'impose : certaines valeurs [*falsy*](https://developer.mozilla.org/fr/docs/Glossaire/Falsy), comme le nombre `0`, sont tout de même affichées par React. Par exemple, ce code ne se comportera pas comme vous l'espérez car il affichera `0` lorsque `props.messages` est un tableau vide :
 
 ```js{2}
 <div>
@@ -441,7 +442,7 @@ Une mise en garde s'impose : certaines valeurs ["falsy"](https://developer.mozil
 </div>
 ```
 
-Pour corriger cela, assurez-vous que l'expression avant `&&` est toujours un booléen:
+Pour corriger ça, assurez-vous que l'expression avant `&&` est toujours un booléen :
 
 ```js{2}
 <div>
@@ -451,7 +452,7 @@ Pour corriger cela, assurez-vous que l'expression avant `&&` est toujours un boo
 </div>
 ```
 
-À l'inverse, si vous voulez qu'une valeur comme `false`, `true`, `null`, ou `undefined` apparaisse comme rendu, vous devez d'abord la [convertir en une chaîne de caractères](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#String_conversion) 
+Réciproquement, si vous voulez qu'une valeur comme `false`, `true`, `null`, ou `undefined` soit bien affichée, vous devez d'abord la [convertir en chaîne](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Conversion_en_String) : 
 
 ```js{2}
 <div>

From 4c7802a538c8a7dc4d77bb78e21ec74653df8857 Mon Sep 17 00:00:00 2001
From: juliettelofaro <33547826+juliettelofaro@users.noreply.github.com>
Date: Mon, 18 Mar 2019 14:07:08 +0100
Subject: [PATCH 4/6] Update jsx-in-depth.md

---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index f3bac19fd..d55138103 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX In Depth
+title: JSX dans le détail 
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"

From 6db63dd6c50f7ce8465d8cb406acc3f83a9801bf Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Mon, 18 Mar 2019 14:43:33 +0100
Subject: [PATCH 5/6] Apply suggestions from code review

Co-Authored-By: juliettelofaro <33547826+juliettelofaro@users.noreply.github.com>
---
 content/docs/jsx-in-depth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index d55138103..36080c02a 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -196,7 +196,7 @@ function NumberDescriber(props) {
 ```
 Vous pouvez en apprendre davantage sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes.
 
-### Les expressions littérales {#string-literals}
+### Les littéraux chaînes {#string-literals}
 
 Vous pouvez passer un littéral chaîne comme prop. Les deux expressions JSX ci-dessous sont équivalentes :
 

From fc9fb7acae6f6b40d56414e19be0f32de9877af3 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Tue, 19 Mar 2019 17:54:33 +0100
Subject: [PATCH 6/6] Final tweaks

---
 content/docs/jsx-in-depth.md | 62 +++++++++++++++++++-----------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/content/docs/jsx-in-depth.md b/content/docs/jsx-in-depth.md
index 36080c02a..787b19056 100644
--- a/content/docs/jsx-in-depth.md
+++ b/content/docs/jsx-in-depth.md
@@ -1,6 +1,6 @@
 ---
 id: jsx-in-depth
-title: JSX dans le détail 
+title: JSX dans le détail
 permalink: docs/jsx-in-depth.html
 redirect_from:
   - "docs/jsx-spread.html"
@@ -13,7 +13,9 @@ redirect_from:
   - "docs/jsx-in-depth-ko-KR.html"
 ---
 
-Fondamentalement, JSX fournit juste du sucre syntaxique pour la fonction `React.createElement(component, props, ...children)`. Le code JSX :
+Fondamentalement, JSX fournit juste du sucre syntaxique pour la fonction `React.createElement(component, props, ...children)`.
+
+Le code JSX :
 
 ```js
 <MyButton color="blue" shadowSize={2}>
@@ -52,7 +54,7 @@ Si vous souhaitez voir comment certains éléments JSX spécifiques sont compil
 
 La première partie d'une balise JSX détermine le type de l'élément React en question.
 
-Les types commençant par une lettre majuscule indiquent que la balise JSX fait référence à un composant React. Ces balises sont compilées en références directes à la variable nommée, donc si vous utilisez l'expression JSX  `<Foo />`, `Foo` doit être présente dans la portée.
+Les types commençant par une lettre majuscule indiquent que la balise JSX fait référence à un composant React. Ces balises sont compilées en références directes à la variable nommée, donc si vous utilisez l'expression JSX  `<Foo />`, l’identifiant `Foo` doit être présent dans la portée.
 
 ### React doit être présent dans la portée {#react-must-be-in-scope}
 
@@ -108,7 +110,7 @@ function hello(props) {
 }
 
 function HelloWorld() {
-  // Faux ! React pense que <hello /> est une balise HTML car il ça commence pas par une majuscule :
+  // Faux ! React pense que <hello /> est une balise HTML car il commence pas par une majuscule :
   return <hello toWhat="World" />;
 }
 ```
@@ -149,7 +151,7 @@ function Story(props) {
 }
 ```
 
-Pour corriger ça, nous allons d'abord affecter le type à une variable commençant par une majuscule :
+Pour corriger ça, nous allons d'abord affecter le type à une variable dont l’identifiant commence par une majuscule :
 
 ```js{10-12}
 import React from 'react';
@@ -173,7 +175,7 @@ Il y a différents moyens de définir les props en JSX.
 
 ### Les expressions JavaScript comme props {#javascript-expressions-as-props}
 
-Vous pouvez passer n'importe quelle expression JavaScript comme prop, en l'entourant avec `{}`. Par exemple, dans ce code JSX :
+Vous pouvez passer n'importe quelle expression JavaScript comme prop, en l'entourant avec des accolades `{}`. Par exemple, dans ce code JSX :
 
 ```js
 <MyComponent foo={1 + 2 + 3 + 4} />
@@ -194,7 +196,7 @@ function NumberDescriber(props) {
   return <div>{props.number} est un nombre {description}</div>;
 }
 ```
-Vous pouvez en apprendre davantage sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes.
+Vous pouvez en apprendre davantage sur les [conditions](/docs/conditional-rendering.html) et les [boucles](/docs/lists-and-keys.html) au sein des sections correspondantes de la documentation.
 
 ### Les littéraux chaînes {#string-literals}
 
@@ -214,7 +216,7 @@ Quand vous passez un littéral chaîne, sa valeur subit un échappement HTML inv
 <MyComponent message={'<3'} />
 ```
 
-Ce comportement n'est en général pas pertinent, ce n'est mentionné ici que par souci d'exhaustivité.
+Ce comportement n'est en général pas pertinent (au sens où vous n’avez pas à vous en soucier particulièrement), ce n'est mentionné ici que par souci d'exhaustivité.
 
 ### Les props valent `true` par défaut {#props-default-to-true}
 
@@ -266,7 +268,7 @@ const App = () => {
 Dans l'exemple ci-dessus, la prop `kind` est extraite pour le composant principal et *n'est pas* passée à l'élément `<button>` du DOM.
 Toutes les autres props sont passées via l'objet `...other`, ce qui rend ce composant très flexible. Vous pouvez voir qu’il passe les props `onClick` et `children`.
 
-La décomposition des props peut être utile, mais elle permet aussi de passer trop facilement des props inutiles aux composants, ou de passer des attributs HTML invalides au DOM. Nous vous conseillons d'utiliser cette syntaxe avec parcimonie.  
+La décomposition des props peut être utile, mais elle permet aussi de passer trop facilement des props inutiles aux composants, ou de passer des attributs HTML invalides au DOM. Nous vous conseillons d'utiliser cette syntaxe avec parcimonie.
 
 ## Les éléments enfants en JSX {#children-in-jsx}
 
@@ -280,35 +282,35 @@ Vous pouvez mettre une chaîne de caractères entre une balise ouvrante et une f
 <MyComponent>Bonjour monde !</MyComponent>
 ```
 
-C’est du JSX valide, et `props.children` dans `MyComponent` sera simplement la chaîne de caractères `"Bonjour monde !"`. Le HTML subit un échappement inverse, donc vous pouvez généralement écrire du JSX de la même façon que vous écrivez du HTML, c'est-à-dire :
+C’est du JSX valide, et `props.children` dans `MyComponent` sera simplement la chaîne de caractères `"Bonjour monde !"`. Le HTML subit un échappement inverse, donc vous pouvez généralement écrire du JSX de la même façon que vous écrivez du HTML, c'est-à-dire :
 
 ```html
 <div>Ce contenu est valide en HTML &amp; en JSX.</div>
 ```
 
-JSX supprime les espaces en début et en fin de ligne. Il supprime également les lignes vides. Les sauts de lignes adjacents aux balises sont retirés ; les sauts de lignes apparaissant au sein de littéraux chaînes sont ramenés à une seule espace. Du coup, tous les codes ci-dessous donnent le même résultat :
+JSX supprime les espaces en début et en fin de ligne. Il supprime également les lignes vides. Les sauts de lignes adjacents aux balises sont retirés ; les sauts de lignes apparaissant au sein de littéraux chaînes sont ramenés à une seule espace. Du coup, tous les codes ci-dessous donnent le même résultat :
 
 ```js
 <div>Bonjour monde</div>
 
 <div>
-  Hello World
+  Bonjour monde
 </div>
 
 <div>
-  Hello
-  World
+  Bonjour
+  monde
 </div>
 
 <div>
 
-  Hello World
+  Bonjour monde
 </div>
 ```
 
 ### Éléments JSX enfants {#jsx-children}
 
-Vous pouvez fournir plus d'éléments JSX en tant qu'enfants. C’est utile pour afficher des composants imbriqués :
+Vous pouvez fournir des éléments JSX supplémentaires en tant qu'enfants. C’est utile pour afficher des composants imbriqués :
 
 ```js
 <MyContainer>
@@ -321,10 +323,10 @@ Vous pouvez mélanger différents types d'enfants, comme par exemple des littér
 
 ```html
 <div>
-  Here is a list:
+  Voici une liste :
   <ul>
-    <li>Item 1</li>
-    <li>Item 2</li>
+    <li>Élément 1</li>
+    <li>Élément 2</li>
   </ul>
 </div>
 ```
@@ -333,19 +335,19 @@ Un composant React peut aussi renvoyer un tableau d'éléments :
 
 ```js
 render() {
-  // Pas besoin d'enrober les éléments de la liste dans un élément supplémentaire !
+  // Pas besoin d’enrober les éléments de la liste dans un élément supplémentaire !
   return [
-    // N'oubliez pas les "keys" :)
-    <li key="A">First item</li>,
-    <li key="B">Second item</li>,
-    <li key="C">Third item</li>,
+    // N'oubliez pas les "keys" :)
+    <li key="A">Premier élément</li>,
+    <li key="B">Deuxième élément</li>,
+    <li key="C">Troisième élément</li>,
   ];
 }
 ```
 
 ### Les expressions JavaScript comme enfants {#javascript-expressions-as-children}
 
-Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en l'enrobant avec `{}`. Ainsi, ces expressions sont équivalentes :
+Vous pouvez passer n'importe quelle expression JavaScript en tant qu'enfant, en l'enrobant avec des accolades `{}`. Ainsi, ces expressions sont équivalentes :
 
 ```js
 <MyComponent>foo</MyComponent>
@@ -361,7 +363,7 @@ function Item(props) {
 }
 
 function TodoList() {
-  const todos = ['finish doc', 'submit pr', 'nag dan to review'];
+  const todos = ['finir la doc', 'envoyer la pr', 'tanner Chris pour une revue'];
   return (
     <ul>
       {todos.map((message) => <Item key={message} message={message} />)}
@@ -380,7 +382,9 @@ function Hello(props) {
 
 ### Les fonctions comme enfants {#functions-as-children}
 
-En temps normal, les expressions Javascript insérées dans JSX produiront une chaîne, un élément React ou une liste de ces types. Cependant, `props.children` fonctionne exactement comme n'importe quelle prop dans le sens où elle peut passer n'importe quel genre de données, pas seulement celles que React sait afficher. Par exemple, si vous avez un composant personnalisé, vous pouvez lui faire accepter une fonction de rappel dans `props.children' : 
+En temps normal, les expressions Javascript insérées dans JSX produiront une chaîne, un élément React ou une liste de ces types. Cependant, `props.children` fonctionne exactement comme n'importe quelle prop dans le sens où elle peut passer n'importe quel genre de données, pas seulement celles que React sait afficher.
+
+Par exemple, si vous avez un composant personnalisé, vous pouvez lui faire accepter une fonction de rappel dans `props.children` :
 
 ```js{4,13}
 
@@ -405,7 +409,7 @@ function ListOfTenThings() {
 
 Les enfants passés à un composant personnalisé peuvent être n'importe quoi, du moment que ce composant les transforme en quelque chose que React peut comprendre avant le rendu. Cette utilisation n'est pas courante, mais elle fonctionne si vous voulez étendre ce dont JSX est capable.
 
-### Les booléens ainsi que null et undefined sont ignorés {#booleans-null-and-undefined-are-ignored}
+### Les booléens ainsi que `null` et `undefined` sont ignorés {#booleans-null-and-undefined-are-ignored}
 
 `false`, `null`, `undefined`, et `true` sont des enfants valides. Ils ne sont simplement pas exploités. Ces expressions JSX produiront toutes la même chose :
 
@@ -452,7 +456,7 @@ Pour corriger ça, assurez-vous que l'expression avant `&&` est toujours un bool
 </div>
 ```
 
-Réciproquement, si vous voulez qu'une valeur comme `false`, `true`, `null`, ou `undefined` soit bien affichée, vous devez d'abord la [convertir en chaîne](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Conversion_en_String) : 
+Réciproquement, si vous voulez qu'une valeur comme `false`, `true`, `null`, ou `undefined` soit bien affichée, vous devez d'abord la [convertir en chaîne](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/String#Conversion_en_String) :
 
 ```js{2}
 <div>