diff --git a/.eslintrc b/.eslintrc index f617dea26..f8b03f98a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -2,11 +2,13 @@ "root": true, "extends": "next/core-web-vitals", "parser": "@typescript-eslint/parser", - "plugins": ["@typescript-eslint"], + "plugins": ["@typescript-eslint", "eslint-plugin-react-compiler"], "rules": { "no-unused-vars": "off", - "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_" }], - "react-hooks/exhaustive-deps": "error" + "@typescript-eslint/no-unused-vars": ["error", {"varsIgnorePattern": "^_"}], + "react-hooks/exhaustive-deps": "error", + "react/no-unknown-property": ["error", {"ignore": ["meta"]}], + "react-compiler/react-compiler": "error" }, "env": { "node": true, diff --git a/.github/workflows/discord_notify.yml b/.github/workflows/discord_notify.yml new file mode 100644 index 000000000..9d83081cc --- /dev/null +++ b/.github/workflows/discord_notify.yml @@ -0,0 +1,28 @@ +name: Discord Notify + +on: + pull_request_target: + types: [labeled] + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + with: + actor: ${{ github.event.pull_request.user.login }} + is_remote: true + + notify: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + needs: check_maintainer + runs-on: ubuntu-latest + steps: + - name: Discord Webhook Action + uses: tsickert/discord-webhook@v6.0.0 + with: + webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }} + embed-author-name: ${{ github.event.pull_request.user.login }} + embed-author-url: ${{ github.event.pull_request.user.html_url }} + embed-author-icon-url: ${{ github.event.pull_request.user.avatar_url }} + embed-title: '#${{ github.event.number }} (+${{github.event.pull_request.additions}} -${{github.event.pull_request.deletions}}): ${{ github.event.pull_request.title }}' + embed-description: ${{ github.event.pull_request.body }} + embed-url: ${{ github.event.pull_request.html_url }} diff --git a/.github/workflows/label_core_team_prs.yml b/.github/workflows/label_core_team_prs.yml new file mode 100644 index 000000000..3d9fa2be1 --- /dev/null +++ b/.github/workflows/label_core_team_prs.yml @@ -0,0 +1,32 @@ +name: Label Core Team PRs + +on: + pull_request_target: + +env: + TZ: /usr/share/zoneinfo/America/Los_Angeles + # https://github.com/actions/cache/blob/main/tips-and-workarounds.md#cache-segment-restore-timeout + SEGMENT_DOWNLOAD_TIMEOUT_MINS: 1 + +jobs: + check_maintainer: + uses: facebook/react/.github/workflows/shared_check_maintainer.yml@main + with: + actor: ${{ github.event.pull_request.user.login }} + is_remote: true + + label: + if: ${{ needs.check_maintainer.outputs.is_core_team == 'true' }} + runs-on: ubuntu-latest + needs: check_maintainer + steps: + - name: Label PR as React Core Team + uses: actions/github-script@v7 + with: + script: | + github.rest.issues.addLabels({ + owner: context.repo.owner, + repo: context.repo.repo, + issue_number: ${{ github.event.number }}, + labels: ['React Core Team'] + }); 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/next-env.d.ts b/next-env.d.ts index 4f11a03dc..52e831b43 100644 --- a/next-env.d.ts +++ b/next-env.d.ts @@ -2,4 +2,4 @@ /// // NOTE: This file should not be edited -// see https://nextjs.org/docs/basic-features/typescript for more information. +// see https://nextjs.org/docs/pages/api-reference/config/typescript for more information. diff --git a/next.config.js b/next.config.js index 61ff1944a..861792c8e 100644 --- a/next.config.js +++ b/next.config.js @@ -9,10 +9,8 @@ const nextConfig = { pageExtensions: ['jsx', 'js', 'ts', 'tsx', 'mdx', 'md'], reactStrictMode: true, experimental: { - // TODO: Remove after https://github.com/vercel/next.js/issues/49355 is fixed - appDir: false, scrollRestoration: true, - legacyBrowsers: false, + reactCompiler: true, }, env: {}, webpack: (config, {dev, isServer, ...options}) => { diff --git a/package.json b/package.json index ad9b9baa4..6d6b53f92 100644 --- a/package.json +++ b/package.json @@ -18,14 +18,14 @@ "ci-check": "npm-run-all prettier:diff --parallel lint tsc lint-heading-ids rss", "tsc": "tsc --noEmit", "start": "next start", - "postinstall": "patch-package && (is-ci || husky install .husky)", + "postinstall": "is-ci || husky install .husky", "check-all": "npm-run-all prettier lint:fix tsc rss", "rss": "node scripts/generateRss.js" }, "dependencies": { "@codesandbox/sandpack-react": "2.13.5", - "@docsearch/css": "^3.6.1", - "@docsearch/react": "^3.6.1", + "@docsearch/css": "^3.8.3", + "@docsearch/react": "^3.8.3", "@headlessui/react": "^1.7.0", "@radix-ui/react-context-menu": "^2.1.5", "body-scroll-lock": "^3.1.3", @@ -33,12 +33,12 @@ "date-fns": "^2.16.1", "debounce": "^1.2.1", "github-slugger": "^1.3.0", - "next": "^13.4.1", + "next": "15.1.0", "next-remote-watch": "^1.0.0", "parse-numeric-range": "^1.2.0", - "react": "^0.0.0-experimental-16d053d59-20230506", + "react": "^19.0.0", "react-collapsed": "4.0.4", - "react-dom": "^0.0.0-experimental-16d053d59-20230506", + "react-dom": "^19.0.0", "remark-frontmatter": "^4.0.1", "remark-gfm": "^3.0.1" }, @@ -54,13 +54,14 @@ "@types/mdx-js__react": "^1.5.2", "@types/node": "^14.6.4", "@types/parse-numeric-range": "^0.0.1", - "@types/react": "^18.0.9", - "@types/react-dom": "^18.0.5", + "@types/react": "^19.0.0", + "@types/react-dom": "^19.0.0", "@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/parser": "^5.36.2", "asyncro": "^3.0.0", "autoprefixer": "^10.4.2", "babel-eslint": "10.x", + "babel-plugin-react-compiler": "19.0.0-beta-e552027-20250112", "eslint": "7.x", "eslint-config-next": "12.0.3", "eslint-config-react-app": "^5.2.1", @@ -68,6 +69,7 @@ "eslint-plugin-import": "2.x", "eslint-plugin-jsx-a11y": "6.x", "eslint-plugin-react": "7.x", + "eslint-plugin-react-compiler": "^19.0.0-beta-e552027-20250112", "eslint-plugin-react-hooks": "^0.0.0-experimental-fabef7a6b-20221215", "fs-extra": "^9.0.1", "globby": "^11.0.1", @@ -78,7 +80,6 @@ "mdast-util-to-string": "^1.1.0", "metro-cache": "0.72.2", "npm-run-all": "^4.1.5", - "patch-package": "^6.2.2", "postcss": "^8.4.5", "postcss-flexbugs-fixes": "4.2.1", "postcss-preset-env": "^6.7.0", @@ -94,7 +95,7 @@ "retext-smartypants": "^4.0.0", "rss": "^1.2.2", "tailwindcss": "^3.4.1", - "typescript": "^4.0.2", + "typescript": "^5.7.2", "unist-util-visit": "^2.0.3", "webpack-bundle-analyzer": "^4.5.0" }, @@ -109,5 +110,6 @@ "lint-staged": { "*.{js,ts,jsx,tsx,css}": "yarn prettier", "src/**/*.md": "yarn fix-headings" - } + }, + "packageManager": "yarn@1.22.22" } diff --git a/patches/next+13.4.1.patch b/patches/next+13.4.1.patch deleted file mode 100644 index 6de490aa4..000000000 --- a/patches/next+13.4.1.patch +++ /dev/null @@ -1,22 +0,0 @@ -diff --git a/node_modules/next/dist/server/render.js b/node_modules/next/dist/server/render.js -index a1f8648..1b3d608 100644 ---- a/node_modules/next/dist/server/render.js -+++ b/node_modules/next/dist/server/render.js -@@ -758,9 +758,14 @@ async function renderToHTML(req, res, pathname, query, renderOpts) { - // Always using react concurrent rendering mode with required react version 18.x - const renderShell = async (EnhancedApp, EnhancedComponent)=>{ - const content = renderContent(EnhancedApp, EnhancedComponent); -- return await (0, _nodewebstreamshelper.renderToInitialStream)({ -- ReactDOMServer: _serverbrowser.default, -- element: content -+ return new Promise((resolve, reject) => { -+ (0, _nodewebstreamshelper.renderToInitialStream)({ -+ ReactDOMServer: _serverbrowser.default, -+ element: content, -+ streamOptions: { -+ onError: reject -+ } -+ }).then(resolve, reject); - }); - }; - const createBodyResult = (0, _tracer.getTracer)().wrap(_constants2.RenderSpan.createBodyResult, (initialStream, suffix)=>{ diff --git a/patches/next-remote-watch+1.0.0.patch b/patches/next-remote-watch+1.0.0.patch deleted file mode 100644 index c9ecef84d..000000000 --- a/patches/next-remote-watch+1.0.0.patch +++ /dev/null @@ -1,16 +0,0 @@ -diff --git a/node_modules/next-remote-watch/bin/next-remote-watch b/node_modules/next-remote-watch/bin/next-remote-watch -index c055b66..a2f749c 100755 ---- a/node_modules/next-remote-watch/bin/next-remote-watch -+++ b/node_modules/next-remote-watch/bin/next-remote-watch -@@ -66,7 +66,10 @@ app.prepare().then(() => { - } - } - -- app.server.hotReloader.send('reloadPage') -+ app.server.hotReloader.send({ -+ event: 'serverOnlyChanges', -+ pages: ['/[[...markdownPath]]'] -+ }); - } - ) - } diff --git a/public/images/team/andrey-lunyov.jpg b/public/images/team/andrey-lunyov.jpg deleted file mode 100644 index aeaaec06a..000000000 Binary files a/public/images/team/andrey-lunyov.jpg and /dev/null differ diff --git a/public/images/team/hendrik.jpg b/public/images/team/hendrik.jpg new file mode 100644 index 000000000..b39ea5be2 Binary files /dev/null and b/public/images/team/hendrik.jpg differ diff --git a/public/images/team/jordan.jpg b/public/images/team/jordan.jpg new file mode 100644 index 000000000..d8874a29f Binary files /dev/null and b/public/images/team/jordan.jpg differ diff --git a/public/images/team/kathryn-middleton.jpg b/public/images/team/kathryn-middleton.jpg deleted file mode 100644 index 904c3b134..000000000 Binary files a/public/images/team/kathryn-middleton.jpg and /dev/null differ diff --git a/public/images/team/lauren.jpg b/public/images/team/lauren.jpg index cb08b9725..a8615aa00 100644 Binary files a/public/images/team/lauren.jpg and b/public/images/team/lauren.jpg differ diff --git a/public/images/team/luna-wei.jpg b/public/images/team/luna-wei.jpg deleted file mode 100644 index cdc4a2b6a..000000000 Binary files a/public/images/team/luna-wei.jpg and /dev/null differ diff --git a/public/images/team/mike.jpg b/public/images/team/mike.jpg new file mode 100644 index 000000000..39fe23fea Binary files /dev/null and b/public/images/team/mike.jpg differ diff --git a/public/images/team/noahlemen.jpg b/public/images/team/noahlemen.jpg deleted file mode 100644 index e3f788d89..000000000 Binary files a/public/images/team/noahlemen.jpg and /dev/null differ diff --git a/public/images/team/pieter.jpg b/public/images/team/pieter.jpg new file mode 100644 index 000000000..d098e5abe Binary files /dev/null and b/public/images/team/pieter.jpg differ diff --git a/public/images/team/sam.jpg b/public/images/team/sam.jpg deleted file mode 100644 index f73474b91..000000000 Binary files a/public/images/team/sam.jpg and /dev/null differ diff --git a/public/images/team/sathya.jpg b/public/images/team/sathya.jpg deleted file mode 100644 index 0f087f4a3..000000000 Binary files a/public/images/team/sathya.jpg and /dev/null differ diff --git a/public/images/team/tianyu.jpg b/public/images/team/tianyu.jpg deleted file mode 100644 index aeb6ed9fa..000000000 Binary files a/public/images/team/tianyu.jpg and /dev/null differ diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx index 38b1f2c5f..13fe6d3a9 100644 --- a/src/components/ExternalLink.tsx +++ b/src/components/ExternalLink.tsx @@ -1,13 +1,17 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {DetailedHTMLProps, AnchorHTMLAttributes} from 'react'; export function ExternalLink({ href, target, children, ...props -}: JSX.IntrinsicElements['a']) { +}: DetailedHTMLProps< + AnchorHTMLAttributes, + HTMLAnchorElement +>) { return ( {children} diff --git a/src/components/Icon/IconArrow.tsx b/src/components/Icon/IconArrow.tsx index 714cccd82..61e4e52cd 100644 --- a/src/components/Icon/IconArrow.tsx +++ b/src/components/Icon/IconArrow.tsx @@ -4,9 +4,10 @@ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrow = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. diff --git a/src/components/Icon/IconArrowSmall.tsx b/src/components/Icon/IconArrowSmall.tsx index 6653dc387..4a3d3ad02 100644 --- a/src/components/Icon/IconArrowSmall.tsx +++ b/src/components/Icon/IconArrowSmall.tsx @@ -4,9 +4,10 @@ import {memo} from 'react'; import cn from 'classnames'; +import type {SVGProps} from 'react'; export const IconArrowSmall = memo< - JSX.IntrinsicElements['svg'] & { + SVGProps & { /** * The direction the arrow should point. * `start` and `end` are relative to the current locale. diff --git a/src/components/Icon/IconBsky.tsx b/src/components/Icon/IconBsky.tsx index 6645152dd..5d461556f 100644 --- a/src/components/Icon/IconBsky.tsx +++ b/src/components/Icon/IconBsky.tsx @@ -3,10 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconBsky = memo(function IconBsky( - props -) { +export const IconBsky = memo>(function IconBsky(props) { return ( (function IconClose( +export const IconClose = memo>(function IconClose( props ) { return ( diff --git a/src/components/Icon/IconFacebookCircle.tsx b/src/components/Icon/IconFacebookCircle.tsx index 0900d6815..7f1080afa 100644 --- a/src/components/Icon/IconFacebookCircle.tsx +++ b/src/components/Icon/IconFacebookCircle.tsx @@ -3,8 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconFacebookCircle = memo( +export const IconFacebookCircle = memo>( function IconFacebookCircle(props) { return ( ( - function IconGitHub(props) { - return ( - - - - ); - } -); +export const IconGitHub = memo>(function IconGitHub( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconHamburger.tsx b/src/components/Icon/IconHamburger.tsx index 5e6aa725a..8bc90ee0c 100644 --- a/src/components/Icon/IconHamburger.tsx +++ b/src/components/Icon/IconHamburger.tsx @@ -3,8 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconHamburger = memo( +export const IconHamburger = memo>( function IconHamburger(props) { return ( ( +export const IconInstagram = memo>( function IconInstagram(props) { return ( (function IconLink( - props -) { +export const IconLink = memo>(function IconLink(props) { return ( ( - function IconNewPage(props) { - return ( - - - - - ); - } -); +export const IconNewPage = memo>(function IconNewPage( + props +) { + return ( + + + + + ); +}); 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/Icon/IconRss.tsx b/src/components/Icon/IconRss.tsx index f2a52ee25..6208236f4 100644 --- a/src/components/Icon/IconRss.tsx +++ b/src/components/Icon/IconRss.tsx @@ -3,10 +3,9 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconRss = memo(function IconRss( - props -) { +export const IconRss = memo>(function IconRss(props) { return ( ( - function IconSearch(props) { - return ( - - - - ); - } -); +export const IconSearch = memo>(function IconSearch( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconThreads.tsx b/src/components/Icon/IconThreads.tsx index 5a007657f..9ea0bafdf 100644 --- a/src/components/Icon/IconThreads.tsx +++ b/src/components/Icon/IconThreads.tsx @@ -3,22 +3,23 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconThreads = memo( - function IconThreads(props) { - return ( - - - - ); - } -); +export const IconThreads = memo>(function IconThreads( + props +) { + return ( + + + + ); +}); diff --git a/src/components/Icon/IconTwitter.tsx b/src/components/Icon/IconTwitter.tsx index e7b0cf09e..e84971f4e 100644 --- a/src/components/Icon/IconTwitter.tsx +++ b/src/components/Icon/IconTwitter.tsx @@ -3,20 +3,21 @@ */ import {memo} from 'react'; +import type {SVGProps} from 'react'; -export const IconTwitter = memo( - function IconTwitter(props) { - return ( - - - - - ); - } -); +export const IconTwitter = memo>(function IconTwitter( + props +) { + return ( + + + + + ); +}); diff --git a/src/components/Layout/Sidebar/SidebarLink.tsx b/src/components/Layout/Sidebar/SidebarLink.tsx index 8ab329eec..c234868aa 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' && ( >>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 /> )}
diff --git a/src/components/Layout/Sidebar/SidebarRouteTree.tsx b/src/components/Layout/Sidebar/SidebarRouteTree.tsx index 3f058073c..72003df74 100644 --- a/src/components/Layout/Sidebar/SidebarRouteTree.tsx +++ b/src/components/Layout/Sidebar/SidebarRouteTree.tsx @@ -38,6 +38,7 @@ function CollapseWrapper({ // Disable pointer events while animating. const isExpandedRef = useRef(isExpanded); if (typeof window !== 'undefined') { + // eslint-disable-next-line react-compiler/react-compiler // eslint-disable-next-line react-hooks/rules-of-hooks useLayoutEffect(() => { const wasExpanded = isExpandedRef.current; @@ -87,7 +88,7 @@ export function SidebarRouteTree({ path, title, routes, - canary, + version, heading, hasSectionHeader, sectionHeader, @@ -121,7 +122,7 @@ export function SidebarRouteTree({ selected={selected} level={level} title={title} - canary={canary} + version={version} isExpanded={isExpanded} hideArrow={isForceExpanded} /> @@ -145,7 +146,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/Logo.tsx b/src/components/Logo.tsx index 07e72c992..8c4f7da4f 100644 --- a/src/components/Logo.tsx +++ b/src/components/Logo.tsx @@ -1,8 +1,9 @@ /* * Copyright (c) Facebook, Inc. and its affiliates. */ +import type {SVGProps} from 'react'; -export function Logo(props: JSX.IntrinsicElements['svg']) { +export function Logo(props: SVGProps) { return ( = {}; let content: React.ReactElement[] = []; Children.forEach(children, (child) => { - const {props, type} = child; + const {props, type} = child as React.ReactElement<{ + children?: string; + id?: string; + }>; switch ((type as any).mdxName) { case 'Solution': { challenge.solution = child; diff --git a/src/components/MDX/CodeBlock/CodeBlock.tsx b/src/components/MDX/CodeBlock/CodeBlock.tsx index 7eef0abe8..1fd9a8a90 100644 --- a/src/components/MDX/CodeBlock/CodeBlock.tsx +++ b/src/components/MDX/CodeBlock/CodeBlock.tsx @@ -289,7 +289,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle { function getLineDecorators( code: string, - meta: string + meta?: string ): Array<{ line: number; className: string; @@ -309,7 +309,7 @@ function getLineDecorators( function getInlineDecorators( code: string, - meta: string + meta?: string ): Array<{ step: number; line: number; diff --git a/src/components/MDX/CodeDiagram.tsx b/src/components/MDX/CodeDiagram.tsx index 7a503f068..2a198fc56 100644 --- a/src/components/MDX/CodeDiagram.tsx +++ b/src/components/MDX/CodeDiagram.tsx @@ -17,7 +17,14 @@ export function CodeDiagram({children, flip = false}: CodeDiagramProps) { }); const content = Children.toArray(children).map((child: any) => { if (child.type?.mdxName === 'pre') { - return ; + return ( + + ); } else if (child.type === 'img') { return null; } else { diff --git a/src/components/MDX/ConsoleBlock.tsx b/src/components/MDX/ConsoleBlock.tsx index 6e704b417..6044b1370 100644 --- a/src/components/MDX/ConsoleBlock.tsx +++ b/src/components/MDX/ConsoleBlock.tsx @@ -38,7 +38,8 @@ export function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } return ( @@ -113,7 +114,8 @@ export function ConsoleLogLine({children, level}: ConsoleBlockProps) { if (typeof children === 'string') { message = children; } else if (isValidElement(children)) { - message = children.props.children; + message = (children as React.ReactElement<{children?: React.ReactNode}>) + .props.children; } else if (Array.isArray(children)) { message = children.reduce((result, child) => { if (typeof child === 'string') { diff --git a/src/components/MDX/ErrorDecoder.tsx b/src/components/MDX/ErrorDecoder.tsx index 198aa939d..b04fa9f79 100644 --- a/src/components/MDX/ErrorDecoder.tsx +++ b/src/components/MDX/ErrorDecoder.tsx @@ -11,7 +11,7 @@ function replaceArgs( return msg.replace(/%s/g, function () { const arg = argList[argIdx++]; // arg can be an empty string: ?args[0]=&args[1]=count - return arg === undefined || arg === '' ? replacer : arg; + return arg === undefined ? replacer : arg; }); } 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/InlineCode.tsx b/src/components/MDX/InlineCode.tsx index 0e8db0165..5759a7c0a 100644 --- a/src/components/MDX/InlineCode.tsx +++ b/src/components/MDX/InlineCode.tsx @@ -3,6 +3,7 @@ */ import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; interface InlineCodeProps { isLink?: boolean; @@ -11,7 +12,7 @@ interface InlineCodeProps { function InlineCode({ isLink, ...props -}: JSX.IntrinsicElements['code'] & InlineCodeProps) { +}: HTMLAttributes & InlineCodeProps) { return ( in case of RTL languages to avoid like `()console.log` to be rendered as `console.log()` diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx index a6dfdfd31..a309e1194 100644 --- a/src/components/MDX/MDXComponents.tsx +++ b/src/components/MDX/MDXComponents.tsx @@ -5,6 +5,7 @@ import {Children, useContext, useMemo} from 'react'; import * as React from 'react'; import cn from 'classnames'; +import type {HTMLAttributes} from 'react'; import CodeBlock from './CodeBlock'; import {CodeDiagram} from './CodeDiagram'; @@ -59,21 +60,31 @@ function CodeStep({children, step}: {children: any; step: number}) { ); } +<<<<<<< HEAD const P = (p: JSX.IntrinsicElements['p']) => (

+======= +const P = (p: HTMLAttributes) => ( +

+>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ); -const Strong = (strong: JSX.IntrinsicElements['strong']) => ( +const Strong = (strong: HTMLAttributes) => ( ); -const OL = (p: JSX.IntrinsicElements['ol']) => ( +const OL = (p: HTMLAttributes) => (

    ); +<<<<<<< HEAD const LI = (p: JSX.IntrinsicElements['li']) => (
  1. +======= +const LI = (p: HTMLAttributes) => ( +
  2. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ); -const UL = (p: JSX.IntrinsicElements['ul']) => ( +const UL = (p: HTMLAttributes) => (
      ); @@ -97,6 +108,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 Blockquote = ({ - children, - ...props -}: JSX.IntrinsicElements['blockquote']) => { +const NextMajorBadge = ({title}: {title: string}) => ( + + React 19 + +); + +const RSCBadge = ({title}: {title: string}) => ( + + RSC + +); + +const Blockquote = ({children, ...props}: HTMLAttributes) => { return (
      ({}); if (!lineCountRef.current[activeFile]) { + // eslint-disable-next-line react-compiler/react-compiler lineCountRef.current[activeFile] = code.split('\n').length; } const lineCount = lineCountRef.current[activeFile]; diff --git a/src/components/MDX/Sandpack/LoadingOverlay.tsx b/src/components/MDX/Sandpack/LoadingOverlay.tsx index cd3f38fca..de883629c 100644 --- a/src/components/MDX/Sandpack/LoadingOverlay.tsx +++ b/src/components/MDX/Sandpack/LoadingOverlay.tsx @@ -17,7 +17,7 @@ export const LoadingOverlay = ({ clientId: string; dependenciesLoading: boolean; forceLoading: boolean; -} & React.HTMLAttributes): JSX.Element | null => { +} & React.HTMLAttributes): React.ReactNode | null => { const loadingOverlayState = useLoadingOverlayState( clientId, dependenciesLoading, @@ -64,6 +64,7 @@ export const LoadingOverlay = ({ transition: `opacity ${FADE_ANIMATION_DURATION}ms ease-out`, }}>
      + {/* @ts-ignore: the OpenInCodeSandboxButton type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
      diff --git a/src/components/MDX/Sandpack/NavigationBar.tsx b/src/components/MDX/Sandpack/NavigationBar.tsx index 8662c92f0..54740f89e 100644 --- a/src/components/MDX/Sandpack/NavigationBar.tsx +++ b/src/components/MDX/Sandpack/NavigationBar.tsx @@ -115,7 +115,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { return (
      + {/* If Prettier reformats this block, the two @ts-ignore directives will no longer be adjacent to the problematic lines, causing TypeScript errors */} + {/* prettier-ignore */}
      + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */}
      @@ -129,8 +132,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) { 'w-[fit-content]', showDropdown ? 'invisible' : '' )}> + {/* @ts-ignore: the FileTabs type from '@codesandbox/sandpack-react/unstyled' is incompatible with JSX in React 19 */}
      + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} {({open}) => ( // If tabs don't fit, display the dropdown instead. @@ -160,10 +165,10 @@ export function NavigationBar({providedFiles}: {providedFiles: Array}) {
      - {isMultiFile && showDropdown && ( - - {visibleFiles.map((filePath: string) => ( - + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {isMultiFile && showDropdown && ( + {/* @ts-ignore: the Listbox type from '@headlessui/react' is incompatible with JSX in React 19 */} + {visibleFiles.map((filePath: string) => ( {({active}) => (
    • { ) { return result; } - const {props} = codeSnippet.props.children; + const {props} = ( + codeSnippet.props as PropsWithChildren<{ + children: ReactElement< + HTMLAttributes & {meta?: string} + >; + }> + ).children; let filePath; // path in the folder structure let fileHidden = false; // if the file is available as a tab let fileActive = false; // if the file tab is shown by default 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/components/MDX/TeamMember.tsx b/src/components/MDX/TeamMember.tsx index dffb767dc..6e692d27c 100644 --- a/src/components/MDX/TeamMember.tsx +++ b/src/components/MDX/TeamMember.tsx @@ -3,7 +3,7 @@ */ import * as React from 'react'; -import Image from 'next/image'; +import Image from 'next/legacy/image'; import {IconTwitter} from '../Icon/IconTwitter'; import {IconThreads} from '../Icon/IconThreads'; import {IconBsky} from '../Icon/IconBsky'; @@ -39,11 +39,9 @@ export function TeamMember({ personal, }: TeamMemberProps) { if (name == null || title == null || permalink == null || children == null) { + const identifier = name ?? title ?? permalink ?? 'unknown'; throw new Error( - 'Expected name, title, permalink, and children for ' + name ?? - title ?? - permalink ?? - 'unknown' + `Expected name, title, permalink, and children for ${identifier}` ); } return ( diff --git a/src/components/MDX/TerminalBlock.tsx b/src/components/MDX/TerminalBlock.tsx index fc13af338..475292716 100644 --- a/src/components/MDX/TerminalBlock.tsx +++ b/src/components/MDX/TerminalBlock.tsx @@ -31,9 +31,11 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) { message = children; } else if ( isValidElement(children) && - typeof children.props.children === 'string' + typeof (children as React.ReactElement<{children: string}>).props + .children === 'string' ) { - message = children.props.children; + message = (children as React.ReactElement<{children: string}>).props + .children; } else { throw Error('Expected TerminalBlock children to be a plain string.'); } @@ -71,7 +73,7 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
    • diff --git a/src/components/Search.tsx b/src/components/Search.tsx index f5c963f67..c7401487b 100644 --- a/src/components/Search.tsx +++ b/src/components/Search.tsx @@ -9,6 +9,8 @@ import {lazy, useEffect} from 'react'; import * as React from 'react'; import {createPortal} from 'react-dom'; import {siteConfig} from 'siteConfig'; +import type {ComponentType, PropsWithChildren} from 'react'; +import type {DocSearchModalProps} from '@docsearch/react/modal'; export interface SearchProps { appId?: string; @@ -83,9 +85,10 @@ const options = { }; const DocSearchModal: any = lazy(() => - // @ts-ignore import('@docsearch/react/modal').then((mod) => ({ - default: mod.DocSearchModal, + default: mod.DocSearchModal as ComponentType< + PropsWithChildren + >, })) ); diff --git a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md index df7bfc1fd..b28205264 100644 --- a/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md +++ b/src/content/blog/2020/12/21/data-fetching-with-react-server-components.md @@ -6,7 +6,11 @@ description: 2020, c'était long. Alors que l'année se termine, nous voulions --- +<<<<<<< HEAD Le 21 décembre 2020 par [Dan Abramov](https://twitter.com/dan_abramov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS) et [Sebastian Markbåge](https://twitter.com/sebmarkbage) +======= +December 21, 2020 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Lauren Tan](https://twitter.com/potetotes), [Joseph Savona](https://twitter.com/en_JS), and [Sebastian Markbåge](https://twitter.com/sebmarkbage) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- diff --git a/src/content/blog/2021/06/08/the-plan-for-react-18.md b/src/content/blog/2021/06/08/the-plan-for-react-18.md index 10f74aeb7..f65e71545 100644 --- a/src/content/blog/2021/06/08/the-plan-for-react-18.md +++ b/src/content/blog/2021/06/08/the-plan-for-react-18.md @@ -5,7 +5,11 @@ date: 2021/06/08 description: L'équipe React est ravie de vous donner quelques nouvelles. Nous avons commencé à travailler sur React 18, qui sera notre prochaine version majeure. Nous avons créé un groupe de travail pour préparer la communauté à l'adoption graduelle des nouvelles fonctionnalités de React 18. Nous avons publié une React 18 Alpha pour que les mainteneurs de bibliothèques puissent l'essayer et nous faire leurs retours… --- +<<<<<<< HEAD Le 8 juin 2021 par [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://twitter.com/dan_abramov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Seth Webster](https://twitter.com/sethwebster) +======= +June 8, 2021 by [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://github.com/bvaughn), [Christine Abernathy](https://twitter.com/abernathyca), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Seth Webster](https://twitter.com/sethwebster) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- diff --git a/src/content/blog/2021/12/17/react-conf-2021-recap.md b/src/content/blog/2021/12/17/react-conf-2021-recap.md index 944902a7e..8c41a8e86 100644 --- a/src/content/blog/2021/12/17/react-conf-2021-recap.md +++ b/src/content/blog/2021/12/17/react-conf-2021-recap.md @@ -132,7 +132,11 @@ C'était la première fois que nous planifiions une conférence nous-mêmes, et Merci tout d'abord à nos orateurs et oratrices [Aakansha Doshi](https://twitter.com/aakansha1216), [Andrew Clark](https://twitter.com/acdlite), [Brian Vaughn](https://twitter.com/brian_d_vaughn), [Daishi Kato](https://twitter.com/dai_shi), [Debbie O'Brien](https://twitter.com/debs_obrien), [Delba de Oliveira](https://twitter.com/delba_oliveira), [Diego Haz](https://twitter.com/diegohaz), [Eric Rozell](https://twitter.com/EricRozell), [Helen Lin](https://twitter.com/wizardlyhel), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), [Linton Ye](https://twitter.com/lintonye), [Lyle Troxell](https://twitter.com/lyle), [Rachel Nabors](https://twitter.com/rachelnabors), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Balicki](https://twitter.com/StatisticsFTW), [Roman Rädle](https://twitter.com/raedle), [Sarah Rainsberger](https://twitter.com/sarah11918), [Shaundai Person](https://twitter.com/shaundai), [Shruti Kapoor](https://twitter.com/shrutikapoor08), [Steven Moyes](https://twitter.com/moyessa), [Tafu Nakazaki](https://twitter.com/hawaiiman0) et [Xuan Huang (黄玄)](https://twitter.com/Huxpro). +<<<<<<< HEAD Merci à celles et ceux qui ont aidé en fournissant des retours sur les présentations, notamment [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors) et [Tim Yung](https://twitter.com/yungsters). +======= +Thanks to everyone who helped provide feedback on talks including [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Eli White](https://twitter.com/Eli_White), [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Rachel Nabors](https://twitter.com/rachelnabors), and [Tim Yung](https://twitter.com/yungsters). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Merci [Lauren Tan](https://twitter.com/potetotes) pour avoir mis en place le Discord de la conférence et avoir joué le rôle de notre administrateur Discord. diff --git a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md index a545d370e..78a4885d3 100644 --- a/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md +++ b/src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md @@ -6,7 +6,11 @@ description: React 18 a pris des années, mais il était porteur de précieuses --- +<<<<<<< HEAD Le 15 juin 2022 par [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://twitter.com/dan_abramov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Xuan Huang](https://twitter.com/Huxpro) +======= +June 15, 2022 by [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Jan Kassens](https://twitter.com/kassens), [Joseph Savona](https://twitter.com/en_JS), [Josh Story](https://twitter.com/joshcstory), [Lauren Tan](https://twitter.com/potetotes), [Luna Ruan](https://twitter.com/lunaruan), [Mengdi Chen](https://twitter.com/mengdi_en), [Rick Hanlon](https://twitter.com/rickhanlonii), [Robert Zhang](https://twitter.com/jiaxuanzhang01), [Sathya Gunasekaran](https://twitter.com/_gsathya), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Xuan Huang](https://twitter.com/Huxpro) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index 41fbf7328..db551a99a 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -5,7 +5,11 @@ date: 2023/03/16 description: Nous sommes enchantés d'annoncer aujourd'hui la sortie de react.dev, le nouveau site officiel de React et de sa documentation. Dans ce billet, nous aimerions vous faire faire un tour du nouveau site. --- +<<<<<<< HEAD Le 16 mars 2023 par [Dan Abramov](https://twitter.com/dan_abramov) et [Rachel Nabors](https://twitter.com/rachelnabors) +======= +March 16, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Rachel Nabors](https://twitter.com/rachelnabors) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- @@ -632,7 +636,11 @@ Nous pensons qu'il n'y a jamais eu de meilleur moment pour apprendre React. ## Qui a travaillé sur tout ça ? {/*who-worked-on-this*/} +<<<<<<< HEAD Dans l'équipe React, [Rachel Nabors](https://twitter.com/rachelnabors/) a piloté le projet (et fourni les illustrations) et [Dan Abramov](https://twitter.com/dan_abramov) a conçu le cursus. Ils ont par ailleurs co-écrit ensemble la majorité du contenu. +======= +On the React team, [Rachel Nabors](https://twitter.com/rachelnabors/) led the project (and provided the illustrations), and [Dan Abramov](https://bsky.app/profile/danabra.mov) designed the curriculum. They co-authored most of the content together as well. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Naturellement, un projet de cette taille ne se fait pas avec une petite équipe dans son coin ! Nous avons beaucoup de monde à remercier ! diff --git a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md index 66599c139..188d31797 100644 --- a/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md +++ b/src/content/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023.md @@ -96,9 +96,16 @@ Depuis notre dernier bulletin, nous avons testé une version expérimentale du p L'API de pistage des transitions vous permet de détecter que des [transitions React](/reference/react/useTransition) ralentissent, et d'enquêter sur les causes du ralentissement. Depuis notre dernier bulletin, nous avons terminé la conception initiale de l'API et publié une [RFC](https://github.com/reactjs/rfcs/pull/238). Les capacités de base ont été implémentées. Le projet est actuellement en suspens. Nous sommes à l'écoute de vos retours sur la RFC et espérons reprendre le développement pour fournir de meilleurs outils de mesure de la performance pour React. Ça sera particulièrement utile pour les routeurs basés sur les transitions React, tels que [l'*App Router* de Next.js](/learn/start-a-new-react-project#nextjs-app-router). +<<<<<<< HEAD --- En complément de ce bulletin, notre équipe est récemment apparue dans des podcasts communautaires et des *livestreams* pour parler de notre travail et répondre à vos questions. +======= +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were interviewed by [Kent C. Dodds on his YouTube channel](https://www.youtube.com/watch?v=h7tur48JSaw), where they discussed concerns around React Server Components. +* [Dan Abramov](https://bsky.app/profile/danabra.mov) and [Joe Savona](https://twitter.com/en_JS) were guests on the [JSParty podcast](https://jsparty.fm/267) and shared their thoughts about the future of React. + +Thanks to [Andrew Clark](https://twitter.com/acdlite), [Dan Abramov](https://bsky.app/profile/danabra.mov), [Dave McCabe](https://twitter.com/mcc_abe), [Luna Wei](https://twitter.com/lunaleaps), [Matt Carroll](https://twitter.com/mattcarrollcode), [Sean Keegan](https://twitter.com/DevRelSean), [Sebastian Silbermann](https://twitter.com/sebsilbermann), [Seth Webster](https://twitter.com/sethwebster), and [Sophie Alpert](https://twitter.com/sophiebits) for reviewing this post. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 * [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient interviewés par [Kent C. Dodds sur sa chaîne YouTube](https://www.youtube.com/watch?v=h7tur48JSaw), pour parler de leurs préoccupations sur les React Server Components. * [Dan Abramov](https://twitter.com/dan_abramov) et [Joe Savona](https://twitter.com/en_JS) étaient les invités du [podcast JSParty](https://jsparty.fm/267) pour parler de leurd visions respectives de l'avenir de React. diff --git a/src/content/blog/2023/05/03/react-canaries.md b/src/content/blog/2023/05/03/react-canaries.md index f7a39d268..ad1a5a7e9 100644 --- a/src/content/blog/2023/05/03/react-canaries.md +++ b/src/content/blog/2023/05/03/react-canaries.md @@ -6,7 +6,11 @@ description: Nous aimerions offrir à la communauté React un moyen d'adopter in --- +<<<<<<< HEAD Le 3 mai 2023 par [Dan Abramov](https://twitter.com/dan_abramov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage) et [Andrew Clark](https://twitter.com/acdlite) +======= +May 3, 2023 by [Dan Abramov](https://bsky.app/profile/danabra.mov), [Sophie Alpert](https://twitter.com/sophiebits), [Rick Hanlon](https://twitter.com/rickhanlonii), [Sebastian Markbåge](https://twitter.com/sebmarkbage), and [Andrew Clark](https://twitter.com/acdlite) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- diff --git a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md index fed42389a..79f4604fb 100644 --- a/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md +++ b/src/content/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024.md @@ -5,7 +5,11 @@ date: 2024/02/15 description: 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 et nous aimerions partager ce que nous avons appris. --- +<<<<<<< HEAD Le 15 février 2024 par [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode) et [Dan Abramov](https://twitter.com/dan_abramov). +======= +February 15, 2024 by [Joseph Savona](https://twitter.com/en_JS), [Ricky Hanlon](https://twitter.com/rickhanlonii), [Andrew Clark](https://twitter.com/acdlite), [Matt Carroll](https://twitter.com/mattcarrollcode), and [Dan Abramov](https://bsky.app/profile/danabra.mov). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- 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..e4c1e7991 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" +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 @@ -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). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- @@ -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 +``` +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 -```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) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Ç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) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ### 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). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 --- 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..d49865e4b 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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,6 +40,7 @@ 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 : - [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) par [Lydia Hallie](https://twitter.com/lydiahallie) @@ -44,6 +49,16 @@ Pour la suite de la plénière, [Josh Story](https://twitter.com/joshcstory) et - [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) par [Aurora Walberg Scharff](https://twitter.com/aurorascharff) - [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) par [Dan Abramov](https://twitter.com/dan_abramov2) - [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) par [Kent C. Dodds](https://twitter.com/kentcdodds) +======= +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: + +- [What's new in React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=8880s) by [Lydia Hallie](https://twitter.com/lydiahallie) +- [React Unpacked: A Roadmap to React 19](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=10112s) by [Sam Selikoff](https://twitter.com/samselikoff) +- [React 19 Deep Dive: Coordinating HTML](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=24916s) by [Josh Story](https://twitter.com/joshcstory) +- [Enhancing Forms with React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff) +- [React for Two Computers](https://www.youtube.com/watch?v=T8TZQ6k4SLE&t=18825s) by [Dan Abramov](https://bsky.app/profile/danabra.mov) +- [And Now You Understand React Server Components](https://www.youtube.com/watch?v=0ckOUBiuxVY&t=11256s) by [Kent C. Dodds](https://twitter.com/kentcdodds) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Nous avons conclu la plénière avec [Joe Savona](https://twitter.com/en_JS), [Sathya Gunasekaran](https://twitter.com/_gsathya) et [Mofei Zhang](https://twitter.com/zmofei) qui ont annoncé que le React Compiler était désormais [*open source*](https://github.com/facebook/react/pull/29061) et ont mis à disposition une version expérimentale du React Compiler pour que chacun·e puisse l'essayer. diff --git a/src/content/blog/2024/04/25/react-19.md b/src/content/blog/2024/12/05/react-19.md similarity index 90% rename from src/content/blog/2024/04/25/react-19.md rename to src/content/blog/2024/12/05/react-19.md index 44dac8fcd..fa9f34c8c 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) +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14: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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14: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) @@ -283,9 +313,13 @@ A component was suspended by an uncached promise. Creating promises inside a Cli +<<<<<<< HEAD:src/content/blog/2024/04/25/react-19.md *(« Un composant est suspendu sur une promesse absente du cache. Nous ne prenons pas encore en charge les promesses créées dans un Composant Client ou dans un Hook, sauf au travers de bibliothèques ou frameworks compatibles avec Suspense. » — NdT)* Pour corriger ça, vous devez passer une promesse issue d'une bibliothèque ou d'un framework prenant en charge la mise en cache de promesses à destination de Suspense. Nous prévoyons de livrer à l'avenir des fonctionnalités qui faciliteront la mise en cache de promesses au sein du rendu. +======= +To fix, you need to pass a promise from a Suspense powered library or framework that supports caching for promises. In the future we plan to ship features to make it easier to cache promises in render. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14:src/content/blog/2024/12/05/react-19.md @@ -313,7 +347,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). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14:src/content/blog/2024/12/05/react-19.md ## React Server Components {/*react-server-components*/} @@ -327,7 +388,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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14: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 +830,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._ +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14: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..f0b19510d 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 ... + + + + +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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 +======= + +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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/acknowledgements.md b/src/content/community/acknowledgements.md index 2e6dca4fb..207679e3f 100644 --- a/src/content/community/acknowledgements.md +++ b/src/content/community/acknowledgements.md @@ -36,6 +36,8 @@ 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) +* [Luna Wei](https://github.com/lunaleaps) +* [Noah Lemen](https://github.com/noahlemen) * [Kathryn Middleton](https://github.com/kmiddleton14) * [Keyan Zhang](https://github.com/keyz) * [Marco Salazar](https://github.com/salazarm) @@ -51,9 +53,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d * [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) +* [Sathya Gunasekaran](https://github.com/gsathya) * [Sophia Shoemaker](https://github.com/mrscobbler) * [Sunil Pai](https://github.com/threepointone) +* [Tianyu Yao](https://github.com/) * [Tim Yung](https://github.com/yungsters) * [Xuan Huang](https://github.com/huxpro) diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index 27c1b7018..f9a3828e9 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -10,11 +10,42 @@ 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 Paris 2025 {/*react-paris-2025*/} +March 20 - 21, 2025. In-person in Paris, France (hybrid event) + +[Website](https://react.paris/) - [Twitter](https://x.com/BeJS_) + +### React Native Connection 2025 {/*react-native-connection-2025*/} +April 3 (Reanimated Training) + April 4 (Conference), 2025. Paris, France. + +[Website](https://reactnativeconnection.io/) - [X](https://x.com/reactnativeconn) - [Bluesky](https://bsky.app/profile/reactnativeconnect.bsky.social) + +### CityJS London 2025 {/*cityjs-london*/} +April 23 - 25, 2025. In-person in London, UK + +[Website](https://london.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + +### App.js Conf 2025 {/*appjs-conf-2025*/} +May 28 - 30, 2025. In-person in Kraków, Poland + remote + +[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf) + +### CityJS Athens 2025 {/*cityjs-athens*/} +May 27 - 31, 2025. In-person in Athens, Greece + +[Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) + +### React Summit 2025 {/*react-summit-2025*/} +June 13 - 17, 2025. In-person in Amsterdam, Netherlands + remote (hybrid event) + +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) + +### React Universe Conf 2025 {/*react-universe-conf-2025*/} +September 2-4, 2025. Wrocław, Poland. [Site web](https://www.reactuniverseconf.com/) - [Twitter](https://twitter.com/react_native_eu) - [LinkedIn](https://www.linkedin.com/events/reactuniverseconf7163919537074118657/) +<<<<<<< HEAD ### React Alicante 2024 {/*react-alicante-2024*/} September 19-21, 2024. Alicante, Spain. @@ -27,12 +58,15 @@ October 04 - 05, 2024. Nairobi, Kenya ### React India 2024 {/*react-india-2024*/} October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - remote day +======= +### React India 2025 {/*react-india-2025*/} +October 31 - November 01, 2025. In-person in Goa, India (hybrid event) + Oct 15 2025 - remote day +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 [Site web](https://www.reactindia.io) - [Twitter](https://twitter.com/react_india) - [Facebook](https://www.facebook.com/ReactJSIndia) - [Youtube](https://www.youtube.com/channel/UCaFbHCBkPvVv1bWs_jwYt3w) -### React Brussels 2024 {/*react-brussels-2024*/} -October 18, 2024. In-person in Brussels, Belgium (hybrid event) +<<<<<<< HEAD [Site web](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact) ### reactjsday 2024 {/*reactjsday-2024*/} @@ -59,13 +93,69 @@ November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) November 29, 2024. In-person in Casablanca, Morocco (hybrid event) [Site web](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) +======= +## Past Conferences {/*past-conferences*/} +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ### React Day Berlin 2024 {/*react-day-berlin-2024*/} December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event) [Site web](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) +<<<<<<< HEAD ## Conférences passées {/*past-conferences*/} +======= +### React Africa 2024 {/*react-africa-2024*/} +November 29, 2024. In-person in Casablanca, Morocco (hybrid event) + +[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_) + +### React Summit US 2024 {/*react-summit-us-2024*/} +November 19 & 22, 2024. In-person in New York, USA + online (hybrid event) + +[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) - [YouTube](https://www.youtube.com/playlist?list=PL53Z0yyYnpWimQ0U75woee2zNUIFsiDC3) + +### 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/) + +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ### React Rally 2024 🐙 {/*react-rally-2024*/} August 12-13, 2024. Park City, UT, USA diff --git a/src/content/community/docs-contributors.md b/src/content/community/docs-contributors.md index b04ac17ee..b369c652f 100644 --- a/src/content/community/docs-contributors.md +++ b/src/content/community/docs-contributors.md @@ -10,6 +10,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun ## Contenu {/*content*/} +<<<<<<< HEAD * [Rachel Nabors](https://twitter.com/RachelNabors) : révisions, rédaction, illustrations * [Dan Abramov](https://twitter.com/dan_abramov) : rédaction, conception du curriculum * [Sylwia Vargas](https://twitter.com/SylwiaVargas) : codes d'exemple @@ -21,6 +22,19 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun * [Matt Carroll](https://twitter.com/mattcarrollcode) : révisions, rédaction * [Natalia Tepluhina](https://twitter.com/n_tepluhina) : révisions, avis * [Sebastian Markbåge](https://twitter.com/sebmarkbage) : retours +======= +* [Rachel Nabors](https://twitter.com/RachelNabors): editing, writing, illustrating +* [Dan Abramov](https://bsky.app/profile/danabra.mov): writing, curriculum design +* [Sylwia Vargas](https://twitter.com/SylwiaVargas): example code +* [Rick Hanlon](https://twitter.com/rickhanlonii): writing +* [David McCabe](https://twitter.com/mcc_abe): writing +* [Sophie Alpert](https://twitter.com/sophiebits): writing +* [Pete Hunt](https://twitter.com/floydophone): writing +* [Andrew Clark](https://twitter.com/acdlite): writing +* [Matt Carroll](https://twitter.com/mattcarrollcode): editing, writing +* [Natalia Tepluhina](https://twitter.com/n_tepluhina): reviews, advice +* [Sebastian Markbåge](https://twitter.com/sebmarkbage): feedback +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ## Design {/*design*/} @@ -31,6 +45,7 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun ## Développement {/*development*/} +<<<<<<< HEAD * [Jared Palmer](https://twitter.com/jaredpalmer) : développement du site * [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando) et [Dustin Goodman](https://twitter.com/dustinsgoodman)) : développement du site * [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor) et [Danilo Woznica](https://twitter.com/danilowoz)) : intégration des bacs à sable @@ -38,5 +53,14 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun * [Rick Hanlon](https://twitter.com/rickhanlonii) : développement du site * [Harish Kumar](https://www.strek.in/) : development et maintenance * [Luna Ruan](https://twitter.com/lunaruan) : améliorations des bacs à sable +======= +* [Jared Palmer](https://twitter.com/jaredpalmer): site development +* [ThisDotLabs](https://www.thisdot.co/) ([Dane Grant](https://twitter.com/danecando), [Dustin Goodman](https://twitter.com/dustinsgoodman)): site development +* [CodeSandbox](https://codesandbox.io/) ([Ives van Hoorne](https://twitter.com/CompuIves), [Alex Moldovan](https://twitter.com/alexnmoldovan), [Jasper De Moor](https://twitter.com/JasperDeMoor), [Danilo Woznica](https://twitter.com/danilowoz)): sandbox integration +* [Dan Abramov](https://bsky.app/profile/danabra.mov): site development +* [Rick Hanlon](https://twitter.com/rickhanlonii): site development +* [Harish Kumar](https://www.strek.in/): development and maintenance +* [Luna Ruan](https://twitter.com/lunaruan): sandbox improvements +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Nous aimerions aussi remercier les innombrables testeurs de la première heure et membres de la communautés qui nous ont fourni des retours tout au long de notre travail. diff --git a/src/content/community/team.md b/src/content/community/team.md index 225d089ac..28e0efd80 100644 --- a/src/content/community/team.md +++ b/src/content/community/team.md @@ -22,12 +22,25 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Dan 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. +<<<<<<< HEAD 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. Peut après avoir découvert AutoHotkey, Jack écrivait des scripts pour automatiser tout ce à quoi il pouvait penser. Lorsqu'il a atteint les limites de l'exercice, il s'est plongé dans le développement web et n'a jamais regardé en arrière. Dernièrement, Jack a travaillé sur la plateforme web d'Instagram, avant de migrer vers React. Son langage de programmation préféré est JSX. +======= + + Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks. + + + + Hendrik’s journey in tech started in the late 90s when he built his first websites with Netscape Communicator. After earning a diploma in computer science and working at digital agencies, he built a React Server Components bundler and library, paving the way to his role on the Next.js team. Outside of work, he enjoys cycling and tinkering in his workshop. + + + + Shortly after being introduced to AutoHotkey, Jack had written scripts to automate everything he could think of. When reaching limitations there, he dove headfirst into web app development and hasn't looked back. Most recently, Jack worked on the web platform at Instagram before moving to React. His favorite programming language is JSX. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 @@ -38,6 +51,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Joe pensait axer ses études sur les maths et la philosophie, mais s'est retrouvé en informatique après avoir écrit des simulations de physique dans Matlab. Avant React, il travaillait sur Relay, RSocket.js et le langage de programmation Skip. Lorsqu'il n'est pas en train de pondre un système réactif il aime courir, apprendre le japonais, et passer du temps en famille. +<<<<<<< HEAD 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. @@ -48,18 +62,43 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab 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). +======= + + Jordan started coding by building iPhone apps, where he was pushing and popping view controllers before he knew that for-loops were a thing. He enjoys working on technology that developers love, which naturally drew him to React. Outside of work he enjoys reading, kiteboarding, and playing guitar. + + + + Josh majored in Mathematics and discovered programming while in college. His first professional developer job was to program insurance rate calculations in Microsoft Excel, the paragon of Reactive Programming which must be why he now works on React. In between that time Josh has been an IC, Manager, and Executive at a few startups. outside of work he likes to push his limits with cooking. + + + + 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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. +<<<<<<< HEAD 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. 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. +======= + + Mike went to grad school dreaming of becoming a professor but realized that he liked building things a lot more than writing grant applications. Mike joined Meta to work on Javascript infrastructure, which ultimately led him to work on the React Compiler. When not hacking on either Javascript or OCaml, Mike can often be found hiking or skiing in the Pacific Northwest. + + + + Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s). + + + + Pieter studied building science but after failing to get a job he made himself a website and things escalated from there. At Meta, he enjoys working on performance, languages and now React. When he's not programming you can find him off-road in the mountains. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 @@ -70,12 +109,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Ruslan a commencé enfant à programmer des UI en modifiant des gabarits HTML pour ses forums personnalisés de jeux. Sans trop savoir comment, il a fini par spécialiser ses études en informatique. Il aime la musique, les jeux, et les mèmes. Surtout les mèmes. +<<<<<<< HEAD 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. 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. +======= + + Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 @@ -90,12 +134,17 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab Quatre jours après la sortie de React, Sophie réécrivait l'intégralité de son projet d'alors pour s'en servir, ce qui avec le recul lui semble un brin téméraire. Après être devenue la principale contributrice au projet, elle s'est demandée pourquoi elle n'était pas payée par Facebook comme tous les autres et a officiellement rejoint l'équipe pour guider React à travers sa phase adolescente. Même si elle a quitté le poste il y a plusieurs années, on la trouve encore dans les forums de discussion de l'équipe où elle « ajoute de la valeur ». +<<<<<<< HEAD Tianyu s'est intéressé aux ordinateurs dès l'enfance par amour des jeux vidéos. Il a donc étudié l'informatique et joue encore à des jeux pour enfants comme *League of Legends*. Lorsqu'il n'est pas devant son ordinateur, il aime jouer avec ses deux chatons, randonner et faire du kayak. Yuzhi a étudié l'informatique à l'école. Elle aimait cette gratification instantanée ressentie en voyant son code prendre vie sans avoir à être physiquement dans un laboratoire. Elle gère aujourd'hui l'organisation React. Avant cela, elle travaillait sur le framework de chargement de données Relay. Dans son temps libre, Yuzhi aime optimiser sa vie au travers du jardinage et de projets d'amélioration de sa maison. +======= + + Yuzhi studied Computer Science in school. She liked the instant gratification of seeing code come to life without having to physically be in a laboratory. Now she’s a manager in the React org. Before management, she used to work on the Relay data fetching framework. In her spare time, Yuzhi enjoys optimizing her life via gardening and home improvement projects. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ## Contributeurs historiques {/*past-contributors*/} diff --git a/src/content/community/versioning-policy.md b/src/content/community/versioning-policy.md index a13f39e22..0a1ca250e 100644 --- a/src/content/community/versioning-policy.md +++ b/src/content/community/versioning-policy.md @@ -8,7 +8,11 @@ Toutes les versions stables de React sont soumises à un niveau élevé de tests +<<<<<<< HEAD Pour une liste des versions antérieures, consultez la page [Versions](/versions). +======= +This versioning policy describes our approach to version numbers for packages such as `react` and `react-dom`. For a list of previous releases, see the [Versions](/versions) page. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ## Versions stables {/*stable-releases*/} @@ -24,7 +28,13 @@ Les livraisons majeures peuvent également intégrer de nouvelles fonctionnalit Les livraisons mineures sont les plus fréquentes. +<<<<<<< HEAD ### Ruptures de compatibilité ascendante {/*breaking-changes*/} +======= +We know our users continue to use old versions of React in production. If we learn of a security vulnerability in React, we release a backported fix for all major versions that are affected by the vulnerability. + +### Breaking changes {/*breaking-changes*/} +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Les ruptures de compatibilité ascendante sont gênantes pour tout le monde, aussi nous essayons de limiter le nombre de livraisons majeures — par exemple, React 15 a été publié en avril 2016, React 16 en septembre 2017 et React 17 en octobre 2020. diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md index 8afc2e747..99ddee35e 100644 --- a/src/content/learn/add-react-to-an-existing-project.md +++ b/src/content/learn/add-react-to-an-existing-project.md @@ -20,9 +20,15 @@ Supposons que vous ayez une application web existante sur `example.com` dévelop Voici comment nous vous recommandons de procéder : +<<<<<<< HEAD 1. **Construisez la partie React de votre appli** en utilisant l'un des [frameworks basés sur React](/learn/start-a-new-react-project). 2. **Indiquez `/some-app` comme *chemin de base*** dans la configuration de votre framework (voici comment faire avec [Next.js](https://nextjs.org/docs/api-reference/next.config.js/basepath) ou [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). 3. **Configurez votre serveur ou un proxy** de manière à ce que toutes les requêtes sous `/some-app/` soient traitées par votre application React. +======= +1. **Build the React part of your app** using one of the [React-based frameworks](/learn/start-a-new-react-project). +2. **Specify `/some-app` as the *base path*** in your framework's configuration (here's how: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)). +3. **Configure your server or a proxy** so that all requests under `/some-app/` are handled by your React app. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Ça garantit que la partie React de votre application peut [bénéficier de tout un tas de bonnes pratiques](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) intégrées à ces frameworks. @@ -45,7 +51,11 @@ Un environnement JavaScript modulaire vous permet d'écrire vos composants React * **Si votre application est déjà divisée en fichiers qui utilisent des déclarations `import`**, essayez d'utiliser la configuration que vous avez déjà. Vérifiez si l'écriture de `
      ` dans votre code JS provoque une erreur de syntaxe. Si tel est le cas, vous devrez peut-être [transformer votre code JavaScript avec Babel](https://babeljs.io/setup), et activer le [préréglage Babel React](https://babeljs.io/docs/babel-preset-react) pour utiliser JSX. +<<<<<<< HEAD * **Si votre application n'a pas de configuration existante pour la compilation des modules JavaScript**, mettez-en une en place avec [Vite](https://vitejs.dev/). La communauté Vite propose de [nombreuses intégrations avec des frameworks backend](https://github.com/vitejs/awesome-vite#integrations-with-backends), notament Rails, Django et Laravel. Si votre framework backend ne figure pas dans leur liste, [suivez ce guide](https://vitejs.dev/guide/backend-integration.html) pour intégrer manuellement les builds Vite à votre backend. +======= +* **If your app doesn't have an existing setup for compiling JavaScript modules,** set it up with [Vite](https://vite.dev/). The Vite community maintains [many integrations with backend frameworks](https://github.com/vitejs/awesome-vite#integrations-with-backends), including Rails, Django, and Laravel. If your backend framework is not listed, [follow this guide](https://vite.dev/guide/backend-integration.html) to manually integrate Vite builds with your backend. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 Pour vérifier si votre configuration fonctionne, exécutez cette commande dans le dossier de votre projet : @@ -57,12 +67,17 @@ Ensuite, ajoutez ces lignes de code en haut de votre fichier JavaScript principa -```html index.html hidden +```html public/index.html hidden Mon appli +<<<<<<< HEAD +======= + +
      +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ``` @@ -84,7 +99,11 @@ Si tout le contenu de votre page a été remplacé par un « Bonjour tout le mo +<<<<<<< HEAD Intégrer pour la première fois un environnement JavaScript modulaire dans un projet existant pour la première fois peut sembler intimidant, mais ça en vaut la peine ! Si vous êtes bloqué, essayez nos [ressources communautaires](/community) ou discutez sur [le forum Vite](https://chat.vitejs.dev/). +======= +Integrating a modular JavaScript environment into an existing project for the first time can feel intimidating, but it's worth it! If you get stuck, try our [community resources](/community) or the [Vite Chat](https://chat.vite.dev/). +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 @@ -119,7 +138,7 @@ Vous souhaitez probablement plutôt afficher vos composants React à des emplace -```html index.html +```html public/index.html Mon appli diff --git a/src/content/learn/index.md b/src/content/learn/index.md index ac71de39c..8854126b7 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index d24f89f77..8c3dd3af1 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(); +======= +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 // 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 ``. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```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. +======= +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 #### 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): +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```js +<<<<<<< HEAD import { forwardRef, useRef, useImperativeHandle } from 'react'; +======= +import { useRef, useImperativeHandle } from "react"; +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 -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 +======= + +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ); } @@ -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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 diff --git a/src/content/learn/react-compiler.md b/src/content/learn/react-compiler.md index 7d830d241..129f87fee 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ### 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..9db11fff7 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/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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 + +[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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 diff --git a/src/content/learn/start-a-new-react-project.md b/src/content/learn/start-a-new-react-project.md index 7342fed8d..a66868efa 100644 --- a/src/content/learn/start-a-new-react-project.md +++ b/src/content/learn/start-a-new-react-project.md @@ -24,7 +24,13 @@ Même si, au départ, vous n’avez pas besoin d’un gestionnaire de routes ou **Ces problèmes ne sont pas spécifiques à React. C’est pourquoi Svelte a SvelteKit, Vue a Nuxt, etc**. Pour résoudre ces problèmes par vous-même, il vous faudrait intégrer votre *bundler* à votre gestionnaire de routes et à votre bibliothèque de chargement de données. Il n’est pas difficile d'obtenir un premier jet, mais la création d’une appli qui se charge rapidement même lorsqu'elle grandit fortement au fil du temps, c'est une affaire pleine de subtilités. Vous voudrez envoyer le minimum de code applicatif, mais en un seul aller-retour client-serveur, en parallèle avec toutes les données requises pour la page. Vous souhaiterez probablement que la page soit interactive avant même que votre code JavaScript ne soit exécuté, afin de prendre en charge l’amélioration progressive. Vous souhaiterez peut-être générer un dossier de fichiers HTML entièrement statiques pour vos pages de marketing, qui pourront être hébergés n’importe où et fonctionneront même avec JavaScript désactivé. La mise en place de ces possibilités demande énormément de travail. +<<<<<<< HEAD **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). +======= +**React frameworks on this page solve problems like these by default, with no extra work from your side.** They let you start very lean and then scale your app with your needs. Each React framework has a community, so finding answers to questions and upgrading tooling is easier. Frameworks also give structure to your code, helping you and others retain context and skills between different projects. Conversely, with a custom setup it's easier to get stuck on unsupported dependency versions, and you'll essentially end up creating your own framework—albeit one with no community or upgrade path (and if it's anything like the ones we've made in the past, more haphazardly designed). + +If your app has unusual constraints not served well by these frameworks, or you prefer to solve these problems yourself, you can roll your own custom setup with React. Grab `react` and `react-dom` from npm, set up your custom build process with a bundler like [Vite](https://vite.dev/) or [Parcel](https://parceljs.org/), and add other tools as you need them for routing, static generation or server-side rendering, and more. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 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. diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md index 6f761b035..1b3d575cd 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 `createRoot` renvoie un objet avec deux méthodes : [`render`](#root-render) et [`unmount`](#root-unmount). @@ -141,7 +148,7 @@ En général, vous n'aurez besoin de ce code qu'une fois, au démarrage. Il va  -```html index.html +```html public/index.html Mon appli @@ -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: +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```js [[1, 6, "onUncaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -378,7 +389,7 @@ Vous pouvez utiliser l'option `onUncaughtError` pour afficher des dialogues d'er -```html index.html hidden +```html public/index.html hidden @@ -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): +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```js [[1, 6, "onCaughtError"], [2, 6, "error", 1], [3, 6, "errorInfo"], [4, 10, "componentStack"]] import { createRoot } from 'react-dom/client'; @@ -626,7 +630,7 @@ Vous pouvez utiliser l'option `onCaughtError` pour afficher des dialogues d'erre -```html index.html hidden +```html public/index.html hidden @@ -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" }, @@ -906,7 +910,7 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d -```html index.html hidden +```html public/index.html hidden @@ -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..bd233c1e8 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. +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 #### 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: +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```js [[1, 7, "onUncaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -409,7 +420,7 @@ Vous pouvez utiliser l'option `onUncaughtError` pour afficher des dialogues d'er -```html index.html hidden +```html public/index.html hidden @@ -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): +>>>>>>> 91614a51a1be9078777bc337ba83fc62e606cc14 ```js [[1, 7, "onCaughtError"], [2, 7, "error", 1], [3, 7, "errorInfo"], [4, 11, "componentStack"]] import { hydrateRoot } from 'react-dom/client'; @@ -659,7 +663,7 @@ Vous pouvez utiliser l'option `onCaughtError` pour afficher des dialogues d'erre -```html index.html hidden +```html public/index.html hidden @@ -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" }, @@ -938,7 +942,7 @@ Vous pouvez utiliser l'option `onRecoverableError` pour afficher des dialogues d -```html index.html hidden +```html public/index.html hidden @@ -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..7ed3086da 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 [`