Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sync with react.dev @ 5219d736 #89

Merged
merged 18 commits into from
Sep 24, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/components/Icon/IconTwitter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
return (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
width="1.33em"
height="1.33em"
viewBox="0 0 512 512"
height="1.30em"
width="1.30em"
fill="currentColor"
{...props}>
<path fill="none" d="M0 0h24v24H0z" />
<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" />
<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" />
</svg>
);
}
Expand Down
8 changes: 8 additions & 0 deletions src/components/MDX/Heading.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,3 +88,11 @@ export const H4 = ({className, ...props}: HeadingProps) => (
{...props}
/>
);

export const H5 = ({className, ...props}: HeadingProps) => (
<Heading
as="h5"
className={cn(className, 'text-lg font-display font-bold leading-9 my-2')}
{...props}
/>
);
3 changes: 2 additions & 1 deletion src/components/MDX/MDXComponents.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import {CodeDiagram} from './CodeDiagram';
import ConsoleBlock from './ConsoleBlock';
import ExpandableCallout from './ExpandableCallout';
import ExpandableExample from './ExpandableExample';
import {H1, H2, H3, H4} from './Heading';
import {H1, H2, H3, H4, H5} from './Heading';
import InlineCode from './InlineCode';
import Intro from './Intro';
import BlogCard from './BlogCard';
Expand Down Expand Up @@ -388,6 +388,7 @@ export const MDXComponents = {
h2: H2,
h3: H3,
h4: H4,
h5: H5,
hr: Divider,
a: Link,
img: Image,
Expand Down
43 changes: 39 additions & 4 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,27 +10,52 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

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

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

[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)
[Website](https://www.redwoodjsconf.com/) - [Twitter](https://twitter.com/redwoodjs)

### React Alicante 2023 {/*react-alicante-2023*/}
September 28 - 30, 2023. Alicante, Spain

[Website](https://reactalicante.es/) - [Twitter](https://twitter.com/reactalicante)

### React Live 2023 {/*react-live-2023*/}
September 29, 2023. Amsterdam, Netherlands

[Website](https://reactlive.nl/)

### React Native EU 2023 {/*react-native-eu-2023*/}
September 7 & 8, 2023. Wrocław, Poland

[Website](https://react-native.eu) - [Twitter](https://twitter.com/react_native_eu) - [Facebook](https://www.facebook.com/reactnativeeu)

### RenderCon Kenya 2023 {/*rendercon-kenya-2023*/}
September 29 - 30, 2023. 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 India 2023 {/*react-india-2023*/}
October 5 - 7, 2023. In-person in Goa, India (hybrid event) + Oct 3 2023 - 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)

### React Brussels 2023 {/*react-brussels-2023*/}
October 13th 2023. In-person in Brussels, Belgium + Remote (hybrid)

[Website](https://www.react.brussels/) - [Twitter](https://twitter.com/BrusselsReact)

### React Advanced 2023 {/*react-advanced-2023*/}
October 20 & 23, 2023. In-person in London, UK + remote first interactivity (hybrid event)

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

### reactjsday 2023 {/*reactjsday-2023*/}
October 27th 2023. In-person in Verona, Italy and online (hybrid event)

[Website](https://2023.reactjsday.it/) - [Twitter](https://twitter.com/reactjsday) - [Facebook](https://www.facebook.com/GrUSP/) - [YouTube](https://www.youtube.com/c/grusp)


### React Summit US 2023 {/*react-summit-us-2023*/}
November 13 & 15, 2023. In-person in New York, US + remote first interactivity (hybrid event)

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

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

### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
June 12 - June 14, 2024. Atlanta, GA, USA

[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#/)

## Past Conferences {/*past-conferences*/}

### React Rally 2023 🐙 {/*react-rally-2023*/}
August 17 & 18, 2023. Salt Lake City, UT, USA

[Website](https://www.reactrally.com/) - [Twitter](https://twitter.com/ReactRally) - [Instagram](https://www.instagram.com/reactrally/)

### React Nexus 2023 {/*react-nexus-2023*/}
July 07 & 08, 2023. Bangalore, India (In-person event)

Expand Down Expand Up @@ -516,7 +551,7 @@ August 18 in Guangzhou, China

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

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

[Website](http://www.reactrally.com) - [Twitter](https://twitter.com/reactrally)
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/preserving-and-resetting-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -935,7 +935,7 @@ Clicking "next" again

</DiagramGroup>

Each `Counter`'s state gets destroyed each time its removed from the DOM. This is why they reset every time you click the button.
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.

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.

Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/tutorial-tic-tac-toe.md
Original file line number Diff line number Diff line change
Expand Up @@ -2266,7 +2266,7 @@ to
<li>Alexa: 5 tasks left</li>
```

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.
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.

```js {1}
<li key={user.id}>
Expand Down
2 changes: 1 addition & 1 deletion src/content/learn/typescript.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ TypeScript is a popular way to add type definitions to JavaScript codebases. Out

## Installation {/*installation*/}

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:
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:

- [Next.js](https://nextjs.org/docs/pages/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/components/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ These `<select>` props are relevant both for uncontrolled and controlled select

* [`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)
* [`autoFocus`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#autofocus): A boolean. If `true`, React will focus the element on mount.
* `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`.
* `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`.
* [`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.
* [`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.
* [`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)
Expand Down
6 changes: 3 additions & 3 deletions src/content/reference/react-dom/flushSync.md
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,14 @@ import { flushSync } from 'react-dom';

export default function PrintApp() {
const [isPrinting, setIsPrinting] = useState(false);

useEffect(() => {
function handleBeforePrint() {
flushSync(() => {
setIsPrinting(true);
})
}

function handleAfterPrint() {
setIsPrinting(false);
}
Expand All @@ -108,7 +108,7 @@ export default function PrintApp() {
window.removeEventListener('afterprint', handleAfterPrint);
}
}, []);

return (
<>
<h1>isPrinting: {isPrinting ? 'yes' : 'no'}</h1>
Expand Down
Loading
Loading