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 @ 56df8af5 #287

Merged
merged 9 commits into from
Jun 17, 2024
8 changes: 7 additions & 1 deletion src/content/blog/2024/04/25/react-19-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,13 @@ We expect most apps will not be affected since the transform is enabled in most
To install the latest version of React and React DOM:

```bash
npm install react@rc react-dom@rc
npm install --save-exact react@rc react-dom@rc
```

Or, if you're using Yarn:

```bash
yarn add --exact react@rc react-dom@rc
```

If you're using TypeScript, you also need to update the types. Once React 19 is released as stable, you can install the types as usual from `@types/react` and `@types/react-dom`. Until the stable release, the types are available in different packages which need to be enforced in your `package.json`:
Expand Down
75 changes: 35 additions & 40 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,46 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

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

### React Paris 2024 {/*react-paris-2024*/}
March 22, 2024. In-person in Paris, France + Remote (hybrid)

[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)

### Epic Web Conf 2024 {/*epic-web-2024*/}
April 10 - 11, 2024. In-person in Park City, UT, USA

[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)

### React Miami 2024 {/*react-miami-2024*/}
April 19 - 20, 2024. In-person in Miami, FL, USA

[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)

### React Connection 2024 {/*react-connection-2024*/}
April 22, 2024. In-person in Paris, France

