Gratis, en español, sin registro
React no es magia. Es una lista enlazada, dos árboles y una cola.
Puedes usar React durante años sin saber nada de esto y va a funcionar — hasta el día que no. Aquí vas a ver el algoritmo ejecutándose paso a paso, con el estado moviéndose de verdad, para dejar de adivinar.
30 lecciones · 326 minutos · basado en la documentación oficial
Todavía no se llamó ningún hook, así que memoizedState sigue en null.
createRoot().render()
Montaje inicial. No hay árbol previo, así que todo se va a crear desde cero.
Esto no es una animación: es la traza real de un useState montándose, generada por el mismo motor que usa el trazador.
Tres herramientas que se complementan
Una te enseña el algoritmo, otra te demuestra el comportamiento, la tercera te muestra qué cambió. Ninguna sirve del todo sin las otras dos.
TRAZADOR
La ejecución, paso a paso
Un motor que reimplementa el reconciler y los hooks de React y emite un evento por cada paso interno. Vas y vienes con las flechas mientras miras la cadena de hooks, el árbol de fibers y la salida.
abrir →
PLAYGROUND
React de verdad, la versión que quieras
Un entorno aislado que baja React desde el CDN y lo ejecuta. 16.8, 17, 18 o 19, con el build de desarrollo: advertencias reales, StrictMode real y commits medidos por el Profiler.
abrir →
VERSIONES
El mismo código en dos versiones a la vez
Dos entornos lado a lado con la misma acción disparada al mismo tiempo. Cuenta los commits y vas a entender el batching automático en diez segundos, sin leer una nota de lanzamiento.
abrir →
El recorrido, en orden
No hay atajos y no hacen falta. Cada módulo se apoya en el anterior, y saltearse uno se nota enseguida.
01
Cimientos
Qué es de verdad un componente y dónde vive su estado. Sin esto, todo lo demás es memorizar.
2 lecciones
02
El motor
Las dos fases del trabajo, cómo React decide qué reutilizar y cómo prioriza. Aquí se explica el 80% de lo que te sorprende.
3 lecciones
03
Estado
La cadena de hooks, la cola de updates y cómo diseñar el estado para que no te complique.
6 lecciones
04
Efectos
Cuándo corre cada cosa, por qué el orden importa tanto y — sobre todo — cuándo NO usar un efecto.
4 lecciones
05
Contexto y composición
Cómo bajan los datos por el árbol y por qué la composición resuelve casi todo lo que crees que necesita contexto.
2 lecciones
06
Trabajo evitado
Bailout, memo y memoización. Optimizar sin cargar el código de ruido.
2 lecciones
07
Concurrencia
Marcar qué es urgente y qué puede esperar. El diferencial que separa a alguien que usa React de alguien que lo entiende.
3 lecciones
08
Límites del árbol
Qué pasa cuando algo se rompe, y por qué el árbol de React no es el árbol del DOM.
3 lecciones
09
React en el servidor
Server Components, hydration y estado externo. Lo que hoy separa una app moderna de una del 2020.
3 lecciones
10
React 19 y lo que viene
Acciones, formularios sin cableado y un compilador que memoiza por ti.
2 lecciones
Una advertencia honesta
Esto no se aprende en una tarde. Si viniste buscando el atajo para poner React en el currículum la semana que viene, esta herramienta no te va a servir y prefiero decírtelo ahora.
Lo que sí te va a servir: la próxima vez que un componente se comporte raro, en vez de probar cosas hasta que funcione vas a poder razonar qué está pasando. Eso vale mucho más que memorizar API, y no caduca cuando sale la versión que viene.
El sitio es gratis y no pide registro. Tu progreso queda en tu navegador. Si encuentras algo que no coincide con React real, es un bug de aquí — no de tu cabeza.