1
00:00:01,050 --> 00:00:03,990
Entonces, con nuestro nuevo conocimiento sobre JSX,

2
00:00:03,990 --> 00:00:06,840
ahora creemos un par de componentes más

3
00:00:06,840 --> 00:00:09,273
para seguir construyendo nuestra aplicación.

4
00:00:10,650 --> 00:00:14,220
Pero antes de hacer eso, este es probablemente el momento perfecto.

5
00:00:14,220 --> 00:00:17,490
para mostrarle la aplicación como se verá

6
00:00:17,490 --> 00:00:20,160
una vez que hayamos terminado con esta sección.

7
00:00:20,160 --> 00:00:22,470
Básicamente, tenemos este encabezado aquí.

8
00:00:22,470 --> 00:00:25,140
con el nombre de una pizzería.

9
00:00:25,140 --> 00:00:27,840
Luego aquí abajo tenemos el menú,

10
00:00:27,840 --> 00:00:30,720
y luego básicamente aquí tenemos algún tipo

11
00:00:30,720 --> 00:00:32,790
de pie de página informando al usuario

12
00:00:32,790 --> 00:00:36,030
que el restaurante está actualmente abierto, y este botón,

13
00:00:36,030 --> 00:00:39,690
que por supuesto no hace nada una vez que hacemos clic en él.

14
00:00:39,690 --> 00:00:43,320
Entonces, aquí está el corazón de esta aplicación,

15
00:00:43,320 --> 00:00:46,920
cual es la presentación de estas seis pizzas,

16
00:00:46,920 --> 00:00:51,150
Y observe cómo ya mostramos esta pizza aquí.

17
00:00:51,150 --> 00:00:53,490
Y pues aquí ves que vamos.

18
00:00:53,490 --> 00:00:57,030
reutilizar este componente de la pizza seis veces

19
00:00:57,030 --> 00:01:00,570
para poder imprimir estas seis pizzas.

20
00:01:00,570 --> 00:01:01,650
¿está bien?

21
00:01:01,650 --> 00:01:04,350
Pero ahora lo que quiero hacer en esta conferencia es

22
00:01:04,350 --> 00:01:08,433
Básicamente, centrarse más en estos componentes de diseño más grandes.

23
00:01:09,840 --> 00:01:12,330
Entonces, creemos un componente.

24
00:01:12,330 --> 00:01:14,703
para cada una de estas tres grandes partes.

25
00:01:18,030 --> 00:01:20,013
Entonces, uno para el encabezado.

26
00:01:21,180 --> 00:01:23,010
Entonces, un componente llamado Encabezado,

27
00:01:23,010 --> 00:01:24,873
y podemos dejar esto vacío por ahora.

28
00:01:25,721 --> 00:01:27,921
Recién estamos construyendo aquí la estructura.

29
00:01:28,860 --> 00:01:30,213
Luego, uno para el menú,

30
00:01:33,750 --> 00:01:37,443
y luego uno para el pie de página.

31
00:01:38,640 --> 00:01:41,760
Y aquí siempre me faltan los paréntesis,

32
00:01:41,760 --> 00:01:43,173
entonces eso no es bueno.

33
00:01:45,150 --> 00:01:47,010
Sí! Genial.

34
00:01:47,010 --> 00:01:48,360
Y por cierto,

35
00:01:48,360 --> 00:01:50,850
Por supuesto, también podríamos escribir estas funciones.

36
00:01:50,850 --> 00:01:54,300
como expresiones de función y funciones de flecha.

37
00:01:54,300 --> 00:01:58,710
Entonces, también podríamos hacer const, llamémoslo prueba,

38
00:01:58,710 --> 00:02:02,190
función igual como esta.

39
00:02:02,190 --> 00:02:05,760
O incluso más simple, podría ser una función de flecha.

40
00:02:05,760 --> 00:02:08,820
Entonces, si prefieres este tipo de funciones,

41
00:02:08,820 --> 00:02:10,290
siéntete libre de usarlos,

42
00:02:10,290 --> 00:02:14,520
pero siempre me gusta usar las palabras clave de función habituales.

43
00:02:14,520 --> 00:02:16,170
como lo he estado usando.

44
00:02:16,170 --> 00:02:20,820
Pero de todos modos, ahora volvamos algo desde aquí.

45
00:02:20,820 --> 00:02:24,240
Y aquí es donde escribimos ese nombre del restaurante,

46
00:02:24,240 --> 00:02:29,240
que es Fast React Pizza Company.

47
00:02:32,400 --> 00:02:36,240
Muy bien, ahora podemos usar este componente en su lugar.

48
00:02:36,240 --> 00:02:37,563
de este h1.

49
00:02:39,090 --> 00:02:40,840
Y nuevamente, lo incluimos aquí.

