1
00:00:01,140 --> 00:00:03,960
Entonces, con nuestro proyecto ahora instalado,

2
00:00:03,960 --> 00:00:06,538
Comencemos construyendo el diseño estático.

3
00:00:06,538 --> 00:00:08,103
de la aplicación.

4
00:00:09,270 --> 00:00:11,490
Y como siempre, comencemos por conseguir

5
00:00:11,490 --> 00:00:12,780
estos archivos de inicio

6
00:00:12,780 --> 00:00:16,800
que en este caso es sólo este archivo CSS.

7
00:00:16,800 --> 00:00:19,440
Por supuesto, no tenemos que escribir ningún estilo.

8
00:00:19,440 --> 00:00:21,210
nosotros mismos.

9
00:00:21,210 --> 00:00:23,670
Luego colóquelo aquí en la fuente.

10
00:00:23,670 --> 00:00:25,574
Ahora ya habrá uno

11
00:00:25,574 --> 00:00:27,430
así que reemplaza eso

12
00:00:28,500 --> 00:00:29,730
y como ya estamos aquí

13
00:00:29,730 --> 00:00:31,110
podemos deshacernos de todo

14
00:00:31,110 --> 00:00:33,303
la basura que no necesitamos.

15
00:00:35,640 --> 00:00:36,780
Entonces todos estos,

16
00:00:36,780 --> 00:00:37,613
así que al final

17
00:00:37,613 --> 00:00:42,543
solo tenemos app.js, index.CSS e index.js.

18
00:00:43,770 --> 00:00:45,674
bueno. Luego simplemente cambiar el nombre

19
00:00:45,674 --> 00:00:47,956
Esto aquí una vez más.

20
00:00:47,956 --> 00:00:50,577
Y luego vamos a arrastrarlo y soltarlo.

21
00:00:50,577 --> 00:00:53,043
en el icono del código VS.

22
00:00:57,709 --> 00:01:01,110
Bien, aquí ya tenemos nuestros archivos.

23
00:01:01,110 --> 00:01:03,420
Como siempre, tenemos que limpiar este de aquí.

24
00:01:03,420 --> 00:01:06,340
porque estamos importando algunos archivos que

25
00:01:06,340 --> 00:01:09,431
Básicamente ya no tenemos.

26
00:01:09,431 --> 00:01:11,460
Pero eso es todo.

27
00:01:11,460 --> 00:01:13,710
Y una vez más, si te apetece

28
00:01:13,710 --> 00:01:16,290
De hecho, puedes eliminar todo esto.

29
00:01:16,290 --> 00:01:17,970
y escribe el código tú mismo

30
00:01:17,970 --> 00:01:19,860
sólo para practicar cómo podemos configurar

31
00:01:19,860 --> 00:01:21,720
Sube esta aplicación React

32
00:01:21,720 --> 00:01:23,220
desde cero.

33
00:01:23,220 --> 00:01:24,826
Pero dejaré esto aquí.

34
00:01:24,826 --> 00:01:27,180
porque al final

35
00:01:27,180 --> 00:01:28,770
cuando construyes tus propias aplicaciones

36
00:01:28,770 --> 00:01:31,380
siempre te irás

37
00:01:31,380 --> 00:01:32,460
esto aquí también.

38
00:01:32,460 --> 00:01:35,490
No siempre vas a escribir todo desde cero

39
00:01:35,490 --> 00:01:37,710
pero aquí en realidad quieres borrar todo

40
00:01:37,710 --> 00:01:40,170
y empezar desde cero.

41
00:01:40,170 --> 00:01:41,730
entonces exportar

42
00:01:41,730 --> 00:01:42,563
por defecto

43
00:01:43,470 --> 00:01:46,770
aplicación de función.

44
00:01:46,770 --> 00:01:48,540
Así que esto suele ser siempre

45
00:01:48,540 --> 00:01:50,040
Lo mismo también aquí.

46
00:01:50,040 --> 00:01:52,890
Para que siempre tengas el componente principal de tu aplicación

47
00:01:52,890 --> 00:01:55,680
que incluirá todos los demás componentes.

48
00:01:55,680 --> 00:01:58,890
Y de hecho comencemos con estos otros componentes.

49
00:01:58,890 --> 00:02:00,150
Entonces solo los componentes

50
00:02:00,150 --> 00:02:01,440
de lo que hablamos

51
00:02:01,440 --> 00:02:02,733
en la conferencia anterior.

52
00:02:04,800 --> 00:02:07,083
Entonces esa es la función,

53
00:02:08,190 --> 00:02:09,023
logo.

