1
00:00:01,020 --> 00:00:03,840
Como desarrolladores web, confiamos mucho

2
00:00:03,840 --> 00:00:05,370
en Herramientas para desarrolladores.

3
00:00:05,370 --> 00:00:07,380
Entonces cosas como la consola

4
00:00:07,380 --> 00:00:11,010
o el panel Element Inspect en nuestro navegador.

5
00:00:11,010 --> 00:00:15,150
Y dado que las herramientas son tan útiles para los desarrolladores

6
00:00:15,150 --> 00:00:19,410
el equipo de React creó herramientas de desarrollo específicas para React

7
00:00:19,410 --> 00:00:23,370
lo cual puede ser extremadamente útil cuando se trabaja con el Estado.

8
00:00:23,370 --> 00:00:25,380
Y como ahora estamos trabajando con State,

9
00:00:25,380 --> 00:00:26,943
vamos a verlos.

10
00:00:28,380 --> 00:00:31,560
Y de hecho, desde el principio, recibimos este mensaje aquí.

11
00:00:31,560 --> 00:00:35,970
en nuestra Consola indicándonos que descarguemos estas herramientas de desarrollo.

12
00:00:35,970 --> 00:00:38,190
Para que puedas abrir tu consola

13
00:00:38,190 --> 00:00:40,112
y luego aquí encontrarás el enlace.

14
00:00:40,112 --> 00:00:42,972
al lugar en la documentación de React donde

15
00:00:42,972 --> 00:00:46,563
Luego podemos encontrar el enlace a las herramientas de desarrollo.

16
00:00:47,790 --> 00:00:49,020
Así que aquí está el enlace

17
00:00:49,020 --> 00:00:52,500
para Chrome Web Store y luego para los demás navegadores.

18
00:00:52,500 --> 00:00:55,050
Pero como estamos usando Google Chrome

19
00:00:55,050 --> 00:00:57,570
este es el que queremos.

20
00:00:57,570 --> 00:01:01,020
Y si por alguna razón no aparece este enlace de aquí

21
00:01:01,020 --> 00:01:02,886
en tu consola, puedes simplemente buscar en Google,

22
00:01:02,886 --> 00:01:07,886
"Herramientas de desarrollo de Chrome React".

23
00:01:09,300 --> 00:01:12,330
Así que sí, ese será el primero.

24
00:01:12,330 --> 00:01:16,110
Y entonces, una vez que estés en esta página o en esta

25
00:01:16,110 --> 00:01:19,260
que es lo mismo, puedes descargar esta extensión

26
00:01:19,260 --> 00:01:22,320
e instálalo en tu Google Chrome.

27
00:01:22,320 --> 00:01:25,080
Ahora no puedo hacer esto porque estoy en una ventana de Invitado.

28
00:01:25,080 --> 00:01:26,733
así que déjame solucionarlo rápidamente.

29
00:01:27,990 --> 00:01:30,780
Y ahora aquí en esta ventana puedo

30
00:01:30,780 --> 00:01:33,420
Utilice también estas herramientas de desarrollo.

31
00:01:33,420 --> 00:01:35,640
Espero que hayas instalado la herramienta.

32
00:01:35,640 --> 00:01:38,130
Como cualquier otra extensión de Chrome.

33
00:01:38,130 --> 00:01:40,500
Y luego, una vez que lo hiciste, aquí abajo

34
00:01:40,500 --> 00:01:43,860
Una vez que tengas estas herramientas de desarrollo abiertas aquí,

35
00:01:43,860 --> 00:01:47,310
Verás una pestaña que aparece aquí.

36
00:01:47,310 --> 00:01:51,270
o en realidad dos que provienen de las herramientas de desarrollo de React.

37
00:01:51,270 --> 00:01:54,780
Esa es esta pestaña Componente y esta pestaña Perfilador.

38
00:01:54,780 --> 00:01:56,850
Y como vamos a usar esto todo el tiempo

39
00:01:56,850 --> 00:01:59,733
incluso podemos arrastrar, bueno en realidad no.

40
00:02:01,050 --> 00:02:04,710
Ahora podemos arrastrarlo aquí al principio donde

41
00:02:04,710 --> 00:02:06,480
entonces se quedará.

42
00:02:06,480 --> 00:02:09,210
Ahora aquí dice cargar el árbol de elementos de React,

