diff --git a/src/content/community/conferences.md b/src/content/community/conferences.md index f3ae269b..37d3726e 100644 --- a/src/content/community/conferences.md +++ b/src/content/community/conferences.md @@ -25,6 +25,31 @@ October 21-23, 2026. In-person in Athens [Website](https://athens.cityjsconf.org/) - [Twitter](https://x.com/cityjsconf) - [Bluesky](https://bsky.app/profile/cityjsconf.bsky.social) +### React Advanced London 2026 {/*react-advanced-london-2026*/} +October 23 & 26, 2026. In-person in London, UK + online (hybrid event) + +[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced) - [LinkedIn](https://www.linkedin.com/showcase/react-advanced-london/) + +### React Summit US 2026 {/*react-summit-us-2026*/} +November 17 & 20, 2026. In-person in New York, USA + online (hybrid event) + +[Website](https://reactsummit.us/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit) + +### React Day Berlin 2026 {/*react-day-berlin-2026*/} +December 4 & 7, 2026. In-person in Berlin, Germany + online (hybrid event) + +[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin) - [LinkedIn](https://www.linkedin.com/showcase/react-day-berlin/) + +### React Summit Asia 2027 {/*react-summit-asia-2027*/} +April 15 & 19, 2027. In-person in Singapore + online (hybrid event) + +[Website](https://reactsummit.asia/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit) + +### React Summit 2027 {/*react-summit-2027*/} +May 21 & 25, 2027. In-person in Amsterdam, Netherlands + online (hybrid event) + +[Website](https://reactsummit.com/) - [Twitter](https://x.com/reactsummit) - [LinkedIn](https://www.linkedin.com/showcase/reactsummit) + ## Past Conferences {/*past-conferences*/} diff --git a/src/content/reference/react-dom/browser.md b/src/content/reference/react-dom/browser.md index 00c60d37..8b009057 100644 --- a/src/content/reference/react-dom/browser.md +++ b/src/content/reference/react-dom/browser.md @@ -47,7 +47,7 @@ During server rendering, `use(browser())` stops rendering the component and leav #### Caveats {/*caveats*/} * `use(browser())` must be inside a `` boundary during server rendering. Without one, the server render fails. -* In a React Server Components app, `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components). +* `use(browser())` must be called from a [Client Component](/reference/rsc/use-client), not a [Server Component](/reference/rsc/server-components). * Calling `browser()` by itself has no effect. To mark a component as browser-only, pass the value returned by `browser` to `use`. Do not throw it. --- @@ -206,7 +206,7 @@ iframe { -In a React Server Components app, `use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component: +`use(browser())` must be called from a Client Component. If your framework uses Server Components by default, add the [`'use client'`](/reference/rsc/use-client) directive to that file or move the call to a child Client Component: ```js {1} 'use client'; diff --git a/src/content/reference/react-dom/components/img.md b/src/content/reference/react-dom/components/img.md new file mode 100644 index 00000000..4a1f4507 --- /dev/null +++ b/src/content/reference/react-dom/components/img.md @@ -0,0 +1,257 @@ +--- +title: "" +--- + + + +The [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img) lets you embed an image. + +```js +A person walking through a park +``` + + + + + +--- + +## Reference {/*reference*/} + +### `` {/*img*/} + +To display an image, render the [built-in browser `` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img). + +```js +A person walking through a park +``` + +[See more examples below.](#usage) + +#### Props {/*props*/} + +`` supports all [common element props.](/reference/react-dom/components/common#common-props) + +* `alt`: a string. Specifies alternative text for the image. Use an empty string for a purely decorative image. +* `crossOrigin`: a string. Specifies the [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use when fetching the image. The possible values are `anonymous` and `use-credentials`. +* `decoding`: a string. Suggests whether the browser should wait to decode the image before presenting other content. The possible values are `async`, `sync`, and `auto` (the default). +* `fetchPriority`: a string. Suggests a relative priority for fetching the image. The possible values are `high`, `low`, and `auto` (the default). During server rendering, `fetchPriority="low"` also prevents React from [automatically preloading the image.](#controlling-image-preloading-during-server-rendering) +* `height`: a number or string. Specifies the rendered height of the image. +* `loading`: a string. Specifies whether the browser should defer loading the image until it is near the viewport. The possible values are `eager` (the default) and `lazy`. Setting `loading="lazy"` prevents React from [automatically preloading the image.](#controlling-image-preloading-during-server-rendering) +* `onError`: an [event handler](/reference/react-dom/components/common#event-handler) function. Fires when the image fails to load. +* `onLoad`: an [event handler](/reference/react-dom/components/common#event-handler) function. Fires when the image finishes loading. Passing `onLoad` prevents React from [waiting for the image during a client-rendered View Transition update.](#waiting-for-an-image-during-a-view-transition) +* `referrerPolicy`: a string. Specifies the [referrer information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#referrerpolicy) to send when fetching the image. +* `sizes`: a string. Specifies the image sizes for different page layouts. Used with `srcSet`. +* `src`: a string. Specifies the URL of the image. +* `srcSet`: a string. Specifies one or more candidate image sources for the browser to choose from. +* `useMap`: a string. Associates the image with a [client-side image map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/map). +* `width`: a number or string. Specifies the rendered width of the image. + +#### Caveats {/*caveats*/} + +* Do not pass an empty string to `src`. It may cause the browser to request the current page again. React warns in development and omits the attribute. To render no image, omit the `` or pass `null` to `src`. +* `` cannot have children or use `dangerouslySetInnerHTML`. React throws an error if you pass either. +* `fetchPriority="low"` does not stop React from waiting for the image to load and decode during a client-rendered View Transition update. Use `loading="lazy"` or an `onLoad` handler to opt out of that behavior. + +--- + +## Usage {/*usage*/} + +### Displaying an image {/*displaying-an-image*/} + +Pass the image URL to `src` and a text description to `alt`: + + + +```js +export default function Profile() { + return ( + Hedy Lamarr + ); +} +``` + +```css +img { + border-radius: 50%; + object-fit: cover; +} +``` + + + +Specify `width` and `height` when you know the image dimensions so the browser can reserve space before the image loads. For a decorative image, pass `alt=""` so that screen readers ignore it. + +--- + +### Controlling image preloading during server rendering {/*controlling-image-preloading-during-server-rendering*/} + +During server rendering, React automatically generates a preload hint for an `` by default. This can let the browser start fetching the image before it encounters the `` in the rendered HTML. + +Add `loading="lazy"` or `fetchPriority="low"` to an image that should not receive this hint: + +```js +function ProductPage() { + return ( + <> + Featured product + Related product + Another product + + ); +} +``` + +In this example, React generates a preload hint only for `hero.jpg`. Depending on the server API or framework, React may render the equivalent of this element: + +```html + +``` + +React may instead provide the same hint in a `Link` response header. The other two images keep their `loading` and `fetchPriority` props in the rendered HTML, but React does not generate preload hints for them. The `loading="lazy"` prop asks the browser to defer loading an image until it approaches the viewport. The `fetchPriority="low"` prop allows the image to load immediately, but tells the browser to fetch it at a lower priority. + +React also does not automatically preload an image when it is inside a `` or `