1
00:00:01,050 --> 00:00:03,690
Ahora que sabemos qué estado es

2
00:00:03,690 --> 00:00:07,263
Intentemos implementarlo en nuestro pequeño proyecto.

3
00:00:08,580 --> 00:00:10,440
Y solo como un rápido recordatorio,

4
00:00:10,440 --> 00:00:11,413
lo que queremos que pase

5
00:00:11,413 --> 00:00:16,200
es que cuando hacemos clic en este botón siguiente y este anterior

6
00:00:16,200 --> 00:00:18,840
Básicamente queremos que el paso cambie.

7
00:00:18,840 --> 00:00:21,750
Entonces el paso aquí actualmente está establecido en uno,

8
00:00:21,750 --> 00:00:25,530
pero queremos que esta variable de paso sea básicamente dinámica.

9
00:00:25,530 --> 00:00:26,363
Y por eso,

10
00:00:26,363 --> 00:00:30,853
Ahora necesitamos agregar una nueva parte de estado a nuestro componente.

11
00:00:30,853 --> 00:00:33,840
Así que deshagámonos de esto

12
00:00:33,840 --> 00:00:36,619
y agregar ese nuevo pedazo de estado.

13
00:00:36,619 --> 00:00:40,530
Entonces, para utilizar el estado en la práctica en un componente,

14
00:00:40,530 --> 00:00:42,660
Lo hacemos en tres pasos.

15
00:00:42,660 --> 00:00:45,660
Primero, agregamos una nueva variable de estado,

16
00:00:45,660 --> 00:00:49,830
luego lo usamos en un código y generalmente en JSX.

17
00:00:49,830 --> 00:00:53,340
Y tercero, luego actualizamos el estado.

18
00:00:53,340 --> 00:00:55,140
en algún controlador de eventos.

19
00:00:55,140 --> 00:00:57,210
Y entonces comencemos con el primer paso.

20
00:00:57,210 --> 00:01:00,420
que es realmente crear la variable de estado.

21
00:01:00,420 --> 00:01:03,870
Y lo hacemos usando la función de estado de uso.

22
00:01:03,870 --> 00:01:06,300
que React nos proporciona.

23
00:01:06,300 --> 00:01:09,330
Entonces ese es el estado de uso,

24
00:01:09,330 --> 00:01:11,452
y si ahora presiono enter en mi teclado

25
00:01:11,452 --> 00:01:14,550
ya que este estado de uso aquí está seleccionado

26
00:01:14,550 --> 00:01:16,559
en el código VS autocompletar,

27
00:01:16,559 --> 00:01:19,380
El código VS se importará automáticamente

28
00:01:19,380 --> 00:01:22,140
la función de estado de uso de React.

29
00:01:22,140 --> 00:01:24,150
Entonces esta línea de código aquí.

30
00:01:24,150 --> 00:01:26,730
Ahora si por alguna razón eso no sucedió

31
00:01:26,730 --> 00:01:28,260
en tu editor de código,

32
00:01:28,260 --> 00:01:31,350
luego asegúrese de importar la función de estado de uso

33
00:01:31,350 --> 00:01:33,900
de React de esa manera.

34
00:01:33,900 --> 00:01:36,990
Entonces la función de estado de uso es una función,

35
00:01:36,990 --> 00:01:39,180
y por eso se necesita un argumento,

36
00:01:39,180 --> 00:01:41,850
y el argumento que necesitamos especificar aquí

37
00:01:41,850 --> 00:01:45,305
es el valor predeterminado de esta variable de estado.

38
00:01:45,305 --> 00:01:49,644
Entonces, en nuestro caso, ese es el paso número uno, ¿verdad?

39
00:01:49,644 --> 00:01:52,320
Ahora esto usa la función de estado aquí.

40
00:01:52,320 --> 00:01:53,850
devolverá una matriz.

41
00:01:53,850 --> 00:01:58,850
Y en realidad llamémoslo matriz por ahora.

42
00:01:59,007 --> 00:02:01,233
y luego regístrelo en la consola.

43
00:02:02,130 --> 00:02:03,693
Así que para que lo veas.

44
00:02:04,800 --> 00:02:07,869
Y entonces sí, ahora el paso ya no está definido.

45
00:02:07,869 --> 00:02:11,070
Dejemos eso atrás por un minuto.

