From 897dd128004378d28151a7be93d5cfb63ef320d7 Mon Sep 17 00:00:00 2001
From: Sylvain Hamann <sylvhama@gmail.com>
Date: Sat, 9 Feb 2019 20:56:30 -0500
Subject: [PATCH 01/17] WIP introduction-jsx translation

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

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d76c3ace6..8e9217dea 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,6 +1,6 @@
 ---
 id: introducing-jsx
-title: Introducing JSX
+title: Introduction au JSX
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html

From 05e498dbfc7f3a7998b9ccd4a481e08053f42479 Mon Sep 17 00:00:00 2001
From: Sylvain Hamann <sylvain.hamann@ubisoft.com>
Date: Tue, 12 Feb 2019 22:12:40 -0500
Subject: [PATCH 02/17] Traduction d'introduction a JSX

---
 content/docs/introducing-jsx.md | 109 ++++++++++++++++----------------
 1 file changed, 55 insertions(+), 54 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 8e9217dea..ca845413b 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -1,40 +1,40 @@
 ---
 id: introducing-jsx
-title: Introduction au JSX
+title: Introduction à JSX
 permalink: docs/introducing-jsx.html
 prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Consider this variable declaration:
+Observez cette déclaration de variable :
 
 ```js
-const element = <h1>Hello, world!</h1>;
+const element = <h1>Bonjour, monde !</h1>;
 ```
 
-This funny tag syntax is neither a string nor HTML.
+Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML. 
+ 
+Cela s'appelle du JSX, c'est une extension syntaxique de JavaScript. Nous recommandons de l'utiliser avec React afin de décrire à quoi devrait ressembler l'interface utilisateur. JSX vous fait surement penser à un langage de balisage, mais il est accompagné de tout le pouvoir de JavaScript.
 
-It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.
+JSX produit des "éléments" React. Nous explorerons comment les rendre dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Ci-dessous vous pouvez trouver les bases en JSX à savoir afin de bien démarrer.
 
-JSX produces React "elements". We will explore rendering them to the DOM in the [next section](/docs/rendering-elements.html). Below, you can find the basics of JSX necessary to get you started.
+### Pourquoi le JSX ? {#why-jsx}
 
-### Why JSX? {#why-jsx}
+React embrasse le fait que la logique de rendu est intrinsèquement couplée à la logique de l'interface utilisateur : comment les événements sont-ils gérés, comment l'état évolue t-il dans le temps, et comment la donnée est-elle préparée pour l'affichage.
 
-React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.
+Au lieu de séparer artificiellement les *technologies* en mettant le balisage et la logique dans des fichiers séparés, React [sépare les *préoccupations*](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations) via des unités faiblement couplées appelées des "composants" qui contiennent les deux. Nous reviendrons sur les composants dans une [prochaine section](/docs/components-and-props.html), si vous vous ne sentez pas convaincu avec l'idée de mixer des balises dans du JS, [cette présentation](https://www.youtube.com/watch?v=x7cQ3mrcKaY) pourra peut-être vous faire changer d'avis.
 
