From 27b776b7cf015822866c79bd2263ab755ec5dccd Mon Sep 17 00:00:00 2001 From: Nab Date: Wed, 27 Feb 2019 20:23:27 +0100 Subject: [PATCH 01/15] Translation Add React to a website --- content/docs/add-react-to-a-website.md | 157 ++++++++++++------------- 1 file changed, 78 insertions(+), 79 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 11b99d37a..6a9b2d39b 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: Ajouter React à votre site web permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,195 +8,194 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Utiliser React en fonction de vos besoins -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +Depuis sa création, React s'adapte en fonction de vos besoins, ainsi vous pouvez l'utiliser autant que vous le souhaitez, ou simplement ajouter un peu d'interactivité à une page existante. Les composants React sont une bonne solution pour faire ça. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +La majorité des sites web ne sont pas, et n'ont pas besoin d'être, des applications web monopage (en anglais Single Page Application ou plus simplement SPA, NdT). Sans outils ou même de configurations supplémentaires, mais avec simplement quelques lignes de code, vous pouvez essayer React dans une petite partie de votre site web. Vous pourrez par la suite ajouter des composants supplémentaires ou garder React dans quelques éléments dynamiques. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Ajouter React en une minute](#add-react-in-one-minute) +- [Optionnel : Essayer React avec JSX](#optional-try-react-with-jsx) (aucun paquet nécessaire!) -## Add React in One Minute {#add-react-in-one-minute} +## Ajouter React en une minute {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +Dans cette partie, nous allons montrer comment ajouter un composant React à une page HTML existante. Vous pouvez suivre les étapes avec votre propre site web ou avec une page HTML vide pour vous entrainer. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +Il n'y a pas besoin d'outils compliqués ou d'installations requises, **pour suivre cette section, vous avez juste besoin d'une connexion à internet et d'une minute de votre temps.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Optionnel : [Télécharger l'exemple complet (2KB zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Étape 1 : Ajouter un conteneur DOM à votre HTML {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Premièrement, ouvrez la page HTML que vous souhaitez éditer. Ajouter une balise `
` vide afin de définir ce que vous souhaitez afficher avec React. Par exemple : ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +L'attribut `id` de votre `
`, qui est unique, va vous permettre de manipuler cette balise depuis le code JavaScript afin d'afficher un composant React dans celle-ci. ->Tip +>Astuce > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +>Vous pouvez placer une `
` qui sert de « conteneur », où vous le souhaitez dans la balise ``. Vous pouvez, par ailleurs, avoir autant de conteneurs indépendants que vous le souhaitez dans la même page. React remplacera le contenu existant de ces conteneurs, ils sont donc la plupart du temps vides. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Étape 2 : Ajouter les balises « Script » {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +Les deux premières balises permettent de charger React, alors que la troisième charge le code de votre composant. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Étape 3 : Créer un composant React {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Créez un fichier nommé `like_button.js` dans le même dossier que votre page HTML. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Ouvrez et copiez **[le code de démarrage](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** et collez son contenu dans votre fichier. ->Tip +>Astuce > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +>Ce code définit un composant appelé `LikeButton`. Ne vous en faites pas si vous ne comprenez pas son code tout de suite, nous aborderons tous les éléments de React un par un dans la suite de notre [tutoriel pratique](/tutorial/tutorial.html) et dans le [guide des principaux concepts](/docs/hello-world.html). Pour le moment, essayons simplement de l'afficher à l’écran ! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Ajouter deux lignes à la fin de `like_button.js`, après **[le code de démarrage](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** : ```js{3,4} -// ... the starter code you pasted ... +// ... le code de démarrage collé ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Ces deux lignes de code vont remplacer le contenu de la `
` que nous avons ajoutée dans la première étape. Ainsi elles afficheront notre composant React sous forme de bouton « J’aime ». -### That's It! {#thats-it} +### Et voilà ! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Il n'y a pas de quatrième étape. **Vous venez tout juste d'ajouter votre premier composant React à votre site web.** -Check out the next sections for more tips on integrating React. +Pour plus d'astuces concernant l'intégration de React, n'hésitez pas à consulter les sections suivantes. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Voir le code source intégral de l'exemple](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Télécharger le code source intégral de l'exemple (2KB zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Astuce : Réutiliser un composant {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Généralement, on souhaite afficher des composants React à plusieurs endroits d'une page HTML. Voici un exemple qui affiche le bouton « J’aime » à trois reprises et lui fournit quelques données : -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Voir le code source intégral de l'exemple](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Télécharger le code source intégral de l'exemple (2KB zippé)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Remarque > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +>Lorsque les éléments de React doivent être isolés les uns des autres, cette solution est souvent utilisée. Il est cependant plus facile d'utiliser le principe de [composition de composants](/docs/components-and-props.html#composing-components) à la place dans votre code React. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Astuce : Minifié votre JavaScript en production {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +Avant de déployer votre site web en production, il faut garder à l'esprit qu'un JavaScript non minifié risque de ralentir significativement le chargement de la page pour vos utilisateurs. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Lorsque vous aurez minifié vos scripts d'application ainsi que référencé la version adaptée de React (soit `production.min.js`), vous serez alors prêt pour une mise en production : ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Si vous n'avez pas de marche à suivre pour la minification, voici [une façon de faire](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Optionnel : Essayer React avec JSX {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +Dans l'exemple ci-dessous, nous utilisons uniquement les fonctionnalitées natives supportées par le navigateur. C'est pourquoi nous faisons appel une fonction JavaScript pour indiquer à React ce qu'il faut afficher : ```js const e = React.createElement; -// Display a "Like" ); ``` -These two code snippets are equivalent. While **JSX is [completely optional](/docs/react-without-jsx.html)**, many people find it helpful for writing UI code -- both with React and with other libraries. +Les deux extraits de code précèdents sont en effet équivalent. Cependant même si la syntaxe **JSX est [complètement optionnelle](/docs/react-without-jsx.html)**, la plupart des développeurs React trouvent cela très pratique pour l'affichage (avec React ou même avec d'autres bibliothèques). -You can play with JSX using [this online converter](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). +Vous pouvez tester JSX en utilisant un [convertisseur en ligne](http://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). -### Quickly Try JSX {#quickly-try-jsx} +### Essayer sans tarder JSX {#quickly-try-jsx} -The quickest way to try JSX in your project is to add this ` ``` -Now you can use JSX in any ` ``` -Si vous n'avez pas de marche à suivre pour la minification, voici [une façon de faire](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Si vous n'avez pas de minification déjà en place pour vos scripts, voici [une façon de faire](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optionnel : Essayer React avec JSX {#optional-try-react-with-jsx} +## Optionnel : essayer React avec JSX {#optional-try-react-with-jsx} -Dans l'exemple ci-dessous, nous utilisons uniquement les fonctionnalitées natives supportées par le navigateur. C'est pourquoi nous faisons appel une fonction JavaScript pour indiquer à React ce qu'il faut afficher : +Dans les exemples ci-dessus, nous utilisions uniquement les fonctionnalités prises en charge nativement par les navigateurs. C'est pourquoi nous appelions une fonction JavaScript pour indiquer à React ce qu'il fallait afficher : ```js const e = React.createElement; @@ -136,7 +136,7 @@ return e( ); ``` -Néanmoins, React nous offre aussi la possibilité d'utiliser [JSX](/docs/introducing-jsx.html) à la place. +Néanmoins, React nous offre aussi la possibilité d'utiliser plutôt [JSX](/docs/introducing-jsx.html). ```js // Affiche un bouton « J’aime » @@ -151,7 +151,7 @@ Les deux extraits de code précédents sont en effet équivalent. Cependant mêm Vous pouvez tester JSX en utilisant un [convertisseur en ligne](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). -### Essayer sans tarder JSX {#quickly-try-jsx} +### Essayer JSX en un clin d’œil {#quickly-try-jsx} La façon la plus simple et rapide de tester JSX dans votre projet est d'ajouter la balise ` ``` -Vous pouvez dès à présent utiliser JSX simplement en ajoutant l'attribut `type="text/babel"` à n'importe quelle balise ` - + @@ -167,7 +167,7 @@ Cette approche est acceptable pour se former ou réaliser des démos simples. Ce L'ajout de JSX à votre projet ne nécessite pas d'outils compliqués comme un _bundler_ ou un serveur de développement. Cela ressemble plus **à l'ajout d'un préprocesseur CSS**. Le seul outil indispensable est [Node.js](https://nodejs.org/fr/), qui doit être installé sur votre ordinateur. -Déplacez-vous sur votre projet à l'aide de votre terminal et copiez/collez ces deux commandes : +Dans un terminal (invite de commande), déplacez-vous dans le dossier de votre projet, et copiez-collez ces deux commandes : 1. **Étape 1 :** exécutez `npm init -y` (si ça ne fonctionne pas, [voici un correctif](https://gist.github.com/gaearon/246f6380610e262f8a648e3e51cad40d)) 2. **Étape 2 :** exécutez `npm install babel-cli@6 babel-preset-react-app@3` @@ -188,14 +188,14 @@ npx babel --watch src --out-dir . --presets react-app/prod >Remarque > ->`npx` n'est pas une faute de frappe, il s'agit d'un [outil de lancement de package (« package runner tool » dans la langue de Shakespeare, NdT) qui accompagne npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b). +>`npx` n'est pas une faute de frappe, il s'agit d'un [outil d’exécution de paquet fourni avec npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b) *(”package runner tool”, NdT)*. > >Si le message d'erreur *”You have mistakenly installed the `babel` package”* apparaît, vous avez peut-être loupé [l'étape précédente](#add-jsx-to-a-project). Dans le même dossier, recommencez l'opération et essayez de nouveau. -Cette commande lance un observateur automatisé de votre JSX donc n'attendez pas que cela se termine. +Cette commande surveille votre JSX en continu, inutile donc d’attendre qu’elle se termine. -Dorénavant, si à partir de **[code de démarrage JSX](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, vous créez un fichier nommé `src/like_button.js`, l'observateur va lancer un préprocesseur afin de créer un fichier `like_button.js` avec du code JavaScript utilisable par le navigateur. Ce fichier obtenu sera recréé à chaque modification de votre fichier JSX original. +Dorénavant, si à partir du **[code de démarrage JSX](https://cdn.rawgit.com/gaearon/c8e112dc74ac44aac4f673f2c39d19d1/raw/09b951c86c1bf1116af741fa4664511f2f179f0a/like_button.js)**, vous créez un fichier nommé `src/like_button.js`, le préprocesseur va produire un fichier traduit `like_button.js`, avec du code JavaScript exploitable par le navigateur. Ce fichier sera mis à jour à chaque modification de votre fichier JSX original. -Avec ce principe, vous aurez la possibilité d'utiliser des syntaxes modernes de JavaScript comme les classes, sans vous soucier de la compatibilité avec d'anciens navigateurs. L'outil que nous venons de décrire se nomme Babel, vous pouvez en savoir plus sur ce dernier en allant sur [sa documentation](https://babeljs.io/docs/en/babel-cli/). +Et en bonus, ça vous permet aussi d’utiliser des syntaxes JavaScript modernes comme les classes, sans vous soucier de la compatibilité avec d'anciens navigateurs. L'outil que nous venons d’utiliser se nomme Babel, et vous pouvez en savoir plus sur lui en allant sur [sa documentation](https://babeljs.io/docs/en/babel-cli/). Si vous vous sentez à l'aise avec les outils de compilation et souhaitez en apprendre plus, la [partie suivante](/docs/create-a-new-react-app.html) décrit les outils les plus populaires et les plus accessibles de la chaine de compilation. Si ce n'est pas le cas, les balises décrites précédemment fonctionneront à merveille ! From 4bf37a94e1470f85032ff5371451affabcaa7ad1 Mon Sep 17 00:00:00 2001 From: Romain Rukse Date: Wed, 6 Mar 2019 22:14:49 +0100 Subject: [PATCH 13/15] Apply suggestions from code review --- content/docs/add-react-to-a-website.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 4f90ab359..e8b746bce 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -12,7 +12,7 @@ Utiliser React en fonction de vos besoins React a été conçu dès le départ pour une adoption progressive, et **vous pouvez utiliser React _a minima_ ou autant que nécessaire.** Peut-être souhaitez-vous simplement ajouter un peu d'interactivité à une page existante. Les composants React sont une bonne solution pour ça. -La majorité des sites web ne sont pas, et n'ont pas besoin d'être, des applications web monopage (en anglais Single Page Application ou plus simplement SPA, NdT). Sans outils ou configurations supplémentaires, mais avec simplement quelques lignes de code, vous pouvez essayer React dans une petite partie de votre site web. Vous pourrez par la suite ajouter des composants supplémentaires ou garder React dans quelques éléments dynamiques. +La majorité des sites web ne sont pas, et n'ont pas besoin d'être, des applications web monopages *(Single-Page Application ou plus simplement SPA, NdT)*. **Avec juste quelques lignes de code et sans outillage particulier**, vous pouvez essayer React sur une petite partie de votre site web. Vous pourrez par la suite ajouter des composants supplémentaires ou limiter React à quelques éléments dynamiques. --- @@ -147,7 +147,7 @@ return ( ); ``` -Les deux extraits de code précédents sont en effet équivalent. Cependant même si la syntaxe **JSX est [complètement optionnelle](/docs/react-without-jsx.html)**, la plupart des développeurs React trouvent cela très pratique pour l'affichage (avec React ou même avec d'autres bibliothèques). +Ces deux extraits de code sont équivalents. Même si la syntaxe **JSX est [complètement optionnelle](/docs/react-without-jsx.html)**, la plupart des développeur·euse·s React la trouvent très pratique pour écrire du code (avec React ou même avec d'autres bibliothèques). Vous pouvez tester JSX en utilisant un [convertisseur en ligne](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). From fe2963e4b326b67a7fdbc83167326297c66eef27 Mon Sep 17 00:00:00 2001 From: Romain Rukse Date: Fri, 8 Mar 2019 12:33:10 +0100 Subject: [PATCH 14/15] Update content/docs/add-react-to-a-website.md --- content/docs/add-react-to-a-website.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index e8b746bce..d542395cf 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -112,7 +112,7 @@ Généralement, on souhaite afficher des composants React à plusieurs endroits Avant de déployer votre site web en production, gardez à l'esprit qu'un JavaScript non-minifié risque de ralentir significativement le chargement de la page pour vos utilisateurs. -Lorsque vous aurez minifié vos scripts d'application ainsi que référencé la version adaptée de React (soit `production.min.js`), vous serez alors prêt pour une mise en production : +Si vous minifiez déjà vos scripts applicatifs et si vous vous assurez de référencer les versions de React dont les noms se terminent en `production.min.js`, **votre site sera prêt pour la production** : ```js From 020a657f93787bb5aa8e74986c41b20e7ad48d26 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Fri, 8 Mar 2019 14:04:48 +0100 Subject: [PATCH 15/15] Final tweaks --- content/docs/add-react-to-a-website.md | 74 +++++++++++++------------- 1 file changed, 37 insertions(+), 37 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index d542395cf..51e2747d0 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -10,26 +10,26 @@ next: create-a-new-react-app.html Utiliser React en fonction de vos besoins -React a été conçu dès le départ pour une adoption progressive, et **vous pouvez utiliser React _a minima_ ou autant que nécessaire.** Peut-être souhaitez-vous simplement ajouter un peu d'interactivité à une page existante. Les composants React sont une bonne solution pour ça. +React a été conçu dès le départ pour une adoption progressive, et **vous pouvez utiliser React _a minima_ ou autant que nécessaire.** Peut-être souhaitez-vous juste ajouter un peu d'interactivité à une page existante. Les composants React sont une bonne solution pour ça. La majorité des sites web ne sont pas, et n'ont pas besoin d'être, des applications web monopages *(Single-Page Application ou plus simplement SPA, NdT)*. **Avec juste quelques lignes de code et sans outillage particulier**, vous pouvez essayer React sur une petite partie de votre site web. Vous pourrez par la suite ajouter des composants supplémentaires ou limiter React à quelques éléments dynamiques. --- - [Ajouter React en une minute](#add-react-in-one-minute) -- [Optionnel : Essayer React avec JSX](#optional-try-react-with-jsx) (aucun _bundler_ nécessaire !) +- [Optionnel : Essayer React avec JSX](#optional-try-react-with-jsx) (aucun _bundler_ nécessaire !) ## Ajouter React en une minute {#add-react-in-one-minute} -Dans cette partie, nous allons voir comment ajouter un composant React à une page HTML existante. Vous pouvez suivre les étapes avec votre propre site web, ou avec une page HTML vide pour vous entrainer. +Dans cette partie, nous allons voir comment ajouter un composant React à une page HTML existante. Vous pouvez suivre les étapes avec votre propre site web, ou avec une page HTML vide pour vous entraîner. -Il n'y a pas besoin d'outils compliqués ou d'installations à faire : **pour suivre cette section, vous avez juste besoin d'une connexion à internet et d'une minute de votre temps.** +Pas besoin d'outils compliqués ni de faire des installations : **pour suivre cette section, vous avez juste besoin d'une connexion à internet et d'une minute de votre temps.** -Optionnel : [Télécharger l'exemple complet (2KB zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Optionnel : [Télécharger l'exemple complet (2 Ko zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Étape 1 : ajouter un conteneur DOM à votre HTML {#step-1-add-a-dom-container-to-the-html} +### Étape 1 : ajouter un conteneur DOM à votre HTML {#step-1-add-a-dom-container-to-the-html} -Pour commencer, ouvrez la page HTML que vous souhaitez modifier. Ajoutez une balise `
` vide pour indiquer l'endroit dans lequel vous souhaitez afficher quelque chose avec React. Par exemple : +Pour commencer, ouvrez la page HTML que vous souhaitez modifier. Ajoutez une balise `
` vide pour indiquer l'endroit dans lequel vous souhaitez afficher quelque chose avec React. Par exemple : ```html{3} @@ -43,29 +43,29 @@ L'attribut `id` de votre `
`, qui est unique, va vous permettre de manipuler >Astuce > ->Vous pouvez placer une telle `
` « conteneur » **où vous le souhaitez** dans la balise ``. Vous pouvez d’ailleurs avoir autant de conteneurs DOM indépendants que vous le souhaitez dans la même page. Il sont généralement vides, car React remplacera leur contenu existant de toutes façons. +>Vous pouvez placer une telle `
` « conteneur » **où vous le souhaitez** dans la balise ``. Vous pouvez d’ailleurs avoir autant de conteneurs DOM indépendants que vous le souhaitez dans la même page. Il sont généralement vides, car React remplacera leur contenu existant de toutes façons. -### Étape 2 : ajouter les balises de script {#step-2-add-the-script-tags} +### Étape 2 : ajouter les balises de script {#step-2-add-the-script-tags} -Ensuite, ajoutez trois balises ` - + - ``` Les deux premières balises permettent de charger React, alors que la troisième charge le code de votre composant. -### Étape 3 : créer un composant React {#step-3-create-a-react-component} +### Étape 3 : créer un composant React {#step-3-create-a-react-component} Créez un fichier nommé `like_button.js` dans le même dossier que votre page HTML. @@ -73,9 +73,9 @@ Ouvrez et copiez **[le code de démarrage](https://cdn.rawgit.com/gaearon/0b1808 >Astuce > ->Ce code définit un composant appelé `LikeButton`. Ne vous en faites pas si vous ne comprenez pas son code tout de suite, nous aborderons les facettes de React ultérieurement dans notre [tutoriel pratique](/tutorial/tutorial.html) et dans le [guide des fondamentaux](/docs/hello-world.html). Pour le moment, essayons simplement de l'afficher à l’écran ! +>Ce code définit un composant appelé `LikeButton`. Ne vous en faites pas si vous ne comprenez pas son code tout de suite, nous aborderons les facettes de React ultérieurement dans notre [tutoriel pratique](/tutorial/tutorial.html) et dans le [guide des fondamentaux](/docs/hello-world.html). Pour le moment, essayons simplement de l'afficher à l’écran ! -Ajoutez deux lignes à la fin de `like_button.js`, après **[le code de démarrage](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** : +Ajoutez deux lignes à la fin de `like_button.js`, après **[le code de démarrage](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** : ```js{3,4} // ... le code de démarrage que vous avez collé ... @@ -84,9 +84,9 @@ const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -Ces deux lignes de code vont remplacer le contenu de la `
` que nous avons ajoutée dans la première étape. Ainsi elles afficheront notre composant React sous forme de bouton « J’aime ». +Ces deux lignes de code vont remplacer le contenu de la `
` que nous avons ajoutée dans la première étape. Ainsi elles afficheront notre composant React sous forme de bouton « J’aime ». -### Et voilà ! {#thats-it} +### Et voilà ! {#thats-it} Il n'y a pas de quatrième étape. **Vous venez tout juste d'ajouter votre premier composant React à votre site web.** @@ -94,25 +94,25 @@ Pour plus d'astuces concernant l'intégration de React, n'hésitez pas à consul **[Voir le code source intégral de l'exemple](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Télécharger le code source intégral de l'exemple (2Ko zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Télécharger le code source intégral de l'exemple (2 Ko zippé)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Astuce : réutiliser un composant {#tip-reuse-a-component} +### Astuce : réutiliser un composant {#tip-reuse-a-component} -Généralement, on souhaite afficher des composants React à plusieurs endroits d'une page HTML. Voici un exemple qui affiche le bouton « J’aime » à trois reprises et lui fournit quelques données : +Généralement, on souhaite afficher des composants React à plusieurs endroits d'une page HTML. Voici un exemple qui affiche le bouton « J’aime » à trois reprises et lui fournit quelques données : [Voir le code source intégral de l'exemple](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Télécharger le code source intégral de l'exemple (2Ko zippé)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Télécharger le code source intégral de l'exemple (2 Ko zippé)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) >Remarque > ->Lorsque les éléments de React doivent être isolés les uns des autres, cette solution est souvent utilisée. Il est cependant plus facile d'utiliser le principe de [composition de composants](/docs/components-and-props.html#composing-components) au sein de votre code React. +>Cette solution est souvent utilisée lorsque les éléments de React doivent être isolés les uns des autres. Il est cependant plus facile d'utiliser le principe de [composition de composants](/docs/components-and-props.html#composing-components) au sein de votre code React. -### Astuce : minifier votre JavaScript pour la production {#tip-minify-javascript-for-production} +### Astuce : minifier votre JavaScript pour la production {#tip-minify-javascript-for-production} Avant de déployer votre site web en production, gardez à l'esprit qu'un JavaScript non-minifié risque de ralentir significativement le chargement de la page pour vos utilisateurs. -Si vous minifiez déjà vos scripts applicatifs et si vous vous assurez de référencer les versions de React dont les noms se terminent en `production.min.js`, **votre site sera prêt pour la production** : +Si vous minifiez déjà vos scripts applicatifs et si vous vous assurez de référencer les versions de React dont les noms se terminent en `production.min.js`, **votre site sera prêt pour la production** : ```js @@ -121,14 +121,14 @@ Si vous minifiez déjà vos scripts applicatifs et si vous vous assurez de réf Si vous n'avez pas de minification déjà en place pour vos scripts, voici [une façon de faire](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optionnel : essayer React avec JSX {#optional-try-react-with-jsx} +## Optionnel : essayer React avec JSX {#optional-try-react-with-jsx} Dans les exemples ci-dessus, nous utilisions uniquement les fonctionnalités prises en charge nativement par les navigateurs. C'est pourquoi nous appelions une fonction JavaScript pour indiquer à React ce qu'il fallait afficher : ```js const e = React.createElement; -// Affiche un bouton « J’aime » +// Affiche un bouton « J’aime » return e( 'button', { onClick: () => this.setState({ liked: true }) }, @@ -139,7 +139,7 @@ return e( Néanmoins, React nous offre aussi la possibilité d'utiliser plutôt [JSX](/docs/introducing-jsx.html). ```js -// Affiche un bouton « J’aime » +// Affiche un bouton « J’aime » return (