1
00:00:01,140 --> 00:00:02,430
Así que ahora que sabemos

2
00:00:02,430 --> 00:00:06,060
por qué necesitamos un marco de JavaScript en primer lugar,

3
00:00:06,060 --> 00:00:09,330
Comencemos aprendiendo sobre el marco más popular.

4
00:00:09,330 --> 00:00:11,760
por ahí, reacciona.

5
00:00:11,760 --> 00:00:15,150
Entonces, en esta conferencia, obtendremos una descripción general de alto nivel.

6
00:00:15,150 --> 00:00:18,930
de qué es realmente React y cómo funciona.

7
00:00:18,930 --> 00:00:20,820
Así que estará lleno

8
00:00:20,820 --> 00:00:22,950
Pero una conferencia súper interesante.

9
00:00:22,950 --> 00:00:24,873
Así que comencemos rápidamente.

10
00:00:26,730 --> 00:00:30,270
Entonces, según la documentación oficial de React,

11
00:00:30,270 --> 00:00:35,190
React es una biblioteca de JavaScript para crear interfaces de usuario.

12
00:00:35,190 --> 00:00:36,840
Ahora, eso es algo

13
00:00:36,840 --> 00:00:39,780
pero realmente no es tan útil, ¿verdad?

14
00:00:39,780 --> 00:00:42,630
Así que ampliemos un poco esta definición.

15
00:00:42,630 --> 00:00:44,850
para que sea más útil

16
00:00:44,850 --> 00:00:49,830
O, debería decir, un poco más loco como este.

17
00:00:49,830 --> 00:00:53,040
Así que ahora, en esta definición ligeramente modificada,

18
00:00:53,040 --> 00:00:56,490
React es una herramienta extremadamente popular, declarativa,

19
00:00:56,490 --> 00:00:58,980
basado en componentes, impulsado por el estado,

20
00:00:58,980 --> 00:01:02,250
Biblioteca JavaScript para crear interfaces de usuario.

21
00:01:02,250 --> 00:01:04,620
creado por Facebook.

22
00:01:04,620 --> 00:01:07,500
Y esto en realidad es mucho más útil.

23
00:01:07,500 --> 00:01:10,950
porque ahora podemos deconstruir esta definición

24
00:01:10,950 --> 00:01:14,673
y aprenda qué es realmente React, paso a paso.

25
00:01:15,600 --> 00:01:18,840
Entonces, comenzando con el diseño basado en componentes,

26
00:01:18,840 --> 00:01:22,590
React tiene que ver con componentes como botones,

27
00:01:22,590 --> 00:01:26,400
campos de entrada, barras de búsqueda, etc.

28
00:01:26,400 --> 00:01:30,180
Entonces, los componentes son los componentes básicos de las interfaces de usuario.

29
00:01:30,180 --> 00:01:31,680
en Reaccionar.

30
00:01:31,680 --> 00:01:34,590
Y de hecho, básicamente todo lo que React hace

31
00:01:34,590 --> 00:01:38,520
es tomar componentes y dibujarlos en una página web.

32
00:01:38,520 --> 00:01:39,630
eso es todo.

33
00:01:39,630 --> 00:01:43,050
Y por eso construimos interfaces de usuario complejas en React.

34
00:01:43,050 --> 00:01:45,240
mediante la construcción de múltiples componentes

35
00:01:45,240 --> 00:01:49,080
y luego combinar estos componentes como piezas de LEGO.

36
00:01:49,080 --> 00:01:53,880
Por ejemplo, para crear una aplicación compleja como Airbnb.

37
00:01:53,880 --> 00:01:56,250
Entonces aquí tenemos exactamente los mismos componentes.

38
00:01:56,250 --> 00:02:00,780
que vimos antes, pero todo combinado en una interfaz de usuario compleja.

39
00:02:00,780 --> 00:02:03,360
Entonces la barra de navegación, la barra de búsqueda,

40
00:02:03,360 --> 00:02:06,150
el panel de resultados y el mapa.

41
00:02:06,150 --> 00:02:08,430
Ahora, otra cosa que hacemos con los componentes.

42
00:02:08,430 --> 00:02:10,050
es reutilizarlos.

43
00:02:10,050 --> 00:02:12,360
Por ejemplo, aquí en el panel de resultados,

44
00:02:12,360 --> 00:02:15,450
Hay varios listados que parecen bastante similares.

45
00:02:15,450 --> 00:02:17,820
Y entonces podemos crear un componente de listado.

