Bienvenido al primer desafío de codificación
de este curso,
donde estarás ahora por primera vez
tiempo practica todas las habilidades
que ya has aprendido en este curso por tu cuenta.
Entonces, el objetivo de este desafío es
para crear una tarjeta de perfil de desarrollador como esta.
Entonces tenemos como una imagen de avatar aquí,
luego el nombre del desarrollador, una breve biografía,
y finalmente una lista de habilidades.
Ahora, para construir este proyecto, tienes dos opciones.
Primero, simplemente puedes crear una nueva aplicación Create React
en su propia computadora y luego construir el proyecto allí
tal como lo hemos estado haciendo en esta sección.
O segundo, puedes usar la aplicación CodeSandbox
que utilizamos para la primera aplicación que creamos
en el curso.
Este es básicamente un editor en línea,
lo que hace que sea muy fácil probarlo rápidamente
algunos nuevos proyectos pequeños.
Y esto es lo que realmente voy a usar.
para construir este desafío.
Ahora, en caso de que quieras hacer lo mismo,
Te aconsejo que crees una nueva cuenta aquí,
Y esto es lo que realmente voy a usar.
para construir este desafío.
Ahora, en caso de que quieras hacer lo mismo,
Te aconsejo que crees una nueva cuenta aquí.
Y luego, una vez que hayas terminado,
simplemente puedes crear una nueva aplicación React aquí.
Entonces, simplemente haga clic aquí para crear y luego reaccionar.
Y de nuevo, tal vez cuando estés viendo esto,
CodeSandbox se ve completamente diferente,
pero solo encuentra un botón en alguna parte
para crear una nueva aplicación React.
O alternativamente, como también les mostré antes,
simplemente puedes reaccionar.nuevo.
Y esto también creará una nueva aplicación React.
Y de hecho, usa,
Debajo del capó también crea una aplicación de reacción.
Es un poco diferente aquí en términos de la estructura del archivo,
pero sí también nos permite
para crear muy rápidamente una pequeña aplicación React.
Ahora, antes de que empieces a codificar, tengo algunas piezas
de consejos para ti
porque esto probablemente parezca un poco desalentador.
Entonces, construyendo todo esto aquí desde cero.
como principiante puede ser un poco difícil.
Entonces, déjame darte algunos consejos.
Entonces, aquí ya tengo básicamente el componente de la aplicación.
Entonces, miremos juntos la estructura aquí.
Entonces, en esta aplicación, devolvemos un div con el nombre de la clase.
del Card.
Y por cierto, puedes conseguir todos estos estilos aquí mismo.
de este archivo, que está disponible en esta URL,
Entonces, en este inicio de este desafío,
que por supuesto adjuntaré
A la conferencia en Udemy como siempre.
Así que asegúrese de revisar ese enlace,
y desde allí, puedes obtener este CSS.
Pero de todos modos, volviendo aquí,
lo que quiero que hagas es crear este div,
que es todo el carrito.
Básicamente, el contenedor para todo esto.
con este borde negro.
Y luego ahí tenemos un componente de avatar,
que será para la imagen.
Y luego tenemos este div para los datos.
Y en los datos, tenemos la introducción,
que es para este encabezado aquí y para esta biografía.
Y luego tenemos aquí una lista de habilidades.
Entonces, un componente llamado lista de habilidades.
Y en la lista de habilidades, deberías tener un componente de habilidad.
para cada habilidad de desarrollo web que tengas.
Y para personalizar cada una de estas habilidades,
usarás accesorios,
Así como aprendimos anteriormente.
Entonces, volviendo aquí, por ejemplo,
Creé una habilidad para cada una de estas seis habilidades de desarrollo web.
eso tengo.
Y así, a cada uno de ellos, le pasé la habilidad misma,
luego el emoji aquí, y luego también el color de fondo.
Y este color de fondo probablemente sea
La parte más desafiante aquí.
Así que tal vez no te preocupes demasiado por esa parte.
A mí lo que me importa aquí es que pases el emoji.
y el nombre de la habilidad en sí.
Y básicamente con eso,
ya puedes personalizar
el componente de habilidad bastante bien.
Ahora, en cuanto a la imagen, puedes subirla.
Entonces tu imagen de avatar o cualquier otra imagen.
que desea aquí mismo en la zona de pruebas de código.
Entonces puedes abrir esta carpeta pública y luego arrastrar
y suelte una imagen directamente en esto.
Entonces esto cargará la imagen directamente en la zona de pruebas.
y luego puedes hacer referencia a esa imagen como
hemos estado haciendo en nuestra aplicación a lo largo de esta sección.
Bien, y creo que estas instrucciones deberían ayudarte a empezar.
Y en caso de que necesites un poco más,
entonces puedes empezar a ver mi solución.
Por supuesto, eso no supone ningún problema.
Realmente no hay problema si no eres capaz de hacer todo.
de esto por su cuenta en su primer intento.
Entonces, si necesitas ver mi solución, está 100% bien.
Ahora asegúrese de leer también aquí a través de este estilos.css,
porque esto te dará las pistas
para qué nombres de clase debe utilizar.
Por ejemplo, para la imagen de avatar,
esta es la clase que necesitas, aquí para ver la lista de habilidades,
etcétera.
Así que adelante, pausa el vídeo ahora.
y luego haz todo lo que puedas.
Y una vez que hayas terminado con eso,
Te veré aquí con mi solución.
y probablemente debería dejar este aquí arriba
en la pantalla,
para que puedas ver lo que realmente necesitas construir.
Buena suerte con eso y nos vemos en un minuto.
Bien, ¿cómo te fue?
Bueno, intentemos abordar esto juntos.
Entonces estoy creando aquí una nueva aplicación React,
entonces el que creé antes con react.new.
Y luego eliminemos este archivo aquí.
ya que una vez más lo haremos todo dentro de index.js.
Bien, entonces creemos el componente de la aplicación aquí mismo.
y de hecho, sólo para hacerlo un poco más rápido,
Ya copiaré el código que ya tenía antes.
De esta manera, estamos acelerando un poco el video.
Entonces así.
Y, por supuesto, también conseguiré estos estilos iniciales.
bueno.
Y ahora simplemente creemos estos componentes adicionales.
Así funciona avatar,
luego la introducción,
y finalmente también la lista de habilidades,
y la habilidad misma.
De nuevo, vamos a tener un componente de habilidad.
para cada una de nuestras habilidades de desarrollo web.
Y ahora comencemos con el más fácil.
Entonces, el avatar es básicamente solo una imagen con una fuente.
Dejemos este vacío por ahora.
Y agreguemos la etiqueta alt con mi nombre.
bueno.
Y ahora tomemos la imagen, arrástrela y suéltela aquí.
Entonces lo tengo en mi carpeta de descargas.
Entonces esto cargará rápidamente el archivo,
y luego puedo escribir aquí en la fuente, Jonas.jpac.
Entonces, si guardo esto ahora, veamos si sucede algo.
Bueno, tenemos algunos errores aquí.
Entonces, recarguemos este navegador interno.
Eso debería solucionarlo.
y ahí vamos.
Entonces esto es demasiado grande y eso es simplemente
porque olvidé el nombre de clase apropiado aquí.
Entonces, ese es solo el nombre de clase Avatar.
Sí, hermosa.
Así que esa ya es nuestra primera parte.
Cerremos.
Sí, así de sencillo.
A continuación tenemos la introducción,
que es solo una diferencia aquí,
y luego un título principal.
Y luego aquí con un párrafo para la biografía.
Y aquí lo tomaré desde aquí.
Y, por supuesto, con suerte irás.
para escribir el tuyo propio.
Guárdalo.
Entonces esa es la siguiente parte.
Y ahora viene la parte más difícil,
cual es la lista de habilidades.
Entonces, antes de abordar la lista de habilidades,
De hecho, desarrollemos la habilidad en sí.
Así que regresa.
Es un div con el nombre de clase de habilidad.
Y con suerte, conseguiste este simplemente.
mirando el archivo CSS.
Cerrémoslo.
Y por ahora, escribamos algo aquí.
Y también sólo algunos emoji.
Está bien, y luego
vamos a crear aquí también un div,
y si voy demasiado rápido para ti es simplemente
porque no quiero que este video dure una eternidad.
Bien, y también explicaré las partes importantes.
por supuesto, después de escribir el código.
Pero de todos modos, vemos que ya incluimos
nuestra primera habilidad aquí.
Sin embargo, si ahora copio y pego esto,
Entonces tenemos el mismo problema que teníamos antes.
con nuestras pizzas, que es que todas son iguales.
Y ahora necesitamos volver a buscar accesorios para
para personalizar estas habilidades.
Entonces, en el componente de habilidades,
pasemos un accesorio llamado habilidad,
y lo llamaré Reaccionar.
Y luego pasemos también un emoji.
Entonces éste, por ejemplo.
bueno.
Y ahora aquí, como antes,
recibimos el objeto de accesorios.
Entonces como argumento o como parámetro.
a esta función del componente de habilidades.
Y aquí ahora podemos usar exactamente eso.
Entonces, tal vez creemos un tramo.
Entonces, un elemento para la habilidad en sí.
y luego uno para el emoji.
Así que aquí todo lo que tenemos que hacer es escribir accesorios.
Así que los accesorios nuevamente son ese objeto.
que reacciona pasará automáticamente al componente
cuando definimos algunos accesorios en él.
Y ahora tenemos props prop.skill y prop. emojis
porque estos son los dos accesorios que pasamos
aquí mismo.
De nuevo, piense en un accesorio como un canal de comunicación.
entre este componente de la lista de habilidades, que está llamando,
Entonces, ¿cuál es la inclusión de este componente de habilidad?
y el componente hijo, por lo que el componente en sí.
Entonces estos dos ahora básicamente pueden comunicarse.
pasando algunos datos.
Pero de todos modos, usemos ahora este accesorio, entonces props.skill.
y luego usemos otro lapso aquí
para accesorios.emoji,
y luego veamos qué pasa.
Entonces tenemos la habilidad, pero aquí, por supuesto,
eso no puede funcionar.
Y ahí vamos.
hermoso.
Entonces, sigamos adelante.
Entonces, digamos habilidad HTML más CSS
y el emoji digamos que es el mismo.
También hay algunas habilidades sólidas ahí mismo.
Y ahora sí que tenemos
dos componentes diferentes aquí.
Entonces, dos componentes de habilidades con datos diferentes.
Y ahora agreguemos otra habilidad.
¿Qué tenemos aquí?
Entonces tenemos digamos Svelte,
luego con este emoji de bebé, porque, bueno,
No soy muy bueno en Svelte.
Lo probé una vez durante unas horas.
Entonces, puedo decir que soy bueno con Svelte.
Muy bien, aquí realmente necesitamos agregar el nombre de la clase.
de la lista de habilidades, creo.
Sí, esto los coloca muy bien uno al lado del otro.
Y en realidad agreguemos uno más,
solo para que pasen a la siguiente línea.
Digamos JavaScript aquí.
Muy bien, ya casi hemos terminado aquí.
Así que lo único que falta
y que ya te dije no es realmente obligatorio
Porque es bastante confuso el color de fondo aquí.
Entonces, ¿cómo hacemos el color de fondo?
Bueno, primero que nada, pasaré una cadena con el nombre.
del color.
Así que llamemos a ese color de utilería.
Y luego para reaccionar, el color que quiero, bueno,
No estoy muy seguro, usemos azul.
Entonces podría, por supuesto,
También haga algún valor hexadecimal aquí mismo.
Así que lo dejaré ahí por ahora.
Entonces HTML, CSS, usemos naranja y rojo para este.
Luego aquí, amarillo.
Y mientras que Svelte también es un poco naranja.
Entonces, hagamos eso.
Bien, entonces pasamos un color.
Ahora es el momento de usarlo aquí.
Entonces, lo que queremos hacer es editar aquí.
como color de fondo.
Básicamente, queremos agregar un estilo individual a cada
de estos componentes de habilidades.
¿Y recuerdas cómo podemos hacer eso?
Bueno, podemos usar la propiedad de estilo,
o en realidad el accesorio de estilo, como ahora sabemos, se llama.
Así que cada uno de estos se llama utilería, incluso aquí.
Así como incluso este nombre de clase en JSX
y también este estilo se llama utilería.
Entonces ingresamos al modo JavaScript y luego creamos un objeto.
con la propiedad del color de fondo
y luego aquí todo lo que hacemos es usar
ese accesorio que pasamos.
Así que eso es props.color.
Dale una salva, y hermoso.
Entonces eso funcionó.
Entonces tal vez también tengas esto.
Y si lo hiciste, entonces muchas felicidades.
Este año fue la parte más complicada,
pero mi principal preocupación aquí era en realidad
para que puedas escribir estos componentes aquí
por tu cuenta y haz que todos devuelvan algo de JSX
y luego por supuesto aplicar
Tus nuevos conocimientos sobre accesorios.
Entonces, teniendo estos dos componentes aquí
básicamente comunicarse entre sí.
Así que es realmente importante que entiendas
que está sucediendo aquí.
Simplemente haz esto un poco más bonito aquí.
Hagamos realmente este naranja.
y este otro rojo anaranjado.
Y aunque estos colores no son perfectos,
son al menos un poco mejores que antes.
Muy bien, espero que este desafío te haya resultado útil.
y espero que te haya ayudado mucho
para entender este concepto de accesorios aquí aún mejor.
Y nuevamente, si por alguna razón no pudiste hacer todo
de esto por tu cuenta, entonces, por favor, no te preocupes.
Hay mucho tiempo para aprenderlo todo.
de estas cosas a lo largo del curso.
Y estoy 100% seguro de que al final,
o incluso después de algunas secciones,
Empezarás a ser realmente bueno en React.
Pero ahora sigamos y sigamos aprendiendo.
sobre algunos principios más fundamentales de React
y técnicas.