1. 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. Los datos fluyen 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? Pon algún ejemplo.

No le decimos cómo debe renderizar la interfaz a base de instrucciones. Le decimos qué debe renderizar y React se encarga de renderizarlo. Un ejemplo entre declarativo e imperativo:
// Declarativo
const element =

Hello, world

// 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. 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, que mejora la legibilidad del código y hace que sea más fácil de entender. Sin JSX, deberíamos usar React.createElement para crear los elementos de la interfaz manualmente y con JSX, sería prácticamente HTML.

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 para mostrar el estado de una tarea en el componente Task? Descríbelo

Usaríamos el operador ternario “? :” Su sintaxis es “condición ? expresion1 : expresion2” Se evalua la condición, y según sea el resultado:
- En caso de que se cumpla (evalua a true), se aplicará la expresion1
- Y en caso de que no (evalua a false), se aplicará la expresión 2

c) Modifica el componente Task para que muestre un texto diferente dependiendo del estado de la tarea.

Usaríamos el operador ternario anterior mencionado para evaluar el valor del prop "completed", y mostrar un texto u otro en función del estado. Habría que incluir la siguiente línea: {props.completed ? HECHO : PENDIENTE}