React Academy · Lección

Inspección de árboles de componentes y props

Explore las jerarquías de componentes y lea los valores actuales de props y state.

Inspección de árboles de componentes y props es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.

Bienvenido

En esta lección aprenderá a profundizar en jerarquías de componentes anidados en React DevTools y a leer valores complejos de props y estado desde la barra lateral del panel Components.

El árbol de componentes es un espejo

Cada componente que ve en las DevTools refleja el anidamiento de su JSX. La raíz suele ser su componente App. Los componentes secundarios aparecen con sangría debajo de sus componentes principales, exactamente como aparecen en el código fuente.

Selección de un componente

Haga clic en cualquier nombre de componente del árbol. El panel derecho muestra inmediatamente sus **props**, **hooks** (estado, efectos y referencias), así como el archivo de **origen** y el número de línea donde se definió.

Lectura de props de tipo string y number

Las props de tipo string aparecen entre comillas: `"hello"`. Los números aparecen sin comillas: `42`. Los valores booleanos muestran `true` o `false`. Puede pasar el cursor sobre un valor para ver todo su contenido si está truncado.

Expansión de props de tipo objeto y array

Cuando el valor de una prop es un objeto o un array, DevTools muestra un árbol contraíble. Haga clic en la flecha situada junto a `{…}` o `[…]` para expandirlo y ver cada clave y valor anidado.

Inspección de props de tipo función

Las props de tipo función (como los controladores `onClick`) aparecen como `f onClick()`. Puede hacer clic en el pequeño icono de flecha situado junto a ellas para ir a la definición de la función en el panel Sources.

Filtrado del árbol

Use el cuadro de búsqueda situado en la parte superior del panel Components para filtrar por nombre. Escriba `Button` para mostrar únicamente los componentes cuyo nombre contenga *Button*. Esto resulta práctico en aplicaciones con cientos de componentes.

Del DOM a React

En la pestaña **Elements**, haga clic con el botón derecho en un nodo del DOM y seleccione **Inspect React component** (disponible cuando DevTools está instalada). DevTools cambia a la pestaña Components y selecciona el componente de React que renderizó ese nodo.

Edición de props en DevTools

Haga doble clic en el valor de una prop en DevTools para editarlo en tiempo real. El componente vuelve a renderizarse de inmediato con el nuevo valor. Esto resulta útil para probar casos límite sin cambiar el código fuente.

Copia de props como JSON

Haga clic con el botón derecho en cualquier valor de prop o estado en DevTools y seleccione **Copy value**. El valor se copiará como JSON al portapapeles, lo que resulta práctico para pegarlo en pruebas o documentación.

Comprobación rápida

¿Cómo se expande una prop de tipo objeto o array en el panel Components de React DevTools?

Resumen

Ahora puede navegar por árboles de componentes, leer strings, números, objetos y funciones, filtrar por nombre, ir de elementos del DOM a componentes de React y editar props en tiempo real en DevTools.

Próxima lección

Próxima lección: **Uso de la pestaña Profiler** — grabará renderizaciones, leerá gráficos de llamas y localizará los componentes responsables de las interacciones lentas.

Preguntas frecuentes

¿La lección «Inspección de árboles de componentes y props» es gratis?

Sí — el texto completo de «Inspección de árboles de componentes y props» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Inspección de árboles de componentes y props»?

Explore las jerarquías de componentes y lea los valores actuales de props y state. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar React Academy?

No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Inspección de árboles de componentes y props»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de React Academy?

Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Instalación y apertura de React DevTools
Inspección de árboles de componentes y props
Uso de la pestaña Profiler
Depuración de errores comunes de React

← Volver a React Academy