Skip to content

Commit

Permalink
Resolve merge conflicts
Browse files Browse the repository at this point in the history
  • Loading branch information
carburo committed Oct 30, 2023
1 parent e224b53 commit 45af8b3
Show file tree
Hide file tree
Showing 8 changed files with 15 additions and 52 deletions.
16 changes: 4 additions & 12 deletions src/content/learn/describing-the-ui.md
Original file line number Diff line number Diff line change
Expand Up @@ -530,29 +530,21 @@ React utiliza árboles para modelar las relaciones entre componentes y módulos.

Un árbol de renderizado de React es una representación de la relación padre-hijo entre componentes.

<<<<<<< HEAD
<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>
=======
<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'.">
<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'.">

An example React render tree.
Un ejemplo de un árbol de renderizado de React.

</Diagram>
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec

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.

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.

<<<<<<< HEAD
<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>
=======
<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'.">
<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'.">

An example module dependency tree.
Un ejemplo de un árbol de dependecias de módulos.

</Diagram>
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec

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.

Expand Down
10 changes: 3 additions & 7 deletions src/content/reference/react-dom/components/input.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,18 +32,14 @@ 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
Puedes [hacer un input controlado](#controlling-an-input-with-a-state-variable) pasando una de estas props:
=======
<Canary>

React's extensions to the `formAction` prop are currently only available in React's canary and experimental channels. In stable releases of React `formAction` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
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](https://react.dev/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): 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).
[`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).

You can [make an input controlled](#controlling-an-input-with-a-state-variable) by passing one of these props:
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
Puedes [hacer un input controlado](#controlling-an-input-with-a-state-variable) pasando una de estas props:

* [`checked`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#checked): Booleano. Para un entrada de tipo checkbox o radio button, controla si está seleccionado.
* [`value`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement#value): String. Para una entrada de texto, controla su texto. (Para un radio button, especifica sus datos de formulario.)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -431,11 +431,7 @@ function ProfilePage() {
}
```
<<<<<<< HEAD
Si se produce un error en el componente `Posts` o en cualquier lugar dentro de él, React va a [intentar recuperarse de la siguiente manera:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
=======
If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
Si se produce un error en el componente `Posts` o en cualquier lugar dentro de él, React va a [intentar recuperarse de la siguiente manera:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
1. Emitirá el *fallback* de carga para la barrera de `<Suspense>` más cercana (`PostsGlimmer`) en el HTML.
2. "Abandonará" el intento de renderizar el contenido `Posts` en el servidor.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -435,11 +435,7 @@ function ProfilePage() {
}
```
<<<<<<< HEAD
Si ocurriera un error en el componente `Posts` o en cualquier parte dentro del mismo, React [intentará recuperse de él:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
=======
If an error happens in the `Posts` component or somewhere inside it, React will [try to recover from it:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
Si ocurriera un error en el componente `Posts` o en cualquier parte dentro del mismo, React [intentará recuperse de él:](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
1. Emitirá el respaldo de carga del `<Suspense>` más cercano (`PostsGlimmer`) en el HTML.
2. Dejará de intentar renderizar el contenido de `Posts` en el servidor.
Expand Down
7 changes: 1 addition & 6 deletions src/content/reference/react/useEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -1046,13 +1046,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#building-with-a-full-featured-framework), 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://react-query.tanstack.com/), [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 (pre-cargando los datos o elevando los requisitos de datos a las rutas).
=======
- **If you use a [framework](/learn/start-a-new-react-project#production-grade-react-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 also add logic for deduplicating requests, caching responses, and avoiding network waterfalls (by preloading data or hoisting data requirements to routes).
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
- **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 (pre-cargando los datos o elevando los requisitos de datos a las rutas).
Puedes seguir obteniendo datos directamente en Efectos si ninguno de estos enfoques te conviene.
Expand Down
6 changes: 1 addition & 5 deletions src/content/reference/react/useLayoutEffect.md
Original file line number Diff line number Diff line change
Expand Up @@ -732,11 +732,7 @@ Sin embargo, si estás pasando por este problema, tienes algunas opciones:
1. Puedes reemplazar `useLayoutEffect` con [`useEffect`.](/reference/react/useEffect) Esto le dice a React que está bien mostrar el resultado inicial del renderizado sin bloquear el pintado (porque el HTML original se convierte en visible antes que tu Efecto se ejecute).
<<<<<<< HEAD
2. Puedes [marcar tu componente como solo cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content) Esto le indica a React que debe reemplazar su contenido hasta la barrera de [`<Suspense>`](/reference/react/Suspense) más cercana con un *fallback* de carga (por ejemplo, un spinner o un glimmer) durante el renderizado en el lado del servidor)
=======
- Alternatively, [mark your component as client-only.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) This tells React to replace its content up to the closest [`<Suspense>`](/reference/react/Suspense) boundary with a loading fallback (for example, a spinner or a glimmer) during server rendering.
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
2. Puedes [marcar tu componente como solo cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content) Esto le indica a React que debe reemplazar su contenido hasta la barrera de [`<Suspense>`](/reference/react/Suspense) más cercana con un *fallback* de carga (por ejemplo, un spinner o un glimmer) durante el renderizado en el lado del servidor.
3. Puedes mostrar diferentes componentes en el servidor y en el cliente. Una manera de hacer esto es mantener el estado booleano `isMounted` que está inicializado en `false`, y cambiarlo a `true` dentro de la llamada de un `useEffect`. La lógica de renderizado puede ser entonces como `return isMounted ? <RealContent /> : <FallbackContent />`. En el servidor y durante la hidratación, el usuario va a ver `FallbackContent` que no debe llamar `useLayoutEffect`. Luego React va a reemplazarlo con `RealContent` que se ejecuta solo en el lado del cliente y puede incluir llamadas a `useLayoutEffect`.
Expand Down
6 changes: 1 addition & 5 deletions src/content/reference/react/useSyncExternalStore.md
Original file line number Diff line number Diff line change
Expand Up @@ -361,11 +361,7 @@ La función `getServerSnapshot` es similar a `getSnapshot`, pero solo se ejecuta
- Se ejecuta en el servidor al generar el HTML.
- Se ejecuta en el cliente durante la [hidratación](/reference/react-dom/client/hydrateRoot), es decir, cuando React toma el HTML del servidor y lo hace interactivo.
<<<<<<< HEAD
Esto te permite proporcionar la instantánea del valor inicial que se utilizará antes de que la aplicación se vuelva interactiva. Si no hay un valor inicial significativo para el renderizado en el servidor, puedes [forzar el componente para que se renderice solo en el cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-server-only-content)
=======
This lets you provide the initial snapshot value which will be used before the app becomes interactive. If there is no meaningful initial value for the server rendering, omit this argument to [force rendering on the client.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
Esto te permite proporcionar la instantánea del valor inicial que se utilizará antes de que la aplicación se vuelva interactiva. Si no hay un valor inicial significativo para el renderizado en el servidor, puedes [forzar el componente para que se renderice solo en el cliente.](/reference/react/Suspense#providing-a-fallback-for-server-errors-and-client-only-content)
<Note>
Expand Down
10 changes: 3 additions & 7 deletions src/content/reference/react/useTransition.md
Original file line number Diff line number Diff line change
Expand Up @@ -1501,18 +1501,15 @@ Se espera que los enredadores [preparados para Suspense](/reference/react/Suspen
---
<<<<<<< HEAD
## Solución de problemas {/*troubleshooting*/}
=======
### Displaying an error to users with a error boundary {/*displaying-an-error-to-users-with-error-boundary*/}
<Canary>
Error Boundary for useTransition is currently only available in React's canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
La barrera de error para useTransition está disponible actualmente solo en los canales experimental y canary de React. Más información sobre [los canales de lanzamiento de React aquí](/community/versioning-policy#all-release-channels).
</Canary>
If a function passed to `startTransition` throws an error, you can display an error to your user with an [error boundary](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). To use an error boundary, wrap the component where you are calling the `useTransition` in an error boundary. Once the function passed to `startTransition` errors, the fallback for the error boundary will be displayed.
Si una función que se pasa a `startTransition` lanza un error, puedes mostrar un error a tu usuario con una [barrera de error](/reference/react/Component#catching-rendering-errors-with-an-error-boundary). Para usar una barrera de error, envuelve el componente en el que estás llamando a `useTransition` en una barrera de error. Una vez que la función que se pasa a `startTransition` lanza un error se mostrará el _fallback_ de la barrera de error.
<Sandpack>
Expand Down Expand Up @@ -1598,8 +1595,7 @@ root.render(
---
## Troubleshooting {/*troubleshooting*/}
>>>>>>> 4bdb87b172a7723d56d03a5630c8a9870f6f03ec
## Solución de problemas {/*troubleshooting*/}
### No funciona la actualización de una entrada en una transición {/*updating-an-input-in-a-transition-doesnt-work*/}
Expand Down

0 comments on commit 45af8b3

Please sign in to comment.