1
00:00:01,070 --> 00:00:03,823
Bienvenido al primer desafío de codificación

2
00:00:03,823 --> 00:00:05,240
de este curso,

3
00:00:05,240 --> 00:00:06,880
donde estarás ahora por primera vez

4
00:00:06,880 --> 00:00:09,170
tiempo practica todas las habilidades

5
00:00:09,170 --> 00:00:13,780
que ya has aprendido en este curso por tu cuenta.

6
00:00:13,780 --> 00:00:16,260
Entonces, el objetivo de este desafío es

7
00:00:16,260 --> 00:00:20,800
para crear una tarjeta de perfil de desarrollador como esta.

8
00:00:20,800 --> 00:00:23,610
Entonces tenemos como una imagen de avatar aquí,

9
00:00:23,610 --> 00:00:27,340
luego el nombre del desarrollador, una breve biografía,

10
00:00:27,340 --> 00:00:30,509
y finalmente una lista de habilidades.

11
00:00:30,509 --> 00:00:34,430
Ahora, para construir este proyecto, tienes dos opciones.

12
00:00:34,430 --> 00:00:38,460
Primero, simplemente puedes crear una nueva aplicación Create React

13
00:00:38,460 --> 00:00:41,980
en su propia computadora y luego construir el proyecto allí

14
00:00:41,980 --> 00:00:44,690
tal como lo hemos estado haciendo en esta sección.

15
00:00:44,690 --> 00:00:48,420
O segundo, puedes usar la aplicación CodeSandbox

16
00:00:48,420 --> 00:00:51,830
que utilizamos para la primera aplicación que creamos

17
00:00:51,830 --> 00:00:54,000
en el curso.

18
00:00:54,000 --> 00:00:55,610
Este es básicamente un editor en línea,

19
00:00:55,610 --> 00:00:58,540
lo que hace que sea muy fácil probarlo rápidamente

20
00:00:58,540 --> 00:01:00,710
algunos nuevos proyectos pequeños.

21
00:01:00,710 --> 00:01:03,260
Y esto es lo que realmente voy a usar.

22
00:01:03,260 --> 00:01:04,929
para construir este desafío.

23
00:01:04,929 --> 00:01:06,920
Ahora, en caso de que quieras hacer lo mismo,

24
00:01:06,920 --> 00:01:09,450
Te aconsejo que crees una nueva cuenta aquí,

25
00:01:09,450 --> 00:01:10,037
Y esto es lo que realmente voy a usar.

26
00:01:10,037 --> 00:01:11,037
para construir este desafío.

27
00:01:11,037 --> 00:01:11,152
Ahora, en caso de que quieras hacer lo mismo,

28
00:01:11,152 --> 00:01:11,162
Te aconsejo que crees una nueva cuenta aquí.

29
00:01:11,162 --> 00:01:11,289
Y luego, una vez que hayas terminado,

30
00:01:11,289 --> 00:01:14,880
simplemente puedes crear una nueva aplicación React aquí.

31
00:01:14,880 --> 00:01:19,110
Entonces, simplemente haga clic aquí para crear y luego reaccionar.

32
00:01:19,110 --> 00:01:21,560
Y de nuevo, tal vez cuando estés viendo esto,

33
00:01:22,900 --> 00:01:24,650
CodeSandbox se ve completamente diferente,

34
00:01:24,650 --> 00:01:26,660
pero solo encuentra un botón en alguna parte

35
00:01:26,660 --> 00:01:28,600
para crear una nueva aplicación React.

36
00:01:28,600 --> 00:01:31,840
O alternativamente, como también les mostré antes,

37
00:01:31,840 --> 00:01:36,310
simplemente puedes reaccionar.nuevo.

38
00:01:36,310 --> 00:01:40,570
Y esto también creará una nueva aplicación React.

39
00:01:40,570 --> 00:01:42,539
Y de hecho, usa,

40
00:01:42,539 --> 00:01:45,880
Debajo del capó también crea una aplicación de reacción.

41
00:01:45,880 --> 00:01:49,200
Es un poco diferente aquí en términos de la estructura del archivo,

42
00:01:49,200 --> 00:01:51,140
pero sí también nos permite

43
00:01:51,140 --> 00:01:54,860
para crear muy rápidamente una pequeña aplicación React.

44
00:01:54,860 --> 00:01:58,030
Ahora, antes de que empieces a codificar, tengo algunas piezas

