1
00:00:01,080 --> 00:00:03,750
Sigamos construyendo nuestra aplicación.

2
00:00:03,750 --> 00:00:06,180
creando un componente completamente nuevo

3
00:00:06,180 --> 00:00:09,513
y echando un primer vistazo a la reutilización.

4
00:00:10,620 --> 00:00:14,640
Pero primero, obtengamos los archivos iniciales para este proyecto.

5
00:00:14,640 --> 00:00:18,360
de los archivos que descargamos de GitHub.

6
00:00:18,360 --> 00:00:20,760
Aquí, en la carpeta de inicio,

7
00:00:20,760 --> 00:00:25,760
toma estos tres, cópialos y luego ve a la carpeta de tu proyecto

8
00:00:26,370 --> 00:00:30,303
y los copiaré por ahora aquí en la carpeta pública.

9
00:00:31,620 --> 00:00:34,470
Entonces tenemos esta carpeta de imágenes de pizza,

10
00:00:34,470 --> 00:00:39,300
tenemos estos datos de inicio y este index.CSS

11
00:00:39,300 --> 00:00:44,300
que probablemente deberíamos mover a esta carpeta de origen.

12
00:00:44,910 --> 00:00:47,220
Así que asegúrese de tener estos dos archivos aquí.

13
00:00:47,220 --> 00:00:49,083
después de incluir los archivos de inicio.

14
00:00:50,850 --> 00:00:52,950
Y ahora volvamos aquí.

15
00:00:52,950 --> 00:00:55,530
y creemos ese nuevo componente

16
00:00:55,530 --> 00:00:57,093
de lo que estaba hablando.

17
00:00:58,350 --> 00:01:02,793
Entonces en React escribimos nuevos componentes usando funciones.

18
00:01:04,710 --> 00:01:08,550
Así que funciona, y a esta la llamo pizza.

19
00:01:08,550 --> 00:01:12,090
porque contendrá algunos datos sobre una pizza

20
00:01:12,090 --> 00:01:13,110
y luego aquí por ahora

21
00:01:13,110 --> 00:01:16,680
no tenemos parámetros para esta función

22
00:01:16,680 --> 00:01:19,290
y luego el cuerpo de la función.

23
00:01:19,290 --> 00:01:21,930
Ahora en React, hay dos reglas importantes.

24
00:01:21,930 --> 00:01:24,660
cuando escribimos componentes como funciones.

25
00:01:24,660 --> 00:01:27,060
Primero, el nombre de la función debe comenzar.

26
00:01:27,060 --> 00:01:29,490
con una letra mayúscula como esta

27
00:01:29,490 --> 00:01:33,600
y segundo, la función necesita devolver algún marcado.

28
00:01:33,600 --> 00:01:36,120
Generalmente en forma de JSX,

29
00:01:36,120 --> 00:01:40,950
pero ni siquiera podemos devolver nada, como devolver nulo.

30
00:01:40,950 --> 00:01:45,850
Pero aquí, simplemente devolvamos algún elemento H2, por ejemplo.

31
00:01:46,860 --> 00:01:49,020
y luego escribamos pizza.

32
00:01:49,020 --> 00:01:52,890
Así que guárdalo, pero por supuesto no aparecerá nada aquí.

33
00:01:52,890 --> 00:01:54,750
en la interfaz de usuario, y eso es

34
00:01:54,750 --> 00:01:58,470
porque no incluiremos este nuevo componente en ninguna parte

35
00:01:58,470 --> 00:02:02,040
e incluso ESLint nos advierte sobre eso aquí.

36
00:02:02,040 --> 00:02:05,550
Entonces esta línea amarilla que dice pizza está definida,

37
00:02:05,550 --> 00:02:06,870
pero nunca usado.

38
00:02:06,870 --> 00:02:10,200
Nuevamente, no incluimos este componente de pizza.

39
00:02:10,200 --> 00:02:13,470
en nuestro componente de aplicación, que es el componente

40
00:02:13,470 --> 00:02:15,820
que se está representando actualmente en la pantalla.

41
00:02:16,890 --> 00:02:20,853
Entonces podemos usar nuestro componente aquí así.

42
00:02:21,840 --> 00:02:23,130
entonces pizza

43
00:02:23,130 --> 00:02:27,840
y luego inmediatamente cerramos el elemento así.

44
00:02:27,840 --> 00:02:30,243
Sin embargo esto nos dará un error.

