Qué es React y cómo piensa una interfaz

Entiende React como una librería declarativa basada en componentes, estado y re-renderizado.

React es una librería para construir interfaces de usuario.

Su idea central es simple: describes cómo debería verse la UI para un estado dado, y React se encarga de actualizar la pantalla cuando ese estado cambia.

Imperativo vs declarativo

En JavaScript imperativo haces pasos manuales:

const button = document.querySelector('button');
button.textContent = 'Guardado';
button.disabled = true;

En React describes el resultado:

function SaveButton({ saved }) {
  return <button disabled={saved}>{saved ? 'Guardado' : 'Guardar'}</button>;
}

No dices “cambia el texto y luego desactiva el botón”. Dices “si saved vale true, el botón debe verse así”.

Las tres piezas básicas

Componentes

Son funciones que devuelven UI.

Props

Son datos que un componente recibe desde fuera.

Estado

Son datos que cambian dentro de la interacción de la propia interfaz.

El modelo mental correcto

Piensa una pantalla como un árbol de piezas:

  • App
  • Header
  • Sidebar
  • ProductList
  • ProductCard

Cada componente debería tener una responsabilidad clara. Si una pieza mezcla demasiadas cosas, no está bien dividida.

Qué hace React cuando algo cambia

  1. Cambia el estado o cambian las props.
  2. React vuelve a ejecutar el componente.
  3. Calcula la nueva UI.
  4. Actualiza el DOM real con los cambios mínimos.

Eso explica por qué en React “renderizar” no significa necesariamente “repintar todo”. Significa recalcular la descripción de la interfaz.

Qué debes evitar desde el principio

  • Tratar React como jQuery con JSX
  • Guardar en estado cosas que se pueden calcular
  • Meter demasiada lógica en un solo componente
  • Usar useEffect para todo

En la siguiente lección entramos en JSX y en cómo se construyen componentes de verdad.