Gratis, en español, sin registro
React no es magia. Es una lista enlazada, dos árboles y una cola.
Podés usar React durante años sin saber nada de esto y va a funcionar — hasta el día que no. Acá vas a ver el algoritmo ejecutándose paso a paso, con el estado moviéndose de verdad, para dejar de adivinar.
12 lecciones · 121 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 venís con las flechas mientras mirás 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. Contá 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 y cómo React decide qué reutilizar. Acá se explica el 80% de lo que te sorprende.
2 lecciones
03
Estado
La cadena de hooks y la cola de updates, por dentro.
4 lecciones
04
Efectos
Cuándo corre cada cosa y por qué el orden importa tanto.
2 lecciones
05
Trabajo evitado
Bailout, memo y memoización. Optimizar sin cargar el código de ruido.
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 ande 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 encontrás algo que no coincide con React real, es un bug de acá — no de tu cabeza.