Lección 1 de 13 · Lectura y práctica

Que es React?

Bienvenido a React React es una librería de JavaScript para construir interfaces de usuario. Fue creada por Facebook (hoy Meta) y publicada como código abierto en 2013. Desde entonces se ha convertido en una de las herramientas.

Del concepto a la práctica

Taller de esta lección

React resulta útil cuando una pantalla tiene estados visibles que deben mantenerse coherentes. La decisión no es “usar React para todo”, sino describir una función entre datos y vista. En una biblioteca, la lista mostrada depende de la categoría elegida y de la disponibilidad; ambas decisiones pueden expresarse como datos.

Ejemplo resuelto

jsx

function Libros({ libros, categoria }) {
  const visibles = libros.filter(libro => libro.categoria === categoria && libro.disponible);
  return <p>{visibles.length} libros disponibles</p>;
}

Con dos libros disponibles de la categoría historia, la salida es “2 libros disponibles”. El componente no busca nodos ni conserva un contador duplicado.

Pruébalo

Define tres registros con titulo, categoria y disponible.
Filtra por una categoría elegida.
Cuenta solo los registros disponibles.

Comprueba tu resultado

Para historia, con dos registros pero uno disponible, el resultado esperado es “1”.

Error frecuente: guardar también totalVisibles en estado. Corrígelo calculándolo desde libros y categoria; así no puede quedar desactualizado cuando cambien los datos.

Entradas completas y una cuenta coherente

Usa [{id:'b1',titulo:'Crónicas',categoria:'historia',disponible:true},{id:'b2',titulo:'Imperios',categoria:'historia',disponible:false},{id:'b3',titulo:'Mar abierto',categoria:'ficcion',disponible:true}]. Para historia existen dos registros y uno disponible. La función resuelta debe aplicar ambas condiciones si etiqueta el número como disponibles; cambiar solo la disponibilidad de b2 a true eleva el resultado a2, mientras cambiar de categoría a ficcion da1. Estas tres salidas se calculan desde la colección y el filtro, sin guardar otro contador.

React describe una vista, compara resultados y aplica cambios durante el commit; «mínimo absoluto de operaciones» y «siempre más rápido» no son garantías. Un setter tampoco asegura un número exacto de renders. Separa la cuenta observable de los detalles de ejecución. En el diagrama de programación, la entrada es colección/categoría, la decisión comprueba categoría y disponibilidad, y la salida es la cuenta. Una prueba útil cambia una condición manteniendo la otra; así detecta un filtro incompleto.

Un arreglo de dos libros alimenta App y ListaLibros, que crean dos TarjetaLibro con los IDs b1 y b2 y títulos Mar y Ríos. — **Una lista, componentes pequeños**
App compone la lista y la lista crea una tarjeta por registro. Cada tarjeta recibe un libro con ID estable; la estructura describe la interfaz sin gestionar nodos manualmente.
Ver la infografía en tamaño completo ↗

Bienvenido a React

React es una librería de JavaScript para construir interfaces de usuario. Fue creada por Facebook (hoy Meta) y publicada como código abierto en 2013. Desde entonces se ha convertido en una de las herramientas más usadas para el desarrollo frontend, tanto en startups como en grandes empresas.

La idea central es sencilla pero poderosa: en lugar de manipular el DOM a mano, tú describes cómo debe verse la interfaz según los datos, y React se encarga de actualizar la pantalla cuando esos datos cambian.

Idea clave

React es declarativo: describes el "qué" (cómo se ve la UI para un estado dado) y React resuelve el "cómo" (qué cambiar en el DOM).

¿Por qué React?

Componentes reutilizables: divides tu interfaz en piezas independientes que combinas como bloques de Lego.
Virtual DOM: React calcula el mínimo de cambios necesarios antes de tocar el DOM real, lo que hace las actualizaciones eficientes.
Flujo de datos predecible: los datos bajan de padres a hijos, lo que hace más fácil razonar sobre la aplicación.
Ecosistema enorme: enrutadores, gestión de estado, formularios, animaciones y miles de paquetes en npm.
Demanda laboral alta: es uno de los conocimientos más solicitados en ofertas de frontend.

React frente a JavaScript puro

Con JavaScript puro manipulas el DOM imperativamente, paso a paso:

// JavaScript puro: tú das cada orden
const button = document.createElement('button');
let count = 0;
button.textContent = 'Clics: ' + count;
button.onclick = () => {
  count++;
  button.textContent = 'Clics: ' + count;
};
document.body.appendChild(button);

Con React describes el estado y la interfaz que corresponde a ese estado. Cuando llamas a la función que actualiza el estado, React vuelve a renderizar por ti:

// React: describes el resultado, no los pasos
function Contador() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clics: {count}
    </button>
  );
}

Conceptos que dominarás en este curso

Componente

Función que recibe datos y devuelve la descripción de una parte de la interfaz (JSX).

JSX: sintaxis parecida a HTML que escribes dentro de JavaScript.
Props: datos que un componente padre pasa a un hijo.
State (estado): datos internos que cambian con el tiempo.
Hooks: funciones como useState y useEffect que añaden capacidades a los componentes.

¿Qué significa que React sea "declarativo"?

En el enfoque declarativo describes el resultado deseado para cada estado; React calcula los cambios mínimos en el DOM por ti.

Ejercicio práctico

Objetivo: identificar dónde encaja React comparándolo con JavaScript puro.

Abre una página en blanco y, con JavaScript puro, crea un botón que muestre cuántas veces se ha pulsado.
Escribe en un comentario qué pasos tuviste que dar tú manualmente para actualizar el texto.
Junto a ese código, escribe en pseudocódigo cómo lo resolverías "describiendo el estado" al estilo React.

Entregable: un archivo comparacion.js con ambas versiones y 3 líneas explicando qué le delega React al desarrollador para que no lo haga a mano.

Para recordar

React es una librería declarativa para construir interfaces con componentes.
Tú describes la UI según el estado; React actualiza el DOM de forma eficiente con el Virtual DOM.
Los pilares del curso son: componentes, JSX, props, estado y hooks.

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Estado, formularios y una API pequeña: HTML, Estado, Validación, Respuesta — De la idea al resultado: una secuencia para practicar y revisar.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

Sigue con React Fundamentals

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

Siguiente: Configurando tu proyecto React →Entrar y guardar mi progreso