1
00:00:01,080 --> 00:00:05,370
Ahora terminemos la tarjeta de perfil de desarrollador.

2
00:00:05,370 --> 00:00:08,913
en el segundo desafío de codificación de esta sección.

3
00:00:10,470 --> 00:00:14,520
Todavía estamos creando esta tarjeta de perfil de desarrollador aquí.

4
00:00:14,520 --> 00:00:15,660
pero ahora lo haremos

5
00:00:15,660 --> 00:00:19,173
de una manera ligeramente diferente y un poco mejor.

6
00:00:20,220 --> 00:00:22,020
Así que vengamos aquí solo

7
00:00:22,020 --> 00:00:24,900
para poder mostrarte lo que quiero hacer ahora.

8
00:00:24,900 --> 00:00:29,900
Y, en primer lugar, ahora tenemos una variedad de habilidades.

9
00:00:30,120 --> 00:00:35,070
Y entonces en esta matriz tenemos un objeto para cada habilidad.

10
00:00:35,070 --> 00:00:37,260
Básicamente, ahora crearemos uno.

11
00:00:37,260 --> 00:00:41,130
de estas habilidades aquí para cada uno de estos objetos.

12
00:00:41,130 --> 00:00:42,180
O en otras palabras,

13
00:00:42,180 --> 00:00:46,620
Vamos a hacer una lista de habilidades, ¿verdad?

14
00:00:46,620 --> 00:00:49,530
Entonces quiero que crees una matriz similar.

15
00:00:49,530 --> 00:00:52,650
Entonces son todas tus habilidades, luego el nivel.

16
00:00:52,650 --> 00:00:56,133
y también un color para cada una de estas habilidades.

17
00:00:56,970 --> 00:00:59,340
Entonces esa es tu primera tarea.

18
00:00:59,340 --> 00:01:01,890
Y luego simplemente recorre esta lista

19
00:01:01,890 --> 00:01:04,413
y mostrar una habilidad para cada uno de ellos.

20
00:01:05,250 --> 00:01:09,090
Ahora aquí el nivel puede ser una de tres opciones diferentes.

21
00:01:09,090 --> 00:01:13,320
Ya sea intermedio, avanzado o principiante.

22
00:01:13,320 --> 00:01:14,880
Y así, en base a este nivel.

23
00:01:14,880 --> 00:01:18,780
Luego quiero que muestres uno de estos emojis.

24
00:01:18,780 --> 00:01:22,860
Volviendo aquí, este es el emoji para los avanzados.

25
00:01:22,860 --> 00:01:24,390
esto es para el intermedio,

26
00:01:24,390 --> 00:01:27,243
y esto es para el nivel principiante.

27
00:01:29,550 --> 00:01:33,300
Básicamente, configurarás este emoji de forma condicional.

28
00:01:33,300 --> 00:01:35,340
aquí mismo. Y si,

29
00:01:35,340 --> 00:01:38,730
Eso es básicamente todo lo que quiero que hagas para este desafío.

30
00:01:38,730 --> 00:01:40,980
Así que continúa y pausa el vídeo ahora.

31
00:01:40,980 --> 00:01:43,803
Y te veré aquí en un minuto.

32
00:01:45,810 --> 00:01:50,810
Bien, entonces vayamos aquí a nuestra lista de habilidades.

33
00:01:52,140 --> 00:01:55,773
porque ahí es donde estará la mayor diferencia.

34
00:01:56,670 --> 00:02:00,630
Entonces aquí lo que hicimos fue crear uno manualmente.

35
00:02:00,630 --> 00:02:04,980
componente de habilidad para cada una de estas habilidades, ¿verdad?

36
00:02:04,980 --> 00:02:08,760
Pero ahora nos desharemos de todo esto.

37
00:02:08,760 --> 00:02:12,630
porque ahora crearemos una lista de habilidades.

38
00:02:12,630 --> 00:02:14,550
Entonces entramos en modo JavaScript.

39
00:02:14,550 --> 00:02:19,550
y luego simplemente tomamos nuestras habilidades y usamos el método del mapa.

40
00:02:20,040 --> 00:02:25,040
Así como hicimos con las pizzas en nuestro proyecto anterior.

41
00:02:25,080 --> 00:02:30,080
Entonces, aquí en este mapa, cada elemento de la matriz es una habilidad.

42
00:02:31,200 --> 00:02:36,200
Por supuesto, podría ser cualquier otro nombre de variable, pero de todos modos.

43
00:02:36,240 --> 00:02:41,240
Entonces, para cada habilidad, queremos crear un componente de habilidad.

44
00:02:41,880 --> 00:02:44,580
Y primero cerrémoslo para evitar el error.