43
00:02:09,210 --> 00:02:11,100
que debería ser rápido.

44
00:02:11,100 --> 00:02:12,750
Así que intentémoslo de nuevo.

45
00:02:12,750 --> 00:02:15,840
Y de hecho solo me funcionó después del cierre.

46
00:02:15,840 --> 00:02:18,270
y reabrir mi navegador.

47
00:02:18,270 --> 00:02:22,050
Entonces, si ve el mismo mensaje de error que había visto anteriormente

48
00:02:22,050 --> 00:02:25,860
aquí abajo, entonces por favor continúa y haz lo mismo ahora.

49
00:02:25,860 --> 00:02:27,870
Pero ahora todo está funcionando.

50
00:02:27,870 --> 00:02:31,290
Entonces, echemos un vistazo a estas herramientas de desarrollo y

51
00:02:31,290 --> 00:02:35,520
en particular de este componente de las herramientas de desarrollo.

52
00:02:35,520 --> 00:02:39,060
Porque nuevamente, hay otra parte que es este Profiler.

53
00:02:39,060 --> 00:02:41,850
pero volveremos a eso un poco más tarde.

54
00:02:41,850 --> 00:02:45,480
Entonces, Componentes, básicamente, como su nombre lo dice, es

55
00:02:45,480 --> 00:02:48,012
para mostrar un árbol de componentes.

56
00:02:48,012 --> 00:02:52,320
Ahora, ahora solo tenemos un componente, así que solo

57
00:02:52,320 --> 00:02:54,750
el componente de la aplicación, y entonces esto

58
00:02:54,750 --> 00:02:57,180
es el único que podemos ver aquí.

59
00:02:57,180 --> 00:02:59,130
Pero si tuviéramos más, entonces todos

60
00:02:59,130 --> 00:03:01,140
estaría apareciendo aquí abajo

61
00:03:01,140 --> 00:03:04,140
y pudimos ver todo nuestro árbol de componentes.

62
00:03:04,140 --> 00:03:07,170
Así que les mostraré esto nuevamente una vez que lo tengamos.

63
00:03:07,170 --> 00:03:10,320
El punto ahora es que podemos echar un vistazo

64
00:03:10,320 --> 00:03:13,263
en todo el Estado que se encuentra dentro de cada componente.

65
00:03:14,400 --> 00:03:18,663
Para hacer esto aún un poco más grande aquí para que puedan verlo.

66
00:03:20,198 --> 00:03:22,170
Bueno, quizás eso sea demasiado grande.

67
00:03:22,170 --> 00:03:25,743
o también puedo agrandar toda la ventana.

68
00:03:26,850 --> 00:03:28,800
Entonces así.

69
00:03:28,800 --> 00:03:31,710
Entonces ves aquí que primero tenemos estos accesorios.

70
00:03:31,710 --> 00:03:34,560
que es para todos los accesorios que el componente

71
00:03:34,560 --> 00:03:37,470
que actualmente está seleccionado está recibiendo.

72
00:03:37,470 --> 00:03:39,300
Y en este caso, nosotros, por supuesto,

73
00:03:39,300 --> 00:03:42,090
no reciben accesorios, así que no hay nada allí.

74
00:03:42,090 --> 00:03:44,310
Pero aquí está la parte interesante.

75
00:03:44,310 --> 00:03:47,130
Entonces aquí tenemos una lista de todos los ganchos.

76
00:03:47,130 --> 00:03:49,560
Y aquí tenemos estas dos entradas.

77
00:03:49,560 --> 00:03:52,560
uno para cada gancho estatal que utilizamos.

78
00:03:52,560 --> 00:03:56,610
Entonces recuerda que creamos el Estado con el uso Estado.

79
00:03:56,610 --> 00:03:59,430
y estas funciones de uso son ganchos;

80
00:03:59,430 --> 00:04:03,180
por lo tanto, están aquí en la lista de ganchos.

81
00:04:03,180 --> 00:04:05,940
Pero de todos modos, lo interesante es que ahora podemos

82
00:04:05,940 --> 00:04:09,813
Manipule estos valores aquí abajo para experimentar con ellos.

83
00:04:10,680 --> 00:04:13,080
Por ejemplo, cuando tenemos un valor de lingotes

