From 2fc9117f9d9c4f36333e27ae11ca8c3c4f52006d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Am=C3=A9lie=20Grenier?= Date: Fri, 26 May 2023 16:25:14 +0200 Subject: [PATCH 1/4] First version of translation into French --- src/content/learn/react-developer-tools-fr.md | 76 +++++++++++++++++++ src/sidebarLearn.json | 2 +- 2 files changed, 77 insertions(+), 1 deletion(-) create mode 100644 src/content/learn/react-developer-tools-fr.md diff --git a/src/content/learn/react-developer-tools-fr.md b/src/content/learn/react-developer-tools-fr.md new file mode 100644 index 000000000..d20ca6ca3 --- /dev/null +++ b/src/content/learn/react-developer-tools-fr.md @@ -0,0 +1,76 @@ +--- +title: Outils de développement React (React Developer Tools) +--- + + + +On utilise les outils de développement React pour inspecter les[composants](/learn/your-first-component), modifier les [props](/learn/passing-props-to-a-component) et les [states](/learn/state-a-components-memory), et identifier des problèmes de performance. + + + + + +* Comment installer React Developer Tools + + + +## Extension de navigateur {/*browser-extension*/} + +Le moyen le plus simple pour déboguer un site construit avec React est d'installer l'extension de navigateur React Developer Tools. Il est disponible pour plusieurs navigateurs populaires: + +* [Installation pour **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Installation pour **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Installation pour **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) + +Maintenant, si vous visitez un site Web **construit avec React,** vous pouvez apercevoir les onglets _Components_ et _Profiler_. + +![Extension React developer tools ](/images/docs/react-devtools-extension.png) + +### Safari et autres navigateurs {/*safari-and-other-browsers*/} +Pour les autres navigateurs (ex: Safari), installez le npm package[`react-devtools`](https://www.npmjs.com/package/react-devtools): +```bash +# Yarn +yarn global add react-devtools + +# Npm +npm install -g react-devtools +``` + +Puis, ouvrez les outils de développement depuis le terminal: +```bash +react-devtools +``` + +Ensuite, connectez votre site en ajoutant la balise ` +``` + +Maintenant, actualisez votre site dans le navigateur pour l'afficher dans les outils de développement. + +![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) + +## Mobile (React Native) {/*mobile-react-native*/} +Les outils de développement peuvent egalement être utilisés pour inspecter les Appli construites avec [React Native](https://reactnative.dev/). + +La meilleure façon d'utiliser React Developer Tools est de l'installer au global: +```bash +# Yarn +yarn global add react-devtools + +# Npm +npm install -g react-devtools +``` + +Puis, ouvrez les outils de développement depuis le terminal: +```bash +react-devtools +``` + +Cela devrait se connecter à toute Appli React Native locale en cours d'exécution. + +> Essayez de relancer l'Appli si les outils de développement ne se connectent pas après quelques secondes. + +[En apprendre plus sur le débogage de React Native.](https://reactnative.dev/docs/debugging) diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index d0dfec1d1..c58e9fe30 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -37,7 +37,7 @@ "path": "/learn/editor-setup" }, { - "title": "React Developer Tools", + "title": "Outils de développement React (React Developer Tools)", "path": "/learn/react-developer-tools" } ] From dbcc9cd7b350a6c1227c92bd8001a329fb8b6201 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Am=C3=A9lie=20Grenier?= Date: Fri, 26 May 2023 16:29:50 +0200 Subject: [PATCH 2/4] Second version of translation into French --- src/content/learn/react-developer-tools-fr.md | 76 ------------------- src/content/learn/react-developer-tools.md | 42 +++++----- 2 files changed, 21 insertions(+), 97 deletions(-) delete mode 100644 src/content/learn/react-developer-tools-fr.md diff --git a/src/content/learn/react-developer-tools-fr.md b/src/content/learn/react-developer-tools-fr.md deleted file mode 100644 index d20ca6ca3..000000000 --- a/src/content/learn/react-developer-tools-fr.md +++ /dev/null @@ -1,76 +0,0 @@ ---- -title: Outils de développement React (React Developer Tools) ---- - - - -On utilise les outils de développement React pour inspecter les[composants](/learn/your-first-component), modifier les [props](/learn/passing-props-to-a-component) et les [states](/learn/state-a-components-memory), et identifier des problèmes de performance. - - - - - -* Comment installer React Developer Tools - - - -## Extension de navigateur {/*browser-extension*/} - -Le moyen le plus simple pour déboguer un site construit avec React est d'installer l'extension de navigateur React Developer Tools. Il est disponible pour plusieurs navigateurs populaires: - -* [Installation pour **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Installation pour **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Installation pour **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) - -Maintenant, si vous visitez un site Web **construit avec React,** vous pouvez apercevoir les onglets _Components_ et _Profiler_. - -![Extension React developer tools ](/images/docs/react-devtools-extension.png) - -### Safari et autres navigateurs {/*safari-and-other-browsers*/} -Pour les autres navigateurs (ex: Safari), installez le npm package[`react-devtools`](https://www.npmjs.com/package/react-devtools): -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -Puis, ouvrez les outils de développement depuis le terminal: -```bash -react-devtools -``` - -Ensuite, connectez votre site en ajoutant la balise ` -``` - -Maintenant, actualisez votre site dans le navigateur pour l'afficher dans les outils de développement. - -![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) - -## Mobile (React Native) {/*mobile-react-native*/} -Les outils de développement peuvent egalement être utilisés pour inspecter les Appli construites avec [React Native](https://reactnative.dev/). - -La meilleure façon d'utiliser React Developer Tools est de l'installer au global: -```bash -# Yarn -yarn global add react-devtools - -# Npm -npm install -g react-devtools -``` - -Puis, ouvrez les outils de développement depuis le terminal: -```bash -react-devtools -``` - -Cela devrait se connecter à toute Appli React Native locale en cours d'exécution. - -> Essayez de relancer l'Appli si les outils de développement ne se connectent pas après quelques secondes. - -[En apprendre plus sur le débogage de React Native.](https://reactnative.dev/docs/debugging) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 89208a6bb..bc429663b 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,33 @@ --- -title: React Developer Tools +title: Outils de développement React (React Developer Tools) --- -Use React Developer Tools to inspect React [components](/learn/your-first-component), edit [props](/learn/passing-props-to-a-component) and [state](/learn/state-a-components-memory), and identify performance problems. +On utilise les outils de développement React pour inspecter les[composants](/learn/your-first-component), modifier les [props](/learn/passing-props-to-a-component) et les [states](/learn/state-a-components-memory), et identifier des problèmes de performance. -* How to install React Developer Tools +* Comment installer React Developer Tools -## Browser extension {/*browser-extension*/} +## Extension de navigateur {/*browser-extension*/} -The easiest way to debug websites built with React is to install the React Developer Tools browser extension. It is available for several popular browsers: +Le moyen le plus simple pour déboguer un site construit avec React est d'installer l'extension de navigateur React Developer Tools. Il est disponible pour plusieurs navigateurs populaires: -* [Install for **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Install for **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Install for **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Installation pour **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Installation pour **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Installation pour **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Now, if you visit a website **built with React,** you will see the _Components_ and _Profiler_ panels. +Maintenant, si vous visitez un site Web **construit avec React,** vous pouvez apercevoir les onglets _Components_ et _Profiler_. -![React Developer Tools extension](/images/docs/react-devtools-extension.png) +![Extension React developer tools ](/images/docs/react-devtools-extension.png) -### Safari and other browsers {/*safari-and-other-browsers*/} -For other browsers (for example, Safari), install the [`react-devtools`](https://www.npmjs.com/package/react-devtools) npm package: +### Safari et autres navigateurs {/*safari-and-other-browsers*/} +Pour les autres navigateurs (ex: Safari), installez le npm package[`react-devtools`](https://www.npmjs.com/package/react-devtools): ```bash # Yarn yarn global add react-devtools @@ -36,26 +36,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal: +Puis, ouvrez les outils de développement depuis le terminal: ```bash react-devtools ``` -Then connect your website by adding the following ` ``` -Reload your website in the browser now to view it in developer tools. +Maintenant, actualisez votre site dans le navigateur pour l'afficher dans les outils de développement. ![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) ## Mobile (React Native) {/*mobile-react-native*/} -React Developer Tools can be used to inspect apps built with [React Native](https://reactnative.dev/) as well. +Les outils de développement peuvent egalement être utilisés pour inspecter les Appli construites avec [React Native](https://reactnative.dev/). -The easiest way to use React Developer Tools is to install it globally: +La meilleure façon d'utiliser React Developer Tools est de l'installer au global: ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Next open the developer tools from the terminal. +Puis, ouvrez les outils de développement depuis le terminal: ```bash react-devtools ``` -It should connect to any local React Native app that's running. +Cela devrait se connecter à toute Appli React Native locale en cours d'exécution. -> Try reloading the app if developer tools doesn't connect after a few seconds. +> Essayez de relancer l'Appli si les outils de développement ne se connectent pas après quelques secondes. -[Learn more about debugging React Native.](https://reactnative.dev/docs/debugging) +[En apprendre plus sur le débogage de React Native.](https://reactnative.dev/docs/debugging) \ No newline at end of file From cf4124379a6f81028b6b2a3891de361dd2ef8935 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Am=C3=A9lie=20GRENIER?= <108345430+Ameliegre@users.noreply.github.com> Date: Sun, 28 May 2023 21:29:26 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/learn/react-developer-tools.md | 44 +++++++++++----------- src/sidebarLearn.json | 2 +- 2 files changed, 23 insertions(+), 23 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index bc429663b..4eb283c12 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -1,33 +1,33 @@ --- -title: Outils de développement React (React Developer Tools) +title: Outils de développement React --- -On utilise les outils de développement React pour inspecter les[composants](/learn/your-first-component), modifier les [props](/learn/passing-props-to-a-component) et les [states](/learn/state-a-components-memory), et identifier des problèmes de performance. +Utilisez les outils de développement React _(React Developer Tools, NdT)_ pour inspecter les [composants](/learn/your-first-component), modifier les [props](/learn/passing-props-to-a-component) et les [états](/learn/state-a-components-memory), et identifier des problèmes de performance. -* Comment installer React Developer Tools +* Comment installer les outils de développement React ## Extension de navigateur {/*browser-extension*/} -Le moyen le plus simple pour déboguer un site construit avec React est d'installer l'extension de navigateur React Developer Tools. Il est disponible pour plusieurs navigateurs populaires: +Le moyen le plus simple pour déboguer des sites construit avec React consiste à installer l'extension de navigateur *React Developer Tools*. Elle est disponible pour plusieurs navigateurs populaires : -* [Installation pour **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) -* [Installation pour **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) -* [Installation pour **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) +* [Installer dans **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) +* [Installer dans **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) +* [Installer dans **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Maintenant, si vous visitez un site Web **construit avec React,** vous pouvez apercevoir les onglets _Components_ et _Profiler_. +Désormais, si vous visitez un site web **construit avec React**, vous pouvez apercevoir les onglets _Components_ et _Profiler_. -![Extension React developer tools ](/images/docs/react-devtools-extension.png) +![Extension React Developer Tools](/images/docs/react-devtools-extension.png) -### Safari et autres navigateurs {/*safari-and-other-browsers*/} -Pour les autres navigateurs (ex: Safari), installez le npm package[`react-devtools`](https://www.npmjs.com/package/react-devtools): +### Safari et les autres navigateurs {/*safari-and-other-browsers*/} +Pour les autres navigateurs (par exemple Safari), installez le module npm [`react-devtools`](https://www.npmjs.com/package/react-devtools) : ```bash # Yarn yarn global add react-devtools @@ -36,26 +36,26 @@ yarn global add react-devtools npm install -g react-devtools ``` -Puis, ouvrez les outils de développement depuis le terminal: +Ouvrez alors les outils de développement depuis le terminal : ```bash react-devtools ``` -Ensuite, connectez votre site en ajoutant la balise ` ``` -Maintenant, actualisez votre site dans le navigateur pour l'afficher dans les outils de développement. +Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans les outils de développement. -![React Developer Tools standalone](/images/docs/react-devtools-standalone.png) +![React Developer Tools en mode autonome](/images/docs/react-devtools-standalone.png) -## Mobile (React Native) {/*mobile-react-native*/} -Les outils de développement peuvent egalement être utilisés pour inspecter les Appli construites avec [React Native](https://reactnative.dev/). +## Mobile natif (React Native) {/*mobile-react-native*/} +Les outils de développement React peuvent également être utilisés pour inspecter les applis construites avec [React Native](https://reactnative.dev/). -La meilleure façon d'utiliser React Developer Tools est de l'installer au global: +La façon la plus simple d'utiliser les outils de développement React consiste à les installer au global : ```bash # Yarn yarn global add react-devtools @@ -64,13 +64,13 @@ yarn global add react-devtools npm install -g react-devtools ``` -Puis, ouvrez les outils de développement depuis le terminal: +Ouvrez alors les outils de développement depuis le terminal : ```bash react-devtools ``` -Cela devrait se connecter à toute Appli React Native locale en cours d'exécution. +Ça devrait se connecter à toute appli React Native locale en cours d'exécution. -> Essayez de relancer l'Appli si les outils de développement ne se connectent pas après quelques secondes. +> Essayez de relancer l'appli si les outils de développement ne se connectent pas au bout de quelques secondes. -[En apprendre plus sur le débogage de React Native.](https://reactnative.dev/docs/debugging) \ No newline at end of file +[En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging). \ No newline at end of file diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index c58e9fe30..786992cf4 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -37,7 +37,7 @@ "path": "/learn/editor-setup" }, { - "title": "Outils de développement React (React Developer Tools)", + "title": "Outils de développement React", "path": "/learn/react-developer-tools" } ] From 4bdfc962d8658d707c47d2815d4020261e28f021 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 29 May 2023 19:02:36 +0200 Subject: [PATCH 4/4] copy(devtools): final visual review pass --- src/content/learn/react-developer-tools.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index 4eb283c12..f19187126 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -16,13 +16,13 @@ Utilisez les outils de développement React _(React Developer Tools, NdT)_ pour ## Extension de navigateur {/*browser-extension*/} -Le moyen le plus simple pour déboguer des sites construit avec React consiste à installer l'extension de navigateur *React Developer Tools*. Elle est disponible pour plusieurs navigateurs populaires : +Le moyen le plus simple pour déboguer des sites construit avec React consiste à installer l'extension de navigateur *React Developer Tools*. Elle est disponible pour plusieurs navigateurs populaires : * [Installer dans **Chrome**](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) * [Installer dans **Firefox**](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/) * [Installer dans **Edge**](https://microsoftedge.microsoft.com/addons/detail/react-developer-tools/gpphkfbcpidddadnkolkpfckpihlkkil) -Désormais, si vous visitez un site web **construit avec React**, vous pouvez apercevoir les onglets _Components_ et _Profiler_. +Désormais, si vous visitez un site web **construit avec React**, vous pouvez apercevoir au sein des outils de développement du navigateur les onglets _Components_ et _Profiler_. ![Extension React Developer Tools](/images/docs/react-devtools-extension.png) @@ -41,14 +41,14 @@ Ouvrez alors les outils de développement depuis le terminal : react-devtools ``` -Ensuite, connectez votre site en ajoutant la balise ` ``` -Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans les outils de développement. +Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans les outils de développement. ![React Developer Tools en mode autonome](/images/docs/react-devtools-standalone.png) @@ -71,6 +71,6 @@ react-devtools Ça devrait se connecter à toute appli React Native locale en cours d'exécution. -> Essayez de relancer l'appli si les outils de développement ne se connectent pas au bout de quelques secondes. +> Essayez de relancer l'appli si les outils de développement ne se connectent toujours pas au bout de quelques secondes. -[En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging). \ No newline at end of file +[En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging).