1
00:00:01,080 --> 00:00:05,040
Entonces, para terminar esta parte, quiero una vez más

2
00:00:05,040 --> 00:00:08,940
haga una comparación rápida del código React que acabamos de escribir

3
00:00:08,940 --> 00:00:12,360
con una implementación equivalente de JavaScript Vanilla

4
00:00:12,360 --> 00:00:14,013
de la misma aplicación.

5
00:00:15,420 --> 00:00:19,080
Y esta implementación de JavaScript Vanilla la realicé

6
00:00:19,080 --> 00:00:22,770
le di al principio de esta sección.

7
00:00:22,770 --> 00:00:25,830
Entonces lo colocamos directamente en la carpeta pública.

8
00:00:25,830 --> 00:00:29,883
Así que ahora abramos eso y abrámoslo aquí en el sitio.

9
00:00:31,650 --> 00:00:36,000
Bien, nuevamente, la implementación de JavaScript Vanilla es

10
00:00:36,000 --> 00:00:40,890
dentro de un archivo HTML, donde aquí tenemos primero el HTML

11
00:00:40,890 --> 00:00:43,113
y luego separó el JavaScript.

12
00:00:44,220 --> 00:00:46,860
Entonces este HTML puede resultar familiar.

13
00:00:46,860 --> 00:00:50,580
ya que es bastante similar por supuesto a este JSX.

14
00:00:50,580 --> 00:00:53,460
Lo único que no tenemos aquí es el botón.

15
00:00:53,460 --> 00:00:55,200
para abrir y cerrar el componente.

16
00:00:55,200 --> 00:00:57,660
Entonces no incluí esa parte.

17
00:00:57,660 --> 00:01:01,380
Pero de todos modos aquí comienza nuestro script.

18
00:01:01,380 --> 00:01:02,970
entonces tenemos los mismos mensajes

19
00:01:02,970 --> 00:01:05,340
y luego aquí tenemos que seleccionar manualmente todos

20
00:01:05,340 --> 00:01:07,200
de estos elementos DOM basados

21
00:01:07,200 --> 00:01:09,453
sobre las clases que les dimos.

22
00:01:11,610 --> 00:01:14,850
Luego tenemos esta variable let aquí con un paso

23
00:01:14,850 --> 00:01:17,220
que luego actualizaremos

24
00:01:17,220 --> 00:01:20,370
aquí abajo en estas funciones del controlador de eventos.

25
00:01:20,370 --> 00:01:23,280
Entonces aquí tomamos los elementos que seleccionamos manualmente.

26
00:01:23,280 --> 00:01:25,620
y usé agregar detector de eventos en ellos.

27
00:01:25,620 --> 00:01:28,110
Tenemos una lógica similar dentro de estos eventos.

28
00:01:28,110 --> 00:01:31,860
controladores para básicamente actualizar la variable de paso.

29
00:01:31,860 --> 00:01:35,490
Entonces cuando volvemos atrás, el paso es menos uno.

30
00:01:35,490 --> 00:01:38,970
y cuando avanzamos, el paso es más uno.

31
00:01:38,970 --> 00:01:42,330
Esto es un poco similar a lo que tenemos aquí.

32
00:01:42,330 --> 00:01:45,810
Entonces estos controladores de eventos, pero la gran diferencia es

33
00:01:45,810 --> 00:01:49,320
que aquí todo lo que tenemos que hacer es simplemente actualizar el estado.

34
00:01:49,320 --> 00:01:52,860
Y entonces React mantendrá la interfaz de usuario sincronizada.

35
00:01:52,860 --> 00:01:56,130
Donde aquí actualizamos por primera vez la variable de estado.

36
00:01:56,130 --> 00:01:58,110
y luego tenemos que llamar a esta función

37
00:01:58,110 --> 00:02:01,050
que hace la manipulación DOM.

38
00:02:01,050 --> 00:02:04,260
Así que aquí dentro de la función de actualización de valores de UI

39
00:02:04,260 --> 00:02:06,750
ahora necesitamos actualizar manualmente el DOM

40
00:02:06,750 --> 00:02:10,860
y mantenerlo sincronizado con este estado de paso

41
00:02:10,860 --> 00:02:14,310
porque, por supuesto, tan pronto como hagamos clic en estos botones aquí