45
00:02:44,580 --> 00:02:47,070
y luego podemos pasar los accesorios.

46
00:02:47,070 --> 00:02:49,020
Ahora, en el proyecto de la pizza,

47
00:02:49,020 --> 00:02:53,550
De hecho, pasamos todo el objeto como accesorio, ¿verdad?

48
00:02:53,550 --> 00:02:56,520
Pero aquí, sólo para que esto sea un poco diferente.

49
00:02:56,520 --> 00:02:59,133
De hecho, pasémoslos uno por uno.

50
00:03:01,770 --> 00:03:06,623
Entonces la habilidad será la habilidad punto habilidad.

51
00:03:08,910 --> 00:03:11,460
Entonces hay muchas habilidades ahí mismo.

52
00:03:11,460 --> 00:03:13,263
como cuatro veces seguidas.

53
00:03:14,790 --> 00:03:18,963
Luego, pasemos al color.

54
00:03:20,849 --> 00:03:22,980
Entonces ese es el color del punto de habilidad.

55
00:03:22,980 --> 00:03:26,103
Y finalmente también tenemos el nivel.

56
00:03:27,570 --> 00:03:32,130
Entonces eso está al nivel de puntos de habilidad.

57
00:03:32,130 --> 00:03:32,973
como,

58
00:03:35,040 --> 00:03:35,873
eso es todo.

59
00:03:38,310 --> 00:03:41,910
Entonces inmediatamente ves la diferencia aquí abajo.

60
00:03:41,910 --> 00:03:44,370
porque ahora tenemos seis habilidades.

61
00:03:44,370 --> 00:03:46,270
Entonces todos los que están en la matriz

62
00:03:48,060 --> 00:03:50,700
pero aún no tenemos los emojis

63
00:03:50,700 --> 00:03:53,670
porque anteriormente estábamos pasando activamente

64
00:03:53,670 --> 00:03:57,270
un accesorio emoji, pero ahora simplemente pasamos de nivel

65
00:03:57,270 --> 00:04:01,050
que luego queremos convertir en un emoji.

66
00:04:01,050 --> 00:04:03,480
¿bien? Ahora, antes de seguir aquí

67
00:04:03,480 --> 00:04:06,540
En realidad, desestructuramos los accesorios.

68
00:04:06,540 --> 00:04:09,270
como lo hicimos también en el proyecto.

69
00:04:09,270 --> 00:04:14,270
Eso es habilidad, color y nivel, y otra vez.

70
00:04:14,970 --> 00:04:17,820
Esto es muy útil así porque ahora

71
00:04:17,820 --> 00:04:22,473
inmediatamente sabemos qué datos espera este componente.

72
00:04:24,240 --> 00:04:26,920
Y por supuesto también hace que nuestro código

73
00:04:27,870 --> 00:04:29,703
aquí un poco más agradable.

74
00:04:30,840 --> 00:04:35,160
Así que ahora no tenemos la variable emoji aquí, por supuesto.

75
00:04:35,160 --> 00:04:37,743
Y en su lugar, usemos el nivel por ahora.

76
00:04:39,330 --> 00:04:43,020
Ahora, pero nuevamente, necesitamos convertir eso.

77
00:04:43,020 --> 00:04:45,210
Entonces, ¿cómo vamos a hacer eso?

78
00:04:45,210 --> 00:04:47,430
¿Vamos a hacer renderizado condicional?

79
00:04:47,430 --> 00:04:51,780
¿O simplemente vamos a establecer el texto aquí de forma condicional?

80
00:04:51,780 --> 00:04:54,540
Bueno, creo que es mejor simplemente

81
00:04:54,540 --> 00:04:56,613
establecer el texto de forma condicional.

82
00:04:57,600 --> 00:05:00,750
Ahora, no podemos usar un operador ternario porque

83
00:05:00,750 --> 00:05:04,470
No tienes sólo dos opciones, sino tres.

84
00:05:04,470 --> 00:05:08,190
Por lo que puede ser avanzado, intermedio o principiante.

85
00:05:08,190 --> 00:05:12,960
Y ahora vamos a utilizar el operador final.

86
00:05:12,960 --> 00:05:15,543
Así que déjame mostrarte lo que quiero decir con eso.

87
00:05:20,730 --> 00:05:22,743
Entonces aquí, digamos nivel.

88
00:05:23,880 --> 00:05:27,813
Si es igual a principiante,

89
00:05:30,420 --> 00:05:34,260
Entonces bueno, copiemos el emoji aquí.

90
00:05:34,260 --> 00:05:35,763
Es como este bebé.

91
00:05:37,470 --> 00:05:41,973
Entonces aquí el contenido debería ser este.

