Translation escape hatches #669

Juamez · 2023-04-30T22:15:21Z

Agrego la traducción de la sección Escape Hatches.

Me tomé el atrevimiento de traducir el tag que aparece debajo del título principal para que la sección estuviera lo más completa posible en su traducción, además del título de la sección del WIP.
También corregí un título en el sidebar tomando de referencia la guía de traducción.

Estoy atento a cualquier correción. 😄

mateoguzmana

Gracias por la contribución @Juamez!

Te dejé un par de comentarios de cosas pequeñas que noté.

src/content/learn/escape-hatches.md

Juamez · 2023-05-02T17:32:04Z

Gracias por la contribución @Juamez!

Te dejé un par de comentarios de cosas pequeñas que noté.

Hola, gracias por la revisión @mateoguzmana.

Ya hice los arreglos de tus comentarios, quedo atento a cualquier cosa.

mateoguzmana · 2023-05-03T17:06:49Z

@Juamez podrías revertir los cambios de los archivos del PR a excepción de src/content/learn/escape-hatches.md?

El equipo de React recomienda no traducir elementos de la UI en el momento para evitar conflictos en el futuro, ya que estos van a cambiar o pueden cambiar un poco pronto.

Keep in mind translating UI is best done closer to the end. We plan to make non-trivial code changes to the repo over the next few months. So it's best to focus on the content rather than on UI components.

…ranslation/escape-hatches

carburo

¡Hola @Juamez! Gracias por tu colaboración en traducir esta página que es particularmente extensa. Te he dejado algunos comentarios sobre algunos aspectos que noté al revisarla.

carburo · 2023-05-03T21:54:41Z

src/content/learn/escape-hatches.md

 ---

 <Intro>

-Some of your components may need to control and synchronize with systems outside of React. For example, you might need to focus an input using the browser API, play and pause a video player implemented without React, or connect and listen to messages from a remote server. In this chapter, you'll learn the escape hatches that let you "step outside" React and connect to external systems. Most of your application logic and data flow should not rely on these features.
+Algunos de tus componentes puede que necesiten controlar y sincronizarse con sistemas externos a react. Por ejemplo, puede que necesites enfocar un input usando la API del navegador, reproducir o pausar un reproductor de video implementado sin React, o conectar y escuchar mensajes de un servidor remoto. En este capitulo, aprenderás las puertas de escape que te permiten “salir” de React y conectarte con sistemas externos. La mayoría de la lógica de tu aplicación y flujo de datos no deberían depender de estas características.


Utilizamos comillas rectas que en el proceso de compilación serán convertidas a sus correspondientes variantes tipográficas. En particular las comillas dobles son convertidas a comillas latinas.

Suggested change

Algunos de tus componentes puede que necesiten controlar y sincronizarse con sistemas externos a react. Por ejemplo, puede que necesites enfocar un input usando la API del navegador, reproducir o pausar un reproductor de video implementado sin React, o conectar y escuchar mensajes de un servidor remoto. En este capitulo, aprenderás las puertas de escape que te permiten “salir” de React y conectarte con sistemas externos. La mayoría de la lógica de tu aplicación y flujo de datos no deberían depender de estas características.

Algunos de tus componentes puede que necesiten controlar y sincronizarse con sistemas externos a React. Por ejemplo, puede que necesites enfocar un input usando la API del navegador, reproducir o pausar un reproductor de video implementado sin React, o conectar y escuchar mensajes de un servidor remoto. En este capítulo, aprenderás las puertas de escape que te permiten "salir" de React y conectarte con sistemas externos. La mayoría de la lógica de tu aplicación y flujo de datos no deberían depender de estas características.

carburo · 2023-05-03T22:05:29Z

src/content/learn/escape-hatches.md


-Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, *Effects* let you run some code after rendering. Use them to synchronize your component with a system outside of React.
+Algunos componentes necesitan sincronizarse con sistemas externos. Por ejemplo, es posible que desees controlar un componente que no sea de React basado en el estado de React, establecer una conexión a un servidor, enviar reporte de analíticas cuando un componente aparece en la pantalla. A diferencia de los manejadores de eventos, que permiten manejar eventos concretos, los *efectos* te permiten ejecutar algún código después de renderizar. Úsalos para sincronizar tu componente con un sistema externo a React.