46
00:02:17,820 --> 00:02:20,100
y luego reutilizarlo tres veces aquí,

47
00:02:20,100 --> 00:02:22,263
simplemente ajustando un poco los datos.

48
00:02:23,700 --> 00:02:26,040
Ahora, desde que construimos UI complejas

49
00:02:26,040 --> 00:02:28,350
combinando múltiples componentes,

50
00:02:28,350 --> 00:02:31,140
cada componente debe tener toda la información

51
00:02:31,140 --> 00:02:33,990
sobre cómo se ve, ¿verdad?

52
00:02:33,990 --> 00:02:37,470
Entonces, para describir cómo se ve cada componente

53
00:02:37,470 --> 00:02:38,850
y cómo funciona,

54
00:02:38,850 --> 00:02:43,350
Usamos una sintaxis declarativa especial llamada JSX.

55
00:02:43,350 --> 00:02:45,150
Y declarativo simplemente significa

56
00:02:45,150 --> 00:02:48,060
que le digamos a React qué componente

57
00:02:48,060 --> 00:02:51,330
y, en última instancia, toda la interfaz de usuario debería verse así

58
00:02:51,330 --> 00:02:53,580
basado en el estado actual.

59
00:02:53,580 --> 00:02:58,530
Entonces React es básicamente una gran abstracción del DOM.

60
00:02:58,530 --> 00:03:01,470
para que nunca tengamos que trabajar con un DOM directamente

61
00:03:01,470 --> 00:03:04,140
como lo haríamos con JavaScript básico.

62
00:03:04,140 --> 00:03:06,840
Entonces simplemente le decimos a React lo que queremos que suceda.

63
00:03:06,840 --> 00:03:10,560
cuando algunos datos cambian, pero no cómo hacerlo.

64
00:03:10,560 --> 00:03:13,770
Y nuevamente, lo hacemos usando JSX.

65
00:03:13,770 --> 00:03:18,770
Entonces JSX es básicamente una sintaxis que combina partes de HTML,

66
00:03:19,230 --> 00:03:22,380
CSS, JavaScript, e incluso nos permite

67
00:03:22,380 --> 00:03:25,320
para hacer referencia a otros componentes de React.

68
00:03:25,320 --> 00:03:27,690
Y la naturaleza declarativa de React

69
00:03:27,690 --> 00:03:30,600
es un concepto esencial que, por supuesto,

70
00:03:30,600 --> 00:03:32,823
realmente profundizaremos más adelante.

71
00:03:34,230 --> 00:03:37,650
Pero ahora te preguntarás, si nunca tocamos el DOM,

72
00:03:37,650 --> 00:03:40,680
Entonces, ¿cómo actualiza React la interfaz de usuario?

73
00:03:40,680 --> 00:03:44,820
Bueno, ahí es donde entra en juego el concepto de Estado.

74
00:03:44,820 --> 00:03:47,520
Así que recuerda que el objetivo principal de React

75
00:03:47,520 --> 00:03:51,090
es mantener siempre la interfaz de usuario sincronizada con los datos.

76
00:03:51,090 --> 00:03:54,750
Y de ahora en adelante, llamemos a esos datos estado.

77
00:03:54,750 --> 00:03:58,740
Por ejemplo, una gran variedad de apartamentos en Airbnb.

78
00:03:58,740 --> 00:04:00,960
Entonces, según nuestro estado inicial,

79
00:04:00,960 --> 00:04:03,480
React renderizará una interfaz de usuario

80
00:04:03,480 --> 00:04:07,410
usando los componentes que escribimos usando JSX.

81
00:04:07,410 --> 00:04:10,620
Luego, basándose en algún evento como el clic de un botón,

82
00:04:10,620 --> 00:04:12,360
el estado podría cambiar.

83
00:04:12,360 --> 00:04:15,030
Por ejemplo, más datos sobre apartamentos.

84
00:04:15,030 --> 00:04:17,190
podría cargarse desde una API.

85
00:04:17,190 --> 00:04:19,980
Y aquí viene la parte interesante.

86
00:04:19,980 --> 00:04:21,870
Cada vez que el estado cambia,

87
00:04:21,870 --> 00:04:24,450
Actualizamos manualmente el estado en nuestra aplicación.

88
00:04:24,450 --> 00:04:26,400
y React automáticamente

89
00:04:26,400 --> 00:04:30,780
volver a renderizar la interfaz de usuario para reflejar el último estado,

90
00:04:30,780 --> 00:04:32,280
o en otras palabras,