-Instead of artificially separating *technologies* by putting markup and logic in separate files, React [separates *concerns*](https://en.wikipedia.org/wiki/Separation_of_concerns) with loosely coupled units called "components" that contain both. We will come back to components in a [further section](/docs/components-and-props.html), but if you're not yet comfortable putting markup in JS, [this talk](https://www.youtube.com/watch?v=x7cQ3mrcKaY) might convince you otherwise.
+React ne [nécessite pas](/docs/react-without-jsx.html) l'utilisation de JSX pour fonctionner, mais la plupart des gens le considère comme une aide visuel quand ils manipulent l'interface utilisateur dans le code JavaScript. Cela permet aussi à React de montrer des messages d'erreurs et d'avertissements plus utiles.
 
-React [doesn't require](/docs/react-without-jsx.html) using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.
+Nous pouvons enfin commencer !
 
-With that out of the way, let's get started!
+### Imbriqué des Expressions en JSX {#embedding-expressions-in-jsx}
 
-### Embedding Expressions in JSX {#embedding-expressions-in-jsx}
-
-In the example below, we declare a variable called `name` and then use it inside JSX by wrapping it in curly braces:
+Dans l'exemple suivant, nous déclarons une variable appelée `name` et nous l'utilisons ensuite dans du JSX en l'encadrant avec des accolades :
 
 ```js{1,2}
-const name = 'Josh Perez';
-const element = <h1>Hello, {name}</h1>;
+const name = 'Clarisse Agbegnenou';
+const element = <h1>Bonjour, {name}</h1>;
 
 ReactDOM.render(
   element,
@@ -42,9 +42,9 @@ ReactDOM.render(
 );
 ```
 
-You can put any valid [JavaScript expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Expressions) inside the curly braces in JSX. For example, `2 + 2`, `user.firstName`, or `formatName(user)` are all valid JavaScript expressions.
+Vous pouvez utiliser n'importe quelle [expression JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Expressions) valide dans des accolades en JSX. Par exemple, `2 + 2`, `user.firstName`, or `formatName(user)` sont toutes des expressions JavaScript valides.
 
-In the example below, we embed the result of calling a JavaScript function, `formatName(user)`, into an `<h1>` element.
+Dans l'exemple suivant, on intègre le résultat de l'appel d'une fonction JavaScript, `formatName(user)`, dans un élément `<h1>`.
 
 ```js{12}
 function formatName(user) {
@@ -52,13 +52,13 @@ function formatName(user) {
 }
 
 const user = {
-  firstName: 'Harper',
-  lastName: 'Perez'
+  firstName: 'Kylian',
+  lastName: 'Mbappé'
 };
 
 const element = (
   <h1>
-    Hello, {formatName(user)}!
+    Bonjour, {formatName(user)} !
   </h1>
 );
 
@@ -70,86 +70,87 @@ ReactDOM.render(
 
 [](codepen://introducing-jsx)
 
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](http://stackoverflow.com/q/2846283).
+On sépare le JSX sur plusieurs lignes pour une meilleure lecture. Par la même occasion, nous recommandons aussi de le mettre entre parenthèses afin d'éviter les pièges [d'insertion de point-virgule automatique](http://stackoverflow.com/q/2846283), notez que cette pratique n'est pas obligatoire.
 
-### JSX is an Expression Too {#jsx-is-an-expression-too}
+### JSX est aussi une expression {#jsx-is-an-expression-too}
 
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+Après la compilation, les expressions JSX deviennent des appels de fonctions JavaScripts réguliers et sont évalués en tant qu'objet JavaScript.
 
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+Cela signifie que vous pouvez utiliser JSX à l'intérieur d'instructions `if` ou de boucles `for`, l'assigner dans une variable, l'accepter en tant qu'argument, et le retourner depuis des fonctions :
 
 ```js{3,5}
 function getGreeting(user) {
   if (user) {
-    return <h1>Hello, {formatName(user)}!</h1>;
+    return <h1>Bonjour, {formatName(user)} !</h1>;
   }
-  return <h1>Hello, Stranger.</h1>;
+  return <h1>Bonjour, Inconnu.</h1>;
 }
 ```
 
-### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
+### Spécifier des Attributs avec JSX {#specifying-attributes-with-jsx}
 
-You may use quotes to specify string literals as attributes:
+Vous pouvez utiliser des guillemets doubles pour spécifier des chaînes de caractères littérales en tant qu’attributs :
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-You may also use curly braces to embed a JavaScript expression in an attribute:
+Vous pouvez aussi utiliser des accolades pour intégrer une expression JavaScript dans un attribut :
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+Ne mettez pas des guillemets doubles autour d'accolades quand vous intégrez une expression JavaScript dans un attribut. You devrez utiliser des guillemets doubles (for des valeurs de type chaîne de caractères) ou des accolades (pour des expressions), mais pas les deux dans le même attribut.
 
->**Warning:**
+>**Attention :**
 >
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+>Comme JSX est plus proche de JavaScript qu'il ne l'est du HTML, React DOM utilise le `camelCase` comme convention de nommage pour ses propriétés au lieu des noms des attributs HTML.
 >
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
+>Par exemple, `class` devient [`className`](https://developer.mozilla.org/fr/docs/Web/API/Element/className) en JSX, et `tabindex` devient [`tabIndex`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/tabIndex).
 
-### Specifying Children with JSX {#specifying-children-with-jsx}
+### Spécifier des Enfants avec JSX {#specifying-children-with-jsx}
 
-If a tag is empty, you may close it immediately with `/>`, like XML:
+Si une balise est vide, vous pouvez le fermer immédiatement via `/>`, comment en XML :
 
 ```js
 const element = <img src={user.avatarUrl} />;
 ```
 
-JSX tags may contain children:
+Les balises JSX peuvent contenir des enfants :
 
 ```js
 const element = (
   <div>
-    <h1>Hello!</h1>
-    <h2>Good to see you here.</h2>
+    <h1>Bonjour !</h1>
+    <h2>Content de te voir ici.</h2>
   </div>
 );
 ```
 
-### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
+### JSX Empêchent les Attaques de type Injection {#jsx-prevents-injection-attacks}
 
-It is safe to embed user input in JSX:
+Vous ne risquez rien si vous intégré une entrée utilisateur en JSX :
 
 ```js
 const title = response.potentiallyMaliciousInput;
-// This is safe:
+// Cela est sûr :
 const element = <h1>{title}</h1>;
 ```
 
-By default, React DOM [escapes](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
 
-### JSX Represents Objects {#jsx-represents-objects}
+Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) toutes les valeurs intégrées dans JSX avant de les rendre. Cela assure que vous ne pouvez jamais injecter quoi que ce soit d'autre que ce vous avez explicitement écrit dans votre application. Tout est converti en chaîne de caractères avant d'être rendu. Celle contribute a la prevention des attaques de type [XSS (cross-site-scripting)](https://fr.wikipedia.org/wiki/Cross-site_scripting).
+
+### JSX Représente des Objets {#jsx-represents-objects}
 
-Babel compiles JSX down to `React.createElement()` calls.
+Babel compile JSX vers des appels `React.createElement()`.
 
-These two examples are identical:
+Ces deux exemples sont identiques :
 
 ```js
 const element = (
   <h1 className="greeting">
-    Hello, world!
+    Bonjour, monde !
   </h1>
 );
 ```
@@ -158,11 +159,11 @@ const element = (
 const element = React.createElement(
   'h1',
   {className: 'greeting'},
-  'Hello, world!'
+  'Bonjour, monde !'
 );
 ```
 
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+`React.createElement()` effectue quelques controls pour vous aider à écrire un code sans bug mais essentiellement il crée un semblant d'objet qui ressemble à ceci :
 
 ```js
 // Note: this structure is simplified
@@ -170,15 +171,15 @@ const element = {
   type: 'h1',
   props: {
     className: 'greeting',
-    children: 'Hello, world!'
+    children: 'Bonjour, monde !'
   }
 };
 ```
 
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
+Ces objets sont appelés des "éléments React". Vous pouvez les imaginer commes des descriptions de ce que vous voulez voir sur l'écran. React lit ces objets et les utilises pour construir le DOM et tenir à jour.
 
-We will explore rendering React elements to the DOM in the next section.
+Nous explorons le rendu des éléments React vers le DOM dans la prochaine section.
 
->**Tip:**
+>**Astuce :**
 >
->We recommend using the ["Babel" language definition](http://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>Nous recommandons d'utiliser le [language de définition "Babel"](http://babeljs.io/docs/editors) dans votre éditeur préféré ainsi les codes ES6 et JSX sont proprement soulignés. Ce site internet utilise schéma de couleur [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) qui est compatible avec celui-ci.

From 7513de09f1f2c999aa56df639d68bb37effd0660 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 09:58:30 -0500
Subject: [PATCH 03/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index ca845413b..440b1d3de 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -14,7 +14,7 @@ const element = <h1>Bonjour, monde !</h1>;
 
 Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML. 
  
-Cela s'appelle du JSX, c'est une extension syntaxique de JavaScript. Nous recommandons de l'utiliser avec React afin de décrire à quoi devrait ressembler l'interface utilisateur. JSX vous fait surement penser à un langage de balisage, mais il est accompagné de tout le pouvoir de JavaScript.
+Ça s'appelle du JSX, et c'est une extension syntaxique de JavaScript. Nous recommandons de l'utiliser avec React afin de décrire à quoi devrait ressembler l'interface utilisateur (UI). JSX vous fait sûrement penser à un langage de balisage, mais il recèle toute la puissance de JavaScript.
 
 JSX produit des "éléments" React. Nous explorerons comment les rendre dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Ci-dessous vous pouvez trouver les bases en JSX à savoir afin de bien démarrer.
 

From acb25ab1733ebde90bcafdd524fa51a4641bf260 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:02:14 -0500
Subject: [PATCH 04/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 440b1d3de..b14e0004e 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -16,7 +16,7 @@ Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML.
  
 Ça s'appelle du JSX, et c'est une extension syntaxique de JavaScript. Nous recommandons de l'utiliser avec React afin de décrire à quoi devrait ressembler l'interface utilisateur (UI). JSX vous fait sûrement penser à un langage de balisage, mais il recèle toute la puissance de JavaScript.
 
-JSX produit des "éléments" React. Nous explorerons comment les rendre dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Ci-dessous vous pouvez trouver les bases en JSX à savoir afin de bien démarrer.
+JSX produit des « éléments » React. Nous verrons comment les retranscrire dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Dans la suite de ce document, nous verrons les bases de JSX dont vous aurez besoin pour bien démarrer.
 
 ### Pourquoi le JSX ? {#why-jsx}
 

From 2a3152c1ec76a7ba2262c51e7f58abd2cc736dcf Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:03:00 -0500
Subject: [PATCH 05/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index b14e0004e..78dded495 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -18,7 +18,7 @@ Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML.
 
 JSX produit des « éléments » React. Nous verrons comment les retranscrire dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Dans la suite de ce document, nous verrons les bases de JSX dont vous aurez besoin pour bien démarrer.
 
-### Pourquoi le JSX ? {#why-jsx}
+### Pourquoi JSX ? {#why-jsx}
 
 React embrasse le fait que la logique de rendu est intrinsèquement couplée à la logique de l'interface utilisateur : comment les événements sont-ils gérés, comment l'état évolue t-il dans le temps, et comment la donnée est-elle préparée pour l'affichage.
 

From 1a1d484ddf97908ed1ebf7a4e2465257e878cf2d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:08:48 -0500
Subject: [PATCH 06/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 78dded495..6123c8594 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -20,7 +20,7 @@ JSX produit des « éléments » React. Nous verrons comment les retranscrire
 
 ### Pourquoi JSX ? {#why-jsx}
 
-React embrasse le fait que la logique de rendu est intrinsèquement couplée à la logique de l'interface utilisateur : comment les événements sont-ils gérés, comment l'état évolue t-il dans le temps, et comment la donnée est-elle préparée pour l'affichage.
+Le fonctionnement d’une UI conditionnera toujours les logiques de rendu, de la gestion des événements à la préparation des données pour l'affichage, en passant par l'évolution de l'état au fil du temps. React a choisi d'assumer pleinement cet état de fait.
 
 Au lieu de séparer artificiellement les *technologies* en mettant le balisage et la logique dans des fichiers séparés, React [sépare les *préoccupations*](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations) via des unités faiblement couplées appelées des "composants" qui contiennent les deux. Nous reviendrons sur les composants dans une [prochaine section](/docs/components-and-props.html), si vous vous ne sentez pas convaincu avec l'idée de mixer des balises dans du JS, [cette présentation](https://www.youtube.com/watch?v=x7cQ3mrcKaY) pourra peut-être vous faire changer d'avis.
 

From 12f76a52782cf0a6523d9686fd07eb564712398f Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:14:25 -0500
Subject: [PATCH 07/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 6123c8594..6be54fd04 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -176,7 +176,7 @@ const element = {
 };
 ```
 
-Ces objets sont appelés des "éléments React". Vous pouvez les imaginer commes des descriptions de ce que vous voulez voir sur l'écran. React lit ces objets et les utilises pour construir le DOM et tenir à jour.
+Ces objets sont appelés des « éléments React ». Vous pouvez les considérer comme des descriptions de ce que vous voulez voir sur l'écran. React lit ces objets et les utilise pour construire le DOM et le tenir à jour.
 
 Nous explorons le rendu des éléments React vers le DOM dans la prochaine section.
 

From 0f3d0cbefcd3095dad342847865e234501becfba Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:14:52 -0500
Subject: [PATCH 08/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 6be54fd04..d00d8588d 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -178,7 +178,7 @@ const element = {
 
 Ces objets sont appelés des « éléments React ». Vous pouvez les considérer comme des descriptions de ce que vous voulez voir sur l'écran. React lit ces objets et les utilise pour construire le DOM et le tenir à jour.
 
-Nous explorons le rendu des éléments React vers le DOM dans la prochaine section.
+Nous explorerons la retranscription des éléments React dans le DOM dans la prochaine section.
 
 >**Astuce :**
 >

From ad478643e93c5609ea0aa98851c9aa2da139142b Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:15:28 -0500
Subject: [PATCH 09/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d00d8588d..4e84a100d 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -182,4 +182,4 @@ Nous explorerons la retranscription des éléments React dans le DOM dans la pro
 
 >**Astuce :**
 >
->Nous recommandons d'utiliser le [language de définition "Babel"](http://babeljs.io/docs/editors) dans votre éditeur préféré ainsi les codes ES6 et JSX sont proprement soulignés. Ce site internet utilise schéma de couleur [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) qui est compatible avec celui-ci.
+>Nous recommandons d'utiliser la [définition de langage « Babel »](http://babeljs.io/docs/editors) dans votre éditeur préféré, afin que les codes ES6 et JSX soient correctement colorisés. Ce site utilise le thème de couleurs [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), qui est compatible avec ce mode syntaxique.

From dabf1de2cab7253e57475a2d929634cc132e19a1 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:16:04 -0500
Subject: [PATCH 10/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 4e84a100d..d69175ee2 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -22,7 +22,7 @@ JSX produit des « éléments » React. Nous verrons comment les retranscrire
 
 Le fonctionnement d’une UI conditionnera toujours les logiques de rendu, de la gestion des événements à la préparation des données pour l'affichage, en passant par l'évolution de l'état au fil du temps. React a choisi d'assumer pleinement cet état de fait.
 
-Au lieu de séparer artificiellement les *technologies* en mettant le balisage et la logique dans des fichiers séparés, React [sépare les *préoccupations*](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations) via des unités faiblement couplées appelées des "composants" qui contiennent les deux. Nous reviendrons sur les composants dans une [prochaine section](/docs/components-and-props.html), si vous vous ne sentez pas convaincu avec l'idée de mixer des balises dans du JS, [cette présentation](https://www.youtube.com/watch?v=x7cQ3mrcKaY) pourra peut-être vous faire changer d'avis.
+Au lieu de séparer artificiellement les *technologies* en mettant le balisage et la logique dans des fichiers séparés, React [sépare les *préoccupations*](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations) via des unités faiblement couplées appelées « composants », qui contiennent les deux. Nous reviendrons sur les composants dans une [prochaine section](/docs/components-and-props.html), mais si l'idée d’injecter des balises dans du JS vous met mal à l’aise, [cette présentation](https://www.youtube.com/watch?v=x7cQ3mrcKaY) vous fera peut-être changer d'avis.
 
 React ne [nécessite pas](/docs/react-without-jsx.html) l'utilisation de JSX pour fonctionner, mais la plupart des gens le considère comme une aide visuel quand ils manipulent l'interface utilisateur dans le code JavaScript. Cela permet aussi à React de montrer des messages d'erreurs et d'avertissements plus utiles.
 

From b7159f51c6152d50706657a763423eed9affbd3d Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:16:20 -0500
Subject: [PATCH 11/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d69175ee2..c4aa4b155 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -163,7 +163,7 @@ const element = React.createElement(
 );
 ```
 
-`React.createElement()` effectue quelques controls pour vous aider à écrire un code sans bug mais essentiellement il crée un semblant d'objet qui ressemble à ceci :
+`React.createElement()` effectue quelques vérifications pour vous aider à écrire un code sans bug, mais pour l'essentiel il crée un objet qui ressemble à ceci :
 
 ```js
 // Note: this structure is simplified

From 0ae85447d8365180ca2ca41d8f3548ad740f4904 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:19:11 -0500
Subject: [PATCH 12/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index c4aa4b155..393263ae5 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -109,7 +109,7 @@ Ne mettez pas des guillemets doubles autour d'accolades quand vous intégrez une
 >
 >Par exemple, `class` devient [`className`](https://developer.mozilla.org/fr/docs/Web/API/Element/className) en JSX, et `tabindex` devient [`tabIndex`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/tabIndex).
 
-### Spécifier des Enfants avec JSX {#specifying-children-with-jsx}
+### Spécifier des éléments enfants en JSX {#specifying-children-with-jsx}
 
 Si une balise est vide, vous pouvez le fermer immédiatement via `/>`, comment en XML :
 

From a8c29fbc052306a80b1d82cf58c958fc7297f749 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:22:48 -0500
Subject: [PATCH 13/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 393263ae5..f045b7dae 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -141,7 +141,7 @@ const element = <h1>{title}</h1>;
 
 Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) toutes les valeurs intégrées dans JSX avant de les rendre. Cela assure que vous ne pouvez jamais injecter quoi que ce soit d'autre que ce vous avez explicitement écrit dans votre application. Tout est converti en chaîne de caractères avant d'être rendu. Celle contribute a la prevention des attaques de type [XSS (cross-site-scripting)](https://fr.wikipedia.org/wiki/Cross-site_scripting).
 
-### JSX Représente des Objets {#jsx-represents-objects}
+### JSX représente des objets {#jsx-represents-objects}
 
 Babel compile JSX vers des appels `React.createElement()`.
 

From 5c293e919d1c990444a8e3cfd94beece03110549 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:22:59 -0500
Subject: [PATCH 14/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index f045b7dae..732889c4a 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -143,7 +143,7 @@ Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/whi
 
 ### JSX représente des objets {#jsx-represents-objects}
 
-Babel compile JSX vers des appels `React.createElement()`.
+Babel compile JSX vers des appels à `React.createElement()`.
 
 Ces deux exemples sont identiques :
 

From cb970f4396bf27cbdb8ab0efaeda5bf33dc99a46 Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:30:09 -0500
Subject: [PATCH 15/17] Update content/docs/introducing-jsx.md based on tdd
 feedback

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index 732889c4a..dd20ded89 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -28,7 +28,7 @@ React ne [nécessite pas](/docs/react-without-jsx.html) l'utilisation de JSX pou
 
 Nous pouvons enfin commencer !
 
-### Imbriqué des Expressions en JSX {#embedding-expressions-in-jsx}
+### Utiliser des expressions dans JSX {#embedding-expressions-in-jsx}
 
 Dans l'exemple suivant, nous déclarons une variable appelée `name` et nous l'utilisons ensuite dans du JSX en l'encadrant avec des accolades :
 

From 7c82ada38ad5d50576aab5aad9f24489e969ad8b Mon Sep 17 00:00:00 2001
From: Christophe Porteneuve <tdd@tddsworld.com>
Date: Wed, 13 Feb 2019 10:37:50 -0500
Subject: [PATCH 16/17] Apply suggestions from code review

Applied group of suggestions by tdd

Co-Authored-By: sylvhama <sylvhama@gmail.com>
---
 content/docs/introducing-jsx.md | 40 ++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index dd20ded89..d231a4172 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -24,13 +24,13 @@ Le fonctionnement d’une UI conditionnera toujours les logiques de rendu, de la
 
 Au lieu de séparer artificiellement les *technologies* en mettant le balisage et la logique dans des fichiers séparés, React [sépare les *préoccupations*](https://fr.wikipedia.org/wiki/S%C3%A9paration_des_pr%C3%A9occupations) via des unités faiblement couplées appelées « composants », qui contiennent les deux. Nous reviendrons sur les composants dans une [prochaine section](/docs/components-and-props.html), mais si l'idée d’injecter des balises dans du JS vous met mal à l’aise, [cette présentation](https://www.youtube.com/watch?v=x7cQ3mrcKaY) vous fera peut-être changer d'avis.
 
-React ne [nécessite pas](/docs/react-without-jsx.html) l'utilisation de JSX pour fonctionner, mais la plupart des gens le considère comme une aide visuel quand ils manipulent l'interface utilisateur dans le code JavaScript. Cela permet aussi à React de montrer des messages d'erreurs et d'avertissements plus utiles.
+React [ne vous oblige pas](/docs/react-without-jsx.html) à utiliser JSX, mais la plupart des gens y trouvent une aide visuelle quand ils manipulent l'interface utilisateur dans le code JavaScript. Ça permet aussi à React de produire des messages d'erreurs et d'avertissements plus utiles.
 
-Nous pouvons enfin commencer !
+Ceci étant posé, commençons !
 
 ### Utiliser des expressions dans JSX {#embedding-expressions-in-jsx}
 
-Dans l'exemple suivant, nous déclarons une variable appelée `name` et nous l'utilisons ensuite dans du JSX en l'encadrant avec des accolades :
+Dans l'exemple suivant, nous déclarons une variable appelée `name` et nous l'utilisons ensuite dans JSX en l'encadrant avec des accolades :
 
 ```js{1,2}
 const name = 'Clarisse Agbegnenou';
@@ -42,7 +42,7 @@ ReactDOM.render(
 );
 ```
 
-Vous pouvez utiliser n'importe quelle [expression JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Expressions) valide dans des accolades en JSX. Par exemple, `2 + 2`, `user.firstName`, or `formatName(user)` sont toutes des expressions JavaScript valides.
+Vous pouvez utiliser n'importe quelle [expression JavaScript](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Expressions_et_Op%C3%A9rateurs#Expressions) valide dans des accolades en JSX. Par exemple, `2 + 2`, `user.firstName`, ou `formatName(user)` sont toutes des expressions JavaScript valides.
 
 Dans l'exemple suivant, on intègre le résultat de l'appel d'une fonction JavaScript, `formatName(user)`, dans un élément `<h1>`.
 
@@ -68,50 +68,50 @@ ReactDOM.render(
 );
 ```
 
-[](codepen://introducing-jsx)
+**[Essayer sur CodePen](codepen://introducing-jsx)**
 
-On sépare le JSX sur plusieurs lignes pour une meilleure lecture. Par la même occasion, nous recommandons aussi de le mettre entre parenthèses afin d'éviter les pièges [d'insertion de point-virgule automatique](http://stackoverflow.com/q/2846283), notez que cette pratique n'est pas obligatoire.
+On découple le JSX en plusieurs lignes pour une meilleure lisibilité. Par la même occasion, nous recommandons également de le mettre entre parenthèses afin d'éviter les pièges [d'insertion de point-virgule automatique](http://stackoverflow.com/q/2846283), même si cette pratique n'est pas obligatoire.
 
-### JSX est aussi une expression {#jsx-is-an-expression-too}
+### JSX n’est rien d’autre qu’une expression {#jsx-is-an-expression-too}
 
-Après la compilation, les expressions JSX deviennent des appels de fonctions JavaScripts réguliers et sont évalués en tant qu'objet JavaScript.
+Après la compilation, les expressions JSX deviennent de simples appels de fonctions JavaScripts, dont l'évaluation renvoie des objets JavaScript.
 
-Cela signifie que vous pouvez utiliser JSX à l'intérieur d'instructions `if` ou de boucles `for`, l'assigner dans une variable, l'accepter en tant qu'argument, et le retourner depuis des fonctions :
+Ça signifie que vous pouvez utiliser JSX à l'intérieur d'instructions `if` ou de boucles `for`, l'affecter à des variables, l'accepter en tant qu'argument, et le renvoyer depuis des fonctions :
 
 ```js{3,5}
 function getGreeting(user) {
   if (user) {
     return <h1>Bonjour, {formatName(user)} !</h1>;
   }
-  return <h1>Bonjour, Inconnu.</h1>;
+  return <h1>Bonjour, Belle Inconnue.</h1>;
 }
 ```
 
-### Spécifier des Attributs avec JSX {#specifying-attributes-with-jsx}
+### Spécifier des attributs en JSX {#specifying-attributes-with-jsx}
 
-Vous pouvez utiliser des guillemets doubles pour spécifier des chaînes de caractères littérales en tant qu’attributs :
+Vous pouvez utiliser des guillemets pour spécifier des littéraux chaînes de caractères dans les attributs :
 
 ```js
 const element = <div tabIndex="0"></div>;
 ```
 
-Vous pouvez aussi utiliser des accolades pour intégrer une expression JavaScript dans un attribut :
+Vous pouvez aussi utiliser des accolades pour utiliser une expression JavaScript dans un attribut :
 
 ```js
 const element = <img src={user.avatarUrl}></img>;
 ```
 
-Ne mettez pas des guillemets doubles autour d'accolades quand vous intégrez une expression JavaScript dans un attribut. You devrez utiliser des guillemets doubles (for des valeurs de type chaîne de caractères) ou des accolades (pour des expressions), mais pas les deux dans le même attribut.
+Ne mettez pas de guillemets autour des accolades quand vous utilisez une expression JavaScript dans un attribut. Vous pouvez utiliser soit des guillemets (pour des valeurs textuelles) soit des accolades (pour des expressions), mais pas les deux à la fois pour un même attribut.
 
 >**Attention :**
 >
->Comme JSX est plus proche de JavaScript qu'il ne l'est du HTML, React DOM utilise le `camelCase` comme convention de nommage pour ses propriétés au lieu des noms des attributs HTML.
+>Dans la mesure où JSX est plus proche de JavaScript que de HTML, React DOM utilise la casse `camelCase` comme convention de nommage des propriétés, au lieu des noms d’attributs HTML.
 >
 >Par exemple, `class` devient [`className`](https://developer.mozilla.org/fr/docs/Web/API/Element/className) en JSX, et `tabindex` devient [`tabIndex`](https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/tabIndex).
 
 ### Spécifier des éléments enfants en JSX {#specifying-children-with-jsx}
 
-Si une balise est vide, vous pouvez le fermer immédiatement via `/>`, comment en XML :
+Si une balise est vide, vous pouvez la fermer immédiatement avec `/>`, comme en XML :
 
 ```js
 const element = <img src={user.avatarUrl} />;
@@ -128,18 +128,18 @@ const element = (
 );
 ```
 
-### JSX Empêchent les Attaques de type Injection {#jsx-prevents-injection-attacks}
+### JSX empêche les attaques d’injection {#jsx-prevents-injection-attacks}
 
-Vous ne risquez rien si vous intégré une entrée utilisateur en JSX :
+Vous ne risquez rien en utilisant une saisie utilisateur dans JSX :
 
 ```js
 const title = response.potentiallyMaliciousInput;
-// Cela est sûr :
+// Ceci est sans risque :
 const element = <h1>{title}</h1>;
 ```
 
 
-Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) toutes les valeurs intégrées dans JSX avant de les rendre. Cela assure que vous ne pouvez jamais injecter quoi que ce soit d'autre que ce vous avez explicitement écrit dans votre application. Tout est converti en chaîne de caractères avant d'être rendu. Celle contribute a la prevention des attaques de type [XSS (cross-site-scripting)](https://fr.wikipedia.org/wiki/Cross-site_scripting).
+Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) toutes les valeurs intégrées avec JSX avant d’en faire le rendu. Il garantit ainsi que vous ne risquez jamais d’injecter quoi que ce soit d'autre que ce vous avez explicitement écrit dans votre application. Tout est converti en chaîne de caractères avant de produire le rendu. Ça aide à éviter les attaques [XSS (cross-site-scripting)](https://fr.wikipedia.org/wiki/Cross-site_scripting).
 
 ### JSX représente des objets {#jsx-represents-objects}
 

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

Quelques retouches oubliées, et les insécables
---
 content/docs/introducing-jsx.md | 42 ++++++++++++++++-----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/content/docs/introducing-jsx.md b/content/docs/introducing-jsx.md
index d231a4172..12d131073 100644
--- a/content/docs/introducing-jsx.md
+++ b/content/docs/introducing-jsx.md
@@ -6,19 +6,19 @@ prev: hello-world.html
 next: rendering-elements.html
 ---
 
-Observez cette déclaration de variable :
+Observez cette déclaration de variable :
 
 ```js
-const element = <h1>Bonjour, monde !</h1>;
+const element = <h1>Bonjour, monde !</h1>;
 ```
 
-Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML. 
- 
+Cette drôle de syntaxe n'est ni une chaîne de caractères ni du HTML.
+
 Ça s'appelle du JSX, et c'est une extension syntaxique de JavaScript. Nous recommandons de l'utiliser avec React afin de décrire à quoi devrait ressembler l'interface utilisateur (UI). JSX vous fait sûrement penser à un langage de balisage, mais il recèle toute la puissance de JavaScript.
 
 JSX produit des « éléments » React. Nous verrons comment les retranscrire dans le DOM dans la [prochaine section](/docs/rendering-elements.html). Dans la suite de ce document, nous verrons les bases de JSX dont vous aurez besoin pour bien démarrer.
 
-### Pourquoi JSX ? {#why-jsx}
+### Pourquoi JSX ? {#why-jsx}
 
 Le fonctionnement d’une UI conditionnera toujours les logiques de rendu, de la gestion des événements à la préparation des données pour l'affichage, en passant par l'évolution de l'état au fil du temps. React a choisi d'assumer pleinement cet état de fait.
 
@@ -58,7 +58,7 @@ const user = {
 
 const element = (
   <h1>
-    Bonjour, {formatName(user)} !
+    Bonjour, {formatName(user)} !
   </h1>
 );
 
@@ -74,14 +74,14 @@ On découple le JSX en plusieurs lignes pour une meilleure lisibilité. Par la m
 
 ### JSX n’est rien d’autre qu’une expression {#jsx-is-an-expression-too}
 
-Après la compilation, les expressions JSX deviennent de simples appels de fonctions JavaScripts, dont l'évaluation renvoie des objets JavaScript.
+Après la compilation, les expressions JSX deviennent de simples appels de fonctions JavaScript, dont l'évaluation renvoie des objets JavaScript.
 
-Ça signifie que vous pouvez utiliser JSX à l'intérieur d'instructions `if` ou de boucles `for`, l'affecter à des variables, l'accepter en tant qu'argument, et le renvoyer depuis des fonctions :
+Ça signifie que vous pouvez utiliser JSX à l'intérieur d'instructions `if` ou de boucles `for`, l'affecter à des variables, l'accepter en tant qu'argument, et le renvoyer depuis des fonctions :
 
 ```js{3,5}
 function getGreeting(user) {
   if (user) {
-    return <h1>Bonjour, {formatName(user)} !</h1>;
+    return <h1>Bonjour, {formatName(user)} !</h1>;
   }
   return <h1>Bonjour, Belle Inconnue.</h1>;
 }
@@ -89,7 +89,7 @@ function getGreeting(user) {
 
 ### Spécifier des attributs en JSX {#specifying-attributes-with-jsx}
 
-Vous pouvez utiliser des guillemets pour spécifier des littéraux chaînes de caractères dans les attributs :
+Vous pouvez utiliser des guillemets pour spécifier des littéraux chaînes de caractères dans les attributs :
 
 ```js
 const element = <div tabIndex="0"></div>;
@@ -103,7 +103,7 @@ const element = <img src={user.avatarUrl}></img>;
 
 Ne mettez pas de guillemets autour des accolades quand vous utilisez une expression JavaScript dans un attribut. Vous pouvez utiliser soit des guillemets (pour des valeurs textuelles) soit des accolades (pour des expressions), mais pas les deux à la fois pour un même attribut.
 
->**Attention :**
+>**Attention :**
 >
 >Dans la mesure où JSX est plus proche de JavaScript que de HTML, React DOM utilise la casse `camelCase` comme convention de nommage des propriétés, au lieu des noms d’attributs HTML.
 >
@@ -117,12 +117,12 @@ Si une balise est vide, vous pouvez la fermer immédiatement avec `/>`, comme en
 const element = <img src={user.avatarUrl} />;
 ```
 
-Les balises JSX peuvent contenir des enfants :
+Les balises JSX peuvent contenir des enfants :
 
 ```js
 const element = (
   <div>
-    <h1>Bonjour !</h1>
+    <h1>Bonjour !</h1>
     <h2>Content de te voir ici.</h2>
   </div>
 );
@@ -130,7 +130,7 @@ const element = (
 
 ### JSX empêche les attaques d’injection {#jsx-prevents-injection-attacks}
 
-Vous ne risquez rien en utilisant une saisie utilisateur dans JSX :
+Vous ne risquez rien en utilisant une saisie utilisateur dans JSX :
 
 ```js
 const title = response.potentiallyMaliciousInput;
@@ -145,12 +145,12 @@ Par défaut, React DOM [échappe](http://stackoverflow.com/questions/7381974/whi
 
 Babel compile JSX vers des appels à `React.createElement()`.
 
-Ces deux exemples sont identiques :
+Ces deux exemples sont identiques :
 
 ```js
 const element = (
   <h1 className="greeting">
-    Bonjour, monde !
+    Bonjour, monde !
   </h1>
 );
 ```
@@ -159,19 +159,19 @@ const element = (
 const element = React.createElement(
   'h1',
   {className: 'greeting'},
-  'Bonjour, monde !'
+  'Bonjour, monde !'
 );
 ```
 
-`React.createElement()` effectue quelques vérifications pour vous aider à écrire un code sans bug, mais pour l'essentiel il crée un objet qui ressemble à ceci :
+`React.createElement()` effectue quelques vérifications pour vous aider à écrire un code sans bug, mais pour l'essentiel il crée un objet qui ressemble à ceci :
 
 ```js
-// Note: this structure is simplified
+// Remarque : cette structure est simplifiée
 const element = {
   type: 'h1',
   props: {
     className: 'greeting',
-    children: 'Bonjour, monde !'
+    children: 'Bonjour, monde !'
   }
 };
 ```
@@ -180,6 +180,6 @@ Ces objets sont appelés des « éléments React ». Vous pouvez les considér
 
 Nous explorerons la retranscription des éléments React dans le DOM dans la prochaine section.
 
->**Astuce :**
+>**Astuce :**
 >
 >Nous recommandons d'utiliser la [définition de langage « Babel »](http://babeljs.io/docs/editors) dans votre éditeur préféré, afin que les codes ES6 et JSX soient correctement colorisés. Ce site utilise le thème de couleurs [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/), qui est compatible avec ce mode syntaxique.