46
00:02:11,070 --> 00:02:16,070
El paso es igual a uno y luego abre nuestra consola aquí.

47
00:02:19,890 --> 00:02:21,690
Entonces esta es la matriz.

48
00:02:21,690 --> 00:02:24,510
Y como ves, aquí tiene dos valores.

49
00:02:24,510 --> 00:02:27,660
Entonces este primer valor, entonces este número uno,

50
00:02:27,660 --> 00:02:31,050
es el valor predeterminado que queremos para nuestro estado.

51
00:02:31,050 --> 00:02:32,370
Entonces este de aquí.

52
00:02:32,370 --> 00:02:34,260
Y luego el segundo es una función.

53
00:02:34,260 --> 00:02:37,760
que podemos usar para actualizar nuestra variable de estado.

54
00:02:37,760 --> 00:02:39,450
Entonces lo que solemos hacer

55
00:02:39,450 --> 00:02:42,903
es luego desestructurar inmediatamente esta matriz aquí mismo.

56
00:02:43,904 --> 00:02:48,904
Entonces, primero tenemos el paso, que nuevamente es el primero aquí.

57
00:02:50,520 --> 00:02:53,610
Y esta será nuestra propia variable de estado.

58
00:02:53,610 --> 00:02:56,010
Y luego, en segundo lugar, nuevamente tenemos la función.

59
00:02:56,010 --> 00:02:58,017
Y a este lo solemos llamar set

60
00:02:58,017 --> 00:03:00,810
y luego el nombre de la variable de estado.

61
00:03:00,810 --> 00:03:02,901
Así que, en este caso, dé el paso.

62
00:03:02,901 --> 00:03:05,871
Ahora podemos deshacernos de esto.

63
00:03:05,871 --> 00:03:07,740
Y si ahora recargamos,

64
00:03:07,740 --> 00:03:11,580
vemos que nuestra aplicación ya está usando ese estado,

65
00:03:11,580 --> 00:03:14,670
entonces esa variable de paso, porque esto es exactamente

66
00:03:14,670 --> 00:03:17,490
el nombre de la variable que teníamos antes.

67
00:03:17,490 --> 00:03:21,720
Entonces ya estamos usando el paso en nuestro JSX aquí,

68
00:03:21,720 --> 00:03:25,143
y aquí, y también aquí para el nombre de esta clase.

69
00:03:26,270 --> 00:03:30,090
Bien, hemos completado el primer paso.

70
00:03:30,090 --> 00:03:32,010
de definir la variable de estado

71
00:03:32,010 --> 00:03:33,810
usando la función de estado de uso,

72
00:03:33,810 --> 00:03:38,412
y el segundo paso en el que usamos la variable de estado,

73
00:03:38,412 --> 00:03:42,390
entonces este paso es parte del estado en nuestro código.

74
00:03:42,390 --> 00:03:45,438
Y ahora el tercer paso es actualizar el estado.

75
00:03:45,438 --> 00:03:47,043
en un controlador de eventos.

76
00:03:48,870 --> 00:03:50,580
Así que deshagámonos de esta alerta.

77
00:03:50,580 --> 00:03:52,748
que era sólo un marcador de posición.

78
00:03:52,748 --> 00:03:55,500
O en realidad comencemos con este.

79
00:03:55,500 --> 00:03:56,613
Entonces en el próximo.

80
00:03:58,200 --> 00:04:02,820
Entonces, ahora es el momento de usar esta función de establecer pasos aquí.

81
00:04:02,820 --> 00:04:07,820
Entonces usamos set step para actualizar la variable de estado del paso.

82
00:04:09,570 --> 00:04:12,510
¿Y entonces cuál queremos que sea el paso?

83
00:04:12,510 --> 00:04:17,510
Bueno, básicamente sólo el paso actual más uno, ¿verdad?

84
00:04:19,440 --> 00:04:22,822
Entonces, cuando hagamos clic en el botón siguiente, el paso debería subir un paso.

85
00:04:22,822 --> 00:04:26,790
Y ese es el paso actual más uno.

86
00:04:26,790 --> 00:04:29,035
Y ahora estamos listos para probar esto.

87
00:04:29,035 --> 00:04:31,110
Así que veamos,

88
00:04:31,110 --> 00:04:33,586
y sí, eso funciona.