45
00:01:58,030 --> 00:01:59,770
de consejos para ti

46
00:01:59,770 --> 00:02:02,969
porque esto probablemente parezca un poco desalentador.

47
00:02:02,969 --> 00:02:06,199
Entonces, construyendo todo esto aquí desde cero.

48
00:02:06,199 --> 00:02:09,210
como principiante puede ser un poco difícil.

49
00:02:09,210 --> 00:02:12,360
Entonces, déjame darte algunos consejos.

50
00:02:12,360 --> 00:02:16,679
Entonces, aquí ya tengo básicamente el componente de la aplicación.

51
00:02:16,679 --> 00:02:20,540
Entonces, miremos juntos la estructura aquí.

52
00:02:20,540 --> 00:02:24,330
Entonces, en esta aplicación, devolvemos un div con el nombre de la clase.

53
00:02:24,330 --> 00:02:26,440
del Card.

54
00:02:26,440 --> 00:02:29,310
Y por cierto, puedes conseguir todos estos estilos aquí mismo.

55
00:02:29,310 --> 00:02:33,360
de este archivo, que está disponible en esta URL,

56
00:02:33,360 --> 00:02:36,950
Entonces, en este inicio de este desafío,

57
00:02:36,950 --> 00:02:38,370
que por supuesto adjuntaré

58
00:02:38,370 --> 00:02:41,320
A la conferencia en Udemy como siempre.

59
00:02:41,320 --> 00:02:43,150
Así que asegúrese de revisar ese enlace,

60
00:02:43,150 --> 00:02:46,650
y desde allí, puedes obtener este CSS.

61
00:02:48,200 --> 00:02:49,900
Pero de todos modos, volviendo aquí,

62
00:02:49,900 --> 00:02:52,500
lo que quiero que hagas es crear este div,

63
00:02:52,500 --> 00:02:54,380
que es todo el carrito.

64
00:02:56,130 --> 00:02:58,170
Básicamente, el contenedor para todo esto.

65
00:02:58,170 --> 00:02:59,620
con este borde negro.

66
00:03:01,250 --> 00:03:03,880
Y luego ahí tenemos un componente de avatar,

67
00:03:03,880 --> 00:03:05,950
que será para la imagen.

68
00:03:05,950 --> 00:03:08,610
Y luego tenemos este div para los datos.

69
00:03:08,610 --> 00:03:10,469
Y en los datos, tenemos la introducción,

70
00:03:10,469 --> 00:03:13,520
que es para este encabezado aquí y para esta biografía.

71
00:03:13,520 --> 00:03:16,900
Y luego tenemos aquí una lista de habilidades.

72
00:03:16,900 --> 00:03:19,330
Entonces, un componente llamado lista de habilidades.

73
00:03:19,330 --> 00:03:23,630
Y en la lista de habilidades, deberías tener un componente de habilidad.

74
00:03:23,630 --> 00:03:26,700
para cada habilidad de desarrollo web que tengas.

75
00:03:26,700 --> 00:03:29,639
Y para personalizar cada una de estas habilidades,

76
00:03:29,639 --> 00:03:30,860
usarás accesorios,

77
00:03:30,860 --> 00:03:33,770
Así como aprendimos anteriormente.

78
00:03:33,770 --> 00:03:35,680
Entonces, volviendo aquí, por ejemplo,

79
00:03:35,680 --> 00:03:40,460
Creé una habilidad para cada una de estas seis habilidades de desarrollo web.

80
00:03:40,460 --> 00:03:42,240
eso tengo.

81
00:03:42,240 --> 00:03:45,400
Y así, a cada uno de ellos, le pasé la habilidad misma,

82
00:03:45,400 --> 00:03:49,610
luego el emoji aquí, y luego también el color de fondo.

83
00:03:49,610 --> 00:03:51,719
Y este color de fondo probablemente sea

84
00:03:51,719 --> 00:03:53,629
La parte más desafiante aquí.

85
00:03:53,629 --> 00:03:56,770
Así que tal vez no te preocupes demasiado por esa parte.

86
00:03:56,770 --> 00:04:00,660
A mí lo que me importa aquí es que pases el emoji.

87
00:04:00,660 --> 00:04:03,020
y el nombre de la habilidad en sí.

88
00:04:03,020 --> 00:04:05,146
Y básicamente con eso,

89
00:04:05,146 --> 00:04:06,630
ya puedes personalizar

