From 6b6c855296288f88bece6bc3795ca20fb226e738 Mon Sep 17 00:00:00 2001 From: Samar Jaffal Date: Mon, 31 Oct 2022 00:13:58 -0400 Subject: [PATCH] added translation for state a components memory (#586) * added translation for state a components memory * fixed translation errors * Detalles agregados Co-authored-by: Vicenciomf1 <101673305+Vicenciomf1@users.noreply.github.com> --- .../learn/state-a-components-memory.md | 654 +++++++++--------- 1 file changed, 327 insertions(+), 327 deletions(-) diff --git a/beta/src/content/learn/state-a-components-memory.md b/beta/src/content/learn/state-a-components-memory.md index 0ab9e74c2..7bc05fe50 100644 --- a/beta/src/content/learn/state-a-components-memory.md +++ b/beta/src/content/learn/state-a-components-memory.md @@ -1,25 +1,25 @@ --- -title: "State: A Component's Memory" +title: "El Estado: La memoria un componente" --- -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" should put 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 se muestra en pantalla como resultado de una interacción. Escribir dentro de un formulario debería actualizar el campo de texto, hacer clic en "siguiente" en un carrusel de imágenes debería cambiar la imagen que es mostrada; hacer click en un botón para comprar un producto debería actualizar el carrito de compras. En los ejemplos anteriores los componentes deben "recordar" cosas: el campo de texto, la imagen actual, el carrito de compras. En React, a este tipo de memoria de los componentes se le conoce como estado. -* How to add a state variable with the [`useState`](/apis/react/useState) Hook -* What pair of values the `useState` Hook returns -* How to add more than one state variable -* Why state is called local +* Cómo agregar una variable de estado con el Hook de [`useState`](/apis/react/useState) +* Qué par de valores devuelve el hook de `useState` +* Cómo agregar más de una variable de estado +* Por qué se le llama local al estado -## When a regular variable isn’t enough {/*when-a-regular-variable-isnt-enough*/} +## Cuando una variable regular no es suficiente {/*when-a-regular-variable-isnt-enough*/} -Here's a component that renders a sculpture image. Clicking the "Next" button should show the next sculpture by changing the `index` to `1`, then `2`, and so on. However, this **won't work** (you can try it!): +Aquí hay un componente que renderiza una imagen de una escultura. Al hacer clic en el botón "Siguiente", debería mostrarse la siguiente escultura cambiando el índice `index` a `1`, luego a `2`, y así sucesivamente. Sin embargo, esto **no funcionará** (¡puedes intentarlo!): @@ -37,14 +37,14 @@ export default function Gallery() { return ( <>

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

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

-The `handleClick` event handler is updating a local variable, `index`. But two things prevent that change from being visible: +El controlador de eventos `handleClick` está actualizando una variable local, `index`. Pero dos cosas impiden que ese cambio sea visible: -1. **Local variables don't persist between renders.** When React renders this component a second time, it renders it from scratch—it doesn't consider any changes to the local variables. -2. **Changes to local variables won't trigger renders.** React doesn't realize it needs to render the component again with the new data. +1. **Las variables locales no persisten entre renderizaciones.** Cuando React renderiza este componente por segunda vez, lo hace desde cero, no considera ningún cambio en las variables locales. +2. **Los cambios en las variables locales no activarán renderizaciones.** React no se da cuenta de que necesita renderizar el componente nuevamente con los nuevos datos. -To update a component with new data, two things need to happen: +Para actualizar un componente con datos nuevos, deben pasar las siguientes dos cosas: -1. **Retain** the data between renders. -2. **Trigger** React to render the component with new data (re-rendering). +1. **Conservar** los datos entre renderizaciones. +2. **Provocar** que React renderice el componente con nuevos datos (re-renderizado). -The [`useState`](/apis/react/useState) Hook provides those two things: +El Hook de [`useState`](/apis/react/useState) ofrece dos cosas: -1. A **state variable** to retain the data between renders. -2. A **state setter function** to update the variable and trigger React to render the component again. +1. Una **variable de estado** para mantener los datos entre renderizados. +2. Una **función que setea el estado** para actualizar la variable y provocar que React renderice el componente nuevamente. -## Adding a state variable {/*adding-a-state-variable*/} +## Agregar una variable de estado {/*adding-a-state-variable*/} -To add a state variable, import `useState` from React at the top of the file: +Para agregar una variable de estado, debemos importar el `useState` de React al inicio del archivo: ```js import { useState } from 'react'; ``` -Then, replace this line: +Luego, reemplazamos esta línea: ```js let index = 0; ``` -with +con ```js const [index, setIndex] = useState(0); ``` -`index` is a state variable and `setIndex` is the setter function. +`index` es una variable de estado y `setIndex` es la función que setea el estado. -> The `[` and `]` syntax here is called [array destructuring](https://javascript.info/destructuring-assignment) and it lets you read values from an array. The array returned by `useState` always has exactly two items. +> La sintaxis de `[` y `]` se le conoce cómo [desestructuración de un array](https://javascript.info/destructuring-assignment) y permite leer valores de un array. El array retornado por `useState` siempre contará con exactamente dos valores. -This is how they work together in `handleClick`: +Así es como funcionan juntos en el `handleClick`: ```js function handleClick() { @@ -198,7 +198,7 @@ function handleClick() { } ``` -Now clicking the "Next" button switches the current sculpture: +Ahora al hacer clic en el botón "Siguiente" cambia la escultura actual: @@ -217,14 +217,14 @@ export default function Gallery() { return ( <>

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

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

-### Meet your first Hook {/*meet-your-first-hook*/} +### Conoce tu primer Hook {/*meet-your-first-hook*/} -In React, `useState`, as well as any other function starting with "`use`", is called a Hook. +En React, `useState`, así como cualquier otra función que empiece con "`use`", se le conoce como Hook. -*Hooks* are special functions that are only available while React is [rendering](/learn/render-and-commit#step-1-trigger-a-render) (which we'll get into in more detail on the next page). They let you "hook into" different React features. +Los *Hooks* son funciones especiales que sólo están disponibles mientras React está [renderizando](/learn/render-and-commit#step-1-trigger-a-render) (algo que veremos con más detalle en la página siguiente). Los Hooks permiten "engancharnos" a diferentes características de React. -State is just one of those features, but you will meet the other Hooks later. +El estado es solo una de esas características, pero conoceremos los otros Hooks más adelante. -**Hooks—functions starting with `use`—can only be called at the top level of your components or [your own Hooks.](/learn/reusing-logic-with-custom-hooks)** You can't call Hooks inside conditions, loops, or other nested functions. Hooks are functions, but it's helpful to think of them as unconditional declarations about your component's needs. You "use" React features at the top of your component similar to how you "import" modules at the top of your file. +**Las funciones-Hook que empiecen con `use` deben ser solo llamadas en el nivel superior de los componentes o [en tus propios Hooks.](/learn/reusing-logic-with-custom-hooks)** No podemos usar Hooks dentro de condicionales, bucles, u otras funciones anidadas. Los Hooks son funciones, pero es útil pensar en ellos como declaraciones independientes de las necesidades de nuestro componente. Las funciones de React se "usan" en la parte superior del componente de manera similar a cómo se "importan" módulos en la parte superior de un archivo. -### Anatomy of `useState` {/*anatomy-of-usestate*/} +### Anatomía del `useState` {/*anatomy-of-usestate*/} -When you call [`useState`](/apis/react/useState), you are telling React that you want this component to remember something: +Cuando llamamos al [`useState`](/apis/react/useState), le estamos diciendo a React que debe recordar algo: ```js const [index, setIndex] = useState(0); ``` -In this case, you want React to remember `index`. +En este caso, queremos que React recuerde el `index`. -> The convention is to name this pair like `const [something, setSomething]`. You could name it anything you like, but conventions make things easier to understand across projects. +> La convención es nombrar estas dos variables como `const [algo, setAlgo]`. Podemos nombrarlo como queramos, pero mantener las convenciones hacen que las cosas sean más fáciles de entender en todos los proyectos. -The only argument to `useState` is the **initial value** of your state variable. In this example, the `index`'s initial value is set to `0` with `useState(0)`. +El único argumento para `useState` es el **valor inicial** de su variable de estado. En este ejemplo, el valor inicial de `index` se establece en `0` con `useState(0)`. -Every time your component renders, `useState` gives you an array containing two values: +Cada vez que el componente se renderiza, el `useState` devuelve un *array* que contiene dos valores: -1. The **state variable** (`index`) with the value you stored. -2. The **state setter function** (`setIndex`) which can update the state variable and trigger React to render the component again. +1. La **variable de estado** (`index`) con el valor que almacenaste. +2. La **función que establece el estado** (`setIndex`) que puede actualizar la variable de estado y alertar a React para que renderice el componente nuevamente. -Here's how that happens in action: +Así es como sucede en acción: ```js const [index, setIndex] = useState(0); ``` -1. **Your component renders the first time.** Because you passed `0` to `useState` as the initial value for `index`, it will return `[0, setIndex]`. React remembers `0` is the latest state value. -2. **You update the state.** When a user clicks the button, it calls `setIndex(index + 1)`. `index` is `0`, so it's `setIndex(1)`. This tells React to remember `index` is `1` now and triggers another render. -3. **Your component's second render.** React still sees `useState(0)`, but because React *remembers* that you set `index` to `1`, it returns `[1, setIndex]` instead. -4. And so on! +1. **Tu componente se renderiza por primera vez.** Debido a que pasamos `0` a `useState` como valor inicial para `index`, esto devolverá `[0, setIndex]`. React recuerda que `0` es el último valor de estado. +2. **Actualizas el estado.** Cuando un usuario hace clic en el botón, llama a `setIndex(index + 1)`. `index` es `0`, por lo tanto es `setIndex(1)`. Esto le dice a React que recuerde que `index` es `1` ahora y ejecuta otro renderizado. +3. **El componente se renderiza por segunda vez.** React todavía ve `useState(0)`, pero debido a que React *recuerda* que estableció `index` en `1`, devuelve `[1, setIndex]` en su lugar. +4. ¡Y así sucesivamente! -## Giving a component multiple state variables {/*giving-a-component-multiple-state-variables*/} +## Colocar múltiples variables de estado a un componente {/*giving-a-component-multiple-state-variables*/} -You can have as many state variables of as many types as you like in one component. This component has two state variables, a number `index` and a boolean `showMore` that's toggled when you click "Show details": +Podemos tener más de una variable de estado de diferentes tipos en un componente. Este componente tiene dos variables de estado, un `index` numérico y un `showMore` booleano que se activa al hacer clic en "Mostrar detalles": @@ -401,17 +401,17 @@ export default function Gallery() { return ( <>

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

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

{showMore &&

{sculpture.description}

} -It is a good idea to have multiple state variables if their state is unrelated, like `index` and `showMore` in this example. But if you find that you often change two state variables together, it might be better to combine them into a single one. For example, if you have a form with many fields, it's more convenient to have a single state variable that holds an object than state variable per field. [Choosing the State Structure](/learn/choosing-the-state-structure) has more tips on this. +Es una buena idea tener múltiples variables de estado si no se encuentran relacionadas entre sí, como `index` y `showMore` en este ejemplo. Pero si encontramso que a menudo cambiamos dos variables de estado juntas, podría ser mejor combinarlas en una sola. Por ejemplo, si tenemos un formulario con muchos campos, es más conveniente tener una única variable de estado que contenga un objeto que una variable de estado por campo. [Elegir la estructura del estado](/learn/choosing-the-state-structure) tiene más consejos sobre esto. - + -You might have noticed that the `useState` call does not receive any information about *which* state variable it refers to. There is no "identifier" that is passed to `useState`, so how does it know which of the state variables to return? Does it rely on some magic like parsing your functions? The answer is no. +Es posible que hayas notado que la llamada a `useState` no recibe ninguna información sobre *a qué* variable de estado se refiere. No hay un "identificador" que se pase a `useState`, entonces, ¿cómo sabe cuál de las variables de estado debería devolver? ¿Se basa en algún tipo de magia para esto? La respuesta es no. -Instead, to enable their concise syntax, Hooks **rely on a stable call order on every render of the same component.** This works well in practice because if you follow the rule above ("only call Hooks at the top level"), Hooks will always be called in the same order. Additionally, a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) catches most mistakes. +En cambio, para habilitar su sintaxis concisa, los Hooks **se basan en un orden de llamada estable en cada representación del mismo componente.** Esto funciona bien en la práctica porque si seguimos la regla anterior ("solo llamar a los Hooks en el nivel superior"), los Hooks siempre se llamarán en el mismo orden. Además, este [complemento para el linter] (https://www.npmjs.com/package/eslint-plugin-react-hooks) detecta la mayoría de los errores. -Internally, React holds an array of state pairs for every component. It also maintains the current pair index, which is set to `0` before rendering. Each time you call `useState`, React gives you the next state pair and increments the index. You can read more about this mechanism in [React Hooks: Not Magic, Just Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) +Internamente, React mantiene un *array* de pares de estados para cada componente. También mantiene el índice de par actual, el cual se establece en `0` antes de ser renderizado. Cada vez que llamamos a `useState`, React devuelve el siguiente par de estados e incrementa el índice. Puedes leer más sobre este mecanismo en [React Hooks: No es magia, sólo son Arrays.](https://medium.com/@ryardley/react-hooks-not-magic-just-arrays-cd4f1857236e) -This example **doesn't use React** but it gives you an idea of how `useState` works internally: +Este ejemplo **no usa React** pero nos da una idea de cómo funciona `useState` internamente: @@ -534,37 +534,37 @@ This example **doesn't use React** but it gives you an idea of how `useState` wo let componentHooks = []; let currentHookIndex = 0; -// How useState works inside React (simplified). +// Cómo funciona useState dentro de React (simplificado). function useState(initialState) { let pair = componentHooks[currentHookIndex]; if (pair) { - // This is not the first render, - // so the state pair already exists. - // Return it and prepare for next Hook call. + // Este no es el primer render, + // entonces el par de estados ya existe. + // Devuélvelo y prepárate para la próxima llamada del Hook. currentHookIndex++; return pair; } - // This is the first time we're rendering, - // so create a state pair and store it. + // Esta es la primera vez que estamos renderizando, + // así que crea un array de dos posiciones y guárdalo. pair = [initialState, setState]; function setState(nextState) { - // When the user requests a state change, - // put the new value into the pair. + // Cuando el usuario solicita un cambio de estado, + // guarda el nuevo valor en el par. pair[0] = nextState; updateDOM(); } - // Store the pair for future renders - // and prepare for the next Hook call. + // Guarda el par para futuros renderizados + // y se prepara para la siguiente llamada del Hook. componentHooks[currentHookIndex] = pair; currentHookIndex++; return pair; } function Gallery() { - // Each useState() call will get the next pair. + // Cada llamada a useState() retornará el siguiente par. const [index, setIndex] = useState(0); const [showMore, setShowMore] = useState(false); @@ -577,14 +577,14 @@ function Gallery() { } let sculpture = sculptureList[index]; - // This example doesn't use React, so - // return an output object instead of JSX. + // Este ejemplo no usa React, entonces + // devuelve un objeto como resultado en lugar de JSX. return { onNextClick: handleNextClick, onMoreClick: handleMoreClick, - header: `${sculpture.name} by ${sculpture.artist}`, + header: `${sculpture.name} por ${sculpture.artist}`, counter: `${index + 1} of ${sculptureList.length}`, - more: `${showMore ? 'Hide' : 'Show'} details`, + more: `${showMore ? 'Ocultar' : 'Mostrar'} detalles`, description: showMore ? sculpture.description : null, imageSrc: sculpture.url, imageAlt: sculpture.alt @@ -592,13 +592,13 @@ function Gallery() { } function updateDOM() { - // Reset the current Hook index - // before rendering the component. + // Restablece el índice del Hook actual + // antes de renderizar el componente. currentHookIndex = 0; let output = Gallery(); - // Update the DOM to match the output. - // This is the part React does for you. + // Actualiza el DOM para que coincida con el resultado. + // Esta es la parte que React hace por ti. nextButton.onclick = output.onNextClick; header.textContent = output.header; moreButton.onclick = output.onMoreClick; @@ -618,87 +618,87 @@ let header = document.getElementById('header'); let moreButton = document.getElementById('moreButton'); let description = document.getElementById('description'); let image = document.getElementById('image'); -let sculptureList = [{ +export const sculptureList = [{ name: 'Homenaje a la Neurocirugía', artist: 'Marta Colvin Andrade', - description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.', + description: 'Aunque Colvin es predominantemente conocida por temas abstractos que aluden a símbolos prehispánicos, esta gigantesca escultura, un homenaje a la neurocirugía, es una de sus obras de arte público más reconocibles.', url: 'https://i.imgur.com/Mx7dA2Y.jpg', - alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.' + alt: 'Una estatua de bronce de dos manos cruzadas sosteniendo delicadamente un cerebro humano con la punta de sus dedos.' }, { name: 'Floralis Genérica', artist: 'Eduardo Catalano', - description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.', + description: 'Esta enorme flor plateada (75 pies o 23 m) se encuentra en Buenos Aires. Está diseñado para moverse, cerrando sus pétalos por la tarde o cuando soplan fuertes vientos y abriéndolos por la mañana.', url: 'https://i.imgur.com/ZF6s192m.jpg', alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.' }, { name: 'Eternal Presence', artist: 'John Woodrow Wilson', - description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."', + description: 'Wilson era conocido por su preocupación por la igualdad y la justicia social, así como por las cualidades esenciales y espirituales de la humanidad. Esta enorme pieza de bronce (de 7 pies o 2,13 metros) representa lo que él describió como "una presencia negra simbólica impregnada de un sentido de humanidad universal".', url: 'https://i.imgur.com/aTtVpES.jpg', - alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.' + alt: 'La escultura que representa una cabeza humana parece omnipresente y solemne. Irradia calma y serenidad.' }, { name: 'Moai', - artist: 'Unknown Artist', - description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.', + artist: 'Artista Desconocido', + description: 'Ubicados en la Isla de Pascua, hay 1000 moai, o estatuas monumentales existentes, creadas por los primeros Rapa Nui, que algunos creen que representaban a ancestros deificados.', url: 'https://i.imgur.com/RCwLEoQm.jpg', - alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.' + alt: 'Tres bustos monumentales de piedra con las cabezas desproporcionadamente grandes con rostros sombríos.' }, { name: 'Blue Nana', artist: 'Niki de Saint Phalle', - description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.', + description: 'Las Nanas son criaturas triunfantes, símbolos de feminidad y maternidad. En un principio, Saint Phalle utilizaba telas y objetos encontrados para las Nanas, y más tarde introdujo el poliéster para conseguir un efecto más vibrante.', url: 'https://i.imgur.com/Sd1AgUOm.jpg', - alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.' + alt: 'Una gran escultura de mosaico de una caprichosa figura femenina bailando con un colorido traje que emana alegría.' }, { name: 'Ultimate Form', artist: 'Barbara Hepworth', - description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.', + description: 'Esta escultura abstracta de bronce es parte de la serie The Family of Man ubicada en Yorkshire Sculpture Park. Hepworth optó por no crear representaciones literales del mundo, sino que desarrolló formas abstractas inspiradas en personas y paisajes.', url: 'https://i.imgur.com/2heNQDcm.jpg', - alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.' + alt: 'Una escultura alta formada por tres elementos apilados unos sobre otros que recuerdan una figura humana.' }, { name: 'Cavaliere', artist: 'Lamidi Olonade Fakeye', - description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.", + description: "Descendiente de cuatro generaciones de talladores de madera, el trabajo de Fakeye combinó temas Yoruba tradicionales y contemporáneos.", url: 'https://i.imgur.com/wIdGuZwm.png', - alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.' + alt: 'Una intrincada escultura de madera de un guerrero con el rostro centrado en un caballo adornado con patrones.' }, { name: 'Big Bellies', artist: 'Alina Szapocznikow', - description: "Szapocznikow is known for her sculptures of the fragmented body as a metaphor for the fragility and impermanence of youth and beauty. This sculpture depicts two very realistic large bellies stacked on top of each other, each around five feet (1,5m) tall.", + description: "Szapocznikow es conocida por sus esculturas del cuerpo fragmentado como metáfora de la fragilidad y la impermanencia de la juventud y la belleza. Esta escultura representa dos vientres grandes muy realistas apilados uno encima del otro, cada uno de unos cinco pies (1,5 m) de altura.", url: 'https://i.imgur.com/AlHTAdDm.jpg', - alt: 'The sculpture reminds a cascade of folds, quite different from bellies in classical sculptures.' + alt: 'La escultura recuerda una cascada de pliegues, muy diferente a los vientres de las esculturas clásicas.' }, { name: 'Terracotta Army', - artist: 'Unknown Artist', - description: 'The Terracotta Army is a collection of terracotta sculptures depicting the armies of Qin Shi Huang, the first Emperor of China. The army consisted of more than 8,000 soldiers, 130 chariots with 520 horses, and 150 cavalry horses.', + artist: 'Artista Desconocido', + description: 'El Ejército de terracota es una colección de esculturas de terracota que representan los ejércitos de Qin Shi Huang, el primer emperador de China. El ejército constaba de más de 8.000 soldados, 130 carros con 520 caballos y 150 caballos de caballería.', url: 'https://i.imgur.com/HMFmH6m.jpg', - alt: '12 terracotta sculptures of solemn warriors, each with a unique facial expression and armor.' + alt: '12 esculturas de terracota de guerreros solemnes, cada uno con una expresión facial y una armadura únicas.' }, { name: 'Lunar Landscape', artist: 'Louise Nevelson', - description: 'Nevelson was known for scavenging objects from New York City debris, which she would later assemble into monumental constructions. In this one, she used disparate parts like a bedpost, juggling pin, and seat fragment, nailing and gluing them into boxes that reflect the influence of Cubism’s geometric abstraction of space and form.', + description: 'Nevelson era conocida por recoger objetos de los escombros de la ciudad de Nueva York, que luego ensamblaría en construcciones monumentales. En este, usó partes dispares como un poste de la cama, un alfiler de malabares y un fragmento de asiento, clavándolos y pegándolos en cajas que reflejan la influencia de la abstracción geométrica del espacio y la forma del cubismo.', url: 'https://i.imgur.com/rN7hY6om.jpg', - alt: 'A black matte sculpture where the individual elements are initially indistinguishable.' + alt: 'Una escultura negra mate donde los elementos individuales son inicialmente indistinguibles.' }, { name: 'Aureole', artist: 'Ranjani Shettar', - description: 'Shettar merges the traditional and the modern, the natural and the industrial. Her art focuses on the relationship between man and nature. Her work was described as compelling both abstractly and figuratively, gravity defying, and a "fine synthesis of unlikely materials."', + description: 'Shettar fusiona lo tradicional y lo moderno, lo natural y lo industrial. Su arte se centra en la relación entre el hombre y la naturaleza. Su trabajo fue descrito como convincente tanto abstracta como figurativamente, desafiando la gravedad, y una "fina síntesis de materiales inverosímiles.', url: 'https://i.imgur.com/okTpbHhm.jpg', - alt: 'A pale wire-like sculpture mounted on concrete wall and descending on the floor. It appears light.' + alt: 'Una escultura parecida a un alambre montado en una pared de hormigón que desciende al suelo. Parece ligero.' }, { name: 'Hippos', artist: 'Taipei Zoo', - description: 'The Taipei Zoo commissioned a Hippo Square featuring submerged hippos at play.', + description: 'El Zoológico de Taipei realizó una Zona de Hipopótamos con hipopótamos sumergidos jugando.', url: 'https://i.imgur.com/6o5Vuyu.jpg', - alt: 'A group of bronze hippo sculptures emerging from the sett sidewalk as if they were swimming.' + alt: 'Un grupo de esculturas de hipopótamos de bronce que emergen de la acera como si estuvieran nadando.' }]; -// Make UI match the initial state. +// Hacemos que la interfaz de usuario coincida con el estado inicial.. updateDOM(); ``` ```html public/index.html @@ -718,15 +718,15 @@ button { display: block; margin-bottom: 10px; } -You don't have to understand it to use React, but you might find this a helpful mental model. +No es necesario que lo entiendas para usar React, pero podrías encontrarlo como un modelo mental útil. -## State is isolated and private {/*state-is-isolated-and-private*/} +## El estado es aislado y privado. {/*state-is-isolated-and-private*/} -State is local to a component instance on the screen. In other words, **if you render the same component twice, each copy will have completely isolated state!** Changing one of them will not affect the other. +El estado es local para una instancia de un componente en la pantalla. En otras palabras, **si renderizas el mismo componente dos veces, ¡cada copia tendrá un estado completamente aislado!** Cambiar uno de ellos no afectará al otro. -In this example, the `Gallery` component from earlier is rendered twice with no changes to its logic. Try clicking the buttons inside each of the galleries. Notice that their state is independent: +En este ejemplo, el anterior componente de `Galería` se ha renderizado dos veces sin cambios en su lógica. Puedes intentar hacer clic en los botones dentro de cada una de las galerías. Observarás que su estado es independiente: @@ -768,13 +768,13 @@ export default function Gallery() {

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

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

{showMore &&

{sculpture.description}

} -This is what makes state different from regular variables that you might declare at the top of your module. State is not tied to a particular function call or a place in the code, but it's "local" to the specific place on the screen. You rendered two `` components, so their state is stored separately. +Esto es lo que hace que el estado sea diferente de las variables regulares que declaramos en la parte superior de un módulo. El estado no está vinculado a una llamada de función en particular o a un lugar en el código, pero es "local" al lugar específico en la pantalla. Se han renderizado dos componentes ``, por lo que su estado se almacena por separado. -Also notice how the `Page` component doesn't "know" anything about the `Gallery` state or even whether it has any. Unlike props, **state is fully private to the component declaring it.** The parent component can't change it. This lets you add state to any component or remove it without impacting the rest of the components. +También observemos cómo el componente de la página `Page` no "sabe" nada sobre el estado del componente de la galería `Galery`, ni siquiera si es que posee algún estado. A diferencia de las props, **el estado es totalmente privado para el componente que lo declara.** El componente padre no puede cambiarlo. Esto permite agregar el estado a cualquier componente o eliminarlo sin afectar al resto de los componentes. -What if you wanted both galleries to keep their states in sync? The right way to do it in React is to *remove* state from child components and add it to their closest shared parent. The next few pages will focus on organizing state of a single component, but we will return to this topic in [Sharing State Between Components.](/learn/sharing-state-between-components) +¿Qué pasaría si quisieramos que ambas galerías mantuvieran sus estados sincronizados? La forma correcta de hacerlo en React es *eliminar* el estado de los componentes secundarios y agregarlo a su padre más cercano. Las próximas páginas se centrarán en organizar el estado de un solo componente, pero volveremos a este tema en [Compartir estado entre componentes.](/learn/sharing-state-between-components) -* Use a state variable when a component needs to "remember" some information between renders. -* State variables are declared by calling the `useState` Hook. -* Hooks are special functions that start with `use`. They let you "hook into" React features like state. -* Hooks might remind you of imports: they need to be called unconditionally. Calling Hooks, including `useState`, is only valid at the top level of a component or another Hook. -* The `useState` Hook returns a pair of values: the current state and the function to update it. -* You can have more than one state variable. Internally, React matches them up by their order. -* State is private to the component. If you render it in two places, each copy gets its own state. +* Debemos utilizar una variable de estado cuando necesitamos que un componente necesite "recordar" alguna información entre renderizaciones. +* Las variables de estado se declaran llamando al Hook `useState`. +* Los Hooks son funciones especiales que comienzan con `use`. Nos permiten "enlazarnos" a funciones de React como el estado. +* Evita llamar a Hooks de manera anidada (por ejemplo, dentro de bucles o condicionales). Llamar a Hooks -incluyendo al useState- solo es válido en el nivel superior de un componente u otro Hook. +* El Hook `useState` retorna un *array* de dos valores: el estado actual y la función para actualizarlo. +* Puede tener más de una variable de estado. Internamente, React los empareja por orden. +* El estado es privado para un componente. Si los renderizamos en dos lugares, cada componente lo maneja individualmente. @@ -907,11 +907,11 @@ What if you wanted both galleries to keep their states in sync? The right way to -#### Complete the gallery {/*complete-the-gallery*/} +#### Completa la galería {/*complete-the-gallery*/} -When you press "Next" on the last sculpture, the code crashes. Fix the logic to prevent the crash. You may do this by adding extra logic to event handler or by disabling the button when the action is not possible. +Cuando presionamos "Siguiente" en la última escultura, el código falla. Arregla la lógica para evitar el bloqueo. Puedes hacer esto agregando lógica adicional al controlador de eventos o deshabilitando el botón cuando la acción no es posible. -After fixing the crash, add a "Previous" button that shows the previous sculpture. It shouldn't crash on the first sculpture. +Después de arreglar el error, agrega un botón "Anterior" que muestre la escultura anterior. No debería chocar con la primera escultura. @@ -935,17 +935,17 @@ export default function Gallery() { return ( <>

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

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

{showMore &&

{sculpture.description}

} -This adds a guarding condition inside both event handlers and disables the buttons when needed: +Esto agrega una condición de protección dentro de ambos controladores de eventos y deshabilita los botones cuando es necesario: @@ -1091,23 +1091,23 @@ export default function Gallery() { onClick={handlePrevClick} disabled={!hasPrev} > - Previous + Anterior

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

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

{showMore &&

{sculpture.description}

} -Notice how `hasPrev` and `hasNext` are used *both* for the returned JSX and inside the event handlers! This handy pattern works because event handler functions ["close over"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) any variables declared while rendering. +¡Observa cómo `hasPrev` y `hasNext` se usan *ambos* para el JSX que se retorna y dentro de los controladores de eventos! Este práctico patrón funciona porque las funciones del controlador de eventos ["se cierran"](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) sobre cualquier variable declarada durante la renderización. -#### Fix stuck form inputs {/*fix-stuck-form-inputs*/} +#### Arreglar entradas de formulario atascadas {/*fix-stuck-form-inputs*/} -When you type into the input fields, nothing appears. It's like the input values are "stuck" with empty strings. The `value` of the first `` is set to always match the `firstName` variable, and the `value` for the second `` is set to always match the `lastName` variable. This is correct. Both inputs have `onChange` event handlers, which try to update the variables based on the latest user input (`e.target.value`). However, the variables don't seem to "remember" their values between re-renders. Fix this by using state variables instead. +Cuando escribimos en los campos del formulario, no obtenemos nada. Es como si los valores estuvieran "atascados" con cadenas vacías. El `valor` de la primera `` está configurado para coincidir siempre con la variable `firstName`, y el `valor` de la segunda `` está configurado para coincidir siempre con la variable `lastName`. Esto es correcto. Ambas entradas tienen controladores de eventos `onChange`, que intentan actualizar las variables en función de la última entrada del usuario (`e.target.value`). Sin embargo, las variables no parecen "recordar" sus valores entre renderizaciones. Solucionemos esto usando variables de estado en su lugar. @@ -1244,17 +1244,17 @@ export default function Form() { return (
e.preventDefault()}> -

Hi, {firstName} {lastName}

- +

Hola, {firstName} {lastName}

+
); } @@ -1268,7 +1268,7 @@ h1 { margin-top: 10px; } -First, import `useState` from React. Then replace `firstName` and `lastName` with state variables declared by calling `useState`. Finally, replace every `firstName = ...` assignment with `setFirstName(...)`, and do the same for `lastName`. Don't forget to update `handleReset` too so that the reset button works. +Primero, importamos el `useState` desde React. Luego reemplazamos `firstName` y `lastName` con variables de estado que declaramos llamando a `useState`. Finalmente, reemplazamos cada asignación `firstName = ...` con `setFirstName(...)`, y haga lo mismo con `lastName`. No olvidemos actualizar `handleReset` también para que funcione el botón de reinicio. @@ -1295,17 +1295,17 @@ export default function Form() { return (
e.preventDefault()}> -

