Resolve merge conflicts

src/content/learn/describing-the-ui.md

@@ -10,7 +10,6 @@ React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [Cómo escribir tu primer componente de React](/learn/your-first-component)
 * [Cuándo y cómo crear archivos con múltiples componentes](/learn/importing-and-exporting-components)
 * [Cómo añadir marcado a JavaScript con JSX](/learn/writing-markup-with-jsx)
@@ -19,17 +18,7 @@ React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI
 * [Cómo renderizar componentes condicionalmente](/learn/conditional-rendering)
 * [Cómo renderizar múltiples componentes a la vez](/learn/rendering-lists)
 * [Cómo evitar errores confusos manteniendo los componentes puros](/learn/keeping-components-pure)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+* [Por qué es útil entender la UI como árboles](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -535,34 +524,30 @@ Lee **[Mantener los componentes puros](/learn/keeping-components-pure)** para ap
 
 </LearnMore>
 
-<<<<<<< HEAD
-## ¿Qué sigue? {/*whats-next*/}
-=======
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Tu UI como un árbol {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+React utiliza árboles para modelar las relaciones entre componentes y módulos.
 
-A React render tree is a representation of the parent and child relationship between components. 
+Un árbol de renderizado de React es una representación de la relación padre-hijo entre componentes.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+<Diagram name="generic_render_tree" height={250} width={500} alt="Un gráfo de árbol con cinco nodos, con cada nodo que representa un componente. El nodo raíz se localiza en la cima del grafo de árbol y está etiquetado como 'Root Component'. Tiene dos flechas que se extienden hacia abajo a dos nodos etiquetados como 'Component A' y 'Component C'. Cada una de las flechas está etiquetada con 'renders'. El 'Component A' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component B'. 'Component C' tiene una sola flecha 'renders' hacia un nodo etiquetado como 'Component D'.">Un ejemplo de un árbol de renderizado de React.</Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Los componentes cercanos a la cima del árbol, cerca del componente raíz, se consideran componentes de nivel superior. Los componentes sin componentes hijos son componentes hoja. Esta categorización de los componentes es útil para entender el flujo de datos y el rendimiento del renderizado.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+Modelar la relación entre los módulos de JavaScript es otra forma útil de entender tu apliación. Nos referimos a esto como un árbol de dependencia de módulos.
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un grafo de árbol con cinco nodos. Cada nodo representa un módulo de JavaScript. El nodo superior está etiquetado como 'RootModule.js'. Tiene tres flechas que se extienden hacia los nodos: 'ModuleA.js', 'ModuleB.js' y 'ModuleC.js'. Cada flecha se etiqueta como 'imports'. El nodo 'ModuleC.js' tiene una sola flecha 'imports' que apunta al nodo etiquetado como 'ModuleD.js'.">Un ejemplo de un árbol de dependecias de módulos.</Diagram>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+Un árbol de dependencias se usa a menudo para construir herramientas que empaquetan todo el código relevante de JavaScript para que el cliente descargue y renderice. Un tamaño grande del paquete significa una regresión en la experiencia de usuario para las aplicaciones de React. Entender el árbol de dependencias de los móduls ayuda a depurar tales problemas.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+Lee **[Tu UI como un árbol](/learn/understanding-your-ui-as-a-tree)** para aprender como crear árboles de renderizado y dependencias para una aplicación de React y cómo son modelos mentales útiles para mejorar la experiencia de usuario y el rendimiento.
 
 </LearnMore>
 
 
-## What's next? {/*whats-next*/}
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+## ¿Qué sigue? {/*whats-next*/}
 
 ¡Dirígete a [Tu primer componente](/learn/your-first-component) para que comiences a leer este capítulo página por página!
 

src/content/learn/preserving-and-resetting-state.md

@@ -10,46 +10,17 @@ El estado está aislado entre los componentes. React mantiene un registro de qu
 
 <YouWillLearn>
 
-<<<<<<< HEAD
-* Cómo React "ve" las estructuras de los componentes
-* Cuándo React elige preservar o reiniciar el estado
-* Cómo forzar a React a reiniciar el estado del componente
-* Cómo las claves y los tipos afectan a la preservación del estado
-
-</YouWillLearn>
-
-## El árbol de la UI {/*the-ui-tree*/}
-
-Los navegadores utilizan muchas estructuras de árbol para modelar la interfaz de usuario. El [DOM](https://developer.mozilla.org/es/docs/Web/API/Document_Object_Model/Introduction) representa los elementos HTML, el [CSSOM](https://developer.mozilla.org/es/docs/Web/API/CSS_Object_Model) hace lo mismo con el CSS. ¡Hay incluso un  [árbol de accesibilidad](https://developer.mozilla.org/es/docs/Glossary/Accessibility_tree)!
-
-React también utiliza estructuras de árbol para gestionar y modelar la UI que estás generando. React crea **árboles de UI** a partir de su JSX. Posteriormente, React DOM actualiza los elementos del DOM del navegador para que coincidan con ese árbol UI. (React Native traduce estos árboles en elementos específicos para plataformas móviles).
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagrama con tres secciones dispuestas horizontalmente. En la primera sección, hay tres rectángulos apilados verticalmente, con las etiquetas 'Componente A', 'Componente B', y 'Componente C'. La transición al siguiente panel es una flecha con el logo de React en la parte superior etiquetada como 'React'. La sección central contiene un árbol de componentes, con la raíz etiquetada 'A' y dos hijos etiquetados 'B' y 'C'. La siguiente sección vuelve a ser una transición con una flecha con el logo de React en la parte superior, etiquetada como 'React'. La tercera y última sección es un wireframe de un navegador, que contiene un árbol de 8 nodos, que sólo tiene un subconjunto resaltado (indicando el subárbol de la sección central).">
-
-A partir de los componentes, React crea un árbol de interfaz de usuario que React DOM utiliza para representar el DOM.
-
-</Diagram>
-
-</DiagramGroup>
-
-## El estado está atado a una posición en el árbol {/*state-is-tied-to-a-position-in-the-tree*/}
-
-Cuando se le da un estado a un componente, podrías pensar que el estado "vive" dentro del componente. Pero en realidad el estado se mantiene en React. React asocia cada pieza de estado que mantiene con el componente correcto gracias al lugar que ocupa ese componente en el árbol de la UI.
-=======
 * When React chooses to preserve or reset the state
 * How to force React to reset component's state
 * How keys and types affect whether the state is preserved
 
 </YouWillLearn>
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
+## El estado está atado a la posición en el árbol de renderizado {/*state-is-tied-to-a-position-in-the-tree*/}
 
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+React construye [árboles de renderizado](learn/understanding-your-ui-as-a-tree#the-render-tree) para la estructura de componentes en tu UI.
 
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
+Cuando le das estado a tu componente, podrías pensar que el estado "vive" dentro del componente. Pero el estado en realidad se guarda dentro de React. React asocia cada pieza de estado que mantiene con el componente correcto por la posición en la que se encuentra ese componente en el árbol de renderizado.
 
 En este caso, sólo hay una etiqueta JSX  `<Counter />`, pero se representa en dos posiciones diferentes:
 
@@ -203,11 +174,7 @@ Actualización del estado
 </DiagramGroup>
 
 
-<<<<<<< HEAD
-React mantendrá el estado mientras se renderice el mismo componente en la misma posición. Para ver esto, incrementa ambos contadores, luego quita el segundo componente desmarcando la casilla "Renderizar el segundo contador", y luego vuelve a añadirlo marcándola de nuevo:
-=======
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+React mantendrá el estado mientras se renderice el mismo componente en la misma posición en el árbol. Para ver esto, incrementa ambos contadores, luego quita el segundo componente desmarcando la casilla "Renderizar el segundo contador", y luego vuelve a añadirlo marcándola de nuevo:
 
 <Sandpack>
 

src/content/learn/typescript.md

@@ -284,11 +284,7 @@ export default App = AppTSX;
 
 </Sandpack>
 
-<<<<<<< HEAD
 Esta técnica funciona cuando tienes un valor por defecto que tiene sentido - pero hay casos ocasionales en los que no, y en esos casos `null` puede parecer razonable como valor por defecto. Sin embargo, para permitir que el sistema de tipos entienda tu código, necesitas establecer explícitamente `ContextShape | null` en el `createContext`.
-=======
-This technique works when you have a default value which makes sense - but there are occasionally cases when you do not, and in those cases `null` can feel reasonable as a default value. However, to allow the type-system to understand your code, you need to explicitly set `ContextShape | null` on the `createContext`. 
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
 
 Esto causa el problema de que necesitas eliminar el `| null` en el tipo para los consumidores de contexto. Nuestra recomendación es que el hook compruebe su existencia en tiempo de ejecución y lance un error si no está presente:
 
@@ -464,8 +460,4 @@ Recomendamos los siguientes recursos:
 
  - [React TypeScript Cheatsheet](https://react-typescript-cheatsheet.netlify.app/) es una hoja de referencia mantenida por la comunidad que trata sobre cómo utilizar TypeScript con React, abordando muchos casos útiles y proporcionando un enfoque más amplio que este documento.
 
-<<<<<<< HEAD
- - [TypeScript Community Discord](https://discord.com/invite/typescript) es excelente lugar para hacer preguntas y obtener ayuda con problemas de TypeScript y React.
-=======
- - [TypeScript Community Discord](https://discord.com/invite/typescript) is a great place to ask questions and get help with TypeScript and React issues.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+ - [TypeScript Community Discord](https://discord.com/invite/typescript) es un lugar excelente para hacer preguntas y obtener ayuda con problemas de TypeScript y React.

src/content/reference/react-dom/server/renderToPipeableStream.md

@@ -286,14 +286,9 @@ El *streaming* no necesita esperar a que React se cargue en el navegador o a que
 
 **Sólo se activará el componente Suspense con fuentes de datos habilitadas para Suspense.** Estas incluyen:
 
-<<<<<<< HEAD
 - Obtención de datos con *frameworks* habilitados para Suspense, como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Carga diferida de código de componentes con [`lazy`](/reference/react/lazy)
-=======
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+- Leer el valor de una promesa con [`use`](/reference/react/use)
 
 Suspense **no** detectará cuando se obtengan datos dentro de un Efecto o controlador de evento.
 

src/content/reference/react-dom/server/renderToReadableStream.md

@@ -285,14 +285,9 @@ Cuando se streamea no es necesario esperar a que React en sí mismo cargue en el
 
 **Solo las fuentes de información "Suspense-enabled" activarán el componente Suspense.** Estas incluyen:
 
-<<<<<<< HEAD
 - Obtención de datos con frameworks "Suspense-enabled" como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Código de componentes lazy-loading con [`lazy`](/reference/react/lazy)
-=======
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+- Leer el valor de una promesa con [`use`](/reference/react/use)
 
 Suspense **no** detecta cuando la información es obtenida dentro de un Hook de efecto o un controlador de eventos.
 

src/content/reference/react/Suspense.md

@@ -252,14 +252,9 @@ async function getAlbums() {
 
 **Sólo las fuentes de datos habilitadas para Suspense activarán un componente Suspense.** Entre ellas se incluyen:
 
-<<<<<<< HEAD
 - Carga de datos en frameworks capaces de manejar Suspense como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
 - Código de carga diferida de componentes con [`lazy`](/reference/react/lazy)
-=======
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+- Leer el valor de una promesa con [`use`](/reference/react/use)
 
 Suspense **no** detecta la carga de datos cuando se hace en un Efecto o un controlador de evento.
 

src/content/reference/react/useDeferredValue.md

@@ -82,17 +82,11 @@ Durante las actualizaciones, el <CodeStep step={2}>valor diferido</CodeStep> ten
 
 <Note>
 
-<<<<<<< HEAD
 Este ejemplo asume que se está utilizando una origen de datos con _Suspense_ habilitado:
 
 - Frameworks para la obtención de datos con _Suspense_ habilitado como [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) y [Next.js](https://nextjs.org/docs/getting-started/react-essentials).
-=======
-This example assumes you use a Suspense-enabled data source:
-
-- Data fetching with Suspense-enabled frameworks like [Relay](https://relay.dev/docs/guided-tour/rendering/loading-states/) and [Next.js](https://nextjs.org/docs/getting-started/react-essentials)
-- Lazy-loading component code with [`lazy`](/reference/react/lazy)
-- Reading the value of a Promise with [`use`](/reference/react/use)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+- Carga diferida de código de componentes con [`lazy`](/reference/react/lazy)
+- Leer el valor de una promesa con [`use`](/reference/react/use)
 
 - Componentes que empleen carga diferida mediante [`lazy`](/reference/react/lazy).
 

src/content/reference/react/useSyncExternalStore.md

@@ -446,7 +446,3 @@ function ChatIndicator({ userId }) {
   // ...
 }
 ```
-<<<<<<< HEAD
-
-=======
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb

src/sidebarReference.json

@@ -162,9 +162,6 @@
       "sectionHeader": "react-dom@18.2.0"
     },
     {
-<<<<<<< HEAD
-      "title": "Componentes",
-=======
       "title": "Hooks",
       "path": "/reference/react-dom/hooks",
       "routes": [
@@ -176,8 +173,7 @@
       ]
     },
     {
-      "title": "Components",
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+      "title": "Componentes",
       "path": "/reference/react-dom/components",
       "routes": [
         {