Merge pull request #879 from reactjs/sync-68f417a6

Sync with react.dev @ 68f417a

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

@@ -8,7 +8,7 @@ title: "React Labs: En qué hemos estado trabajando – junio 2022"
 
 <Intro>
 
-[React 18](https://reactjs.org/blog/2022/03/29/react-v18) estuvo por años en desarrollo y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando.
+[React 18](https://es.react.dev/blog/2022/03/29/react-v18) estuvo por años en desarrollo, y con él llegaron lecciones valiosas para el equipo de React. Su lanzamiento fue el resultado de muchos años de investigación y exploración de diversos caminos. Algunos de esos caminos fueron exitosos; muchos otros fueron callejones sin salida que nos llevaron a nuevas ideas. Una lección que hemos aprendido es que resulta frustrante para la comunidad esperar nuevas funcionalidades sin tener información sobre las rutas que estamos explorando.
 
 </Intro>
 

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/learn/referencing-values-with-refs.md

@@ -284,7 +284,7 @@ Tampoco tienes que preocuparte por [evitar la mutación](/learn/updating-objects
 
 ## Las refs y el DOM {/*refs-and-the-dom*/}
 
-Puedes apuntar una ref hacia cualquier valor. Sin embargo, el caso de uso más común para una ref es acceder a un elemento del DOM. Por ejemplo, esto es útil cuando quieres enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, así `<div ref={myRef}>`, React colocará el elemento del DOM correspondiente en `myRef.current`. Puedes leer más sobre esto en [Manipular el DOM con refs.](/learn/manipulating-the-dom-with-refs)
+Puedes apuntar una ref a cualquier valor. Sin embargo, el uso más común para una ref es acceder a un elemento DOM. Por ejemplo, esto es útil si deseas enfocar un input programáticamente. Cuando pasas una ref a un atributo `ref` en JSX, como `<div ref={myRef}>`, React pondrá el elemento DOM correspondiente en `myRef.current`. Una vez que el elemento es eliminado del DOM, React actualizará `myRef.current` a `null`. Puedes leer más sobre esto en [Manipular el DOM con Refs.](/learn/manipulating-the-dom-with-refs)
 
 <Recap>
 

src/content/learn/rendering-lists.md

@@ -1086,7 +1086,7 @@ Aquí, `<Recipe {...recipe} key={recipe.id} />` es un atajo de sintaxis diciendo
 
 #### Lista con un separador {/*list-with-a-separator*/}
 
-Este ejemplo renderiza un haiku famoso escrito por Katsushika Hokusai, con cada línea envuelta en una etiqueta `<p>`. Tu trabajo es insertar un separador `<hr />` entre cada párrafo. Tu estructura final debería verse algo como esto:
+Este ejemplo renderiza un famoso haiku de Tachibana Hokushi, con cada línea envuelta en una etiqueta `<p>`. Tu trabajo consiste en insertar un separador `<hr />` entre cada párrafo. La estructura resultante debería verse así:
 
 ```js
 <article>

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

@@ -21,12 +21,12 @@ Si deseas crear una nueva aplicación o un nuevo sitio web completamente con Rea
 **[Next.js](https://nextjs.org/) es un framework de React muy completo.** Es versátil y te permite crear aplicaciones React de cualquier tamaño, desde un blog estático hasta una aplicación dinámica compleja. Para crear un nuevo proyecto Next.js, ejecuta en tu terminal:
 
 <TerminalBlock>
-npx create-next-app
+npx create-next-app@latest
 </TerminalBlock>
 
 Si eres nuevo en Next.js, mira el [tutorial de Next.js.](https://nextjs.org/learn/foundations/about-nextjs)
 
-Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/deployment) en cualquier alojamiento Node.js, sin servidor, o en tu propio servidor. [Las aplicaciones Next.js estáticas](https://nextjs.org/docs/advanced-features/static-html-export) se pueden implementar en cualquier alojamiento estático.
+Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/pages/building-your-application/deploying/static-exports) que no requiere un servidor.
 
 ### Remix {/*remix*/}
 
@@ -89,14 +89,9 @@ Estas funcionalidades están cada día más cerca de estar listas para producci
 
 ### Next.js (App Router) {/*nextjs-app-router*/}
 
-**[El App Router de Next.js](https://beta.nextjs.org/docs/getting-started) es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa (_full-stack_) del equipo de React.** Te permite obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación.
+**[El App Router de Next.js](https://nextjs.org/docs) es un rediseño de las API de Next.js con el objetivo de cumplir con la visión de arquitectura de pila completa (_full-stack_) del equipo de React.** Te permite obtener datos en componentes asíncronos que se ejecutan en el servidor o incluso durante la compilación.
 
-Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/deployment) en cualquier alojamiento Node.js, sin servidor, o en tu propio servidor. Next.js también permite [exportar archivos estáticos](https://beta.nextjs.org/docs/configuring/static-export) que no requiere un servidor.
-<Pitfall>
-
-El App Router de Next.js está **actualmente en versión beta y aún no se recomienda para producción** (a partir de marzo de 2023). Para experimentar con él en un proyecto Next.js existente, [sigue esta guía de migración incremental](https://beta.nextjs.org/docs/upgrade-guide#migrating-from-pages-to-app).
-
-</Pitfall>
+Next.js es mantenido por [Vercel](https://vercel.com/). Puedes [implementar una aplicación Next.js](https://nextjs.org/docs/app/building-your-application/deploying) en cualquier alojamiento Node.js o sin servidor, o en tu propio servidor. Next.js también admite una [exportación estática](https://nextjs.org/docs/app/building-your-application/deploying/static-exports) que no requiere un servidor.
 
 <DeepDive>
 

src/content/learn/tutorial-tic-tac-toe.md

@@ -2077,7 +2077,13 @@ export default function Game() {
 }
 ```
 
-Puedes ver cómo debería verse tu código a continuación. Ten en cuenta que deberías ver un error en la consola de herramientas para desarrolladores que dice: ``Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Game`.`` Resolverás este error en la siguiente sección.
+Puedes ver cómo debería verse tu código a continuación. Ten en cuenta que deberías ver un error en la consola de herramientas para desarrolladores que dice: 
+
+<ConsoleBlock level="warning">
+Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of &#96;Game&#96;.
+</ConsoleBlock>
+  
+Resolverás este error en la siguiente sección.
 
 <Sandpack>
 

src/content/reference/react/Profiler.md

@@ -58,7 +58,7 @@ function onRender(id, phase, actualDuration, baseDuration, startTime, commitTime
 * `actualDuration`: El número de milisegundos que se tardó en renderizar el árbol `<Profiler>` Esto indica qué tan bien el subárbol hace uso de la memoización (por ejemplo, [`memo`](/reference/react/memo) y [`useMemo`](/reference/react/useMemo)). Idealmente, este valor debería disminuir significativamente después del montaje inicial, ya que muchos de los descendientes solo necesitarán volver a renderizarse si cambian sus propiedades específicas.
 * `baseDuration`: El número de milisegundos que estima cuánto tiempo tardaría en volver a renderizar todo el subárbol `<Profiler>` sin ninguna optimización. Se calcula sumando las duraciones de renderizado más recientes de cada componente en el árbol. Este valor estima el costo del renderizado para el peor de caso (por ejemplo, el montaje inicial o un árbol sin memoización). Compara `actualDuration` con este valor para ver si la memorización está funcionando.
 * `startTime`: Una marca de tiempo numérica para cuando React comenzó a renderizar la actualización actual.
-* `endTime`: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable.
+* `commitTime`: Una marca de tiempo numérica para cuando React entregó la actualización actual. Este valor se comparte entre todos los perfiles en una entrega, lo que permite agruparlos si es deseable.
 
 ---
 

src/content/reference/react/useMemo.md

@@ -647,7 +647,7 @@ En este ejemplo, el componente `List` se **ralentiza artificialmente** para que
 
 Cambiar las pestañas se siente lento porque obliga a que `List` se rerenderice. Eso es de esperar porque `tab` ha cambiado, y necesitas reflejar la nueva elección del usuario en la pantalla.
 
-A continuación, intenta alternar el tema. **¡Gracias a `useMemo` junto con [`memo`](/reference/react/memo), es rápido a pesar de la ralentización artificial!** El componente `List` omitió rerenderizar porque el *array* `visibleItems` no ha cambiado desde el último renderizado. El *array* `visibleItems` no ha cambiado porque tanto `todos` como `tab` (que pasas como dependencias a `useMemo`) no han cambiado desde el último renderizado.
+A continuación, intenta alternar el tema. **¡Gracias a `useMemo` junto con [`memo`](/reference/react/memo), es rápido a pesar de la ralentización artificial!** El componente `List` omitió rerenderizar porque el *array* `visibleTodos` no ha cambiado desde el último renderizado. El *array* `visibleTodos` no ha cambiado porque tanto `todos` como `tab` (que pasas como dependencias a `useMemo`) no han cambiado desde el último renderizado.
 
 <Sandpack>