From c28dc0ebaac7404843dae9d90f059969baa46e6f Mon Sep 17 00:00:00 2001 From: Laura Date: Sat, 2 Mar 2019 15:42:56 -0500 Subject: [PATCH 1/7] :book: first translation --- .../docs/integrating-with-other-libraries.md | 146 +++++++++--------- 1 file changed, 73 insertions(+), 73 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 18a67c457..b71060696 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -1,26 +1,26 @@ --- id: integrating-with-other-libraries -title: Integrating with Other Libraries +title: Intégration avec d'autres bibliothèques permalink: docs/integrating-with-other-libraries.html --- -React can be used in any web application. It can be embedded in other applications and, with a little care, other applications can be embedded in React. This guide will examine some of the more common use cases, focusing on integration with [jQuery](https://jquery.com/) and [Backbone](http://backbonejs.org/), but the same ideas can be applied to integrating components with any existing code. +React peut être utilisé dans n'importe quelle application Web. Il peut être intégré à d'autres applications et, avec un peu de soin, d'autres applications peuvent être intégrées à React. Ce guide examine certains des cas d'utilisation les plus courants, en se concentrant sur l'intégration avec [jQuery](https://jquery.com/) et [Backbone](http://backbonejs.org/), mais les mêmes idées peuvent être appliquées à l'intégration de composants à n'importe quel code existant. -## Integrating with DOM Manipulation Plugins {#integrating-with-dom-manipulation-plugins} +## Intégration aux plugins de manipulation DOM {#integrating-with-dom-manipulation-plugins} -React is unaware of changes made to the DOM outside of React. It determines updates based on its own internal representation, and if the same DOM nodes are manipulated by another library, React gets confused and has no way to recover. +React ignore les modifications apportées au DOM en dehors de React. Il détermine les mises à jour en fonction de sa propre représentation interne et, si les mêmes nœuds du DOM sont manipulés par une autre bibliothèque, React devient confus et ne dispose d'aucun moyen de se reprendre. -This does not mean it is impossible or even necessarily difficult to combine React with other ways of affecting the DOM, you just have to be mindful of what each is doing. +Cela ne signifie pas qu'il est impossible ni même nécessairement difficile de combiner React avec d'autres moyens d'affecter le DOM, vous devez simplement être attentif à ce que chacun fait. -The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React has no reason to update, like an empty `
`. +Le moyen le plus simple d'éviter les conflits consiste à empêcher le composant React de se mettre à jour. Vous pouvez le faire en activant le rendu des éléments que React n’a aucune raison de mettre à jour, comme une `
` vide. -### How to Approach the Problem {#how-to-approach-the-problem} +### Comment aborder le problème {#how-to-approach-the-problem} -To demonstrate this, let's sketch out a wrapper for a generic jQuery plugin. +Pour illustrer cela, esquissons un container pour un plugin générique jQuery. -We will attach a [ref](/docs/refs-and-the-dom.html) to the root DOM element. Inside `componentDidMount`, we will get a reference to it so we can pass it to the jQuery plugin. +Nous attacherons une [ref](/docs/refs-and-the-dom.html) à l'élément racine DOM. Dans `componentDidMount`, nous obtiendrons une référence qui pourra être passée au plugin jQuery. -To prevent React from touching the DOM after mounting, we will return an empty `
` from the `render()` method. The `
` element has no properties or children, so React has no reason to update it, leaving the jQuery plugin free to manage that part of the DOM: +Pour empêcher React de toucher le DOM après le montage, nous retournerons une `
` vide à partir de la méthode `render()`. L'élément `
` n'a pas de propriétés ni d'enfants, donc React n'a aucune raison de le mettre à jour, laissant le plugin jQuery libre de gérer cette partie du DOM: ```js{3,4,8,12} class SomePlugin extends React.Component { @@ -39,37 +39,37 @@ class SomePlugin extends React.Component { } ``` -Note that we defined both `componentDidMount` and `componentWillUnmount` [lifecycle methods](/docs/react-component.html#the-component-lifecycle). Many jQuery plugins attach event listeners to the DOM so it's important to detach them in `componentWillUnmount`. If the plugin does not provide a method for cleanup, you will probably have to provide your own, remembering to remove any event listeners the plugin registered to prevent memory leaks. +Notez que nous avons défini à la fois `componentDidMount` et ` componentWillUnmount` [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle). De nombreux plugins jQuery attachent des gestionnaires d'évènements au DOM, il est donc important de les détacher dans `componentWillUnmount`. Si le plugin ne fournit pas de méthode de nettoyage, vous devrez probablement fournir le vôtre, en vous rappelant de supprimer tous les gestionnaires d'événements enregistrés par le plugin pour éviter les fuites de mémoire. -### Integrating with jQuery Chosen Plugin {#integrating-with-jquery-chosen-plugin} +### Intégration avec le plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} -For a more concrete example of these concepts, let's write a minimal wrapper for the plugin [Chosen](https://harvesthq.github.io/chosen/), which augments ``. >**Note:** > ->Just because it's possible, doesn't mean that it's the best approach for React apps. We encourage you to use React components when you can. React components are easier to reuse in React applications, and often provide more control over their behavior and appearance. +>Ce n’est pas parce que c’est possible que c’est la meilleure approche pour les applications React. Nous vous encourageons à utiliser les composants React lorsque vous le pouvez. Les composants React sont plus faciles à réutiliser dans les applications React et permettent souvent de mieux contrôler leur comportement et leur apparence. -First, let's look at what Chosen does to the DOM. +Tout d'abord, regardons ce que Chosen fait au DOM. -If you call it on a ``. Then it fires jQuery events to notify us about the changes. +Si vous l'appelez sur un nœud DOM ``. Ensuite, il déclenche des événements jQuery pour nous informer des modifications. -Let's say that this is the API we're striving for with our `` wrapper React component: +Disons qu'il s'agisse de l'API à laquelle nous aspirons pour être le composant React contenant notre `` : ```js function Example() { return ( console.log(value)}> - - - + + + ); } ``` -We will implement it as an [uncontrolled component](/docs/uncontrolled-components.html) for simplicity. +Nous allons l'implémenter en tant que [composant non contrôlé](/docs/uncontrolled-components.html) pour plus de simplicité. -First, we will create an empty component with a `render()` method where we return `` encapsulé dans une `
`: ```js{4,5} class Chosen extends React.Component { @@ -85,9 +85,9 @@ class Chosen extends React.Component { } ``` -Notice how we wrapped `` node we passed to it. However, as far as React is concerned, `
` always only has a single child. This is how we ensure that React updates won't conflict with the extra DOM node appended by Chosen. It is important that if you modify the DOM outside of React flow, you must ensure React doesn't have a reason to touch those DOM nodes. +Remarquez comment nous avons encapsulé `` que nous lui avons transmis. Cependant, en ce qui concerne React, `
` n'a toujours qu'un seul enfant. C'est de cette manière que nous nous assurons que les mises à jour React n'entrerons pas en conflit avec le nœud DOM supplémentaire ajouté par Chosen. Si vous modifiez le DOM en dehors du flux React, il est important que vous vous assuriez que React n'ait aucune raison de toucher à ces nœud du DOM. -Next, we will implement the lifecycle methods. We need to initialize Chosen with the ref to the `` dans `componentDidMount`, et la décomposer dans `componentWillUnmount`: ```js{2,3,7} componentDidMount() { @@ -100,17 +100,17 @@ componentWillUnmount() { } ``` -[**Try it on CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) +[**Essayez dans CodePen**](http://codepen.io/gaearon/pen/qmqeQx?editors=0010) -Note that React assigns no special meaning to the `this.el` field. It only works because we have previously assigned this field from a `ref` in the `render()` method: +Notez que React n'attribue aucune signification particulière au champ `this.el`. Cela ne fonctionne que parce que nous avons déjà assigné ce champ à une `ref` dans la méthode` render() `: ```js ` managed by Chosen. +Cela suffit pour obtenir le rendu de notre composant, mais nous souhaitons également être informés des modifications de valeur. Pour ce faire, nous nous abonnerons à l'événement jQuery `change` sur le` `, but we will also add a `componentDidUpdate()` lifecycle method that notifies Chosen about changes in the children list: +La documentation de Chosen suggère que nous pouvons utiliser l'API `trigger()` de jQuery pour l'informer des modifications apportées à l'élément DOM d'origine. Nous laisserons React se charger de la mise à jour de `this.props.children` dans `` children managed by React change. +De cette façon, Chosen saura mettre à jour son élément DOM lorsque les enfants `
- My name is {props.firstName}. + Mon nom est {props.firstName}.

); } @@ -434,6 +434,6 @@ ReactDOM.render( ); ``` -[**Try it on CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010) +[**Essayez dans CodePen**](http://codepen.io/gaearon/pen/PmWwwa?editors=0010) -This technique is not limited to Backbone. You can use React with any model library by subscribing to its changes in the lifecycle methods and, optionally, copying the data into the local React state. +Cette technique ne se limite pas à Backbone. Vous pouvez utiliser React avec n’importe quelle bibliothèque de modèles en vous abonnant à ses modifications dans les méthodes de cycle de vie et, éventuellement, en copiant les données dans l’état React local. From 3968b35b23055fdf0221908a00721fe8b7ce6014 Mon Sep 17 00:00:00 2001 From: Laura Date: Sat, 2 Mar 2019 16:06:45 -0500 Subject: [PATCH 2/7] :ambulance: Small improvements --- .../docs/integrating-with-other-libraries.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index b71060696..6c335a58c 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -45,9 +45,9 @@ Notez que nous avons défini à la fois `componentDidMount` et ` componentWillUn Pour un exemple plus concret de ces concepts, écrivons un container minimal pour le plugin [Chosen](https://harvesthq.github.io/chosen/), qui augmente les inputs `` dans un `
` supplémentaire. Cela est nécessaire car Chosen ajoutera un autre élément DOM juste après le noeud `` dans un `
` supplémentaire. Cela est nécessaire car Chosen ajoutera un autre élément DOM juste après le noeud `` dans `componentDidMount`, et la décomposer dans `componentWillUnmount`: @@ -227,7 +227,7 @@ ReactDOM.render( ); ``` -À partir de là, vous pouvez intégrer plus de logique dans le composant et commencer à adopter des pratiques React plus courantes. Par exemple, dans les composants, il est préférable de ne pas compter sur les ID car un même composant peut être rendu plusieurs fois. À la place, nous utiliserons le [système d’événements React](/docs/handling-events.html) et enregistrerons le gestionnaire de clics directement sur l’élément React ``: +À partir de là, vous pouvez intégrer plus de logique dans le composant et commencer à adopter des pratiques React plus courantes. Par exemple, dans les composants, il est préférable de ne pas compter sur les ID, car un même composant peut être rendu plusieurs fois. À la place, nous utiliserons le [système d’événements React](/docs/handling-events.html) et enregistrerons le gestionnaire de clics directement sur l’élément React ``: ```js{2,6,9} function Button(props) { @@ -249,7 +249,7 @@ ReactDOM.render( [**Essayez dans CodePen**](http://codepen.io/gaearon/pen/RVKbvW?editors=1010) -Vous pouvez avoir autant de composants isolés que vous le souhaitez et utiliser `ReactDOM.render()` pour les restituer dans différents conteneurs DOM. Au fur et à mesure que vous convertissez une partie de votre application en React, vous pourrez les combiner en composants plus volumineux et déplacer une partie de appels à la hiérarchie `ReactDOM.render()`. +Vous pouvez avoir autant de composants isolés que vous le souhaitez et utiliser `ReactDOM.render()` pour les restituer dans différents conteneurs DOM. Au fur et à mesure que vous convertissez une partie de votre application en React, vous pourrez les combiner en composants plus volumineux et déplacer une partie des appels à la hiérarchie `ReactDOM.render()`. ### Encapsuler React dans une vue Backbone {#embedding-react-in-a-backbone-view} @@ -285,7 +285,7 @@ Lorsqu'un composant est supprimé *depuis* une arborescence React, le nettoyage Bien qu’il soit généralement recommandé d’utiliser un flux de données unidirectionnel tel que [l'état de React](/docs/lifting-state-up.html), [Flux](http://facebook.github.io/flux/) ou [Redux](http://redux.js.org/), les composants de React peuvent utiliser une couche de modèle provenant d’autres frameworks et bibliothèques. -### Uitliser les modèles Backbone dans les composants React {#using-backbone-models-in-react-components} +### Utiliser les modèles Backbone dans les composants React {#using-backbone-models-in-react-components} Le moyen le plus simple de consommer des modèles et des collections [Backbone](http://backbonejs.org/) à partir d'un composant React consiste à écouter les divers événements de modification et à forcer manuellement une mise à jour. @@ -351,15 +351,15 @@ class List extends React.Component { ### Extraction de données à partir des modèles Backbone {#extracting-data-from-backbone-models} -L'approche ci-dessus nécessite que vos composants React soient conscients des modèles et des collections Backbone. Si vous envisagez par la suite de migrer vers une autre solution de gestion de données, vous voudrez peut-être concentrer les connaissances sur Backbone dans le moins de parties possible du code. +L'approche ci-dessus nécessite que vos composants React soient conscients des modèles et des collections Backbone. Si vous envisagez par la suite de migrer vers une autre solution de gestion de données, vous voudrez peut-être concentrer les connaissances sur Backbone dans le moins de parties possibles du code. Une solution à ce problème consiste à extraire les attributs du modèle sous forme de données simples à chaque modification, et à conserver cette logique dans un seul endroit. Ce qui suit est [un composant d'ordre supérieur](/docs/higher-order-components.html) qui extrait tous les attributs d'un modèle Backbone en état, en passant les données au composant encapsulé. De cette façon, seul le composant d'ordre supérieur doit connaître les composants internes du modèle Backbone, et la plupart des composants de l'application peuvent rester agnostiques de Backbone. -Dans l'exemple ci-dessous, nous allons copier les attributs du modèle pour former l'état initial. Nous nous abonnons à l'événement `change` (et nous nous en désabonnons lors du démontage), et lorsque cela se produit, nous mettons à jour l'état avec les attributs actuels du modèle. Enfin, nous nous assurons que si la propriété `modèle` elle-même change, nous n’oublions pas de nous désabonner de l’ancien modèle et de nous abonner au nouveau. +Dans l'exemple, ci-dessous, nous allons copier les attributs du modèle pour former l'état initial. Nous nous abonnons à l'événement `change` (et nous nous en désabonnons lors du démontage), et lorsque cela se produit, nous mettons à jour l'état avec les attributs actuels du modèle. Enfin, nous nous assurons que si la propriété `modèle` elle-même change, nous n’oublions pas de nous désabonner de l’ancien modèle et de nous abonner au nouveau. -Notez que cet exemple n'est pas exhaustif en ce qui concerne l'utilisation de Backbone, mais il devrait vous donner une idée de la manière générique de l'aborder: +Notez que cet exemple n'est pas exhaustif en ce qui concerne l'utilisation de Backbone, mais il devrait vous donner une idée de la manière générique de l'aborder : ```js{1,5,10,14,16,17,22,26,32} function connectToBackboneModel(WrappedComponent) { @@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) { } ``` -Pour montrer comment l'utiliser, connectons un composant `NameInput` React à un modèle Backbone et mettons à jour son attribut `firstName` chaque fois que l'entrée change: +Pour montrer comment l'utiliser, connectons un composant `NameInput` React à un modèle Backbone et mettons à jour son attribut `firstName` chaque fois que l'entrée change : ```js{4,6,11,15,19-21} function NameInput(props) { From f1eadead51e1decd77b5e388761f8d43f6410f6c Mon Sep 17 00:00:00 2001 From: Laura Date: Sat, 2 Mar 2019 16:48:35 -0500 Subject: [PATCH 3/7] :lock: set http to https --- content/blog/2015-03-30-community-roundup-26.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/blog/2015-03-30-community-roundup-26.md b/content/blog/2015-03-30-community-roundup-26.md index ae2dc4979..24a7a1c7f 100644 --- a/content/blog/2015-03-30-community-roundup-26.md +++ b/content/blog/2015-03-30-community-roundup-26.md @@ -29,7 +29,7 @@ Colin also [blogged about his experience using React Native](http://blog.scottlo Spencer Ahrens and I had the great pleasure to talk about React Native on [The Changelog](https://thechangelog.com/149/) podcast. It was really fun to chat for an hour, I hope that you'll enjoy listening to it. :) - + ## Hacker News {#hacker-news} From a5e5dca3ee6492cd6d3bca955f0ab3e9f4ca50e6 Mon Sep 17 00:00:00 2001 From: Jeremie Patonnier Date: Sun, 10 Mar 2019 15:43:39 -0400 Subject: [PATCH 4/7] Apply suggestions from code review Co-Authored-By: lbelavoir --- .../docs/integrating-with-other-libraries.md | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 15b65e988..97c9db9a8 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -12,7 +12,7 @@ React ignore les modifications apportées au DOM en dehors de React. Il détermi Cela ne signifie pas qu'il est impossible ni même nécessairement difficile de combiner React avec d'autres moyens d'affecter le DOM, vous devez simplement être attentif à ce que chacun fait. -Le moyen le plus simple d'éviter les conflits consiste à empêcher le composant React de se mettre à jour. Vous pouvez le faire en activant le rendu des éléments que React n’a aucune raison de mettre à jour, comme une `
` vide. +Le moyen le plus simple d'éviter les conflits consiste à empêcher le composant React de se mettre à jour. Vous pouvez le faire en réalisant le rendu d'éléments que React n’a aucune raison de mettre à jour, comme une `
` vide. ### Comment aborder le problème {#how-to-approach-the-problem} @@ -39,11 +39,11 @@ class SomePlugin extends React.Component { } ``` -Notez que nous avons défini à la fois `componentDidMount` et ` componentWillUnmount` [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle). De nombreux plugins jQuery attachent des gestionnaires d'évènements au DOM, il est donc important de les détacher dans `componentWillUnmount`. Si le plugin ne fournit pas de méthode de nettoyage, vous devrez probablement fournir le vôtre, en vous rappelant de supprimer tous les gestionnaires d'événements enregistrés par le plugin pour éviter les fuites de mémoire. +Notez que nous avons défini les deux [méthodes de cycle de vie](/docs/react-component.html#the-component-lifecycle) `componentDidMount` et ` componentWillUnmount` . De nombreux plugins jQuery attachent des gestionnaires d'évènements au DOM, il est donc important de les détacher dans `componentWillUnmount`. Si le plugin ne fournit pas de méthode de nettoyage, vous devrez probablement fournir le vôtre, en vous rappelant de supprimer tous les gestionnaires d'événements enregistrés par le plugin pour éviter les fuites de mémoire. ### Intégration avec le plugin jQuery Chosen {#integrating-with-jquery-chosen-plugin} -Pour un exemple plus concret de ces concepts, écrivons un container minimal pour le plugin [Chosen](https://harvesthq.github.io/chosen/), qui augmente les inputs ``. >**Note :** > @@ -53,7 +53,7 @@ Tout d'abord, regardons ce que Chosen fait au DOM. Si vous l'appelez sur un nœud DOM ``. Ensuite, il déclenche des événements jQuery pour nous informer des modifications. -Disons qu'il s'agisse de l'API à laquelle nous aspirons pour être le composant React contenant notre `` : +Disons qu'il s'agisse de l'API à laquelle nous aspirons pour le composant React contenant notre `` : ```js function Example() { @@ -69,7 +69,7 @@ function Example() { Nous allons l'implémenter en tant que [composant non contrôlé](/docs/uncontrolled-components.html) pour plus de simplicité. -Premièrement, nous allons créer un composant vide avec une méthode `render()` où nous retournons `` enveloppé dans une `
`: ```js{4,5} class Chosen extends React.Component { @@ -85,7 +85,7 @@ class Chosen extends React.Component { } ``` -Remarquez comment nous avons encapsulé `` que nous lui avons transmis. Cependant, en ce qui concerne React, `
` n'a toujours qu'un seul enfant. C'est de cette manière que nous nous assurons que les mises à jour React n'entrerons pas en conflit avec le nœud DOM supplémentaire ajouté par Chosen. Si vous modifiez le DOM en dehors du flux React, il est important que vous vous assuriez que React n'ait aucune raison de toucher à ces nœuds du DOM. +Remarquez comment nous avons enveloppé `` que nous lui avons transmis. Cependant, en ce qui concerne React, `
` n'a toujours qu'un seul enfant. C'est de cette manière que nous nous assurons que les mises à jour React n'entrerons pas en conflit avec le nœud DOM supplémentaire ajouté par Chosen. Si vous modifiez le DOM en dehors du flux React, il est important que vous vous assuriez que React n'ait aucune raison de toucher à ces nœuds du DOM. Ensuite, nous allons implémenter les méthodes de cycle de vie. Nous devons initialiser Chosen avec la référence du nœud ``, mais nous ajouterons également une méthode de cycle de `componentDidUpdate()` notifiant Chosen tous changements dans la liste des enfants: +La documentation de Chosen suggère que nous pouvons utiliser l'API `trigger()` de jQuery pour l'informer des modifications apportées à l'élément DOM d'origine. Nous laisserons React se charger de la mise à jour de `this.props.children` dans ``. +Pour un exemple plus concret de ces concepts, écrivons un enrobage minimal pour le plugin [Chosen](https://harvesthq.github.io/chosen/), qui enrichit les champs ``, il lit les attributs du nœud DOM d'origine, le masque avec du style en ligne, puis ajoute un nœud DOM distinct avec sa propre représentation visuelle juste après le sélecteur ``, il lit les attributs du nœud DOM d'origine, le masque avec du style en ligne, puis ajoute un nœud DOM distinct avec sa propre représentation visuelle juste après le `` enveloppé dans une `
`: +Pour commencer, nous allons créer un composant vide avec une méthode `render()` où nous renvoyons `` dans un `
` supplémentaire. Cela est nécessaire car Chosen ajoutera un autre élément DOM juste après le noeud `` dans une `
` supplémentaire. C’est nécessaire car Chosen ajoutera un autre élément DOM juste après le nœud `` dans `componentDidMount`, et la décomposer dans `componentWillUnmount`: +Ensuite, nous allons implémenter les méthodes de cycle de vie. Nous devons initialiser Chosen avec la référence du nœud ` this.el = el}> ``` -Cela suffit pour obtenir le rendu de notre composant, mais nous souhaitons également être informés des modifications de valeur. Pour ce faire, nous nous abonnerons à l'événement jQuery `change` sur le` ` géré par Chosen. -Nous ne transmettrons pas `this.props.onChange` directement à Chosen, car les propriétés du composant peuvent changer avec le temps, ce qui inclut les gestionnaires d'événements. Au lieu de cela, nous allons déclarer une méthode `handleChange()` qui appelle `this.props.onChange`, et l'abonnons à l'événement jQuery `change` : +Nous ne transmettrons pas `this.props.onChange` directement à Chosen, car les propriétés du composant peuvent changer avec le temps, ce qui inclut les gestionnaires d'événements. Au lieu de ça, nous allons déclarer une méthode `handleChange()` qui appelle `this.props.onChange`, et l'utilisons pour nous abonner à l'événement jQuery `change` : ```js{5,6,10,14-16} componentDidMount() { @@ -133,9 +133,9 @@ handleChange(e) { [**Essayez dans CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010) -Enfin, il reste encore une chose à faire. Dans React, les propriétés peuvent changer avec le temps. Par exemple, le composant `` peut avoir différents enfants si l'état du composant parent change. Cela signifie qu’aux points d’intégration, il est important de mettre à jour manuellement le DOM en réponse aux mises à jour des propriétés, car nous ne laissons plus React gérer le DOM pour nous. +Enfin, il reste encore une chose à faire. Dans React, les propriétés peuvent changer avec le temps. Par exemple, le composant `` peut avoir différents enfants si l'état du composant parent change. Ça signifie qu’aux points d’intégration, il est important de mettre à jour manuellement le DOM en réponse aux mises à jour des props, car nous ne laissons plus React gérer le DOM pour nous. -La documentation de Chosen suggère que nous pouvons utiliser l'API `trigger()` de jQuery pour l'informer des modifications apportées à l'élément DOM d'origine. Nous laisserons React se charger de la mise à jour de `this.props.children` dans ``, mais nous ajouterons également une méthode de cycle de vie `componentDidUpdate()` notifiant Chosen de tout changement dans la liste des enfants: ```js{2,3} componentDidUpdate(prevProps) { @@ -145,7 +145,7 @@ componentDidUpdate(prevProps) { } ``` -De cette façon, Chosen saura mettre à jour son élément DOM lorsque les enfants `` gérés par React changent. L’implémentation complète du composant `Chosen` ressemble à ceci : @@ -192,28 +192,28 @@ class Chosen extends React.Component { React peut être intégré à d’autres applications grâce à la flexibilité de [`ReactDOM.render()`](/docs/react-dom.html#render). -Bien que React soit couramment utilisé au démarrage pour charger un seul composant racine React dans le DOM, `ReactDOM.render()` peut également être appelé plusieurs fois pour afficher des parties indépendantes de l'interface utilisateur, qui peuvent être aussi petites qu'un bouton ou aussi grandes qu'une application. +Bien que React soit couramment utilisé au démarrage pour charger un seul composant racine React dans le DOM, `ReactDOM.render()` peut également être appelé plusieurs fois pour afficher des parties indépendantes de l'interface utilisateur (UI), qui peuvent être aussi petites qu'un bouton ou aussi grandes qu'une application. -En fait, c’est exactement comme ça que React est utilisé sur Facebook. Ça nous permet d'écrire des applications en React, pièce par pièce, et de les combiner avec nos modèles existants générés par le serveur et d'autres codes côté client. +En fait, c’est exactement comme ça que React est utilisé chez Facebook. Ça nous permet d'écrire des applications en React morceau par morceau, et de les combiner avec nos gabarits existants générés par le serveur et d'autres codes côté client. -### Remplacement du rendu basé sur des chaînes avec React {#replacing-string-based-rendering-with-react} +### Remplacement d’un rendu basé chaînes par React {#replacing-string-based-rendering-with-react} -Une pratique courante dans les anciennes applications Web consiste à décrire des fragments du DOM sous forme de chaîne et à les insérer dans le DOM comme suit: `$el.html(htmlString)`. Ces points d'insertion dans une base de code sont parfaits pour introduire React. Il suffit de réécrire le rendu basé sur une chaîne sous la forme d'un composant React. +Une pratique courante dans les anciennes applications web consiste à décrire des fragments du DOM sous forme de chaîne et à les insérer dans le DOM comme suit : `$el.html(htmlString)`. Ces points d'insertion dans une base de code sont parfaits pour introduire React. Il suffit de réécrire le rendu basé sur une chaîne sous la forme d'un composant React. -Donc, l'implémentation jQuery suivante ... +Donc, l'implémentation jQuery suivante... ```js -$('#container').html(''); +$('#container').html(''); $('#btn').click(function() { alert('Bonjour !'); }); ``` -... pourrait être réécrite en utilisant un composant React: +... pourrait être réécrite en utilisant un composant React : ```js function Button() { - return ; + return ; } ReactDOM.render( @@ -227,11 +227,11 @@ ReactDOM.render( ); ``` -À partir de là, vous pouvez intégrer plus de logique dans le composant et commencer à adopter des pratiques React plus courantes. Par exemple, dans les composants, il est préférable de ne pas compter sur les ID, car un même composant peut être rendu plusieurs fois. À la place, nous utiliserons le [système d’événements React](/docs/handling-events.html) et enregistrerons le gestionnaire de clics directement sur l’élément React ``: +À partir de là, vous pouvez intégrer plus de logique dans le composant et commencer à adopter des pratiques React plus courantes. Par exemple, dans les composants, il est préférable de ne pas compter sur les ID, car un même composant peut être affiché plusieurs fois. Nous utiliserons plutôt le [système d’événements React](/docs/handling-events.html) et enregistrerons le gestionnaire de clics directement sur l’élément React `; + return ; } function HelloButton() { @@ -249,13 +249,13 @@ ReactDOM.render( [**Essayez dans CodePen**](https://codepen.io/gaearon/pen/RVKbvW?editors=1010) -Vous pouvez avoir autant de composants isolés que vous le souhaitez et utiliser `ReactDOM.render()` pour les restituer dans différents conteneurs DOM. Au fur et à mesure que vous convertissez une partie de votre application en React, vous pourrez les combiner en composants plus volumineux et déplacer une partie des appels à `ReactDOM.render()` plus haut dans la hiérarchie. +Vous pouvez avoir autant de composants isolés que vous le souhaitez et utiliser `ReactDOM.render()` pour les restituer dans différents conteneurs DOM. Au fur et à mesure que vous convertissez les parties de votre application en React, vous pourrez les combiner en composants plus volumineux et déplacer une partie des appels à `ReactDOM.render()` plus haut dans la hiérarchie. -### Encapsuler React dans une vue Backbone {#embedding-react-in-a-backbone-view} +### Incorporer React dans une vue Backbone {#embedding-react-in-a-backbone-view} -Les vues [Backbone](https://backbonejs.org/) utilisent généralement des chaînes HTML ou des fonctions de modèle produisant des chaînes pour créer le contenu de leurs éléments DOM. Ce processus peut également être remplacé par le rendu d'un composant React. +Les vues [Backbone](https://backbonejs.org/) utilisent généralement des chaînes HTML ou des fonctions de gabarit produisant des chaînes pour créer le contenu de leurs éléments DOM. Ce processus peut également être remplacé par le rendu d'un composant React. -Ci-dessous, nous allons créer une vue Backbone appelée `ParagraphView`. La fonction `render()` de Backbone sera remplacée pour rendre un composant React `` dans l'élément DOM fourni par Backbone (`this.el`). Ici aussi, nous utilisons [`ReactDOM.render()`](/docs/react-dom.html#render): +Ci-dessous, nous allons créer une vue Backbone appelée `ParagraphView`. La fonction `render()` de Backbone sera remplacée pour afficher un composant React `` dans l'élément DOM fourni par Backbone (`this.el`). Ici aussi, nous utilisons [`ReactDOM.render()`](/docs/react-dom.html#render): ```js{1,5,8,12} function Paragraph(props) { @@ -277,21 +277,21 @@ const ParagraphView = Backbone.View.extend({ [**Essayez dans CodePen**](https://codepen.io/gaearon/pen/gWgOYL?editors=0010) -Il est important que nous appelions également `ReactDOM.unmountComponentAtNode()` dans la méthode `remove` afin que React désenregistre les gestionnaires d'événements et les autres ressources associées à l'arborescence des composants lorsqu'ils sont détachés. +Il est important que nous appelions également `ReactDOM.unmountComponentAtNode()` dans la méthode `remove` afin que React désinscrive les gestionnaires d'événements et les autres ressources associées à l'arborescence des composants lorsqu'ils sont détachés. Lorsqu'un composant est supprimé *depuis* une arborescence React, le nettoyage est effectué automatiquement, mais comme nous supprimons l'arborescence complète à la main, nous devons appeler cette méthode. -## Intégration avec des modèles de couches {#integrating-with-model-layers} +## Intégration avec des couches modèles {#integrating-with-model-layers} -Bien qu’il soit généralement recommandé d’utiliser un flux de données unidirectionnel tel que [l'état de React](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/) ou [Redux](https://redux.js.org/), les composants de React peuvent utiliser une couche de modèle provenant d’autres frameworks et bibliothèques. +Bien qu’il soit généralement recommandé d’utiliser un flux de données unidirectionnel tel que [l'état de React](/docs/lifting-state-up.html), [Flux](https://facebook.github.io/flux/) ou [Redux](https://redux.js.org/), les composants React peuvent utiliser une couche de modèle provenant d’autres frameworks et bibliothèques. ### Utiliser les modèles Backbone dans les composants React {#using-backbone-models-in-react-components} Le moyen le plus simple de consommer des modèles et des collections [Backbone](https://backbonejs.org/) à partir d'un composant React consiste à écouter les divers événements de modification et à forcer manuellement une mise à jour. -Les composants responsables des modèles de rendu écoutent les événements `'change'`, tandis que les composants responsables des collections de rendu écoutent les événements `'add'` et `'remove'`. Dans les deux cas, appelez [`this.forceUpdate()`](/docs/react-component.html#forceupdate) pour rendre le composant avec les nouvelles données. +Les composants responsables de l'affichage des modèles écouteraient les événements `'change'`, tandis que les composants responsables de l'affichage des collections écouteraient les événements `'add'` et `'remove'`. Dans les deux cas, appelez [`this.forceUpdate()`](/docs/react-component.html#forceupdate) pour rafraîchir le composant avec les nouvelles données. -Dans l'exemple ci-dessous, le composant `List` rend une collection Backbone, en utilisant le composant `Item` pour restituer des éléments individuels. +Dans l'exemple ci-dessous, le composant `List` affiche une collection Backbone, en utilisant le composant `Item` pour restituer des éléments individuels. ```js{1,7-9,12,16,24,30-32,35,39,46} class Item extends React.Component { @@ -353,11 +353,11 @@ class List extends React.Component { L'approche ci-dessus nécessite que vos composants React soient conscients des modèles et des collections Backbone. Si vous envisagez par la suite de migrer vers une autre solution de gestion de données, vous voudrez peut-être concentrer les connaissances sur Backbone dans le moins de parties possibles du code. -Une solution à ce problème consiste à extraire les attributs du modèle sous forme de données simples à chaque modification, et à conserver cette logique à un seul endroit. Ce qui suit est [un composant d'ordre supérieur](/docs/higher-order-components.html) qui extrait tous les attributs d'un modèle Backbone et les stocke dans son état, pour finalement passer les données au composant encapsulé. +Une solution à ce problème consiste à extraire les attributs du modèle sous forme de données simples à chaque modification, et à conserver cette logique en un seul endroit. Ce qui suit est [un composant d'ordre supérieur](/docs/higher-order-components.html) qui extrait tous les attributs d'un modèle Backbone et les stocke dans son état, pour finalement passer les données au composant enrobé. -De cette façon, seul le composant d'ordre supérieur doit connaître les composants internes du modèle Backbone, et la plupart des composants de l'application peuvent rester agnostiques de Backbone. +De cette façon, seul le composant d'ordre supérieur doit connaître les détails du modèle Backbone, et la plupart des composants de l'application peuvent rester indépendants de Backbone. -Dans l'exemple, ci-dessous, nous allons copier les attributs du modèle pour former l'état initial. Nous nous abonnons à l'événement `change` (et nous nous en désabonnons lors du démontage), et lorsque cela se produit, nous mettons à jour l'état avec les attributs actuels du modèle. Enfin, nous nous assurons que si la propriété `modèle` elle-même change, nous n’oublions pas de nous désabonner de l’ancien modèle et de nous abonner au nouveau. +Dans l'exemple ci-dessous, nous allons copier les attributs du modèle pour former l'état initial. Nous nous abonnons à l'événement `change` (et nous nous désabonnons lors du démontage), et lorsque l’événement survient, nous mettons à jour l'état avec les attributs actuels du modèle. Enfin, nous nous assurons que si la propriété `model` elle-même change, nous n’oublions pas de nous désabonner de l’ancien modèle et de nous abonner au nouveau. Notez que cet exemple n'est pas exhaustif en ce qui concerne l'utilisation de Backbone, mais il devrait vous donner une idée de la manière générique de l'aborder : @@ -399,7 +399,7 @@ function connectToBackboneModel(WrappedComponent) { } ``` -Pour montrer comment l'utiliser, connectons un composant `NameInput` React à un modèle Backbone et mettons à jour son attribut `firstName` chaque fois que l'entrée change : +Pour montrer comment l'utiliser, connectons un composant `NameInput` React à un modèle Backbone et mettons à jour son attribut `firstName` chaque fois que la saisie change : ```js{4,6,11,15,19-21} function NameInput(props) { @@ -407,7 +407,7 @@ function NameInput(props) {


- Mon nom est {props.firstName}. + Je m’appelle {props.firstName}.

); } @@ -436,4 +436,4 @@ ReactDOM.render( [**Essayez dans CodePen**](https://codepen.io/gaearon/pen/PmWwwa?editors=0010) -Cette technique ne se limite pas à Backbone. Vous pouvez utiliser React avec n’importe quelle bibliothèque de modèles en vous abonnant à ses modifications dans les méthodes de cycle de vie et, éventuellement, en copiant les données dans l’état React local. +Cette technique ne se limite pas à Backbone. Vous pouvez utiliser React avec n’importe quelle bibliothèque de modèles en vous abonnant à ses modifications dans les méthodes de cycle de vie et, éventuellement, en copiant les données dans l’état local React. From b84e2ce0df8069fc38a5e398002dbbe2c446a990 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Wed, 13 Mar 2019 10:26:04 +0100 Subject: [PATCH 7/7] Final tweaks --- content/docs/integrating-with-other-libraries.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/integrating-with-other-libraries.md b/content/docs/integrating-with-other-libraries.md index 0f103cb18..53c92a2b7 100644 --- a/content/docs/integrating-with-other-libraries.md +++ b/content/docs/integrating-with-other-libraries.md @@ -4,7 +4,7 @@ title: Intégration avec d'autres bibliothèques permalink: docs/integrating-with-other-libraries.html --- -React peut être utilisé dans n'importe quelle application Web. Il peut être intégré à d'autres applications et, avec un peu de soin, d'autres applications peuvent être intégrées à React. Ce guide examine certains des cas d'utilisation les plus courants, en se concentrant sur l'intégration avec [jQuery](https://jquery.com/) et [Backbone](https://backbonejs.org/), mais les mêmes idées peuvent être appliquées à l'intégration de composants à n'importe quel code existant. +React peut être utilisé dans n'importe quelle application web. Il peut être intégré à d'autres applications et, avec un peu de soin, d'autres applications peuvent être intégrées à React. Ce guide examine certains des cas d'utilisation les plus courants, en se concentrant sur l'intégration avec [jQuery](https://jquery.com/) et [Backbone](https://backbonejs.org/), mais les mêmes idées peuvent être appliquées à l'intégration de composants à n'importe quel code existant. ## Intégration aux plugins de manipulation DOM {#integrating-with-dom-manipulation-plugins} @@ -45,9 +45,9 @@ Notez que nous avons défini les deux [méthodes de cycle de vie](/docs/react-co Pour un exemple plus concret de ces concepts, écrivons un enrobage minimal pour le plugin [Chosen](https://harvesthq.github.io/chosen/), qui enrichit les champs `` géré par Chosen. -Nous ne transmettrons pas `this.props.onChange` directement à Chosen, car les propriétés du composant peuvent changer avec le temps, ce qui inclut les gestionnaires d'événements. Au lieu de ça, nous allons déclarer une méthode `handleChange()` qui appelle `this.props.onChange`, et l'utilisons pour nous abonner à l'événement jQuery `change` : +Nous ne transmettrons pas `this.props.onChange` directement à Chosen, car les props du composant peuvent changer avec le temps, ce qui inclut les gestionnaires d'événements. Au lieu de ça, nous allons déclarer une méthode `handleChange()` qui appelle `this.props.onChange`, et l'utiliserons pour nous abonner à l'événement jQuery `change` : ```js{5,6,10,14-16} componentDidMount() { @@ -133,7 +133,7 @@ handleChange(e) { [**Essayez dans CodePen**](https://codepen.io/gaearon/pen/bWgbeE?editors=0010) -Enfin, il reste encore une chose à faire. Dans React, les propriétés peuvent changer avec le temps. Par exemple, le composant `` peut avoir différents enfants si l'état du composant parent change. Ça signifie qu’aux points d’intégration, il est important de mettre à jour manuellement le DOM en réponse aux mises à jour des props, car nous ne laissons plus React gérer le DOM pour nous. +Enfin, il reste une dernière chose à faire. Dans React, les props peuvent changer avec le temps. Par exemple, le composant `` peut avoir différents enfants si l'état du composant parent change. Ça signifie qu’aux points d’intégration, il est important de mettre à jour manuellement le DOM en réponse aux mises à jour des props, car nous ne laissons plus React gérer le DOM pour nous. La documentation de Chosen suggère que nous pouvons utiliser l'API `trigger()` de jQuery pour l'informer des modifications apportées à l'élément DOM d'origine. Nous laisserons React se charger de la mise à jour de `this.props.children` dans `