https://github.com/reactjs/es.react.dev/wiki/Gu%C3%ADa-de-estilo#mayúsculas-en-terminolog%C3%ADa-de-react

Revisa otros lugares del documento con la misma situación.

Suggested change

Algunos componentes necesitan sincronizarse con sistemas externos. Por ejemplo, es posible que desees controlar un componente que no sea de React basado en el estado de React, establecer una conexión a un servidor, enviar reporte de analíticas cuando un componente aparece en la pantalla. A diferencia de los manejadores de eventos, que permiten manejar eventos concretos, los *efectos* te permiten ejecutar algún código después de renderizar. Úsalos para sincronizar tu componente con un sistema externo a React.

Algunos componentes necesitan sincronizarse con sistemas externos. Por ejemplo, es posible que desees controlar un componente que no sea de React basado en el estado de React, establecer una conexión a un servidor, enviar reporte de analíticas cuando un componente aparece en la pantalla. A diferencia de los manejadores de eventos, que permiten manejar eventos concretos, los *Efectos* te permiten ejecutar algún código después de renderizar. Úsalos para sincronizar tu componente con un sistema externo a React.

carburo · 2023-05-03T22:06:06Z

src/content/learn/escape-hatches.md

@@ -145,7 +145,7 @@ video { width: 250px; }

 </Sandpack>

-Many Effects also "clean up" after themselves. For example, an Effect that sets up a connection to a chat server should return a *cleanup function* that tells React how to disconnect your component from that server:
+Algunos efectos pueden "limpiarse" por sí mismos. Por ejemplo, un efecto que establece una conexión a un servidor de chat debería retornar una *función de limpieza* que le dice a React como desconectar su componente de ese servidor:


Suggested change

Algunos efectos pueden "limpiarse" por sí mismos. Por ejemplo, un efecto que establece una conexión a un servidor de chat debería retornar una *función de limpieza* que le dice a React como desconectar su componente de ese servidor:

Algunos efectos pueden "limpiarse" por sí mismos. Por ejemplo, un efecto que establece una conexión a un servidor de chat debería retornar una *función de limpieza* que le dice a React como desconectar tu componente de ese servidor:

carburo · 2023-05-03T22:19:48Z

src/content/learn/escape-hatches.md

@@ -302,25 +302,25 @@ button { margin-left: 10px; }

 </Sandpack>

-React provides a linter rule to check that you've specified your Effect's dependencies correctly. If you forget to specify `roomId` in the list of dependencies in the above example, the linter will find that bug automatically.
+React proporciona una regla al linter para comprobar que hayas especificado correctamente las dependencias de tus efectos. Si olvidas de especificar `roomId` en la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.


https://www.rae.es/dpd/olvidar
En español estándar «te olvidas de especificar» u «olvidas especificar».

Suggested change

React proporciona una regla al linter para comprobar que hayas especificado correctamente las dependencias de tus efectos. Si olvidas de especificar `roomId` en la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.

React proporciona una regla al linter para comprobar que hayas especificado correctamente las dependencias de tus efectos. Si olvidas especificar `roomId` en la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.

carburo · 2023-05-03T22:20:28Z

src/content/learn/escape-hatches.md


 <Wip>

-This section describes an **experimental API that has not yet been released** in a stable version of React.
+Esta sección describe una **API experimental que aún no se ha publicado** en una version estable de React.


Suggested change

Esta sección describe una **API experimental que aún no se ha publicado** en una version estable de React.

Esta sección describe una **API experimental que aún no se ha publicado** en una versión estable de React.

carburo · 2023-05-03T22:26:05Z

src/content/learn/escape-hatches.md


 </Wip>

