Fundamentos de React: Conceptos Clave y Ejemplos Prácticos

1. ¿Cuáles son las características principales de React?

Las características principales de React son:

• Componentes: React está basado en la componetización de la UI. La interfaz se divide en componentes independientes que contienen su propio estado. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz.
• Virtual DOM: React usa un DOM virtual para renderizar los componentes, que es una representación en memoria del DOM real. Cuando el estado de un componente cambia, React vuelve a renderizar la interfaz de usuario.
• Declarativo: React es declarativo, lo que significa que no se especifica cómo se debe realizar una tarea, sino qué se debe realizar. Esto hace que el código sea más fácil de entender y de mantener.
• Unidireccional: React es unidireccional, lo que significa que los datos fluyen en una sola dirección: de los componentes padres a los componentes hijos.
• Universal: React se puede ejecutar tanto en el cliente como en el servidor. Además, puedes usar React Native para crear aplicaciones nativas para Android e iOS.

2. ¿Qué significa exactamente que React sea declarativo?

No le decimos cómo debe renderizar la interfaz a base de instrucciones; le decimos qué debe renderizar y React se encarga de hacerlo.

Ejemplo: Declarativo vs. Imperativo

• Declarativo: const element = <h1>Hello, world</h1>
• Imperativo: const element = document.createElement('h1'); element.innerHTML = 'Hello, world';

3. ¿Qué son las props en React?

Las props son las propiedades de un componente. Son datos que se pasan de un componente a otro. Por ejemplo, si tienes un componente Button que muestra un botón, puedes pasarle una prop text para que el botón muestre un texto específico. Las props son una forma de parametrizar nuestros componentes, igual que hacemos con las funciones.

4. ¿Qué es JSX?

React usa JSX para declarar qué debe renderizar. JSX es una extensión de JavaScript que permite escribir un código más cercano visualmente a HTML, lo que mejora la legibilidad y facilita el mantenimiento. Sin JSX, deberíamos usar React.createElement para crear los elementos de la interfaz manualmente.

Caso práctico

a) ¿Cuál es el propósito del prop completed en el componente Task?

Las props indican el estado de un componente en React; por tanto, en este caso, su propósito es gestionar si la tarea ha sido completada o no.

b) ¿Qué operador utilizaríamos para modificar el prop completed?

Usaríamos el operador ternario (? :). Su sintaxis es: condición ? expresión1 : expresión2.

• Si la condición se cumple (true), se aplica la expresión1.
• Si no se cumple (false), se aplica la expresión2.

c) Modifica el componente Task para mostrar un texto según el estado

Utilizando el operador ternario para evaluar el valor de la prop completed, incluiríamos la siguiente línea en el componente:

{props.completed ? <span>HECHO</span> : <span>PENDIENTE</span>}