90
00:04:06,630 --> 00:04:10,039
el componente de habilidad bastante bien.

91
00:04:10,039 --> 00:04:13,990
Ahora, en cuanto a la imagen, puedes subirla.

92
00:04:13,990 --> 00:04:16,670
Entonces tu imagen de avatar o cualquier otra imagen.

93
00:04:16,670 --> 00:04:20,360
que desea aquí mismo en la zona de pruebas de código.

94
00:04:20,360 --> 00:04:23,340
Entonces puedes abrir esta carpeta pública y luego arrastrar

95
00:04:23,340 --> 00:04:26,150
y suelte una imagen directamente en esto.

96
00:04:26,150 --> 00:04:29,580
Entonces esto cargará la imagen directamente en la zona de pruebas.

97
00:04:29,580 --> 00:04:31,980
y luego puedes hacer referencia a esa imagen como

98
00:04:31,980 --> 00:04:36,070
hemos estado haciendo en nuestra aplicación a lo largo de esta sección.

99
00:04:36,070 --> 00:04:40,380
Bien, y creo que estas instrucciones deberían ayudarte a empezar.

100
00:04:40,380 --> 00:04:42,670
Y en caso de que necesites un poco más,

101
00:04:42,670 --> 00:04:45,540
entonces puedes empezar a ver mi solución.

102
00:04:45,540 --> 00:04:47,690
Por supuesto, eso no supone ningún problema.

103
00:04:47,690 --> 00:04:51,670
Realmente no hay problema si no eres capaz de hacer todo.

104
00:04:51,670 --> 00:04:54,190
de esto por su cuenta en su primer intento.

105
00:04:54,190 --> 00:04:57,610
Entonces, si necesitas ver mi solución, está 100% bien.

106
00:04:58,770 --> 00:05:03,770
Ahora asegúrese de leer también aquí a través de este estilos.css,

107
00:05:03,910 --> 00:05:06,350
porque esto te dará las pistas

108
00:05:06,350 --> 00:05:09,090
para qué nombres de clase debe utilizar.

109
00:05:09,090 --> 00:05:11,050
Por ejemplo, para la imagen de avatar,

110
00:05:11,050 --> 00:05:14,760
esta es la clase que necesitas, aquí para ver la lista de habilidades,

111
00:05:14,760 --> 00:05:17,250
etcétera.

112
00:05:17,250 --> 00:05:19,530
Así que adelante, pausa el vídeo ahora.

113
00:05:19,530 --> 00:05:21,460
y luego haz todo lo que puedas.

114
00:05:21,460 --> 00:05:23,500
Y una vez que hayas terminado con eso,

115
00:05:23,500 --> 00:05:26,580
Te veré aquí con mi solución.

116
00:05:26,580 --> 00:05:29,170
y probablemente debería dejar este aquí arriba

117
00:05:29,170 --> 00:05:31,110
en la pantalla,

118
00:05:31,110 --> 00:05:32,860
para que puedas ver lo que realmente necesitas construir.

119
00:05:32,860 --> 00:05:35,410
Buena suerte con eso y nos vemos en un minuto.

120
00:05:37,580 --> 00:05:40,389
Bien, ¿cómo te fue?

121
00:05:40,389 --> 00:05:42,949
Bueno, intentemos abordar esto juntos.

122
00:05:44,720 --> 00:05:48,410
Entonces estoy creando aquí una nueva aplicación React,

123
00:05:48,410 --> 00:05:52,413
entonces el que creé antes con react.new.

124
00:05:52,413 --> 00:05:56,763
Y luego eliminemos este archivo aquí.

125
00:05:56,763 --> 00:06:00,763
ya que una vez más lo haremos todo dentro de index.js.

126
00:06:04,804 --> 00:06:09,637
Bien, entonces creemos el componente de la aplicación aquí mismo.

127
00:06:10,727 --> 00:06:13,990
y de hecho, sólo para hacerlo un poco más rápido,

128
00:06:13,990 --> 00:06:18,110
Ya copiaré el código que ya tenía antes.

129
00:06:21,510 --> 00:06:24,390
De esta manera, estamos acelerando un poco el video.

130
00:06:26,770 --> 00:06:28,309
Entonces así.

131
00:06:28,309 --> 00:06:32,669
Y, por supuesto, también conseguiré estos estilos iniciales.

132
00:06:38,909 --> 00:06:40,679
bueno.

