Skip to content

Commit e8623ce

Browse files
authored
Merge pull request #16 from reactjs/sync-5219d736
Sync with react.dev @ 5219d73
2 parents 594a821 + 6ee3ef0 commit e8623ce

15 files changed

+1093
-21
lines changed

src/components/Icon/IconTwitter.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -9,13 +9,13 @@ export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
99
return (
1010
<svg
1111
xmlns="http://www.w3.org/2000/svg"
12-
viewBox="0 0 24 24"
13-
width="1.33em"
14-
height="1.33em"
12+
viewBox="0 0 512 512"
13+
height="1.30em"
14+
width="1.30em"
1515
fill="currentColor"
1616
{...props}>
1717
<path fill="none" d="M0 0h24v24H0z" />
18-
<path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z" />
18+
<path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z" />
1919
</svg>
2020
);
2121
}

src/components/MDX/Heading.tsx

+8
Original file line numberDiff line numberDiff line change
@@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
8888
{...props}
8989
/>
9090
);
91+
92+
export const H5 = ({className, ...props}: HeadingProps) => (
93+
<Heading
94+
as="h5"
95+
className={cn(className, 'text-lg font-display font-bold leading-9 my-2')}
96+
{...props}
97+
/>
98+
);

src/components/MDX/MDXComponents.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {CodeDiagram} from './CodeDiagram';
1111
import ConsoleBlock from './ConsoleBlock';
1212
import ExpandableCallout from './ExpandableCallout';
1313
import ExpandableExample from './ExpandableExample';
14-
import {H1, H2, H3, H4} from './Heading';
14+
import {H1, H2, H3, H4, H5} from './Heading';
1515
import InlineCode from './InlineCode';
1616
import Intro from './Intro';
1717
import BlogCard from './BlogCard';
@@ -388,6 +388,7 @@ export const MDXComponents = {
388388
h2: H2,
389389
h3: H3,
390390
h4: H4,
391+
h5: H5,
391392
hr: Divider,
392393
a: Link,
393394
img: Image,

src/content/community/conferences.md

+45-4
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,30 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
1010

1111
## Upcoming Conferences {/*upcoming-conferences*/}
1212

13-
### React Rally 2023 🐙 {/*react-rally-2023*/}
14-
August 17 & 18, 2023. Salt Lake City, UT, USA
13+
### RedwoodJS Conference 2023 {/*redwoodjs-conference-2023*/}
14+
September 26 - 29, 2023. Grants Pass, Oregon + remote (hybrid event)
1515

16-
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
16+
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)
17+
18+
### React Alicante 2023 {/*react-alicante-2023*/}
19+
September 28 - 30, 2023. Alicante, Spain
20+
21+
[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)
22+
23+
### React Live 2023 {/*react-live-2023*/}
24+
September 29, 2023. Amsterdam, Netherlands
25+
26+
[Website](https://reactlive.nl/)
27+
28+
### React Native EU 2023 {/*react-native-eu-2023*/}
29+
September 7 & 8, 2023. Wrocław, Poland
30+
31+
[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)
32+
33+
### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
34+
September 29 - 30, 2023. Nairobi, Kenya
35+
36+
[Website](https://rendercon.org/) - [Twitter](https://twitter.com/renderconke) - [LinkedIn](https://www.linkedin.com/company/renderconke/) - [YouTube](https://www.youtube.com/channel/UC0bCcG8gHUL4njDOpQGcMIA)
1737

1838
### React Native EU 2023 {/*react-native-eu-2023*/}
1939
September 7 & 8, 2023. Wrocław, Poland
@@ -26,11 +46,22 @@ October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - remot
2646

2747
[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)
2848

49+
### React Brussels 2023 {/*react-brussels-2023*/}
50+
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)
51+
52+
[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)
53+
2954
### React Advanced 2023 {/*react-advanced-2023*/}
3055
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)
3156

3257
[Website](https://www.reactadvanced.com/) - [Twitter](https://twitter.com/ReactAdvanced) - [Facebook](https://www.facebook.com/ReactAdvanced) - [Videos](https://portal.gitnation.org/events/react-advanced-conference-2023)
3358

59+
### reactjsday 2023 {/*reactjsday-2023*/}
60+
October 27th 2023. In-person in Verona, Italy and online (hybrid event)
61+
62+
[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)
63+
64+
3465
### React Summit US 2023 {/*react-summit-us-2023*/}
3566
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)
3667

@@ -41,8 +72,18 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
4172