42
00:02:14,310 --> 00:02:17,010
si todo lo que hiciéramos fuera actualizar este valor

43
00:02:17,010 --> 00:02:19,410
entonces no pasaría nada en la interfaz de usuario.

44
00:02:19,410 --> 00:02:21,120
Entonces, después de hacer eso, debemos

45
00:02:21,120 --> 00:02:23,070
llame a esta función aquí.

46
00:02:23,070 --> 00:02:26,040
O, por supuesto, también podríamos tener todos

47
00:02:26,040 --> 00:02:30,540
de este código aquí, pero como necesitamos el mismo código aquí

48
00:02:30,540 --> 00:02:32,373
Simplemente lo coloco en esta función.

49
00:02:33,810 --> 00:02:34,710
Entonces aquí

50
00:02:34,710 --> 00:02:38,160
Actualizamos manualmente el contenido del texto del mensaje.

51
00:02:38,160 --> 00:02:41,130
Mientras que aquí en JSX, simplemente se declara

52
00:02:41,130 --> 00:02:42,990
justo en el marcado.

53
00:02:42,990 --> 00:02:46,380
Entonces aquí tenemos un código imperativo que le dice a JavaScript

54
00:02:46,380 --> 00:02:48,630
paso a paso lo que hay que hacer.

55
00:02:48,630 --> 00:02:51,150
Así que actualice el contenido del texto,

56
00:02:51,150 --> 00:02:52,890
luego configure la lista de clases,

57
00:02:52,890 --> 00:02:56,190
establezca esta lista de clases y establezca esta lista de clases.

58
00:02:56,190 --> 00:02:58,080
Así que configura la clase como activa.

59
00:02:58,080 --> 00:03:01,470
en caso de que el paso esté actualmente activo.

60
00:03:01,470 --> 00:03:05,550
Mientras esté aquí, todo eso acaba de declararse en JSX.

61
00:03:05,550 --> 00:03:08,310
No le decimos a React que haga nada,

62
00:03:08,310 --> 00:03:11,370
solo escribimos que aquí el paso

63
00:03:11,370 --> 00:03:13,560
debe ser igual al paso actual

64
00:03:13,560 --> 00:03:15,420
y que aquí la clase activa

65
00:03:15,420 --> 00:03:17,460
debe estar dentro del nombre de la clase

66
00:03:17,460 --> 00:03:19,590
si el paso es mayor igual a uno,

67
00:03:19,590 --> 00:03:22,980
pero no necesitamos la manipulación imperativa de DOM

68
00:03:22,980 --> 00:03:24,003
que tenemos aquí.

69
00:03:25,110 --> 00:03:27,750
Así que hablamos de esto muchas veces.

70
00:03:27,750 --> 00:03:30,630
y creo que esto es suficiente en este momento,

71
00:03:30,630 --> 00:03:32,580
pero claro seria una buena idea

72
00:03:32,580 --> 00:03:36,270
para que sigas comparando ahora estas dos implementaciones.

73
00:03:36,270 --> 00:03:39,600
Sólo hay una pequeña cosa que quiero hacer aquí.

74
00:03:39,600 --> 00:03:42,540
que se remonta a la conferencia anterior

75
00:03:42,540 --> 00:03:45,510
donde te dije que cada componente tiene

76
00:03:45,510 --> 00:03:48,480
y gestiona su propio estado.

77
00:03:48,480 --> 00:03:52,173
Así que lo que quiero hacer ahora es demostrárselo en código.

78
00:03:53,190 --> 00:03:55,500
Así que tomemos todo este código

79
00:03:55,500 --> 00:03:57,750
y colocarlo en un nuevo componente,

80
00:03:57,750 --> 00:03:59,283
que llamaremos paso.

81
00:04:00,330 --> 00:04:04,770
O en realidad llamemos a este componente aquí Paso.

82
00:04:04,770 --> 00:04:07,143
Entonces no tendremos que copiar y pegar tanto.

83
00:04:09,090 --> 00:04:10,740
Entonces eliminemos esto

84
00:04:10,740 --> 00:04:12,310
y en realidad lo llaman pasos

85
00:04:14,100 --> 00:04:14,933
ahora a la derecha.

86
00:04:14,933 --> 00:04:17,370
Y ahora aquí hacemos nuestra aplicación nuevamente.