133
00:06:40,679 --> 00:06:44,730
Y ahora simplemente creemos estos componentes adicionales.

134
00:06:44,730 --> 00:06:48,147
Así funciona avatar,

135
00:06:51,888 --> 00:06:53,138
luego la introducción,

136
00:06:55,789 --> 00:06:59,705
y finalmente también la lista de habilidades,

137
00:06:59,705 --> 00:07:03,090
y la habilidad misma.

138
00:07:03,090 --> 00:07:06,639
De nuevo, vamos a tener un componente de habilidad.

139
00:07:06,639 --> 00:07:09,780
para cada una de nuestras habilidades de desarrollo web.

140
00:07:09,780 --> 00:07:13,197
Y ahora comencemos con el más fácil.

141
00:07:14,240 --> 00:07:19,240
Entonces, el avatar es básicamente solo una imagen con una fuente.

142
00:07:19,470 --> 00:07:20,960
Dejemos este vacío por ahora.

143
00:07:20,960 --> 00:07:25,900
Y agreguemos la etiqueta alt con mi nombre.

144
00:07:27,990 --> 00:07:30,190
bueno.

145
00:07:30,190 --> 00:07:32,480
Y ahora tomemos la imagen, arrástrela y suéltela aquí.

146
00:07:32,480 --> 00:07:35,480
Entonces lo tengo en mi carpeta de descargas.

147
00:07:37,060 --> 00:07:39,080
Entonces esto cargará rápidamente el archivo,

148
00:07:39,080 --> 00:07:43,830
y luego puedo escribir aquí en la fuente, Jonas.jpac.

149
00:07:46,490 --> 00:07:49,630
Entonces, si guardo esto ahora, veamos si sucede algo.

150
00:07:50,820 --> 00:07:54,030
Bueno, tenemos algunos errores aquí.

151
00:07:54,030 --> 00:07:57,697
Entonces, recarguemos este navegador interno.

152
00:07:58,809 --> 00:08:00,219
Eso debería solucionarlo.

153
00:08:00,219 --> 00:08:01,552
y ahí vamos.

154
00:08:02,520 --> 00:08:05,000
Entonces esto es demasiado grande y eso es simplemente

155
00:08:05,000 --> 00:08:09,270
porque olvidé el nombre de clase apropiado aquí.

156
00:08:09,270 --> 00:08:14,270
Entonces, ese es solo el nombre de clase Avatar.

157
00:08:18,037 --> 00:08:19,520
Sí, hermosa.

158
00:08:19,520 --> 00:08:22,230
Así que esa ya es nuestra primera parte.

159
00:08:23,420 --> 00:08:24,850
Cerremos.

160
00:08:24,850 --> 00:08:26,800
Sí, así de sencillo.

161
00:08:26,800 --> 00:08:28,270
A continuación tenemos la introducción,

162
00:08:38,120 --> 00:08:39,879
que es solo una diferencia aquí,

163
00:08:39,879 --> 00:08:42,296
y luego un título principal.

164
00:08:47,754 --> 00:08:51,337
Y luego aquí con un párrafo para la biografía.

165
00:08:53,880 --> 00:08:57,859
Y aquí lo tomaré desde aquí.

166
00:08:57,859 --> 00:08:59,990
Y, por supuesto, con suerte irás.

167
00:08:59,990 --> 00:09:02,459
para escribir el tuyo propio.

168
00:09:02,459 --> 00:09:04,940
Guárdalo.

169
00:09:04,940 --> 00:09:06,230
Entonces esa es la siguiente parte.

170
00:09:06,230 --> 00:09:08,220
Y ahora viene la parte más difícil,

171
00:09:08,220 --> 00:09:10,540
cual es la lista de habilidades.

172
00:09:10,540 --> 00:09:12,790
Entonces, antes de abordar la lista de habilidades,

173
00:09:12,790 --> 00:09:15,479
De hecho, desarrollemos la habilidad en sí.

174
00:09:18,469 --> 00:09:19,790
Así que regresa.

175
00:09:23,050 --> 00:09:27,410
Es un div con el nombre de clase de habilidad.

176
00:09:27,410 --> 00:09:29,440
Y con suerte, conseguiste este simplemente.

177
00:09:29,440 --> 00:09:31,279
mirando el archivo CSS.

178
00:09:34,990 --> 00:09:37,239
Cerrémoslo.