[Website](https://reactconnection.io/) - [Twitter](https://twitter.com/ReactConn)

### React Native Connection 2024 {/*react-native-connection-2024*/}
April 23, 2024. In-person in Paris, France

[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)

### React Conf 2024 {/*react-conf-2024*/}
May 15 - 16, 2024. In-person in Henderson, NV, USA + remote

[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)

### App.js Conf 2024 {/*appjs-conf-2024*/}
May 22 - 24, 2024. In-person in Kraków, Poland + remote

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### Frontend Nation 2024 {/*frontend-nation-2024*/}
June 4 - 7, 2024. Online

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

### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)

Expand Down Expand Up @@ -103,6 +63,41 @@ October 17 - 19, 2024. In-person in Goa, India (hybrid event) + Oct 15 2024 - re

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

### Frontend Nation 2024 {/*frontend-nation-2024*/}
June 4 - 7, 2024. Online

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

### App.js Conf 2024 {/*appjs-conf-2024*/}
May 22 - 24, 2024. In-person in Kraków, Poland + remote

[Website](https://appjs.co) - [Twitter](https://twitter.com/appjsconf)

### React Conf 2024 {/*react-conf-2024*/}
May 15 - 16, 2024. In-person in Henderson, NV, USA + remote

[Website](https://conf.react.dev) - [Twitter](https://twitter.com/reactjs)

### React Native Connection 2024 {/*react-native-connection-2024*/}
April 23, 2024. In-person in Paris, France

[Website](https://reactnativeconnection.io/) - [Twitter](https://twitter.com/ReactNativeConn)

### React Miami 2024 {/*react-miami-2024*/}
April 19 - 20, 2024. In-person in Miami, FL, USA

[Website](https://reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)

### Epic Web Conf 2024 {/*epic-web-2024*/}
April 10 - 11, 2024. In-person in Park City, UT, USA

[Website](https://www.epicweb.dev/conf) - [YouTube](https://www.youtube.com/@EpicWebDev)

### React Paris 2024 {/*react-paris-2024*/}
March 22, 2024. In-person in Paris, France + Remote (hybrid)

[Website](https://react.paris/) - [Twitter](https://twitter.com/BeJS_) - [LinkedIn](https://www.linkedin.com/events/7150816372074192900/comments/)

### React Day Berlin 2023 {/*react-day-berlin-2023*/}
December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity (hybrid event)

Expand Down
4 changes: 2 additions & 2 deletions src/content/learn/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export default function App() {

आप इसे डायरेक्ट एडिट कर सकते हैं या उपरी राईट कोर्नर में 'Fork' बटन दबाकर एक नए टैब में ओपन कर सकते हैं।

React डॉक्युमेंटेशन में बहुत से पेज में इस तरह के सैंडबॉक्स शामिल हैं। React डॉक्युमेंटेशन के बाहर, बहुत सारे ऑनलाइन सैंडबॉक्स हैं जो React को सपोर्ट करते हैं: उदाहरण के लिए, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react) , या [CodePen।](https://codepen.io/pen?&editors=0010&layout=left&prefill_data_id=3f4569d1-1b11-4bce-bd46-89090eed5ddb)
React डॉक्युमेंटेशन में बहुत से पेज में इस तरह के सैंडबॉक्स शामिल हैं। React डॉक्युमेंटेशन के बाहर, बहुत सारे ऑनलाइन सैंडबॉक्स हैं जो React को सपोर्ट करते हैं: उदाहरण के लिए, [CodeSandbox](https://codesandbox.io/s/new), [StackBlitz](https://stackblitz.com/fork/react), या [CodePen।](https://codepen.io/pen?template=QWYVwWN)

### React लोकाली ट्राई करें {/*try-react-locally*/}

Expand All @@ -53,4 +53,4 @@ React डॉक्युमेंटेशन में बहुत से प

## अगले स्टेप्स {/*next-steps*/}

सबसे इम्पोर्टेंट React कॉन्सेप्ट्स के टूर के लिए [क्विक स्टार्ट](/learn) गाइड पर जाएं, जिनका आप हर दिन सामना करेंगे।
सबसे इम्पोर्टेंट React कॉन्सेप्ट्स के टूर के लिए [क्विक स्टार्ट](/learn) गाइड पर जाएं, जिनका आप हर दिन सामना करेंगे।
12 changes: 6 additions & 6 deletions src/content/reference/react-dom/components/script.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,10 @@ Props that are **not recommended** for use with React:

#### Special rendering behavior {/*special-rendering-behavior*/}

React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
React can move `<script>` components to the document's `<head>` and de-duplicate identical scripts.

To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.

If you supply any of the `onLoad` or `onError` props, there is no special behavior, because these props indicate that you are managing the loading of the script manually within your component.

This special treatment comes with two caveats:

* React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
Expand All @@ -86,8 +84,10 @@ This special treatment comes with two caveats:
### Rendering an external script {/*rendering-an-external-script*/}

If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
However, the component might be committed before the script has finished loading.
You can start depending on the script content once the `load` event is fired e.g. by using the `onLoad` prop.

If you supply an `src` and `async` prop, your component will suspend while the script is loading. React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.

<SandpackWithHTMLOutput>

Expand All @@ -97,7 +97,7 @@ import ShowRenderedHTML from './ShowRenderedHTML.js';
function Map({lat, long}) {
return (
<>
<script async src="map-api.js" />
<script async src="map-api.js" onLoad={() => console.log('script loaded')} />
<div id="map" data-lat={lat} data-long={long} />
</>
);
Expand All @@ -120,7 +120,7 @@ When you want to use a script, it can be beneficial to call the [preinit](/refer

### Rendering an inline script {/*rendering-an-inline-script*/}

To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`, and since they don't load any external resources, they will not cause your component to suspend.
To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`.

<SandpackWithHTMLOutput>

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react-dom/preinit.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ The `preinit` function is currently only available in React's Canary and experim
`preinit` lets you eagerly fetch and evaluate a stylesheet or external script.

```js
preinit("https://example.com/script.js", {as: "style"});
preinit("https://example.com/script.js", {as: "script"});
```

</Intro>
Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/act.md
Original file line number Diff line number Diff line change
Expand Up @@ -109,7 +109,7 @@ it('can render and update a counter', async () => {
});
```

Here, wwe create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.
Here, we create a container, append it to the document, and render the `Counter` component inside `act()`. This ensures that the component is rendered and its effects are applied before making assertions.

Using `act` ensures that all updates have been applied before we make assertions.

Expand Down
2 changes: 1 addition & 1 deletion src/content/reference/react/cache.md
Original file line number Diff line number Diff line change
Expand Up @@ -226,7 +226,7 @@ By caching a long-running data fetch, you can kick off asynchronous work prior t
```jsx [[2, 6, "await getUser(id)"], [1, 17, "getUser(id)"]]
const getUser = cache(async (id) => {
return await db.user.query(id);
}
})

async function Profile({id}) {
const user = await getUser(id);
Expand Down
Loading