Los Hooks fueron introducidos en la versión 16.8. Permiten usar características de React sin tener que programar clases. En definitiva: nos permiten conectarnos a características de React.
useRef es un hook que guarda la referencia del nodo dentro del DOM.
import { useRef } from 'react';
export default () => {
const nombreRef = useRef(null);
const resultadoRef = useRef(null);
const procesar = () => {
resultadoRef.current.innerHTML = nombreRef.current.value;
}
return <div>
<input type="text" ref={nombreRef} />
<button onClick={procesar}>Enviar</button>
<div ref={resultadoRef}></div>
</div>
}Ejercicios – recogida de datos
De momento, en estos ejercicios no pintaremos la solución en la página HTML, sino que la mostraremos como una traza en la consola.
1. Euros a dólares
Haremos un conversor de euros a dólares. Supondremos que un euro son dos dólares. El usuario introducirá un valor en euros y se mostrará un mensaje de alerta con el correspondiente valor en dólares.
2. Grados centígrados
Definir un componente App que recogerá los grados centígrados introducidos y mostrará los correspondientes grados Fahrenheit.
Para ello deberé multiplicar por 9/5 y sumar 32. Como todo el mundo sabe, 20 grados centígrados son 68 grados Farenheit.
3. Calcular la superficie de un rectángulo
Tendremos un formulario que recogerá el ancho y el alto de un rectángulo y calculará su superficie.