-Event handlers only re-run when you perform the same interaction again. Unlike event handlers, Effects re-synchronize if any of the values they read, like props or state, are different than during last render. Sometimes, you want a mix of both behaviors: an Effect that re-runs in response to some values but not others.
+Los eventos manejadores únicamente se vuelven a ejecutar cuando realizas de nuevo la misma interacción. A diferencia de los eventos manejadores, los efectos se vuelven a sincronizar si alguno de los valores que leen, como props o estados, son diferentes a los del ultimo renderizado. Algunas veces, quieres una mezcla de ambos comportamientos: un efecto que se vuelve a ejecutar en respuesta de algunos valores.


https://github.com/reactjs/es.react.dev/wiki/Glosario#:~:text=manejador%20de%20eventos
Revisa ocurrencias como esta en el resto del documento

Suggested change

Los eventos manejadores únicamente se vuelven a ejecutar cuando realizas de nuevo la misma interacción. A diferencia de los eventos manejadores, los efectos se vuelven a sincronizar si alguno de los valores que leen, como props o estados, son diferentes a los del ultimo renderizado. Algunas veces, quieres una mezcla de ambos comportamientos: un efecto que se vuelve a ejecutar en respuesta de algunos valores.

Los manejadores de eventos únicamente se vuelven a ejecutar cuando realizas de nuevo la misma interacción. A diferencia de los manejadores de eventos, los efectos se vuelven a sincronizar si alguno de los valores que leen, como props o estados, son diferentes a los del último renderizado. Algunas veces, quieres una mezcla de ambos comportamientos: un efecto que se vuelve a ejecutar en respuesta de algunos valores.

carburo · 2023-05-03T22:45:56Z

src/content/learn/escape-hatches.md

@@ -448,7 +448,7 @@ label { display: block; margin-top: 10px; }

 </Sandpack>

-This is not ideal. You want to re-connect to the chat only if the `roomId` has changed. Switching the `theme` shouldn't re-connect to the chat! Move the code reading `theme` out of your Effect into an *Effect Event*:
+Esto no es lo ideal. Quieres volver a conectar con el chat únicamente si el `roomId` ha cambiado. Cambiar el `tema` no debería volver a conectarse con el chat! Mueve el código que lee el `tema` fuera de tu efecto hacia un *evento de efecto*:


theme no debe traducirse porque se está refiriendo a una variable en el código. Te pongo una sugerencia de cómo manejar este caso.

Suggested change

Esto no es lo ideal. Quieres volver a conectar con el chat únicamente si el `roomId` ha cambiado. Cambiar el `tema` no debería volver a conectarse con el chat! Mueve el código que lee el `tema` fuera de tu efecto hacia un *evento de efecto*:

Esto no es lo ideal. Quieres volver a conectar con el chat únicamente si el `roomId` ha cambiado. ¡Cambiar el tema (mediante `theme`) no debería provocar una reconexión con el chat! Mueve el código que lee `theme` fuera de tu Efecto hacia un *Evento de Efecto*:

carburo · 2023-05-03T22:48:27Z

src/content/learn/escape-hatches.md

