Sync with react.dev @ bb3a0f5c

src/components/Layout/Page.tsx

@@ -129,7 +129,7 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             'grid grid-cols-only-content lg:grid-cols-sidebar-content 2xl:grid-cols-sidebar-content-toc'
         )}>
         {showSidebar && (
-          <div className="lg:-mt-16">
+          <div className="lg:-mt-16 z-10">
             <div className="fixed top-0 py-0 shadow lg:pt-16 lg:sticky start-0 end-0 lg:shadow-none">
               <SidebarNav
                 key={section}

src/components/MDX/SandpackWithHTMLOutput.tsx

@@ -20,7 +20,7 @@ export default function ShowRenderedHTML({children}) {
         {formatHTML(markup)}
       </pre>
     </>
-  );  
+  );
 }`;
 
 const formatHTML = `
@@ -77,8 +77,8 @@ export default memo(function SandpackWithHTMLOutput(
 ) {
   const children = [
     ...Children.toArray(props.children),
-    createFile('ShowRenderedHTML.js', ShowRenderedHTML),
-    createFile('formatHTML.js hidden', formatHTML),
+    createFile('src/ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('src/formatHTML.js hidden', formatHTML),
     createFile('package.json hidden', packageJSON),
   ];
   return <Sandpack {...props}>{children}</Sandpack>;

src/components/SocialBanner.tsx

@@ -7,9 +7,9 @@ import {useRef, useEffect} from 'react';
 import cn from 'classnames';
 import {ExternalLink} from './ExternalLink';
 
-const bannerText = 'Support Ukraine 🇺🇦';
-const bannerLink = 'https://opensource.fb.com/support-ukraine';
-const bannerLinkText = 'Help Provide Humanitarian Aid to Ukraine';
+const bannerText = 'Join us for React Conf on May 15-16.';
+const bannerLink = 'https://conf.react.dev/';
+const bannerLinkText = 'Learn more.';
 
 export default function SocialBanner() {
   const ref = useRef<HTMLDivElement | null>(null);
@@ -39,9 +39,7 @@ export default function SocialBanner() {
       <ExternalLink
         className="ms-0 sm:ms-1 text-link dark:text-link-dark hover:underline"
         href={bannerLink}>
-        <div className="inline sm:hidden">🇺🇦 </div>
         {bannerLinkText}
-        <span className="hidden sm:inline">.</span>
       </ExternalLink>
     </div>
   );

src/content/community/conferences.md

@@ -25,6 +25,16 @@ 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
 

src/content/learn/reacting-to-input-with-state.md

@@ -545,6 +545,7 @@ body { margin: 0; padding: 0; height: 250px; }
   width: 200px;
   height: 200px;
   border-radius: 10px;
+  border: 5px solid transparent;
 }
 
 .picture--active {

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

@@ -96,7 +96,7 @@ In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet
 
 There are two exception to this special behavior:
 
-* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.  
+* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.
 * If you supply any of the `onLoad`, `onError`, or `disabled` props, there is no special behavior, because these props indicate that you are managing the loading of the stylesheet manually within your component.
 
 This special treatment comes with two caveats:
@@ -114,7 +114,7 @@ You can annotate the document with links to related resources such as an icon, c
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function BlogPage() {
@@ -141,7 +141,7 @@ When you want to use a stylesheet, it can be beneficial to call the [preinit](/r
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
@@ -164,7 +164,7 @@ Stylesheets can conflict with each other, and when they do, the browser goes wit
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
@@ -195,7 +195,7 @@ If you render the same stylesheet from multiple components, React will place onl
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {

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

@@ -72,7 +72,7 @@ You can render the `<meta>` component from any component. React will put a `<met
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {

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

@@ -91,7 +91,7 @@ If you supply an `src` and `async` prop, your component will suspend while the s
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Map({lat, long}) {
@@ -124,7 +124,7 @@ To include an inline script, render the `<script>` component with the script sou
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Tracking() {

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

@@ -73,7 +73,7 @@ If you supply an `href` and `precedence` prop, your component will suspend while
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 import { useId } from 'react';
 

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

@@ -66,7 +66,7 @@ Render the `<title>` component from any component with text as its children. Rea
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function ContactUsPage() {

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

@@ -146,7 +146,7 @@ function AppRoot() {
 }
 ```
 
-When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen]((https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)).
+When preloading an image, the `imageSrcSet` and `imageSizes` options help the browser [fetch the correctly sized image for the size of the screen](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images).
 
 <Solution />
 

src/content/reference/react/experimental_taintUniqueValue.md

@@ -192,7 +192,7 @@ experimental_taintUniqueValue(
 );
 ```
 
-Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, a error will be thrown with message you defined when you called `taintUniqueValue`.
+Now whenever anyone tries to pass this password to a Client Component, or send the password to a Client Component with a Server Action, an error will be thrown with message you defined when you called `taintUniqueValue`.
 
 </DeepDive>
 

src/content/reference/react/index.md

@@ -8,7 +8,11 @@ title: React リファレンス概要
 
 </Intro>
 
+<<<<<<< HEAD
 React リファレンスは機能別にいくつかのサブセクションに分かれています。
+=======
+The React reference documentation is broken down into functional subsections:
+>>>>>>> bb3a0f5c10aaeba6e6fb35f31f36b47812ece158
 
 ## React {/*react*/}
 

src/content/reference/react/use.md

@@ -351,14 +351,23 @@
 
 場合によっては、`use` に渡されたプロミスが拒否されることがあります。プロミスが拒否された場合にそれを処理する方法は以下の 2 つです。
 
+<<<<<<< HEAD
 1. [エラーバウンダリを使ってユーザにエラーを表示する](#displaying-an-error-to-users-with-error-boundary)
 2. [`Promise.catch` で代替値を提供する](#providing-an-alternative-value-with-promise-catch)
+=======
+1. [Displaying an error to users with an error boundary.](#displaying-an-error-to-users-with-error-boundary)
+2. [Providing an alternative value with `Promise.catch`](#providing-an-alternative-value-with-promise-catch)
+>>>>>>> bb3a0f5c10aaeba6e6fb35f31f36b47812ece158
 
 <Pitfall>
 `use` は try-catch ブロック内で呼び出すことはできません。try-catch ブロックを使う代わりに、[コンポーネントをエラーバウンダリでラップする](#displaying-an-error-to-users-with-error-boundary)か、または[プロミスの `.catch` メソッドで代替値を提供](#providing-an-alternative-value-with-promise-catch)してください。
 </Pitfall>
 
+<<<<<<< HEAD
 #### エラーバウンダリを使ってユーザにエラーを表示する {/*displaying-an-error-to-users-with-error-boundary*/}
+=======
+#### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+>>>>>>> bb3a0f5c10aaeba6e6fb35f31f36b47812ece158
 
 プロミスが拒否されたときにユーザにエラーを表示したい場合は、[エラーバウンダリ](/reference/react/Component#catching-rendering-errors-with-an-error-boundary) を使用できます。エラーバウンダリを使用するには、`use` フックを呼び出しているコンポーネントをエラーバウンダリでラップします。`use` に渡されたプロミスが拒否されると、エラーバウンダリに書かれたフォールバックが表示されます。
 

src/content/reference/react/useTransition.md

@@ -1501,7 +1501,11 @@
 
 ---
 
+<<<<<<< HEAD
 ### エラーバウンダリでユーザにエラーを表示する {/*displaying-an-error-to-users-with-error-boundary*/}
+=======
+### Displaying an error to users with an error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
+>>>>>>> bb3a0f5c10aaeba6e6fb35f31f36b47812ece158
 
 <Canary>