91
00:04:32,280 --> 00:04:37,280
Reaccione a los cambios de estado volviendo a representar la interfaz de usuario.

92
00:04:37,680 --> 00:04:40,590
Y esa es de hecho toda la razón.

93
00:04:40,590 --> 00:04:44,043
Por qué React se llama React en primer lugar.

94
00:04:45,540 --> 00:04:47,760
Ahora, siempre ha habido algún debate.

95
00:04:47,760 --> 00:04:51,000
sobre si React es realmente un marco

96
00:04:51,000 --> 00:04:53,070
o simplemente una biblioteca.

97
00:04:53,070 --> 00:04:55,530
Bueno, la respuesta corta es que React

98
00:04:55,530 --> 00:04:57,840
en realidad es solo una biblioteca,

99
00:04:57,840 --> 00:05:00,570
aunque sigo llamándolo marco.

100
00:05:00,570 --> 00:05:03,900
Y la razón de esto es que React mismo

101
00:05:03,900 --> 00:05:07,380
En realidad, es solo la llamada capa de vista.

102
00:05:07,380 --> 00:05:11,100
Entonces, si queremos construir una aplicación completa del mundo real,

103
00:05:11,100 --> 00:05:13,680
Necesitamos elegir varias bibliotecas externas.

104
00:05:13,680 --> 00:05:15,360
para agregar a nuestro proyecto.

105
00:05:15,360 --> 00:05:19,200
Por ejemplo, para enrutamiento o para recuperar datos.

106
00:05:19,200 --> 00:05:22,680
Ahora bien, para abordar esto, en realidad existen múltiples marcos

107
00:05:22,680 --> 00:05:25,470
que se han construido sobre React.

108
00:05:25,470 --> 00:05:28,230
Entonces, marcos que incluyen todas estas funcionalidades.

109
00:05:28,230 --> 00:05:31,050
que React falta fuera de la caja,

110
00:05:31,050 --> 00:05:35,340
y los más populares se llaman Next.js y Remix.

111
00:05:35,340 --> 00:05:38,673
Pero nuevamente, hablaremos más sobre todo eso más adelante en el curso.

112
00:05:39,870 --> 00:05:40,950
Ahora, sigamos adelante.

113
00:05:40,950 --> 00:05:42,810
Además de todas las excelentes características

114
00:05:42,810 --> 00:05:44,430
de lo que hemos estado hablando,

115
00:05:44,430 --> 00:05:46,710
quizás la razón más importante para elegir React

116
00:05:46,710 --> 00:05:50,010
sobre todos los demás marcos que son similares

117
00:05:50,010 --> 00:05:53,850
Es porque React es extremadamente popular.

118
00:05:53,850 --> 00:05:57,630
Entonces, de acuerdo con las cifras de descargas semanales de npm,

119
00:05:57,630 --> 00:06:01,380
React es, con diferencia, el framework más utilizado.

120
00:06:01,380 --> 00:06:04,230
Y la diferencia entre React y los demás.

121
00:06:04,230 --> 00:06:06,210
sólo parece estar creciendo.

122
00:06:06,210 --> 00:06:09,960
Entonces React realmente no irá a ninguna parte.

123
00:06:09,960 --> 00:06:13,050
Una gran razón para ello es que muchas grandes empresas

124
00:06:13,050 --> 00:06:15,960
He adoptado React hace mucho tiempo.

125
00:06:15,960 --> 00:06:18,510
Y ahora, cada vez más empresas pequeñas

126
00:06:18,510 --> 00:06:22,260
en todo el mundo están siguiendo sus pasos.

127
00:06:22,260 --> 00:06:24,120
Esto significa que todas estas empresas

128
00:06:24,120 --> 00:06:27,120
ahora necesitan desarrolladores de React para sus equipos,

129
00:06:27,120 --> 00:06:31,140
lo que, por supuesto, ha creado un enorme mercado laboral a nivel mundial

130
00:06:31,140 --> 00:06:34,830
con una alta demanda de desarrolladores calificados de React.

131
00:06:34,830 --> 00:06:36,750
Y estos no son trabajos cualquiera.

132
00:06:36,750 --> 00:06:39,480
Suelen ser trabajos bien remunerados.

133
00:06:39,480 --> 00:06:42,060
Ahora, otro resultado positivo

134
00:06:42,060 --> 00:06:45,210
Una de las razones de la enorme popularidad de React es que ahora,

135
00:06:45,210 --> 00:06:49,530
existe una comunidad de desarrolladores de React muy grande y activa,