54
00:02:10,440 --> 00:02:12,492
Y ahora simplemente duplicaré rápidamente

55
00:02:12,492 --> 00:02:13,930
este código aquí

56
00:02:16,664 --> 00:02:19,503
sólo para hacer esto un poco más rápido.

57
00:02:21,008 --> 00:02:24,753
Así que lista de equipaje.

58
00:02:26,460 --> 00:02:29,040
Y también tenemos nuestras estadísticas.

59
00:02:29,040 --> 00:02:30,960
Estos son los cuatro grandes componentes

60
00:02:30,960 --> 00:02:32,788
que identificamos

61
00:02:32,788 --> 00:02:33,621
en la última conferencia,

62
00:02:33,621 --> 00:02:34,454
¿recuerda eso?

63
00:02:34,454 --> 00:02:36,090
Y entonces escribamos ahora un poquito.

64
00:02:36,090 --> 00:02:38,730
de JSX para cada uno de ellos

65
00:02:38,730 --> 00:02:40,680
comenzando con el Logotipo.

66
00:02:40,680 --> 00:02:42,810
Entonces el logo es muchas veces una imagen,

67
00:02:42,810 --> 00:02:43,740
pero en este caso

68
00:02:43,740 --> 00:02:45,580
solo tendremos un encabezado principal

69
00:02:47,250 --> 00:02:49,560
y diremos lejos.

70
00:02:49,560 --> 00:02:52,290
Y luego agreguemos algunos emoji aquí.

71
00:02:52,290 --> 00:02:54,420
Ahora la forma en que escribimos emojis

72
00:02:54,420 --> 00:02:55,860
en Mac es presionando

73
00:02:55,860 --> 00:02:58,770
barra espaciadora de comando de control.

74
00:02:58,770 --> 00:03:01,620
Y en Windows, el acceso directo es Windows.

75
00:03:01,620 --> 00:03:03,660
más punto.

76
00:03:03,660 --> 00:03:05,100
Entonces así,

77
00:03:05,100 --> 00:03:08,445
entonces la tecla de Windows y luego más este punto.

78
00:03:08,445 --> 00:03:12,730
Muy bien, entonces usemos una palmera.

79
00:03:12,730 --> 00:03:14,590
Así que este aquí

80
00:03:16,170 --> 00:03:17,553
y luego una bolsa.

81
00:03:22,140 --> 00:03:23,730
Así como esto.

82
00:03:23,730 --> 00:03:25,380
Y en caso de que no puedas conseguir

83
00:03:25,380 --> 00:03:26,700
estos emojis para trabajar

84
00:03:26,700 --> 00:03:28,230
siempre puedes simplemente copiarlos

85
00:03:28,230 --> 00:03:30,651
de los archivos finales de este proyecto.

86
00:03:30,651 --> 00:03:34,170
O, por supuesto, también puedes ignorarlos.

87
00:03:34,170 --> 00:03:36,060
Entonces estos son solo para hacer el diseño.

88
00:03:36,060 --> 00:03:37,143
un poquito mejor.

89
00:03:38,520 --> 00:03:40,544
Bien, eso es suficiente para el logo.

90
00:03:40,544 --> 00:03:43,739
Entonces escribiremos algunos muy simples.

91
00:03:43,739 --> 00:03:45,271
arrancador JSX aquí

92
00:03:45,271 --> 00:03:46,787
para cada componente

93
00:03:46,787 --> 00:03:50,223
ya que básicamente estamos armando este diseño.

94
00:03:51,960 --> 00:03:53,190
Así que aquí, volvamos

95
00:03:53,190 --> 00:03:56,973
un div con la clase de add-form.

96
00:03:58,257 --> 00:04:00,613
Y de nuevo, por supuesto que puedes.

97
00:04:00,613 --> 00:04:03,330
explorar el archivo CSS

98
00:04:03,330 --> 00:04:05,234
y ver todo el CSS que escribí

99
00:04:05,234 --> 00:04:07,440
para estos nombres de clases

100
00:04:07,440 --> 00:04:10,023
que vamos a importar aquí.

101
00:04:10,023 --> 00:04:12,914
Así que aquí más tarde tendremos

102
00:04:12,914 --> 00:04:14,473
estos elementos de forma

103
00:04:14,473 --> 00:04:16,320
como el cuadro de selección,

104
00:04:16,320 --> 00:04:19,260
el cuadro de entrada y ese botón.

105
00:04:19,260 --> 00:04:21,960
Pero por ahora sólo escribiremos el texto.

106
00:04:21,960 --> 00:04:24,719
entonces qué necesitas