50
00:02:41,700 --> 00:02:45,270
como si fuera un elemento HTML más,

51
00:02:45,270 --> 00:02:47,913
Y esa es la belleza de JSX.

52
00:02:49,590 --> 00:02:54,270
Entonces, cambió a Fast React Pizza Co. aquí y ahora,

53
00:02:54,270 --> 00:02:57,633
Y a continuación creemos un pie de página.

54
00:02:58,560 --> 00:03:00,930
Y aquí vamos a jugar un poco.

55
00:03:00,930 --> 00:03:04,410
con JSX y con elemento de creación.

56
00:03:04,410 --> 00:03:06,540
Entonces, usando el conocimiento que adquirimos

57
00:03:06,540 --> 00:03:07,830
en la conferencia anterior,

58
00:03:07,830 --> 00:03:11,820
en lugar de regresar inmediatamente a JSX,

59
00:03:11,820 --> 00:03:14,970
devolver una llamada de creación de elemento.

60
00:03:14,970 --> 00:03:17,913
Entonces, React.createElement,

61
00:03:20,406 --> 00:03:21,900
sólo para que puedas ver cómo

62
00:03:21,900 --> 00:03:26,900
Malo sería escribir componentes de esta manera sin JSX.

63
00:03:27,840 --> 00:03:32,840
Entonces queremos devolver una nota HTML, es decir, un elemento HTML,

64
00:03:32,850 --> 00:03:34,440
pie de página con nombre.

65
00:03:34,440 --> 00:03:36,480
Entonces aquí, el segundo argumento es nulo.

66
00:03:36,480 --> 00:03:38,490
porque es para accesorios,

67
00:03:38,490 --> 00:03:41,160
y luego aquí está el elemento hijo.

68
00:03:41,160 --> 00:03:43,560
Así que aquí solo queremos algo de texto.

69
00:03:43,560 --> 00:03:44,393
digamos.

70
00:03:47,070 --> 00:03:49,413
Los anteriores ahora deben ser una cuerda.

71
00:03:50,280 --> 00:03:54,033
Actualmente estamos abiertos.

72
00:03:55,226 --> 00:03:56,460
Y ahora, por supuesto, necesitamos

73
00:03:56,460 --> 00:03:59,283
para luego usar el componente aquí en la aplicación.

74
00:04:02,520 --> 00:04:05,253
Ese es el pie de página, ciérrelo inmediatamente.

75
00:04:09,178 --> 00:04:11,490
Y veámoslo aquí abajo.

76
00:04:12,390 --> 00:04:14,880
Sí, ahí está nuestro pie de página.

77
00:04:14,880 --> 00:04:18,633
Eso también lo podemos ver aquí, al menos si tuviéramos algo de espacio.

78
00:04:20,430 --> 00:04:23,760
Sí, entonces en el cuerpo tenemos, por supuesto,

79
00:04:23,760 --> 00:04:26,910
nuestra raíz, donde se representa toda la aplicación.

80
00:04:26,910 --> 00:04:30,333
Luego tenemos este div aquí, que es este.

81
00:04:31,796 --> 00:04:34,230
Entonces, viniendo del componente de la aplicación,

82
00:04:34,230 --> 00:04:39,230
y luego tenemos aquí el h1, que es este de aquí,

83
00:04:39,270 --> 00:04:42,480
y luego estos tres divs, cada uno para una pizza,

84
00:04:42,480 --> 00:04:45,690
y finalmente el pie de página que acabamos de crear.

85
00:04:45,690 --> 00:04:48,840
Por supuesto, aquí en el HTML real

86
00:04:48,840 --> 00:04:52,920
ya no veremos el nombre de nuestros componentes ¿verdad?

87
00:04:52,920 --> 00:04:56,280
Porque una vez que React convierte todo en el dom,

88
00:04:56,280 --> 00:04:59,400
solo representa el elemento h1 en sí.

89
00:04:59,400 --> 00:05:03,630
Entonces el dom no sabe que este h1 realmente viene

90
00:05:03,630 --> 00:05:07,410
de este componente de encabezado y que estos divs,

91
00:05:07,410 --> 00:05:11,100
por ejemplo, en realidad provienen de un componente de pizza.

92
00:05:11,100 --> 00:05:13,410
Esta página web que ahora se está representando aquí.

93
00:05:13,410 --> 00:05:15,783
No tiene idea de nada de eso.

94
00:05:17,070 --> 00:05:17,903
¿bueno?

95
00:05:17,903 --> 00:05:20,610
Pero de todos modos, volviendo aquí a nuestro pie de página,

96
00:05:20,610 --> 00:05:22,713
ahora comentemos esto,

97
00:05:24,000 --> 00:05:26,400
y luego devolver lo que realmente queremos devolver,