89
00:04:33,586 --> 00:04:38,586
Nuestro componente ahora es dinámico y felicidades.

90
00:04:39,000 --> 00:04:44,000
acabas de desbloquear el poder del estado y el poder de React.

91
00:04:44,520 --> 00:04:47,850
Entonces, ¿qué pasó aquí cuando hicimos clic en este botón?

92
00:04:47,850 --> 00:04:51,870
fue que se capturó la función de manejo del siguiente evento,

93
00:04:51,870 --> 00:04:56,610
y este controlador de eventos actualizó el estado del paso.

94
00:04:56,610 --> 00:04:59,820
Y entonces React se renderiza automáticamente

95
00:04:59,820 --> 00:05:02,133
esta nueva vista de componentes para nosotros.

96
00:05:03,210 --> 00:05:05,430
Eso es simplemente asombroso.

97
00:05:05,430 --> 00:05:06,570
Ahora volvamos aquí,

98
00:05:06,570 --> 00:05:10,020
e implementar también la función de manejo anterior.

99
00:05:10,020 --> 00:05:12,656
Y aquí básicamente queremos lo contrario.

100
00:05:12,656 --> 00:05:17,343
Así que establezca el paso y luego el paso menos uno.

101
00:05:18,330 --> 00:05:19,740
Así que veamos,

102
00:05:19,740 --> 00:05:22,080
y sí, eso funciona.

103
00:05:22,080 --> 00:05:26,160
Sin embargo, ahora mismo tenemos un pequeño error en nuestra aplicación.

104
00:05:26,160 --> 00:05:29,343
porque mira lo que pasa cuando sigo haciendo clic aquí.

105
00:05:30,660 --> 00:05:34,920
Entonces ves el paso cero y el paso menos uno y así sucesivamente.

106
00:05:34,920 --> 00:05:36,090
Y lo mismo aquí.

107
00:05:36,090 --> 00:05:39,210
Entonces, si sigo adelante, entonces, por supuesto, no tendremos más elementos.

108
00:05:39,210 --> 00:05:41,133
en nuestra matriz para mostrar.

109
00:05:41,133 --> 00:05:43,770
Entonces la matriz solo tiene tres elementos.

110
00:05:43,770 --> 00:05:47,370
Y entonces el paso cinco o cualquier cosa por debajo del paso cero

111
00:05:47,370 --> 00:05:48,960
no tiene ningún sentido.

112
00:05:48,960 --> 00:05:50,666
Y aquí en la función de controlador,

113
00:05:50,666 --> 00:05:54,960
simplemente podemos agregar una condición para evitarlo.

114
00:05:54,960 --> 00:05:59,960
Entonces digamos que si el paso es mayor que uno

115
00:06:01,230 --> 00:06:03,570
solo entonces establece este paso,

116
00:06:03,570 --> 00:06:06,330
y luego, aquí algo similar.

117
00:06:06,330 --> 00:06:11,283
Entonces si el paso es menor a tres.

118
00:06:12,360 --> 00:06:15,000
Así que veamos, recarguemos esto.

119
00:06:15,000 --> 00:06:19,692
Y ahora si hago clic en Siguiente, ahora el paso es tres,

120
00:06:19,692 --> 00:06:22,170
entonces esto de aquí ya no es cierto.

121
00:06:22,170 --> 00:06:24,828
Y ahora entonces esta parte no debería ejecutarse,

122
00:06:24,828 --> 00:06:28,320
y de hecho, eso funciona.

123
00:06:28,320 --> 00:06:30,180
Entonces arreglamos ese pequeño error.

124
00:06:30,180 --> 00:06:34,507
y ahora nuestro componente está funcionando tal como lo queremos.

125
00:06:34,507 --> 00:06:35,703
excelente.

126
00:06:36,840 --> 00:06:38,460
Ahora solo algunas cosas más

127
00:06:38,460 --> 00:06:41,880
sobre la creación de la variable de estado aquí.

128
00:06:41,880 --> 00:06:44,483
Primero que nada, aquí usamos la función de estado.

129
00:06:44,483 --> 00:06:47,520
es lo que llamamos un gancho en React.

130
00:06:47,520 --> 00:06:48,738
Y podemos identificar ganchos.

131
00:06:48,738 --> 00:06:52,651
porque comienzan con esta palabra clave de uso aquí.