84
00:04:13,080 --> 00:04:17,520
Aquí tenemos esta casilla de verificación, por lo que podemos alternarla.

85
00:04:17,520 --> 00:04:20,190
que luego también alternará el valor aquí.

86
00:04:20,190 --> 00:04:21,573
Entonces de verdadero a falso.

87
00:04:22,650 --> 00:04:26,070
Básicamente podemos hacer lo mismo que en la interfaz de usuario.

88
00:04:26,070 --> 00:04:27,810
pero aquí con las herramientas de desarrollo.

89
00:04:27,810 --> 00:04:31,050
Eso es muy útil y es un poco similar.

90
00:04:31,050 --> 00:04:34,980
a lo que también podemos hacer con CSS aquí en la pestaña Elemento.

91
00:04:34,980 --> 00:04:37,890
Entonces aquí podemos hacer cosas similares.

92
00:04:37,890 --> 00:04:40,260
Entonces esto se inspiró en eso.

93
00:04:40,260 --> 00:04:43,101
Y luego, por supuesto, aquí también podemos cambiar esta fecha.

94
00:04:43,101 --> 00:04:48,000
Entonces podemos pasar de uno a tres directamente, o por supuesto

95
00:04:48,000 --> 00:04:49,230
también podemos intentar

96
00:04:49,230 --> 00:04:52,593
con valores a los que normalmente no podemos acceder desde la interfaz de usuario.

97
00:04:53,610 --> 00:04:57,690
Entonces, al hacer clic en estos botones, no podemos establecer el estado en 10,

98
00:04:57,690 --> 00:05:01,277
por ejemplo, pero tal vez por alguna razón necesitamos

99
00:05:01,277 --> 00:05:03,600
para ver cómo se ve la interfaz de usuario con 10.

100
00:05:03,600 --> 00:05:06,090
Y entonces podemos venir aquí a las herramientas de desarrollo.

101
00:05:06,090 --> 00:05:08,280
y configúrelo en esto.

102
00:05:08,280 --> 00:05:10,590
Ahora, nuevamente, esto es sólo un pequeño ejemplo de demostración.

103
00:05:10,590 --> 00:05:12,480
Entonces aquí eso no sería importante.

104
00:05:12,480 --> 00:05:15,660
Pero en aplicaciones cada vez más grandes

105
00:05:15,660 --> 00:05:18,030
esto podría ser necesario de vez en cuando.

106
00:05:18,030 --> 00:05:20,670
Y es muy, muy importante tener esto en cuenta.

107
00:05:20,670 --> 00:05:24,693
Tenga en cuenta que puede utilizar las herramientas de desarrollo para este tipo de cosas.

108
00:05:26,130 --> 00:05:27,450
Entonces eso es una cosa.

109
00:05:27,450 --> 00:05:29,400
Y como mencioné antes

110
00:05:29,400 --> 00:05:31,800
También es muy útil poder ver el

111
00:05:31,800 --> 00:05:32,633
árbol de componentes completo aquí mismo porque

112
00:05:32,633 --> 00:05:37,633
cuando tenemos muchos, muchos archivos en un proyecto y docenas

113
00:05:37,797 --> 00:05:41,110
o incluso cientos de componentes en nuestra aplicación tal vez,

114
00:05:41,110 --> 00:05:44,100
entonces puede volverse rápidamente fuera de control

115
00:05:44,100 --> 00:05:47,280
y podemos perder de vista qué componentes están y dónde.

116
00:05:47,280 --> 00:05:50,550
Y entonces un árbol de componentes puede resultar muy útil.

117
00:05:50,550 --> 00:05:52,500
Entonces, en lugar de dibujar eso manualmente

118
00:05:52,500 --> 00:05:54,633
simplemente venimos aquí y allí está.

119
00:05:55,980 --> 00:05:58,800
Bueno, y eso es por ahora todo lo que tenía que decirte.

120
00:05:58,800 --> 00:06:00,300
sobre estas herramientas de desarrollo.

121
00:06:00,300 --> 00:06:01,200
muy útil.

122
00:06:01,200 --> 00:06:04,050
Asegúrate de instalarlos y nosotros iremos

123
00:06:04,050 --> 00:06:06,903
Volveré a ellos en futuras conferencias, seguro.