Merge pull request #625 from reactjs/sync-5d2f7105

Sync with react.dev @ 5d2f710

Author: tdd

public/images/team/noahlemen.jpg

@@ -331,7 +331,7 @@ export function Footer() {
           <FooterLink href="https://opensource.fb.com/legal/terms/">
             Mentions légales
           </FooterLink>
-          <div className="flex flex-row mt-8 gap-x-2">
+          <div className="flex flex-row items-center mt-8 gap-x-2">
             <ExternalLink
               aria-label="React sur Facebook"
               href="https://www.facebook.com/react"

src/components/Layout/Footer.tsx

@@ -18,17 +18,17 @@ function replaceArgs(
 /**
  * Sindre Sorhus <https://sindresorhus.com>
  * Released under MIT license
- * https://github.com/sindresorhus/linkify-urls/blob/edd75a64a9c36d7025f102f666ddbb6cf0afa7cd/index.js#L4C25-L4C137
+ * https://github.com/sindresorhus/linkify-urls/blob/b2397096df152e2f799011f7a48e5f73b4bf1c7e/index.js#L5C1-L7C1
  *
  * The regex is used to extract URL from the string for linkify.
  */
-const urlRegex =
-  /((?<!\+)https?:\/\/(?:www\.)?(?:[-\w.]+?[.@][a-zA-Z\d]{2,}|localhost)(?:[-\w.:%+~#*$!?&/=@]*?(?:,(?!\s))*?)*)/g;
+const urlRegex = () =>
+  /((?:https?(?::\/\/))(?:www\.)?(?:[a-zA-Z\d-_.]+(?:(?:\.|@)[a-zA-Z\d]{2,})|localhost)(?:(?:[-a-zA-Z\d:%_+.~#!?&//=@]*)(?:[,](?![\s]))*)*)/g;
 
 // When the message contains a URL (like https://fb.me/react-refs-must-have-owner),
 // make it a clickable link.
 function urlify(str: string): React.ReactNode[] {
-  const segments = str.split(urlRegex);
+  const segments = str.split(urlRegex());
 
   return segments.map((message, i) => {
     if (i % 2 === 1) {

src/components/MDX/ErrorDecoder.tsx

@@ -35,6 +35,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
 * [Luna Ruan](https://github.com/lunaruan)
+* [Kathryn Middleton](https://github.com/kmiddleton14)
 * [Keyan Zhang](https://github.com/keyz)
 * [Marco Salazar](https://github.com/salazarm)
 * [Mengdi Chen](https://github.com/mondaychen)
@@ -46,6 +47,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Philipp Spiess](https://github.com/philipp-spiess)
 * [Rachel Nabors](https://github.com/rachelnabors)
 * [Robert Zhang](https://github.com/robertzhidealx)
+* [Samuel Susla](https://github.com/sammy-SC)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
 * [Sean Keegan](https://github.com/seanryankeegan)

src/content/community/acknowledgements.md

@@ -10,6 +10,11 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse
 
 ## Conférences à venir {/*upcoming-conferences*/}
 
+### React Summit 2024 {/*react-summit-2024*/}
+June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)
+
+[Site web](https://reactsummit.com/) - [Twitter](https://twitter.com/reactsummit) - [Vidéos](https://portal.gitnation.org/)
+
 ### React Paris 2024 {/*react-paris-2024*/}
 March 22, 2024. In-person in Paris, France + Remote (hybrid)
 
@@ -20,6 +25,11 @@ April 19 - 20, 2024. In-person in Miami, FL, USA
 
 [Site web](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
 
+### Epic Web Conf 2024 {/*epic-web-2024*/}
+April 10 - 11, 2024. In-person in Park City, UT, USA
+
+[Site web](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)
+
 ### App.js Conf 2024 {/*appjs-conf-2024*/}
 May 22 - 24, 2024. In-person in Kraków, Poland + remote
 

src/content/community/conferences.md

@@ -42,10 +42,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Josh a étudié les Mathématiques et découvert la programmation pendant ses études.  Son premier boulot de développeur professionnel consistait à calculer des taux d'assurance dans Microsoft Excel, ce parangon de Programmation Réactive, ce qui explique probablement pourquoi il bosse désormais sur React. Entre les deux Josh a été contributeur, manager voire directeur dans quelques startups.  Hors du boulot, il aime se lancer des défis de cuisine.
 </TeamMember>
 
-<TeamMember name="Kathryn Middleton" permalink="kathryn-middleton" photo="/images/team/kathryn-middleton.jpg" github="kmiddleton14" twitter="kmiddleton14" title="Manager d’ingénieurs chez Meta">
-    Kathryn a d'abord découvert le développement web parce qu'elle voulait que sa page myspace ait l'air cool.  Elle s'est retrouvée à faire des études d'informatique pour ensuite rapidement devenir fan de React en ajoutant des fonctionnalités au sein de l'équipe d'Instagram.com.  Hors du boulot elle adore le ping-pong, enseigner le vélo de fitness intensif *(spinning, NdT)* et acheter des plantes.
-</TeamMember>
-
 <TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" personal="no.lol" title="Ingénieure chez Meta">
     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>
@@ -62,12 +58,12 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     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>
 
-<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" personal="rickhanlon.codes" title="Ingénieur chez Meta">
-    Ricky a étudié les maths théoriques puis s'est retrouvé on ne sait comment dans l'équipe React Native quelques années avant de rejoindre l'équipe React. Lorsqu'il n'est pas en train de coder, vous le trouverez à faire du snowboard, du vélo, de l'escalade, du golf, ou à fermer les tickets GitHub qui violent le gabarit demandé.
+<TeamMember name="Noah Lemen" permalink="noah-lemen" photo="/images/team/noahlemen.jpg" github="noahlemen" twitter="noahlemen" threads="noahlemen" personal="noahle.men" title="Ingénieur chez Meta">
+    Noah a commencé à s'intéresser à la programmation d'UI lors de ses études en technologies musicales à NYU. Chez Meta, il a travaillé sur des outils internes, des navigateurs, la performance web, et se concentre actuellement sur React.  Quand il n'est pas au boulot, Noah est généralement en train de triturer des synthétiseurs ou de passer du temps avec son chat.
 </TeamMember>
 
-<TeamMember name="Samuel Susla" permalink="samuel-susla" photo="/images/team/sam.jpg" github="sammy-SC" twitter="SamuelSusla" threads="samuelsusla" title="Ingénieur chez Meta">
-    Samuel a commencé à s'intéresser à la programmation avec le film Matrix. Encore aujourd'hui, Matrix est son économiseur d'écran. Avant de travailler sur React, il se concentrait sur l'écriture d'applis iOS.  Quand il ne bosse pas, Samuel aime faire du beach volley, du squash, du badminton, et passer du temps en famille.
+<TeamMember name="Rick Hanlon" permalink="rick-hanlon" photo="/images/team/rickhanlonii.jpg" github="rickhanlonii" twitter="rickhanlonii" threads="rickhanlonii" personal="rickhanlon.codes" title="Ingénieur chez Meta">
+    Ricky a étudié les maths théoriques puis s'est retrouvé on ne sait comment dans l'équipe React Native quelques années avant de rejoindre l'équipe React. Lorsqu'il n'est pas en train de coder, vous le trouverez à faire du snowboard, du vélo, de l'escalade, du golf, ou à fermer les tickets GitHub qui violent le gabarit demandé.
 </TeamMember>
 
 <TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Ingénieur chez Meta">

src/content/community/team.md

@@ -645,7 +645,6 @@ Les tableaux sont un autre type d’objet modifiable en JavaScript que vous pouv
 ```js
 import { useState } from 'react';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },
@@ -713,7 +712,6 @@ Si la copie de tableaux dans le code devient fastidieuse, vous pouvez utiliser u
 import { useState } from 'react';
 import { useImmer } from 'use-immer';
 
-let nextId = 3;
 const initialList = [
   { id: 0, title: 'Big Bellies', seen: false },
   { id: 1, title: 'Lunar Landscape', seen: false },

src/content/learn/adding-interactivity.md

@@ -485,12 +485,26 @@ function FilterableProductTable({ products }) {
 
 Au sein de `SearchBar`, ajoutez des gestionnaires d'événements `onChange` à vos champs et utilisez-les pour modifier l'état du parent :
 
-```js {5}
-<input
-  type="text"
-  value={filterText}
-  placeholder="Recherche..."
-  onChange={(e) => onFilterTextChange(e.target.value)} />
+```js {4,5,13,19}
+function SearchBar({
+  filterText,
+  inStockOnly,
+  onFilterTextChange,
+  onInStockOnlyChange
+}) {
+  return (
+    <form>
+      <input
+        type="text"
+        value={filterText}
+        placeholder="Recherche..."
+        onChange={(e) => onFilterTextChange(e.target.value)}
+      />
+      <label>
+        <input
+          type="checkbox"
+          checked={inStockOnly}
+          onChange={(e) => onInStockOnlyChange(e.target.checked)}
 ```
 
 À présent votre application fonctionne complètement !

src/content/learn/thinking-in-react.md

@@ -14,7 +14,7 @@ Le Hook `useFormState` n'est actuellement disponible que sur les canaux de livra
 `useFormState` est un Hook qui vous permet de mettre à jour l'état sur base du résultat d'une action de formulaire.
 
 ```js
-const [state, formAction] = useFormState(fn, initialState);
+const [state, formAction] = useFormState(fn, initialState, permalink?);
 ```
 
 </Intro>
@@ -25,7 +25,7 @@ const [state, formAction] = useFormState(fn, initialState);
 
 ## Référence {/*reference*/}
 
-### `useFormState(action, initialState)` {/*useformstate*/}
+### `useFormState(action, initialState, permalink?)` {/*useformstate*/}
 
 {/* TODO T164397693: link to actions documentation once it exists */}
 
@@ -59,6 +59,7 @@ Lorsque vous l'utilisez dans une Action Serveur, `useFormState` permet d'affiche
 
 * `fn` : la fonction à appeler lorsque le formulaire est envoyé.  Lorsque la fonction est appelée, elle reçoit comme premier argument l'état précédent du formulaire (le `initialState` que vous avez fourni pour le premier appel, puis, pour les appels ultérieurs, la valeur précédemment renvoyée), suivi par les arguments normalement acceptés par une fonction d'action de formulaire.
 * `initialState` : la valeur initiale que vous souhaitez pour votre état.  Il peut s'agir de n'importe quelle valeur sérialisable.  Cet argument est ignoré après l'appel initial de l'action.
+* `permalink` **optionnel** : une chaîne de caractères contenant l'URL unique de la page que ce formulaire modifie. Conçu pour une utilisation sur des pages à contenu dynamique (telles que des flux) pour permettre une amélioration progressive : si `fn` est une [Action Serveur](/reference/react/use-server) et que le formulaire est soumis avant que le *bundle* JavaScript n'ait fini son chargement, le navigateur ira sur l'URL de permalien fournie, plutôt que sur l'URL de la page courante. Ça permet de garantir que le même composant de formulaire sera produit sur la page destinataire (y compris les infos `fn` et `permalink`), afin que React sache comment lui passer l'état.  Une fois le formulaire hydraté, ce paramètre n'a plus d'effet.
 
 {/* TODO T164397693: link to serializable values docs once it exists */}