179
00:09:37,239 --> 00:09:38,700
Y por ahora, escribamos algo aquí.

180
00:09:41,460 --> 00:09:43,543
Y también sólo algunos emoji.

181
00:09:46,400 --> 00:09:48,983
Está bien, y luego

182
00:09:53,316 --> 00:09:55,733
vamos a crear aquí también un div,

183
00:09:56,670 --> 00:09:59,530
y si voy demasiado rápido para ti es simplemente

184
00:09:59,530 --> 00:10:02,780
porque no quiero que este video dure una eternidad.

185
00:10:02,780 --> 00:10:06,610
Bien, y también explicaré las partes importantes.

186
00:10:06,610 --> 00:10:09,549
por supuesto, después de escribir el código.

187
00:10:10,730 --> 00:10:14,150
Pero de todos modos, vemos que ya incluimos

188
00:10:14,150 --> 00:10:15,920
nuestra primera habilidad aquí.

189
00:10:17,060 --> 00:10:20,040
Sin embargo, si ahora copio y pego esto,

190
00:10:20,040 --> 00:10:23,219
Entonces tenemos el mismo problema que teníamos antes.

191
00:10:23,219 --> 00:10:27,280
con nuestras pizzas, que es que todas son iguales.

192
00:10:27,280 --> 00:10:30,080
Y ahora necesitamos volver a buscar accesorios para

193
00:10:30,080 --> 00:10:32,420
para personalizar estas habilidades.

194
00:10:34,310 --> 00:10:36,020
Entonces, en el componente de habilidades,

195
00:10:36,020 --> 00:10:38,853
pasemos un accesorio llamado habilidad,

196
00:10:40,153 --> 00:10:42,236
y lo llamaré Reaccionar.

197
00:10:45,860 --> 00:10:48,610
Y luego pasemos también un emoji.

198
00:10:52,740 --> 00:10:55,310
Entonces éste, por ejemplo.

199
00:10:57,530 --> 00:10:59,680
bueno.

200
00:10:59,680 --> 00:11:00,360
Y ahora aquí, como antes,

201
00:11:00,360 --> 00:11:03,160
recibimos el objeto de accesorios.

202
00:11:03,160 --> 00:11:05,969
Entonces como argumento o como parámetro.

203
00:11:05,969 --> 00:11:08,750
a esta función del componente de habilidades.

204
00:11:08,750 --> 00:11:12,083
Y aquí ahora podemos usar exactamente eso.

205
00:11:15,389 --> 00:11:18,009
Entonces, tal vez creemos un tramo.

206
00:11:18,009 --> 00:11:20,559
Entonces, un elemento para la habilidad en sí.

207
00:11:20,559 --> 00:11:22,830
y luego uno para el emoji.

208
00:11:22,830 --> 00:11:27,180
Así que aquí todo lo que tenemos que hacer es escribir accesorios.

209
00:11:27,180 --> 00:11:29,640
Así que los accesorios nuevamente son ese objeto.

210
00:11:29,640 --> 00:11:33,020
que reacciona pasará automáticamente al componente

211
00:11:33,020 --> 00:11:36,300
cuando definimos algunos accesorios en él.

212
00:11:36,300 --> 00:11:41,300
Y ahora tenemos props prop.skill y prop. emojis

213
00:11:41,343 --> 00:11:43,660
porque estos son los dos accesorios que pasamos

214
00:11:43,660 --> 00:11:45,890
aquí mismo.

215
00:11:45,890 --> 00:11:49,320
De nuevo, piense en un accesorio como un canal de comunicación.

216
00:11:49,320 --> 00:11:53,950
entre este componente de la lista de habilidades, que está llamando,

217
00:11:53,950 --> 00:11:57,530
Entonces, ¿cuál es la inclusión de este componente de habilidad?

218
00:11:57,530 --> 00:12:01,530
y el componente hijo, por lo que el componente en sí.

219
00:12:01,530 --> 00:12:04,120
Entonces estos dos ahora básicamente pueden comunicarse.

220
00:12:04,120 --> 00:12:06,030
pasando algunos datos.

221
00:12:07,060 --> 00:12:11,393
Pero de todos modos, usemos ahora este accesorio, entonces props.skill.

222
00:12:14,089 --> 00:12:18,367
y luego usemos otro lapso aquí

223
00:12:18,367 --> 00:12:22,200
para accesorios.emoji,

224
00:12:25,017 --> 00:12:27,684
y luego veamos qué pasa.

