Resolve merge conflicts

Author: carburo

README.md

@@ -6,19 +6,11 @@ Este repositorio contiene el código fuente y la documentación de [es.react.dev
 
 ### Prerrequisitos
 
-<<<<<<< HEAD
 1. Git.
-1. Node: cualquier versión 12.x a partir de v12.0.0 o superior.
+1. Node: cualquier versión a partir de la v16.8.0 o superior.
 1. Yarn: consulta el [sitio web de Yarn para obtener instrucciones de instalación](https://yarnpkg.com/lang/en/docs/install/) (en inglés).
 1. Una bifurcación (_fork_) del repositorio (para cualquier contribución).
 1. Un clon (_clone_) del [repositorio es.react.dev](https://github.com/reactjs/es.react.dev) en tu máquina local.
-=======
-1. Git
-1. Node: any version starting with v16.8.0 or greater
-1. Yarn: See [Yarn website for installation instructions](https://yarnpkg.com/lang/en/docs/install/)
-1. A fork of the repo (for any contributions)
-1. A clone of the [react.dev repo](https://github.com/reactjs/react.dev) on your local machine
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 ### Instalación
 

src/content/community/team.md

@@ -43,11 +43,7 @@ Engineer at Meta
 </TeamMember>
 
 <TeamMember name="Lauren Tan" permalink="lauren-tan" photo="/images/team/lauren.jpg" github="poteto" twitter="potetotes" threads="potetotes" bsky="no.lol" title="Engineer at Meta">
-<<<<<<< HEAD
-    La carrera de programadora de Lauren alcanzó su punto máximo cuando descubrió la etiqueta `<marquee>`. Ha estado persiguiendo ese momento desde entonces. Estudió Finanzas en lugar de Ciencias de la Computación en la universidad, por lo que aprendió a programar en Excel en lugar de Java. Lauren disfruta lanzando memes descarados en el chat, jugando videojuegos con su pareja y acariciando a su perra Zelda.
-=======
-    Lauren's programming career peaked when she first discovered the `<marquee>` tag. She’s been chasing that high ever since. She studied Finance instead of CS in college, so she learned to code using Excel. Lauren enjoys dropping cheeky memes in chat, playing video games with her partner, learning Korean, and petting her dog Zelda.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+    La carrera de programadora de Lauren alcanzó su punto máximo cuando descubrió la etiqueta `<marquee>`. Ha estado persiguiendo ese momento desde entonces. Estudió Finanzas en lugar de Ciencias de la Computación en la universidad, por lo que aprendió a programar en Excel. Lauren disfruta lanzando memes descarados en el chat, jugando videojuegos con su pareja, aprendiendo coreano y acariciando a su perra Zelda.
 </TeamMember>
 
 <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" threads="lunaleaps" title="Ingeniera en Meta">

src/content/learn/index.md

@@ -4,11 +4,7 @@ title: Inicio rápido
 
 <Intro>
 
-<<<<<<< HEAD
-¡Bienvenido a la documentación de React! Esta página te dará una introducción al 80% de los conceptos de React que usarás a diario.
-=======
-Welcome to the React documentation! This page will give you an introduction to 80% of the React concepts that you will use on a daily basis.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+¡Bienvenido a la documentación de React! Esta página te dará una introducción a un 80% de los conceptos de React que usarás a diario.
 
 </Intro>
 

src/content/learn/manipulating-the-dom-with-refs.md

@@ -319,31 +319,6 @@ En este ejemplo, `itemsRef` no contiene un solo nodo DOM. En su lugar, contiene
   key={cat.id}
   ref={node => {
     const map = getMap();
-<<<<<<< HEAD
-    if (node) {
-      // Add to the Map
-      map.set(cat, node);
-    } else {
-      // Remove from the Map
-      map.delete(cat);
-    }
-  }}
->
-```
-
-Esto te permite leer nodos DOM individuales del Map más tarde.
-
-<Canary>
-
-This example shows another approach for managing the Map with a `ref` callback cleanup function.
-
-```js
-<li
-  key={cat.id}
-  ref={node => {
-    const map = getMap();
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
     // Add to the Map
     map.set(cat, node);
 
@@ -369,16 +344,11 @@ Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bu
 
 ## Accediendo a nodos DOM de otros componentes {/*accessing-another-components-dom-nodes*/}
 
-<<<<<<< HEAD
-Cuando colocas una ref en un componente integrado que devuelve de salida un elemento del navegador como `<input />`, React establecerá la propiedad `current` de esa ref al nodo DOM correspondiente (como el `<input />` real del navegador)
-
-Sin embargo, si intentas poner una ref en tu **propio** componente, como `<MyInput />`, por defecto tendrás `null`. Aquí hay un ejemplo demostrándolo. Nota como al hacer clic en el botón **no** enfoca el _input_.
-=======
 <Pitfall>
-Refs are an escape hatch. Manually manipulating _another_ component's DOM nodes can make your code fragile.
+Las refs son una vía de escape. Manipular manualmente los nodos DOM de _otro_ componente puede hacer que tu código sea frágil.
 </Pitfall>
 
-You can pass refs from parent component to child components [just like any other prop](/learn/passing-props-to-a-component).
+Puedes pasar refs desde un componente padre a componentes hijos [al igual que cualquier otra prop](/learn/passing-props-to-a-component).
 
 ```js {3-4,9}
 import { useRef } from 'react';
@@ -393,10 +363,9 @@ function MyForm() {
 }
 ```
 
-In the above example, a ref is created in the parent component, `MyForm`, and is passed to the child component, `MyInput`. `MyInput` then passes the ref to `<input>`. Because `<input>` is a [built-in component](/reference/react-dom/components/common) React sets the `.current` property of the ref to the `<input>` DOM element.
+En el ejemplo de arriba, se crea una ref en el componente padre, `MyForm`, y se pasa al componente hijo, `MyInput`. `MyInput` luego pasa la ref a `<input>`. Debido a que `<input>` es un [componente integrado](/reference/react-dom/components/common) React establece la propiedad `.current` de la ref al elemento DOM `<input>`.
 
-The `inputRef` created in `MyForm` now points to the `<input>` DOM element returned by `MyInput`. A click handler created in `MyForm` can access `inputRef` and call `focus()` to set the focus on `<input>`.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+La `inputRef` creada en `MyForm` ahora apunta al elemento DOM `<input>` devuelto por `MyInput`. Un manejador de clics creado en `MyForm` puede acceder a `inputRef` y llamar a `focus()` para establecer el foco en `<input>`.
 
 <Sandpack>
 
@@ -427,75 +396,11 @@ export default function MyForm() {
 
 </Sandpack>
 
-<<<<<<< HEAD
-Para ayudarte a notar el problema, React también mostrará un error en la consola.
-
-<ConsoleBlock level="error">
-
-Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?<div>**(Traducción)**</div>Advertencia: Los componentes de función no pueden recibir refs. Los intentos de acceder a esta ref fallarán. ¿Querías usar React.forwardRef()?
-
-</ConsoleBlock>
-
-Esto ocurre porque por defecto React no permite que un componente acceda a los nodos DOM de otros componentes. ¡Ni siquiera a sus propios hijos! Esto es intencionado. Las refs son una vía de escape que debe usarse con moderación. Manipular manualmente los nodos DOM de _otro_ componente hace tu código aún más frágil.
-
-En cambio, los componentes que _quieran_ exponer sus nodos DOM tienen que **optar** por ese comportamiento. Un componente puede especificar que "reenvíe" su ref a uno de sus hijos. Aquí vemos como `MyInput` puede usar la API `forwardRef`:
-
-```js
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-```
-
-Así es como funciona:
-
-1. `<MyInput ref={inputRef} />` le dice a React que coloque el nodo DOM correspondiente en `inputRef.current`. Sin embargo, depende del componente `MyInput` utilizarlo o no; por defecto no lo hace.
-2. El componente `MyInput` es declarado usando `forwardRef`. **Esto hace que pueda optar por recibir el `inputRef` como segundo argumento de `ref`** la cual está declarada después de `props`.
-3. `MyInput` por si mismo pasa la `ref` que recibió del `<input>` dentro de él.
-
-Ahora al hacer clic en el botón para enfocar el _input_, funciona:
-
-<Sandpack>
-
-```js
-import { forwardRef, useRef } from 'react';
-
-const MyInput = forwardRef((props, ref) => {
-  return <input {...props} ref={ref} />;
-});
-
-export default function Form() {
-  const inputRef = useRef(null);
-
-  function handleClick() {
-    inputRef.current.focus();
-  }
-
-  return (
-    <>
-      <MyInput ref={inputRef} />
-      <button onClick={handleClick}>
-        Enfocar el input
-      </button>
-    </>
-  );
-}
-```
-
-</Sandpack>
-
-En diseño de sistemas, es un patrón común para componentes de bajo nivel como botones, _inputs_, etc. reenviar sus refs a sus nodos DOM. Por otro lado, los componentes de alto nivel como formularios, listas, o secciones de página, usualmente no suelen exponer sus nodos DOM para evitar dependencias accidentales de la estructura del DOM.
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <DeepDive>
 
 #### Exponiendo un subconjunto de la API con un manejador imperativo {/*exposing-a-subset-of-the-api-with-an-imperative-handle*/}
 
-<<<<<<< HEAD
-En el ejemplo de arriba, `MyInput` expone el elemento _input_ del DOM original. Esto le permite al componente padre llamar a `focus()` en él. Sin embargo, esto también le permite al componente padre hacer otra cosa, por ejemplo, cambiar sus estilos CSS. En casos pocos comunes, quizás quieras restringir la funcionalidad expuesta. Puedes hacer eso con `useImperativeHandle`:
-=======
-In the above example, the ref passed to `MyInput` is passed on to the original DOM input element. This lets the parent component call `focus()` on it. However, this also lets the parent component do something else--for example, change its CSS styles. In uncommon cases, you may want to restrict the exposed functionality. You can do that with [`useImperativeHandle`](/reference/react/useImperativeHandle):
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+En el ejemplo de arriba, la ref que se pasa `MyInput` se pasa al elemento _input_ del DOM original. Esto le permite al componente padre llamar a `focus()` en él. Sin embargo, esto también le permite al componente padre hacer otra cosa, por ejemplo, cambiar sus estilos CSS. En casos pocos comunes, quizás quieras restringir la funcionalidad expuesta. Puedes hacerlo con [`useImperativeHandle`]((/reference/react/useImperativeHandle)):
 
 <Sandpack>
 
@@ -523,25 +428,15 @@ export default function Form() {
   return (
     <>
       <MyInput ref={inputRef} />
-<<<<<<< HEAD
-      <button onClick={handleClick}>
-        Enfocar el input
-      </button>
-=======
       <button onClick={handleClick}>Focus the input</button>
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
     </>
   );
 }
 ```
 
 </Sandpack>
 
-<<<<<<< HEAD
-Aquí, `realInputRef` dentro de `MyInput` mantiene el nodo DOM de input actual. Sin embargo, `useImperativeHandle` indica a React a proveer tu propio objeto especial como el valor de una ref al componente padre. Por lo tanto, `inputRef.current` dentro del componente `Form` solo va a tener el método `focus`. En este caso, el "manejador" ref no es el nodo DOM, sino el objeto personalizado que creaste dentro de la llamada de `useImperativeHandle`. 
-=======
-Here, `realInputRef` inside `MyInput` holds the actual input DOM node. However, [`useImperativeHandle`](/reference/react/useImperativeHandle) instructs React to provide your own special object as the value of a ref to the parent component. So `inputRef.current` inside the `Form` component will only have the `focus` method. In this case, the ref "handle" is not the DOM node, but the custom object you create inside [`useImperativeHandle`](/reference/react/useImperativeHandle) call.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+Aquí, `realInputRef` dentro de `MyInput` mantiene el nodo DOM de input actual. Sin embargo, [`useImperativeHandle`](/reference/react/useImperativeHandle) indica a React a proveer tu propio objeto especial como el valor de una ref al componente padre. Por lo tanto, `inputRef.current` dentro del componente `Form` solo va a tener el método `focus`. En este caso, el "manejador" ref no es el nodo DOM, sino el objeto personalizado que creaste dentro de la llamada de [`useImperativeHandle`](/reference/react/useImperativeHandle). 
 
 </DeepDive>
 

src/content/learn/react-developer-tools.md

@@ -52,33 +52,10 @@ Ahora recarga tu sitio web en el navegador para verlo en las herramientas de des
 
 ![Versión autónoma de las Herramientas de Desarrollo de React](/images/docs/react-devtools-standalone.png)
 
-<<<<<<< HEAD
 ## Móvil (React Native) {/*mobile-react-native*/}
-Las Herramientas de Desarrollo de React se pueden utilizar también para inspeccionar aplicaciones escritas con [React Native](https://reactnative.dev/):
 
-Las forma más fácil de usar las Herramientas de Desarrollo de React es instalarlas globalmente:
-```bash
-# Yarn
-yarn global add react-devtools
-=======
-## Mobile (React Native) {/*mobile-react-native*/}
-
-To inspect apps built with [React Native](https://reactnative.dev/), you can use [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), the built-in debugger that deeply integrates React Developer Tools. All features work identically to the browser extension, including native element highlighting and selection.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+Para inspeccionar aplicaciones creadas con [React Native](https://reactnative.dev/), puedes usar [React Native DevTools](https://reactnative.dev/docs/react-native-devtools), el depurador integrado que se integra profundamente con las herramientas de desarrollador de React. Todas las funciones funcionan de forma idéntica a la extensión del navegador, incluyendo el resaltado y la selección de elementos nativos.
 
 [Learn more about debugging in React Native.](https://reactnative.dev/docs/debugging)
 
-<<<<<<< HEAD
-Luego abre las herramientas de desarrollo desde la terminal.
-```bash
-react-devtools
-```
-
-Debería conectarse a cualquier aplicación local de React Native que se esté ejecutando.
-
-> Prueba recargar la aplicación si las herramientas de desarrollo no se conectan después de algunos segundos.
-
-[Aprende más sobre la depuración en React Native.](https://reactnative.dev/docs/debugging)
-=======
-> For versions of React Native earlier than 0.76, please use the standalone build of React DevTools by following the [Safari and other browsers](#safari-and-other-browsers) guide above.
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
+> Para versiones de React Native anteriores a la 0.76, utiliza la compilación independiente de React DevTools siguiendo la guía de arriba [Safari y otros navegadores](#safari-and-other-browsers).

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

@@ -246,30 +246,6 @@ Estos eventos se disparan para recursos como [`<audio>`](https://developer.mozil
 En lugar de un objeto ref (como el devuelto por [`useRef`](/reference/react/useRef#manipulating-the-dom-with-a-ref)), puedes pasar una función al atributo `ref`.
 
 ```js
-<<<<<<< HEAD
-<div ref={(node) => console.log(node)} />
-```
-
-[Vea un ejemplo de la función callback `ref`.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback)
-
-Cuando el nodo del DOM `<div>` es agregado a la pantalla, React llamará a tu callback `ref` con el nodo del DOM como argumento. Cuando ese nodo del DOM `<div>` se elimina, React llamará a tu callback `ref` con `null`.
-
-React también llamará a tu callback `ref` cada vez que pases un callback `ref` *diferente*. En el ejemplo anterior, `(node) => { ... }` es una función diferente en cada renderizado. Cuando tu componente se vuelva a renderizar, la función *anterior* será llamada con `null` como argumento, y la *siguiente* función será llamada con el nodo del DOM.
-
-#### Parámetros {/*ref-callback-parameters*/}
-
-* `node`: Un nodo del DOM o `null`. React te pasará el nodo del DOM cuando se vincule la ref, y `null` cuando la ref se desvincule. A menos que pases la misma función ref para el callback `ref` en cada renderizado, el callback se desprenderá temporalmente y se volverá a vincular durante cada renderizado del componente.
-
-<Canary>
-
-#### Devuelve {/*returns*/}
-
-*  **optional** `cleanup function`: When the `ref` is detached, React will call the cleanup function. If a function is not returned by the `ref` callback, React will call the callback again with `null` as the argument when the `ref` gets detached.
-
-```js
-
-=======
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 <div ref={(node) => {
   console.log('Attached', node);
 

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

@@ -32,16 +32,7 @@ Para mostrar un input, renderiza el componente [`<input>` incorporado en el nave
 
 `<input>` admite todas las [props comunes de los elementos.](/reference/react-dom/components/common#props)
 
-<<<<<<< HEAD
-<Canary>
-
-Las extensiones a la prop `formAction` solo están disponible actualmente en los canales experimental y Canary de React. En versiones estables de React, `formAction` funciona solo como un [componente integrado HTML del navegador](/reference/react-dom/components#all-html-components). Más información sobre [los canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels).
-</Canary>
-
-[`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): Un string o una función. Sobreescribe el `<form action>` padre para `type="submit"` y `type="image"`. Cuando se pasa una URL a `action` el formulario se comportará como un formulario HTML estándar. Cuando se pasa una función a `formAction` la función manejará el envío del formulario. Consulta [`<form action>`](/reference/react-dom/components/form#props).
-=======
 - [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `<form action>` for `type="submit"` and `type="image"`. When a URL is passed to `action` the form will behave like a standard HTML form. When a function is passed to `formAction` the function will handle the form submission. See [`<form action>`](/reference/react-dom/components/form#props).
->>>>>>> b1a249d597016c6584e4c186daa28b180cc9aafc
 
 Puedes [hacer un input controlado](#controlling-an-input-with-a-state-variable) pasando una de estas props: