Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

L10n: new React DOM components #629

Merged
merged 5 commits into from
Feb 21, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/form.md
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ Le [composant natif `<form>` du navigateur](https://developer.mozilla.org/fr/doc

### `<form>` {/*form*/}

Pour créer des formulaires interactifs, utilisez le [composant natif `<input>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form).
Pour créer des formulaires interactifs, utilisez le [composant natif `<form>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/form).

```js
<form action={search}>
Expand Down
132 changes: 67 additions & 65 deletions src/content/reference/react-dom/components/link.md

Large diffs are not rendered by default.

52 changes: 26 additions & 26 deletions src/content/reference/react-dom/components/meta.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@ canary: true

<Canary>

React's extensions to `<meta>` are currently only available in React's canary and experimental channels. In stable releases of React `<meta>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
Les extensions de React à `<meta>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<meta>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).

</Canary>


<Intro>

The [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta) lets you add metadata to the document.
Le [composant natif `<meta>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/meta) vous permet d'ajouter des métadonnées au document ou à des éléments spécifiques.

```js
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
Expand All @@ -24,51 +24,51 @@ The [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/do

---

## Reference {/*reference*/}
## Référence {/*reference*/}

### `<meta>` {/*meta*/}

To add document metadata, render the [built-in browser `<meta>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta). You can render `<meta>` from any component and React will always place the corresponding DOM element in the document head.
Pour ajouter des métadonnées au document, utilisez le [composant natif `<meta>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/meta). Vous pouvez utiliser `<meta>` depuis n'importe quel composant et React placera systématiquement l'élément DOM correspondant dans l'en-tête (`head`) du document.

```js
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
```

[See more examples below.](#usage)
[Voir d'autres exemples plus bas](#usage).

#### Props {/*props*/}

`<meta>` supports all [common element props.](/reference/react-dom/components/common#props)
`<meta>` prend en charge toutes les [props communes aux éléments](/reference/react-dom/components/common#props).

It should have *exactly one* of the following props: `name`, `httpEquiv`, `charset`, `itemProp`. The `<meta>` component does something different depending on which of these props is specified.
Il est censé utiliser *une et une seule* des props suivantes : `name`, `httpEquiv`, `charset` ou `itemProp`. Le composant `<meta>` a un comportement distinct selon la prop que vous utilisez.

* `name`: a string. Specifies the [kind of metadata](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name) to be attached to the document.
* `charset`: a string. Specifies the character set used by the document. The only valid value is `"utf-8"`.
* `httpEquiv`: a string. Specifies a directive for processing the document.
* `itemProp`: a string. Specifies metadata about a particular item within the document rather than the document as a whole.
* `content`: a string. Specifies the metadata to be attached when used with the `name` or `itemProp` props or the behavior of the directive when used with the `httpEquiv` prop.
* `name` : une chaîne de caractères. Indique le [type de métadonnée](https://developer.mozilla.org/fr/docs/Web/HTML/Element/meta/name) à associer au document.
* `charset` : une chaîne de caractères. Indique le jeu de caractères à utiliser pour le document. La seule valeur acceptable est `"utf-8"`.
* `httpEquiv` : une chaîne de caractères. Fournit une directive de traitement du document.
* `itemProp` : une chaîne de caractères. Associe la métadonnée à un élément spécifique du document plutôt qu'au document dans son ensemble.
* `content` : une chaîne de caractères. Fournit la valeur de la métadonnée lorsque la prop utilisée est `name` ou `itemProp`, ou le comportement de la directive lorsque la prop `httpEquiv` est utilisée.

#### Special rendering behavior {/*special-rendering-behavior*/}
#### Comportement spécifique de rendu {/*special-rendering-behavior*/}

React will always place the DOM element corresponding to the `<meta>` component within the document’s `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<meta>` to exist within the DOM, yet it’s convenient and keeps things composable if a component representing a specific page can render `<meta>` components itself.
React placera toujours l'élément DOM correspondant au composant `<meta>` dans le `<head>` du document, peu importe où il figure dans l'arborescence React. Le `<head>` est le seul endroit valide pour un `<link>` dans le DOM, mais il est plus confortable, et préférable en termes de composition, qu'un composant représentant une page donnée puisse produire les composants `<link>` lui-même.

There is one exception to this: if `<meta>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesn’t represent metadata about the document but rather metadata about a specific part of the page.
Il y a toutefois une exception : si le `<meta>` a une prop [`itemProp`](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/itemprop), aucun comportement spécifique n'est mis en place, parce que dans un tel cas la métadonnée ne s'applique pas au document mais à une partie spécifique de la page.

---

## Usage {/*usage*/}
## Utilisation {/*usage*/}

### Annotating the document with metadata {/*annotating-the-document-with-metadata*/}
### Annoter le document avec des métadonnées {/*annotating-the-document-with-metadata*/}

You can annotate the document with metadata such as keywords, a summary, or the author’s name. React will place this metadata within the document `<head>` regardless of where in the React tree it is rendered.
Vous pouvez annoter le document avec des métadonnées telles que des mots-clés, un résumé, ou encore l'identité de son auteur·e. React placera ces métadonnées dans le `<head>`, peu importe où `<meta>` figure dans l'arborescence React.

```html
<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />
<meta name="description" content="Référence API pour le composant <meta> de React DOM" />
```

You can render the `<meta>` component from any component. React will put a `<meta>` DOM node in the document `<head>`.
Vous pouvez utiliser le composant `<meta>` depuis n'importe quel emplacement. React injectera toujours le nœud DOM correspodant dans le `<head>` du document.

<SandpackWithHTMLOutput>

Expand All @@ -79,8 +79,8 @@ export default function SiteMapPage() {
return (
<ShowRenderedHTML>
<meta name="keywords" content="React" />
<meta name="description" content="A site map for the React website" />
<h1>Site Map</h1>
<meta name="description" content="Un plan du site web de React" />
<h1>Plan du site</h1>
<p>...</p>
</ShowRenderedHTML>
);
Expand All @@ -89,14 +89,14 @@ export default function SiteMapPage() {

</SandpackWithHTMLOutput>

### Annotating specific items within the document with metadata {/*annotating-specific-items-within-the-document-with-metadata*/}
### Annoter des éléments spécifiques du document avec des métadonnées {/*annotating-specific-items-within-the-document-with-metadata*/}

You can use the `<meta>` component with the `itemProp` prop to annotate specific items within the document with metadata. In this case, React will *not* place these annotations within the document `<head>` but will place them like any other React component.
Vous pouvez utiliser le composant `<meta>` avec la prop `itemProp` pour annoter des éléments spécifiques avec des métadonnées. Dans de tels cas, React *ne placera pas* ces métadonnées dans le `<head>`, mais les traitera comme n'importe quel autre composant React.

```js
<section itemScope>
<h3>Annotating specific items</h3>
<meta itemProp="description" content="API reference for using <meta> with itemProp" />
<h3>Annoter des éléments spécifiques</h3>
<meta itemProp="description" content="Référence API pour l’utilisation de <meta> avec itemProp" />
<p>...</p>
</section>
```
Loading
Loading