87
00:04:17,370 --> 00:04:18,660
entonces exportar

88
00:04:18,660 --> 00:04:19,493
por defecto

89
00:04:21,090 --> 00:04:21,923
función

90
00:04:22,830 --> 00:04:23,790
aplicación

91
00:04:23,790 --> 00:04:25,240
y luego esta aplicación

92
00:04:26,370 --> 00:04:29,343
Básicamente incluirá dos pasos.

93
00:04:31,350 --> 00:04:33,300
Entonces digamos que aquí tenemos una diferencia

94
00:04:33,300 --> 00:04:34,500
y luego queremos tener

95
00:04:37,320 --> 00:04:39,180
los pasos dos veces.

96
00:04:39,180 --> 00:04:41,790
Ahora solo necesitamos hacer algunos cambios más.

97
00:04:41,790 --> 00:04:45,930
Ahora que tenemos dos componentes en la misma página

98
00:04:45,930 --> 00:04:47,400
en realidad

99
00:04:47,400 --> 00:04:50,820
devolver una oreja diferencial para que el botón

100
00:04:50,820 --> 00:04:54,213
y luego estos pasos están todos en el mismo lugar.

101
00:04:57,000 --> 00:05:01,050
Y luego solo un cambio rápido en el CSS, por favor.

102
00:05:01,050 --> 00:05:02,970
Así que aquí abajo en el cierre

103
00:05:02,970 --> 00:05:05,193
eliminemos esta línea de código.

104
00:05:07,657 --> 00:05:10,680
Muy bien, cerremos eso.

105
00:05:10,680 --> 00:05:12,210
Ponlo aquí a un lado.

106
00:05:12,210 --> 00:05:14,160
Y luego, cuando recargues, verás

107
00:05:14,160 --> 00:05:17,070
que ahora tenemos dos pasos en la página.

108
00:05:17,070 --> 00:05:20,853
Entonces reutilizamos con éxito nuestro componente de pasos.

109
00:05:21,720 --> 00:05:23,400
Entonces esta ya no es la aplicación.

110
00:05:23,400 --> 00:05:27,070
Nuevamente, son pasos, y podemos verlo muy bien aquí.

111
00:05:28,260 --> 00:05:30,990
en las herramientas de desarrollo de React.

112
00:05:30,990 --> 00:05:33,960
Ahora tenemos un árbol de componentes un poco más grande.

113
00:05:33,960 --> 00:05:37,473
Entonces tenemos la aplicación y luego tiene dos componentes secundarios.

114
00:05:39,060 --> 00:05:41,100
Entonces, pero lo que quería mostrarles es que

115
00:05:41,100 --> 00:05:44,700
a medida que cambiamos el estado en este, por ejemplo

116
00:05:44,700 --> 00:05:47,490
El estado aquí seguirá siendo el mismo.

117
00:05:47,490 --> 00:05:50,730
Y aunque ambos son componentes de pasos

118
00:05:50,730 --> 00:05:55,080
el estado en cada uno de ellos está completamente aislado.

119
00:05:55,080 --> 00:05:57,510
Entonces, por supuesto, también puedo cerrar este,

120
00:05:57,510 --> 00:05:59,940
y éste permanece abierto.

121
00:05:59,940 --> 00:06:02,370
Y obviamente también podemos ver eso aquí abajo.

122
00:06:02,370 --> 00:06:03,280
en las herramientas de desarrollo

123
00:06:04,710 --> 00:06:06,393
incluso con un poco más de espacio.

124
00:06:07,800 --> 00:06:09,630
sí. Entonces los primeros pasos aquí.

125
00:06:09,630 --> 00:06:12,210
el estado es tres y es visible.

126
00:06:12,210 --> 00:06:13,800
Entonces eso es cierto aquí.

127
00:06:13,800 --> 00:06:15,960
Mientras que el segundo, el estado es uno

128
00:06:15,960 --> 00:06:17,880
y no se ve.

129
00:06:17,880 --> 00:06:22,350
Bien, eso fue solo una pequeña y rápida demostración.

130
00:06:22,350 --> 00:06:26,610
Y ahora que hemos usado state un par de veces aquí

131
00:06:26,610 --> 00:06:28,680
es hora de que practiques el estado

132
00:06:28,680 --> 00:06:31,803
por tu cuenta en el próximo desafío de codificación.