Aprender React con 100 ejercicios prácticos

Algunas operaciones típicas que podríamos hacer en el return del componente serían:
• Llamadas a funciones.
• Recorrer un array de valores.
• Uso de renderizado condicional.
• Definición de funciones anónimas de una sola línea de código. Por ejemplo, si deseamos cambiar un estado no es necesario que definamos una función fuera del return únicamente para realizar esa operación.

Al ser onSomeEvent un parámetro de entrada del componente MiComponente, cuando el usuario pulse el botón nos estaremos comunicando con la prop onSomeEvent dentro del componente App. El valor de esta prop es el nombre de la función a la que llamaremos dentro del componente App (changePadre):

No obstante, mi recomendación es que dedique un tiempo a reflexionar sobre cuál sería la mejor forma de estructurar su aplicación en componentes. Si durante el desarrollo de la aplicación ve que algo se puede hacer mejor, detenga el desarrollo para ponerlo todo en orden.

La refactorización (del inglés, refactoring) es una técnica de la ingeniería de software para reestructurar un código fuente, que consiste en alterar su estructura interna sin cambiar su comportamiento externo.

Es una parte de la interfaz visual.
Su nombre debe comenzar con mayúscula.
Un componente debe devolver código JSX o null.

El parámetro e hace referencia al evento que se acaba de producir y toma su valor automáticamente. A través de este evento podemos acceder al propio objeto que lo ha desencadenado (e.target), y a través de ese objeto podremos llegar finalmente al valor escrito (e.target.value).

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.

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.

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.

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