Skip to content
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
Binary file removed public/images/team/dave-mccabe.jpg
Binary file not shown.
Binary file removed public/images/team/lunaruan.jpg
Binary file not shown.
Binary file removed public/images/team/mengdi-chen.jpg
Binary file not shown.
Binary file removed public/images/team/sean-keegan.jpg
Binary file not shown.
4 changes: 2 additions & 2 deletions src/components/Layout/HomeContent.js
Original file line number Diff line number Diff line change
Expand Up @@ -1672,8 +1672,8 @@ function LikeButton({video}) {
<button
data-hover="LikeButton"
className={cn(
'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
isLiked && 'text-red-50'
'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
isLiked ? 'text-red-50' : 'text-tertiary'
)}
aria-label={isLiked ? 'Retirer' : 'Enregistrer'}
onClick={() => {
Expand Down
3 changes: 1 addition & 2 deletions src/components/Layout/Toc.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
<ul className="space-y-2 pb-16">
{headings.length > 0 &&
headings.map((h, i) => {
if (h.url == null) {
// TODO: only log in DEV
if (!h.url && process.env.NODE_ENV === 'development') {
console.error('Heading does not have URL');
}
return (
Expand Down
10 changes: 1 addition & 9 deletions src/components/Seo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,19 +21,12 @@ const deployedTranslations = [
'en',
'zh-hans',
'es',
'fr',
// We'll add more languages when they have enough content.
// Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
// It must be the same between all translations.
];

let shouldPreventIndexing = false;
if (
siteConfig.languageCode !== 'en' &&
!deployedTranslations.includes(siteConfig.languageCode)
) {
shouldPreventIndexing = true;
}

function getDomain(languageCode: string): string {
const subdomain = languageCode === 'en' ? '' : languageCode + '.';
return subdomain + 'react.dev';
Expand Down Expand Up @@ -69,7 +62,6 @@ export const Seo = withRouter(
href={canonicalUrl.replace(siteDomain, getDomain('en'))}
hrefLang="x-default"
/>
{shouldPreventIndexing && <meta name="robots" content="noindex" />}
{deployedTranslations.map((languageCode) => (
<link
key={'alt-' + languageCode}
Expand Down
5 changes: 4 additions & 1 deletion src/content/community/acknowledgements.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Christoph Nakazawa](https://github.com/cpojer)
* [Christopher Chedeau](https://github.com/vjeux)
* [Clement Hoang](https://github.com/clemmy)
* [Dave McCabe](https://github.com/davidmccabe)
* [Dominic Gannaway](https://github.com/trueadm)
* [Flarnie Marchan](https://github.com/flarnie)
* [Jason Quense](https://github.com/jquense)
Expand All @@ -33,8 +34,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Josh Duck](https://github.com/joshduck)
* [Joe Critchley](https://github.com/joecritch)
* [Jeff Morrison](https://github.com/jeffmo)
* [Luna Ruan](https://github.com/lunaruan)
* [Keyan Zhang](https://github.com/keyz)
* [Marco Salazar](https://github.com/salazarm)
* [Mengdi Chen](https://github.com/mondaychen)
* [Nat Alison](https://github.com/tesseralis)
* [Nathan Hunzaker](https://github.com/nhunzaker)
* [Nicolas Gallagher](https://github.com/necolas)
Expand All @@ -45,7 +48,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
* [Robert Zhang](https://github.com/robertzhidealx)
* [Sander Spies](https://github.com/sanderspies)
* [Sasha Aickin](https://github.com/aickin)
* [Seth Webster](https://github.com/sethwebster)
* [Sean Keegan](https://github.com/seanryankeegan)
* [Sophia Shoemaker](https://github.com/mrscobbler)
* [Sunil Pai](https://github.com/threepointone)
* [Tim Yung](https://github.com/yungsters)
Expand Down
16 changes: 0 additions & 16 deletions src/content/community/team.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Dans a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint. Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
</TeamMember>

<TeamMember name="Dave McCabe" permalink="dave-mccabe" photo="/images/team/dave-mccabe.jpg" github="davidmccabe" twitter="mcc_abe" title="Ingénieur chez Meta">
Ingénieur de métier et homme d'extérieur par nature, David a longtemps innové dans le domaine de la programmation-en-bronzant. Lorsqu'il ne surprend pas ses collègues avec ses arrière-plans en pleine nature lors des visioconférences, il aime jouer de la guitare (dans des prairies ensoleillées, ça va de soi) et faire des arts martiaux (en intérieur pour le moment, il faut qu'il y travaille).
</TeamMember>

<TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" title="Manager d’ingénieurs chez Meta">
Eli a commencé la programmation après avoir été suspendu au collège pour piratage. Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie.
</TeamMember>
Expand All @@ -54,10 +50,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
La carrière de développeuse de Lauren a atteint son sommet lorsqu'elle a découvert la balise `<marquee>`. Depuis, elle cherche à retrouver cette extase. Lorsqu'elle n'est pas en train d'ajouter des bugs à React, elle aime balancer des mèmes audacieux dans les forums internes, jouer à beaucoup trop de jeux vidéos avec l'amour de sa vie, et son chien Zelda.
</TeamMember>

<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Ingénieure indépendante">
Luna a appris à programmer pour faire des jeux vidéos. Au lieu de quoi elle s'est retrouvée à bosser sur l'appli web de Pinterest, et désormais sur React lui-même. Luna n'a plus envie de faire des jeux vidéos, mais elle compte faire de l'écriture créative si un jour elle s'ennuie.
</TeamMember>

<TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" title="Ingénieure chez Meta">
Luna a appris les bases de Python à 6 ans grâce à son père. Depuis plus rien ne l'arrête. Luna a bien l'intention d'être une Génération Z, et le chemin du succès passe par la défense de l'environnement, du jardinage urbain et beaucoup de temps précieux passé avec Voo-Doo (voir photo).
</TeamMember>
Expand All @@ -66,10 +58,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Matt est tombé par hasard dans le code, et depuis il adore créer grâce à des communautés des trucs qu'on ne peut pas créer tout seuls. Avant React, il a travaillé sur YouTube, l'Assistant Google, Fuchsia, Google Cloud AI et Evernote. Lorsqu'il n'est pas en train d'améliorer l'outillage des développeurs il aime la montagne, le jazz, et passer du temps en famille.
</TeamMember>

<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Ingénieure chez Meta">
Alors qu'elle bossait sur son diplôme en Arts Numériques, Mengdi la ramenait avec ses compétences front-end parce que ses CSS marchaient nickel même sur IE6. Puis React a ouvert une nouvelle porte pour elle dans le monde de la programmation, et depuis elle rêvait d'intégrer l'équipe React. Hors du boulot, elle est généralement en train de courir après ses deux enfants ou de collectionner des recettes étranges.
</TeamMember>

<TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Ingénieure chez Meta">
Mofei a commencé à programmer dès qu'elle a réalisé que ça pouvait l'aider à tricher aux jeux vidéos. Ses études se sont concentrées sur les systèmes d'exploitation (OS), mais elle aime aujourd'hui triturer React. Hors du boulot, elle aime déboguer des problèmes d'escalade de bloc et planifier ses prochaines randonnées.
</TeamMember>
Expand All @@ -86,10 +74,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
Sathya a détesté le *Dragon Book* durant ses études, et pourtant a fini par consacrer sa carrière aux compilateurs. Lorsqu'il n'est pas en train de compiler des composants React, soit il boit du café soit il mange encore un Dosa.
</TeamMember>

<TeamMember name="Sean Keegan" permalink="sean-keegan" photo="/images/team/sean-keegan.jpg" github="seanryankeegan" twitter="DevRelSean" title="Developer Advocate chez Meta">
Après une première carrière comme prof de maths, Sean s'est souvenu de cette petite intro à l'informatique qu'il avait dû suivre en pré-requis et s'est dit « Eh, c'était pas mal ! ». Un bootcamp de code et quelques boulots techniques plus tard, Sean a découvert l'évangélisme développeurs *(developer advocacy, NdT)* et s'y consacre depuis lors. Hors du boulot, Sean aime l'ultimate, les jeux vidéos, et chercher (mais rarement appliquer) comment mieux s'occuper de ses plantes domestiques.
</TeamMember>

<TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Ingénieur chez Vercel">
Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard. La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React.
</TeamMember>
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/passing-props-to-a-component.md
Original file line number Diff line number Diff line change
Expand Up @@ -460,7 +460,7 @@ export default function Gallery() {
</li>
<li>
<b>A découvert : </b>
le Polonium (élément)
le Polonium (élément chimique)
</li>
</ul>
</section>
Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/removing-effect-dependencies.md
Original file line number Diff line number Diff line change
Expand Up @@ -927,7 +927,7 @@ function ChatRoom() {

useEffect(() => {
const options = createOptions();
const connection = createConnection();
const connection = createConnection(options);
connection.connect();
return () => connection.disconnect();
}, []); // ✅ Toutes les dépendances sont déclarées
Expand Down Expand Up @@ -1614,7 +1614,7 @@ label, button { display: block; margin-bottom: 5px; }

Votre Effet est ré-exécuté parce qu'il dépend de l'objet `options`. Les objets sont susceptibles d'être recréés par inadvertance, et vous devriez essayer autant que possible de les éviter comme dépendances pour vos Effets.

Le correctif le moins impactant consiste à lire `roomId` et `serverUrl` directement hors de l'Effet, et de faire que l'Effet dépende de ces valeurs primitives (qui ne peuvent pas changer par inadvertance). Au sein de l'Effet, créez un objet et passez-le à `createConnection` :
Le correctif le moins impactant consiste à lire `roomId` et `serverUrl` directement hors de l'Effet, et de faire que l'Effet dépende de ces valeurs primitives (qui ne peuvent pas changer par inadvertance). Au sein de l'Effet, créez un objet et passez-le à `createConnection` :

<Sandpack>

Expand Down
2 changes: 0 additions & 2 deletions src/content/learn/state-a-components-memory.md
Original file line number Diff line number Diff line change
Expand Up @@ -1486,8 +1486,6 @@ Voici une version corrigée qui utilise une variable `name` classique, déclaré
<Sandpack>

```js
import { useState } from 'react';

export default function FeedbackForm() {
function handleClick() {
const name = prompt('Comment vous appelez-vous ?');
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/state-as-a-snapshot.md
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ Lorsque React refait le rendu d'un composant :

1. React rappelle votre fonction.
2. Votre fonction renvoie un nouvel instantané JSX.
3. React met alors à jour l'écran pour refléter l'instantané que vous venez de renvoyer.
3. React met alors à jour l'écran pour refléter l'instantané que votre fonction vient de renvoyer.

<IllustrationBlock sequential>
<Illustration caption="React appelle la fonction" src="/images/docs/illustrations/i_render1.png" />
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/synchronizing-with-effects.md
Original file line number Diff line number Diff line change
Expand Up @@ -768,7 +768,7 @@ Ce n’est pas le rendu qui déclenche l’achat, c’est une interaction spéci
}
```

**Ça illustre bien le fait que si le remontage casse la logique de votre application, il s’agit probablement d’un bug dans votre code.** Du point de vue de l’utilisateur, visiter la page ne devrait en rien différer de la visiter, puis cliquer un lien, puis y revenir. React vérifie que vos composants obéissent à ce principe en les remontant une fois lors du développement.
**Ça illustre bien le fait que si le remontage casse la logique de votre application, il s’agit probablement d’un bug dans votre code.** Du point de vue d’un utilisateur, visiter la page ne devrait en rien différer de la visiter, puis cliquer un lien, puis y revenir. React vérifie que vos composants obéissent à ce principe en les remontant une fois lors du développement.

## Tous ensemble cette fois {/*putting-it-all-together*/}

Expand Down
6 changes: 3 additions & 3 deletions src/content/reference/react-dom/components/common.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,11 +100,11 @@ Ces props standard du DOM sont également prises en charge pour tous les composa
* `onFocusCapture` : une version de `onFocus` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
* [`onGotPointerCapture`](https://developer.mozilla.org/fr/docs/Web/API/Element/gotpointercapture_event) : un [gestionnaire d'événement `PointerEvent`](#pointerevent-handler). Cet événement est déclenché lorsqu'un élément capture programmatiquement le pointeur.
* `onGotPointerCaptureCapture` : une version de `onGotPointerCapture` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
* [`onKeyDown`](https://developer.mozilla.org/fr/docs/Web/API/Element/keydown_event) : un [gestionnaire d'événement `KeyboardEvent` handler](#pointerevent-handler). Cet événement est déclenché quand une touche est pressée.
* [`onKeyDown`](https://developer.mozilla.org/fr/docs/Web/API/Element/keydown_event) : un [gestionnaire d'événement `KeyboardEvent` handler](#keyboardevent-handler). Cet événement est déclenché quand une touche est pressée.
* `onKeyDownCapture` : une version de `onKeyDown` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
* [`onKeyPress`](https://developer.mozilla.org/fr/docs/Web/API/Element/keypress_event) : un [gestionnaire d'événement `KeyboardEvent`](#pointerevent-handler). Il est déprécié. Privilégiez `onKeyDown` ou `onBeforeInput`.
* [`onKeyPress`](https://developer.mozilla.org/fr/docs/Web/API/Element/keypress_event) : un [gestionnaire d'événement `KeyboardEvent`](#keyboardevent-handler). Il est déprécié. Privilégiez `onKeyDown` ou `onBeforeInput`.
* `onKeyPressCapture` : une version de `onKeyPress` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
* [`onKeyUp`](https://developer.mozilla.org/fr/docs/Web/API/Element/keyup_event) : un [gestionnaire d'événement `KeyboardEvent`](#pointerevent-handler). Cet événement est déclenché quand une touche est relâchée.
* [`onKeyUp`](https://developer.mozilla.org/fr/docs/Web/API/Element/keyup_event) : un [gestionnaire d'événement `KeyboardEvent`](#keyboardevent-handler). Cet événement est déclenché quand une touche est relâchée.
* `onKeyUpCapture` : une version de `onKeyUp` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
* [`onLostPointerCapture`](https://developer.mozilla.org/docs/Web/API/Element/lostpointercapture_event) : un [gestionnaire d'événement `PointerEvent`](#pointerevent-handler). Cet événement est déclenché quand un élément cesse de capturer le pointeur.
* `onLostPointerCaptureCapture` : une version de `onLostPointerCapture` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ function ChatRoom({ roomId }) {

* Si certaines de vos dépendances sont des objets ou fonctions définies au sein de votre composant, il existe un risque qu'elles **entraînent des exécutions superflues de votre Effet**. Pour corriger ça, retirez les dépendances superflues sur des [objets](#removing-unnecessary-object-dependencies) et [fonctions](#removing-unnecessary-function-dependencies). Vous pouvez aussi [extraire les mises à jour d'état](#updating-state-based-on-previous-state-from-an-effect) et la [logique non réactive](#reading-the-latest-props-and-state-from-an-effect) hors de votre Effet.

* Si votre Effet ne découlait pas d'une interaction (telle qu'un clic), React laissera le navigateur **rafraîchir l'affichage à l'écran avant d'exécuter votre Effet**. Si votre Effet a des aspects visuels (par exemple, il positionne une infobulle) et que le retard est perceptible (par exemple, l'affichage vacille), remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).
* Si votre Effet ne découlait pas d'une interaction (telle qu'un clic), React laissera généralement le navigateur **rafraîchir l'affichage à l'écran avant d'exécuter votre Effet**. Si votre Effet a des aspects visuels (par exemple, il positionne une infobulle) et que le retard est perceptible (par exemple, l'affichage vacille), remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).

* Même si votre Effet est déclenché par une interaction (telle qu'un clic), **le navigateur est susceptible de rafraîchir l'affichage avant d'avoir traité les mises à jour d'état au sein de votre Effet**. C'est généralement ce que vous souhaitez. Cependant, si vous devez empêcher le navigateur de rafraîchir l'affichage tout de suite, remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).

Expand Down