1
00:00:01,020 --> 00:00:02,730
Ahora, para tener una primera sensación.

2
00:00:02,730 --> 00:00:07,350
sobre cómo React mantiene la interfaz de usuario sincronizada con el estado,

3
00:00:07,350 --> 00:00:10,410
comparemos rápidamente la aplicación de consejos que creamos

4
00:00:10,410 --> 00:00:11,790
en la primera sección,

5
00:00:11,790 --> 00:00:14,400
con una implementación de JavaScript Vanilla

6
00:00:14,400 --> 00:00:16,323
de la misma aplicación.

7
00:00:17,520 --> 00:00:19,920
Así que aquí los tengo abiertos uno al lado del otro,

8
00:00:19,920 --> 00:00:21,720
y si quieres seguirme,

9
00:00:21,720 --> 00:00:26,010
De hecho, agregué este archivo vanillajavascript.html

10
00:00:26,010 --> 00:00:29,160
directamente en la misma zona de pruebas de código

11
00:00:29,160 --> 00:00:32,853
que utilizamos para crear esta aplicación de primeros consejos.

12
00:00:33,690 --> 00:00:35,460
Así que aquí, en la carpeta de origen,

13
00:00:35,460 --> 00:00:37,740
ahora existe este vanilla.js,

14
00:00:37,740 --> 00:00:41,280
o en realidad el archivo vanilla-.html.

15
00:00:41,280 --> 00:00:44,130
Y de nuevo, publicaré el enlace.

16
00:00:44,130 --> 00:00:49,110
a este código sandbox en esta conferencia, ¿de acuerdo?

17
00:00:49,110 --> 00:00:52,890
Entonces, en caso de que no recuerdes realmente lo que hicimos aquí,

18
00:00:52,890 --> 00:00:54,390
siempre puedes pausar el video

19
00:00:54,390 --> 00:00:58,500
y simplemente analiza este código aquí por un segundo por ti mismo.

20
00:00:58,500 --> 00:01:00,570
Entonces, lo que quiero hacer ahora de nuevo,

21
00:01:00,570 --> 00:01:03,450
es simplemente comparar rápidamente el código de React

22
00:01:03,450 --> 00:01:06,963
que escribimos antes con este JavaScript Vanilla.

23
00:01:07,980 --> 00:01:10,920
Ahora, irónicamente, esta implementación Vanilla JavaScript

24
00:01:10,920 --> 00:01:13,770
en realidad está en un archivo HTML.

25
00:01:13,770 --> 00:01:16,680
Entonces coloqué todos los archivos HTML.

26
00:01:16,680 --> 00:01:20,940
y luego también el JavaScript directamente en un archivo HTML,

27
00:01:20,940 --> 00:01:23,550
sólo para mantenerlo todo en el mismo lugar.

28
00:01:23,550 --> 00:01:26,640
Pero esto ya nos muestra la primera diferencia.

29
00:01:26,640 --> 00:01:28,710
entre las dos filosofías.

30
00:01:28,710 --> 00:01:30,210
Así que aquí,

31
00:01:30,210 --> 00:01:33,660
todo se hace básicamente en JavaScript,

32
00:01:33,660 --> 00:01:36,360
así que incluso el JSX.

33
00:01:36,360 --> 00:01:39,660
Básicamente, este tipo de HTML aquí

34
00:01:39,660 --> 00:01:42,150
está escrito dentro de JavaScript.

35
00:01:42,150 --> 00:01:45,030
Entonces JavaScript se encarga de todo.

36
00:01:45,030 --> 00:01:47,580
Mientras esté aquí, en Vanilla JavaScript,

37
00:01:47,580 --> 00:01:50,040
HTML todavía está a cargo.

38
00:01:50,040 --> 00:01:53,340
Entonces tenemos un archivo HTML, y ese archivo HTML

39
00:01:53,340 --> 00:01:56,760
Luego está incluyendo JavaScript en él.

40
00:01:56,760 --> 00:02:00,060
Básicamente es al revés, ¿verdad?

41
00:02:00,060 --> 00:02:02,310
Así que justo dentro de este HTML,

42
00:02:02,310 --> 00:02:06,060
Todavía tenemos nuestro mismo H1 aquí, por consejo.

43
00:02:06,060 --> 00:02:08,040
La única diferencia es que está vacío.

44
00:02:08,040 --> 00:02:12,240
Mientras que aquí, incluimos ese estado de consejo,

45
00:02:12,240 --> 00:02:16,290
luego tenemos el botón y el párrafo del mensaje.

46
00:02:16,290 --> 00:02:18,870
Luego, dentro del guión,

47
00:02:18,870 --> 00:02:21,570
entonces, dentro de la parte de JavaScript,

48
00:02:21,570 --> 00:02:22,560
necesitamos, por supuesto,

49
00:02:22,560 --> 00:02:26,490
luego seleccione manualmente estos tres elementos DOM.

50
00:02:26,490 --> 00:02:28,710
Entonces seleccioné el elemento de consejo,

