My First Component
+Mon premier composant
-
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component +
- Les composants : les blocs de construction de l’UI +
- Définir un composant +
- Utiliser un composant
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Ce balisage représente cet article ``, son en-tête ``, et une table des matières (abrégée) au moyen d'une liste ordonnée ``. Ce type de balisage, combiné à CSS pour en contrôler l'apparence et à JavaScript pour gérer son interactivité, constitue le socle de toute barre latérale, avatar, boîte de dialogue, liste déroulante… en fait absolument tout morceau d'UI que vous voyez sur le Web.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React vous permet de combiner votre balisage et ses codes CSS et JavaScript associés pour en faire des « composants » personnalisés, **des éléments d'UI réutilisables pour votre appli**. Le code de la table des matières que vous avez vu ci-dessus pourrait devenir un composant ``, ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Tout comme avec les balises HTML, vous pouvez composer, ordonner et imbriquer les composants pour concevoir des pages entières. Par exemple, la page de documentation que vous êtes en train de lire est constituée de composants React :
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Et voici comment construire un composant :
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Étape 1 : exporter le composant {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Le préfixe `export default` est une [syntaxe JavaScript standard](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/export) (elle n'a rien de spécifique à React). Elle vous permet d'indiquer la fonction principale dans un fichier, de façon à ce qu'elle puisse aisément être importée par la suite depuis d'autres fichiers. (Explorez ce sujet plus en détails dans [Importer et exporter des composants](/learn/importing-and-exporting-components) !)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Étape 2 : définir la fonction {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Avec `function Profile() { }`, vous définissez une fonction JavaScript dont le nom est `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Les composants React sont des fonctions JavaScript classiques, mais **leurs noms doivent commencer par une majuscule**, sinon ils ne fonctionneront pas !
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Étape 3 : ajouter le balisage {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Le composant renvoie une balise `![]()
` avec des attributs `src` et `alt`. `![]()
` s'écrit comme en HTML, mais il s'agit en fait de JavaScript sous le capot ! Cette syntaxe s'appelle [JSX](/learn/writing-markup-with-jsx), et elle vous permet d'incorporer du balisage dans JavaScript.
-Return statements can be written all on one line, as in this component:
+Vous pouvez écrire votre renvoi de valeur en une seule ligne, comme dans ce composant :
```js
return 
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses :
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sans ces parenthèses, tout code qui suit un `return` seul sur sa ligne [serait ignoré](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Utiliser un composant {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+À présent que vous avez défini votre composant `Profile`, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez exporter un composant `Gallery` qui utilise plusieurs composants `Profile` :
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-### What the browser sees {/*what-the-browser-sees*/}
+### Ce que voit le navigateur {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Remarquez les différences de casse :
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` est en minuscules : React comprend qu'il s'agit d'une balise HTML.
+* `![]()
`. In the end, this is what the browser sees:
+Et `Profile` contient lui-même du HTML : `![]()
`. Au final, voici ce que voit le navigateur :
```html
- Amazing scientists
+ Scientifiques de renom
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Imbriquer et organiser les composants {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Les composants sont des fonctions JavaScript classiques, de sorte que vous pouvez définir plusieurs composants dans un même fichier. C'est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient trop encombré, vous pouvez toujours déplacer `Profile` dans un fichier à part. Vous apprendrez comment procéder très bientôt dans la [page sur les imports](/learn/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Puisque les composants `Profile` sont affichés au sein de `Gallery` (et même plusieurs fois !), on peut dire que `Gallery` est un **composant parent**, qui affiche chaque `Profile` en tant que composant « enfant ». Ça fait partie de la magie de React : vous pouvez définir un composant une seule fois, puis l'utiliser à autant d'endroits et autant de fois que vous le souhaitez.
-Components can render other components, but **you must never nest their definitions:**
+Les composants peuvent afficher d'autres composants, mais **faites bien attention à ne jamais imbriquer leurs définitions** :
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ne définissez jamais un composant au sein d’un autre composant !
function Profile() {
// ...
}
@@ -190,57 +190,55 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Le fragment de code si-dessus est [très lent et plein de bugs](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state). Définissez plutôt tous vos composants au niveau racine du module :
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Déclarez les composants au niveau racine
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Lorsqu'un composant enfant a besoin de données venant d'un parent, [passez-les en props](/learn/passing-props-to-a-component) plutôt que d'imbriquer leurs définitions.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Des composants jusqu'au bout {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Votre application React commence avec un composant « racine ». En général, il est créé automatiquement lorsque vous démarrez un nouveau projet. Par exemple, si vous utilisez [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), le composant racine est défini dans `src/App.js`. Si vous utilisez le framework [Next.js](https://nextjs.org/), le composant racine est défini dans `pages/index.js`. Dans les exemples qui précédaient, vous avez exporté des composants racines.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La plupart des applis React utilisent des composants « jusqu'au bout ». Ça signifie que vous utiliserez des composants non seulement pour des éléments réutilisables tels que des boutons, mais aussi pour des blocs plus importants tels que des barres latérales, des listes, et au final des pages complètes ! Les composants sont un moyen pratique d'organiser le code et le balisage de l'UI, même si certains ne seront utilisés qu'une fois.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Les frameworks basés sur React](/learn/start-a-new-react-project) poussent cette logique plus loin. Plutôt que d'utiliser un fichier HTML vide et de laisser React « prendre la main » pour gérer la page avec JavaScript, ils génèrent *aussi* automatiquement le HTML de vos composants React. Ça permet à votre appli d'afficher du contenu avant même que le JavaScript ne soit chargé.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ceci dit, de nombreux sites web utilisent uniquement React pour [ajouter de l'interactivité à des pages HTML existantes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Ils ont plusieurs composants racines au lieu d'un seul pour la page entière. Vous pouvez utiliser React aussi largement — ou légèrement – que vous le souhaitez.
-You've just gotten your first taste of React! Let's recap some key points.
+Vous venez d'avoir un avant-goût de React ! Reprenons-en les points saillants.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React vous permet de créer des composants, qui sont **des éléments d'UI réutilisables pour votre appli**.
+* Dans une appli React, chaque morceau de l'UI est un composant.
+* Les composants React sont des fonctions JavaScript classiques, à ceci près que :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Leurs noms commencent toujours par une majuscule.
+ 2. Ils renvoient du balisage JSX.
-
-
-#### Export the component {/*export-the-component*/}
+#### Exporter le composant {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Ce bac à sable ne fonctionne pas, parce que le composant racine n'est pas exporté :
@@ -261,11 +259,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Essayez de le corriger vous-même avant de consulter la solution !
-Add `export default` before the function definition like so:
+Ajoutez `export default` avant la définition de la fonction, comme ceci :
@@ -286,21 +284,20 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vous vous demandez peut-être pourquoi écrire `export` seul ne suffit pas à corriger cet exemple. Vous apprendrez la différence entre `export` et `export default` dans [Importer et exporter des composants](/learn/importing-and-exporting-components).
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corriger l'instruction `return` {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Quelque chose cloche dans cette instruction `return`. Saurez-vous la corriger ?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Vous aurez peut-être une erreur *“Unexpected token”* en tentant de corriger ça. Si ça vous arrive, vérifiez que le point-virgule apparaît *après* la parenthèse fermante. Laisser le point-virgule au sein du `return ()` entraînerait une erreur.
-
```js
@@ -318,7 +315,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Vous pouvez corriger ce composant en ramenant l'instruction `return` sur une seule ligne, comme ceci :
@@ -334,16 +331,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Ou alors, enrobez le JSX renvoyé par des parenthèses qui s'ouvrent immédiatement à la suite du `return` :
```js
export default function Profile() {
return (
- 
);
}
@@ -357,9 +354,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Repérer l'erreur {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Il y a un souci dans la façon dont le composant `Profile` est déclaré et utilisé. Repérez-vous l'erreur ? (Essayez de vous rappeler comment React fait la distinction entre les composants et les balises HTML classiques !)
@@ -376,7 +373,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-React component names must start with a capital letter.
+Les noms de composants React doivent commencer par une majuscule.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +426,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Votre propre composant {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Écrivez un composant à partir de zéro. Vous pouvez lui donner n'importe quel nom valide, et renvoyer le balisage de votre choix. Si vous êtes à court d'idée, vous pouvez écrire un composant `Congratulations` qui affiche `Bien joué !
`. N'oubliez pas de l'exporter !
```js
-// Write your component below!
+// Écrivez votre composant ici !
```
@@ -449,7 +446,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bien joué !
);
}
```
`, et une table des matières (abrégée) au moyen d'une liste ordonnée ``. Ce type de balisage, combiné à CSS pour en contrôler l'apparence et à JavaScript pour gérer son interactivité, constitue le socle de toute barre latérale, avatar, boîte de dialogue, liste déroulante… en fait absolument tout morceau d'UI que vous voyez sur le Web.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React vous permet de combiner votre balisage et ses codes CSS et JavaScript associés pour en faire des « composants » personnalisés, **des éléments d'UI réutilisables pour votre appli**. Le code de la table des matières que vous avez vu ci-dessus pourrait devenir un composant ``, ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Tout comme avec les balises HTML, vous pouvez composer, ordonner et imbriquer les composants pour concevoir des pages entières. Par exemple, la page de documentation que vous êtes en train de lire est constituée de composants React :
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Et voici comment construire un composant :
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Étape 1 : exporter le composant {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Le préfixe `export default` est une [syntaxe JavaScript standard](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/export) (elle n'a rien de spécifique à React). Elle vous permet d'indiquer la fonction principale dans un fichier, de façon à ce qu'elle puisse aisément être importée par la suite depuis d'autres fichiers. (Explorez ce sujet plus en détails dans [Importer et exporter des composants](/learn/importing-and-exporting-components) !)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Étape 2 : définir la fonction {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Avec `function Profile() { }`, vous définissez une fonction JavaScript dont le nom est `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Les composants React sont des fonctions JavaScript classiques, mais **leurs noms doivent commencer par une majuscule**, sinon ils ne fonctionneront pas !
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Étape 3 : ajouter le balisage {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Le composant renvoie une balise `![]()
` avec des attributs `src` et `alt`. `![]()
` s'écrit comme en HTML, mais il s'agit en fait de JavaScript sous le capot ! Cette syntaxe s'appelle [JSX](/learn/writing-markup-with-jsx), et elle vous permet d'incorporer du balisage dans JavaScript.
-Return statements can be written all on one line, as in this component:
+Vous pouvez écrire votre renvoi de valeur en une seule ligne, comme dans ce composant :
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses :
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sans ces parenthèses, tout code qui suit un `return` seul sur sa ligne [serait ignoré](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Utiliser un composant {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+À présent que vous avez défini votre composant `Profile`, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez exporter un composant `Gallery` qui utilise plusieurs composants `Profile` :
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-### What the browser sees {/*what-the-browser-sees*/}
+### Ce que voit le navigateur {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Remarquez les différences de casse :
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` est en minuscules : React comprend qu'il s'agit d'une balise HTML.
+* `![]()
`. In the end, this is what the browser sees:
+Et `Profile` contient lui-même du HTML : `![]()
`. Au final, voici ce que voit le navigateur :
```html
- Amazing scientists
+ Scientifiques de renom
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Imbriquer et organiser les composants {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Les composants sont des fonctions JavaScript classiques, de sorte que vous pouvez définir plusieurs composants dans un même fichier. C'est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient trop encombré, vous pouvez toujours déplacer `Profile` dans un fichier à part. Vous apprendrez comment procéder très bientôt dans la [page sur les imports](/learn/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Puisque les composants `Profile` sont affichés au sein de `Gallery` (et même plusieurs fois !), on peut dire que `Gallery` est un **composant parent**, qui affiche chaque `Profile` en tant que composant « enfant ». Ça fait partie de la magie de React : vous pouvez définir un composant une seule fois, puis l'utiliser à autant d'endroits et autant de fois que vous le souhaitez.
-Components can render other components, but **you must never nest their definitions:**
+Les composants peuvent afficher d'autres composants, mais **faites bien attention à ne jamais imbriquer leurs définitions** :
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ne définissez jamais un composant au sein d’un autre composant !
function Profile() {
// ...
}
@@ -190,57 +190,55 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Le fragment de code si-dessus est [très lent et plein de bugs](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state). Définissez plutôt tous vos composants au niveau racine du module :
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Déclarez les composants au niveau racine
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Lorsqu'un composant enfant a besoin de données venant d'un parent, [passez-les en props](/learn/passing-props-to-a-component) plutôt que d'imbriquer leurs définitions.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Des composants jusqu'au bout {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Votre application React commence avec un composant « racine ». En général, il est créé automatiquement lorsque vous démarrez un nouveau projet. Par exemple, si vous utilisez [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), le composant racine est défini dans `src/App.js`. Si vous utilisez le framework [Next.js](https://nextjs.org/), le composant racine est défini dans `pages/index.js`. Dans les exemples qui précédaient, vous avez exporté des composants racines.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La plupart des applis React utilisent des composants « jusqu'au bout ». Ça signifie que vous utiliserez des composants non seulement pour des éléments réutilisables tels que des boutons, mais aussi pour des blocs plus importants tels que des barres latérales, des listes, et au final des pages complètes ! Les composants sont un moyen pratique d'organiser le code et le balisage de l'UI, même si certains ne seront utilisés qu'une fois.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Les frameworks basés sur React](/learn/start-a-new-react-project) poussent cette logique plus loin. Plutôt que d'utiliser un fichier HTML vide et de laisser React « prendre la main » pour gérer la page avec JavaScript, ils génèrent *aussi* automatiquement le HTML de vos composants React. Ça permet à votre appli d'afficher du contenu avant même que le JavaScript ne soit chargé.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ceci dit, de nombreux sites web utilisent uniquement React pour [ajouter de l'interactivité à des pages HTML existantes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Ils ont plusieurs composants racines au lieu d'un seul pour la page entière. Vous pouvez utiliser React aussi largement — ou légèrement – que vous le souhaitez.
-You've just gotten your first taste of React! Let's recap some key points.
+Vous venez d'avoir un avant-goût de React ! Reprenons-en les points saillants.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React vous permet de créer des composants, qui sont **des éléments d'UI réutilisables pour votre appli**.
+* Dans une appli React, chaque morceau de l'UI est un composant.
+* Les composants React sont des fonctions JavaScript classiques, à ceci près que :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Leurs noms commencent toujours par une majuscule.
+ 2. Ils renvoient du balisage JSX.
-
-
-#### Export the component {/*export-the-component*/}
+#### Exporter le composant {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Ce bac à sable ne fonctionne pas, parce que le composant racine n'est pas exporté :
@@ -261,11 +259,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Essayez de le corriger vous-même avant de consulter la solution !
-Add `export default` before the function definition like so:
+Ajoutez `export default` avant la définition de la fonction, comme ceci :
@@ -286,21 +284,20 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vous vous demandez peut-être pourquoi écrire `export` seul ne suffit pas à corriger cet exemple. Vous apprendrez la différence entre `export` et `export default` dans [Importer et exporter des composants](/learn/importing-and-exporting-components).
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corriger l'instruction `return` {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Quelque chose cloche dans cette instruction `return`. Saurez-vous la corriger ?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Vous aurez peut-être une erreur *“Unexpected token”* en tentant de corriger ça. Si ça vous arrive, vérifiez que le point-virgule apparaît *après* la parenthèse fermante. Laisser le point-virgule au sein du `return ()` entraînerait une erreur.
-
```js
@@ -318,7 +315,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Vous pouvez corriger ce composant en ramenant l'instruction `return` sur une seule ligne, comme ceci :
@@ -334,16 +331,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Ou alors, enrobez le JSX renvoyé par des parenthèses qui s'ouvrent immédiatement à la suite du `return` :
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +354,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Repérer l'erreur {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Il y a un souci dans la façon dont le composant `Profile` est déclaré et utilisé. Repérez-vous l'erreur ? (Essayez de vous rappeler comment React fait la distinction entre les composants et les balises HTML classiques !)
@@ -376,7 +373,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-React component names must start with a capital letter.
+Les noms de composants React doivent commencer par une majuscule.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +426,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Votre propre composant {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Écrivez un composant à partir de zéro. Vous pouvez lui donner n'importe quel nom valide, et renvoyer le balisage de votre choix. Si vous êtes à court d'idée, vous pouvez écrire un composant `Congratulations` qui affiche `Bien joué !
`. N'oubliez pas de l'exporter !
```js
-// Write your component below!
+// Écrivez votre composant ici !
```
@@ -449,7 +446,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bien joué !
);
}
```
`, etc.
+React vous permet de combiner votre balisage et ses codes CSS et JavaScript associés pour en faire des « composants » personnalisés, **des éléments d'UI réutilisables pour votre appli**. Le code de la table des matières que vous avez vu ci-dessus pourrait devenir un composant ``, ``, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Tout comme avec les balises HTML, vous pouvez composer, ordonner et imbriquer les composants pour concevoir des pages entières. Par exemple, la page de documentation que vous êtes en train de lire est constituée de composants React :
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Et voici comment construire un composant :
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Étape 1 : exporter le composant {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Le préfixe `export default` est une [syntaxe JavaScript standard](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/export) (elle n'a rien de spécifique à React). Elle vous permet d'indiquer la fonction principale dans un fichier, de façon à ce qu'elle puisse aisément être importée par la suite depuis d'autres fichiers. (Explorez ce sujet plus en détails dans [Importer et exporter des composants](/learn/importing-and-exporting-components) !)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Étape 2 : définir la fonction {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Avec `function Profile() { }`, vous définissez une fonction JavaScript dont le nom est `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Les composants React sont des fonctions JavaScript classiques, mais **leurs noms doivent commencer par une majuscule**, sinon ils ne fonctionneront pas !
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Étape 3 : ajouter le balisage {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Le composant renvoie une balise `![]()
` avec des attributs `src` et `alt`. `![]()
` s'écrit comme en HTML, mais il s'agit en fait de JavaScript sous le capot ! Cette syntaxe s'appelle [JSX](/learn/writing-markup-with-jsx), et elle vous permet d'incorporer du balisage dans JavaScript.
-Return statements can be written all on one line, as in this component:
+Vous pouvez écrire votre renvoi de valeur en une seule ligne, comme dans ce composant :
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses :
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sans ces parenthèses, tout code qui suit un `return` seul sur sa ligne [serait ignoré](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Utiliser un composant {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+À présent que vous avez défini votre composant `Profile`, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez exporter un composant `Gallery` qui utilise plusieurs composants `Profile` :
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-### What the browser sees {/*what-the-browser-sees*/}
+### Ce que voit le navigateur {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Remarquez les différences de casse :
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` est en minuscules : React comprend qu'il s'agit d'une balise HTML.
+* `![]()
`. In the end, this is what the browser sees:
+Et `Profile` contient lui-même du HTML : `![]()
`. Au final, voici ce que voit le navigateur :
```html
- Amazing scientists
+ Scientifiques de renom
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Imbriquer et organiser les composants {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Les composants sont des fonctions JavaScript classiques, de sorte que vous pouvez définir plusieurs composants dans un même fichier. C'est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient trop encombré, vous pouvez toujours déplacer `Profile` dans un fichier à part. Vous apprendrez comment procéder très bientôt dans la [page sur les imports](/learn/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Puisque les composants `Profile` sont affichés au sein de `Gallery` (et même plusieurs fois !), on peut dire que `Gallery` est un **composant parent**, qui affiche chaque `Profile` en tant que composant « enfant ». Ça fait partie de la magie de React : vous pouvez définir un composant une seule fois, puis l'utiliser à autant d'endroits et autant de fois que vous le souhaitez.
-Components can render other components, but **you must never nest their definitions:**
+Les composants peuvent afficher d'autres composants, mais **faites bien attention à ne jamais imbriquer leurs définitions** :
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ne définissez jamais un composant au sein d’un autre composant !
function Profile() {
// ...
}
@@ -190,57 +190,55 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Le fragment de code si-dessus est [très lent et plein de bugs](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state). Définissez plutôt tous vos composants au niveau racine du module :
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Déclarez les composants au niveau racine
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Lorsqu'un composant enfant a besoin de données venant d'un parent, [passez-les en props](/learn/passing-props-to-a-component) plutôt que d'imbriquer leurs définitions.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Des composants jusqu'au bout {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Votre application React commence avec un composant « racine ». En général, il est créé automatiquement lorsque vous démarrez un nouveau projet. Par exemple, si vous utilisez [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), le composant racine est défini dans `src/App.js`. Si vous utilisez le framework [Next.js](https://nextjs.org/), le composant racine est défini dans `pages/index.js`. Dans les exemples qui précédaient, vous avez exporté des composants racines.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La plupart des applis React utilisent des composants « jusqu'au bout ». Ça signifie que vous utiliserez des composants non seulement pour des éléments réutilisables tels que des boutons, mais aussi pour des blocs plus importants tels que des barres latérales, des listes, et au final des pages complètes ! Les composants sont un moyen pratique d'organiser le code et le balisage de l'UI, même si certains ne seront utilisés qu'une fois.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Les frameworks basés sur React](/learn/start-a-new-react-project) poussent cette logique plus loin. Plutôt que d'utiliser un fichier HTML vide et de laisser React « prendre la main » pour gérer la page avec JavaScript, ils génèrent *aussi* automatiquement le HTML de vos composants React. Ça permet à votre appli d'afficher du contenu avant même que le JavaScript ne soit chargé.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ceci dit, de nombreux sites web utilisent uniquement React pour [ajouter de l'interactivité à des pages HTML existantes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Ils ont plusieurs composants racines au lieu d'un seul pour la page entière. Vous pouvez utiliser React aussi largement — ou légèrement – que vous le souhaitez.
-You've just gotten your first taste of React! Let's recap some key points.
+Vous venez d'avoir un avant-goût de React ! Reprenons-en les points saillants.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React vous permet de créer des composants, qui sont **des éléments d'UI réutilisables pour votre appli**.
+* Dans une appli React, chaque morceau de l'UI est un composant.
+* Les composants React sont des fonctions JavaScript classiques, à ceci près que :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Leurs noms commencent toujours par une majuscule.
+ 2. Ils renvoient du balisage JSX.
-
-
-#### Export the component {/*export-the-component*/}
+#### Exporter le composant {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Ce bac à sable ne fonctionne pas, parce que le composant racine n'est pas exporté :
@@ -261,11 +259,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Essayez de le corriger vous-même avant de consulter la solution !
-Add `export default` before the function definition like so:
+Ajoutez `export default` avant la définition de la fonction, comme ceci :
@@ -286,21 +284,20 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vous vous demandez peut-être pourquoi écrire `export` seul ne suffit pas à corriger cet exemple. Vous apprendrez la différence entre `export` et `export default` dans [Importer et exporter des composants](/learn/importing-and-exporting-components).
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corriger l'instruction `return` {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Quelque chose cloche dans cette instruction `return`. Saurez-vous la corriger ?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Vous aurez peut-être une erreur *“Unexpected token”* en tentant de corriger ça. Si ça vous arrive, vérifiez que le point-virgule apparaît *après* la parenthèse fermante. Laisser le point-virgule au sein du `return ()` entraînerait une erreur.
-
```js
@@ -318,7 +315,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Vous pouvez corriger ce composant en ramenant l'instruction `return` sur une seule ligne, comme ceci :
@@ -334,16 +331,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Ou alors, enrobez le JSX renvoyé par des parenthèses qui s'ouvrent immédiatement à la suite du `return` :
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +354,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Repérer l'erreur {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Il y a un souci dans la façon dont le composant `Profile` est déclaré et utilisé. Repérez-vous l'erreur ? (Essayez de vous rappeler comment React fait la distinction entre les composants et les balises HTML classiques !)
@@ -376,7 +373,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-React component names must start with a capital letter.
+Les noms de composants React doivent commencer par une majuscule.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +426,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Votre propre composant {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Écrivez un composant à partir de zéro. Vous pouvez lui donner n'importe quel nom valide, et renvoyer le balisage de votre choix. Si vous êtes à court d'idée, vous pouvez écrire un composant `Congratulations` qui affiche `Bien joué !
`. N'oubliez pas de l'exporter !
```js
-// Write your component below!
+// Écrivez votre composant ici !
```
@@ -449,7 +446,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bien joué !
);
}
```
`, ``, etc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Tout comme avec les balises HTML, vous pouvez composer, ordonner et imbriquer les composants pour concevoir des pages entières. Par exemple, la page de documentation que vous êtes en train de lire est constituée de composants React :
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Et voici comment construire un composant :
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Étape 1 : exporter le composant {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Le préfixe `export default` est une [syntaxe JavaScript standard](https://developer.mozilla.org/fr/docs/web/javascript/reference/statements/export) (elle n'a rien de spécifique à React). Elle vous permet d'indiquer la fonction principale dans un fichier, de façon à ce qu'elle puisse aisément être importée par la suite depuis d'autres fichiers. (Explorez ce sujet plus en détails dans [Importer et exporter des composants](/learn/importing-and-exporting-components) !)
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Étape 2 : définir la fonction {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Avec `function Profile() { }`, vous définissez une fonction JavaScript dont le nom est `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+Les composants React sont des fonctions JavaScript classiques, mais **leurs noms doivent commencer par une majuscule**, sinon ils ne fonctionneront pas !
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Étape 3 : ajouter le balisage {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Le composant renvoie une balise `![]()
` avec des attributs `src` et `alt`. `![]()
` s'écrit comme en HTML, mais il s'agit en fait de JavaScript sous le capot ! Cette syntaxe s'appelle [JSX](/learn/writing-markup-with-jsx), et elle vous permet d'incorporer du balisage dans JavaScript.
-Return statements can be written all on one line, as in this component:
+Vous pouvez écrire votre renvoi de valeur en une seule ligne, comme dans ce composant :
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses :
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Sans ces parenthèses, tout code qui suit un `return` seul sur sa ligne [serait ignoré](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi) !
-## Using a component {/*using-a-component*/}
+## Utiliser un composant {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+À présent que vous avez défini votre composant `Profile`, vous pouvez l'imbriquer dans d'autres composants. Par exemple, vous pouvez exporter un composant `Gallery` qui utilise plusieurs composants `Profile` :
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-### What the browser sees {/*what-the-browser-sees*/}
+### Ce que voit le navigateur {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Remarquez les différences de casse :
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` est en minuscules : React comprend qu'il s'agit d'une balise HTML.
+* `![]()
`. In the end, this is what the browser sees:
+Et `Profile` contient lui-même du HTML : `![]()
`. Au final, voici ce que voit le navigateur :
```html
- Amazing scientists
+ Scientifiques de renom
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Imbriquer et organiser les composants {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+Les composants sont des fonctions JavaScript classiques, de sorte que vous pouvez définir plusieurs composants dans un même fichier. C'est pratique lorsque les composants sont relativement petits ou étroitement liés les uns aux autres. Si ce fichier devient trop encombré, vous pouvez toujours déplacer `Profile` dans un fichier à part. Vous apprendrez comment procéder très bientôt dans la [page sur les imports](/learn/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Puisque les composants `Profile` sont affichés au sein de `Gallery` (et même plusieurs fois !), on peut dire que `Gallery` est un **composant parent**, qui affiche chaque `Profile` en tant que composant « enfant ». Ça fait partie de la magie de React : vous pouvez définir un composant une seule fois, puis l'utiliser à autant d'endroits et autant de fois que vous le souhaitez.
-Components can render other components, but **you must never nest their definitions:**
+Les composants peuvent afficher d'autres composants, mais **faites bien attention à ne jamais imbriquer leurs définitions** :
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Ne définissez jamais un composant au sein d’un autre composant !
function Profile() {
// ...
}
@@ -190,57 +190,55 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Le fragment de code si-dessus est [très lent et plein de bugs](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state). Définissez plutôt tous vos composants au niveau racine du module :
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Déclarez les composants au niveau racine
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Lorsqu'un composant enfant a besoin de données venant d'un parent, [passez-les en props](/learn/passing-props-to-a-component) plutôt que d'imbriquer leurs définitions.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Des composants jusqu'au bout {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+Votre application React commence avec un composant « racine ». En général, il est créé automatiquement lorsque vous démarrez un nouveau projet. Par exemple, si vous utilisez [CodeSandbox](https://codesandbox.io/) ou [Create React App](https://create-react-app.dev/), le composant racine est défini dans `src/App.js`. Si vous utilisez le framework [Next.js](https://nextjs.org/), le composant racine est défini dans `pages/index.js`. Dans les exemples qui précédaient, vous avez exporté des composants racines.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La plupart des applis React utilisent des composants « jusqu'au bout ». Ça signifie que vous utiliserez des composants non seulement pour des éléments réutilisables tels que des boutons, mais aussi pour des blocs plus importants tels que des barres latérales, des listes, et au final des pages complètes ! Les composants sont un moyen pratique d'organiser le code et le balisage de l'UI, même si certains ne seront utilisés qu'une fois.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+[Les frameworks basés sur React](/learn/start-a-new-react-project) poussent cette logique plus loin. Plutôt que d'utiliser un fichier HTML vide et de laisser React « prendre la main » pour gérer la page avec JavaScript, ils génèrent *aussi* automatiquement le HTML de vos composants React. Ça permet à votre appli d'afficher du contenu avant même que le JavaScript ne soit chargé.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Ceci dit, de nombreux sites web utilisent uniquement React pour [ajouter de l'interactivité à des pages HTML existantes](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). Ils ont plusieurs composants racines au lieu d'un seul pour la page entière. Vous pouvez utiliser React aussi largement — ou légèrement – que vous le souhaitez.
-You've just gotten your first taste of React! Let's recap some key points.
+Vous venez d'avoir un avant-goût de React ! Reprenons-en les points saillants.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React vous permet de créer des composants, qui sont **des éléments d'UI réutilisables pour votre appli**.
+* Dans une appli React, chaque morceau de l'UI est un composant.
+* Les composants React sont des fonctions JavaScript classiques, à ceci près que :
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. Leurs noms commencent toujours par une majuscule.
+ 2. Ils renvoient du balisage JSX.
-
-
-#### Export the component {/*export-the-component*/}
+#### Exporter le composant {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Ce bac à sable ne fonctionne pas, parce que le composant racine n'est pas exporté :
@@ -261,11 +259,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Essayez de le corriger vous-même avant de consulter la solution !
-Add `export default` before the function definition like so:
+Ajoutez `export default` avant la définition de la fonction, comme ceci :
@@ -286,21 +284,20 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Vous vous demandez peut-être pourquoi écrire `export` seul ne suffit pas à corriger cet exemple. Vous apprendrez la différence entre `export` et `export default` dans [Importer et exporter des composants](/learn/importing-and-exporting-components).
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Corriger l'instruction `return` {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+Quelque chose cloche dans cette instruction `return`. Saurez-vous la corriger ?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Vous aurez peut-être une erreur *“Unexpected token”* en tentant de corriger ça. Si ça vous arrive, vérifiez que le point-virgule apparaît *après* la parenthèse fermante. Laisser le point-virgule au sein du `return ()` entraînerait une erreur.
-
```js
@@ -318,7 +315,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+Vous pouvez corriger ce composant en ramenant l'instruction `return` sur une seule ligne, comme ceci :
@@ -334,16 +331,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Ou alors, enrobez le JSX renvoyé par des parenthèses qui s'ouvrent immédiatement à la suite du `return` :
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +354,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Repérer l'erreur {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+Il y a un souci dans la façon dont le composant `Profile` est déclaré et utilisé. Repérez-vous l'erreur ? (Essayez de vous rappeler comment React fait la distinction entre les composants et les balises HTML classiques !)
@@ -376,7 +373,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scientifiques de renom
-React component names must start with a capital letter.
+Les noms de composants React doivent commencer par une majuscule.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -429,14 +426,14 @@ img { margin: 0 10px 10px 0; }
-#### Your own component {/*your-own-component*/}
+#### Votre propre composant {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Écrivez un composant à partir de zéro. Vous pouvez lui donner n'importe quel nom valide, et renvoyer le balisage de votre choix. Si vous êtes à court d'idée, vous pouvez écrire un composant `Congratulations` qui affiche `Bien joué !
`. N'oubliez pas de l'exporter !
```js
-// Write your component below!
+// Écrivez votre composant ici !
```
@@ -449,7 +446,7 @@ Write a component from scratch. You can give it any valid name and return any ma
```js
export default function Congratulations() {
return (
- Good job!
+ Bien joué !
);
}
```
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Mais si votre balisage n'est pas entièrement sur la même ligne que le mot-clé `return`, vous aurez intérêt à l'enrober de parenthèses :
```js
return (
@@ -114,13 +114,13 @@ return (
Amazing scientists
+Scientifiques de renom
Amazing scientists
+Scientifiques de renom
);
}
@@ -357,9 +354,9 @@ img { height: 180px; }