225
00:12:28,580 --> 00:12:32,679
Entonces tenemos la habilidad, pero aquí, por supuesto,

226
00:12:32,679 --> 00:12:34,510
eso no puede funcionar.

227
00:12:34,510 --> 00:12:35,830
Y ahí vamos.

228
00:12:36,700 --> 00:12:37,533
hermoso.

229
00:12:39,400 --> 00:12:41,370
Entonces, sigamos adelante.

230
00:12:41,370 --> 00:12:46,370
Entonces, digamos habilidad HTML más CSS

231
00:12:47,770 --> 00:12:51,000
y el emoji digamos que es el mismo.

232
00:12:51,000 --> 00:12:54,760
También hay algunas habilidades sólidas ahí mismo.

233
00:12:54,760 --> 00:12:56,660
Y ahora sí que tenemos

234
00:12:56,660 --> 00:12:58,680
dos componentes diferentes aquí.

235
00:12:58,680 --> 00:13:02,070
Entonces, dos componentes de habilidades con datos diferentes.

236
00:13:02,070 --> 00:13:05,759
Y ahora agreguemos otra habilidad.

237
00:13:05,759 --> 00:13:08,120
¿Qué tenemos aquí?

238
00:13:08,120 --> 00:13:10,279
Entonces tenemos digamos Svelte,

239
00:13:10,279 --> 00:13:13,920
luego con este emoji de bebé, porque, bueno,

240
00:13:13,920 --> 00:13:15,700
No soy muy bueno en Svelte.

241
00:13:16,700 --> 00:13:20,340
Lo probé una vez durante unas horas.

242
00:13:20,340 --> 00:13:23,673
Entonces, puedo decir que soy bueno con Svelte.

243
00:13:27,032 --> 00:13:30,840
Muy bien, aquí realmente necesitamos agregar el nombre de la clase.

244
00:13:30,840 --> 00:13:35,040
de la lista de habilidades, creo.

245
00:13:36,060 --> 00:13:39,010
Sí, esto los coloca muy bien uno al lado del otro.

246
00:13:39,010 --> 00:13:40,959
Y en realidad agreguemos uno más,

247
00:13:42,420 --> 00:13:44,750
solo para que pasen a la siguiente línea.

248
00:13:46,619 --> 00:13:48,030
Digamos JavaScript aquí.

249
00:13:51,950 --> 00:13:55,610
Muy bien, ya casi hemos terminado aquí.

250
00:13:55,610 --> 00:13:57,330
Así que lo único que falta

251
00:13:57,330 --> 00:14:00,190
y que ya te dije no es realmente obligatorio

252
00:14:00,190 --> 00:14:05,107
Porque es bastante confuso el color de fondo aquí.

253
00:14:06,309 --> 00:14:08,990
Entonces, ¿cómo hacemos el color de fondo?

254
00:14:08,990 --> 00:14:12,800
Bueno, primero que nada, pasaré una cadena con el nombre.

255
00:14:12,800 --> 00:14:14,980
del color.

256
00:14:14,980 --> 00:14:17,670
Así que llamemos a ese color de utilería.

257
00:14:17,670 --> 00:14:21,089
Y luego para reaccionar, el color que quiero, bueno,

258
00:14:21,089 --> 00:14:23,509
No estoy muy seguro, usemos azul.

259
00:14:25,209 --> 00:14:27,190
Entonces podría, por supuesto,

260
00:14:27,190 --> 00:14:29,380
También haga algún valor hexadecimal aquí mismo.

261
00:14:31,290 --> 00:14:32,970
Así que lo dejaré ahí por ahora.

262
00:14:35,719 --> 00:14:40,659
Entonces HTML, CSS, usemos naranja y rojo para este.

263
00:14:43,499 --> 00:14:45,370
Luego aquí, amarillo.

264
00:14:48,970 --> 00:14:52,429
Y mientras que Svelte también es un poco naranja.

265
00:14:52,429 --> 00:14:54,920
Entonces, hagamos eso.

266
00:14:54,920 --> 00:14:56,990
Bien, entonces pasamos un color.

267
00:14:56,990 --> 00:14:59,680
Ahora es el momento de usarlo aquí.

268
00:14:59,680 --> 00:15:02,360
Entonces, lo que queremos hacer es editar aquí.

269
00:15:02,360 --> 00:15:03,880
como color de fondo.