51
00:02:28,710 --> 00:02:33,390
el botón y también este de aquí para el conteo.

52
00:02:33,390 --> 00:02:34,500
Y por eso,

53
00:02:34,500 --> 00:02:37,410
todos ellos necesitaban tener esta clase,

54
00:02:37,410 --> 00:02:40,110
mientras estamos aquí, bueno, no necesitamos nada de eso.

55
00:02:40,110 --> 00:02:43,410
No hay aquí ninguna clase en ninguno de estos elementos.

56
00:02:43,410 --> 00:02:46,923
Y además no los estamos seleccionando manualmente, ¿verdad?

57
00:02:48,960 --> 00:02:51,750
Luego tenemos esta función de obtener consejos,

58
00:02:51,750 --> 00:02:54,270
a lo que llegaremos en un minuto,

59
00:02:54,270 --> 00:02:57,990
y entonces todavía tenemos básicamente dos piezas

60
00:02:57,990 --> 00:03:00,150
que podemos llamar estado.

61
00:03:00,150 --> 00:03:03,330
Entonces tenemos un valor de conteo, que comienza en cero,

62
00:03:03,330 --> 00:03:05,070
y un consejo.

63
00:03:05,070 --> 00:03:08,463
Y estos son exactamente los mismos que aquí, estos estados.

64
00:03:09,750 --> 00:03:13,833
Luego, finalmente, al final, también adjuntamos un detector de eventos.

65
00:03:14,760 --> 00:03:17,970
Entonces esta función de obtener consejos aquí mismo.

66
00:03:17,970 --> 00:03:20,160
Entonces lo adjuntamos al botón.

67
00:03:20,160 --> 00:03:22,290
que seleccionamos aquí manualmente antes,

68
00:03:22,290 --> 00:03:23,940
mientras aquí, en el JSX,

69
00:03:23,940 --> 00:03:27,960
Lo hacemos usando este atributo al hacer clic aquí.

70
00:03:27,960 --> 00:03:30,930
Así que desde el principio verás inmediatamente

71
00:03:30,930 --> 00:03:34,500
que necesitamos hacer muchas cosas manualmente aquí,

72
00:03:34,500 --> 00:03:36,960
que aquí, sucede de forma más automática.

73
00:03:36,960 --> 00:03:39,390
Y nuevamente, que aquí realmente está el JavaScript.

74
00:03:39,390 --> 00:03:41,550
que se encarga de todo,

75
00:03:41,550 --> 00:03:44,100
mientras que aquí, sigue siendo HTML.

76
00:03:44,100 --> 00:03:45,930
Pero de todos modos, vamos ahora a llegar aquí.

77
00:03:45,930 --> 00:03:48,030
al corazón de la aplicación,

78
00:03:48,030 --> 00:03:51,030
que es realmente esta función de obtener consejos.

79
00:03:51,030 --> 00:03:54,120
Así como aquí, en nuestra implementación de React,

80
00:03:54,120 --> 00:03:56,610
Empezamos obteniendo los datos.

81
00:03:56,610 --> 00:04:00,840
Y luego actualizamos el servicio, o incluso el asesoramiento,

82
00:04:00,840 --> 00:04:05,730
y los valores de conteo que definimos aquí abajo, ¿verdad?

83
00:04:05,730 --> 00:04:07,560
Así que estamos actualizando el recuento aquí.

84
00:04:07,560 --> 00:04:10,170
y el consejo aquí mismo.

85
00:04:10,170 --> 00:04:12,630
Sin embargo, simplemente actualizando estos dos valores

86
00:04:12,630 --> 00:04:14,760
Por supuesto, no hará nada.

87
00:04:14,760 --> 00:04:17,640
Entonces la interfaz de usuario no cambiará.

88
00:04:17,640 --> 00:04:20,820
cuando actualizamos estos valores de JavaScript.

89
00:04:20,820 --> 00:04:23,550
Mientras que aquí, en este ejemplo de React,

90
00:04:23,550 --> 00:04:27,720
tan pronto como actualicemos el consejo y el estado del conteo,

91
00:04:27,720 --> 00:04:30,780
automáticamente, React mantuvo la interfaz de usuario

92
00:04:30,780 --> 00:04:33,210
en sincronía con estos dos valores.

93
00:04:33,210 --> 00:04:36,240
Y ese es básicamente el gran mensaje que recibimos.

94
00:04:36,240 --> 00:04:38,250
de la conferencia anterior, ¿verdad?

95
00:04:38,250 --> 00:04:41,730
Entonces React y todos estos otros frameworks front-end

96
00:04:41,730 --> 00:04:45,420
son realmente buenos para mantener los datos sincronizados automáticamente

97
00:04:45,420 --> 00:04:47,250
con la interfaz de usuario.

98
00:04:47,250 --> 00:04:49,950
Y nuevamente, eso es exactamente lo que está sucediendo aquí.

