Add the traslation for Portals

content/docs/portals.md

@@ -4,21 +4,22 @@ title: Portals
 permalink: docs/portals.html
 ---
 
-Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
+Portals proporciona una opción de primera clase para renderizar hijos en un nodo DOM que existe por fuera de la jerarquía del DOM del Componente padre.
 
 ```js
 ReactDOM.createPortal(child, container)
 ```
 
-The first argument (`child`) is any [renderable React child](/docs/react-component.html#render), such as an element, string, or fragment. The second argument (`container`) is a DOM element.
+El primer argumento (`child`) es cualquier [hijo renderizable por React](/docs/react-component.html#render), como un elemento, cadena de caracteres o fragmento. El segundo argumento (`container`) es un elemento DOM.
 
-## Usage
+## Uso
 
-Normally, when you return an element from a component's render method, it's mounted into the DOM as a child of the nearest parent node:
+Normalmente, cuando retornas un elemento del método de render de un componente, este se monta en el DOM como un elemento hijo del nodo padre más cercano:
 
 ```js{4,6}
 render() {
-  // React mounts a new div and renders the children into it
+  // React crea un nuevo elemento y muestra al 
+  // componente hijo dentro de él.
   return (
     <div>
       {this.props.children}
@@ -27,34 +28,34 @@ render() {
 }
 ```
 
-However, sometimes it's useful to insert a child into a different location in the DOM:
+Sin embargo, a veces es útil insertar un hijo en una ubicación diferente en el DOM:
 
 ```js{6}
 render() {
-  // React does *not* create a new div. It renders the children into `domNode`.
-  // `domNode` is any valid DOM node, regardless of its location in the DOM.
+  // React *no* crea un nuevo div, convierte el hijo en `domNode`.
+  // `domNode` es cualquier nodo DOM válido, independientemente de su ubicación en el DOM.
   return ReactDOM.createPortal(
     this.props.children,
     domNode
   );
 }
 ```
 
-A typical use case for portals is when a parent component has an `overflow: hidden` or `z-index` style, but you need the child to visually "break out" of its container. For example, dialogs, hovercards, and tooltips.
+Un caso de uso típico de Portals es cuando un componente principal tiene un estilo `overflow: hidden` or `z-index`, pero necesita que el elemento "salga" visualmente de su contenedor. Por ejemplo, cuadros de diálogo, hovercards y tooltips.
 
-> Note:
+> Nota:
 >
-> When working with portals, remember that [managing keyboard focus](/docs/accessibility.html#programmatically-managing-focus) becomes very important.
+> Cuando trabajes con Portals, recuerde que [administrar el enfoque del teclado](/docs/accessibility.html#programmatically-managing-focus) es muy importante.
 >
-> For modal dialogs, ensure that everyone can interact with them by following the [WAI-ARIA Modal Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
+> Para los cuadros de dialogos, asegúrate de que todos puedan interactuar con ellos siguiendo las [Prácticas de creación modal de WAI-ARIA](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal).
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
+[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/yzMaBd)
 
-## Event Bubbling Through Portals
+## Propagación de eventos a través de Portales
 
-Even though a portal can be anywhere in the DOM tree, it behaves like a normal React child in every other way. Features like context work exactly the same regardless of whether the child is a portal, as the portal still exists in the *React tree* regardless of position in the *DOM tree*.
+Aunque un portal puede estar en cualquier parte del árbol DOM, se comporta como un hijo de React normal en cualquier otra forma. Las características como el contexto funcionan exactamente de la misma manera, independientemente de si el elemento hijo es un portal, ya que el portal aún existe en el *árbol de React* sin importar la posición en el *árbol DOM*.
 
-This includes event bubbling. An event fired from inside a portal will propagate to ancestors in the containing *React tree*, even if those elements are not ancestors in the *DOM tree*. Assuming the following HTML structure:
+Esto incluye propagación de eventos. Un evento activado desde adentro de un portal se propagará a los ancestros en el *árbol de React*, incluso si esos elementos no son ancestros en el *árbol DOM*. Asumiendo la siguiente estructura HTML:
 
 ```html
 <html>
@@ -65,10 +66,10 @@ This includes event bubbling. An event fired from inside a portal will propagate
 </html>
 ```
 
-A `Parent` component in `#app-root` would be able to catch an uncaught, bubbling event from the sibling node `#modal-root`.
+Un componente `Parent` en `#app-root` sería capaz de detectar un evento de propagación no capturado desde el nodo hermano `#modal-root`.
 
 ```js{28-31,42-49,53,61-63,70-71,74}
-// These two containers are siblings in the DOM
+// Estos dos contenedores son hermanos en el DOM.
 const appRoot = document.getElementById('app-root');
 const modalRoot = document.getElementById('modal-root');
 
@@ -79,14 +80,13 @@ class Modal extends React.Component {
   }
 
   componentDidMount() {
-    // The portal element is inserted in the DOM tree after
-    // the Modal's children are mounted, meaning that children
-    // will be mounted on a detached DOM node. If a child
-    // component requires to be attached to the DOM tree
-    // immediately when mounted, for example to measure a
-    // DOM node, or uses 'autoFocus' in a descendant, add
-    // state to Modal and only render the children when Modal
-    // is inserted in the DOM tree.
+    // El elemento del portal se inserta en el árbol DOM después de
+    // que se montan los hijos del Modal, lo que significa que los hijos
+    // se montarán en un nodo DOM separado. Si un componente hijo
+    // requiere estar conectado inmediatamente cuando se monta al árbol del DOM
+    // por ejemplo, para medir un nodo DOM, o usar 'autoFocus' en un descendiente,
+    // agregue el estado a Modal y renderice solo a los hijos 
+    // cuando se inserta Modal en el árbol DOM.
     modalRoot.appendChild(this.el);
   }
 
@@ -110,9 +110,9 @@ class Parent extends React.Component {
   }
 
   handleClick() {
-    // This will fire when the button in Child is clicked,
-    // updating Parent's state, even though button
-    // is not direct descendant in the DOM.
+    // Esto se activará cuando el botón en el Hijo sea cliqueado,
+    // actualizando el estado del Padre,
+    // aunque el botón no sea descendiente directo en el DOM.
     this.setState(state => ({
       clicks: state.clicks + 1
     }));
@@ -137,8 +137,8 @@ class Parent extends React.Component {
 }
 
 function Child() {
-  // The click event on this button will bubble up to parent,
-  // because there is no 'onClick' attribute defined
+  // El evento de clic en este botón se convertirá en principal, 
+  // porque no hay un atributo 'onClick' definido.
   return (
     <div className="modal">
       <button>Click</button>
@@ -149,6 +149,6 @@ function Child() {
 ReactDOM.render(<Parent />, appRoot);
 ```
 
-[**Try it on CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
+[**Pruébalo en CodePen**](https://codepen.io/gaearon/pen/jGBWpE)
 
-Catching an event bubbling up from a portal in a parent component allows the development of more flexible abstractions that are not inherently reliant on portals. For example, if you render a `<Modal />` component, the parent can capture its events regardless of whether it's implemented using portals.
+La captura de un evento que sale de un portal en un componente padre permite el desarrollo de abstracciones más flexibles que no dependen intrínsecamente de los portales. Por ejemplo, si renderizas un componente `<Modal />`, el padre puede capturar sus eventos sin importar si es implementado usando portales.