Hook useRef en React

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

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';

const App = () => {
    const nombreRef = useRef();
    const resultadoRef = useRef();

    const procesar = () => {
        const valor = nombreRef.current.value;
        resultadoRef.current.innerHTML = valor;
    }

    return <div>
        <input type="text" ref={nombreRef} />
        <button onClick={procesar}>Enviar</button>
        <div ref={resultadoRef}></div>
    </div>
}

export default App;

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á el correspondiente valor en dólares en pantalla.

2. Grados centígrados

Definir un componente App que recogerá los grados centígrados introducidos y mostrará en pantalla 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 mostrará su superficie en pantalla.

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.