Sync with react.dev @ 68f417a6

src/components/Layout/HomeContent.js

@@ -1643,8 +1643,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Unsave' : 'Save'}
       onClick={() => {

src/components/Layout/Toc.tsx

@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (

src/components/Seo.tsx

@@ -21,19 +21,12 @@ const deployedTranslations = [
   'en',
   'zh-hans',
   'es',
+  'fr',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.
 ];
 
-let shouldPreventIndexing = false;
-if (
-  siteConfig.languageCode !== 'en' &&
-  !deployedTranslations.includes(siteConfig.languageCode)
-) {
-  shouldPreventIndexing = true;
-}
-
 function getDomain(languageCode: string): string {
   const subdomain = languageCode === 'en' ? '' : languageCode + '.';
   return subdomain + 'react.dev';
@@ -69,7 +62,6 @@ export const Seo = withRouter(
           href={canonicalUrl.replace(siteDomain, getDomain('en'))}
           hrefLang="x-default"
         />
-        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
         {deployedTranslations.map((languageCode) => (
           <link
             key={'alt-' + languageCode}

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -8,7 +8,7 @@ title: "React Labs: 그동안의 작업 – 2022년 6월"
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18)은 수년간의 준비 끝에 탄생한 버전으로 React 팀에게 귀중한 교훈을 가져다주었습니다. 수년간의 연구와 다양한 경로를 모색한 끝에 출시된 제품입니다. 그 경로 중 일부는 성공적이었지만 더 많은 경로가 막다른 골목에서 새로운 인사이트로 이어졌습니다. 우리가 얻은 한 가지 교훈은 우리가 탐색하고 있는 경로에 대한 인사이트를 공유받지 못한 채 새로운 기능을 기다리는 것은 커뮤니티에 실망감을 준다는 것입니다.
+[React 18](https://react.dev/blog/2022/03/29/react-v18)은 수년간의 준비 끝에 탄생한 버전으로 React 팀에게 귀중한 교훈을 가져다주었습니다. 수년간의 연구와 다양한 경로를 모색한 끝에 출시된 제품입니다. 그 경로 중 일부는 성공적이었지만 더 많은 경로가 막다른 골목에서 새로운 인사이트로 이어졌습니다. 우리가 얻은 한 가지 교훈은 우리가 탐색하고 있는 경로에 대한 인사이트를 공유받지 못한 채 새로운 기능을 기다리는 것은 커뮤니티에 실망감을 준다는 것입니다.
 
 </Intro>
 

src/content/community/acknowledgements.md

@@ -24,6 +24,7 @@ React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어
 * [Christoph Nakazawa](https://github.com/cpojer)
 * [Christopher Chedeau](https://github.com/vjeux)
 * [Clement Hoang](https://github.com/clemmy)
+* [Dave McCabe](https://github.com/davidmccabe)
 * [Dominic Gannaway](https://github.com/trueadm)
 * [Flarnie Marchan](https://github.com/flarnie)
 * [Jason Quense](https://github.com/jquense)
@@ -33,8 +34,10 @@ React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어
 * [Josh Duck](https://github.com/joshduck)
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
+* [Luna Ruan](https://github.com/lunaruan)
 * [Keyan Zhang](https://github.com/keyz)
 * [Marco Salazar](https://github.com/salazarm)
+* [Mengdi Chen](https://github.com/mondaychen)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
@@ -45,7 +48,7 @@ React는 원래 [Jordan Walke](https://github.com/jordwalke)에 의해 만들어
 * [Robert Zhang](https://github.com/robertzhidealx)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
-* [Seth Webster](https://github.com/sethwebster)
+* [Sean Keegan](https://github.com/seanryankeegan)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)

src/content/community/conferences.md

@@ -55,7 +55,6 @@ 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)
 
@@ -66,6 +65,11 @@ 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)
 
+### 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)
+
 ### Render(ATL) 2024 🍑 {/*renderatl-2024-*/}
 June 12 - June 14, 2024. Atlanta, GA, USA
 

src/content/community/team.md

@@ -26,10 +26,6 @@ Current members of the React team are listed in alphabetical order below.
     Dan got into programming after he accidentally discovered Visual Basic inside Microsoft PowerPoint. He has found his true calling in turning [Sebastian](#sebastian-markbåge)'s tweets into long-form blog posts. Dan occasionally wins at Fortnite by hiding in a bush until the game ends.
 </TeamMember>
 
-<TeamMember name="Dave McCabe" permalink="dave-mccabe" photo="/images/team/dave-mccabe.jpg" github="davidmccabe" twitter="mcc_abe" title="Engineer at Meta">
-    An engineer by trade and outdoorsman at heart, David has long been an innovator in the field of programming-while-sunbathing. Besides surprising his colleagues with unique outdoor video-call backgrounds, he enjoys playing guitar (in sunlit meadows, of course) and martial arts (still indoors, gotta work on that). 
-</TeamMember>
-
 <TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" title="Engineering Manager at Meta">
     Eli got into programming after he got suspended from middle school for hacking. He has been working on React and React Native since 2017. He enjoys eating treats, especially ice cream and apple pie. You can find Eli trying quirky activities like parkour, indoor skydiving, and aerial silks.
 </TeamMember>
@@ -54,10 +50,6 @@ Current members of the React team are listed in alphabetical order below.
     Lauren’s programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. When she’s not adding bugs into React, she enjoys dropping cheeky memes in chat, and playing all too many video games with her partner, and her dog Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Independent Engineer">
-    Luna learned programming because she thought it meant creating video games. Instead, she ended up working on the Pinterest web app, and now on React itself. Luna doesn't want to make video games anymore, but she plans to do creative writing if she ever gets bored.
-</TeamMember>
-
 <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" title="Engineer at Meta">
     Luna first learnt the fundamentals of python at the age of 6 from her father. Since then, she has been unstoppable. Luna aspires to be a gen z, and the road to success is paved with environmental advocacy, urban gardening and lots of quality time with her Voo-Doo’d (as pictured). 
 </TeamMember>
@@ -66,10 +58,6 @@ Current members of the React team are listed in alphabetical order below.
     Matt stumbled into coding, and since then, has become enamored with creating things in communities that can’t be created alone. Prior to React, he worked on YouTube, the Google Assistant, Fuchsia, and Google Cloud AI and Evernote. When he's not trying to make better developer tools he enjoys the mountains, jazz, and spending time with his family.
 </TeamMember>
 
-<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Engineer at Meta">
-    While working on his Digital Arts degree Mengdi was conceited about his front-end skills because his CSS worked perfectly even on IE6. But soon React opened a new door of programming for him, and he has been dreaming of joining the React team ever since. Outside of work, he is usually busy chasing his two kids around or collecting strange recipes.
-</TeamMember>
-
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Engineer at Meta">
     Mofei started programming when she realized it can help her cheat in video games. She focused on operating systems in undergrad / grad school, but now finds herself happily tinkering on React. Outside of work, she enjoys debugging bouldering problems and planning her next backpacking trip(s).
 </TeamMember>
@@ -86,10 +74,6 @@ Current members of the React team are listed in alphabetical order below.
     Sathya hated the Dragon Book in school but somehow ended up working on compilers all his career. When he's not compiling React components, he's either drinking coffee or eating yet another Dosa.
 </TeamMember>
 
-<TeamMember name="Sean Keegan" permalink="sean-keegan" photo="/images/team/sean-keegan.jpg" github="seanryankeegan" twitter="DevRelSean" title="Developer Advocate at Meta">
-    After a first career as a math teacher, Sean remembered that one intro to comp sci class he had to take as a prereq and thought “that was kind of fun!”. One coding bootcamp and several tech jobs later, Sean discovered developer advocacy and hasn’t looked back. Outside of work, Sean enjoys ultimate frisbee, video games, and researching (but rarely implementing) better ways to care for his houseplants.
-</TeamMember>
-
 <TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Engineer at Vercel">
     Sebastian majored in psychology. He's usually quiet. Even when he says something, it often doesn't make sense to the rest of us until a few months later. The correct way to pronounce his surname is "mark-boa-geh" but he settled for "mark-beige" out of pragmatism -- and that's how he approaches React.
 </TeamMember>

src/content/learn/passing-props-to-a-component.md

@@ -467,7 +467,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>Discovered: </b>
-            polonium (element)
+            polonium (chemical element)
           </li>
         </ul>
       </section>

src/content/learn/referencing-values-with-refs.md

@@ -284,7 +284,7 @@ console.log(ref.current); // 5
 
 ## Refs 와 DOM {/*refs-and-the-dom*/}
 
-임의의 값을 ref로 지정할 수 있습니다. 그러나 ref의 가장 일반적인 사용 사례는 DOM 엘리먼트에 액세스하는 것입니다. 예를 들어 프로그래밍 방식으로 입력의 초점을 맞추려는 경우 유용합니다. `<div ref={myRef}>`와 같은 JSX의 `ref` 어트리뷰트에 ref를 전달하면 React는 해당 DOM 엘리먼트를 `myRef.current`에 넣습니다. 이에 대한 자세한 내용은 [Refs를 사용하여 DOM 조작](/learn/manipulating-the-dom-with-refs)에서 확인할 수 있습니다.
+임의의 값을 ref로 지정할 수 있습니다. 그러나 ref의 가장 일반적인 사용 사례는 DOM 엘리먼트에 액세스하는 것입니다. 예를 들어 프로그래밍 방식으로 입력의 초점을 맞추려는 경우 유용합니다. `<div ref={myRef}>`와 같은 JSX의 `ref` 어트리뷰트에 ref를 전달하면 React는 해당 DOM 엘리먼트를 `myRef.current`에 넣습니다. DOM에서 요소가 제거되면 React는 myRef.current를 null로 업데이트합니다. 이에 대한 자세한 내용은 [Refs를 사용하여 DOM 조작](/learn/manipulating-the-dom-with-refs)에서 확인할 수 있습니다.
 
 <Recap>
 
@@ -657,4 +657,4 @@ export default function Chat() {
 
 </Solution>
 
-</Challenges>
+</Challenges>

src/content/learn/removing-effect-dependencies.md

@@ -927,7 +927,7 @@ function ChatRoom() {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, []); // ✅ All dependencies declared
@@ -1614,7 +1614,7 @@ label, button { display: block; margin-bottom: 5px; }
 
 Effect가 `options` 객체에 의존하기 때문에 다시 실행되고 있습니다. 객체는 의도치 않게 다시 생성될 수 있으므로 가능하면 Effect의 의존성 요소로 지정하지 않도록 해야 합니다.
 
-가장 덜 공격적인 수정 방법은 Effect 외부에서 `roomId`와 `serverUrl`을 읽은 다음 Effect가 이러한 기본 값에 의존하도록 만드는 것입니다(의도치 않게 변경할 수 없음). Effect 내부에서 객체를 생성하면 `createConnection`으로 전달됩니다.
+가장 덜 공격적인 수정 방법은 Effect 외부에서 `roomId`와 `serverUrl`을 읽은 다음 Effect가 이러한 기본 값에 의존하도록 만드는 것입니다(의도치 않게 변경할 수 없음). Effect 내부에서 객체를 생성하면 `createConnection`으로 전달됩니다:
 
 <Sandpack>
 

src/content/learn/rendering-lists.md

@@ -1086,7 +1086,7 @@ export const recipes = [{
 
 #### 구분 기호가 있는 리스트 {/*list-with-a-separator*/}
 
-이 예제는 Katsushika Hokusai의 유명한 하이쿠(일본의 정형시)를 렌더링하며, 각 행은 `<p>` 태그로 래핑되어 있습니다. 여러분이 해야 할 일은 각 단락 사이에 `<hr />` 구분 기호를 삽입하는 것입니다. 결과 구조는 다음과 같아야 합니다.
+이 예제는 Katsushika Hokusai의 유명한 하이쿠(일본의 정형시)를 렌더링하며, 각 행은 `<p>` 태그로 래핑되어 있습니다. 여러분이 해야 할 일은 각 단락 사이에 `<hr />` 구분 기호를 삽입하는 것입니다. 결과 구조는 다음과 같아야 합니다:
 
 ```js
 <article>
@@ -1258,4 +1258,4 @@ hr {
 
 </Solution>
 
-</Challenges>
+</Challenges>

src/content/learn/start-a-new-react-project.md

@@ -21,12 +21,12 @@ React를 전체적으로 적용한 애플리케이션이나 웹 사이트를 새
 **[Next.js](https://nextjs.org/)는 풀스택 React 프레임워크입니다.** 다재다능한 도구이며, 정적인 블로그부터 복잡한 동적 애플리케이션까지 다양한 크기의 React 애플리케이션을 만들 수 있습니다. 새로운 Next.js 프로젝트를 작성하려면 터미널에서 다음을 실행하세요.
 
 <TerminalBlock>
-npx create-next-app
+npx create-next-app@latest
 </TerminalBlock>
 
 Next.js를 처음 사용하는 분이라면 [Next.js 자습서](https://nextjs.org/learn/foundations/about-nextjs)를 읽어보세요.
 
-Next.js는 [Vercel](https://vercel.com/)이 관리합니다. 어느 Node.js 서버, 서버리스 호스팅 또는 직접 소유한 서버 어느 곳에라도 [Next.js 애플리케이션을 배포](https://nextjs.org/docs/deployment)할 수 있습니다. [완전 정적인 Next.js 애플리케이션](https://nextjs.org/docs/advanced-features/static-html-export)은 어느 정적 호스팅에라도 배포할 수 있습니다.
+Next.js는 [Vercel](https://vercel.com/)에 의해 유지보수되고 있습니다. Next.js 앱을 [Node.js 또는 서버리스 호스팅](https://nextjs.org/docs/app/building-your-application/deploying) 또는 자체 서버에 배포할 수 있습니다. Next.js는 또한 [서버가 필요하지 않은 정적 익스포트](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports)를 지원합니다.
 
 ### Remix {/*remix*/}
 
@@ -89,14 +89,9 @@ React를 지속적으로 개선할 방법을 찾아가는 과정에서, 우리
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[Next.js의 App Router](https://beta.nextjs.org/docs/getting-started)는 React 팀의 풀스택 아키텍처 비전을 구현하기 위해 재설계된 Next.js API입니다.** 이를 통해 서버에서 또는 빌드 중에 실행되는 비동기 컴포넌트에서 데이터를 가져올 수 있습니다.
+**[Next.js의 앱 라우터](https://nextjs.org/docs)**는 React 팀의 풀 스택 아키텍처 비전을 구현하기 위한 Next.js API의 재설계입니다. 이를 통해 서버에서 실행되거나 빌드 중에 데이터를 비동기적으로 가져올 수 있습니다.
 
-Next.js는 [Vercel](https://vercel.com/)이 관리합니다. 어느 Node.js 서버, 서버리스 호스팅 또는 직접 소유한 서버 어느 곳에라도 [Next.js 애플리케이션을 배포](https://nextjs.org/docs/deployment) 할 수 있습니다. Next.js는 서버가 필요하지 않은 [정적 사이트로 내보내기](https://beta.nextjs.org/docs/configuring/static-export)도 지원합니다.
-<Pitfall>
-
-Next.js의 App Router는 **현재 베타 버전이며 아직 프로덕션 사용을 권장하지는 않습니다**(2023년 3월 현재 기준). 기존 Next.js 프로젝트에서 이를 실험해보려면 [점진적 마이그레이션 가이드](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app)를 참고하세요.
-
-</Pitfall>
+Next.js는 [Vercel](https://vercel.com/)에서 유지보수되고 있습니다. Next.js 앱을 [Node.js 또는 서버리스 호스팅](https://nextjs.org/docs/app/building-your-application/deploying) 또는 자체 서버에 배포할 수 있습니다. 또한 Next.js는 [서버가 필요하지 않은 정적 익스포트](https://nextjs.org/docs/app/building-your-application/deploying/static-exports)도 지원합니다.
 
 <DeepDive>
 
@@ -130,4 +125,4 @@ Next.js의 App Router는 또한 Suspense를 사용하는 데이터 통신과도
 
 Server Component와 Suspense는 Next.js의 기능이 아닌 React의 기능입니다. 하지만 프레임워크 수준에서 이를 채택하려면 많은 노력과 비교적 복잡한 구현 작업이 필요합니다. 현재 기준으로는 Next.js의 App Router가 가장 완벽한 구현입니다. React 팀은 차세대 프레임워크에서는 이러한 기능을 구현하기 쉽도록 번들러 개발자와 공동으로 노력하고 있습니다.
 
-</DeepDive>
+</DeepDive>

src/content/learn/state-a-components-memory.md

@@ -1486,8 +1486,6 @@ export default function FeedbackForm() {
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-
 export default function FeedbackForm() {
   function handleClick() {
     const name = prompt('What is your name?');