Merge pull request #628 from reactjs/sync-35530eea

Sync with react.dev @ 35530ee

src/components/Layout/Page.tsx

@@ -130,7 +130,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-16">
+          <div className="lg:-mt-16 z-10">
             <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
               <SidebarNav
                 key={section}

src/components/MDX/SandpackWithHTMLOutput.tsx

@@ -77,8 +77,8 @@ export default memo(function SandpackWithHTMLOutput(
 ) {
   const children = [
     ...Children.toArray(props.children),
-    createFile('ShowRenderedHTML.js', ShowRenderedHTML),
-    createFile('formatHTML.js hidden', formatHTML),
+    createFile('src/ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('src/formatHTML.js hidden', formatHTML),
     createFile('package.json hidden', packageJSON),
   ];
   return <Sandpack {...props}>{children}</Sandpack>;

src/components/SocialBanner.tsx

@@ -8,9 +8,9 @@ import {useEffect, useRef} from 'react';
 import {ExternalLink} from './ExternalLink';
 import cn from 'classnames';
 
-const bannerText = 'Soutenez l’Ukraine 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Aidez-nous à fournir une aide humanitaire à l’Ukraine';
+const bannerText = 'Rejoignez-nous à la React Conf les 15-16 mai.';
+const bannerLink = 'https://conf.react.dev/';
+const bannerLinkText = 'En savoir plus';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -40,9 +40,7 @@ export default function SocialBanner() {
       <ExternalLink
         className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
-        <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
-        <span className="hidden sm:inline">.</span>
       </ExternalLink>
     </div>
   );

src/content/blog/index.md

@@ -10,6 +10,12 @@ Ce blog est la source officielle des mises à jour par l'équipe React.  Toute a
 
 <div className="sm:-mx-5 flex flex-col gap-5 mt-12">
 
+<BlogCard title="React Labs : ce sur quoi nous bossons – février 2024" date="15 février 2024" url="/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024">
+
+Dans les billets React Labs, nous vous parlons de nos projets de recherche et développement actifs.  Depuis notre dernier bulletin, nous avons fait des progrès significatifs sur le React Compiler et React 19, et nous aimerions partager ce que nous avons appris.
+
+</BlogCard>
+
 <BlogCard title="React Canaries : livraison incrémentale de fonctionnalités hors de Meta" date="3 mai 2023" url="/blog/2023/05/03/react-canaries">
 
 Traditionnellement, les nouveautés de React n'étaient d'abord disponibles qu'au sein de Meta, pour arriver plus tard dans les livraisons *open source*.  Nous aimerions offrir à la communauté React un moyen d'adopter individuellement des fonctionnalités plus en amont, alors que leur conception est quasi finalisée —  un peu comme l'utilisation que Meta fait de React en interne.  Nous présentons donc un nouveau canal de livraison officiel appelé Canary.  Il permet à des environnements choisis tels que les frameworks de découpler leur adoption de fonctionnalités React individuelles du calendrier officiel de sortie de React.

src/content/community/conferences.md

@@ -25,6 +25,16 @@ April 19 - 20, 2024. In-person in Miami, FL, USA
 
 [Site web](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
 
+### React Connection 2024 {/*react-connection-2024*/}
+April 22, 2024. In-person in Paris, France 
+
+[Site web](https://reactconnection.io/) - [Twitter](https://twitter.com/ReactConn)
+
+### React Native Connection 2024 {/*react-native-connection-2024*/}
+April 23, 2024. In-person in Paris, France 
+
+[Site web](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)
+
 ### React Conf 2024 {/*react-conf-2024*/}
 May 15 - 16, 2024. In-person in Henderson, NV, USA + remote
 
@@ -35,6 +45,11 @@ May 22 - 24, 2024. In-person in Kraków, Poland + remote
 
 [Site web](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)
 
+### 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/)
+
 ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
 June 12 - June 14, 2024. Atlanta, GA, USA
 
@@ -45,16 +60,16 @@ June 14, 2024. In-person at Farris Bad Hotel in Larvik, Norway and online (hybri
 
 [Site web](https://reactnorway.com/) - [Twitter](https://twitter.com/ReactNorway)
 
-### 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 Nexus 2024 {/*react-nexus-2024*/}
 July 04 & 05, 2024. Bangalore, India (In-person event)
 
 [Site web](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)
 
+### Chain React 2024 {/*chain-react-2024*/}
+July 17-19, 2024. In-person in Portland, OR, USA
+
+[Site web](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)
+
 ### React India 2024 {/*react-india-2024*/}
 October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day
 

src/content/learn/reacting-to-input-with-state.md

@@ -545,6 +545,7 @@ body { margin: 0; padding: 0; height: 250px; }
   width: 200px;
   height: 200px;
   border-radius: 10px;
+  border: 5px solid transparent;
 }
 
 .picture--active {

src/content/learn/start-a-new-react-project.md

@@ -8,7 +8,7 @@ Si vous voulez créer une nouvelle appli ou un nouveau site web avec React, nous
 
 </Intro>
 
-Vous pouvez utiliser React sans framework, ceci dit nous avons constaté que la grande majorité des applis et site finissent par implémenter des solutions à des problématiques courantes telles que la découpe de code, le routage, le chargement de données ou la génération de HTML. Ces problématiques se retrouvent dans toutes les bibliothèques d'interface utilisateur, pas seulement dans React.
+Vous pouvez utiliser React sans framework, mais nous avons constaté que la plupart des applis et sites finissent par avoir besoin de solutions à des problématiques courantes telles que la découpe de code, la gestion des routes, le chargement de données et la génération du code HTML. Ces problématiques existent dans toutes les bibliothèques UI, pas seulement React.
 
 En commençant avec un framework, vous pouvez démarrer plus vite avec React et vous épargner ce qui revient à construire votre propre framework par la suite.
 
@@ -26,18 +26,16 @@ Même si, au départ, vous n’avez pas besoin d’un gestionnaire de routes ou
 
 **Les frameworks React présentés sur cette page résolvent les problèmes de ce type par défaut, sans travail supplémentaire de votre part.** Ils vous permettent de commencer de manière très légère et de faire évoluer votre appli en fonction de vos besoins. Chaque framework React dispose d’une communauté, ce qui facilite la recherche de réponses aux questions et la mise à jour des outils. Les frameworks donnent également une structure à votre code, ce qui vous aide, vous et les autres, à conserver le contexte et vos compétences d'un projet à l'autre. Inversement, avec votre propre système, il est plus facile de rester bloqués sur des dépendances obsolètes, et vous finirez essentiellement par créer votre propre framework--mais un framework sans communauté ni processus de mise à niveau (et s’il ressemble à ceux que nous avons construits par le passé, il est conçu de manière plus aléatoire).
 
-
-Si votre appli a des contraintes inhabituelles qui ne sont pas bien traitées par ces frameworks, ou si vous préférer répondre à ces problématiques vous-mêmes, vous pouvez mettre en place votre propre configuration personnalisée autour de React. Prenez `react` et `react-dom` sur npm, mettez en place votre processus de *build* sur-mesure avec un bundler comme [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), et ajoutez d’autres outils lorsque vous en aurez besoin pour la gestion des routes, l’exportation statique ou le rendu côté serveur, et plus encore.
-
+Si vous n’êtes toujours pas convaincu·e, ou si votre appli a des contraintes inhabituelles qui ne sont pas bien traitées par ces frameworks et que vous souhaitez mettre en place votre propre configuration personnalisée, nous ne pouvons pas vous arrêter : allez-y ! Prenez `react` et `react-dom` sur npm, mettez en place votre processus de *build* sur-mesure avec un bundler comme [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), et ajoutez d’autres outils lorsque vous en aurez besoin pour la gestion des routes, l’exportation statique ou le rendu côté serveur, et plus encore.
 </DeepDive>
 
 ## Frameworks React de qualité reconnue {/*production-grade-react-frameworks*/}
 
-Ces frameworks prennent en charge toutes les fonctionnalités dont vous aurez besoin pour déployer et faire monter à l'échelle votre application en production, tout en travaillant à s'aligner sur notre [vision d'une architecture full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Tous les frameworks que nous recommandons sont _open source_, on des communautés actives pour vous aider, et peuvent être déployées sur votre propre serveur ou chez un hébergeur.  Si vous êtes l'auteur·e d'un framework qui voudrait faire partie de cette liste[faites-nous signe](https://github.com/reactjs/fr.react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
+Ces frameworks prennent en charge toutes les fonctionnalités dont vous aurez besoin pour déployer et faire monter à l’échelle votre application en production, tout en travaillant à s’aligner sur notre [vision d’une architecture full-stack](#which-features-make-up-the-react-teams-full-stack-architecture-vision). Tous les frameworks que nous recommandons sont open source, on des communautés actives pour vous aider, et peuvent être déployées sur votre propre serveur ou chez un hébergeur.  Si vous êtes l’auteur·e d’un framework qui voudrait faire partie de cette liste, [faites-nous signe](https://github.com/reactjs/react.dev/issues/new?assignees=&labels=type%3A+framework&projects=&template=3-framework.yml&title=%5BFramework%5D%3A+).
 
 ### Next.js {/*nextjs-pages-router*/}
 
-**[Next.js (Pages Router)](https://nextjs.org/) est un framework React full-stack**. Il est flexible et vous permet de créer des applis React de toute taille--d’un blog essentiellement statique à une appli complexe et dynamique. Pour créer un nouveau projet avec Next.js, exécutez cette commande dans votre terminal :
+**[Next.js (Pages Router)](https://nextjs.org/) est un framework React full-stack**. Il est flexible et vous permet de créer des applis React de toute taille—d’un blog essentiellement statique à une appli complexe et dynamique. Pour créer un nouveau projet avec Next.js, exécutez cette commande dans votre terminal :
 
 <TerminalBlock>
 npx create-next-app@latest
@@ -83,7 +81,7 @@ Si Expo est nouveau pour vous, consultez le [tutoriel d’Expo](https://docs.exp
 
 Expo est maintenu par [Expo (la société)](https://expo.dev/about). Construire des applis avec Expo est gratuit, et vous pouvez les publier sur les plateformes Google Play et Apple Store sans restrictions. Expo propose des services cloud optionnels payants.
 
-## Frameworks React expérimentaux {/*bleeding-edge-react-frameworks*/}
+## Frameworks Reaxt expérimentaux {/*bleeding-edge-react-frameworks*/}
 
 Alors que nous cherchions comment continuer à améliorer React, nous avons réalisé que l’intégration plus étroite de React avec les frameworks (en particulier avec la gestion de routes, le *bundling* et les traitements côté serveur) constitue notre plus grande opportunité d’aider les utilisateurs de React à construire de meilleures applis. L’équipe Next.js a accepté de collaborer avec nous sur la recherche, le développement, l’intégration et les tests de fonctionnalités React de pointe, indépendantes toutefois d'un framework spécifique, comme les [Composants Serveur React](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -266,7 +266,7 @@ body {
 Vous pouvez aussi suivre ce tutoriel dans votre environnement de développement local.  Pour cela, suivez ces étapes :
 
 1. Installez [Node.js](https://nodejs.org/fr/)
-2. Dans l'onglet CodeSandbox ouvert plus tôt, appuyez sur le bouton en haut à gauche pour ouvrir le menu, puis choisissez **Télécharger la sandbox** dans ce menu pour télécharger localement une archive des fichiers du projet
+2. Dans l'onglet CodeSandbox ouvert plus tôt, appuyez sur le bouton en haut à gauche pour ouvrir le menu, puis choisissez **Télécharger la Sandbox** dans ce menu pour télécharger localement une archive des fichiers du projet
 3. Décompressez le fichier d'archive puis ouvrez un terminal et faites un `cd` dans le dossier que vous venez de décompresser
 4. Installez les dépendances avec `npm install`
 5. Lancer `npm start` pour démarrer un serveur local et suivez les invites affichées pour voir le code s'exécuter dans le navigateur.

src/content/reference/react-dom/components/link.md

@@ -96,7 +96,7 @@ In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet
 
 There are two exception to this special behavior:
 
-* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.  
+* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.
 * If you supply any of the `onLoad`, `onError`, or `disabled` props, there is no special behavior, because these props indicate that you are managing the loading of the stylesheet manually within your component.
 
 This special treatment comes with two caveats:
@@ -114,7 +114,7 @@ You can annotate the document with links to related resources such as an icon, c
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function BlogPage() {
@@ -141,7 +141,7 @@ When you want to use a stylesheet, it can be beneficial to call the [preinit](/r
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
@@ -164,7 +164,7 @@ Stylesheets can conflict with each other, and when they do, the browser goes wit
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
@@ -195,7 +195,7 @@ If you render the same stylesheet from multiple components, React will place onl
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {

src/content/reference/react-dom/components/meta.md

@@ -72,7 +72,7 @@ You can render the `<meta>` component from any component. React will put a `<met
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {

src/content/reference/react-dom/components/script.md

@@ -68,7 +68,7 @@ Props that are **not recommended** for use with React:
 
 #### Special rendering behavior {/*special-rendering-behavior*/}
 
-React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](http://localhost:3000/reference/react/Suspense) while the script is loading.
+React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
 
 To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
 
@@ -91,7 +91,7 @@ If you supply an `src` and `async` prop, your component will suspend while the s
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Map({lat, long}) {
@@ -124,7 +124,7 @@ To include an inline script, render the `<script>` component with the script sou
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Tracking() {
@@ -146,4 +146,4 @@ export default function Page() {
 }
 ```
 
-</SandpackWithHTMLOutput>
+</SandpackWithHTMLOutput>

src/content/reference/react-dom/components/style.md

@@ -14,7 +14,7 @@ React's extensions to `<style>` are currently only available in React's canary a
 The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) lets you add inline CSS stylesheets to your document.
 
 ```js
-<style> p { color: red; } </style>
+<style>{` p { color: red; } `}</style>
 ```
 
 </Intro>
@@ -30,7 +30,7 @@ The [built-in browser `<style>` component](https://developer.mozilla.org/en-US/d
 To add inline styles to your document, render the [built-in browser `<style>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style). You can render `<style>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical styles.
 
 ```js
-<style> p { color: red; } </style>
+<style>{` p { color: red; } `}</style>
 ```
 
 [See more examples below.](#usage)
@@ -73,7 +73,7 @@ If you supply an `href` and `precedence` prop, your component will suspend while
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 import { useId } from 'react';