diff --git a/README.md b/README.md index 966131db5..182192cb5 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https: ### Prerequisites 1. Git -1. Node: any 12.x version starting with v12.0.0 or greater +1. Node: any version starting with v16.8.0 or greater 1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/) 1. A fork of the repo (for any contributions) 1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b9725..26d46bd2f 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/src/components/Icon/IconRocket.tsx b/src/components/Icon/IconRocket.tsx new file mode 100644 index 000000000..457736c7c --- /dev/null +++ b/src/components/Icon/IconRocket.tsx @@ -0,0 +1,32 @@ +/* + * Copyright (c) Facebook, Inc. and its affiliates. + */ + +import {memo} from 'react'; + +export const IconRocket = memo< + JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'} +>(function IconRocket({className, size = 'md'}) { + return ( + + ); +}); diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 8ab329eec..1ab95d9d0 100644 --- a/src/components/Layout/Sidebar/SidebarLink.tsx +++ b/src/components/Layout/Sidebar/SidebarLink.tsx @@ -16,7 +16,7 @@ interface SidebarLinkProps { selected?: boolean; title: string; level: number; - canary?: boolean; + version?: 'canary' | 'major'; icon?: React.ReactNode; isExpanded?: boolean; hideArrow?: boolean; @@ -27,7 +27,7 @@ export function SidebarLink({ href, selected = false, title, - canary, + version, level, isExpanded, hideArrow, @@ -75,10 +75,22 @@ export function SidebarLink({ {/* This here needs to be refactored ofc */}
{title}{' '} - {canary && ( + {version === 'major' && ( + + React 19 + + )} + {version === 'canary' && ( >>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 /> )}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 3f058073c..54f02b925 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -87,7 +87,7 @@ export function SidebarRouteTree({ path, title, routes, - canary, + version, heading, hasSectionHeader, sectionHeader, @@ -121,7 +121,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} isExpanded={isExpanded} hideArrow={isForceExpanded} /> @@ -145,7 +145,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} /> ); diff --git a/src/components/Layout/getRouteMeta.tsx b/src/components/Layout/getRouteMeta.tsx index 3564dd738..b3d14725d 100644 --- a/src/components/Layout/getRouteMeta.tsx +++ b/src/components/Layout/getRouteMeta.tsx @@ -19,8 +19,8 @@ export type RouteTag = export interface RouteItem { /** Page title (for the sidebar) */ title: string; - /** Optional canary flag for heading */ - canary?: boolean; + /** Optional version flag for heading */ + version?: 'canary' | 'major'; /** Optional page description for heading */ description?: string; /* Additional meta info for page tagging */ diff --git a/src/components/MDX/ExpandableCallout.tsx b/src/components/MDX/ExpandableCallout.tsx index 5212aa9bd..872dfc3b0 100644 --- a/src/components/MDX/ExpandableCallout.tsx +++ b/src/components/MDX/ExpandableCallout.tsx @@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote'; import {IconWarning} from '../Icon/IconWarning'; import {IconPitfall} from '../Icon/IconPitfall'; import {IconCanary} from '../Icon/IconCanary'; +import {IconRocket} from '../Icon/IconRocket'; -type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary'; +type CalloutVariants = + | 'deprecated' + | 'pitfall' + | 'note' + | 'wip' + | 'canary' + | 'major' + | 'rsc'; interface ExpandableCalloutProps { children: React.ReactNode; @@ -59,6 +67,22 @@ const variantMap = { overlayGradient: 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', }, + major: { + title: 'React 19', + Icon: IconRocket, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, + rsc: { + title: 'React Server Components', + Icon: null, + containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20', + textColor: 'text-blue-50 dark:text-blue-40', + overlayGradient: + 'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)', + }, }; function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { @@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) { variant.containerClasses )}>

- + {variant.Icon && ( + + )} {variant.title}

diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index a6dfdfd31..4ef68414f 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => ( {children} ); +const NextMajor = ({children}: {children: React.ReactNode}) => ( + {children} +); + +const RSC = ({children}: {children: React.ReactNode}) => ( + {children} +); + const CanaryBadge = ({title}: {title: string}) => ( ( ); +const NextMajorBadge = ({title}: {title: string}) => ( + + React 19 + +); + +const RSCBadge = ({title}: {title: string}) => ( + + RSC + +); + const Blockquote = ({ children, ...props @@ -493,6 +521,10 @@ export const MDXComponents = { Note, Canary, CanaryBadge, + NextMajor, + NextMajorBadge, + RSC, + RSCBadge, PackageImport, ReadBlogPost, Recap, diff --git a/src/components/MDX/Sandpack/template.ts b/src/components/MDX/Sandpack/template.ts index e1169b7ae..b7644805d 100644 --- a/src/components/MDX/Sandpack/template.ts +++ b/src/components/MDX/Sandpack/template.ts @@ -28,8 +28,8 @@ root.render( eject: 'react-scripts eject', }, dependencies: { - react: '^18.0.0', - 'react-dom': '^18.0.0', + react: '19.0.0-rc-3edc000d-20240926', + 'react-dom': '19.0.0-rc-3edc000d-20240926', 'react-scripts': '^5.0.0', }, }, diff --git a/src/content/blog/2024/04/25/react-19-upgrade-guide.md b/src/content/blog/2024/04/25/react-19-upgrade-guide.md index 08529b4a0..066dd1268 100644 --- a/src/content/blog/2024/04/25/react-19-upgrade-guide.md +++ b/src/content/blog/2024/04/25/react-19-upgrade-guide.md @@ -1,5 +1,9 @@ --- +<<<<<<< HEAD title: "React 19 RC : guide de migration" +======= +title: "React 19 Upgrade Guide" +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 author: Ricky Hanlon date: 2024/04/25 description: Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19. @@ -12,7 +16,11 @@ Le 25 avril 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii) +<<<<<<< HEAD Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. +======= +The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 @@ -38,7 +46,11 @@ Dans cet article, nous vous guidons à travers les étapes nécessaires à une m - [Changements liés à TypeScript](#typescript-changes) - [Changelog](#changelog) +<<<<<<< HEAD Si vous aimeriez nous aider à tester React 19, suivez les étapes de ce guide de migration et [signalez-nous tout problème](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) que vous rencontreriez. Pour une liste des nouveautés de React 19, consultez [l’annonce de sortie de React 19](/blog/2024/04/25/react-19). +======= +If you'd like to help us test React 19, follow the steps in this upgrade guide and [report any issues](https://github.com/facebook/react/issues/new?assignees=&labels=React+19&projects=&template=19.md&title=%5BReact+19%5D) you encounter. For a list of new features added to React 19, see the [React 19 release post](/blog/2024/12/05/react-19). +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 --- @@ -71,28 +83,27 @@ Nous estimons que la plupart des applis ne seront pas affectées par ça, dans l Pour installer la dernière version de React et React DOM : ```bash -npm install --save-exact react@rc react-dom@rc +npm install --save-exact react@^19.0.0 react-dom@^19.0.0 ``` Ou si vous utilisez Yarn : ```bash -yarn add --exact react@rc react-dom@rc +yarn add --exact react@^19.0.0 react-dom@^19.0.0 ``` +<<<<<<< HEAD Si vous utilisez TypeScript, vous aurez aussi besoin de mettre à jour les types. Une fois que React 19 sortira en version stable, vous pourrez installer les types au travers des paquets habituels `@types/react` et `@types/react-dom`. D'ici là, ces types sont mis à disposition par des paquets distincts que vous devrez forcer dans votre `package.json` : +======= +If you're using TypeScript, you also need to update the types. +```bash +npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0 +``` +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 -```json -{ - "dependencies": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - }, - "overrides": { - "@types/react": "npm:types-react@rc", - "@types/react-dom": "npm:types-react-dom@rc" - } -} +Or, if you're using Yarn: +```bash +yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0 ``` Nous fournissons par ailleurs un codemod pour les remplacements les plus courants. Consultez par exemple la section [Changements liés à TypeScript](#typescript-changes) plus loin. @@ -117,8 +128,13 @@ Elle exploitera les codemods suivants du dépôt `react-codemod` : - [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render) - [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref) - [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import) +<<<<<<< HEAD - [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) - [`prop-types-typescript`](TODO) +======= +- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state) +- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript) +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 Ça n'inclut toutefois pas les changements liés à TypeScript. Consultez la section [Changements liés à TypeScript](#typescript-changes) plus loin. @@ -746,6 +762,7 @@ const reducer = (state: State, action: Action) => state; ### Autres ruptures de compatibilité ascendante {/*other-breaking-changes*/} +<<<<<<< HEAD - **react-dom**: Erreur sur URL JavaScript dans src/href [#26507](https://github.com/facebook/react/pull/26507) - **react-dom**: Retrait de `errorInfo.digest` dans `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) - **react-dom**: Retrait de `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) @@ -753,6 +770,15 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: Retrait de `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) - **react-dom**: Retrait de `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) - **react-is**: Retrait de méthodes dépréciées dans `react-is` [28224](https://github.com/facebook/react/pull/28224) +======= +- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507) +- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222) +- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397) +- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271) +- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271) +- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271) +- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224) +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ### Autres changements notables {/*other-notable-changes*/} @@ -763,7 +789,11 @@ const reducer = (state: State, action: Action) => state; - **react-dom**: Retire l'avertissement des Effets de layout lors du SSR [#26395](https://github.com/facebook/react/pull/26395) - **react-dom**: Avertit et évite les chaînes vides pour src/href (sauf sur balises d'ancres) [#28124](https://github.com/facebook/react/pull/28124) +<<<<<<< HEAD Nous publierons un changelog complet avec la version stable de React 19. +======= +For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024). +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 --- diff --git a/src/content/blog/2024/05/22/react-conf-2024-recap.md b/src/content/blog/2024/05/22/react-conf-2024-recap.md index 46063b260..c4c2daa20 100644 --- a/src/content/blog/2024/05/22/react-conf-2024-recap.md +++ b/src/content/blog/2024/05/22/react-conf-2024-recap.md @@ -17,7 +17,11 @@ La semaine dernière nous avons organisé React Conf 2024, une conférence de de --- +<<<<<<< HEAD Lors de la React Conf 2024, nous avons annoncé [React 19 RC](/blog/2024/04/25/react-19), la [beta de la nouvelle architecture React Native](https://github.com/reactwg/react-native-new-architecture/discussions/189), et une sortie expérimentale du [React Compiler](/learn/react-compiler). La communauté est également montée sur scène pour annoncer [React Router v7](https://remix.run/blog/merging-remix-and-react-router), les [Composants Serveur universels](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) dans Expo Router, les Composants Serveur dans [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), et bien plus encore. +======= +At React Conf 2024, we announced the [React 19 RC](/blog/2024/12/05/react-19), the [React Native New Architecture Beta](https://github.com/reactwg/react-native-new-architecture/discussions/189), and an experimental release of the [React Compiler](/learn/react-compiler). The community also took the stage to announce [React Router v7](https://remix.run/blog/merging-remix-and-react-router), [Universal Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) in Expo Router, React Server Components in [RedwoodJS](https://redwoodjs.com/blog/rsc-now-in-redwoodjs), and much more. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 L'intégralité des flux pour le [jour 1](https://www.youtube.com/watch?v=T8TZQ6k4SLE) et le [jour 2](https://www.youtube.com/watch?v=0ckOUBiuxVY) est disponible en ligne. Dans cet article, nous récapitulons les présentations et annonces de l'événement. @@ -36,7 +40,11 @@ Pour en apprendre davantage, allez voir ces présentations de la communauté plu - [RedwoodJS, now with React Server Components](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=26815s) par [Amy Dutton](https://twitter.com/selfteachme) - [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=20765s) par [Evan Bacon](https://twitter.com/Baconbrix) +<<<<<<< HEAD Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et [Andrew Clark](https://twitter.com/acdlite) ont présenté de nouvelles fonctionnalités à venir dans React 19, et annoncé que React 19 RC était prête pour être testée en production. Découvrez toutes ces nouveautés dans [l'annonce de sortie de React 19](/blog/2024/04/25/react-19) et allez voir ces présentations qui explorent en détail les nouvelles fonctionnalités : +======= +Next in the keynote, [Josh Story](https://twitter.com/joshcstory) and [Andrew Clark](https://twitter.com/acdlite) shared new features coming in React 19, and announced the React 19 RC which is ready for testing in production. Check out all the features in the [React 19 release post](/blog/2024/12/05/react-19), and see these talks for deep dives on the new features: +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 - [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie) - [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) par [Sam Selikoff](https://twitter.com/samselikoff) diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/12/05/react-19.md similarity index 91% rename from src/content/blog/2024/04/25/react-19.md rename to src/content/blog/2024/12/05/react-19.md index 44dac8fcd..0f21a38ca 100644 --- a/src/content/blog/2024/04/25/react-19.md +++ b/src/content/blog/2024/12/05/react-19.md @@ -1,4 +1,5 @@ --- +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md title: "React 19 RC" author: L'équipe React date: 2024/04/25 @@ -6,16 +7,45 @@ description: React 19 RC est désormais disponible sur npm ! Dans cet article, --- Le 25 avril 2024 par [l'équipe React](/community/team) +======= +title: "React v19" +author: The React Team +date: 2024/12/05 +description: React 19 is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +--- + +December 05, 2024 by [The React Team](/community/team) +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682:src/content/blog/2024/12/05/react-19.md --- + + +### React 19 is now stable! {/*react-19-is-now-stable*/} + +Additions since this post was originally shared with the React 19 RC in April: + +- **Pre-warming for suspended trees**: see [Improvements to Suspense](/blog/2024/04/25/react-19-upgrade-guide#improvements-to-suspense). +- **React DOM static APIs**: see [New React DOM Static APIs](#new-react-dom-static-apis). + +_The date for this post has been updated to reflect the stable release date._ + + +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md React 19 RC est désormais disponible sur npm ! Dans notre [guide de migration pour React 19 RC](/blog/2024/04/25/react-19-upgrade-guide), nous avons fourni des instructions pas à pas pour mettre à jour votre appli vers React 19. Dans cet article, nous allons passer en revue les nouveautés de React 19, et voir comment vous pouvez les adopter. +======= +React v19 is now available on npm! + + + +In our [React 19 Upgrade Guide](/blog/2024/04/25/react-19-upgrade-guide), we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682:src/content/blog/2024/12/05/react-19.md - [Quoi de neuf dans React 19](#whats-new-in-react-19) - [React Server Components](#react-server-components) @@ -313,7 +343,34 @@ function Heading({children}) { La fonction `use` ne peut être appelée qu'au sein du rendu, comme pour les Hooks. Mais contrairement aux Hooks, `use` peut être appelée conditionnellement. Nous prévoyons d'ajouter à l'avenir des modes supplémentaires de consommation de ressources lors du rendu grâce à `use`. +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Pour en apprendre davantage, consultez la documentation de [`use`](/reference/react/use). +======= +## New React DOM Static APIs {/*new-react-dom-static-apis*/} + +We've added two new APIs to `react-dom/static` for static site generation: +- [`prerender`](/reference/react-dom/static/prerender) +- [`prerenderToNodeStream`](/reference/react-dom/static/prerenderToNodeStream) + +These new APIs improve on `renderToString` by waiting for data to load for static HTML generation. They are designed to work with streaming environments like Node.js Streams and Web Streams. For example, in a Web Stream environment, you can prerender a React tree to static HTML with `prerender`: + +```js +import { prerender } from 'react-dom/static'; + +async function handler(request) { + const {prelude} = await prerender(, { + bootstrapScripts: ['/main.js'] + }); + return new Response(prelude, { + headers: { 'content-type': 'text/html' }, + }); +} +``` + +Prerender APIs will wait for all data to load before returning the static HTML stream. Streams can be converted to strings, or sent with a streaming response. They do not support streaming content as it loads, which is supported by the existing [React DOM server rendering APIs](/reference/react-dom/server). + +For more information, see [React DOM Static APIs](/reference/react-dom/static). +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682:src/content/blog/2024/12/05/react-19.md ## React Server Components {/*react-server-components*/} @@ -327,7 +384,11 @@ React 19 inclut toutes les fonctionnalités de Composants Serveur issues du cana #### Comment prendre en charge les Composants Serveur ? {/*how-do-i-build-support-for-server-components*/} +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Même si les Composants Serveur dans React 19 sont stables et ne casseront pas la compatibilité entre les versions majeures, les API sous-jacentes utilisées pour implémenter les Composants Serveur au sein d'un *bundler* ou framework ne suivent pas, elles, le versionnage sémantique et sont susceptibles de casser la compatibilité entre les versions mineures de React 19.x. +======= +While React Server Components in React 19 are stable and will not break between minor versions, the underlying APIs used to implement a React Server Components bundler or framework do not follow semver and may break between minors in React 19.x. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682:src/content/blog/2024/12/05/react-19.md Pour prendre en charge les Composants Serveur dans un *bundler* ou framework, nous vous conseillons de figer React sur une version spécifique, ou d'utiliser une version Canari. Nous allons continuer à collaborer avec les *bundlers* et frameworks pour stabiliser les API utilisées pour implémenter les Composants Serveur à l'avenir. @@ -765,8 +826,12 @@ Dans les précédentes versions, utiliser des éléments personnalisés dans Rea - **Côté serveur** : les props passées à un élément personnalisé produisent des attributs si leur type est primitif (ex. `string`, `number`) ou si la valeur est `true`. Les props de type non primitif tels qu’`object`, `symbol`, `function` ainsi que la valeur `false` sont ignorés. - **Côté client** : les props qui correspondent à une propriété de l'instance de l'élément personnalisé sont affectées à ces propriétés, à défaut de quoi elles produisent des attributs. +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md Merci à [Joey Arhar](https://github.com/josepharhar) pour avoir piloté la conception et l'implémentation de la prise en charge des éléments personnalisés dans React. ## Comment mettre à jour {/*how-to-upgrade*/} -Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables. \ No newline at end of file +Consultez le [guide de migration React 19](/blog/2024/04/25/react-19-upgrade-guide) pour des instructions pas à pas et la liste complète des ruptures de compatibilité ascendante et des changements notables. +======= +_Note: this post was originally published 04/25/2024 and has been updated to 12/05/2024 with the stable release._ +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682:src/content/blog/2024/12/05/react-19.md diff --git a/src/content/blog/index.md b/src/content/blog/index.md index 165fac7ab..d94728de9 100644 --- a/src/content/blog/index.md +++ b/src/content/blog/index.md @@ -10,7 +10,17 @@ Ce blog est la source officielle des mises à jour par l'équipe React. Toute a
+<<<<<<< HEAD +======= + + +In the React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ... + + + + +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 Nous avions annoncé la sortie expérimentale de React Compiler lors de la React Conf 2024. Nous avons beaucoup avancé depuis, et dans cet article nous aimerions partager avec vous la suite de nos travaux sur ce compilateur… @@ -27,6 +37,7 @@ Dans le guide de migration vers React 19 RC, nous vous donnions des instructions +<<<<<<< HEAD Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19… @@ -34,6 +45,9 @@ Les améliorations apportées par React 19 RC nécessitent quelques ruptures de +======= + +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 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. diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 27c1b7018..cae98614c 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,19 +10,28 @@ Vous connaissez une conférence React.js locale ? Ajoutez-la ! (Merci de conse ## Conférences à venir {/*upcoming-conferences*/} -### React Universe Conf 2024 {/*react-universe-conf-2024*/} -September 5-6, 2024. Wrocław, Poland. +### React Day Berlin 2024 {/*react-day-berlin-2024*/} +December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +<<<<<<< HEAD [Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +======= +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 -### React Alicante 2024 {/*react-alicante-2024*/} -September 19-21, 2024. Alicante, Spain. +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote +<<<<<<< HEAD [Site web](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) +======= +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 -### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} -October 04 - 05, 2024. Nairobi, Kenya +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) +<<<<<<< HEAD [Site web](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) ### React India 2024 {/*react-india-2024*/} @@ -54,18 +63,68 @@ November 14 & 15, 2024. In-person in London, UK November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) [Site web](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) +======= +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) + +## Past Conferences {/*past-conferences*/} +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ### React Africa 2024 {/*react-africa-2024*/} November 29, 2024. In-person in Casablanca, Morocco (hybrid event) [Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) -### React Day Berlin 2024 {/*react-day-berlin-2024*/} -December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) +<<<<<<< HEAD [Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) ## Conférences passées {/*past-conferences*/} +======= +[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/) + +### React Native London Conf 2024 {/*react-native-london-2024*/} +November 14 & 15, 2024. In-person in London, UK + +[Website](https://reactnativelondon.co.uk/) - [Twitter](https://x.com/RNLConf) + +### React Advanced London 2024 {/*react-advanced-london-2024*/} +October 25 & 28, 2024. In-person in London, UK + online (hybrid event) + +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) + +### reactjsday 2024 {/*reactjsday-2024*/} +October 25, 2024. In-person in Verona, Italy + online (hybrid event) + +[Website](https://2024.reactjsday.it/) - [Twitter](https://x.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp) + +### React Brussels 2024 {/*react-brussels-2024*/} +October 18, 2024. In-person in Brussels, Belgium (hybrid event) + +[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) + +### React India 2024 {/*react-india-2024*/} +October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day + +[Website](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) + +### RenderCon Kenya 2024 {/*rendercon-kenya-2024*/} +October 04 - 05, 2024. Nairobi, Kenya + +[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA) + +### React Alicante 2024 {/*react-alicante-2024*/} +September 19-21, 2024. Alicante, Spain. + +[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/ReactAlicante) - [YouTube](https://www.youtube.com/channel/UCaSdUaITU1Cz6PvC97A7e0w) + +### React Universe Conf 2024 {/*react-universe-conf-2024*/} +September 5-6, 2024. Wrocław, Poland. + +[Website](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) + +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA diff --git a/src/content/community/team.md b/src/content/community/team.md index 225d089ac..3ab0f74b4 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -42,8 +42,13 @@ 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. +<<<<<<< HEAD La carrière de développeuse de Lauren a atteint son sommet lorsqu'elle a découvert la balise ``. Depuis, elle cherche à retrouver cette extase. Elle a étudié la finance à la fac plutôt que l'informatique, de sorte qu'elle a paris à coder avec Excel plutôt que Java. Lauren aime balancer des mèmes audacieux dans les forums internes, jouer à des jeux vidéos avec l'amour de sa vie, et poutouter son chien Zelda. +======= + + Lauren's programming career peaked when she first discovered the `` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 diff --git a/src/content/learn/index.md b/src/content/learn/index.md index ac71de39c..f63c2a5c0 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -4,7 +4,11 @@ title: Démarrage rapide +<<<<<<< HEAD Bienvenue dans la documentation React ! Dans cette page, vous allez découvrir les 80% de concepts React que vous utiliserez sans doute au quotidien. +======= +Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index d24f89f77..2e503c521 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -256,11 +256,11 @@ export default function CatFriends() { key={cat} ref={(node) => { const map = getMap(); - if (node) { - map.set(cat, node); - } else { + map.set(cat, node); + + return () => { map.delete(cat); - } + }; }} > Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient plutôt une [Map](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Map) associant chaque ID d'élément à un nœud DOM. ([Les refs peuvent stocker n'importe quelle valeur !](/learn/referencing-values-with-refs)) La [fonction de rappel `ref`](/reference/react-dom/components/common#ref-callback) sur chaque élément de la liste s'occupe de mettre à jour les correspondances : @@ -331,6 +321,7 @@ Dans cet exemple, `itemRef` ne référence pas un unique nœud DOM. Il contient key={cat.id} ref={node => { const map = getMap(); +<<<<<<< HEAD if (node) { // Ajoute à la Map map.set(cat, node); @@ -353,6 +344,8 @@ This example shows another approach for managing the Map with a `ref` callback c key={cat.id} ref={node => { const map = getMap(); +======= +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 // Add to the Map map.set(cat, node); @@ -364,23 +357,56 @@ This example shows another approach for managing the Map with a `ref` callback c > ``` - +This lets you read individual DOM nodes from the Map later. + + + +When Strict Mode is enabled, ref callbacks will run twice in development. + +Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs. + + ## Accéder aux nœuds DOM d'un autre composant {/*accessing-another-components-dom-nodes*/} +<<<<<<< HEAD Quand vous posez une ref sur un composant natif qui produit un élément navigateur tel que ``, React place une référence vers le nœud DOM correspondant (le véritable élément `` du navigateur) dans la propriété `current` de cette ref. En revanche, si vous essayez d'obtenir une ref vers **votre propre** composant, tel que ``, vous obtiendrez par défaut `null`. Voici un exemple qui illustre ça : voyez comme les clics sur le bouton **ne donnent pas** le focus au champ de saisie : +======= + +Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile. + + +You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component). + +```js {3-4,9} +import { useRef } from 'react'; + +function MyInput({ ref }) { + return ; +} + +function MyForm() { + const inputRef = useRef(null); + return +} +``` + +In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to ``. Because `` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `` DOM element. + +The `inputRef` created in `MyForm` now points to the `` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on ``. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js import { useRef } from 'react'; -function MyInput(props) { - return ; +function MyInput({ ref }) { + return ; } export default function MyForm() { @@ -403,6 +429,7 @@ export default function MyForm() { +<<<<<<< HEAD Pour vous aider à repérer le problème, React affichera aussi une erreur dans la console : @@ -462,22 +489,32 @@ export default function Form() { Dans les Design Systems, il est courant pour les composants de bas niveau tels que les boutons, champs, etc. de transmettre leurs refs à leurs nœuds DOM. À l'inverse, les composants de haut niveau tels que les formulaires, listes ou sections de page n'exposent généralement pas leurs nœuds DOM pour éviter d'introduire des dépendances indésirables envers la structure de leur DOM. +======= +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 #### Exposer une partie de votre API grâce à un point d'accès impératif {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/} +<<<<<<< HEAD Dans l'exemple qui précède, `MyInput` expose l'élément DOM original du champ de saisie. Ça permet au composant parent d'en appeler la méthode `focus()`. Hélas, ça permet aussi au composant parent de faire d'autres choses avec, par exemple modifier ses styles CSS. Dans certains cas rares, vous voudrez restreindre les fonctionnalités natives accessibles. Utilisez alors `useImperativeHandle` : +======= +In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle): +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js +<<<<<<< HEAD import { forwardRef, useRef, useImperativeHandle } from 'react'; +======= +import { useRef, useImperativeHandle } from "react"; +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 -const MyInput = forwardRef((props, ref) => { +function MyInput({ ref }) { const realInputRef = useRef(null); useImperativeHandle(ref, () => ({ // N'expose que la méthode `focus()`, rien de plus @@ -485,8 +522,8 @@ const MyInput = forwardRef((props, ref) => { realInputRef.current.focus(); }, })); - return ; -}); + return ; +}; export default function Form() { const inputRef = useRef(null); @@ -498,9 +535,13 @@ export default function Form() { return ( <> +<<<<<<< HEAD +======= + +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ); } @@ -508,7 +549,11 @@ export default function Form() { +<<<<<<< HEAD Ici, `realInputRef` dans `MyInput` référence le nœud DOM effectif du champ de saisie. En revanche, `useImperativeHandle` indique à React de fournir votre propre objet sur-mesure comme valeur de la ref pour le composant parent. Ainsi `inputRef.current` dans le composant `Form` ne verra que la méthode`focus`. Au final, le « point d'accès » de la ref n'est pas le nœud DOM, mais l'objet dédié que vous avez créé dans l'appel à `useImperativeHandle`. +======= +Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 7d830d241..4df1cfe51 100644 --- a/src/content/learn/react-compiler.md +++ b/src/content/learn/react-compiler.md @@ -362,7 +362,11 @@ React Compiler peut vérifier statiquement la plupart des Règles de React, et ### Comment savoir si mes composants ont été optimisés ? {/*how-do-i-know-my-components-have-been-optimized*/} +<<<<<<< HEAD [React Devtools](/learn/react-developer-tools) (v5.0+) prend nativement en charge React Compiler et affichera un badge « Memo ✨ » à côté des composants qui ont été optimisés par le compilateur. +======= +[React DevTools](/learn/react-developer-tools) (v5.0+) and [React Native DevTools](https://reactnative.dev/docs/react-native-devtools) have built-in support for React Compiler and will display a "Memo ✨" badge next to components that have been optimized by the compiler. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ### Quelque chose ne fonctionne plus après la compilation {/*something-is-not-working-after-compilation*/} diff --git a/src/content/learn/react-developer-tools.md b/src/content/learn/react-developer-tools.md index f19187126..d13a0be19 100644 --- a/src/content/learn/react-developer-tools.md +++ b/src/content/learn/react-developer-tools.md @@ -52,6 +52,7 @@ Pour finir, rafraîchissez votre page dans le navigateur pour l'afficher dans le ![React Developer Tools en mode autonome](/images/docs/react-devtools-standalone.png) +<<<<<<< HEAD ## Mobile natif (React Native) {/*mobile-react-native*/} Les outils de développement React peuvent également être utilisés pour inspecter les applis construites avec [React Native](https://reactnative.dev/). @@ -59,11 +60,15 @@ La façon la plus simple d'utiliser les outils de développement React consiste ```bash # Yarn yarn global add react-devtools +======= +## Mobile (React Native) {/*mobile-react-native*/} -# Npm -npm install -g react-devtools -``` +To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/debugging/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 + +[Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging) +<<<<<<< HEAD Ouvrez alors les outils de développement depuis le terminal : ```bash react-devtools @@ -74,3 +79,6 @@ react-devtools > Essayez de relancer l'appli si les outils de développement ne se connectent toujours pas au bout de quelques secondes. [En apprendre plus sur le débogage de React Native](https://reactnative.dev/docs/debugging). +======= +> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6f761b035..a23a2ab47 100644 --- a/src/content/reference/react-dom/client/createRoot.md +++ b/src/content/reference/react-dom/client/createRoot.md @@ -49,7 +49,14 @@ Une appli entièrement construite en React n'aura généralement qu'un appel à * `onRecoverableError` **optionnelle** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`. * `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page. +<<<<<<< HEAD #### Valeur renvoyée {/*returns*/} +======= + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown, and an `errorInfo` object containing the `componentStack`. + * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with an `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 `createRoot` renvoie un objet avec deux méthodes : [`render`](#root-render) et [`unmount`](#root-unmount). @@ -343,6 +350,7 @@ Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos comp ### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/} +<<<<<<< HEAD `onUncaughtError` n'est disponible que dans la dernière version React Canary. @@ -350,6 +358,9 @@ Il est toutefois rare d'appeler `render` plusieurs fois. En général, vos comp Par défaut, React affichera dans la console toute erreur non capturée. Pour implémenter votre propre signalement, vous pouvez fournir l'option `onUncaughtError` : +======= +By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option: +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -576,21 +587,11 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js" -} -``` - ### Afficher les erreurs de Périmètres d'Erreurs {/*displaying-error-boundary-errors*/} +<<<<<<< HEAD `onCaughtError` n'est disponible que dans la dernière version React Canary. @@ -598,6 +599,9 @@ export default function App() { Par défaut, React affichera dans la console (au moyen de `console.error`) toute erreur capturée par un Périmètre d'Erreurs. Pour remplacer ce comportement, vous pouvez fournir l'option `onCaughtError` afin de traiter vous-mêmes les erreurs capturées par un [Périmètre d'Erreurs](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) : +======= +By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option to handle errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary): +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -863,8 +867,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, @@ -1121,8 +1125,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, diff --git a/src/content/reference/react-dom/client/hydrateRoot.md b/src/content/reference/react-dom/client/hydrateRoot.md index 92e6ec097..fd1bec538 100644 --- a/src/content/reference/react-dom/client/hydrateRoot.md +++ b/src/content/reference/react-dom/client/hydrateRoot.md @@ -41,10 +41,17 @@ React s'attachera au HTML existant à l'intérieur de `domNode`, et prendra la m * `options` **optionnelles** : un objet avec des options pour la racine React. +<<<<<<< HEAD * `onCaughtError` **optionelle** : fonction de rappel appelée lorsque React capture une erreur au sein d'un Périmètre d'Erreur. Appelée avec l'`error` capturée par le Périmètre d'Erreur, et un objet `errorInfo` contenant la `componentStack`. * `onUncaughtError` **optionnelle** : fonction de rappel appelée lorsqu'une erreur est levée sans être capturée par un Périmètre d'Erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. * `onRecoverableError` **optionnel** : fonction de rappel appelée lorsque React retombe automatiquement sur ses pieds suite à une erreur. Appelée avec l’`error` levée par React et un objet `errorInfo` contenant la `componentStack`. Certaines de ces erreurs peuvent exposer leur cause originelle dans `error.cause`. * `identifierPrefix` **optionnel** : un préfixe textuel utilisé pour les ID générés par [`useId`](/reference/react/useId). Pratique pour éviter les conflits entre les ID au sein de racines multiples sur une même page. +======= + * **optional** `onCaughtError`: Callback called when React catches an error in an Error Boundary. Called with the `error` caught by the Error Boundary, and an `errorInfo` object containing the `componentStack`. + * **optional** `onUncaughtError`: Callback called when an error is thrown and not caught by an Error Boundary. Called with the `error` that was thrown and an `errorInfo` object containing the `componentStack`. + * **optional** `onRecoverableError`: Callback called when React automatically recovers from errors. Called with the `error` React throws, and an `errorInfo` object containing the `componentStack`. Some recoverable errors may include the original error cause as `error.cause`. + * **optional** `identifierPrefix`: A string prefix React uses for IDs generated by [`useId`.](/reference/react/useId) Useful to avoid conflicts when using multiple roots on the same page. Must be the same prefix as used on the server. +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 #### Valeur renvoyée {/*returns*/} @@ -373,6 +380,7 @@ Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hyd ### Afficher un dialogue lors d'erreurs non capturées {/*show-a-dialog-for-uncaught-errors*/} +<<<<<<< HEAD `onUncaughtError` n'est disponible que dans la dernière version React Canary. @@ -380,6 +388,9 @@ Il est toutefois rare d'appeler [`root.render`](#root-render) sur une racine hyd Par défaut, React affichera dans la console toute erreur non capturée. Pour implémenter votre propre signalement, vous pouvez fournir l'option `onUncaughtError` : +======= +By default, React will log all uncaught errors to the console. To implement your own error reporting, you can provide the optional `onUncaughtError` root option: +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -607,21 +618,11 @@ export default function App() { } ``` -```json package.json hidden -{ - "dependencies": { - "react": "canary", - "react-dom": "canary", - "react-scripts": "^5.0.0" - }, - "main": "/index.js" -} -``` - ### Afficher les erreurs de Périmètres d'Erreurs {/*displaying-error-boundary-errors*/} +<<<<<<< HEAD `onCaughtError` n'est disponible que dans la dernière version React Canary. @@ -630,6 +631,9 @@ export default function App() { Par défaut, React affichera dans la console (au moyen de `console.error`) toute erreur capturée par un Périmètre d'Erreurs. Pour remplacer ce comportement, vous pouvez fournir l'option `onCaughtError` afin de traiter vous-mêmes les erreurs capturées par un [Périmètre d'Erreurs](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) : +======= +By default, React will log all errors caught by an Error Boundary to `console.error`. To override this behavior, you can provide the optional `onCaughtError` root option for errors caught by an [Error Boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary): +>>>>>>> 6ae99dddc3b503233291da96e8fd4b118ed6d682 ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -895,8 +899,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, @@ -1152,8 +1156,8 @@ function Throw({error}) { ```json package.json hidden { "dependencies": { - "react": "canary", - "react-dom": "canary", + "react": "19.0.0-rc-3edc000d-20240926", + "react-dom": "19.0.0-rc-3edc000d-20240926", "react-scripts": "^5.0.0", "react-error-boundary": "4.0.3" }, diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md index b689fc043..79d698a82 100644 --- a/src/content/reference/react-dom/components/common.md +++ b/src/content/reference/react-dom/components/common.md @@ -246,6 +246,7 @@ Ces événements sont déclenchés pour les ressources comme [`