107
00:04:24,719 --> 00:04:27,300
para tu viaje?

108
00:04:27,300 --> 00:04:29,160
Y aquí también teníamos algunos emoji,

109
00:04:29,160 --> 00:04:30,756
agreguemos eso también.

110
00:04:30,756 --> 00:04:32,883
Y en realidad ya está aquí abajo.

111
00:04:35,640 --> 00:04:37,050
bueno.

112
00:04:37,050 --> 00:04:39,840
Y fíjate como se queja Eslint.

113
00:04:39,840 --> 00:04:42,300
que no estamos usando estas variables aquí.

114
00:04:42,300 --> 00:04:44,010
Pero por supuesto lo haremos pronto.

115
00:04:44,010 --> 00:04:45,900
incluyéndolos todos aquí

116
00:04:45,900 --> 00:04:47,940
en el componente principal global.

117
00:04:47,940 --> 00:04:49,263
Así que aquí en esta aplicación.

118
00:04:51,090 --> 00:04:53,580
Pero repito, dejemos eso para más adelante.

119
00:04:53,580 --> 00:04:55,290
Entonces lo hacemos al final.

120
00:04:55,290 --> 00:04:57,090
Por ahora, sólo escribimos la parte estática.

121
00:04:57,090 --> 00:04:58,473
de todos los componentes.

122
00:05:01,962 --> 00:05:04,593
Y esta es la lista.

123
00:05:09,938 --> 00:05:13,380
De nuevo, como un marcador de posición allí.

124
00:05:13,380 --> 00:05:14,520
Y hagamos este aquí

125
00:05:14,520 --> 00:05:16,200
un elemento de pie de página.

126
00:05:16,200 --> 00:05:18,720
Así que recuerda cómo son realmente las estadísticas.

127
00:05:18,720 --> 00:05:20,136
al final de la página,

128
00:05:20,136 --> 00:05:22,953
por lo que un pie de página parece una buena opción aquí.

129
00:05:25,140 --> 00:05:27,630
Así que escribamos Tienes

130
00:05:27,630 --> 00:05:30,210
y aquí al final tendremos un número.

131
00:05:30,210 --> 00:05:31,840
Entonces usemos una X por ahora.

132
00:05:34,416 --> 00:05:36,000
elementos en tu lista

133
00:05:36,000 --> 00:05:38,964
y ya empacaste

134
00:05:38,964 --> 00:05:40,950
y luego otra vez, una X,

135
00:05:40,950 --> 00:05:44,130
que es el X por ciento del total.

136
00:05:44,130 --> 00:05:45,120
Entonces aquí también tuvimos

137
00:05:45,120 --> 00:05:46,600
algunos emojis

138
00:05:48,019 --> 00:05:50,793
Como este otro bolso de aquí.

139
00:05:52,770 --> 00:05:53,823
y si,

140
00:05:54,840 --> 00:05:56,883
Creo que este también fue formateado.

141
00:05:58,120 --> 00:06:00,660
Entonces usemos énfasis aquí.

142
00:06:00,660 --> 00:06:01,623
Vos tambien.

143
00:06:06,210 --> 00:06:07,563
Y ahora con eso,

144
00:06:09,301 --> 00:06:10,290
Vayamos aquí a nuestro componente de aplicación.

145
00:06:11,234 --> 00:06:12,630
y utilícelos todos aquí en nuestro diseño.

146
00:06:12,630 --> 00:06:13,463
y si tu quieres,

147
00:06:13,463 --> 00:06:14,910
De hecho puedes pasar el video aquí.

148
00:06:14,910 --> 00:06:16,950
y hacerlo como un desafío.

149
00:06:16,950 --> 00:06:18,960
Entonces solo crea un elemento div

150
00:06:18,960 --> 00:06:20,488
con la clase de aplicación

151
00:06:20,488 --> 00:06:22,890
y luego incluir los cuatro componentes

152
00:06:22,890 --> 00:06:24,213
ahí si quieres.

153
00:06:26,130 --> 00:06:27,201
así que esto

154
00:06:27,201 --> 00:06:29,253
así es como se hace eso.

155
00:06:31,560 --> 00:06:33,970
Entonces con la clase de aplicación.

156
00:06:35,400 --> 00:06:37,260
y luego uno por uno,

157
00:06:37,260 --> 00:06:38,730
uno después del otro

158
00:06:38,730 --> 00:06:40,650
simplemente los incluimos aquí.

159
00:06:40,650 --> 00:06:42,232
Primero un logo,

160
00:06:42,232 --> 00:06:44,285
luego la forma.

