style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

Agregando estado

Estado en React

React es por asi decirlo, una maquina de estados, reacciona a cambios de estado y define todo un ciclo de eventos que suceden cada vez que cambia el estado, el proceso simple es que vuelve a renderizar el componente, es decir, crea el DOM virtual del componente hace la comparacion de diferencias y actualiza el DOM, esto lo hace a una velocidad mas que decente.

Hooks

Hablar de React despues del 06 Febrero del 2019 es hablar de Hooks, no podemos ser mas afortunados de por fin librarnos de ese mal concepto de Clases en javascript, que ni son clases reales porque son instancias y confunden mucho tanto a desarrolladores js como a los que no lo son.
Vamos a realizar un pequeno contador que muestre cuantos segundos han pasado desde que cargamos una pagina. Hooks nos ayudara a escribir el codigo en React.

Dependencias

- La unica dependencia es haber realizado el ejercicio del post anterior.

Actualizando el componente

Solo vamos a actualizar el archivo index.tsx, debera quedar asi:

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

const Hello: React.SFC<{
  text: string
}> = props => {
  const [count, setCount] = useState(0);
  setTimeout(()=>setCount(count + 1), 1000)
  return <h1>Hello, {props.text} {count}</h1>
};

ReactDOM.render(<Hello text="Javamexico"/>, document.getElementById('app'));

Estamos usando el hook useState que nos regresa un arreglo con dos valores, el primero el valor del estado actual y el segundo una funcion para actualizar ese estado. Recibe como parametro inicial el estado inicial que queremos establecer en este caso 0. Lo demas se lee por si solo, cada 1000 milisegundos actualizamos el estado al estado actual mas 1.

Cuando actualizamos el estado React detecta esto y pinta una vez mas el componente, en el primer render el valor de count sera 0, en el segundo renderizado el valor de count sera 1, y asi sucesivamente, React se encarga de mantener el estado en cada repintado (re-render).

Recuerda ir a http://localhost:1234 para verificar que funciona como dicen los de React.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">