From cde3068e714c2d6f1ee11711da3e5de1f8c901f5 Mon Sep 17 00:00:00 2001 From: Joel Bello Date: Tue, 16 May 2023 21:05:05 -0400 Subject: [PATCH 1/5] translate: adding interactivity to spanish --- src/content/learn/adding-interactivity.md | 178 +++++++++++----------- src/sidebarLearn.json | 4 +- 2 files changed, 91 insertions(+), 91 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 501c9f620..386350829 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: Agregar interactividad --- -Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time. +Algunas cosas en la pantalla se actualizan en respuesta a la entrada del usuario. Por ejemplo, hacer clic en una galería de imágenes cambia la imagen activa. En React, los datos que cambian con el tiempo se denominan *estado.* Puede agregar estado a cualquier componente y actualizarlo según sea necesario. En este capítulo, aprenderá a escribir componentes que manejen interacciones, actualicen su estado y muestren resultados diferentes a lo largo del tiempo. -* [How to handle user-initiated events](/learn/responding-to-events) -* [How to make components "remember" information with state](/learn/state-a-components-memory) -* [How React updates the UI in two phases](/learn/render-and-commit) -* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot) -* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates) -* [How to update an object in state](/learn/updating-objects-in-state) -* [How to update an array in state](/learn/updating-arrays-in-state) +* [Cómo manejar eventos iniciados por el usuario](/learn/responding-to-events) +* [Cómo hacer que los componentes "recuerden" información con estado](/learn/state-a-components-memory) +* [Cómo React actualiza la interfaz de usuario en dos fases](/learn/render-and-commit) +* [Por qué el estado no se actualiza justo después de cambiarlo](/learn/state-as-a-snapshot) +* [Cómo poner en cola varias actualizaciones de estado](/learn/queueing-a-series-of-state-updates) +* [Cómo actualizar un objeto en estado](/learn/updating-objects-in-state) +* [Cómo actualizar un arreglo en el estado](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## Respondiendo a eventos {/*responding-to-events*/} -React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on. +React le permite agregar controladores de eventos a su JSX. Los controladores de eventos son sus propias funciones que se activarán en respuesta a las interacciones del usuario, como hacer clic, pasar el mouse, enfocarse en las entradas del formulario, etc. -Built-in components like ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers. +Lea **[Responder a eventos](/learn/responding-to-events)** para aprender cómo agregar controladores de eventos.. -## State: a component's memory {/*state-a-components-memory*/} +## Estado: la memoria de un componente {/*state-a-components-memory*/} -Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.* +Los componentes a menudo necesitan cambiar lo que aparece en la pantalla como resultado de una interacción. Escribir en el formulario debería actualizar el campo de entrada, hacer clic en "siguiente" en un carrusel de imágenes debería cambiar la imagen que se muestra, hacer clic en "comprar" pone un producto en el carrito de compras. Los componentes necesitan "recordar" cosas: el valor de entrada actual, la imagen actual, el carrito de compras. En React, este tipo de memoria específica del componente se llama *estado*. -You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it. +Puede agregar estado a un componente con un [`useState`](/reference/react/useState) Hook. Los *Hooks* son funciones especiales que permiten que sus componentes usen funciones de React (el estado es una de esas funciones). `useState` Hook te permite declarar una variable de estado. Toma el estado inicial y devuelve un par de valores: el estado actual y una función de establecimiento de estado que le permite actualizarlo. ```js const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); ``` -Here is how an image gallery uses and updates state on click: +Así es como una galería de imágenes usa y actualiza el estado al hacer clic: @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + de {sculpture.artist}

({index + 1} of {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Lea **[El estado: la memoria de un componente](/learn/state-a-components-memory)** para aprender a recordar un valor y actualizarlo en la interacción. -## Render and commit {/*render-and-commit*/} +## Renderizar y confirmar {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Antes de que sus componentes se muestren en la pantalla, deben ser renderizados por React. Comprender los pasos de este proceso lo ayudará a pensar en cómo se ejecuta su código y explicar su comportamiento. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Imagine que sus componentes son cocineros en la cocina, ensamblando sabrosos platos a partir de ingredientes. En este escenario, React es el camarero que presenta las solicitudes de los clientes y les trae sus pedidos. Este proceso de solicitud y servicio de UI consta de tres pasos: -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Desencadenante** un render (entregar el pedido del comensal a la cocina) +2. **Renderizando** el componente (preparando el pedido en la cocina) +3. **Confirmando** el DOM (colocando el pedido en la mesa) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Lea **[Renderizado y confirmación](/learn/render-and-commit)** para conocer el ciclo de vida de una actualización de la interfaz de usuario. -## State as a snapshot {/*state-as-a-snapshot*/} +## Estado como una instantánea {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +A diferencia de las variables regulares de JavaScript, el estado React se comporta más como una instantánea. Configurarlo no cambia la variable de estado que ya tiene, sino que activa una nueva representación. ¡Esto puede ser sorprendente al principio! ```js console.log(count); // 0 @@ -265,7 +265,7 @@ setCount(count + 1); // Request a re-render with 1 console.log(count); // Still 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Este comportamiento lo ayuda a evitar errores sutiles. Aquí hay una pequeña aplicación de chat. Intenta adivinar qué sucede si presionas "Enviar" primero y *luego* cambias el destinatario a Bob. ¿El nombre de quién aparecerá en la `alerta` cinco segundos después? @@ -274,19 +274,19 @@ import { useState } from 'react'; export default function Form() { const [to, setTo] = useState('Alice'); - const [message, setMessage] = useState('Hello'); + const [message, setMessage] = useState('Hola'); function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Usted le dijo ${message} a ${to}`); }, 5000); } return (