Skip to content

Commit 7607c7d

Browse files
merging all conflicts
2 parents 2628808 + b1a249d commit 7607c7d

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

74 files changed

+3395
-663
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ This repo contains the source code and documentation powering [react.dev](https:
77
### Prerequisites
88

99
1. Git
10-
1. Node: any 12.x version starting with v12.0.0 or greater
10+
1. Node: any version starting with v16.8.0 or greater
1111
1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
1212
1. A fork of the repo (for any contributions)
1313
1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine

public/images/team/lauren.jpg

949 KB
Loading

src/components/Icon/IconRocket.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright (c) Facebook, Inc. and its affiliates.
3+
*/
4+
5+
import {memo} from 'react';
6+
7+
export const IconRocket = memo<
8+
JSX.IntrinsicElements['svg'] & {title?: string; size?: 's' | 'md'}
9+
>(function IconRocket({className, size = 'md'}) {
10+
return (
11+
<svg
12+
className={className}
13+
aria-hidden="true"
14+
width={size === 's' ? '1.2em' : '1.5em'}
15+
height={size === 's' ? '1.2em' : '1.5em'}
16+
fill="currentColor"
17+
version="1.1"
18+
viewBox="0 0 1200 1200"
19+
xmlns="http://www.w3.org/2000/svg">
20+
<g fillRule="evenodd">
21+
<path d="m911.8 288.2c65.051 65.051 65.051 170.6 0 235.65-65.051 65.051-170.6 65.051-235.65 0-65.051-65.051-65.051-170.6 0-235.65 65.051-65.051 170.6-65.051 235.65 0zm-53.051 53.051c-35.75-35.801-93.801-35.801-129.55 0-35.801 35.75-35.801 93.801 0 129.55 35.75 35.801 93.801 35.801 129.55 0 35.801-35.75 35.801-93.801 0-129.55z" />
22+
<path d="m1122.2 103.4s96.648 328.1-194.4 619.1c-130.75 130.75-303.25 226.75-440.75 250.5-12.102 2.0508-24.449-1.8984-33.102-10.648l-231.55-234.8c-8.6484-8.8008-12.449-21.301-10.102-33.398 26.102-135.4 135.45-292.2 265.2-421.95 291-291.05 619.1-194.4 619.1-194.4 12.352 3.6016 22 13.25 25.602 25.602zm-67.5 41.898c-70.898-12.898-308.6-35.602-524.15 179.9-112.35 112.35-210.4 245.4-240.4 364.25 0 0 203.05 205.9 203.1 205.9 121.75-26.852 268.4-112.75 381.55-225.9 215.5-215.55 192.8-453.25 179.9-524.15z" />
23+
<path d="m151.55 543.85 124 20.648c20.398 3.3984 34.25 22.75 30.801 43.148-3.3984 20.449-22.699 34.25-43.148 30.852l-144.35-24.051c-22.148-3.6992-40.699-18.949-48.602-40-7.9492-21.051-4.0508-44.699 10.199-62.148l122.85-150.15c15.051-18.398 36.898-30 60.551-32.148l179.55-16.301c20.602-1.8984 38.852 13.352 40.75 33.949 1.8516 20.602-13.352 38.852-33.949 40.75l-179.55 16.301c-3.6484 0.35156-7 2.1016-9.3008 4.9492z" />
24+
<path d="m656.15 1048.4 134.2-109.8c2.8516-2.3008 4.6016-5.6484 4.9492-9.3008l16.301-179.55c1.8984-20.602 20.148-35.801 40.75-33.949 20.602 1.8984 35.852 20.148 33.949 40.75l-16.301 179.55c-2.1484 23.648-13.75 45.5-32.148 60.551l-150.15 122.85c-17.449 14.25-41.102 18.148-62.148 10.199-21.051-7.8984-36.301-26.449-40-48.602l-29.25-175.7c-3.3984-20.398 10.398-39.75 30.801-43.148 20.449-3.3984 39.75 10.449 43.148 30.852l25.898 155.3z" />
25+
<path d="m310.9 560.4c-14.648-14.648-14.648-38.398 0-53.051 14.648-14.648 38.398-14.648 53.051 0l328.7 328.7c14.648 14.648 14.648 38.398 0 53.051-14.648 14.648-38.398 14.648-53.051 0z" />
26+
<path d="m383.95 982.15c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
27+
<path d="m237.85 909.1c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-127.85 127.85c-14.648 14.648-38.398 14.648-53.051 0-14.648-14.648-14.648-38.398 0-53.051z" />
28+
<path d="m164.8 763c14.648-14.602 38.398-14.602 53.051 0 14.602 14.648 14.602 38.398 0 53.051l-91.352 91.301c-14.602 14.648-38.398 14.648-53 0-14.648-14.602-14.648-38.398 0-53z" />
29+
</g>
30+
</svg>
31+
);
32+
});

src/components/Layout/Sidebar/SidebarLink.tsx

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ interface SidebarLinkProps {
1616
selected?: boolean;
1717
title: string;
1818
level: number;
19-
canary?: boolean;
19+
version?: 'canary' | 'major';
2020
icon?: React.ReactNode;
2121
isExpanded?: boolean;
2222
hideArrow?: boolean;
@@ -27,7 +27,7 @@ export function SidebarLink({
2727
href,
2828
selected = false,
2929
title,
30-
canary,
30+
version,
3131
level,
3232
isExpanded,
3333
hideArrow,
@@ -75,10 +75,22 @@ export function SidebarLink({
7575
{/* This here needs to be refactored ofc */}
7676
<div>
7777
{title}{' '}
78-
{canary && (
78+
{version === 'major' && (
79+
<span
80+
title="- This feature is available in React 19 beta and the React canary channel"
81+
className={`text-xs px-1 ms-1 rounded bg-gray-10 dark:bg-gray-40 dark:bg-opacity-20 text-gray-40 dark:text-gray-40`}>
82+
React 19
83+
</span>
84+
)}
85+
{version === 'canary' && (
7986
<IconCanary
87+
<<<<<<< HEAD
8088
title=" - Cette fonctionnalité est disponible dans le dernier Canary"
8189
className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
90+
=======
91+
title=" - This feature is available in the latest Canary"
92+
className="ms-1 text-gray-30 dark:text-gray-60 inline-block w-3.5 h-3.5 align-[-3px]"
93+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
8294
/>
8395
)}
8496
</div>

src/components/Layout/Sidebar/SidebarRouteTree.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ export function SidebarRouteTree({
8787
path,
8888
title,
8989
routes,
90-
canary,
90+
version,
9191
heading,
9292
hasSectionHeader,
9393
sectionHeader,
@@ -121,7 +121,7 @@ export function SidebarRouteTree({
121121
selected={selected}
122122
level={level}
123123
title={title}
124-
canary={canary}
124+
version={version}
125125
isExpanded={isExpanded}
126126
hideArrow={isForceExpanded}
127127
/>
@@ -145,7 +145,7 @@ export function SidebarRouteTree({
145145
selected={selected}
146146
level={level}
147147
title={title}
148-
canary={canary}
148+
version={version}
149149
/>
150150
</li>
151151
);

src/components/Layout/getRouteMeta.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ export type RouteTag =
1919
export interface RouteItem {
2020
/** Page title (for the sidebar) */
2121
title: string;
22-
/** Optional canary flag for heading */
23-
canary?: boolean;
22+
/** Optional version flag for heading */
23+
version?: 'canary' | 'major';
2424
/** Optional page description for heading */
2525
description?: string;
2626
/* Additional meta info for page tagging */

src/components/MDX/ExpandableCallout.tsx

Lines changed: 30 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,16 @@ import {IconNote} from '../Icon/IconNote';
88
import {IconWarning} from '../Icon/IconWarning';
99
import {IconPitfall} from '../Icon/IconPitfall';
1010
import {IconCanary} from '../Icon/IconCanary';
11+
import {IconRocket} from '../Icon/IconRocket';
1112

12-
type CalloutVariants = 'deprecated' | 'pitfall' | 'note' | 'wip' | 'canary';
13+
type CalloutVariants =
14+
| 'deprecated'
15+
| 'pitfall'
16+
| 'note'
17+
| 'wip'
18+
| 'canary'
19+
| 'major'
20+
| 'rsc';
1321

1422
interface ExpandableCalloutProps {
1523
children: React.ReactNode;
@@ -59,6 +67,22 @@ const variantMap = {
5967
overlayGradient:
6068
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
6169
},
70+
major: {
71+
title: 'React 19',
72+
Icon: IconRocket,
73+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
74+
textColor: 'text-blue-50 dark:text-blue-40',
75+
overlayGradient:
76+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
77+
},
78+
rsc: {
79+
title: 'React Server Components',
80+
Icon: null,
81+
containerClasses: 'bg-blue-10 dark:bg-blue-60 dark:bg-opacity-20',
82+
textColor: 'text-blue-50 dark:text-blue-40',
83+
overlayGradient:
84+
'linear-gradient(rgba(249, 247, 243, 0), rgba(249, 247, 243, 1)',
85+
},
6286
};
6387

6488
function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
@@ -72,9 +96,11 @@ function ExpandableCallout({children, type = 'note'}: ExpandableCalloutProps) {
7296
variant.containerClasses
7397
)}>
7498
<h3 className={cn('text-2xl font-display font-bold', variant.textColor)}>
75-
<variant.Icon
76-
className={cn('inline me-3 mb-1 text-lg', variant.textColor)}
77-
/>
99+
{variant.Icon && (
100+
<variant.Icon
101+
className={cn('inline me-2 mb-1 text-lg', variant.textColor)}
102+
/>
103+
)}
78104
{variant.title}
79105
</h3>
80106
<div className="relative">

src/components/MDX/MDXComponents.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ const Canary = ({children}: {children: React.ReactNode}) => (
9797
<ExpandableCallout type="canary">{children}</ExpandableCallout>
9898
);
9999

100+
const NextMajor = ({children}: {children: React.ReactNode}) => (
101+
<ExpandableCallout type="major">{children}</ExpandableCallout>
102+
);
103+
104+
const RSC = ({children}: {children: React.ReactNode}) => (
105+
<ExpandableCallout type="rsc">{children}</ExpandableCallout>
106+
);
107+
100108
const CanaryBadge = ({title}: {title: string}) => (
101109
<span
102110
title={title}
@@ -111,6 +119,26 @@ const CanaryBadge = ({title}: {title: string}) => (
111119
</span>
112120
);
113121

122+
const NextMajorBadge = ({title}: {title: string}) => (
123+
<span
124+
title={title}
125+
className={
126+
'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-60 text-gray-60 dark:text-gray-10 rounded'
127+
}>
128+
React 19
129+
</span>
130+
);
131+
132+
const RSCBadge = ({title}: {title: string}) => (
133+
<span
134+
title={title}
135+
className={
136+
'text-base font-display px-2 py-0.5 font-bold bg-blue-10 dark:bg-blue-50 text-gray-60 dark:text-gray-10 rounded'
137+
}>
138+
RSC
139+
</span>
140+
);
141+
114142
const Blockquote = ({
115143
children,
116144
...props
@@ -493,6 +521,10 @@ export const MDXComponents = {
493521
Note,
494522
Canary,
495523
CanaryBadge,
524+
NextMajor,
525+
NextMajorBadge,
526+
RSC,
527+
RSCBadge,
496528
PackageImport,
497529
ReadBlogPost,
498530
Recap,

src/components/MDX/Sandpack/template.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ root.render(
2828
eject: 'react-scripts eject',
2929
},
3030
dependencies: {
31-
react: '^18.0.0',
32-
'react-dom': '^18.0.0',
31+
react: '19.0.0-rc-3edc000d-20240926',
32+
'react-dom': '19.0.0-rc-3edc000d-20240926',
3333
'react-scripts': '^5.0.0',
3434
},
3535
},

src/content/blog/2024/04/25/react-19-upgrade-guide.md

Lines changed: 43 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
---
2+
<<<<<<< HEAD
23
title: "React 19 RC : guide de migration"
4+
=======
5+
title: "React 19 Upgrade Guide"
6+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
37
author: Ricky Hanlon
48
date: 2024/04/25
59
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)
1216

1317
<Intro>
1418

19+
<<<<<<< HEAD
1520
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.
21+
=======
22+
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.
23+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
1624
1725
</Intro>
1826

@@ -38,7 +46,11 @@ Dans cet article, nous vous guidons à travers les étapes nécessaires à une m
3846
- [Changements liés à TypeScript](#typescript-changes)
3947
- [Changelog](#changelog)
4048

49+
<<<<<<< HEAD
4150
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).
51+
=======
52+
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).
53+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
4254
4355
---
4456

@@ -71,28 +83,27 @@ Nous estimons que la plupart des applis ne seront pas affectées par ça, dans l
7183
Pour installer la dernière version de React et React DOM :
7284

7385
```bash
74-
npm install --save-exact react@rc react-dom@rc
86+
npm install --save-exact react@^19.0.0 react-dom@^19.0.0
7587
```
7688

7789
Ou si vous utilisez Yarn :
7890

7991
```bash
80-
yarn add --exact react@rc react-dom@rc
92+
yarn add --exact react@^19.0.0 react-dom@^19.0.0
8193
```
8294

95+
<<<<<<< HEAD
8396
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` :
97+
=======
98+
If you're using TypeScript, you also need to update the types.
99+
```bash
100+
npm install --save-exact @types/react@^19.0.0 @types/react-dom@^19.0.0
101+
```
102+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
84103
85-
```json
86-
{
87-
"dependencies": {
88-
"@types/react": "npm:types-react@rc",
89-
"@types/react-dom": "npm:types-react-dom@rc"
90-
},
91-
"overrides": {
92-
"@types/react": "npm:types-react@rc",
93-
"@types/react-dom": "npm:types-react-dom@rc"
94-
}
95-
}
104+
Or, if you're using Yarn:
105+
```bash
106+
yarn add --exact @types/react@^19.0.0 @types/react-dom@^19.0.0
96107
```
97108

98109
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` :
117128
- [`replace-reactdom-render`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-reactdom-render)
118129
- [`replace-string-ref`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-string-ref)
119130
- [`replace-act-import`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-act-import)
131+
<<<<<<< HEAD
120132
- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
121133
- [`prop-types-typescript`](TODO)
134+
=======
135+
- [`replace-use-form-state`](https://github.com/reactjs/react-codemod?tab=readme-ov-file#replace-use-form-state)
136+
- [`prop-types-typescript`](https://codemod.com/registry/react-prop-types-typescript)
137+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
122138
123139
Ça n'inclut toutefois pas les changements liés à TypeScript. Consultez la section [Changements liés à TypeScript](#typescript-changes) plus loin.
124140

@@ -746,13 +762,23 @@ const reducer = (state: State, action: Action) => state;
746762

747763
### Autres ruptures de compatibilité ascendante {/*other-breaking-changes*/}
748764

765+
<<<<<<< HEAD
749766
- **react-dom**: Erreur sur URL JavaScript dans src/href [#26507](https://github.com/facebook/react/pull/26507)
750767
- **react-dom**: Retrait de `errorInfo.digest` dans `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
751768
- **react-dom**: Retrait de `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
752769
- **react-dom**: Retrait de `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
753770
- **react-dom**: Retrait de `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
754771
- **react-dom**: Retrait de `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
755772
- **react-is**: Retrait de méthodes dépréciées dans `react-is` [28224](https://github.com/facebook/react/pull/28224)
773+
=======
774+
- **react-dom**: Error for javascript URLs in `src` and `href` [#26507](https://github.com/facebook/react/pull/26507)
775+
- **react-dom**: Remove `errorInfo.digest` from `onRecoverableError` [#28222](https://github.com/facebook/react/pull/28222)
776+
- **react-dom**: Remove `unstable_flushControlled` [#26397](https://github.com/facebook/react/pull/26397)
777+
- **react-dom**: Remove `unstable_createEventHandle` [#28271](https://github.com/facebook/react/pull/28271)
778+
- **react-dom**: Remove `unstable_renderSubtreeIntoContainer` [#28271](https://github.com/facebook/react/pull/28271)
779+
- **react-dom**: Remove `unstable_runWithPriority` [#28271](https://github.com/facebook/react/pull/28271)
780+
- **react-is**: Remove deprecated methods from `react-is` [28224](https://github.com/facebook/react/pull/28224)
781+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
756782

757783
### Autres changements notables {/*other-notable-changes*/}
758784

@@ -763,7 +789,11 @@ const reducer = (state: State, action: Action) => state;
763789
- **react-dom**: Retire l'avertissement des Effets de layout lors du SSR [#26395](https://github.com/facebook/react/pull/26395)
764790
- **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)
765791

792+
<<<<<<< HEAD
766793
Nous publierons un changelog complet avec la version stable de React 19.
794+
=======
795+
For a full list of changes, please see the [Changelog](https://github.com/facebook/react/blob/main/CHANGELOG.md#1900-december-5-2024).
796+
>>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
767797

768798
---
769799

0 commit comments

Comments
 (0)