@@ -479,7 +479,7 @@ const serverUrl = 'https://localhost:1234';

 function ChatRoom({ roomId, theme }) {
  const onConnected = useEffectEvent(() => {
-    showNotification('Connected!', theme);
+    showNotification('Conectado!', theme);


Revisa en otras partes de la página en que puedan también faltar los signos de apertura.

Suggested change

showNotification('Conectado!', theme);

showNotification('¡Conectado!', theme);

carburo · 2023-05-03T22:49:18Z

src/content/learn/escape-hatches.md

@@ -742,19 +742,19 @@ button { margin-left: 10px; }

 </Sandpack>

-Notice that you didn't start by editing the dependency list to remove the `options` dependency. That would be wrong. Instead, you changed the surrounding code so that the dependency became *unnecessary.* Think of the dependency list as a list of all the reactive values used by your Effect's code. You don't intentionally choose what to put on that list. The list describes your code. To change the dependency list, change the code.
+Fíjate que no empezaste editando la lista de dependencia para eliminar la dependencia `options`. Eso sería un error. En lugar de eso, cambiaste el código alrededor así que la dependencia se volvió *innecesaria.* Piensa en la lista de dependencias como una lista de todos los valores reactivos utilizados por el código de tu efecto. Tú no escogiste intencionadamente que poner en esa lista. La lista describe tu código. Para cambiar la lista de dependencias, cambia el código.


Suggested change

Fíjate que no empezaste editando la lista de dependencia para eliminar la dependencia `options`. Eso sería un error. En lugar de eso, cambiaste el código alrededor así que la dependencia se volvió *innecesaria.* Piensa en la lista de dependencias como una lista de todos los valores reactivos utilizados por el código de tu efecto. Tú no escogiste intencionadamente que poner en esa lista. La lista describe tu código. Para cambiar la lista de dependencias, cambia el código.

Fíjate que no empezaste editando la lista de dependencias para eliminar la dependencia `options`. Eso sería un error. En lugar de eso, cambiaste el código alrededor así que la dependencia se volvió *innecesaria.* Piensa en la lista de dependencias como una lista de todos los valores reactivos utilizados por el código de tu efecto. Tú no escogiste intencionadamente que poner en esa lista. La lista describe tu código. Para cambiar la lista de dependencias, cambia el código.

carburo · 2023-05-03T22:53:57Z

src/content/learn/escape-hatches.md


-React comes with built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. To do this, you can create your own Hooks for your application's needs.
+React viene con hooks incorporados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario esta conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.


El término que estamos uando para mantener la consistencia es «Hooks integrados».
https://github.com/reactjs/es.react.dev/wiki/Glosario

Suggested change

React viene con hooks incorporados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario esta conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.

React viene con Hooks integrados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario está conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.

github-actions · 2023-05-03T23:01:13Z

Size changes

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

Juamez · 2023-05-03T23:03:01Z

@Juamez podrías revertir los cambios de los archivos del PR a excepción de src/content/learn/escape-hatches.md?

El equipo de React recomienda no traducir elementos de la UI en el momento para evitar conflictos en el futuro, ya que estos van a cambiar o pueden cambiar un poco pronto.

Keep in mind translating UI is best done closer to the end. We plan to make non-trivial code changes to the repo over the next few months. So it's best to focus on the content rather than on UI components.

Gracias por la aclaración @mateoguzmana. 👍

…ranslation/escape-hatches

Juamez · 2023-05-06T03:38:22Z

Hola @carburo, gracias por revisar y dejar tus comentarios, he aplicado tus sugerencias y otros errores que encontré, igual si surge algo más, sigo atento, gracias.

carburo

¡Gracias por tu colaboración! Revertí los cambios de las mayúsculas en «ref», con base en el mismo uso de mayúsculas que en la documentación original para términos específicos de React.

Translate escape-hatches section

e02f2a1

vercel bot deployed to Preview – es-react-dev April 30, 2023 22:16 View deployment

mateoguzmana reviewed May 1, 2023

View reviewed changes

vercel bot deployed to Preview – es-react-dev May 2, 2023 16:57 View deployment

vercel bot deployed to Preview – es-react-dev May 3, 2023 20:54 View deployment

Fix typos

84a363b

vercel bot deployed to Preview – es-react-dev May 3, 2023 22:44 View deployment

Merge branch 'main' of https://github.com/reactjs/es.react.dev into t…

287502c

…ranslation/escape-hatches

vercel bot deployed to Preview – es-react-dev May 3, 2023 22:51 View deployment

carburo requested changes May 3, 2023

View reviewed changes

Juamez added 2 commits May 5, 2023 22:33

Fix typos

b876e53

Merge branch 'main' of https://github.com/reactjs/es.react.dev into t…

e765979

…ranslation/escape-hatches

vercel bot deployed to Preview – es-react-dev May 6, 2023 03:35 View deployment

fix capitalization

0aa08c4

vercel bot deployed to Preview – es-react-dev May 6, 2023 03:56 View deployment

carburo approved these changes May 6, 2023

View reviewed changes

carburo merged commit 2273c1e into reactjs:main May 6, 2023

carburo mentioned this pull request May 6, 2023

New Translation Progress Checklist #500

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Translation escape hatches #669

Translation escape hatches #669

Juamez commented Apr 30, 2023

mateoguzmana left a comment

Juamez commented May 2, 2023

mateoguzmana commented May 3, 2023 •

edited

Loading

carburo left a comment

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

carburo May 3, 2023

github-actions bot commented May 3, 2023 •

edited

Loading

📦 Next.js Bundle Analysis for react-dev

Juamez commented May 3, 2023

Juamez commented May 6, 2023

carburo left a comment


		Some components need to synchronize with external systems. For example, you might want to control a non-React component based on the React state, set up a server connection, or send an analytics log when a component appears on the screen. Unlike event handlers, which let you handle particular events, Effects let you run some code after rendering. Use them to synchronize your component with a system outside of React.
		Algunos componentes necesitan sincronizarse con sistemas externos. Por ejemplo, es posible que desees controlar un componente que no sea de React basado en el estado de React, establecer una conexión a un servidor, enviar reporte de analíticas cuando un componente aparece en la pantalla. A diferencia de los manejadores de eventos, que permiten manejar eventos concretos, los efectos te permiten ejecutar algún código después de renderizar. Úsalos para sincronizar tu componente con un sistema externo a React.

	Algunos efectos pueden "limpiarse" por sí mismos. Por ejemplo, un efecto que establece una conexión a un servidor de chat debería retornar una función de limpieza que le dice a React como desconectar su componente de ese servidor:
	Algunos efectos pueden "limpiarse" por sí mismos. Por ejemplo, un efecto que establece una conexión a un servidor de chat debería retornar una función de limpieza que le dice a React como desconectar tu componente de ese servidor:

	React proporciona una regla al linter para comprobar que hayas especificado correctamente las dependencias de tus efectos. Si olvidas de especificar `roomId` en la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.
	React proporciona una regla al linter para comprobar que hayas especificado correctamente las dependencias de tus efectos. Si olvidas especificar `roomId` en la lista de dependencias en el ejemplo anterior, el linter encontrará ese error automáticamente.

	Esta sección describe una API experimental que aún no se ha publicado en una version estable de React.
	Esta sección describe una API experimental que aún no se ha publicado en una versión estable de React.

	Esto no es lo ideal. Quieres volver a conectar con el chat únicamente si el `roomId` ha cambiado. Cambiar el `tema` no debería volver a conectarse con el chat! Mueve el código que lee el `tema` fuera de tu efecto hacia un evento de efecto:
	Esto no es lo ideal. Quieres volver a conectar con el chat únicamente si el `roomId` ha cambiado. ¡Cambiar el tema (mediante `theme`) no debería provocar una reconexión con el chat! Mueve el código que lee `theme` fuera de tu Efecto hacia un Evento de Efecto:

	showNotification('Conectado!', theme);
	showNotification('¡Conectado!', theme);


		React comes with built-in Hooks like `useState`, `useContext`, and `useEffect`. Sometimes, you’ll wish that there was a Hook for some more specific purpose: for example, to fetch data, to keep track of whether the user is online, or to connect to a chat room. To do this, you can create your own Hooks for your application's needs.
		React viene con hooks incorporados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario esta conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.

	React viene con hooks incorporados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario esta conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.
	React viene con Hooks integrados como `useState`, `useContext`, y `useEffect`. Algunas veces, desearás que existiera un hook para un propósito especifico: por ejemplo, para llamar datos, para saber si el usuario está conectado, o para conectarse a una sala de chat. Para realizar esto, puedes crear tus propios hooks de acuerdo a las necesidades de tu aplicación.

Translation escape hatches #669

Translation escape hatches #669

Conversation

Juamez commented Apr 30, 2023

mateoguzmana left a comment

Choose a reason for hiding this comment

Juamez commented May 2, 2023

mateoguzmana commented May 3, 2023 • edited Loading

carburo left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented May 3, 2023 • edited Loading

Size changes

📦 Next.js Bundle Analysis for react-dev

Juamez commented May 3, 2023

Juamez commented May 6, 2023

carburo left a comment

Choose a reason for hiding this comment

mateoguzmana commented May 3, 2023 •

edited

Loading

github-actions bot commented May 3, 2023 •

edited

Loading