45
00:02:31,140 --> 00:02:33,900
Así que aquí, que ya vimos antes

46
00:02:33,900 --> 00:02:35,520
y el motivo de este error

47
00:02:35,520 --> 00:02:40,080
es que cada componente solo puede devolver exactamente un elemento,

48
00:02:40,080 --> 00:02:42,363
no dos elementos como los que tenemos aquí.

49
00:02:44,280 --> 00:02:47,760
Así que envolvamos esto aquí en un div.

50
00:02:47,760 --> 00:02:50,260
y a veces puede resultar un poco molesto

51
00:02:51,390 --> 00:02:54,903
que VS Code cierra automáticamente estos elementos por nosotros,

52
00:02:56,310 --> 00:03:00,780
pero de todos modos, ahora tenemos nuestra pizza en la interfaz de usuario.

53
00:03:00,780 --> 00:03:04,410
Y eso se debe a que ahora anidamos este componente de pizza.

54
00:03:04,410 --> 00:03:07,320
dentro de este componente de la aplicación.

55
00:03:07,320 --> 00:03:10,350
Y con anidamiento, quiero decir que básicamente usamos

56
00:03:10,350 --> 00:03:13,830
o capté este componente aquí dentro de la aplicación.

57
00:03:13,830 --> 00:03:16,350
¿Qué es muy, muy importante notar?

58
00:03:16,350 --> 00:03:18,930
es que por anidar no queremos decir

59
00:03:18,930 --> 00:03:22,563
que escribimos una función dentro de esta otra función.

60
00:03:23,580 --> 00:03:25,350
Entonces lo que nunca deberíamos hacer

61
00:03:25,350 --> 00:03:28,653
es anidar la declaración del componente en sí.

62
00:03:29,760 --> 00:03:33,570
Así, esto todavía funciona en realidad,

63
00:03:33,570 --> 00:03:36,060
pero es una muy, muy mala idea

64
00:03:36,060 --> 00:03:38,880
por razones que conoceremos más adelante.

65
00:03:38,880 --> 00:03:41,760
Así que nunca anide las declaraciones de funciones,

66
00:03:41,760 --> 00:03:45,960
pero siempre declara todos tus componentes en el nivel superior.

67
00:03:45,960 --> 00:03:47,400
Entonces así.

68
00:03:47,400 --> 00:03:50,130
De nuevo, cuando decimos componentes anidados,

69
00:03:50,130 --> 00:03:52,470
lo que queremos decir es que llamamos,

70
00:03:52,470 --> 00:03:57,470
entonces incluimos un componente en otro como este.

71
00:03:57,810 --> 00:04:01,800
Ahora, está bien, hagamos este componente de pizza aquí.

72
00:04:01,800 --> 00:04:04,560
solo un poquito más interesante

73
00:04:04,560 --> 00:04:08,370
y para eso usaremos nuestros datos iniciales aquí.

74
00:04:08,370 --> 00:04:11,190
Así que abramos data.js

75
00:04:11,190 --> 00:04:16,190
y todo lo que necesitamos es seleccionar todo, luego copiarlo

76
00:04:17,040 --> 00:04:19,473
y luego peguémoslo aquí.

77
00:04:20,700 --> 00:04:22,020
bueno.

78
00:04:22,020 --> 00:04:25,530
Como puedes ver ahora mismo estamos haciendo todo el desarrollo.

79
00:04:25,530 --> 00:04:28,260
de esta aplicación en un archivo grande.

80
00:04:28,260 --> 00:04:31,920
Mientras que en el mundo real dividimos nuestro código en módulos

81
00:04:31,920 --> 00:04:34,950
y luego incluir estos módulos entre sí,

82
00:04:34,950 --> 00:04:37,050
pero aquí sólo quiero mantenerlo simple

83
00:04:37,050 --> 00:04:38,823
entonces no vamos a hacer eso todavía.

84
00:04:39,930 --> 00:04:43,900
Entonces, en realidad podemos eliminar este data.js.

85
00:04:45,030 --> 00:04:46,770
y cierra esto.

86
00:04:46,770 --> 00:04:50,490
Por ahora, simplemente usaremos esto aquí como ejemplo.

87
00:04:50,490 --> 00:04:55,490
Así que ahora copiaré, pegaré, digamos esta pizza aquí.

88
00:04:57,450 --> 00:05:01,200
y usa eso aquí como nombre

89
00:05:01,200 --> 00:05:03,453
y luego tomemos también los ingredientes.