Hi, {firstName} {lastName}

- +

Hola, {firstName} {lastName}

+
); } @@ -1319,13 +1319,13 @@ h1 { margin-top: 10px; } -#### Fix a crash {/*fix-a-crash*/} +#### Arregla un error {/*fix-a-crash*/} -Here is a small form that is supposed to let the user leave some feedback. When the feedback is submitted, it's supposed to display a thank-you message. However, it crashes with an error message saying "Rendered fewer hooks than expected". Can you spot the mistake and fix it? +Aquí hay un pequeño formulario que se supone que permite al usuario dejar algunos comentarios. Cuando se envía el comentario, se supone que debe mostrar un mensaje de agradecimiento. Sin embargo, falla con un mensaje de error que dice "Se generaron menos Hooks de los esperados". ¿Puedes detectar el error y corregirlo? -Are there any limitations on _where_ Hooks may be called? Does this component break any rules? Check if there are any comments disabling the linter checks--this is where the bugs often hide! +¿Existe alguna limitación sobre _dónde_ se pueden llamar los Hooks? ¿Este componente rompe alguna regla? Comprueba si hay algún comentario que deshabilite las comprobaciones de linter; ¡aquí es donde a menudo se esconden los errores! @@ -1337,7 +1337,7 @@ import { useState } from 'react'; export default function FeedbackForm() { const [isSent, setIsSent] = useState(false); if (isSent) { - return

