Pablo Monteserín Fernández

• La programación orientada a objetos fue desarrollada posteriormente a la programación funcional y añade nuevos conceptos de programación: herencia, polimorfismo, encapsulamiento, cohesión, acoplamiento y abstracción.

Ahora, con React nunca debemos usar document. querySelector, ni document.getElementById, ni cualquier otro tipo de acceso al DOM.

Babel es una herramienta que nos permite transformar nuestro código JS de última generación (o con funcionalidades extra) en un código de Javascript que cualquier navegador o versión de NodeJS pueda entender.

Tendría que haberlo codificado de la siguiente forma:

Otra opción válida hubiese sido:

El típico atributo class, utilizado en HTML para identificar un elemento y luego poder acceder a él mediante Javascript o maquetarlo con CSS, ya no funciona en React. En su lugar, usaremos className

Normalmente, usar el segundo parámetro de la función será suficiente; aunque si recorriésemos varios arrays podría ocurrir que reutilizará la misma key y esto podría derivar en errores. La key debe ser única para cada elemento.

el hook useRef. Es un hook que guarda la referencia del nodo dentro del DOM.

En versiones más antiguas de React, cada vez que se usaba código JSX era necesario importar el módulo de React (import React from ‘react’). Sin embargo, a partir de la versión 17 este import ya no es necesario.

Igual que pasaba con el hook useRef, el hook useState va a evitarnos tener que acceder al DOM mediante instrucciones del tipo document.getElementById o document.querySelector para modificar el contenido de una etiqueta de HTML cuando queramos mostrar un resultado en su interior.

Aunque las aplicaciones que estamos realizando son sencillas, tenga en cuenta que ahora el código realiza las operaciones de cálculo del resultado cada vez que el usuario teclea algo en el cuadro de texto. Cuando usábamos useRef, hasta que el usuario no pulsaba el botón de calcular no se realizaba ninguna operación; por lo que la aplicación obtenida era algo más ligera que en el ejemplo que veremos a continuación.