136
00:06:49,530 --> 00:06:51,780
lo que significa que siempre habrá

137
00:06:51,780 --> 00:06:55,890
muchos tutoriales, preguntas y respuestas de Stack Overflow,

138
00:06:55,890 --> 00:07:00,570
y también mucho apoyo brindado a otros desarrolladores de React.

139
00:07:00,570 --> 00:07:02,070
Y si me preguntas,

140
00:07:02,070 --> 00:07:04,770
Este es en realidad uno de los mayores beneficios.

141
00:07:04,770 --> 00:07:07,080
de usar React ahora mismo.

142
00:07:07,080 --> 00:07:10,260
También porque esta enorme comunidad ha crecido.

143
00:07:10,260 --> 00:07:15,260
un ecosistema de bibliotecas de terceros verdaderamente gigantesco en torno a React.

144
00:07:15,690 --> 00:07:19,500
Y ahora puedes integrar innumerables bibliotecas útiles.

145
00:07:19,500 --> 00:07:22,803
y herramientas en sus propias aplicaciones React.

146
00:07:24,150 --> 00:07:25,740
Y ahora, nuestro último tema.

147
00:07:25,740 --> 00:07:28,860
es que React fue creado por Facebook.

148
00:07:28,860 --> 00:07:30,420
Bueno, más específicamente,

149
00:07:30,420 --> 00:07:33,930
React fue creado en 2011 por Jordan Walke,

150
00:07:33,930 --> 00:07:38,250
quien es un ingeniero que trabajaba en Facebook en ese momento.

151
00:07:38,250 --> 00:07:42,120
Por eso decimos que React está respaldado por Facebook.

152
00:07:42,120 --> 00:07:44,250
o ahora, por Meta.

153
00:07:44,250 --> 00:07:47,940
Entonces, React se usó por primera vez en el suministro de noticias.

154
00:07:47,940 --> 00:07:49,710
y también la aplicación de chat.

155
00:07:49,710 --> 00:07:52,740
Y de ahí se extendió a todo Facebook.

156
00:07:52,740 --> 00:07:55,890
y también las aplicaciones de Instagram.

157
00:07:55,890 --> 00:08:00,890
Luego, en 2013, React fue de código abierto para que todos pudieran usarlo.

158
00:08:01,170 --> 00:08:03,870
Y el resto es historia

159
00:08:03,870 --> 00:08:07,920
porque React ha transformado verdadera y completamente

160
00:08:07,920 --> 00:08:09,900
desarrollo web front-end,

161
00:08:09,900 --> 00:08:13,920
no solo por desarrolladores que usan React,

162
00:08:13,920 --> 00:08:16,620
pero porque muchos otros marcos modernos

163
00:08:16,620 --> 00:08:18,690
fueron creados como respuesta,

164
00:08:18,690 --> 00:08:21,423
lo que realmente cambió la industria para siempre.

165
00:08:22,980 --> 00:08:27,980
Bien, para resumir, React es realmente bueno en dos cosas.

166
00:08:28,800 --> 00:08:31,530
Primero, renderizar componentes en una página web.

167
00:08:31,530 --> 00:08:35,610
como una interfaz de usuario basada en su estado actual.

168
00:08:35,610 --> 00:08:38,580
Y segundo, React es realmente bueno.

169
00:08:38,580 --> 00:08:41,850
para mantener la interfaz de usuario sincronizada con el estado

170
00:08:41,850 --> 00:08:46,350
volviendo a renderizar, o en otras palabras, reaccionando

171
00:08:46,350 --> 00:08:49,830
cuando cambia el estado de uno de los componentes.

172
00:08:49,830 --> 00:08:53,070
Y como verás más adelante, React hace todo esto.

173
00:08:53,070 --> 00:08:55,800
empleando algo llamado DOM virtual,

174
00:08:55,800 --> 00:08:58,620
un árbol de fibras, flujo de datos unidireccional,

175
00:08:58,620 --> 00:09:01,080
y muchas otras técnicas que estudiaremos

176
00:09:01,080 --> 00:09:02,820
a lo largo de este curso.

177
00:09:02,820 --> 00:09:03,653
está bien.

178
00:09:03,653 --> 00:09:06,360
Y ahora que tienes una visión general aproximada

179
00:09:06,360 --> 00:09:08,370
de lo que realmente es React,

180
00:09:08,370 --> 00:09:10,920
configuremos nuestro entorno de desarrollo

181
00:09:10,920 --> 00:09:14,313
para que finalmente podamos comenzar a escribir un código serio.