161
00:06:44,285 --> 00:06:45,720
Así que en realidad exactamente

162
00:06:45,720 --> 00:06:47,870
en la forma en que los definimos en nuestro código.

163
00:06:49,950 --> 00:06:52,440
Y por cierto, en aplicaciones más reales,

164
00:06:52,440 --> 00:06:54,360
y también un poco más adelante en el curso,

165
00:06:54,360 --> 00:06:55,560
comenzaremos a colocar

166
00:06:55,560 --> 00:06:56,861
cada uno de estos componentes aquí

167
00:06:56,861 --> 00:06:58,820
en un archivo individual.

168
00:06:58,820 --> 00:07:02,233
Entonces tendremos un archivo llamado app js

169
00:07:02,233 --> 00:07:06,570
para este componente, uno llamado logo js para este

170
00:07:06,570 --> 00:07:08,220
y así sucesivamente y así sucesivamente.

171
00:07:08,220 --> 00:07:10,230
Pero aquí, ya que todavía estamos aprendiendo

172
00:07:10,230 --> 00:07:12,810
Creo que es más fácil construirlos todos aquí.

173
00:07:12,810 --> 00:07:14,010
en el mismo archivo

174
00:07:14,010 --> 00:07:15,780
porque sino estamos saltando

175
00:07:15,780 --> 00:07:16,965
alrededor de todos los tiempos

176
00:07:16,965 --> 00:07:18,690
a través de estos archivos.

177
00:07:18,690 --> 00:07:20,160
Y entonces eso hace que todo

178
00:07:20,160 --> 00:07:21,510
mucho más confuso

179
00:07:21,510 --> 00:07:22,560
especialmente cuando llegamos

180
00:07:22,560 --> 00:07:26,073
en temas como la comunicación entre padres e hijos.

181
00:07:27,390 --> 00:07:30,633
Pero sí, habrá más información sobre eso muy pronto.

182
00:07:32,670 --> 00:07:34,330
Entonces para terminar las estadísticas.

183
00:07:35,190 --> 00:07:36,331
y eso es.

184
00:07:36,331 --> 00:07:37,795
Entonces ningún componente

185
00:07:37,795 --> 00:07:40,200
aquí ya es amarillo

186
00:07:40,200 --> 00:07:42,956
y eso significa que no nos olvidamos de ninguno.

187
00:07:42,956 --> 00:07:45,777
Y sí, con esto hemos terminado.

188
00:07:45,777 --> 00:07:49,870
Así que abramos nuestra terminal integrada.

189
00:07:50,940 --> 00:07:52,140
como esto.

190
00:07:52,140 --> 00:07:54,190
Y ya estamos en la carpeta correcta.

191
00:07:55,658 --> 00:07:57,070
Entonces npm comienza

192
00:08:00,039 --> 00:08:02,853
y esperémoslo.

193
00:08:04,770 --> 00:08:05,763
hermoso.

194
00:08:06,900 --> 00:08:08,110
Bueno aquí parece

195
00:08:09,775 --> 00:08:10,983
nos perdimos alguna clase.

196
00:08:12,210 --> 00:08:14,433
Hagamos esto más pequeño nuevamente.

197
00:08:17,640 --> 00:08:19,260
está bien.

198
00:08:19,260 --> 00:08:21,910
Y entonces este pie de página aquí necesita el

199
00:08:23,220 --> 00:08:25,529
clase de estadísticas.

200
00:08:25,529 --> 00:08:27,360
Sí, maravilloso.

201
00:08:27,360 --> 00:08:29,490
Entonces así es como se supone que debe verse

202
00:08:29,490 --> 00:08:32,100
y se ve exactamente como nuestra demostración.

203
00:08:32,100 --> 00:08:35,010
Bueno, excepto, por supuesto, por estos detalles aquí.

204
00:08:35,010 --> 00:08:36,456
del cual nos encargaremos

205
00:08:36,456 --> 00:08:39,000
comenzando en la próxima conferencia.

206
00:08:39,000 --> 00:08:41,850
A continuación, comenzaremos a renderizar.

207
00:08:41,850 --> 00:08:43,500
Algunos elementos estáticos aquí.

208
00:08:43,500 --> 00:08:45,540
Así que todavía no lo haremos dinámicamente.

209
00:08:45,540 --> 00:08:47,106
agregar nuevos elementos a la lista

210
00:08:47,106 --> 00:08:49,590
pero renderizaremos algunos elementos estáticos

211
00:08:49,590 --> 00:08:51,513
desde una matriz aquí en la interfaz de usuario.