90
00:05:04,500 --> 00:05:07,770
Así que copiemos y peguemos todo este texto.

91
00:05:07,770 --> 00:05:10,860
y observe que en realidad solo me interesa el texto.

92
00:05:10,860 --> 00:05:14,040
No necesitamos, por supuesto, estas citas.

93
00:05:14,040 --> 00:05:17,280
porque, nuevamente, esto es como escribir HTML

94
00:05:17,280 --> 00:05:20,190
y ahí tampoco necesitas comillas, ¿verdad?

95
00:05:20,190 --> 00:05:22,560
Entonces aquí, creemos un párrafo.

96
00:05:22,560 --> 00:05:27,480
e inmediatamente ves que tenemos este subrayado rojo aquí

97
00:05:27,480 --> 00:05:29,370
lo cual se debe a que, nuevamente,

98
00:05:29,370 --> 00:05:31,950
Estamos intentando devolver dos elementos aquí.

99
00:05:31,950 --> 00:05:33,483
lo cual no está permitido.

100
00:05:34,320 --> 00:05:36,070
Bien, esto es lo que me gusta hacer.

101
00:05:37,380 --> 00:05:42,380
es luego subir esta línea aquí usando un atajo.

102
00:05:42,450 --> 00:05:44,370
Así que veamos qué es eso para ti.

103
00:05:44,370 --> 00:05:46,440
Entonces es esta alineación de movimientos.

104
00:05:46,440 --> 00:05:49,110
Probablemente deberías acostumbrarte a este atajo.

105
00:05:49,110 --> 00:05:52,800
y este donde movemos líneas hacia arriba y hacia abajo,

106
00:05:52,800 --> 00:05:55,380
así por ejemplo,

107
00:05:55,380 --> 00:05:56,790
eso es muy, muy útil

108
00:05:56,790 --> 00:05:58,740
y vamos a hacer eso todo el tiempo.

109
00:05:58,740 --> 00:06:03,720
Sólo necesitamos deshacernos de este punto y coma que tenemos aquí,

110
00:06:03,720 --> 00:06:05,943
que estaba ahí mismo.

111
00:06:07,530 --> 00:06:09,690
Bien, entonces tenemos algo de texto.

112
00:06:09,690 --> 00:06:13,080
ahora también usemos esta imagen

113
00:06:13,080 --> 00:06:15,570
que tenemos en la carpeta pública.

114
00:06:15,570 --> 00:06:19,170
Entonces sí, este de aquí.

115
00:06:19,170 --> 00:06:21,270
Así que recuerda lo que mencioné al principio.

116
00:06:21,270 --> 00:06:23,580
que todos los activos de la aplicación

117
00:06:23,580 --> 00:06:27,120
irá a esta carpeta pública porque Webpack,

118
00:06:27,120 --> 00:06:29,760
entonces el paquete de módulos básicamente

119
00:06:29,760 --> 00:06:31,863
obtenerlos automáticamente desde allí.

120
00:06:33,000 --> 00:06:35,520
Y ahora podemos escribir una imagen aquí.

121
00:06:35,520 --> 00:06:37,353
De nuevo, al igual que HTML,

122
00:06:38,850 --> 00:06:43,850
y luego si escribimos una ruta a la imagen como esta,

123
00:06:44,520 --> 00:06:47,703
espinacas.jpg,

124
00:06:49,320 --> 00:06:51,930
entonces Webpack lo obtendrá automáticamente aquí

125
00:06:51,930 --> 00:06:54,600
desde esta carpeta y veamos si funciona.

126
00:06:54,600 --> 00:06:58,053
Y efectivamente, ahí va nuestra imagen.

127
00:06:59,010 --> 00:07:02,130
Ahora tenemos estos subrayados amarillos aquí.

128
00:07:02,130 --> 00:07:04,020
y eso se debe a que una regla de ESLint

129
00:07:04,020 --> 00:07:07,950
que dice que las imágenes siempre deben tener un accesorio alternativo.

130
00:07:07,950 --> 00:07:10,143
Así que agreguemos eso aquí.

131
00:07:11,190 --> 00:07:13,473
Entonces, para hacerlo un poco más accesible,

132
00:07:15,210 --> 00:07:18,660
pongamos aquí el nombre de la pizza

133
00:07:18,660 --> 00:07:20,133
y luego ESLint está feliz.

134
00:07:21,030 --> 00:07:23,100
Entonces tenemos este componente aquí.

