diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 501c9f620..7ba0da32e 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.* Puedes agregar estado a cualquier componente y actualizarlo según sea necesario. En este capítulo, aprenderás a escribir componentes que manejen interacciones, actualicen tu 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 el estado](/learn/updating-objects-in-state) +* [Cómo actualizar un array en el estado](/learn/updating-arrays-in-state) -## Responding to events {/*responding-to-events*/} +## Responder 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 te permite agregar manejadores de eventos a tu JSX. Los manejadores de eventos son tus propias funciones que se activarán en respuesta a las interacciones del usuario, como hacer clic, pasar el mouse, enfocarse en las entradas de un 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. +Lee **[Responder a eventos](/learn/responding-to-events)** para aprender cómo agregar manejadores de eventos. -## State: a component's memory {/*state-a-components-memory*/} +## El 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. +Puedes agregar estado a un componente con un [`useState`](/reference/react/useState) Hook. Los *Hooks* son funciones especiales que permiten que tus componentes usen funciones de React (el estado es una de esas funciones). El Hook `useState` 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 te 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. +Lee **[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*/} +## Renderizado y confirmación {/*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 tus componentes se muestren en la pantalla, deben ser renderizados por React. Comprender los pasos de este proceso te ayudará a pensar en cómo se ejecuta tu 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: +Imagina que tus componentes son cocineros en la cocina, montando sabrosos platos a partir de los ingredientes. En este escenario, React es el camarero que hace las peticiones de los clientes y les trae sus pedidos. Este proceso de solicitud y servicio de UI tiene 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. **Desencadenamiento** de un renderizado (entrega del pedido del cliente a la cocina) +2. **Renderizado** del componente (preparación del pedido en la cocina) +3. **Confirmación** con el DOM (poner el pedido sobre la mesa) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Lee **[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*/} +## El 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 de React se comporta más como una instantánea. Establecerlo no cambia la variable de estado que ya tienes, sino que activa una nuevo renderizado. ¡Esto puede ser sorprendente al principio! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Solicitar un nuevo renderizado con 1. +console.log(count); // ¡Todavía 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 te 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(`Le dijiste ${message} a ${to}`); }, 5000); } return (