98
00:05:28,350 --> 00:05:30,000
que por ahora es lo mismo

99
00:05:30,000 --> 00:05:31,953
pero escrito de una manera agradable.

100
00:05:34,380 --> 00:05:36,210
Así que actualmente estamos abiertos,

101
00:05:36,210 --> 00:05:40,050
y ahora ingresemos al modo JavaScript aquí.

102
00:05:40,050 --> 00:05:44,820
¿Por qué no? Sólo para hacer algo de JavaScript aquí.

103
00:05:44,820 --> 00:05:47,820
y solo mostremos la hora actual.

104
00:05:47,820 --> 00:05:49,170
De hecho, hicimos eso antes.

105
00:05:49,170 --> 00:05:50,820
Entonces, simplemente crea una nueva fecha,

106
00:05:50,820 --> 00:05:52,253
y luego .toLocaleTimeString.

107
00:05:57,810 --> 00:05:59,400
está bien.

108
00:05:59,400 --> 00:06:02,700
Y aquí abajo, vemos eso ahora mismo.

109
00:06:02,700 --> 00:06:05,640
es esta vez que estamos abiertos.

110
00:06:05,640 --> 00:06:06,473
lindo.

111
00:06:06,473 --> 00:06:09,180
Entonces, este es el poder de poder

112
00:06:09,180 --> 00:06:13,230
combinar JavaScript básicamente directamente en HTML.

113
00:06:13,230 --> 00:06:15,753
Entonces, tal como aprendimos en la conferencia anterior.

114
00:06:17,280 --> 00:06:20,610
Ahora finalmente tenemos el menú aquí.

115
00:06:20,610 --> 00:06:22,473
¿Y qué queremos en el menú?

116
00:06:24,000 --> 00:06:27,003
Bueno, comencemos agregando un h2 aquí,

117
00:06:28,380 --> 00:06:31,440
solo diciendo nuestro menú,

118
00:06:31,440 --> 00:06:35,070
y luego coloquemos nuestras pizzas aquí.

119
00:06:35,070 --> 00:06:38,643
Entonces, estas pizzas deberían ser parte del menú.

120
00:06:39,540 --> 00:06:41,613
Entonces, hagamos eso.

121
00:06:43,680 --> 00:06:46,710
Puedes escribir simplemente pizza, pero claro,

122
00:06:46,710 --> 00:06:48,990
React no va a estar contento con eso,

123
00:06:48,990 --> 00:06:53,373
porque recuerda cada vez que escribimos una pieza de JSX,

124
00:06:53,373 --> 00:06:58,373
ese JSX solo puede tener básicamente un elemento raíz.

125
00:07:01,710 --> 00:07:03,450
está bien.

126
00:07:03,450 --> 00:07:05,553
Entonces, quitemos todas las pizzas.

127
00:07:06,540 --> 00:07:10,770
Así que los corto y los coloco aquí.

128
00:07:10,770 --> 00:07:12,660
Y ahora se han ido de aquí

129
00:07:12,660 --> 00:07:14,823
porque aún no incluimos el menú.

130
00:07:17,130 --> 00:07:19,620
Entonces, hagámoslo rápidamente.

131
00:07:19,620 --> 00:07:21,540
Y ahí vamos.

132
00:07:21,540 --> 00:07:24,240
Entonces tenemos el mismo resultado que antes,

133
00:07:24,240 --> 00:07:27,930
pero ahora nuestros componentes están aún más anidados.

134
00:07:27,930 --> 00:07:30,780
Entonces todo esto aquí es el componente de la aplicación,

135
00:07:30,780 --> 00:07:32,220
y luego dentro de la aplicación

136
00:07:32,220 --> 00:07:35,550
tenemos el componente de menú anidado en él,

137
00:07:35,550 --> 00:07:37,590
y luego dentro del menú

138
00:07:37,590 --> 00:07:40,470
Tenemos estos cuatro componentes de pizza.

139
00:07:40,470 --> 00:07:43,290
Y entonces, ahora realmente empiezas a ver esta idea.

140
00:07:43,290 --> 00:07:45,870
que construimos interfaces de usuario complejas

141
00:07:45,870 --> 00:07:49,290
combinando componentes pequeños en otros más grandes.

142
00:07:49,290 --> 00:07:51,930
Tenemos estos componentes de pizza realmente pequeños,

143
00:07:51,930 --> 00:07:53,910
luego combinamos un par de ellos

144
00:07:53,910 --> 00:07:56,460
en un componente un poco más grande,

145
00:07:56,460 --> 00:07:59,940
cuál es el menú, que luego combinamos con el encabezado

146
00:07:59,940 --> 00:08:04,173
y pie de página para crear el componente general de la gran aplicación.