99
00:04:49,950 --> 00:04:53,820
Lo único que nos importa aquí es configurar los nuevos datos,

100
00:04:53,820 --> 00:04:55,320
y eso es todo lo que hacemos.

101
00:04:55,320 --> 00:04:58,140
React es el que automáticamente se encarga

102
00:04:58,140 --> 00:05:00,210
de actualizar la interfaz de usuario

103
00:05:00,210 --> 00:05:02,253
sin que tengamos que hacer nada.

104
00:05:03,120 --> 00:05:04,470
Pero aquí, por supuesto,

105
00:05:04,470 --> 00:05:07,770
en la implementación de Vanilla JavaScript,

106
00:05:07,770 --> 00:05:09,780
Necesitamos hacerlo manualmente.

107
00:05:09,780 --> 00:05:14,010
Por lo tanto, debemos mantener manualmente los datos sincronizados con la interfaz de usuario.

108
00:05:14,010 --> 00:05:15,540
Entonces tenemos los datos aquí,

109
00:05:15,540 --> 00:05:19,980
y luego usamos esos datos para actualizar el DOM manualmente.

110
00:05:19,980 --> 00:05:21,930
Entonces llegamos aquí a nuestro elemento de conteo,

111
00:05:21,930 --> 00:05:23,400
y el elemento de consejo

112
00:05:23,400 --> 00:05:26,220
que también seleccionamos manualmente anteriormente,

113
00:05:26,220 --> 00:05:28,980
y cambiamos su propiedad de contenido de texto,

114
00:05:28,980 --> 00:05:31,890
que es simplemente una manipulación DOM normal.

115
00:05:31,890 --> 00:05:34,470
Entonces aquí configuramos este como la variable de conteo,

116
00:05:34,470 --> 00:05:37,530
y este a la variable consejo.

117
00:05:37,530 --> 00:05:40,500
Y esta es realmente una diferencia fundamental.

118
00:05:40,500 --> 00:05:41,940
y un cambio fundamental

119
00:05:41,940 --> 00:05:45,150
en cómo construimos aplicaciones front-end.

120
00:05:45,150 --> 00:05:48,930
Ahora bien, se podría argumentar que en este pequeño ejemplo,

121
00:05:48,930 --> 00:05:50,970
hacer esto no es mucho trabajo,

122
00:05:50,970 --> 00:05:55,050
y tal vez ni siquiera sea necesario aprender React.

123
00:05:55,050 --> 00:05:56,550
Y estaría de acuerdo contigo

124
00:05:56,550 --> 00:05:59,490
que, por supuesto, no necesitaríamos React

125
00:05:59,490 --> 00:06:03,420
construir algo realmente pequeño y simple como esto.

126
00:06:03,420 --> 00:06:06,660
Pero tan pronto como seamos un poquito más grandes que esto,

127
00:06:06,660 --> 00:06:09,510
comienza a salirse de control.

128
00:06:09,510 --> 00:06:13,260
Entonces tendríamos que seleccionar toneladas de elementos.

129
00:06:13,260 --> 00:06:17,160
y realmente necesitaríamos crear mucho código adicional

130
00:06:17,160 --> 00:06:19,200
que, con React, no tenemos que hacerlo,

131
00:06:19,200 --> 00:06:21,870
de nuevo, porque automáticamente se encarga

132
00:06:21,870 --> 00:06:25,710
de mantener los datos sincronizados con la interfaz de usuario.

133
00:06:25,710 --> 00:06:26,940
Eso es realmente lo principal.

134
00:06:26,940 --> 00:06:29,550
que quiero que tengas en cuenta de esta conferencia

135
00:06:29,550 --> 00:06:31,890
y del anterior.

136
00:06:31,890 --> 00:06:32,723
Asi que por su puesto,

137
00:06:32,723 --> 00:06:35,310
siéntete libre de analizar todas las diferencias

138
00:06:35,310 --> 00:06:37,170
que existen aquí en este código,

139
00:06:37,170 --> 00:06:39,060
porque solo con esto,

140
00:06:39,060 --> 00:06:42,900
Realmente puedes ver las dos filosofías diferentes en acción.

141
00:06:42,900 --> 00:06:46,680
No voy a profundizar más en esto en este momento,

142
00:06:46,680 --> 00:06:48,510
pero seria muy interesante

143
00:06:48,510 --> 00:06:51,210
si te tomas unos minutos y realmente comparas

144
00:06:51,210 --> 00:06:53,430
¿Qué está pasando aquí de este lado?

145
00:06:53,430 --> 00:06:55,620
y sobre la implementación de React.

146
00:06:55,620 --> 00:06:57,480
Y una vez que hayas terminado de hacer eso,

147
00:06:57,480 --> 00:06:59,340
Ahora es el momento de finalmente aprender.

148
00:06:59,340 --> 00:07:03,000
qué es realmente React con un poco más de detalle.

149
00:07:03,000 --> 00:07:05,913
Espero verte pronto en la próxima conferencia.