->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
))}
diff --git a/src/components/MDX/MDXComponents.tsx b/src/components/MDX/MDXComponents.tsx
index ef5755f94..01032eddb 100644
--- a/src/components/MDX/MDXComponents.tsx
+++ b/src/components/MDX/MDXComponents.tsx
@@ -13,7 +13,6 @@ import {Children, useContext, useMemo} from 'react';
import * as React from 'react';
import cn from 'classnames';
import type {HTMLAttributes} from 'react';
-import Image from 'next/image';
import CodeBlock from './CodeBlock';
import {CodeDiagram} from './CodeDiagram';
@@ -489,17 +488,9 @@ function YouTubeIframe(props: any) {
);
}
-function CustomImage(props: any) {
+function Image(props: any) {
const {alt, ...rest} = props;
- return (
-
- );
+ return ;
}
export const MDXComponents = {
@@ -516,7 +507,7 @@ export const MDXComponents = {
h5: H5,
hr: Divider,
a: Link,
- img: CustomImage,
+ img: Image,
BlogCard,
code: InlineCode,
pre: CodeBlock,
diff --git a/src/content/community/index.md b/src/content/community/index.md
index 0ba4efd00..a22e50e13 100644
--- a/src/content/community/index.md
+++ b/src/content/community/index.md
@@ -29,8 +29,4 @@ Cada comunidad está constituida por miles de usuarios de React.
## Noticias {/*news*/}
-<<<<<<< HEAD
Para conocer las últimas noticias sobre React, [sigue **@reactjs** en Twitter](https://twitter.com/reactjs) y el [blog oficial de React](/blog/) en este sitio web.
-=======
-For the latest news about React, [follow **@reactjs** on Twitter](https://twitter.com/reactjs), [**@react.dev** on Bluesky](https://bsky.app/profile/react.dev) and the [official React blog](/blog/) on this website.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
diff --git a/src/content/community/meetups.md b/src/content/community/meetups.md
index 6999ecb49..98af08d2c 100644
--- a/src/content/community/meetups.md
+++ b/src/content/community/meetups.md
@@ -138,13 +138,8 @@ title: Reuniones de React
## Portugal {/*portugal*/}
* [Lisboa](https://www.meetup.com/JavaScript-Lisbon/)
-<<<<<<< HEAD
## Escocia (Reino Unido) {/*scotland-uk*/}
-* [Edimburgo](https://www.meetup.com/React-Scotland/)
-=======
-## Scotland (UK) {/*scotland-uk*/}
-* [Edinburgh](https://www.meetup.com/react-edinburgh/)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+* [Edimburgo](https://www.meetup.com/react-edinburgh/)
## España {/*spain*/}
* [Barcelona](https://www.meetup.com/ReactJS-Barcelona/)
diff --git a/src/content/community/videos.md b/src/content/community/videos.md
index 8827477d0..823f1a270 100644
--- a/src/content/community/videos.md
+++ b/src/content/community/videos.md
@@ -8,80 +8,76 @@ Videos dedicados al debate sobre React y su ecosistema.
-<<<<<<< HEAD
-## Conferencia de React 2021 {/*react-conf-2021*/}
-=======
-## React Conf 2024 {/*react-conf-2024*/}
+## Conferencia de React 2024 {/*react-conf-2024*/}
-At React Conf 2024, Meta CTO [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) shared a welcome message to kick off the conference:
+En la Conferencia de React 2024, el CTO de Meta [Andrew "Boz" Bosworth](https://www.threads.net/@boztank) compartió un mensaje de bienvenida para dar inicio a la conferencia:
-### React 19 Keynote {/*react-19-keynote*/}
+### Discurso de React 19 {/*react-19-keynote*/}
-In the Day 1 keynote, we shared vision for React starting with React 19 and the React Compiler. Watch the full keynote from [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), and [Mofei Zhang](https://twitter.com/zmofei):
+En el discurso de apertura del Día 1, compartimos nuestra visión para React comenzando con React 19 y el Compilador de React. Observa el discurso completo de [Joe Savona](https://twitter.com/en_JS), [Lauren Tan](https://twitter.com/potetotes), [Andrew Clark](https://twitter.com/acdlite), [Josh Story](https://twitter.com/joshcstory), [Sathya Gunasekaran](https://twitter.com/_gsathya), y [Mofei Zhang](https://twitter.com/zmofei):
-### React Unpacked: A Roadmap to React 19 {/*react-unpacked-a-roadmap-to-react-19*/}
+### React Unpacked: Una hoja de ruta para React 19 {/*react-unpacked-a-roadmap-to-react-19*/}
-React 19 introduced new features including Actions, `use()`, `useOptimistic` and more. For a deep dive on using new features in React 19, see [Sam Selikoff's](https://twitter.com/samselikoff) talk:
+React 19 introdujo nuevas funcionalidades incluyendo Actions, `use()`, `useOptimistic` y más. Para una inmersión profunda sobre el uso de las nuevas funcionalidades en React 19, mira la charla de [Sam Selikoff](https://twitter.com/samselikoff):
-### What's New in React 19 {/*whats-new-in-react-19*/}
+### Qué hay de nuevo en React 19 {/*whats-new-in-react-19*/}
-[Lydia Hallie](https://twitter.com/lydiahallie) gave a visual deep dive of React 19's new features:
+[Lydia Hallie](https://twitter.com/lydiahallie) dio una inmersión profunda visual de las nuevas funcionalidades de React 19:
-### React 19 Deep Dive: Coordinating HTML {/*react-19-deep-dive-coordinating-html*/}
+### Inmersión profunda en React 19: Coordinando HTML {/*react-19-deep-dive-coordinating-html*/}
-[Josh Story](https://twitter.com/joshcstory) provided a deep dive on the document and resource streaming APIs in React 19:
+[Josh Story](https://twitter.com/joshcstory) proporcionó una inmersión profunda sobre el documento y las APIs de transmisión de recursos en React 19:
-### React for Two Computers {/*react-for-two-computers*/}
+### React para dos computadoras {/*react-for-two-computers*/}
-[Dan Abramov](https://bsky.app/profile/danabra.mov) imagined an alternate history where React started server-first:
+[Dan Abramov](https://bsky.app/profile/danabra.mov) imaginó una historia alternativa donde React comenzó primero en el servidor:
-### Forget About Memo {/*forget-about-memo*/}
+### Olvídate de memo {/*forget-about-memo*/}
-[Lauren Tan](https://twitter.com/potetotes) gave a talk on using the React Compiler in practice:
+[Lauren Tan](https://twitter.com/potetotes) dio una charla sobre el uso del Compilador de React en la práctica:
-### React Compiler Deep Dive {/*react-compiler-deep-dive*/}
+### Inmersión profunda en el Compilador de React {/*react-compiler-deep-dive*/}
-[Sathya Gunasekaran](https://twitter.com/_gsathya) and [Mofei Zhang](https://twitter.com/zmofei) provided a deep dive on how the React Compiler works:
+[Sathya Gunasekaran](https://twitter.com/_gsathya) y [Mofei Zhang](https://twitter.com/zmofei) proporcionaron una inmersión profunda sobre cómo funciona el Compilador de React:
-### And more... {/*and-more-2024*/}
+### Y más... {/*and-more-2024*/}
-**We also heard talks from the community on Server Components:**
-* [Enhancing Forms with React Server Components](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) by [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
-* [And Now You Understand React Server Components](https://www.youtube.com/embed/pOo7x8OiAec) by [Kent C. Dodds](https://twitter.com/kentcdodds)
-* [Real-time Server Components](https://www.youtube.com/embed/6sMANTHWtLM) by [Sunil Pai](https://twitter.com/threepointone)
+**También escuchamos charlas de la comunidad sobre Componentes de Servidor:**
+* [Mejorando formularios con Componentes de Servidor de React](https://www.youtube.com/embed/0ckOUBiuxVY&t=25280s) por [Aurora Walberg Scharff](https://twitter.com/aurorascharff)
+* [Y ahora entiendes los Componentes de Servidor de React](https://www.youtube.com/embed/pOo7x8OiAec) por [Kent C. Dodds](https://twitter.com/kentcdodds)
+* [Componentes de Servidor en tiempo real](https://www.youtube.com/embed/6sMANTHWtLM) por [Sunil Pai](https://twitter.com/threepointone)
-**Talks from React frameworks using new features:**
+**Charlas de frameworks de React usando nuevas funcionalidades:**
-* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) by [Ryan Florence](https://twitter.com/ryanflorence)
-* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) by [Lee Robinson](https://twitter.com/leeerob)
-* [RedwoodJS, now with React Server Components](https://www.youtube.com/embed/sjyY4MTECUU) by [Amy Dutton](https://twitter.com/selfteachme)
-* [Introducing Universal React Server Components in Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) by [Evan Bacon](https://twitter.com/Baconbrix)
+* [Vanilla React](https://www.youtube.com/embed/ZcwA0xt8FlQ) por [Ryan Florence](https://twitter.com/ryanflorence)
+* [React Rhythm & Blues](https://www.youtube.com/embed/rs9X5MjvC4s) por [Lee Robinson](https://twitter.com/leeerob)
+* [RedwoodJS, ahora con Componentes de Servidor de React](https://www.youtube.com/embed/sjyY4MTECUU) por [Amy Dutton](https://twitter.com/selfteachme)
+* [Introduciendo Componentes de Servidor de React Universales en Expo Router](https://www.youtube.com/embed/djhEgxQf3Kw) por [Evan Bacon](https://twitter.com/Baconbrix)
-**And Q&As with the React and React Native teams:**
-- [React Q&A](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) hosted by [Michael Chan](https://twitter.com/chantastic)
-- [React Native Q&A](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) hosted by [Jamon Holmgren](https://twitter.com/jamonholmgren)
+**Y sesiones de preguntas y respuestas con los equipos de React y React Native:**
+- [Preguntas y respuestas de React](https://www.youtube.com/embed/T8TZQ6k4SLE&t=27518s) presentado por [Michael Chan](https://twitter.com/chantastic)
+- [Preguntas y respuestas de React Native](https://www.youtube.com/embed/0ckOUBiuxVY&t=27935s) presentado por [Jamon Holmgren](https://twitter.com/jamonholmgren)
-You can watch all of the talks at React Conf 2024 at [conf2024.react.dev](https://conf2024.react.dev/talks).
+Puedes ver todas las charlas de la Conferencia de React 2024 en [conf2024.react.dev](https://conf2024.react.dev/talks).
-## React Conf 2021 {/*react-conf-2021*/}
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+## Conferencia de React 2021 {/*react-conf-2021*/}
### Discurso de React 18 {/*react-18-keynote*/}
@@ -89,21 +85,13 @@ En el discurso de apertura, compartimos nuestra visión sobre el futuro de React
Observa el discurso completo de [Andrew Clark](https://twitter.com/acdlite), [Juan Tejada](https://twitter.com/_jstejada), [Lauren Tan](https://twitter.com/potetotes), y [Rick Hanlon](https://twitter.com/rickhanlonii) aquí:
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### React 18 para desarrolladores de aplicaciones {/*react-18-for-application-developers*/}
Para ver un demo de cómo actualizar a React 18, mira la charla de [Shruti Kapoor](https://twitter.com/shrutikapoor08) aquí:
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### Renderizado de transmisión desde el servidor con Suspense {/*streaming-server-rendering-with-suspense*/}
@@ -113,11 +101,7 @@ El renderizado de transmisión desde el servidor te permite generar HTML con los
Para averiguar más a fondo, mira la charla de [Shaundai Person](https://twitter.com/shaundai) aquí:
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### El primer grupo de trabajo de React {/*the-first-react-working-group*/}
@@ -125,11 +109,7 @@ Para React 18, hemos creado nuestro primer grupo de trabajo para colaborar con u
Para ver una descripción general sobre este trabajo, mira la charla de [Aakansha' Doshi](https://twitter.com/aakansha1216):
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### Herramientas de desarrollo de React {/*react-developer-tooling*/}
@@ -137,31 +117,19 @@ Para dar soporte a las nuevas funcionalidades en este lanzamiento, también hemo
Para más información y una demo de las nuevas funcionalidades de las Herramientas de Desarrollo, mira la charla de [Brian Vaughn](https://twitter.com/brian_d_vaughn):
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### React sin memoización {/*react-without-memo*/}
De vista al futuro, [Xuan Huang (黄玄)](https://twitter.com/Huxpro) una actualización de la investigación de nuestros laboratorios de React sobre un compilador para el auto-memoizado. Verifica esta charla para más información y una demo sobre el prototipo del compilador:
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### Discurso sobre la documentación de React {/*react-docs-keynote*/}
[Rachel Nabors](https://twitter.com/rachelnabors) inició una sección de charlas sobre el aprendizaje y el diseño con React con un discurso sobre la inversión en la nueva documentación de React ([ahora publicada como react.dev](/blog/2023/03/16/introducing-react-dev)):
-<<<<<<< HEAD
-=======
-
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### Y más... {/*and-more*/}
diff --git a/src/content/learn/add-react-to-an-existing-project.md b/src/content/learn/add-react-to-an-existing-project.md
index 8c82c4f8a..a1332e669 100644
--- a/src/content/learn/add-react-to-an-existing-project.md
+++ b/src/content/learn/add-react-to-an-existing-project.md
@@ -24,11 +24,7 @@ Así es como recomendamos configurarlo:
2. **Especifica `/some-app` como la *ruta base*** en la configuración de tu framework (aquí tienes como: [Next.js](https://nextjs.org/docs/app/api-reference/config/next-config-js/basePath), [Gatsby](https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/path-prefix/)).
3. **Configura tu servidor o un proxy** para que todas las peticiones bajo `/some-app/` sean manejadas por tu aplicación React.
-<<<<<<< HEAD
Esto garantiza que la parte React de tu aplicación se pueda [beneficiar de las mejoras practicas](/learn/start-a-new-react-project#can-i-use-react-without-a-framework) integradas en aquellos frameworks.
-=======
-This ensures the React part of your app can [benefit from the best practices](/learn/build-a-react-app-from-scratch#consider-using-a-framework) baked into those frameworks.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Muchos frameworks basados en React son full-stack y permiten que tu aplicación React aproveche el servidor. Sin embargo, puedes utilizar el mismo enfoque incluso si no puedes o no quieres ejecutar JavaScript en el servidor. En ese caso, sirve la exportación HTML/CSS/JS ([`next export` output](https://nextjs.org/docs/advanced-features/static-html-export) para Next.js, por defecto para Gatsby) en `/some-app/` en su lugar.
diff --git a/src/content/learn/build-a-react-app-from-scratch.md b/src/content/learn/build-a-react-app-from-scratch.md
index f1b177a78..9e319796c 100644
--- a/src/content/learn/build-a-react-app-from-scratch.md
+++ b/src/content/learn/build-a-react-app-from-scratch.md
@@ -115,25 +115,14 @@ De manera similar, si confías en que las aplicaciones usen tu framework para di
La división del código por rutas, cuando se integra con el empaquetamiento y la obtención de datos, puede reducir el tiempo de carga inicial de su aplicación y el tiempo que tarda en renderizarse el contenido visible más grande de la aplicación. ([Largest Contentful Paint](https://web.dev/articles/lcp?hl=es-419)).
-<<<<<<< HEAD
Para obtener instrucciones sobre cómo dividir el código, consulte la documentación de su herramienta de compilación:
- [Optimizaciones de compilación](https://es.vite.dev/guide/features.html#optimizaciones-de-compilacion)
- [División de código con Parcel](https://parceljs.org/features/code-splitting/)
- [División de código con Rsbuild](https://rsbuild.dev/guide/optimization/code-splitting)
-=======
-For code-splitting instructions, see your build tool docs:
-- [Vite build optimizations](https://vite.dev/guide/features.html#build-optimizations)
-- [Parcel code splitting](https://parceljs.org/features/code-splitting/)
-- [Rsbuild code splitting](https://rsbuild.dev/guide/optimization/code-splitting)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
### Mejorar el rendimiento de las aplicaciones {/*improving-application-performance*/}
-<<<<<<< HEAD
Dado que la herramienta de compilación que elija sólo admite aplicaciones de una sola página (SPA), tendrá que implementar otras [patrones de renderizado](https://www.patterns.dev/vanilla/rendering-patterns) como server-side rendering (SSR), static site generation (SSG), y/o React Server Components (RSC). Aunque al principio no necesites estas funciones, en el futuro puede que haya algunas rutas que se beneficien de SSR, SSG o RSC.
-=======
-Since the build tool you select only supports single page apps (SPAs), you'll need to implement other [rendering patterns](https://www.patterns.dev/vanilla/rendering-patterns) like server-side rendering (SSR), static site generation (SSG), and/or React Server Components (RSC). Even if you don't need these features at first, in the future there may be some routes that would benefit SSR, SSG or RSC.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
* **Single-page apps (SPA)** cargan una única página HTML y la actualizan dinámicamente a medida que el usuario interactúa con la aplicación. Las SPA son más fáciles de usar, pero pueden tener tiempos de carga iniciales más lentos. Las SPA son la arquitectura por defecto de la mayoría de las herramientas de compilación.
diff --git a/src/content/learn/keeping-components-pure.md b/src/content/learn/keeping-components-pure.md
index 8b0db905d..44e068364 100644
--- a/src/content/learn/keeping-components-pure.md
+++ b/src/content/learn/keeping-components-pure.md
@@ -606,15 +606,9 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-<<<<<<< HEAD
let initialStories = [
{id: 0, label: "Historia de Ankit" },
{id: 1, label: "Historia de Taylor" },
-=======
-const initialStories = [
- {id: 0, label: "Ankit's Story" },
- {id: 1, label: "Taylor's Story" },
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
];
export default function App() {
@@ -708,15 +702,9 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-<<<<<<< HEAD
let initialStories = [
{id: 0, label: "Historia de Ankit" },
{id: 1, label: "Historia de Taylor" },
-=======
-const initialStories = [
- {id: 0, label: "Ankit's Story" },
- {id: 1, label: "Taylor's Story" },
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
];
export default function App() {
@@ -781,13 +769,8 @@ Como alternativa, podrías crear un _nuevo_ array (copiando el existente) antes
```js src/StoryTray.js active
export default function StoryTray({ stories }) {
-<<<<<<< HEAD
- // ¡Copia el array!
- let storiesToDisplay = stories.slice();
-=======
- // Copy the array!
+ // ¡Copia el array!
const storiesToDisplay = stories.slice();
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
// Esto no afecta al array original:
storiesToDisplay.push({
@@ -811,15 +794,9 @@ export default function StoryTray({ stories }) {
import { useState, useEffect } from 'react';
import StoryTray from './StoryTray.js';
-<<<<<<< HEAD
let initialStories = [
{id: 0, label: "Historia de Ankit" },
{id: 1, label: "Historia de Taylor" },
-=======
-const initialStories = [
- {id: 0, label: "Ankit's Story" },
- {id: 1, label: "Taylor's Story" },
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
];
export default function App() {
diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md
index d46ee42e9..7a944c657 100644
--- a/src/content/learn/manipulating-the-dom-with-refs.md
+++ b/src/content/learn/manipulating-the-dom-with-refs.md
@@ -211,11 +211,7 @@ Esto es porque los **Hooks solo tienen que ser llamados en el nivel más alto de
Una posible forma de evitar esto es hacer una sola ref a su elemento padre, y luego usar métodos de manipulación del DOM como [`querySelectorAll`](https://developer.mozilla.org/es/docs/Web/API/Document/querySelectorAll) para "encontrar" los nodos hijos individuales a partir de él. Sin embargo, esto es frágil y puede romperse si la estructura del DOM cambia.
-<<<<<<< HEAD
Otra solución es **pasar una función al atributo `ref`.** A esto se le llama un [callback `ref`.](/reference/react-dom/components/common#ref-callback) React llamará tu callback ref con el nodo DOM cuando sea el momento de poner la ref, y con `null` cuando sea el momento de limpiarla. Esto te permite mantener tu propio array o un [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), y acceder a cualquier ref por su índice o algún tipo de ID.
-=======
-Another solution is to **pass a function to the `ref` attribute.** This is called a [`ref` callback.](/reference/react-dom/components/common#ref-callback) React will call your ref callback with the DOM node when it's time to set the ref, and call the cleanup function returned from the callback when it's time to clear it. This lets you maintain your own array or a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map), and access any ref by its index or some kind of ID.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Este ejemplo te muestra cómo puedes usar este enfoque para desplazarte a un nodo arbitrario en una lista larga:
diff --git a/src/content/learn/preserving-and-resetting-state.md b/src/content/learn/preserving-and-resetting-state.md
index d30654117..c9a1ae425 100644
--- a/src/content/learn/preserving-and-resetting-state.md
+++ b/src/content/learn/preserving-and-resetting-state.md
@@ -672,11 +672,7 @@ label {
-<<<<<<< HEAD
El estado del contador se reinicia cuando se hace clic en la casilla de verificación. Aunque se renderiza un `Counter`, el primer hijo del `div` cambia de `div` a `section`. Cuando el `div` hijo se eliminó del DOM, todo el árbol debajo de él (incluyendo el `Counter` y su estado) se destruyó también.
-=======
-The counter state gets reset when you click the checkbox. Although you render a `Counter`, the first child of the `div` changes from a `section` to a `div`. When the child `section` was removed from the DOM, the whole tree below it (including the `Counter` and its state) was destroyed as well.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
diff --git a/src/content/learn/referencing-values-with-refs.md b/src/content/learn/referencing-values-with-refs.md
index 8f8e96d5f..035d553c1 100644
--- a/src/content/learn/referencing-values-with-refs.md
+++ b/src/content/learn/referencing-values-with-refs.md
@@ -464,11 +464,7 @@ export default function Toggle() {
#### Arregla el _debounce_ {/*fix-debouncing*/}
-<<<<<<< HEAD
En este ejemplo, todos los controladores de clic usan [el "corte de rebote" o _"debounce"_.](https://redd.one/blog/debounce-vs-throttle) Para ver que significa esto, presiona uno de los botones. Fíjate como el mensaje aparece un segundo después. Si presionas el botón mientras esperas el mensaje, el temporizador se reiniciará. Así que si te mantienes cliqueando el mismo botón rápidamente muchas veces, el mensaje no aparecerá hasta un segundo *después* de que pares de hacer clic. El _debounce_ te permite retrasar algunas acciones hasta que el usuario "pare de hacer cosas".
-=======
-In this example, all button click handlers are ["debounced".](https://kettanaito.com/blog/debounce-vs-throttle) To see what this means, press one of the buttons. Notice how the message appears a second later. If you press the button while waiting for the message, the timer will reset. So if you keep clicking the same button fast many times, the message won't appear until a second *after* you stop clicking. Debouncing lets you delay some action until the user "stops doing things".
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Este ejemplo funciona, pero no tan bien como se esperaba. Los botones no son independientes. Para ver el problema, haz clic en uno de los botones, y luego inmediatamente haz clic en otro botón. Esperarías que después de un retraso, podrías ver los mensajes de ambos botones. Pero solo se muestra el mensaje del último botón. El mensaje del primer botón se pierde.
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
index 5938e5ee5..719372241 100644
--- a/src/content/learn/removing-effect-dependencies.md
+++ b/src/content/learn/removing-effect-dependencies.md
@@ -609,11 +609,7 @@ function ChatRoom({ roomId }) {
-<<<<<<< HEAD
-Esta sección describe una **API experimental que aún no se ha añadido a React**, por lo que aún no puedes usarla.
-=======
-**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**La API `useEffectEvent` actualmente solo está disponible en los canales Canary y Experimental de React.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
@@ -1245,11 +1241,7 @@ export default function Timer() {
-<<<<<<< HEAD
En lugar de leer `count` dentro del Efecto, pasas a React una instrucción `c => c + 1` ("¡incrementa este número!"). React la aplicará en el próximo renderizado. Y dado que ya no tienes que leer el valor de `count` dentro de tu Efecto, puedes mantener vacío (`[]`) el *array* de dependencias de tu Efecto. Así se evita que tu Efecto recree el intervalo en cada tic.
-=======
-Instead of reading `count` inside the Effect, you pass a `c => c + 1` instruction ("increment this number!") to React. React will apply it on the next render. And since you don't need to read the value of `count` inside your Effect anymore, you can keep your Effect's dependencies empty (`[]`). This prevents your Effect from re-creating the interval on every tick.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
diff --git a/src/content/learn/reusing-logic-with-custom-hooks.md b/src/content/learn/reusing-logic-with-custom-hooks.md
index d84022975..1be216903 100644
--- a/src/content/learn/reusing-logic-with-custom-hooks.md
+++ b/src/content/learn/reusing-logic-with-custom-hooks.md
@@ -820,11 +820,7 @@ export default function ChatRoom({ roomId }) {
// ...
```
-<<<<<<< HEAD
y lo pasas como entrada a otro Hook:
-=======
-and passing it as an input to another Hook:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
```js {6}
export default function ChatRoom({ roomId }) {
@@ -843,11 +839,7 @@ Cada vez que tu componente `ChatRoom` se vuelve a renderizar, pasa el último `r
-<<<<<<< HEAD
-Esta sección describe una **API experimental que aún no se ha agregado a React,** por lo que aún no puedes usarla.
-=======
-**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**La API `useEffectEvent` actualmente solo está disponible en los canales Canary y Experimental de React.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
@@ -1429,36 +1421,29 @@ De manera similar a un [sistema de diseño,](https://uxdesign.cc/everything-you-
#### ¿Proporcionará React alguna solución integrada para la obtención de datos? {/*will-react-provide-any-built-in-solution-for-data-fetching*/}
-<<<<<<< HEAD
-Todavía estamos trabajando en los detalles, pero esperamos que en el futuro escribas la obtención de datos de esta manera:
-
-```js {1,4,6}
-import { use } from 'react'; // ¡No disponible aún!
-=======
-Today, with the [`use`](/reference/react/use#streaming-data-from-server-to-client) API, data can be read in render by passing a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) to `use`:
+Hoy en día, con la API [`use`](/reference/react/use#streaming-data-from-server-to-client), los datos se pueden leer durante el renderizado pasando una [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) a `use`:
```js {1,4,11}
import { use, Suspense } from "react";
function Message({ messagePromise }) {
const messageContent = use(messagePromise);
- return
Here is the message: {messageContent}
;
+ return
Aquí está el mensaje: {messageContent}
;
}
export function MessageContainer({ messagePromise }) {
return (
- ⌛Downloading message...}>
+ ⌛Descargando mensaje...}>
);
}
```
-We're still working out the details, but we expect that in the future, you'll write data fetching like this:
+Todavía estamos trabajando en los detalles, pero esperamos que en el futuro escribas la obtención de datos de esta manera:
```js {1,4,6}
import { use } from 'react';
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
function ShippingForm({ country }) {
const cities = use(fetch(`/api/cities?country=${country}`));
diff --git a/src/content/learn/scaling-up-with-reducer-and-context.md b/src/content/learn/scaling-up-with-reducer-and-context.md
index 3d761d23f..ba1f86abf 100644
--- a/src/content/learn/scaling-up-with-reducer-and-context.md
+++ b/src/content/learn/scaling-up-with-reducer-and-context.md
@@ -509,15 +509,9 @@ export default function TaskApp() {
}
return (
-<<<<<<< HEAD
Día libre en Kyoto
-=======
-
-
-
Day off in Kyoto
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
@@ -682,26 +676,16 @@ En el siguiente paso, se eliminará el paso de props.
Ahora no es necesario pasar la lista de tareas o los controladores de eventos por el árbol:
```js {4-5}
-<<<<<<< HEAD
Día libre en Kyoto
-=======
-
-
-
Day off in Kyoto
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
```
-<<<<<<< HEAD
En cambio, cualquier componente que necesite la lista de tareas puede leerla del `TaskContext`:
-=======
-Instead, any component that needs the task list can read it from the `TasksContext`:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
```js {2}
export default function TaskList() {
@@ -746,15 +730,9 @@ export default function TaskApp() {
);
return (
-<<<<<<< HEAD
Día libre en Kyoto
-=======
-
-
-
Day off in Kyoto
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
diff --git a/src/content/learn/separating-events-from-effects.md b/src/content/learn/separating-events-from-effects.md
index 81a45996b..52e0a80cf 100644
--- a/src/content/learn/separating-events-from-effects.md
+++ b/src/content/learn/separating-events-from-effects.md
@@ -402,21 +402,14 @@ Necesitas una forma de separar esta lógica no reactiva del Efecto reactivo que
-<<<<<<< HEAD
-Esta sección describe una API **experimental que aún no se ha publicado** en una versión estable de React.
-=======
-**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**La API `useEffectEvent` actualmente solo está disponible en los canales Canary y Experimental de React.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
-<<<<<<< HEAD
-Utiliza un Hook especial llamado [`useEffectEvent`](/reference/react/experimental_useEffectEvent) para extraer esta lógica no reactiva de su Efecto:
-=======
-Use a special Hook called [`useEffectEvent`](/reference/react/useEffectEvent) to extract this non-reactive logic out of your Effect:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+
+Utiliza un Hook especial llamado [`useEffectEvent`](/reference/react/experimental_useEffectEvent) para extraer esta lógica no reactiva de su Efecto:
```js {1,4-6}
import { useEffect, useEffectEvent } from 'react';
@@ -449,14 +442,9 @@ function ChatRoom({ roomId, theme }) {
// ...
```
-<<<<<<< HEAD
Esto resuelve el problema. Ten en cuenta que has tenido que *eliminar* `onConnected` de la lista de dependencias de tu Efecto. **Los Eventos de Efecto no son reactivos y deben ser omitidos de las dependencias.**
-Verifica que el nuevo comportamiento funciona como esperas:
-=======
-This solves the problem. Note that you had to *remove* `theme` from the list of your Effect's dependencies, because it's no longer used in the Effect. You also don't need to *add* `onConnected` to it, because **Effect Events are not reactive and must be omitted from dependencies.**
-Verify that the new behavior works as you would expect:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Verifica que el nuevo comportamiento funciona como esperas:
@@ -595,11 +583,7 @@ Puedes pensar que los Eventos de Efecto son muy similares a los controladores de
-<<<<<<< HEAD
-Esta sección describe una API **experimental que aún no se ha publicado** en una versión estable de React.
-=======
-**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**La API `useEffectEvent` actualmente solo está disponible en los canales Canary y Experimental de React.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
@@ -901,11 +885,7 @@ Leer [Eliminar dependencias de Efectos](/learn/removing-effect-dependencies) par
-<<<<<<< HEAD
-Esta sección describe una API **experimental que aún no se ha publicado** en una versión estable de React.
-=======
-**The `useEffectEvent` API is currently only available in React’s Canary and Experimental channels.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**La API `useEffectEvent` actualmente solo está disponible en los canales Canary y Experimental de React.**
[Learn more about React’s release channels here.](/community/versioning-policy#all-release-channels)
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
index d6b14721b..fdd3f2ef6 100644
--- a/src/content/learn/synchronizing-with-effects.md
+++ b/src/content/learn/synchronizing-with-effects.md
@@ -732,13 +732,8 @@ Escribir llamadas `fetch` dentro de Efectos es una forma [popular de obtener dat
Esta lista de inconvenientes no es específica de React. Se aplica a la obtención de datos en el montaje con cualquier biblioteca. Al igual que con el enrutamiento, la obtención de datos no es trivial para hacerlo bien, por lo que recomendamos los siguientes enfoques:
-<<<<<<< HEAD
- **Si usas un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks), utiliza su mecanismo de obtención de datos integrado.** Los frameworks modernos de React han integrado mecanismos de obtención de datos que son eficientes y no sufren los inconvenientes anteriores.
- **De lo contrario, considera la posibilidad de utilizar o construir una caché del lado del cliente.** Las soluciones populares de código abierto incluyen [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), y [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) También puedes crear tu propia solución, en cuyo caso se usarían Efectos por debajo, pero también se añadiría lógica para deduplicar las peticiones, almacenar en caché las respuestas y evitar las cascadas de red (precargando los datos o elevando los requisitos de datos a las rutas).
-=======
-- **If you use a [framework](/learn/start-a-new-react-project#full-stack-frameworks), use its built-in data fetching mechanism.** Modern React frameworks have integrated data fetching mechanisms that are efficient and don't suffer from the above pitfalls.
-- **Otherwise, consider using or building a client-side cache.** Popular open source solutions include [React Query](https://tanstack.com/query/latest), [useSWR](https://swr.vercel.app/), and [React Router 6.4+.](https://beta.reactrouter.com/en/main/start/overview) You can build your own solution too, in which case you would use Effects under the hood, but add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Puedes seguir obteniendo datos directamente en Efectos si ninguno de estos enfoques te conviene.
@@ -1009,13 +1004,8 @@ import { useEffect, useRef } from 'react';
export default function MyInput({ value, onChange }) {
const ref = useRef(null);
-<<<<<<< HEAD
// TODO: Esto no funciona del todo. Corrígelo.
// ref.current.focus()
-=======
- // TODO: This doesn't quite work. Fix it.
- // ref.current.focus()
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
return (
>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+1. La sección _Files_ con una lista de archivos como `App.js`, `index.js`, `styles.css` en la carpeta `src` y una carpeta llamada `public`
+2. El _editor de código_ donde verás el código fuente de tu archivo seleccionado
+3. La sección _browser_ donde verás cómo se mostrará el código que has escrito
El archivo `App.js` debe seleccionarse en la sección *Files*. El contenido de ese archivo en el *code editor* debería ser:
diff --git a/src/content/learn/typescript.md b/src/content/learn/typescript.md
index ec29e7030..17be94cff 100644
--- a/src/content/learn/typescript.md
+++ b/src/content/learn/typescript.md
@@ -11,27 +11,16 @@ TypeScript es una forma popular de añadir definiciones de tipos a bases de cód
-<<<<<<< HEAD
* [TypeScript con Componentes de React](/learn/typescript#typescript-with-react-components)
* [Ejemplos de tipado con Hooks](/learn/typescript#example-hooks)
* [Tipos comunes de `@types/react`](/learn/typescript/#useful-types)
* [Lugares de aprendizaje adicional](/learn/typescript/#further-learning)
-=======
-* [TypeScript with React Components](/learn/typescript#typescript-with-react-components)
-* [Examples of typing with Hooks](/learn/typescript#example-hooks)
-* [Common types from `@types/react`](/learn/typescript#useful-types)
-* [Further learning locations](/learn/typescript#further-learning)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
## Instalación {/*installation*/}
-<<<<<<< HEAD
-Todos los [frameworks React de grado de producción](/learn/start-a-new-react-project#production-grade-react-frameworks) ofrecen soporte para el uso de TypeScript. Sigue la guía específica del framework para la instalación:
-=======
-All [production-grade React frameworks](/learn/start-a-new-react-project#full-stack-frameworks) offer support for using TypeScript. Follow the framework specific guide for installation:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Todos los [frameworks React de grado de producción](/learn/start-a-new-react-project#full-stack-frameworks) ofrecen soporte para el uso de TypeScript. Sigue la guía específica del framework para la instalación:
- [Next.js](https://nextjs.org/docs/app/building-your-application/configuring/typescript)
- [Remix](https://remix.run/docs/en/1.19.2/guides/typescript)
@@ -48,15 +37,9 @@ npm install --save-dev @types/react @types/react-dom
Las siguientes opciones del compilador deben ser configuradas en tu `tsconfig.json`:
-<<<<<<< HEAD
1. `dom` debe incluirse en [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Nota: Si no se especifica la opción `lib`, `dom` se incluye por defecto).
1. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) debe configurarse con una de las opciones válidas. `preserve` debería ser suficiente para la mayoría de las aplicaciones.
Si vas a publicar una biblioteca, consulta la [documentación `jsx`](https://www.typescriptlang.org/tsconfig/#jsx) para saber qué valor elegir.
-=======
-1. `dom` must be included in [`lib`](https://www.typescriptlang.org/tsconfig/#lib) (Note: If no `lib` option is specified, `dom` is included by default).
-2. [`jsx`](https://www.typescriptlang.org/tsconfig/#jsx) must be set to one of the valid options. `preserve` should suffice for most applications.
- If you're publishing a library, consult the [`jsx` documentation](https://www.typescriptlang.org/tsconfig/#jsx) on what value to choose.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
## TypeScript con Componentes de React {/*typescript-with-react-components*/}
@@ -141,11 +124,7 @@ El tipo que describe las props de tu componente puede ser tan simple o tan compl
## Ejemplos de Hooks {/*example-hooks*/}
-<<<<<<< HEAD
Las definiciones de tipos de `@types/react` incluyen tipos para los Hooks incorporados, por lo que puedes usarlos en tus componentes sin ninguna configuración adicional. Están construidos para tener en cuenta el código que escribes en tu componente, por lo que obtendrás [tipos inferidos](https://www.typescriptlang.org/docs/handbook/type-inference.html) la mayor parte del tiempo e idealmente no necesitarás manejar las minucias de proporcionar los tipos.
-=======
-The type definitions from `@types/react` include types for the built-in Hooks, so you can use them in your components without any additional setup. They are built to take into account the code you write in your component, so you will get [inferred types](https://www.typescriptlang.org/docs/handbook/type-inference.html) a lot of the time and ideally do not need to handle the minutiae of providing the types.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Sin embargo, podemos ver algunos ejemplos de cómo proporcionar tipos para Hooks.
@@ -160,13 +139,8 @@ const [enabled, setEnabled] = useState(false);
Esto asignará el tipo `boolean` a `enabled`, y `setEnabled` será una función que acepte un argumento `boolean`, o una función que devuelva un `boolean`. Si quieres proporcionar explícitamente un tipo para el estado, puedes hacerlo proporcionando un argumento de tipo a la llamada `useState`:
-<<<<<<< HEAD
```ts
// Definiendo explícitamente el tipo como "boolean"
-=======
-```ts
-// Explicitly set the type to "boolean"
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
const [enabled, setEnabled] = useState(false);
```
@@ -310,11 +284,7 @@ export default App = AppTSX;
-<<<<<<< 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`.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
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:
@@ -359,17 +329,13 @@ function MyComponent() {
### `useMemo` {/*typing-usememo*/}
-<<<<<<< HEAD
-Los hooks [`useMemo`](/reference/react/useMemo) crearán/reaccederán a un valor memorizado desde una llamada a una función, reejecutando la función sólo cuando las dependencias pasadas como segundo parámetro cambien. El resultado de llamar al Hook se infiere del valor de devolución de la función en el primer parámetro. Se puede ser más explícito proporcionando un argumento de tipo al Hook.
-=======
-[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useMemo` calls. You can use the compiler to handle memoization automatically.
+[React Compiler](/learn/react-compiler) memoiza automáticamente valores y funciones, reduciendo la necesidad de llamadas manuales a `useMemo`. Puedes usar el compilador para manejar la memoización de forma automática.
-The [`useMemo`](/reference/react/useMemo) Hooks will create/re-access a memorized value from a function call, re-running the function only when dependencies passed as the 2nd parameter are changed. The result of calling the Hook is inferred from the return value from the function in the first parameter. You can be more explicit by providing a type argument to the Hook.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Los hooks [`useMemo`](/reference/react/useMemo) crearán/reaccederán a un valor memorizado desde una llamada a una función, reejecutando la función sólo cuando las dependencias pasadas como segundo parámetro cambien. El resultado de llamar al Hook se infiere del valor de devolución de la función en el primer parámetro. Se puede ser más explícito proporcionando un argumento de tipo al Hook.
```ts
// El tipo de visibleTodos se infiere del valor de devolución de filterTodos
@@ -379,17 +345,13 @@ const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
### `useCallback` {/*typing-usecallback*/}
-<<<<<<< HEAD
-El [`useCallback`](/reference/react/useCallback) proporciona una referencia estable a una funcion siempre y cuando las dependencias pasadas como segundo parámetro sean las mismas. Al igual que con `useMemo`, el tipo de la función se infiere del valor de devolución de la función en el primer parámetro, y puedes ser más explícito al proporcionar un argumento de tipo al Hook.
-=======
-[React Compiler](/learn/react-compiler) automatically memoizes values and functions, reducing the need for manual `useCallback` calls. You can use the compiler to handle memoization automatically.
+[React Compiler](/learn/react-compiler) memoiza automáticamente valores y funciones, reduciendo la necesidad de llamadas manuales a `useCallback`. Puedes usar el compilador para manejar la memoización de forma automática.
-The [`useCallback`](/reference/react/useCallback) provide a stable reference to a function as long as the dependencies passed into the second parameter are the same. Like `useMemo`, the function's type is inferred from the return value of the function in the first parameter, and you can be more explicit by providing a type argument to the Hook.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+El [`useCallback`](/reference/react/useCallback) proporciona una referencia estable a una funcion siempre y cuando las dependencias pasadas como segundo parámetro sean las mismas. Al igual que con `useMemo`, el tipo de la función se infiere del valor de devolución de la función en el primer parámetro, y puedes ser más explícito al proporcionar un argumento de tipo al Hook.
```ts
@@ -400,11 +362,7 @@ const handleClick = useCallback(() => {
Cuando trabajas en el modo estricto de TypeScript, `useCallback` necesita que agregues tipos para los parámetros en tu función callback. Esto se debe a que el tipo del callback se infiere a partir del valor de devolución de la función, y sin parámetros no se puede entender completamente el tipo.
-<<<<<<< HEAD
Dependiendo de tus preferencias de estilo de código, podrías usar las funciones `*EventHandler` de los tipos de React para proporcionar el tipo para el controlador de eventos al mismo tiempo que defines el callback:
-=======
-Depending on your code-style preferences, you could use the `*EventHandler` functions from the React types to provide the type for the event handler at the same time as defining the callback:
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
```ts
import { useState, useCallback } from 'react';
@@ -487,11 +445,7 @@ interface ModalRendererProps {
}
```
-<<<<<<< HEAD
Ten en cuenta que no puedes usar TypeScript para describir que los hijos son un cierto tipo de elementos JSX, por lo que no puedes usar el sistema de tipos para describir un componente que sólo acepta hijos `
`.
-=======
-Note, that you cannot use TypeScript to describe that the children are a certain type of JSX elements, so you cannot use the type-system to describe a component which only accepts `
` children.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
Puedes ver un ejemplo tanto de `React.ReactNode` como de `React.ReactElement` con el verificador de tipos en [este playground de TypeScript](https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAJQKYEMDG8BmUIjgIilQ3wChSB6CxYmAOmXRgDkIATJOdNJMGAZzgwAFpxAR+8YADswAVwGkZMJFEzpOjDKw4AFHGEEBvUnDhphwADZsi0gFw0mDWjqQBuUgF9yaCNMlENzgAXjgACjADfkctFnYkfQhDAEpQgD44AB42YAA3dKMo5P46C2tbJGkvLIpcgt9-QLi3AEEwMFCItJDMrPTTbIQ3dKywdIB5aU4kKyQQKpha8drhhIGzLLWODbNs3b3s8YAxKBQAcwXpAThMaGWDvbH0gFloGbmrgQfBzYpd1YjQZbEYARkB6zMwO2SHSAAlZlYIBCdtCRkZpHIrFYahQYQD8UYYFA5EhcfjyGYqHAXnJAsIUHlOOUbHYhMIIHJzsI0Qk4P9SLUBuRqXEXEwAKKfRZcNA8PiCfxWACecAAUgBlAAacFm80W-CU11U6h4TgwUv11yShjgJjMLMqDnN9Dilq+nh8pD8AXgCHdMrCkWisVoAet0R6fXqhWKhjKllZVVxMcavpd4Zg7U6Qaj+2hmdG4zeRF10uu-Aeq0LBfLMEe-V+T2L7zLVu+FBWLdLeq+lc7DYFf39deFVOotMCACNOCh1dq219a+30uC8YWoZsRyuEdjkevR8uvoVMdjyTWt4WiSSydXD4NqZP4AymeZE072ZzuUeZQKheQgA).
diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md
index 7c425ccc6..aa21d7866 100644
--- a/src/content/learn/you-might-not-need-an-effect.md
+++ b/src/content/learn/you-might-not-need-an-effect.md
@@ -26,11 +26,7 @@ Hay dos casos comunes en los cuales no necesitas utilizar Efectos:
* **No necesitas Efectos para transformar datos antes de renderizar.** Por ejemplo, supongamos que deseas filtrar una lista antes de mostrarla. Podrías sentirte tentado/a a escribir un Efecto que actualice una variable de estado cuando cambie la lista. Sin embargo, esto es ineficiente. Cuando actualizas el estado, React primero llama a las funciones de tu componente para calcular lo que debería mostrarse en la pantalla. Luego, React ["confirmará"](/learn/render-and-commit) estos cambios en el DOM, actualizando la pantalla. Después, React ejecuta tus Efectos. Si tu Efecto también actualiza inmediatamente el estado, ¡esto reinicia todo el proceso desde cero! Para evitar pasadas de renderizado innecesarias, transforma todos los datos en el nivel superior de tus componentes. Ese código se volverá a ejecutar automáticamente cada vez que tus _props_ o estado cambien.
* **No necesitas Efectos para manejar eventos del usuario.** Por ejemplo, supongamos que deseas enviar una solicitud POST `/api/buy` y mostrar una notificación cuando el usuario compra un producto. En el controlador de eventos del botón "Comprar", sabes exactamente lo que sucedió. Para el momento en que se ejecuta un Efecto, no sabes *qué* hizo el usuario (por ejemplo, en qué botón se hizo clic). Por esta razón, generalmente se manejan los eventos del usuario en los controladores de eventos correspondientes.
-<<<<<<< HEAD
-Es *cierto* que necesitas Efectos para [sincronizar](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) con sistemas externos. Por ejemplo, puedes escribir un Efecto que mantenga sincronizado un _widget_ de jQuery con el estado de React. También puedes obtener datos con Efectos, por ejemplo, puedes sincronizar los resultados de búsqueda con la consulta de búsqueda actual. Ten en cuenta que los [_frameworks_](/learn/start-a-new-react-project#production-grade-react-frameworks) modernos proporcionan mecanismos más eficientes y nativos para obtener datos que escribir Efectos directamente en tus componentes.
-=======
-You *do* need Effects to [synchronize](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) with external systems. For example, you can write an Effect that keeps a jQuery widget synchronized with the React state. You can also fetch data with Effects: for example, you can synchronize the search results with the current search query. Keep in mind that modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than writing Effects directly in your components.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Es *cierto* que necesitas Efectos para [sincronizar](/learn/synchronizing-with-effects#what-are-effects-and-how-are-they-different-from-events) con sistemas externos. Por ejemplo, puedes escribir un Efecto que mantenga sincronizado un _widget_ de jQuery con el estado de React. También puedes obtener datos con Efectos, por ejemplo, puedes sincronizar los resultados de búsqueda con la consulta de búsqueda actual. Ten en cuenta que los [_frameworks_](/learn/start-a-new-react-project#full-stack-frameworks) modernos proporcionan mecanismos más eficientes y nativos para obtener datos que escribir Efectos directamente en tus componentes.
Para ayudarte a desarrollar la intuición adecuada, ¡veamos algunos ejemplos concretos comunes!
@@ -761,11 +757,7 @@ Esto asegura que cuando tu Efecto obtiene datos, todas las respuestas excepto la
Manejar las condiciones de carrera no es la única dificultad al implementar la obtención de datos. También podrías considerar el almacenamiento en caché de las respuestas (para que el usuario pueda hacer clic en "Atrás" y ver la pantalla anterior instantáneamente), cómo obtener datos en el servidor (para que el HTML renderizado inicialmente por el servidor contenga el contenido obtenido en lugar de un indicador de carga (_spinner_)), y cómo evitar cascadas de red (para que un hijo pueda obtener datos sin tener que esperar por cada padre).
-<<<<<<< HEAD
-**Estos problemas aplican a cualquier biblioteca de UI, no solo a React. Resolverlos no es trivial, por eso los [frameworks](/learn/start-a-new-react-project#production-grade-react-frameworks) modernos ofrecen mecanismos incorporados más eficientes de obtención de datos que obtener datos en Efectos.**
-=======
-**These issues apply to any UI library, not just React. Solving them is not trivial, which is why modern [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) provide more efficient built-in data fetching mechanisms than fetching data in Effects.**
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+**Estos problemas aplican a cualquier biblioteca de UI, no solo a React. Resolverlos no es trivial, por eso los [frameworks](/learn/start-a-new-react-project#full-stack-frameworks) modernos ofrecen mecanismos incorporados más eficientes de obtención de datos que obtener datos en Efectos.**
Si no utilizas un framework (y no quieres construir el tuyo propio) pero te gustaría hacer que la obtención de datos desde Efectos sea más cómoda, considera extraer tu lógica de obtención de datos en un Hook personalizado, como en este ejemplo:
diff --git a/src/content/reference/react-dom/client/createRoot.md b/src/content/reference/react-dom/client/createRoot.md
index 41047c8ff..3959218ae 100644
--- a/src/content/reference/react-dom/client/createRoot.md
+++ b/src/content/reference/react-dom/client/createRoot.md
@@ -209,11 +209,7 @@ Cuando tu HTML está vacío, el usuario ve una página en blanco hasta que el c
```
-<<<<<<< HEAD
-¡Esto puede sentirse muy lento! Para resolverlo, puedes generar el HTML inicial a partir de tus componentes [en el servidor o durante la compilación.](/reference/react-dom/server) Entonces tus visitantes pueden leer el texto, ver imágenes, y hacer clic en los enlaces antes de que se cargue cualquiera de los códigos de JavaScript. Recomendamos [utilizar un framework](/learn/start-a-new-react-project#building-with-a-full-featured-framework) que tenga esta optimización incorporada. Dependiendo de cuando se ejecuta, se llama *renderizado de lado del servidor (SSR)* o *generación de sitios estáticos (SSG)*
-=======
-This can feel very slow! To solve this, you can generate the initial HTML from your components [on the server or during the build.](/reference/react-dom/server) Then your visitors can read text, see images, and click links before any of the JavaScript code loads. We recommend [using a framework](/learn/start-a-new-react-project#full-stack-frameworks) that does this optimization out of the box. Depending on when it runs, this is called *server-side rendering (SSR)* or *static site generation (SSG).*
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+¡Esto puede sentirse muy lento! Para resolverlo, puedes generar el HTML inicial a partir de tus componentes [en el servidor o durante la compilación.](/reference/react-dom/server) Entonces tus visitantes pueden leer el texto, ver imágenes, y hacer clic en los enlaces antes de que se cargue cualquiera de los códigos de JavaScript. Recomendamos [utilizar un framework](/learn/start-a-new-react-project#full-stack-frameworks) que tenga esta optimización incorporada. Dependiendo de cuando se ejecuta, se llama *renderizado de lado del servidor (SSR)* o *generación de sitios estáticos (SSG)*
diff --git a/src/content/reference/react-dom/client/index.md b/src/content/reference/react-dom/client/index.md
index 6a50c32d4..8f7e02d55 100644
--- a/src/content/reference/react-dom/client/index.md
+++ b/src/content/reference/react-dom/client/index.md
@@ -4,11 +4,7 @@ title: APIs del cliente React DOM
-<<<<<<< HEAD
-Las APIs de `react-dom/client` te permiten renderizar componentes de React en el cliente (en el navegador). Estas APIs son típicamente usadas en el nivel superior de tu aplicación para inicializar tu árbol de React. Un [framework](/learn/start-a-new-react-project#production-grade-react-frameworks) podría llamar a estas APIs por ti. La mayoría de tus componentes no necesitan importarlas o usarlas.
-=======
-The `react-dom/client` APIs let you render React components on the client (in the browser). These APIs are typically used at the top level of your app to initialize your React tree. A [framework](/learn/start-a-new-react-project#full-stack-frameworks) may call them for you. Most of your components don't need to import or use them.
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Las APIs de `react-dom/client` te permiten renderizar componentes de React en el cliente (en el navegador). Estas APIs son típicamente usadas en el nivel superior de tu aplicación para inicializar tu árbol de React. Un [framework](/learn/start-a-new-react-project#full-stack-frameworks) podría llamar a estas APIs por ti. La mayoría de tus componentes no necesitan importarlas o usarlas.
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
index efc502ee6..574616152 100644
--- a/src/content/reference/react-dom/components/common.md
+++ b/src/content/reference/react-dom/components/common.md
@@ -916,11 +916,7 @@ export default function Form() {
-<<<<<<< HEAD
-Lee más sobre cómo [manipular el DOM con refs](/learn/manipulating-the-dom-with-refs) y [consulta más ejemplos.](/reference/react/useRef#examples-dom)
-=======
-Read more about [manipulating DOM with refs](/learn/manipulating-the-dom-with-refs) and [check out more examples.](/reference/react/useRef#usage)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Lee más sobre cómo [manipular el DOM con refs](/learn/manipulating-the-dom-with-refs) y [consulta más ejemplos.](/reference/react/useRef#usage)
Para casos de uso más avanzados, el atributo ref también acepta una [función callback.](#ref-callback)
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 3e9673e3e..a025da2c9 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -162,13 +162,7 @@ Similar al [estándar DOM,](https://developer.mozilla.org/es/docs/Web/API/Docume
### Elementos HTML personalizados {/*custom-html-elements*/}
-<<<<<<< HEAD
-Si renderizas una etiqueta con un guión, como ``, React asumirá que quieres renderizar un [elemento HTML personalizado.](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements) En React, el renderizado de elementos personalizados funciona de manera diferente desde el renderizado de etiquetas integradas del navegador:
-
-- Todas las props de los elementos personalizados son serializadas a strings y siempre se configuran usando atributos.
-=======
-If you render a tag with a dash, like ``, React will assume you want to render a [custom HTML element.](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
+Si renderizas una etiqueta con un guión, como ``, React asumirá que quieres renderizar un [elemento HTML personalizado.](https://developer.mozilla.org/es/docs/Web/Web_Components/Using_custom_elements)
- Los elementos personalizados aceptan `class` en vez de `className`, y `for` en vez de `htmlFor`.
@@ -293,25 +287,14 @@ export function App() {
-<<<<<<< HEAD
-[Una versión futura de React incluirá un soporte más completo para elementos personalizados.](https://github.com/facebook/react/issues/11347#issuecomment-1122275286)
-
-Puedes probar actualizando los paquetes de React a la versión experimental más reciente:
-
-- `react@experimental`
-- `react-dom@experimental`
-
-Las versiones experimentales de React pueden contener errores. No las uses en producción.
-=======
-Events are case-sensitive and support dashes (`-`). Preserve the casing of the event and include all dashes when listening for custom element's events:
+Los eventos distinguen entre mayúsculas y minúsculas y admiten guiones (`-`). Conserva las mayúsculas del evento e incluye todos los guiones al escuchar los eventos del elemento personalizado:
```jsx
-// Listens for `say-hi` events
+// Escucha eventos `say-hi`
-// Listens for `sayHi` events
+// Escucha eventos `sayHi`
```
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
---
diff --git a/src/content/reference/react-dom/components/input.md b/src/content/reference/react-dom/components/input.md
index 63e2d3cee..ed6bce81b 100644
--- a/src/content/reference/react-dom/components/input.md
+++ b/src/content/reference/react-dom/components/input.md
@@ -30,11 +30,7 @@ Para mostrar un input, renderiza el componente [`` incorporado en el nave
#### Props {/*props*/}
-<<<<<<< HEAD
`` admite todas las [props comunes de los elementos.](/reference/react-dom/components/common#props)
-=======
-`` supports all [common element props.](/reference/react-dom/components/common#common-props)
->>>>>>> 49c2d26722fb1b5865ce0221a4cadc71b615e4cf
- [`formAction`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#formaction): A string or function. Overrides the parent `