Thank you!

; + return

¡Gracias!

; } else { // eslint-disable-next-line const [message, setMessage] = useState(''); @@ -1353,7 +1353,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- + ); } @@ -1364,9 +1364,9 @@ export default function FeedbackForm() { -Hooks can only be called at the top level of the component function. Here, the first `isSent` definition follows this rule, but the `message` definition is nested in a condition. +Los Hooks solo se pueden llamar en el nivel superior de un componente. Aquí, la primera definición `isSent` sigue esta regla, pero la definición `message` está anidada en una condición. -Move it out of the condition to fix the issue: +Muévelo fuera de la condición para solucionar el problema: @@ -1378,7 +1378,7 @@ export default function FeedbackForm() { const [message, setMessage] = useState(''); if (isSent) { - return

Thank you!

; + return

¡Gracias!

; } else { return (
{ @@ -1392,7 +1392,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- +
); } @@ -1401,9 +1401,9 @@ export default function FeedbackForm() { -Remember, Hooks must be called unconditionally and always in the same order! +¡Recuerda que los Hooks deben llamarse incondicionalmente y siempre en el mismo orden! -You could also remove the unnecessary `else` branch to reduce the nesting. However, it's still important that all calls to Hooks happen *before* the first `return`. +También puede eliminar el `else` innecesario para reducir el anidamiento. Sin embargo, sigue siendo importante que todas las llamadas a Hooks ocurran *antes* del primer `return`. @@ -1415,7 +1415,7 @@ export default function FeedbackForm() { const [message, setMessage] = useState(''); if (isSent) { - return

Thank you!

; + return

¡Gracias!

; } return ( @@ -1430,7 +1430,7 @@ export default function FeedbackForm() { onChange={e => setMessage(e.target.value)} />
- + ); } @@ -1438,19 +1438,19 @@ export default function FeedbackForm() { -Try moving the second `useState` call after the `if` condition and notice how this breaks it again. +Intenta mover la segunda llamada `useState` después de la condición `if` y observa cómo esto la rompe de nuevo. -If your linter is [configured for React](/learn/editor-setup#linting), you should see a lint error when you make a mistake like this. If you don't see an error when you try the faulty code locally, you need to set up linting for your project. +Si tu linter está [configurado para React](/learn/editor-setup#linting), deberías ver un error cuando cometas un error como este. Si aparece un error cuando escribes el código errado localmente, deberías configurar el plugin del linter en tu proyecto. -#### Remove unnecessary state {/*remove-unnecessary-state*/} +#### Eliminar estado innecesario {/*remove-unnecessary-state*/} -When the button is clicked, this example should ask for the user's name and then display an alert greeting them. You tried to use state to keep the name, but for some reason it always shows "Hello, !". +Cuando se hace clic en el botón, este ejemplo debe solicitar el nombre del usuario y luego mostrar una alerta saludándolo. Intentaste usar el estado para mantener el nombre, pero por alguna razón siempre muestra "¡Hola!". -To fix this code, remove the unnecessary state variable. (We will discuss about [why this didn't work](/learn/state-as-a-snapshot) later.) +Para corregir este código, elimina la variable de estado innecesaria. (Discutiremos sobre [por qué esto no funcionó](/learn/state-as-a-snapshot) más adelante). -Can you explain why this state variable was unnecessary? +¿Puede explicar por qué esta variable de estado era innecesaria? @@ -1461,13 +1461,13 @@ export default function FeedbackForm() { const [name, setName] = useState(''); function handleClick() { - setName(prompt('What is your name?')); - alert(`Hello, ${name}!`); + setName(prompt('¿Cuál es tu nombre?')); + alert(`Hola, ${name}!`); } return ( ); } @@ -1477,7 +1477,7 @@ export default function FeedbackForm() { -Here is a fixed version that uses a regular `name` variable declared in the function that needs it: +Aquí está la versión con la solución que usa una variable `name` regular declarada en la función que la necesita: @@ -1486,13 +1486,13 @@ import { useState } from 'react'; export default function FeedbackForm() { function handleClick() { - const name = prompt('What is your name?'); - alert(`Hello, ${name}!`); + const name = prompt('¿Cuál es tu nombre?'); + alert(`Hola, ${name}!`); } return ( ); } @@ -1500,7 +1500,7 @@ export default function FeedbackForm() { -A state variable is only necessary to keep information between re-renders of a component. Within a single event handler, a regular variable will do fine. Don't introduce state variables when a regular variable works well. +Una variable de estado solo es necesaria para mantener la información entre renderizaciones de un componente. Dentro de un solo controlador de eventos, una variable regular funcionará bien. Es recomendable no usar variables de estado cuando una variable regular funciona bien.