More progress but still in progress ;)

Author: JeremiePat

content/docs/reference-react.md

@@ -15,41 +15,41 @@ redirect_from:
 
 l'objet `React` est le point d'entrée de la bibliothèque React. Si vous chargez React depuis une balise `<script>`, ces API de haut-niveau sont disponibles depuis l'objet global `React`. Si vous utilisez npm avec la syntax ES6, vous pouvez écrire : `import React from 'react'`. Si vous utilisez npm avec la syntaxe ES5, vous pouvez écrire : `var React = require('react')`.
 
-## Overview {#overview}
+## Aperçu de l'API {#overview}
 
-### Components {#components}
+### Composants {#components}
 
-React components let you split the UI into independent, reusable pieces, and think about each piece in isolation. React components can be defined by subclassing `React.Component` or `React.PureComponent`.
+Les composant React vous permettent de séparer une UI (_User Interface_: Interface utilisateur) en pièces indépendantes et réutilisables, ce qui vous permet de concevoir chaque pièce isolément. Un composant React peut être défini en étendant les classes `React.Component` ou `React.PureComponent`.
 
  - [`React.Component`](#reactcomponent)
  - [`React.PureComponent`](#reactpurecomponent)
 
-If you don't use ES6 classes, you may use the `create-react-class` module instead. See [Using React without ES6](/docs/react-without-es6.html) for more information.
+Si vous n'utilisez pas les classes ES6, vous pouvez utiliser le module `create-react-class` à la place. Lisez [Utiliser React sans ES6](/docs/react-without-es6.html) pour plus de détails.
 
-React components can also be defined as functions which can be wrapped:
+Un composant React peut aussi être définie via une fonction que l'on va encapsuler :
 
 - [`React.memo`](#reactmemo)
 
-### Creating React Elements {#creating-react-elements}
+### Créer des éléments React {#creating-react-elements}
 
-We recommend [using JSX](/docs/introducing-jsx.html) to describe what your UI should look like. Each JSX element is just syntactic sugar for calling [`React.createElement()`](#createelement). You will not typically invoke the following methods directly if you are using JSX.
+Nous vous recommandons d'[utiliser JSX](/docs/introducing-jsx.html) pour définir à quoi ressemblera votre UI. Tous les éléments JSX ne sont que du sucre syntaxique par dessus des appels à [`React.createElement()`](#createelement). Si vous utilisez JSX, vous ne devriez pas avoir besoin d'appeler les méthodes suivantes :
 
 - [`createElement()`](#createelement)
 - [`createFactory()`](#createfactory)
 
-See [Using React without JSX](/docs/react-without-jsx.html) for more information.
+Lisez [Utiliser React sans JSX](/docs/react-without-jsx.html) pour plus de détails.
 
-### Transforming Elements {#transforming-elements}
+### Transformer des éléments {#transforming-elements}
 
-`React` provides several APIs for manipulating elements:
+`React` propose plusieurs API pour manipuler les éléments :
 
 - [`cloneElement()`](#cloneelement)
 - [`isValidElement()`](#isvalidelement)
 - [`React.Children`](#reactchildren)
 
 ### Fragments {#fragments}
 
-`React` also provides a component for rendering multiple elements without a wrapper.
+`React` fournis également un composant spécial pour rendre plusieurs éléments sans avoir à les enrober avec un autre élément.
 
 - [`React.Fragment`](#reactfragment)
 
@@ -60,20 +60,20 @@ See [Using React without JSX](/docs/react-without-jsx.html) for more information
 
 ### Suspense {#suspense}
 
-Suspense lets components "wait" for something before rendering. Today, Suspense only supports one use case: [loading components dynamically with `React.lazy`](/docs/code-splitting.html#reactlazy). In the future, it will support other use cases like data fetching.
+Le *Suspense* permet aux composants « d'attendre » quelque chose avant d'être rendu. Aujourd'hui, le *Suspense* ne supporte qu'un seul cas d'usage : [Le chargement dynamique de composants avec `React.lazy`](/docs/code-splitting.html#reactlazy). Dans le future, il supportera d'autres cas d'usages tel que le chargement de données distantes.
 
 - [`React.lazy`](#reactlazy)
 - [`React.Suspense`](#reactsuspense)
 
 ### Hooks {#hooks}
 
-*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. Hooks have a [dedicated docs section](/docs/hooks-intro.html) and a separate API reference:
+Les *Hooks* sont une nouveauté de React 16.8. Ils vous permettent d'utiliser les états et d'autres fonctionnalités de React sans avoir à écrire de classes. Les *Hooks* disposent de [leur propre documentation](/docs/hooks-intro.html) et leur API est détaillée à part :
 
-- [Basic Hooks](/docs/hooks-reference.html#basic-hooks)
+- [*Hooks* de base](/docs/hooks-reference.html#basic-hooks)
   - [`useState`](/docs/hooks-reference.html#usestate)
   - [`useEffect`](/docs/hooks-reference.html#useeffect)
   - [`useContext`](/docs/hooks-reference.html#usecontext)
-- [Additional Hooks](/docs/hooks-reference.html#additional-hooks)
+- [*Hooks* supplémentaires](/docs/hooks-reference.html#additional-hooks)
   - [`useReducer`](/docs/hooks-reference.html#usereducer)
   - [`useCallback`](/docs/hooks-reference.html#usecallback)
   - [`useMemo`](/docs/hooks-reference.html#usememo)
@@ -84,71 +84,72 @@ Suspense lets components "wait" for something before rendering. Today, Suspense
 
 * * *
 
-## Reference {#reference}
+## Référence {#reference}
 
 ### `React.Component` {#reactcomponent}
 
-`React.Component` is the base class for React components when they are defined using [ES6 classes](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes):
+`React.Component` est la classe de base utilisée pour créer des composants React avec la syntaxe des [classes ES6](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) :
 
 ```javascript
 class Greeting extends React.Component {
   render() {
-    return <h1>Hello, {this.props.name}</h1>;
+    return <h1>Bonjour {this.props.name}</h1>;
   }
 }
 ```
 
-See the [React.Component API Reference](/docs/react-component.html) for a list of methods and properties related to the base `React.Component` class.
+Rendez-vous sur [la page de référence de l'API `React.Component`](/docs/react-component.html) pour voir la liste complète des méthodes et propriétés de la classe de base `React.Component`.
 
 * * *
 
 ### `React.PureComponent` {#reactpurecomponent}
 
-`React.PureComponent` is similar to [`React.Component`](#reactcomponent). The difference between them is that [`React.Component`](#reactcomponent) doesn't implement [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate), but `React.PureComponent` implements it with a shallow prop and state comparison. 
+`React.PureComponent` est similaire à [`React.Component`](#reactcomponent). La seul différence est que [`React.Component`](#reactcomponent) n'implémente pas la méthode [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) là où `React.PureComponent` en implémente une version qui réalise une comparaison de surface de l'état et des propriétés.
+
+Si la fonction `render()` d'un de vos composants React produit un rendu identique pour le même état ou les même propriétés, utiliser `React.PureComponent` devrait améliorer les performances dans certains cas.
 
-If your React component's `render()` function renders the same result given the same props and state, you can use `React.PureComponent` for a performance boost in some cases.
 
 > Note
 >
-> `React.PureComponent`'s `shouldComponentUpdate()` only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences. Only extend `PureComponent` when you expect to have simple props and state, or use [`forceUpdate()`](/docs/react-component.html#forceupdate) when you know deep data structures have changed. Or, consider using [immutable objects](https://facebook.github.io/immutable-js/) to facilitate fast comparisons of nested data.
+> La méthode `shouldComponentUpdate()` de `React.PureComponent` réalise une simple comparaison de surface. Avec des données complexes, elle peut produire des faux positifs si la structure de données subit des changements profond. Ne créez des composants avec `PureComponent` que si vous avez des états ou des props simples, le cas échéant utilisez [`forceUpdate()`](/docs/react-component.html#forceupdate) si vous savez que vos données ont profondément changées. Vous pouvez aussi envisager d'utiliser des [objets immuables](https://facebook.github.io/immutable-js/) pour simplifier la comparaison rapide de données imbriquées.
 >
-> Furthermore, `React.PureComponent`'s `shouldComponentUpdate()` skips prop updates for the whole component subtree. Make sure all the children components are also "pure".
+> De plus, la méthode `shouldComponentUpdate()` de `React.PureComponent` ignore la mise à jour des propriétés de tout l'arbre des composants sous-jacent. Assurez vous que tout les composants sous-jacent sont également "pure".
 
 * * *
 
 ### `React.memo` {#reactmemo}
 
 ```javascript
 const MyComponent = React.memo(function MyComponent(props) {
-  /* render using props */
+  /* Faire le rendu en utilisant les props */
 });
 ```
 
-`React.memo` is a [higher order component](/docs/higher-order-components.html). It's similar to [`React.PureComponent`](#reactpurecomponent) but for function components instead of classes.
+`React.memo` est un [composant d'ordre supérieur](/docs/higher-order-components.html). Il est similaire à [`React.PureComponent`](#reactpurecomponent) mais à destination des composants créés à l'aide de fonctions plutôt que de classes.
 
-If your function component renders the same result given the same props, you can wrap it in a call to `React.memo` for a performance boost in some cases by memoizing the result. This means that React will skip rendering the component, and reuse the last rendered result.
+Si vous avec un composant créés avec une fonction et qu'il affiche toujours le même résultat pour un même jeu de propriétés, vous pouvez l'encapsuler avec `React.memo` ce qui mémoïsera le résultat et devrait augmenter les performances dans certain cas.
 
-By default it will only shallowly compare complex objects in the props object. If you want control over the comparison, you can also provide a custom comparison function as the second argument.
+Par défaut, seule une comparaison de surface des objets de propriétés sera faite. Si vous voulez gérer cette comparaison vous-même, vous pouvez fournir une fonction de comparaison personnalisée en deuxième argument.
 
 ```javascript
 function MyComponent(props) {
-  /* render using props */
+  /* Faire le rendu en utilisant les props */
 }
 function areEqual(prevProps, nextProps) {
   /*
-  return true if passing nextProps to render would return
-  the same result as passing prevProps to render,
-  otherwise return false
+  Renvoie vrai si utiliser l'objet nextProps à la fonction de rendu
+  produira le même résultat que de lui passer l'objet prevProps.
+  Renvoie faux si ce n'est pas le cas.
   */
 }
 export default React.memo(MyComponent, areEqual);
 ```
 
-This method only exists as a **[performance optimization](/docs/optimizing-performance.html).** Do not rely on it to "prevent" a render, as this can lead to bugs.
+Cette méthode n'est qu'un outil d'**[optimisation de performance](/docs/optimizing-performance.html)**. Ne vous y fiez pas pour “empêcher” un rendu car cela peut conduire à des bugs.
 
 > Note
 >
-> Unlike the [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) method on class components, the `areEqual` function returns `true` if the props are equal and `false` if the props are not equal. This is the inverse from `shouldComponentUpdate`.
+> Contrairement à la méthode [`shouldComponentUpdate()`](/docs/react-component.html#shouldcomponentupdate) des compostants créer à l'aide de classes, la fonction `areEqual` retourne `true` si les props sont égales et `false` si ce n'est pas le cas. C'est donc l'inverse de `shouldComponentUpdate`.
 
 * * *