diff --git a/content/docs/hooks-state.md b/content/docs/hooks-state.md index 052aecb33..130be96da 100644 --- a/content/docs/hooks-state.md +++ b/content/docs/hooks-state.md @@ -1,20 +1,20 @@ --- id: hooks-state -title: Using the State Hook +title: Usando el Hook de estado permalink: docs/hooks-state.html next: hooks-effect.html prev: hooks-overview.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +Los *Hooks* son una caracteristica futura que permite usar el estado y otras características de React sin tener que crear una clase. Están disponibles actualmente en React v16.8.0-alpha.1. -The [previous page](/docs/hooks-intro.html) introduced Hooks with this example: +La [página anterior](/docs/hooks-intro.html) introdujo los Hooks con este ejemplo: ```js{4-5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declaración de una variable de estado que llamaremos "count" const [count, setCount] = useState(0); return ( @@ -28,11 +28,11 @@ function Example() { } ``` -We'll start learning about Hooks by comparing this code to an equivalent class example. +Empezaremos aprendiendo sobre los Hooks comparando este código con uno equivalente en una clase -## Equivalent Class Example {#equivalent-class-example} +## Ejemplo equivalente en forma de clase {#equivalent-class-example} -If you used classes in React before, this code should look familiar: +Si has usado clases en React previamente este código te resultará familiar ```js class Example extends React.Component { @@ -56,39 +56,39 @@ class Example extends React.Component { } ``` -The state starts as `{ count: 0 }`, and we increment `state.count` when the user clicks a button by calling `this.setState()`. We'll use snippets from this class throughout the page. +El estado empieza como `{ count:0 }` y se incrementa `state.count` cuando el usuario hace click un botón llamando a `this.setState()`. Usaremos fragmentos de esta clase en toda la página. ->Note +>Nota > ->You might be wondering why we're using a counter here instead of a more realistic example. This is to help us focus on the API while we're still making our first steps with Hooks. +>Puedes estar preguntndote porque estamos usando un contador en lugar de un ejemplo más realista. Esto es porque ayuda a centrarse en la API mientras seguimos dando nuestro primeros pasos on los Hooks ## Hooks and Function Components {#hooks-and-function-components} -As a reminder, function components in React look like this: +Como recordatorio, un componente funcional en React se ve así: ```js const Example = (props) => { - // You can use Hooks here! + // Puedes usar Hooks aquí! return
; } ``` -or this: +o así: ```js function Example(props) { - // You can use Hooks here! + // Puedes usar Hooks aquí! return
; } ``` -You might have previously known these as "stateless components". We're now introducing the ability to use React state from these, so we prefer the name "function components". +Puedes haber conocido previamente estos componentes como "componentes sin estado". Actualmente estamos presentando la habilidad de usar el estado de React desde ellos por lo que preferimos el nombre "componentes funcionales" -Hooks **don't** work inside classes. But you can use them instead of writing classes. +Los Hooks **no** funcionan en clases, pero los puedes usar en lugar de escribir clases -## What's a Hook? {#whats-a-hook} +## ¿Qué es un Hook? {#whats-a-hook} -Our new example starts by importing the `useState` Hook from React: +Nuestro nuevo ejemplo empieza importando el Hook `useState` desde React: ```js{1} import React, { useState } from 'react'; @@ -98,17 +98,17 @@ function Example() { } ``` -**What is a Hook?** A Hook is a special function that lets you "hook into" React features. For example, `useState` is a Hook that lets you add React state to function components. We'll learn other Hooks later. +**¿Qué es un Hook?** Un Hook es una función especial que permite "conectarse" a características de React. Por ejemplo, `useState` es un Hook que te permite añadir el estado de React a un componente funcional. Más adelante hablaremos sobre otros Hooks -**When would I use a Hook?** If you write a function component and realize you need to add some state to it, previously you had to convert it to a class. Now you can use a Hook inside the existing function component. We're going to do that right now! +**¿Cuándo debería usar un Hook?** Si creas un componente funcional y descubres que necesitas añadirle estado, antes había que crear una clase. Ahora puedes un Hook dentro de un componente funcional existente.¡Vamos a hacerlo ahora mismo! ->Note: +>Nota: > ->There are some special rules about where you can and can't use Hooks within a component. We'll learn them in [Rules of Hooks](/docs/hooks-rules.html). +>Hay algunas reglas especiales sobre donde puedes y no puedes usar Hooks dentro de un componente. Las aprendermos en [Reglas de los Hooks](/docs/hooks-rules.html) -## Declaring a State Variable {#declaring-a-state-variable} +## Declarando una variable de estado {#declaring-a-state-variable} -In a class, we initialize the `count` state to `0` by setting `this.state` to `{ count: 0 }` in the constructor: +En una clase, inicializamos el estado `count` a `0` estableciendo `this.state` a `{ count: 0 }` en el constructor: ```js{4-6} class Example extends React.Component { @@ -120,58 +120,58 @@ class Example extends React.Component { } ``` -In a function component, we have no `this`, so we can't assign or read `this.state`. Instead, we call the `useState` Hook directly inside our component: +En un componente funcional no existe `this` por lo que no podemos asignar o leer `this.state`. En su lugar, usamos el Hook `useState` directamente dentro de nuestro compoente ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declaración de una variable de estado que llamaremos "count" const [count, setCount] = useState(0); ``` -**What does calling `useState` do?** It declares a "state variable". Our variable is called `count` but we could call it anything else, like `banana`. This is a way to "preserve" some values between the function calls — `useState` is a new way to use the exact same capabilities that `this.state` provides in a class. Normally, variables "disappear" when the function exits but state variables are preserved by React. +**¿Qué hace la llamada a `useState`?** Declara una "variable de estado". Nuestra variable se llama `count`, pero podemos llamarla como queramos, por ejemplo `banana`. Esta es una forma de "preservar" algunos valores entre las llamadas de la función - `useState` es una nueva forma de usar exactamente las mismas funciones que `this.state` nos da en una clase. Normalmente, las variables "desaparecen" cuando se sale de la función, pero las variables de estado son conservadas por React -**What do we pass to `useState` as an argument?** The only argument to the `useState()` Hook is the initial state. Unlike with classes, the state doesn't have to be an object. We can keep a number or a string if that's all we need. In our example, we just want a number for how many times the user clicked, so pass `0` as initial state for our variable. (If we wanted to store two different values in state, we would call `useState()` twice.) +**¿Qué pasamos a `useState` como argumento?** El único argumento para el Hook `useState()` es el estado inicial. Al contrario que en las clases, el estado no tiene porque ser un objeto. Podemos usar un números o strings si es todo lo que necesitamos. En nuestro ejemplo, solamente queremos un número para contar el número de clicks del usuario, por eso pasamos `0` como estado inicial a nuestra variable. (Si queremos guardar dos valores distintos en el estado, llamariamos a `useState()` dos veces) -**What does `useState` return?** It returns a pair of values: the current state and a function that updates it. This is why we write `const [count, setCount] = useState()`. This is similar to `this.state.count` and `this.setState` in a class, except you get them in a pair. If you're not familiar with the syntax we used, we'll come back to it [at the bottom of this page](/docs/hooks-state.html#tip-what-do-square-brackets-mean). +**¿Qué devuelve `useState`?** Devuelve una pareja de valores: el estado actual y una función que lo actualiza. Por eso escribimos `const [count, setCount] = useState()`. Esto es similar a `this.state.count` y `this.setState` en una clase, excepto que se obtienen juntos. Si no conoces la sintaxis que hemos usado volveremos a ella [al final de esta página](/docs/hooks-state.html#tip-what-do-square-brackets-mean). -Now that we know what the `useState` Hook does, our example should make more sense: +Ahora que sabemos que hace el Hook `useState`, nuestro ejemplo debería tener más sentido: ```js{4,5} import React, { useState } from 'react'; function Example() { - // Declare a new state variable, which we'll call "count" + // Declaración de una variable de estado que llamaremos "count" const [count, setCount] = useState(0); ``` -We declare a state variable called `count`, and set it to `0`. React will remember its current value between re-renders, and provide the most recent one to our function. If we want to update the current `count`, we can call `setCount`. +Declaramos una variable de estado llamada `count` y le asignamos a `0`. React recordará su valor actual entre re-renderizados, y devolverá el valor más reciente a nuestra función. Si se quiere actualzar el valor de `count` actual, podemos llamar a `setCount` ->Note +>Nota: > ->You might be wondering: why is `useState` not named `createState` instead? +>Puedes estar preguntándote ¿Por qué `useState` no se llama `createState`? > ->"Create" wouldn't be quite accurate because the state is only created the first time our component renders. During the next renders, `useState` gives us the current state. Otherwise it wouldn't be "state" at all! There's also a reason why Hook names *always* start with `use`. We'll learn why later in the [Rules of Hooks](/docs/hooks-rules.html). +>"Crear" no sería del todo correcto porque el estado solamente se crea la primera vez que nuestro componente se renderiza. Durante los siguientes renderizados, `useState` nos da el estado actual. Esta es también la razón por la que los nombres de los Hooks *siempre* empiezan con `use`. Aprenderemos sobre ello más adelante [Reglas de Hooks](/docs/hooks-rules.html). -## Reading State {#reading-state} +## Leyendo el estado {#reading-state} -When we want to display the current count in a class, we read `this.state.count`: +Cuando queremos mostrar el valor actual de count en una clase lo obtenemos de `this.state.count`: ```js

You clicked {this.state.count} times

``` -In a function, we can use `count` directly: +En una función podemos usar `count` directamente: ```js

You clicked {count} times

``` -## Updating State {#updating-state} +## Actualizando el estado {#updating-state} -In a class, we need to call `this.setState()` to update the `count` state: +En unsa clase, necesitamos llamar a `this.setState()` para actualizar el estado `count`: ```js{1} ``` -In a function, we already have `setCount` and `count` as variables so we don't need `this`: +En una función ya tenemos `setCount` y `count` como variables, así que no necesitamos `this`: ```js{1} ``` -## Recap {#recap} +## Resumen {#recap} -Let's now **recap what we learned line by line** and check our understanding. +Ahora **recapitularemos lo que hemos aprendido línea por línea** y comprobaremos si lo hemos entendido