Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Translate createPortal to spanish #619

Closed
wants to merge 4 commits into from
Closed

Translate createPortal to spanish #619

wants to merge 4 commits into from

Conversation

Tomashanahan
Copy link

@Tomashanahan Tomashanahan commented Jan 2, 2023 •
edited
Loading

#500

React DOM APIs > createPortal

@github-actions github-actions bot added the beta label Jan 2, 2023
@carburo carburo mentioned this pull request Jan 2, 2023
Open
carburo
carburo requested changes Mar 23, 2023
View reviewed changes
Copy link
Member

@carburo carburo left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

¡Hola, @Tomashanahan! ¡Gracias por tu contribución! No he terminado de revisar porque he notado algunas cuestiones que se repiten en varios lugares del documento y cabría revisarlas primero.

  • El uso de «usted» para la segunda persona del singular. Para mantener la consistencia en la documentación y porque es menos propenso a ambigüedades hemos optado por usar siempre «tú» (Puedes consultar nuestra guía de traducción para otros aspectos como este).
  • Uso de «representación» en lugar de «renderizado» para traducir «rendering». En un contexto general sería aceptable, pero en este caso es un concepto específico de React que debe mantener una denominación consistente.

beta/src/content/reference/react-dom/createPortal.md
document.body
)}
</div>
);
}
```

React will put the DOM nodes for <CodeStep step={1}>the JSX you passed</CodeStep> inside of the <CodeStep step={2}>DOM node you provided</CodeStep>. Without a portal, the second `<p>` would be placed inside the parent `<div>`, but the portal "teleported" it into the [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
React pondrá los nodos del DOM en <CodeStep step={1}>el JSX que pasaste</CodeStep> dentro del <CodeStep step={2}>nodo del DOM que proporcionó</CodeStep>. Sin un portal, el segundo `<p>` sería colocado dentro del padre `<div>`, pero el portal lo "teleported" al [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
React pondrá los nodos del DOM en <CodeStep step={1}>el JSX que pasaste</CodeStep> dentro del <CodeStep step={2}>nodo del DOM que proporcionó</CodeStep>. Sin un portal, el segundo `<p>` sería colocado dentro del padre `<div>`, pero el portal lo "teleported" al [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)
React pondrá los nodos del DOM en <CodeStep step={1}>el JSX que pasaste</CodeStep> dentro del <CodeStep step={2}>nodo del DOM que proporcionó</CodeStep>. Sin un portal, el segundo `<p>` sería colocado dentro del padre `<div>`, pero el portal lo "teletransportará" al [`document.body`:](https://developer.mozilla.org/en-US/docs/Web/API/Document/body)

beta/src/content/reference/react-dom/createPortal.md
@@ -106,30 +106,30 @@ export default function MyComponent() {

</Sandpack>

Notice how the second paragraph visually appears outside the parent `<div>` with the border. If you inspect the DOM structure with developer tools, you can confirm that the second `<p>` got placed direcly into the `<body>`:
Observe cómo el segundo párrafo aparece visualmente fuera del padre `<div>` sin el borde. Si inspecciona la estructura del DOM con las herramientas de desarrollador, puedes confirmar que el segundo `<p>` se colocó directamente en el `<body>`:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Observe cómo el segundo párrafo aparece visualmente fuera del padre `<div>` sin el borde. Si inspecciona la estructura del DOM con las herramientas de desarrollador, puedes confirmar que el segundo `<p>` se colocó directamente en el `<body>`:
Observa cómo el segundo párrafo aparece visualmente fuera del padre `<div>` sin el borde. Si inspeccionas la estructura del DOM con las herramientas de desarrollador, puedes confirmar que el segundo `<p>` se colocó directamente en el `<body>`:

beta/src/content/reference/react-dom/createPortal.md

You can use a portal to create a modal dialog that floats above the rest of the page, even if the component that summons the dialog is inside a container with `overflow: hidden` or other styles that interfere with the dialog.
Puede usar un portal para crear un diálogo con un modal que flote sobre el resto de la página, incluso si el componente que convoca el diálogo está dentro de un contenedor con `overflow: hidden` u otros estilos que interfieren con el diálogo.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Puede usar un portal para crear un diálogo con un modal que flote sobre el resto de la página, incluso si el componente que convoca el diálogo está dentro de un contenedor con `overflow: hidden` u otros estilos que interfieren con el diálogo.
Puedes usar un portal para crear un diálogo con un modal que flote sobre el resto de la página, incluso si el componente que convoca el diálogo está dentro de un contenedor con `overflow: hidden` u otros estilos que interfieren con el diálogo.

beta/src/content/reference/react-dom/createPortal.md
@@ -234,29 +234,29 @@ export default function ModalContent({ onClose }) {

<Pitfall>

It's important to make sure that your app is accessible when using portals. For instance, you may need to manage keyboard focus so that the user can move the focus in and out of the portal in a natural way.
Es importante asegurarse de que su aplicación sea accesible cuando use portales. Por ejemplo, es posible que deba administrar el enfoque del teclado para que el usuario pueda mover el enfoque dentro y fuera del portal de forma natural.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Es importante asegurarse de que su aplicación sea accesible cuando use portales. Por ejemplo, es posible que deba administrar el enfoque del teclado para que el usuario pueda mover el enfoque dentro y fuera del portal de forma natural.
Es importante asegurarse de que tu aplicación sea accesible cuando use portales. Por ejemplo, es posible que deba administrar el enfoque del teclado para que el usuario pueda mover el enfoque dentro y fuera del portal de forma natural.

beta/src/content/reference/react-dom/createPortal.md

Follow the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) when creating modals. If you use a community package, ensure that it is accessible and follows these guidelines.
Siga el [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) al crear modales. Si utiliza un paquete comunitario, asegúrese de que sea accesible y siga estas pautas.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Siga el [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) al crear modales. Si utiliza un paquete comunitario, asegúrese de que sea accesible y siga estas pautas.
Sigue el [WAI-ARIA Modal Authoring Practices](https://www.w3.org/WAI/ARIA/apg/#dialog_modal) al crear modales. Si utilizas un paquete comunitario, asegúrate de que sea accesible y siga estas pautas.

beta/src/content/reference/react-dom/createPortal.md

Portals can be useful if your React root is only part of a static or server-rendered page that isn't built with React. For example, if your page is built with a server framework like Rails or PHP, you can create areas of interactivity within static areas such as sidebars. Compared with having [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) portals let you treat the app as a single React tree with shared state even though its parts render to different parts of the DOM.
Los portales pueden ser útiles si su raíz de React es solo parte de una página estática o renderizada por un servidor que no está construida con React. Por ejemplo, si su página está construida con un framework de servidor como Rails o PHP, puede crear áreas interactivas dentro de áreas estáticas como barras laterales. Comparado con tener [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) Los portales le permiten tratar la aplicación como un solo árbol React con estado compartido, aunque sus partes se representen en diferentes partes del DOM.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Los portales pueden ser útiles si su raíz de React es solo parte de una página estática o renderizada por un servidor que no está construida con React. Por ejemplo, si su página está construida con un framework de servidor como Rails o PHP, puede crear áreas interactivas dentro de áreas estáticas como barras laterales. Comparado con tener [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) Los portales le permiten tratar la aplicación como un solo árbol React con estado compartido, aunque sus partes se representen en diferentes partes del DOM.
Los portales pueden ser útiles si tu raíz de React es solo parte de una página estática o renderizada por un servidor que no está construida con React. Por ejemplo, si tu página está construida con un framework de servidor como Rails o PHP, puedes crear áreas interactivas dentro de áreas estáticas como barras laterales. Comparado con tener [multiple separate React roots,](/reference/react-dom/client/createRoot#rendering-a-page-partially-built-with-react) Los portales te permiten tratar la aplicación como un solo árbol React con estado compartido, aunque sus partes se rendericen en diferentes partes del DOM.

beta/src/content/reference/react-dom/createPortal.md

You can also use a portal to manage the content of a DOM node that's managed outside of React. For example, suppose you're integrating with a non-React map widget and you want to render React content inside a popup.
También puede usar un portal para administrar el contenido de un nodo del DOM que se administra fuera de React. Por ejemplo, suponga que se está integrando con un widget de un mapa que no es de React y desea mostrar el contenido de React dentro de una ventana emergente.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
También puede usar un portal para administrar el contenido de un nodo del DOM que se administra fuera de React. Por ejemplo, suponga que se está integrando con un widget de un mapa que no es de React y desea mostrar el contenido de React dentro de una ventana emergente.
También puedes usar un portal para administrar el contenido de un nodo del DOM que se administra fuera de React. Por ejemplo, supón que te estás integrando con un widget de un mapa que no es de React y desea mostrar el contenido de React dentro de una ventana emergente.

beta/src/content/reference/react-dom/createPortal.md

To do this, declare a `popupContainer` state variable to store the DOM node you're going to render into:
Para ello, declara un `popupContainer` variable de estado para almacenar el nodo del DOM en el que se va a representar:
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
Para ello, declara un `popupContainer` variable de estado para almacenar el nodo del DOM en el que se va a representar:
Para ello, declara una variable de estado `popupContainer` para almacenar el nodo del DOM en el que se va a renderizar:

@carburo
Copy link
Member

carburo commented Apr 27, 2023

¡Hola, @Tomashanahan ! ¿Podrías confirmarme que ya no estás trabajando en este PR para asignárselo a alguien más que haga los cambios necesarios para terminarlo?

@carburo
Copy link
Member

carburo commented May 1, 2023

La página vuelve a estar disponible para que alguien más finalice la traducción.

@carburo carburo closed this May 1, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@carburo carburo carburo requested changes

Assignees
No one assigned
Labels
beta
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@Tomashanahan @carburo