4273
[Website](https://reactday.berlin) - [Twitter](https://twitter.com/reactdayberlin) - [Facebook](https://www.facebook.com/reactdayberlin/) - [Videos](https://portal.gitnation.org/events/react-day-berlin-2023)
4374

75+
### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
76+
June 12 - June 14, 2024. Atlanta, GA, USA
77+
78+
[Website](https://renderatl.com) - [Discord](https://www.renderatl.com/discord) - [Twitter](https://twitter.com/renderATL) - [Instagram](https://www.instagram.com/renderatl/) - [Facebook](https://www.facebook.com/renderatl/) - [LinkedIn](https://www.linkedin.com/company/renderatl) - [Podcast](https://www.renderatl.com/culture-and-code#/)
79+
4480
## Past Conferences {/*past-conferences*/}
4581

82+
### React Rally 2023 🐙 {/*react-rally-2023*/}
83+
August 17 & 18, 2023. Salt Lake City, UT, USA
84+
85+
[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
86+
4687
### React Nexus 2023 {/*react-nexus-2023*/}
4788
July 07 & 08, 2023. Bangalore, India (In-person event)
4889

@@ -516,7 +557,7 @@ August 18 in Guangzhou, China
516557

517558
[Website](https://react.w3ctech.com)
518559

519-
### React Rally 2018{/*react-rally-2018*/}
560+
### React Rally 2018 {/*react-rally-2018*/}
520561
August 16-17 in Salt Lake City, Utah USA
521562

522563
[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)

src/content/learn/preserving-and-resetting-state.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -935,7 +935,7 @@ Clicking "next" again
935935

936936
</DiagramGroup>
937937

938-
Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
938+
Each `Counter`'s state gets destroyed each time it's removed from the DOM. This is why they reset every time you click the button.
939939

940940
This solution is convenient when you only have a few independent components rendered in the same place. In this example, you only have two, so it's not a hassle to render both separately in the JSX.
941941

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -2266,7 +2266,7 @@ to
22662266
<li>Alexa: 5 tasks left</li>
22672267
```
22682268
2269-
In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and can't know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
2269+
In addition to the updated counts, a human reading this would probably say that you swapped Alexa and Ben's ordering and inserted Claudia between Alexa and Ben. However, React is a computer program and does not know what you intended, so you need to specify a _key_ property for each list item to differentiate each list item from its siblings. If your data was from a database, Alexa, Ben, and Claudia's database IDs could be used as keys.
22702270
22712271
```js {1}
22722272
<li key={user.id}>

src/content/learn/typescript.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out
2020

2121
## Installation {/*installation*/}
2222

23-
All [production-grade React frameworks](https://react-dev-git-fork-orta-typescriptpage-fbopensource.vercel.app/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
23+
All [production-grade React frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
2424

2525
- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
2626
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ These `<select>` props are relevant both for uncontrolled and controlled select
5252

5353
* [`autoComplete`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autocomplete): A string. Specifies one of the possible [autocomplete behaviors.](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete#values)
5454
* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
55-
* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
55+
* `children`: `<select>` accepts [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option), [`<optgroup>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup), and [`<datalist>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist) components as children. You can also pass your own components as long as they eventually render one of the allowed components. If you pass your own components that eventually render `<option>` tags, each `<option>` you render must have a `value`.
5656
* [`disabled`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#disabled): A boolean. If `true`, the select box will not be interactive and will appear dimmed.
5757
* [`form`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#form): A string. Specifies the `id` of the `<form>` this select box belongs to. If omitted, it's the closest parent form.
5858
* [`multiple`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#multiple): A boolean. If `true`, the browser allows [multiple selection.](#enabling-multiple-selection)

src/content/reference/react-dom/flushSync.md

+4-4
Original file line numberDiff line numberDiff line change
@@ -89,14 +89,14 @@ import { flushSync } from 'react-dom';
8989

9090
export default function PrintApp() {
9191
const [isPrinting, setIsPrinting] = useState(false);
92-
92+
9393
useEffect(() => {
9494
function handleBeforePrint() {
9595
flushSync(() => {
9696
setIsPrinting(true);
9797
})
9898
}
99-
99+
100100
function handleAfterPrint() {
101101
setIsPrinting(false);
102102
}
@@ -108,7 +108,7 @@ export default function PrintApp() {
108108
window.removeEventListener('afterprint', handleAfterPrint);
109109
}
110110
}, []);
111-
111+
112112
return (
113113
<>
114114
<h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
@@ -122,7 +122,7 @@ export default function PrintApp() {
122122

123123
</Sandpack>
124124

125-
Without `flushSync`, when the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
125+
Without `flushSync`, the print dialog will display `isPrinting` as "no". This is because React batches the updates asynchronously and the print dialog is displayed before the state is updated.
126126

127127
<Pitfall>
128128

0 commit comments

Comments
 (0)