React: ¿Librería o Framework?
El ecosistema React y cómo encaja en tu stack actual
React es una librería de UI, no un framework completo. Su misión es una sola: renderizar componentes de forma eficiente. Todo lo demás —ruteo, estado global, peticiones HTTP— lo resuelve el ecosistema.
🔍 Diferencias clave
- React — Solo la capa de vista. Necesitas elegir bibliotecas externas (router, fetch, estado global) según el proyecto.
- Vue — Framework progresivo. Vue Core + Vue Router + Pinia forman un ecosistema oficial pero opcional.
- Angular — Framework completo y opinionado. Trae router, HTTP, DI, formularios, todo integrado.
v-model, React te pide manejar el estado manualmente con useState y eventos onChange.
.jsx y total libertad — pero también más decisiones que tomar.
⚡ Primer JSX en acción
Edita el mensaje y pulsa Ejecutar:
JSX y Renderizado
JavaScript + XML, el lenguaje de templates de React
JSX es azúcar sintáctico para React.createElement. No es HTML, aunque se parezca. Cada etiqueta JSX se transpila a una llamada a React.createElement que produce un elemento virtual del DOM.
📌 Expresiones en JSX
Con { } puedes incrustar cualquier expresión de JavaScript: variables, ternarios, .map(), operador lógico &&, etc.
- Vue usa
{{ mustaches }}en templates y directivasv-bind,v-for,v-if. - Angular usa
{{ interpolación }}y directivas estructurales:*ngIf,*ngFor. - React no tiene directivas. Usas JavaScript directamente: ternarios,
.map(),&&.
.vue. En React, todo es JavaScript: JSX es el template. Donde Vue tiene v-if="mostrar", React usa {mostrar && <Componente />}. Donde Vue tiene v-for, React usa {arr.map()}.
[property]="val" y (event)="handler()". React normaliza todo con props: style={{color: 'red'}}, onClick={handler}. No hay *ngFor; usas array.map().
Componentes y Props
La unidad fundamental de UI en React
En React moderno (v16.8+) los componentes son funciones que devuelven JSX. Reciben un único argumento: un objeto props con los atributos que el componente padre les pasa.
📦 Props
Las props son de solo lectura. Se declaran desestructurando el primer argumento:
function Tarjeta({ titulo, descripcion }) {
return <div>{titulo}: {descripcion}</div>;
}defineProps(['nombre', 'edad']). En React, son el argumento de la función, sin declaración explícita.
@Input() para propiedades de entrada. React recibe un objeto plano — no hay decoradores ni metadatos.
⏺ Las props se pasan desde el sistema de ejecución.
Estado con useState y Eventos
Dale vida a tus componentes con estado local
useState es el Hook fundamental para añadir estado a un componente funcional. Devuelve un array con dos valores: el estado actual y una función para actualizarlo.
const [cuenta, setCuenta] = React.useState(0);Los eventos en React se pasan como props onEvento (camelCase): onClick, onChange, onSubmit.
ref(0) o reactive(). La diferencia clave: en React, llamar a setEstado() es explícito; en Vue, la reasignación de ref.value es automáticamente reactiva.
signal(), muy similar a useState: un contenedor de valor que notifica cambios.
Efectos con useEffect
Sincroniza tu componente con el mundo exterior
useEffect ejecuta código después de renderizar. Ideal para: llamadas a API, suscripciones, timers, manipulación del DOM.
React.useEffect(() => {
// efecto
return () => { /* limpieza */ };
}, [dependencias]);- Sin array — cada render.
- Array vacío
[]— solo al montar y desmontar. - Con dependencias
[dep]— cuando cambiadep.
onMounted, onUnmounted y watchEffect. La función de limpieza de useEffect equivale a onUnmounted.
ngOnInit, ngOnDestroy y ngOnChanges. effect() de Signals (v17+) es el equivalente más directo a useEffect.
Context API
Comparte datos sin prop drilling
Context API permite compartir valores entre componentes sin pasarlos explícitamente por cada nivel del árbol. Ideal para temas, usuario autenticado, preferencias de idioma.
const MiCtx = React.createContext(valorDefecto);
// Proveedor
<MiCtx.Provider value={…}>
<Hijo />
</MiCtx.Provider>
// Consumidor
const valor = React.useContext(MiCtx);provide/inject, conceptualmente idéntico a Context: un ancestro provee un valor y cualquier descendiente lo inyecta.
@Injectable en el árbol de inyectores. Es más verboso, pero ofrece ámbitos que Context no gestiona nativamente.
Comparativa y Conclusión
React vs Vue vs Angular — elige con criterio
| Concepto | React | Vue | Angular |
|---|---|---|---|
| Tipo | Librería UI | Framework progresivo | Framework completo |
| Template | JSX (JS + XML) | HTML + directivas | HTML + directivas |
| Reactividad | useState explícito | Proxies (ref/reactive) | Zone.js / Signals |
| Estado global | Context API + librerías | Pinia (oficial) | Servicios @Injectable |
| Binding | value + onChange | v-model | [(ngModel)] |
| Condicionales | Ternario {x ? a : b} | v-if / v-show | *ngIf |
| Bucles | {arr.map(x => …)} | v-for | *ngFor |
| Router | React Router (tercero) | Vue Router (oficial) | @angular/router |
| Efectos | useEffect | onMounted / watchEffect | ngOnInit / ngOnDestroy |
| Curva aprendizaje | Media | Baja | Alta |
| Ecosistema | Enorme, decisiones propias | Extenso, guiado | Oficial, todo incluido |
🎯 ¿Cuándo elegir qué?
- React — Flexibilidad total, ecosistema maduro, equipo con solidez en JS.
- Vue — Curva suave, productividad inmediata, proyectos medianos.
- Angular — Proyectos empresariales, estructura firme, TypeScript nativo.
✅ Conclusión
React te da superpoderes con JavaScript. No hay magia: useState, useEffect, props y Context son todo lo que necesitas.
Cuestionario
Comprueba lo aprendido en 5 preguntas