132
00:06:52,651 --> 00:06:56,357
Entonces, todas las funciones de React que comienzan con se usan así,

133
00:06:56,357 --> 00:07:00,306
por ejemplo, usar efecto o usar reductor,

134
00:07:00,306 --> 00:07:04,110
y, por supuesto, este estado de uso son ganchos de React.

135
00:07:04,110 --> 00:07:05,370
Y aprenderemos en detalle.

136
00:07:05,370 --> 00:07:08,100
Qué es un gancho de React un poco más tarde.

137
00:07:08,100 --> 00:07:09,810
Pero por ahora, lo que necesitas saber

138
00:07:09,810 --> 00:07:11,465
es que solo podemos llamar a ganchos

139
00:07:11,465 --> 00:07:15,341
como estado de uso, en el nivel superior de la función.

140
00:07:15,341 --> 00:07:18,870
Entonces, este componente funciona aquí.

141
00:07:18,870 --> 00:07:22,740
Así que sólo aquí se permite llamar al estado de uso.

142
00:07:22,740 --> 00:07:24,750
no dentro de una declaración if,

143
00:07:24,750 --> 00:07:28,020
o dentro de otra función, o dentro de un bucle.

144
00:07:28,020 --> 00:07:31,410
Así, por ejemplo, no podríamos hacer esto.

145
00:07:31,410 --> 00:07:34,020
Entonces React inmediatamente nos diría

146
00:07:34,020 --> 00:07:37,440
que el gancho de estado de uso quedó atrapado en una función

147
00:07:37,440 --> 00:07:40,165
eso no es un componente de la función React.

148
00:07:40,165 --> 00:07:42,993
Entonces sólo podemos hacer eso aquí mismo.

149
00:07:44,100 --> 00:07:47,293
Entonces tampoco en una declaración if.

150
00:07:47,293 --> 00:07:50,763
Entonces digamos que si es cierto, por ejemplo,

151
00:07:52,742 --> 00:07:56,310
entonces veamos, y de nuevo, ves inmediatamente

152
00:07:56,310 --> 00:07:58,020
que nos sale este error diciendo

153
00:07:58,020 --> 00:08:00,570
ese estado de uso fue capturado condicionalmente,

154
00:08:00,570 --> 00:08:04,213
y antes de que llegue a este dramático error aquí,

155
00:08:04,213 --> 00:08:07,470
Incluso podemos ver en esta superposición en el código VS.

156
00:08:07,470 --> 00:08:10,500
Ese gancho de React fue atrapado condicionalmente.

157
00:08:10,500 --> 00:08:13,650
Y este de aquí, por cierto, proviene de ESLint.

158
00:08:13,650 --> 00:08:14,576
Y por eso era tan importante

159
00:08:14,576 --> 00:08:17,373
para configurar ESLint al principio.

160
00:08:18,392 --> 00:08:19,770
bueno.

161
00:08:19,770 --> 00:08:22,320
Pero de todos modos, eliminemos todo esto.

162
00:08:22,320 --> 00:08:25,080
Y ahora la otra cosa importante sobre el estado.

163
00:08:25,080 --> 00:08:27,990
es que en realidad sólo deberíamos actualizar el estado

164
00:08:27,990 --> 00:08:30,810
usando esta función de configuración aquí mismo.

165
00:08:30,810 --> 00:08:32,550
Entonces no manualmente.

166
00:08:32,550 --> 00:08:35,653
Ahora, para terminar, acabo de notar que aquí

167
00:08:35,653 --> 00:08:40,653
En realidad, no necesitamos esto cuando usamos nuestro paso aquí.

168
00:08:40,932 --> 00:08:45,390
Entonces no hay necesidad de una plantilla literal aquí.

169
00:08:45,390 --> 00:08:48,120
porque aquí realmente no estamos creando una nueva cadena.

170
00:08:48,120 --> 00:08:50,912
Básicamente estamos generando una nueva cadena.

171
00:08:50,912 --> 00:08:54,570
Basado aquí en este operador de tornería.

172
00:08:54,570 --> 00:08:55,403
pero de todos modos,

173
00:08:55,403 --> 00:08:58,980
ahora tenemos este bonito componente dinámico

174
00:08:58,980 --> 00:09:01,740
todo sin las manipulaciones dom imperativas

175
00:09:01,740 --> 00:09:04,053
que necesitamos en JavaScript básico.