270
00:15:05,050 --> 00:15:09,270
Básicamente, queremos agregar un estilo individual a cada

271
00:15:09,270 --> 00:15:11,250
de estos componentes de habilidades.

272
00:15:11,250 --> 00:15:13,920
¿Y recuerdas cómo podemos hacer eso?

273
00:15:13,920 --> 00:15:17,219
Bueno, podemos usar la propiedad de estilo,

274
00:15:17,219 --> 00:15:21,780
o en realidad el accesorio de estilo, como ahora sabemos, se llama.

275
00:15:21,780 --> 00:15:24,820
Así que cada uno de estos se llama utilería, incluso aquí.

276
00:15:24,820 --> 00:15:27,840
Así como incluso este nombre de clase en JSX

277
00:15:27,840 --> 00:15:31,750
y también este estilo se llama utilería.

278
00:15:31,750 --> 00:15:35,879
Entonces ingresamos al modo JavaScript y luego creamos un objeto.

279
00:15:35,879 --> 00:15:40,870
con la propiedad del color de fondo

280
00:15:40,870 --> 00:15:43,860
y luego aquí todo lo que hacemos es usar

281
00:15:43,860 --> 00:15:45,470
ese accesorio que pasamos.

282
00:15:46,630 --> 00:15:48,463
Así que eso es props.color.

283
00:15:51,059 --> 00:15:54,869
Dale una salva, y hermoso.

284
00:15:54,869 --> 00:15:57,330
Entonces eso funcionó.

285
00:15:57,330 --> 00:15:59,310
Entonces tal vez también tengas esto.

286
00:15:59,310 --> 00:16:02,510
Y si lo hiciste, entonces muchas felicidades.

287
00:16:02,510 --> 00:16:04,580
Este año fue la parte más complicada,

288
00:16:04,580 --> 00:16:07,259
pero mi principal preocupación aquí era en realidad

289
00:16:07,259 --> 00:16:09,590
para que puedas escribir estos componentes aquí

290
00:16:09,590 --> 00:16:13,430
por tu cuenta y haz que todos devuelvan algo de JSX

291
00:16:13,430 --> 00:16:15,130
y luego por supuesto aplicar

292
00:16:15,130 --> 00:16:17,990
Tus nuevos conocimientos sobre accesorios.

293
00:16:17,990 --> 00:16:20,760
Entonces, teniendo estos dos componentes aquí

294
00:16:20,760 --> 00:16:23,469
básicamente comunicarse entre sí.

295
00:16:23,469 --> 00:16:26,440
Así que es realmente importante que entiendas

296
00:16:26,440 --> 00:16:27,600
que está sucediendo aquí.

297
00:16:28,619 --> 00:16:30,900
Simplemente haz esto un poco más bonito aquí.

298
00:16:33,620 --> 00:16:35,090
Hagamos realmente este naranja.

299
00:16:35,090 --> 00:16:37,710
y este otro rojo anaranjado.

300
00:16:37,710 --> 00:16:41,030
Y aunque estos colores no son perfectos,

301
00:16:41,030 --> 00:16:44,559
son al menos un poco mejores que antes.

302
00:16:44,559 --> 00:16:48,059
Muy bien, espero que este desafío te haya resultado útil.

303
00:16:48,059 --> 00:16:50,270
y espero que te haya ayudado mucho

304
00:16:50,270 --> 00:16:54,720
para entender este concepto de accesorios aquí aún mejor.

305
00:16:54,720 --> 00:16:57,920
Y nuevamente, si por alguna razón no pudiste hacer todo

306
00:16:57,920 --> 00:17:01,780
de esto por tu cuenta, entonces, por favor, no te preocupes.

307
00:17:01,780 --> 00:17:04,040
Hay mucho tiempo para aprenderlo todo.

308
00:17:04,040 --> 00:17:05,940
de estas cosas a lo largo del curso.

309
00:17:05,940 --> 00:17:09,140
Y estoy 100% seguro de que al final,

310
00:17:09,140 --> 00:17:12,000
o incluso después de algunas secciones,

311
00:17:12,000 --> 00:17:15,750
Empezarás a ser realmente bueno en React.

312
00:17:15,750 --> 00:17:18,550
Pero ahora sigamos y sigamos aprendiendo.

313
00:17:18,550 --> 00:17:21,520
sobre algunos principios más fundamentales de React

314
00:17:21,520 --> 00:17:22,770
y técnicas.