Translate createFactory.md

Author: NGHdeveloper

src/components/MDX/ExpandableCallout.tsx

@@ -18,7 +18,7 @@ interface ExpandableCalloutProps {
 
 const variantMap = {
   deprecated: {
-    title: 'Obsoleto',
+    title: 'Obsoleta',
     Icon: IconWarning,
     containerClasses: 'bg-red-5 dark:bg-red-60 dark:bg-opacity-20',
     textColor: 'text-red-50 dark:text-red-40',

src/content/learn/escape-hatches.md

@@ -41,12 +41,12 @@ export default function Counter() {
 
   function handleClick() {
     ref.current = ref.current + 1;
-    alert('¡Has hecho click ' + ref.current + ' veces!');
+    alert('¡Hiciste clic ' + ref.current + ' veces!');
   }
 
   return (
     <button onClick={handleClick}>
-      ¡Haz clic aquí!
+      ¡Hazme clic!
     </button>
   );
 }

src/content/learn/index.md

@@ -285,12 +285,12 @@ Puedes responder a eventos declarando funciones *controladoras de eventos* dentr
 ```js {2-4,7}
 function MyButton() {
   function handleClick() {
-    alert('¡Me presionaste!');
+    alert('¡Me hiciste clic!');
   }
 
   return (
     <button onClick={handleClick}>
-      Presióname
+      Hazme clic
     </button>
   );
 }
@@ -300,7 +300,7 @@ function MyButton() {
 
 ## Actualizar la pantalla {/*updating-the-screen*/}
 
-A menudo, querrás que tu componente "recuerde" alguna información y la muestre. Por ejemplo, quizá quieras contar el número de veces que se hace clic en un botón. Para lograrlo, añade *estado* a tu componente.
+A menudo, querrás que tu componente "recuerde" alguna información y la muestre. Por ejemplo, quizá quieras contar el número de veces que hiciste clic en un botón. Para lograrlo, añade *estado* a tu componente.
 
 Primero, importa [`useState`](/reference/react/useState) de React:
 
@@ -330,7 +330,7 @@ function MyButton() {
 
   return (
     <button onClick={handleClick}>
-      Presionado {count} veces
+      Hiciste clic {count} veces
     </button>
   );
 }
@@ -364,7 +364,7 @@ function MyButton() {
 
   return (
     <button onClick={handleClick}>
-      Presionado {count} veces
+      Hiciste clic {count} veces
     </button>
   );
 }
@@ -389,7 +389,7 @@ Los Hooks son más restrictivos que las funciones regulares. Solo puedes llamar
 
 ## Compartir datos entre componentes {/*sharing-data-between-components*/}
 
-En el ejemplo anterior, cada `MyButton` tenía su propio `count` independiente, y cuando se hacía clic en cada botón, solo el `count` del botón cliqueado cambiaba:
+En el ejemplo anterior, cada `MyButton` tenía su propio `count` independiente, y cuando hiciste clic en cada botón, solo el `count` del botón en hiciste clic cambiaba:
 
 <DiagramGroup>
 
@@ -484,7 +484,7 @@ Finalmente, cambia `MyButton` para que *lea* las props que le pasaste desde el c
 function MyButton({ count, onClick }) {
   return (
     <button onClick={onClick}>
-      Presionado {count} veces
+      Hiciste clic {count} veces
     </button>
   );
 }
@@ -518,7 +518,7 @@ export default function MyApp() {
 function MyButton({ count, onClick }) {
   return (
     <button onClick={onClick}>
-      Presionado {count} veces
+      Hiciste clic {count} veces
     </button>
   );
 }

src/content/learn/preserving-and-resetting-state.md

@@ -742,7 +742,7 @@ export default function MyComponent() {
       <MyTextField />
       <button onClick={() => {
         setCounter(counter + 1)
-      }}>Clicked {counter} times</button>
+      }}>Hiciste clic {counter} veces</button>
     </>
   );
 }

src/content/learn/referencing-values-with-refs.md

@@ -55,12 +55,12 @@ export default function Counter() {
 
   function handleClick() {
     ref.current = ref.current + 1;
-    alert('Has hecho clic ' + ref.current + ' veces!');
+    alert('Hiciste clic ' + ref.current + ' veces!');
   }
 
   return (
     <button onClick={handleClick}>
-      ¡Clic aquí!
+      ¡Hazme clic!
     </button>
   );
 }
@@ -197,7 +197,7 @@ export default function Counter() {
 
   return (
     <button onClick={handleClick}>
-      Has hecho {count} clics
+      Hiciste clic {count} veces
     </button>
   );
 }
@@ -224,7 +224,7 @@ export default function Counter() {
 
   return (
     <button onClick={handleClick}>
-      Has hecho {countRef.current} clics
+      Hiciste clic {countRef.current} veces
     </button>
   );
 }
@@ -579,7 +579,7 @@ button { display: block; margin: 10px; }
 
 #### Lee el último estado {/*read-the-latest-state*/}
 
-En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje se muestre. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra vez. A pesar de tus cambios, la alerta seguirá mostrando "hola" (que fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en que se presionó el botón).
+En este ejemplo, después de que presionas "Enviar", hay un pequeño retraso antes de que el mensaje se muestre. Escribe "hola", presiona Enviar, y luego rápidamente edita el input otra vez. A pesar de tus cambios, la alerta seguirá mostrando "hola" (que fue el valor del estado [en el momento](/learn/state-as-a-snapshot#state-over-time) en el que hiciste clic en el botón).
 
 Normalmente, este es el comportamiento que quieres en una aplicación. Sin embargo, en ocasiones quieres que algún código asíncrono lea la *última* versión de algún estado. ¿Se te ocurre alguna manera de hacer que la alerta muestre el texto *actual* del input en lugar del que estaba en el momento del clic?
 

src/content/learn/responding-to-events.md

@@ -45,12 +45,12 @@ Puedes hacer que muestre un mensaje cuando un usuario haga clic siguiendo estos
 ```js
 export default function Button() {
   function handleClick() {
-    alert('¡Me cliqueaste!');
+    alert('¡Me hiciste clic!');
   }
 
   return (
     <button onClick={handleClick}>
-      Cliquéame
+      Hazme clic
     </button>
   );
 }
@@ -73,15 +73,15 @@ Por otro lado, puedes definir un controlador de evento en línea en el JSX:
 
 ```jsx
 <button onClick={function handleClick() {
-  alert('¡Me cliqueaste!');
+  alert('¡Me hiciste clic!');
 }}>
 ```
 
 O, de manera más corta, usando una función flecha:
 
 ```jsx
 <button onClick={() => {
-  alert('¡Me cliqueaste!');
+  alert('¡Me hiciste clic!');
 }}>
 ```
 
@@ -109,14 +109,14 @@ Cuando escribes código en línea, la misma trampa se presenta de otra manera:
 Pasar código en línea así no lo ejecutará al hacer clic; lo ejecutará cada vez que el componente se renderice:
 
 ```jsx
-// Esta alerta se ejecuta cuando el componente se renderiza, ¡no cuando se hace clic!
-<button onClick={alert('¡Me cliqueaste!')}>
+// Esta alerta se ejecuta cuando el componente se renderiza, no cuando ¡hiciste clic!
+<button onClick={alert('¡Me hiciste clic!')}>
 ```
 
 Si quieres definir un controlador de evento en línea, envuélvelo en una función anónima de esta forma:
 
 ```jsx
-<button onClick={() => alert('¡Me cliqueaste!')}>
+<button onClick={() => alert('¡Me hiciste clic!')}>
 ```
 
 En lugar de ejecutar el código que está dentro cada vez que se renderiza, esto crea una función para que se llame más tarde.
@@ -132,7 +132,7 @@ En ambos casos, lo que quieres pasar es una función:
 
 ### Leyendo las props en controladores de eventos {/*reading-props-in-event-handlers*/}
 
-Como los controladores de eventos son declarados dentro de un componente, tienen acceso a las props del componente. Este es  un botón que, cuando recibe el clic, muestra una alerta con su prop `message`:
+Como los controladores de eventos son declarados dentro de un componente, tienen acceso a las props del componente. Este es  un botón que, cuando se hace clic, muestra una alerta con su prop `message`:
 
 <Sandpack>
 
@@ -332,7 +332,7 @@ Este `<div>` contiene dos botones. Tanto el `<div>` *como* cada botón tienen su
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('¡Cliqueaste el Toolbar!');
+      alert('¡Hiciste clic en la barra de herramientas!');
     }}>
       <button onClick={() => alert('¡Reproduciendo!')}>
         Reproducir película
@@ -386,7 +386,7 @@ function Button({ onClick, children }) {
 export default function Toolbar() {
   return (
     <div className="Toolbar" onClick={() => {
-      alert('¡Cliqueaste el Toolbar!');
+      alert('¡Hiciste clic en la barra de herramientas!');
     }}>
       <Button onClick={() => alert('¡Reproduciendo!')}>
         Reproducir película
@@ -436,7 +436,7 @@ En raros casos, puede que necesites capturar todos los eventos en elementos hijo
 Cada evento se propaga en tres fases: 
 
 1. Viaja hacia abajo, llamando a todos los controladores `onClickCapture`.
-2. Ejecuta el controlador `onClick` del elemento pulsado. 
+2. Ejecuta el controlador `onClick` del elemento en que se hace clic. 
 3. Viaja hacia arriba, llamando a todos los controladores `onClick`.
 
 Los eventos de captura son útiles para código como enrutadores o para analítica, pero probablemente no lo usarás en código de aplicaciones.
@@ -466,7 +466,7 @@ Si dependes de la propagación y es difícil rastrear cuales controladores se ej
 
 ### Evitar el comportamiento por defecto {/*preventing-default-behavior*/}
 
-Algunos eventos del navegador tienen comportamientos por defecto asociados a ellos. Por ejemplo, un evento submit de un `<form>`, que ocurre cuando se pulsa un botón que está dentro de él, por defecto recargará la página completa:
+Algunos eventos del navegador tienen comportamientos por defecto asociados a ellos. Por ejemplo, un evento submit de un `<form>`, que ocurre cuando se hace clic en un botón que está dentro de él, por defecto recargará la página completa:
 
 <Sandpack>
 

src/content/learn/separating-events-from-effects.md

@@ -31,7 +31,7 @@ Digamos que ya tienes el código implementado para ello, pero no estas seguro de
 
 ### Los controladores de eventos se ejecutan en respuesta a interacciones especificas {/*event-handlers-run-in-response-to-specific-interactions*/}
 
-Desde la perspectiva de un usuario, enviar un mensaje debería pasar *porque* específicamente se hizo click en el botón "Enviar". El usuario se molestará si tu envías su mensaje en otro momento o por cualquier otro motivo. Esta es la razón por la que enviar un mensaje debería de ser un controlador de Evento. Los controladores de eventos te permiten controlar interacciones especificas como por ejemplo, clicks:
+Desde la perspectiva del usuario, el envío de un mensaje debe producirse *porque* se hace clic en particular en el botón "Enviar". El usuario se enfadará bastante si envías su mensaje en cualquier otro momento o por cualquier otro motivo. Esta es la razón por la que enviar un mensaje debería ser un controlador de evento. Los controladores de eventos te permiten controlar interacciones específicas:
 
 ```js {4-6}
 function ChatRoom({ roomId }) {
@@ -44,7 +44,7 @@ function ChatRoom({ roomId }) {
   return (
     <>
       <input value={message} onChange={e => setMessage(e.target.value)} />
-      <button onClick={handleSendClick}>Send</button>;
+      <button onClick={handleSendClick}>Enviar</button>;
     </>
   );
 }

src/content/learn/tutorial-tic-tac-toe.md

@@ -709,7 +709,7 @@ Rellenemos el componente `Square` con una `X` al hacer clic en él. Declara una
 ```js {2-4,9}
 function Square({ value }) {
   function handleClick() {
-    console.log('¡haz hecho clic!');
+    console.log('¡hiciste clic!');
   }
 
   return (
@@ -723,15 +723,15 @@ function Square({ value }) {
 }
 ```
 
-Si haces clic en un cuadrado ahora, deberías ver un registro que dice `"¡haz hecho clic!"` en la pestaña *Consola* en la parte inferior de la sección *Navegador* de CodeSandbox. Al hacer clic en el cuadrado más de una vez, se registrará `"¡haz hecho clic!"` de nuevo. Los registros repetidos en la consola con el mismo mensaje no crearán más líneas en la consola. En su lugar, verás un contador incremental al lado de su primer registro `"¡haz hecho clic!"`.
+Si haces clic en un cuadrado ahora, deberías ver un registro que dice `"¡hiciste clic!"` en la pestaña *Consola* en la parte inferior de la sección *Navegador* de CodeSandbox. Al hacer clic en el cuadrado más de una vez, se registrará `"¡hiciste clic!"` de nuevo. Los registros repetidos en la consola con el mismo mensaje no crearán más líneas en la consola. En su lugar, verás un contador incremental al lado de su primer registro `"¡hiciste clic!"`.
 
 <Note>
 
 Si estás siguiendo este tutorial utilizando tu entorno de desarrollo local, debes abrir la consola de tu navegador. Por ejemplo, si usas el navegador Chrome, puedes ver la Consola con el método abreviado de teclado **Shift + Ctrl + J** (en Windows/Linux) u **Option + ⌘ + J** (en macOS).
 
 </Note>
 
-Como siguiente paso, deseas que el componente `Square` "recuerde" que se hizo clic y lo rellene con una marca "X". Para "recordar" cosas, los componentes usan *estado*.
+Como siguiente paso, deseas que el componente `Square` "recuerde" que hiciste clic y lo rellene con una marca "X". Para "recordar" cosas, los componentes usan *estado*.
 
 React proporciona una función especial llamada `useState` que puedes llamar desde tu componente para permitirle "recordar" cosas. Almacenemos el valor actual del `Square` en el estado, y cambiémoslo cuando se haga clic en `Square`.
 
@@ -776,7 +776,7 @@ export default function Board() {
 }
 ```
 
-Ahora cambia `Square` para mostrar una "X" cuando se haga clic. Reemplaza el controlador de evento `console.log("¡haz hecho clic!");` con `setValue('X');`. Ahora tu componente `Square` se ve así:
+Ahora cambia `Square` para mostrar una "X" cuando se haga clic. Reemplaza el controlador de evento `console.log("¡hiciste clic!");` con `setValue('X');`. Ahora tu componente `Square` se ve así:
 
 ```js {5}
 function Square() {

src/content/learn/you-might-not-need-an-effect.md

@@ -24,7 +24,7 @@ Los Efectos son una vía de escape del paradigma de React. Te permiten "salir" d
 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, qué botón se hizo clic). Por esta razón, generalmente se manejan los eventos del usuario en los controladores de eventos correspondientes.
+* **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.
 
 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.
 

src/content/reference/react-dom/client/createRoot.md

@@ -69,7 +69,7 @@ root.render(<App />);
 
 React mostrará `<App />` en la raíz (`root`) y se encargará de administrar el DOM dentro de ella.
 
-[Ver más ejemplos abajo](#usage)
+[Ver más ejemplos abajo.](#usage)
 
 #### Parámetros {/*root-render-parameters*/}
 
@@ -168,7 +168,7 @@ import { useState } from 'react';
 export default function App() {
   return (
     <>
-      <h1>Hello, world!</h1>
+      <h1>¡Hola, mundo!</h1>
       <Counter />
     </>
   );
@@ -178,7 +178,7 @@ function Counter() {
   const [count, setCount] = useState(0);
   return (
     <button onClick={() => setCount(count + 1)}>
-      You clicked me {count} times
+      Me hiciste clic {count} veces
     </button>
   );
 }

src/content/reference/react-dom/client/hydrateRoot.md

@@ -31,7 +31,7 @@ const root = hydrateRoot(domNode, reactNode);
 
 React se unirá al HTML que existe dentro de `domNode`, y se encargará de gestionar el DOM dentro de él. Una aplicación completamente construida con React normalmente sólo tendrá una llamada a `hydrateRoot` con su componente raíz.
 
-[Consulta los ejemplos anteriores.](#usage)
+[Ver más ejemplos abajo.](#usage)
 
 #### Parámetros {/*parameters*/}
 
@@ -140,7 +140,7 @@ Para hidratar tu aplicación, React "adjuntará" la lógica de tus componentes a
   El contenido HTML dentro de <div id="root">...</div>
   fue generado a partir de App por react-dom/server.
 -->
-<div id="root"><h1>Hola, mundo!</h1><button>Me has hecho clic <!-- -->0<!-- --> veces</button></div>
+<div id="root"><h1>Hola, mundo!</h1><button>Me hiciste clic <!-- -->0<!-- --> veces</button></div>
 ```
 
 ```js index.js active
@@ -170,7 +170,7 @@ function Counter() {
   const [count, setCount] = useState(0);
   return (
     <button onClick={() => setCount(count + 1)}>
-      Me has hecho clic {count} veces
+      Me hiciste clic {count} veces
     </button>
   );
 }

src/content/reference/react-dom/server/index.md

@@ -46,4 +46,4 @@ Estas APIs se eliminarán en una versión principal futura de React.
 
 </Deprecated>
 
-* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) renderiza un árbol de React a un [Node.js Readable stream.](https://nodejs.org/api/stream.html#readable-streams) (Obsoleto.)
+* [`renderToNodeStream`](/reference/react-dom/server/renderToNodeStream) renderiza un árbol de React a un [Node.js Readable stream.](https://nodejs.org/api/stream.html#readable-streams) (Obsoleta.)

src/content/reference/react/Component.md

@@ -947,7 +947,7 @@ class Button extends Component {
   };
 
   render() {
-    return <button className={this.props.color}>click me</button>;
+    return <button className={this.props.color}>Hazme clic</button>;
   }
 }
 ```