92
00:05:43,920 --> 00:05:47,460
Y ahí está para este donde todavía estoy

93
00:05:47,460 --> 00:05:51,930
en un nivel avanzado o incluso en un nivel principiante.

94
00:05:51,930 --> 00:05:54,550
Y ahora usemos solo tres de estos.

95
00:05:57,600 --> 00:05:59,760
¿bien? Y eso no es un problema en absoluto

96
00:05:59,760 --> 00:06:03,150
porque estos tres van a ser mutuamente excluyentes.

97
00:06:03,150 --> 00:06:05,553
Por lo que sólo se aplicará uno de ellos.

98
00:06:08,400 --> 00:06:12,480
Intermedio y avanzado.

99
00:06:12,480 --> 00:06:14,763
Y ahora tomemos los emojis aquí.

100
00:06:17,760 --> 00:06:19,480
Este para avanzado

101
00:06:23,033 --> 00:06:25,567
y este para intermedio.

102
00:06:29,250 --> 00:06:31,110
Y ahí vamos.

103
00:06:31,110 --> 00:06:34,710
Entonces aquí establecemos condicionalmente algo de texto esta vez.

104
00:06:34,710 --> 00:06:36,570
sin utilizar el operador ternario,

105
00:06:36,570 --> 00:06:38,400
pero esta vez usando el operador final

106
00:06:38,400 --> 00:06:40,170
y aprovechando la propiedad

107
00:06:40,170 --> 00:06:43,410
de cortocircuito que tiene este operador.

108
00:06:43,410 --> 00:06:46,380
Entonces, por ejemplo, en este primero aquí

109
00:06:46,380 --> 00:06:48,450
nivel es igual a principiante es falso.

110
00:06:48,450 --> 00:06:51,810
Y entonces aquí falso será el resultado de esto.

111
00:06:51,810 --> 00:06:53,880
que no se renderiza.

112
00:06:53,880 --> 00:06:55,500
Entonces lo mismo aqui

113
00:06:55,500 --> 00:06:58,980
y luego el nivel es igual a avanzado es realmente cierto.

114
00:06:58,980 --> 00:07:01,977
Y entonces el resultado de esta operación será éste.

115
00:07:01,977 --> 00:07:06,090
Y al final, este es el contenido que vemos aquí.

116
00:07:06,090 --> 00:07:07,020
¿ahora a la derecha?

117
00:07:07,020 --> 00:07:09,360
Ahora podrías haberlo hecho también de diferentes maneras.

118
00:07:09,360 --> 00:07:11,430
No habría habido ningún problema en absoluto.

119
00:07:11,430 --> 00:07:14,820
Lo que importa es que de alguna manera lograste que funcionara.

120
00:07:14,820 --> 00:07:16,980
No importa cómo lo hiciste.

121
00:07:16,980 --> 00:07:19,320
Todos pueden tener diferentes soluciones aquí.

122
00:07:19,320 --> 00:07:21,720
Eso es completamente normal.

123
00:07:21,720 --> 00:07:25,530
Bien, y ahora eso es realmente un resumen.

124
00:07:25,530 --> 00:07:29,280
Así terminamos esta sección, y así una vez más

125
00:07:29,280 --> 00:07:32,460
felicidades por llegar al final

126
00:07:32,460 --> 00:07:36,300
de esta sección de primeros fundamentos de React.

127
00:07:36,300 --> 00:07:38,250
ya aprendiste mucho

128
00:07:38,250 --> 00:07:41,100
y así podrás estar orgulloso de ti mismo.

129
00:07:41,100 --> 00:07:44,820
A continuación, vamos a aprender sobre el concepto de estado.

130
00:07:44,820 --> 00:07:47,970
y de manejar los eventos para que finalmente podamos

131
00:07:47,970 --> 00:07:51,000
cree algunas aplicaciones que sean verdaderamente interactivas.

132
00:07:51,000 --> 00:07:52,890
Entonces eso va a ser increíble.

133
00:07:52,890 --> 00:07:56,850
ya que construiremos nuestro primer proyecto realmente útil.

134
00:07:56,850 --> 00:08:00,540
Entonces, un proyecto que no solo mostrará algunos datos en la interfaz de usuario.

135
00:08:00,540 --> 00:08:03,240
pero con el que también podemos interactuar.

136
00:08:03,240 --> 00:08:05,760
Así que, nuevamente, será muy divertido.

137
00:08:05,760 --> 00:08:08,220
Y así no pierdas el tiempo.

138
00:08:08,220 --> 00:08:10,590
Y si te queda algo de tiempo

139
00:08:10,590 --> 00:08:12,483
entonces pasemos inmediatamente allí.