Como desarrolladores web, confiamos mucho
en Herramientas para desarrolladores.
Entonces cosas como la consola
o el panel Element Inspect en nuestro navegador.
Y dado que las herramientas son tan útiles para los desarrolladores
el equipo de React creó herramientas de desarrollo específicas para React
lo cual puede ser extremadamente útil cuando se trabaja con el Estado.
Y como ahora estamos trabajando con State,
vamos a verlos.
Y de hecho, desde el principio, recibimos este mensaje aquí.
en nuestra Consola indicándonos que descarguemos estas herramientas de desarrollo.
Para que puedas abrir tu consola
y luego aquí encontrarás el enlace.
al lugar en la documentación de React donde
Luego podemos encontrar el enlace a las herramientas de desarrollo.
Así que aquí está el enlace
para Chrome Web Store y luego para los demás navegadores.
Pero como estamos usando Google Chrome
este es el que queremos.
Y si por alguna razón no aparece este enlace de aquí
en tu consola, puedes simplemente buscar en Google,
"Herramientas de desarrollo de Chrome React".
Así que sí, ese será el primero.
Y entonces, una vez que estés en esta página o en esta
que es lo mismo, puedes descargar esta extensión
e instálalo en tu Google Chrome.
Ahora no puedo hacer esto porque estoy en una ventana de Invitado.
así que déjame solucionarlo rápidamente.
Y ahora aquí en esta ventana puedo
Utilice también estas herramientas de desarrollo.
Espero que hayas instalado la herramienta.
Como cualquier otra extensión de Chrome.
Y luego, una vez que lo hiciste, aquí abajo
Una vez que tengas estas herramientas de desarrollo abiertas aquí,
Verás una pestaña que aparece aquí.
o en realidad dos que provienen de las herramientas de desarrollo de React.
Esa es esta pestaña Componente y esta pestaña Perfilador.
Y como vamos a usar esto todo el tiempo
incluso podemos arrastrar, bueno en realidad no.
Ahora podemos arrastrarlo aquí al principio donde
entonces se quedará.
Ahora aquí dice cargar el árbol de elementos de React,
que debería ser rápido.
Así que intentémoslo de nuevo.
Y de hecho solo me funcionó después del cierre.
y reabrir mi navegador.
Entonces, si ve el mismo mensaje de error que había visto anteriormente
aquí abajo, entonces por favor continúa y haz lo mismo ahora.
Pero ahora todo está funcionando.
Entonces, echemos un vistazo a estas herramientas de desarrollo y
en particular de este componente de las herramientas de desarrollo.
Porque nuevamente, hay otra parte que es este Profiler.
pero volveremos a eso un poco más tarde.
Entonces, Componentes, básicamente, como su nombre lo dice, es
para mostrar un árbol de componentes.
Ahora, ahora solo tenemos un componente, así que solo
el componente de la aplicación, y entonces esto
es el único que podemos ver aquí.
Pero si tuviéramos más, entonces todos
estaría apareciendo aquí abajo
y pudimos ver todo nuestro árbol de componentes.
Así que les mostraré esto nuevamente una vez que lo tengamos.
El punto ahora es que podemos echar un vistazo
en todo el Estado que se encuentra dentro de cada componente.
Para hacer esto aún un poco más grande aquí para que puedan verlo.
Bueno, quizás eso sea demasiado grande.
o también puedo agrandar toda la ventana.
Entonces así.
Entonces ves aquí que primero tenemos estos accesorios.
que es para todos los accesorios que el componente
que actualmente está seleccionado está recibiendo.
Y en este caso, nosotros, por supuesto,
no reciben accesorios, así que no hay nada allí.
Pero aquí está la parte interesante.
Entonces aquí tenemos una lista de todos los ganchos.
Y aquí tenemos estas dos entradas.
uno para cada gancho estatal que utilizamos.
Entonces recuerda que creamos el Estado con el uso Estado.
y estas funciones de uso son ganchos;
por lo tanto, están aquí en la lista de ganchos.
Pero de todos modos, lo interesante es que ahora podemos
Manipule estos valores aquí abajo para experimentar con ellos.
Por ejemplo, cuando tenemos un valor de lingotes
Aquí tenemos esta casilla de verificación, por lo que podemos alternarla.
que luego también alternará el valor aquí.
Entonces de verdadero a falso.
Básicamente podemos hacer lo mismo que en la interfaz de usuario.
pero aquí con las herramientas de desarrollo.
Eso es muy útil y es un poco similar.
a lo que también podemos hacer con CSS aquí en la pestaña Elemento.
Entonces aquí podemos hacer cosas similares.
Entonces esto se inspiró en eso.
Y luego, por supuesto, aquí también podemos cambiar esta fecha.
Entonces podemos pasar de uno a tres directamente, o por supuesto
también podemos intentar
con valores a los que normalmente no podemos acceder desde la interfaz de usuario.
Entonces, al hacer clic en estos botones, no podemos establecer el estado en 10,
por ejemplo, pero tal vez por alguna razón necesitamos
para ver cómo se ve la interfaz de usuario con 10.
Y entonces podemos venir aquí a las herramientas de desarrollo.
y configúrelo en esto.
Ahora, nuevamente, esto es sólo un pequeño ejemplo de demostración.
Entonces aquí eso no sería importante.
Pero en aplicaciones cada vez más grandes
esto podría ser necesario de vez en cuando.
Y es muy, muy importante tener esto en cuenta.
Tenga en cuenta que puede utilizar las herramientas de desarrollo para este tipo de cosas.
Entonces eso es una cosa.
Y como mencioné antes
También es muy útil poder ver el
árbol de componentes completo aquí mismo porque
cuando tenemos muchos, muchos archivos en un proyecto y docenas
o incluso cientos de componentes en nuestra aplicación tal vez,
entonces puede volverse rápidamente fuera de control
y podemos perder de vista qué componentes están y dónde.
Y entonces un árbol de componentes puede resultar muy útil.
Entonces, en lugar de dibujar eso manualmente
simplemente venimos aquí y allí está.
Bueno, y eso es por ahora todo lo que tenía que decirte.
sobre estas herramientas de desarrollo.
muy útil.
Asegúrate de instalarlos y nosotros iremos
Volveré a ellos en futuras conferencias, seguro.