135
00:07:23,100 --> 00:07:27,210
y ahora hablemos de la idea de reutilizar este componente.

136
00:07:27,210 --> 00:07:30,210
Y por ahora, todo lo que vamos a hacer es reutilizar este componente.

137
00:07:30,210 --> 00:07:32,973
Básicamente es usarlo varias veces.

138
00:07:35,280 --> 00:07:38,610
Así que hagámoslo tres veces para que puedas ver.

139
00:07:38,610 --> 00:07:42,360
que ahora esta parte de la interfaz de usuario, que es el componente de pizza,

140
00:07:42,360 --> 00:07:45,180
se incluirá tres veces.

141
00:07:45,180 --> 00:07:49,023
Así que tres veces esta deliciosa pizza de espinacas.

142
00:07:50,280 --> 00:07:53,760
lindo. Ahora por supuesto los datos aquí en todos ellos.

143
00:07:53,760 --> 00:07:57,630
ahora es el mismo porque aún no personalizamos esos datos,

144
00:07:57,630 --> 00:07:59,370
pero lo haremos más tarde, por supuesto,

145
00:07:59,370 --> 00:08:01,470
cuando hablamos de accesorios.

146
00:08:01,470 --> 00:08:02,303
por ahora,

147
00:08:02,303 --> 00:08:04,800
Sólo quiero que entiendas este concepto realmente importante.

148
00:08:04,800 --> 00:08:08,010
que podemos llamar a cada pieza de la interfaz de usuario

149
00:08:08,010 --> 00:08:11,160
o en otras palabras, cada componente varias veces aquí

150
00:08:11,160 --> 00:08:12,960
para poder reutilizarlo

151
00:08:12,960 --> 00:08:14,820
y ese es un concepto fundamental

152
00:08:14,820 --> 00:08:16,953
de escribir aplicaciones React.

153
00:08:17,940 --> 00:08:20,130
Ahora, sólo una última cosa aquí,

154
00:08:20,130 --> 00:08:22,020
y esto no tiene nada que ver con el código,

155
00:08:22,020 --> 00:08:23,880
es que tal vez te hayas dado cuenta

156
00:08:23,880 --> 00:08:27,640
que tenemos todas estas líneas de colores aquí en la barra lateral

157
00:08:28,950 --> 00:08:30,630
e incluso aquí abajo.

158
00:08:30,630 --> 00:08:34,500
Ahora la razón de esto es que cuando creamos un nuevo proyecto

159
00:08:34,500 --> 00:08:36,420
con la aplicación Create-React,

160
00:08:36,420 --> 00:08:39,570
En realidad, configurará automáticamente este proyecto.

161
00:08:39,570 --> 00:08:41,730
como repositorio de GitHub.

162
00:08:41,730 --> 00:08:45,130
Es por eso que aquí también obtienes todos estos colores diferentes.

163
00:08:46,500 --> 00:08:49,770
y además aquí ves todos los cambios que hemos realizado

164
00:08:49,770 --> 00:08:51,420
a los diferentes archivos.

165
00:08:51,420 --> 00:08:55,200
Así que aquí eliminamos algunas cosas, modificamos algunas cosas,

166
00:08:55,200 --> 00:08:58,113
y aquí estas imágenes aún no están rastreadas.

167
00:08:59,010 --> 00:09:01,230
Ahora, como realmente no vamos a usar GitHub

168
00:09:01,230 --> 00:09:03,420
mientras construimos estos pequeños proyectos,

169
00:09:03,420 --> 00:09:08,420
De hecho, solo quiero eliminar estas líneas de colores aquí.

170
00:09:08,550 --> 00:09:10,800
desde la cuneta, entonces desde este lugar,

171
00:09:10,800 --> 00:09:14,340
y para eso podemos ir a nuestra configuración

172
00:09:14,340 --> 00:09:18,403
y luego simplemente busque decoraciones diferentes.

173
00:09:21,780 --> 00:09:26,100
Así que aquí el valor predeterminado es todo, así que configúrelo en ninguno.

174
00:09:26,100 --> 00:09:28,590
Y entonces nuestro editor buscará

175
00:09:28,590 --> 00:09:31,020
solo un poco más limpio aquí,

176
00:09:31,020 --> 00:09:33,330
y podemos cerrar la barra lateral

177
00:09:33,330 --> 00:09:35,760
y con esto terminamos esta conferencia

178
00:09:35,760 --> 00:09:37,203
y estamos listos para seguir adelante.