diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a97b44d45..51e2747d0 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 à un 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. +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. -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 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. --- -- [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 _bundler_ 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 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. -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.** +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.** -Optional: [Download the full example (2KB zipped)](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) -### 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: +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} - +
- + ``` -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 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. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Étape 2 : ajouter les balises de 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 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 ! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.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} -// ... the starter code you pasted ... +// ... le code de démarrage que vous avez 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 prochaines sections. -**[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 (2 Ko 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 (2 Ko 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. +>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. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Astuce : minifier votre JavaScript pour la production {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +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. -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`: +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 ``` -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 minification déjà en place pour vos scripts, 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 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; -// 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. +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). -You can play with JSX using [this online converter](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=). +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=). -### Quickly Try JSX {#quickly-try-jsx} +### Essayer JSX en un clin d’œil {#quickly-try-jsx} -The quickest way to try JSX in your project is to add this ` ``` -Now you can use JSX in any `