Ahora terminemos la tarjeta de perfil de desarrollador.
en el segundo desafío de codificación de esta sección.
Todavía estamos creando esta tarjeta de perfil de desarrollador aquí.
pero ahora lo haremos
de una manera ligeramente diferente y un poco mejor.
Así que vengamos aquí solo
para poder mostrarte lo que quiero hacer ahora.
Y, en primer lugar, ahora tenemos una variedad de habilidades.
Y entonces en esta matriz tenemos un objeto para cada habilidad.
Básicamente, ahora crearemos uno.
de estas habilidades aquí para cada uno de estos objetos.
O en otras palabras,
Vamos a hacer una lista de habilidades, ¿verdad?
Entonces quiero que crees una matriz similar.
Entonces son todas tus habilidades, luego el nivel.
y también un color para cada una de estas habilidades.
Entonces esa es tu primera tarea.
Y luego simplemente recorre esta lista
y mostrar una habilidad para cada uno de ellos.
Ahora aquí el nivel puede ser una de tres opciones diferentes.
Ya sea intermedio, avanzado o principiante.
Y así, en base a este nivel.
Luego quiero que muestres uno de estos emojis.
Volviendo aquí, este es el emoji para los avanzados.
esto es para el intermedio,
y esto es para el nivel principiante.
Básicamente, configurarás este emoji de forma condicional.
aquí mismo. Y si,
Eso es básicamente todo lo que quiero que hagas para este desafío.
Así que continúa y pausa el vídeo ahora.
Y te veré aquí en un minuto.
Bien, entonces vayamos aquí a nuestra lista de habilidades.
porque ahí es donde estará la mayor diferencia.
Entonces aquí lo que hicimos fue crear uno manualmente.
componente de habilidad para cada una de estas habilidades, ¿verdad?
Pero ahora nos desharemos de todo esto.
porque ahora crearemos una lista de habilidades.
Entonces entramos en modo JavaScript.
y luego simplemente tomamos nuestras habilidades y usamos el método del mapa.
Así como hicimos con las pizzas en nuestro proyecto anterior.
Entonces, aquí en este mapa, cada elemento de la matriz es una habilidad.
Por supuesto, podría ser cualquier otro nombre de variable, pero de todos modos.
Entonces, para cada habilidad, queremos crear un componente de habilidad.
Y primero cerrémoslo para evitar el error.
y luego podemos pasar los accesorios.
Ahora, en el proyecto de la pizza,
De hecho, pasamos todo el objeto como accesorio, ¿verdad?
Pero aquí, sólo para que esto sea un poco diferente.
De hecho, pasémoslos uno por uno.
Entonces la habilidad será la habilidad punto habilidad.
Entonces hay muchas habilidades ahí mismo.
como cuatro veces seguidas.
Luego, pasemos al color.
Entonces ese es el color del punto de habilidad.
Y finalmente también tenemos el nivel.
Entonces eso está al nivel de puntos de habilidad.
como,
eso es todo.
Entonces inmediatamente ves la diferencia aquí abajo.
porque ahora tenemos seis habilidades.
Entonces todos los que están en la matriz
pero aún no tenemos los emojis
porque anteriormente estábamos pasando activamente
un accesorio emoji, pero ahora simplemente pasamos de nivel
que luego queremos convertir en un emoji.
¿bien? Ahora, antes de seguir aquí
En realidad, desestructuramos los accesorios.
como lo hicimos también en el proyecto.
Eso es habilidad, color y nivel, y otra vez.
Esto es muy útil así porque ahora
inmediatamente sabemos qué datos espera este componente.
Y por supuesto también hace que nuestro código
aquí un poco más agradable.
Así que ahora no tenemos la variable emoji aquí, por supuesto.
Y en su lugar, usemos el nivel por ahora.
Ahora, pero nuevamente, necesitamos convertir eso.
Entonces, ¿cómo vamos a hacer eso?
¿Vamos a hacer renderizado condicional?
¿O simplemente vamos a establecer el texto aquí de forma condicional?
Bueno, creo que es mejor simplemente
establecer el texto de forma condicional.
Ahora, no podemos usar un operador ternario porque
No tienes sólo dos opciones, sino tres.
Por lo que puede ser avanzado, intermedio o principiante.
Y ahora vamos a utilizar el operador final.
Así que déjame mostrarte lo que quiero decir con eso.
Entonces aquí, digamos nivel.
Si es igual a principiante,
Entonces bueno, copiemos el emoji aquí.
Es como este bebé.
Entonces aquí el contenido debería ser este.
Y ahí está para este donde todavía estoy
en un nivel avanzado o incluso en un nivel principiante.
Y ahora usemos solo tres de estos.
¿bien? Y eso no es un problema en absoluto
porque estos tres van a ser mutuamente excluyentes.
Por lo que sólo se aplicará uno de ellos.
Intermedio y avanzado.
Y ahora tomemos los emojis aquí.
Este para avanzado
y este para intermedio.
Y ahí vamos.
Entonces aquí establecemos condicionalmente algo de texto esta vez.
sin utilizar el operador ternario,
pero esta vez usando el operador final
y aprovechando la propiedad
de cortocircuito que tiene este operador.
Entonces, por ejemplo, en este primero aquí
nivel es igual a principiante es falso.
Y entonces aquí falso será el resultado de esto.
que no se renderiza.
Entonces lo mismo aqui
y luego el nivel es igual a avanzado es realmente cierto.
Y entonces el resultado de esta operación será éste.
Y al final, este es el contenido que vemos aquí.
¿ahora a la derecha?
Ahora podrías haberlo hecho también de diferentes maneras.
No habría habido ningún problema en absoluto.
Lo que importa es que de alguna manera lograste que funcionara.
No importa cómo lo hiciste.
Todos pueden tener diferentes soluciones aquí.
Eso es completamente normal.
Bien, y ahora eso es realmente un resumen.
Así terminamos esta sección, y así una vez más
felicidades por llegar al final
de esta sección de primeros fundamentos de React.
ya aprendiste mucho
y así podrás estar orgulloso de ti mismo.
A continuación, vamos a aprender sobre el concepto de estado.
y de manejar los eventos para que finalmente podamos
cree algunas aplicaciones que sean verdaderamente interactivas.
Entonces eso va a ser increíble.
ya que construiremos nuestro primer proyecto realmente útil.
Entonces, un proyecto que no solo mostrará algunos datos en la interfaz de usuario.
pero con el que también podemos interactuar.
Así que, nuevamente, será muy divertido.
Y así no pierdas el tiempo.
Y si te queda algo de tiempo
entonces pasemos inmediatamente allí.