El sitio web definitivo de portafolios responsivos en React Js

1. Introducción: Hola, Bienvenido y muchas gracias por su interés en mi curso. En este curso, te enseñaré a construir un sitio web de portafolio responsive utilizando diferentes tecnologías como React, js son USGS, Bootstrap, load JS, express JS y minima. Y al finalizar este curso, podrás desplegar el sitio web en el servidor, lo que implica que tu sitio web de cartera será accesible en Internet. Suena bien, ¿verdad? Hermosa. Primero dos imágenes. 2. Demo del proyecto: En la pantalla se encuentra una súbitamente la aplicación que vamos a Butte en este curso. Y quiero empezar por develar uno de los impotentes futuro de esta aplicación que no se puede despreciar. Y este futuro es la funcionalidad de correo. Entonces cuando golpee al alto ejército abortando, se va a suavizar tornillo para volver a contactarme componente donde tu potencial cliente podrá comunicarse contigo y contratarte. Entonces vamos a intentarlo haciendo clic en el alto ejército abortando. ¿ Ves la forma en que es desplazamiento suave, me encanta. Entonces aquí mismo, vamos a proceder haciendo click en descender comprado para comprobar si la firma está bien validada. Echa un vistazo a la esquina superior derecha de la pantalla. Verás el mensaje de brindis y dice, por favor siéntete o los campos con los campos de nombre para correo electrónico. Por lo que antes de dar clic en el botón Enviar, tengo que mostrarte mi bandeja de entrada para mayor claridad. Aquí está? seguro que no hay nuevo mensaje en mi bandeja de entrada. puedes ver en la página web? Vamos a intentarlo haciendo clic en el mismo embarque. Echa un vistazo. Puedes verlo dice, gracias por contactar a una hélice. Déjame llevarte a la bandeja de entrada. Y aquí está. Haga clic para abrir. Aquí está el nombre del remitente. Envíanos un correo electrónico, y aquí está la frase del mensaje. Este es uno de los futuros más importantes página web del portafolio. No te preocupes, te enseñaré a implementar esta funcionalidad desde cero. Ella a la página web. Su derecho, Así que ahora vamos a dar click en la llamada a acción comprada en a Smooth Scroll to the home components. Echemos un vistazo a la región de la puerta comprada en la ruleta. Haga clic en el tablero Obtener erosión en. Se va a descargar mi currículum. Y voy a dar click para abrir. Entonces aquí está mi currículum. Ya ves, aquí mismo tenemos los iconos de las redes sociales. Y al hacer clic en alguno de los iconos, te va a llevar a la página correspondiente. Y justo debajo de los iconos, tenemos el nombre y el hermoso efecto tipo con diferentes emojis. Y ahora mi Hoover y la foto de perfil, se va a alejar para mejorar la visibilidad. Ahora me muevo y luego me lo quito. Espero que otra vez, me lo quito. Pasemos rápidamente al componente Acerca de mí. Y luego cuando haga clic en el Acerca de mí, se va a suavizar el desplazamiento al otro componente. Aquí está el About Mí, un componente donde llamarías a tus potenciales reclamos todo sobre ti mismo. Y a continuación se presentan los componentes del curriculum vitae. Este componente es muy importante simplemente porque es aquí donde compartirás tu experiencia con tus clientes potenciales. Tienes que mostrar tu historial laboral, tu habilidad de programación, proyectos, e interés. Por lo que en el árbol de lista de espera, hay que mostrar cuánto tiempo llevas en la industria y la empresa en la que estás trabajando actualmente. Por la habilidad de programación. Tienes que mostrar tus habilidades en función de tu habilidad. Y todo aquí está muy bien personalizado. Pero proyectos, esto incluye los diversos proyectos tú de qué tono vas a mostrar, la fecha de inicio y la fecha de fin. Entonces aquí, sitio web de cartera personal, ni por un sitio web de tienda de comercio electrónico. Y por aquí, tenemos el interés, lo que implica tu afición. Y aquí abajo tenemos el componente testimonial. Y tendremos el testimonial desplazándose desde el borde derecho de la pantalla a la izquierda fuera de la pantalla. Y esto es lo que tu cliente dice de ti. Por último, tenemos el componente contactarme, y aquí es donde tus potenciales clientes podrán ponerse en contacto contigo enviándote correos electrónicos. Esta funcionalidad es realmente fantástica. Está bien, así que déjame mostrarte la Fed en animación. Y cuando te desplace por el sitio web ahora mismo, y cuando me desplace hacia abajo, te darás cuenta de que los componentes alimentarán a DUC, ¿verdad? Entonces déjame recargar. Echa un vistazo. Otra vez. Cuando me desplace hacia abajo, el componente original se desvanecerá. ¿ Ves el componente testimonial? Y el componente? De acuerdo, Así que saquemos más capacidad de respuesta. Vamos a sacarlo en el iPhone cinco. Por 678. Con estos, les puedo asegurar que el sitio web es 100% responsive en nuestras plataformas. Entonces si quieres echar un vistazo a esta página web de portafolio, al final, aquí está la dirección. Se puede escribir rápidamente en un Motor SET, it Ababa dot herokuapp.com. Y entonces este elegante sitio web de portafolio se mostraría en su pantalla. Y ahora, ¿quién soy yo? Mi nombre es más fácil y tengo más de siete años de experiencia en desarrollo de software, no he trabajado en diferentes empresas como desarrollador full stack. Entonces tengo la experiencia que se necesita para pasearlo por este curso. En este curso, seré su instructor. No te preocupes, te sostendré de la mano a Butte este clásico sitio web de portafolio desde cero hasta la etapa final de despliegue. Y al final, se podría desplegar el sitio web en un salvavidas y además empujar el código fuente a GitHub. Habiendo dicho todo esto, inscríbase rápidamente y empecemos. Nos vemos entonces. 3. Haz preguntas: Hacer pregunta es tan importante simplemente porque te permite ln en la dirección correcta. Por lo que siempre que te encuentres en problemas, siempre haz bien en hacer preguntas antes proceder con la siguiente conferencia. No obstante, entiendo claramente que usted será Busey Lenin este curso. Pero aprecio profundamente si pudieras pasar unos minutos libres de tu tiempo para leer una hoja, una revisión de arnés sobre este curso. Y de esa manera obtengo un feedback de ti y ojalá McManus cause Beta su derecho. Entonces, sin más preámbulos, empecemos. 4. Crear aplicación React: Entonces ahora vamos a empezar a construir la aplicación. Y en las primeras conferencias, me di cuenta de que la mayoría de ustedes probablemente conocen estas pestañas. Simplemente porque estoy bloqueado con la mirada básica de Create React app configurada. Entonces, por favor, ten cuidado conmigo porque solo quiero explicar las estufas en beneficio de las personas que son nuevas en React js. Y la razón es que quiero llevarme a todos solos. Tan rápidamente tenía en React js.org. Y aquí está la dirección. Procede a la documentación. Aquí está. Sólo tienes que hacer click en perros? De acuerdo, así que aquí en Crear un Nuevo reacciona hacia arriba. Aquí está en la esquina superior derecha de la pantalla? Haga clic. Entonces lo primero que vamos a hacer aquí mismo es generar básicamente un regenerador de una aplicación React, que comprende las bibliotecas, los archivos iniciales y carpetas para ejecutar una sencilla aplicación de rebote React. En la pantalla se encuentra la documentación de React. Y por supuesto, pasar por eso en esta conferencia no es relevante para el propósito de este curso, ¿verdad? Entonces si eres un novato, te recomiendo encarecidamente que leas la documentación para tener un conocimiento reclamo de lo que se trata un React js. Desplácese rápidamente hacia abajo a menos que continuum. Por aquí, el comando MAX que se usaría para simplemente ejecutar la aplicación Create, React sin tener que instalarla en nuestra cola CCE. Muy bien, Así que empecemos. Vuelve a tu escritorio. Y por aquí, vamos a crear un directorio raíz llamado portfolio Pro. Haga clic aquí en comida nueva. Portafolio pro. Frase técnica. Al nombrar su proyecto, utilice siempre un nombre descriptivo que indique el propósito del proyecto. Por lo que podrás reconocerlo en el futuro. De acuerdo, Entonces lo siguiente en línea es abrir este directorio con el editor de código y el editor de código perfecto que voy a usar en este curso, arrendamiento. Entonces código VS. Siéntase libre de utilizar cualquier editor de código de su elección. Pero para mí sin embargo, VS Code es mi favorito. Y cuando mires la esquina superior izquierda de la pantalla, verás ese directorio de una cartera capilar Pro. Pero para algunos de ustedes, puede que no lo vean por ahí. Entonces todo lo que tienes que hacer es arrastrar y soltar el directorio de portafolio hacia abajo en el Código VS. Por lo que solo tienes que arrastrar y luego soltar. Entonces, cuando hagas eso, definitivamente lo verás por aquí. Ahora. Maximiza el Código VS y luego cierra esto. Abre la terminal integrada VS Code. Y en Mac, lo puedes encontrar aquí en el menú superior. Y luego nuevo seminario. Justo en la terminal. Vamos a escribir el comando para instalar React js. Y voy a hacer MDX, crear dash, reaccionar dash. No instalaremos la aplicación React en un paquete separado. Y voy a nombrar al cliente del paquete. Puedes decidir cambiar el nombre del paquete al final. Pero te recomiendo encarecidamente que te pegues al cliente de convención simplemente porque React js tiene que ver con el front-end, lo que implica la parte de la interfaz de usuario de la aplicación. Está bien, así que destilación reactiva está en curso. Y estos definitivamente, sólo tengo que adelantar rápidamente a la conferencia. Reaccionar js instalado exitosamente. Para proceder, tenemos que seguir esta instrucción. De acuerdo, entonces primero tenemos que cd al directorio de clientes donde instalamos el React js y luego presionar la tecla Enter en tu nido de teclado. Tenemos que poner en marcha el front-end, dev server. Entonces vamos a hacer MPM, empezar. Pulsa la tecla Enter de tu teclado para que se dispare. En la pantalla se encuentra la página de Londres. Y de forma predeterminada, el servidor se está ejecutando en el puerto localhost 3000. Aquí está. Ok. Y ahora terminamos con la instalación. En la próxima conferencia, comenzaremos a dar a conocer el calderazo de React. Esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 5. Placa Boiller: En esta conferencia, vamos a dar a conocer el calderazo de React. Por lo que rápidamente abre el directorio de clientes. Procedamos con el archivo package.json. Aquí es donde se sentarán todas las dependencias que atañen al front end. Y por aquí tenemos React 17.2 se almacena y nido es, van a reaccionar no aunque React DOM se utiliza para trabajar con el módulo de objeto de documento en las cejas arriba. Y aquí tenemos los guiones React y los vetos web. Abajo. Aquí está los guiones están bien. Y aquí está el inicio que ejecutamos que en la conferencia anterior para poner en marcha el servidor. Aquí abajo está el BWT. Entonces cuando hagamos npm ejecutar BWT, se va a acumular los activos estáticos para el despliegue. Muy bien, entonces en el futuro, cuando queramos desplegar esta aplicación en el servidor, haremos uso del abuso. Y por aquí tenemos la prueba y Egipto. En realidad, el expulsión es necesario cuando expulsará de la aplicación Crear, Reaccionar y personalizar su parte web. Rápidamente se procedió al index.html, luego se dirigía a público y lo neblina. Desplácese hacia abajo. Entonces antes de proceder, tenemos que entender de qué reacciona se trata GS. React JS es una biblioteca JavaScript que se utiliza para computar una aplicación de una sola página. Y aquí tenemos un div con el id de root. Rápidamente, déjame mostrarte lo que pasa con la comida de papi. Procede a la fuente, que es la SRC. Abre el index.js. Y en la parte superior tenemos React importado del módulo React. Y así el módulo React DOM de React DOM. Y el React DOM tiene un método llamado render. Y este método aleatorio toma en el componente principal. Aquí está. Y el componente Min up se importa en la parte superior. Esto es justo aquí. Está bien. Ahora abre la app js. Yo sólo voy a establecerlo. Comando T o Control T en Windows. Por lo que tenemos que establecer para AP dot js. ¿ Ves ahora tenemos algo de GSS por aquí. Por lo que la diferencia entre el CSS y HTML es el atributo nombre de la clase. En HTML, es una clase, pero aquí mismo en GSS, es nombre de clase porque la clase es una palabra clave reservada. Antes te dije que reacciona se usa para computar una aplicación de una sola página. La pregunta es, ¿cómo funciona? Déjame mostrarte rápidamente. Ahora, todo aquí en el ArcGIS se está pasando al punto de índice js. Déjame mostrarte. Se puede ver aquí es el app.js. Cuando el app.js se renderice por aquí, va a pasar al index.html a través esta línea de código, document.getElementById de raíz. Por lo que tenemos que abrir el índice de punto HTML. Ahora, este es el div con el id de root. Cuando se pasa al index.html, entonces se va a renderizar aquí entre este div con el id de root. Entonces en resumen, como de frente a la RGS, lo que sea que rendericemos en el RGS, está bien. pasaría al index.js vendido cuando se renderice el objeto, si lo escucho, va a pasar por esta línea de código y luego pasar todo el contenido en el app.js hasta el index.html, ¿verdad? En este div con la ruta id. Entonces el index.html es lo que se muestra en la web. Tan rápido, limpiemos el código. Resalta, límpialo. Y luego de las líneas 18 a 26, límpialo. Límpialo. Y el portafolio de título arriba, cagar hasta donde tenemos el contenido. Y entonces vamos a hacer. Por lo que ahora tenemos que eliminar los archivos que no necesitamos en este curso. No necesitamos estos por aquí. mantenga presionada la tecla Comando en Mac y Para seleccionar,mantenga presionada la tecla Comando en Mac y la tecla de control en Windows. Y entonces no necesitamos el logo dot SVG, el punto de prueba de configuración HGS. Haga clic derecho, Eliminar. Muy bien, entonces Garza al UP GAS. Aquí está el lejano faltante. Lo borramos en el SRC y lo importamos aquí en el UP GAS. Por lo que tenemos que borrar también la importación. Seguro. Por lo que tenemos que destacar desde la etiqueta de cabeza de apertura hasta la etiqueta de cabecera de cierre. Límpialo. Guardar. Enfréntate a hacer plaza a menos que lo revisen. Su derecho. Por lo que este es el resultado que estamos esperando de esta conferencia. En la próxima conferencia, comenzaremos a montar la estructura de nuestro proyecto. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 6. Preparación de la estructura del proyecto: Vamos a montar la estructura de nuestro proyecto siguiendo las mejores prácticas. Haga clic derecho en el SRC, golpee una nueva carpeta. Y aquí vamos a crear una carpeta llamada portafolio contenedor. ¿ Verdad? En este contenedor de portafolio, vamos a crear otro directorio llamado Acerca de mí. Haga clic derecho. Nueva Carpeta. Acerca de mí directorio contendrá el sobre mí. Es archivo CSS y las imágenes correspondientes. Esa es realmente divertida historia sobre MI componente. Entonces necesitamos otro. Haga clic derecho en el contenedor de portafolio aquí en Nueva carpeta. Y esto se llamaría contactarme. Y por supuesto debes saber que el contactarme también y nosotros contenemos el componente, su archivo CSS y sus imágenes relacionadas. Vuelve a hacer clic derecho en el contenedor de cartera. Nueva carpeta. Y a esto se le llamará hogar. De acuerdo, solo tienes que seguir mi ejemplo. Currículum, portafolio , contenedor, Carpeta Nueva, FUTA. Y el nido es testimonial. Ahora ya terminamos de configurar la estructura de nuestro proyecto. Por lo que en la próxima conferencia, comenzaremos a construir sobre esta estructura. Cuídate. 7. Componente de perfil 1: Siguiendo la estructura de nuestro proyecto, vamos a empezar con el componente de casa. Y como pueden recordar que en la conferencia anterior, creamos todos estos directorios justo en el contenedor de portafolio. Aquí está en el borde izquierdo de la pantalla, justo en el Explorador. Hermosa. Ahora el primero que vamos a hacer es crear el componente profundo. Haga clic derecho en el directorio de inicio aquí en nuevo archivo. Y esto se llamaría perfil dot js. Frase técnica, cuando el componente mnemónico siempre utiliza la convención de nomenclatura pascal, lo que implica que usted capitaliza la primera letra de cada palabra. Eso suena bien, Hermoso. Ahora tenemos que crearlo correspondiente archivo CSS. Haga clic derecho nuevamente en el directorio de inicio. Aquí en Nuevo Archivo. CSS de punto profundo. Ella en el perfil GAS y lo odia. Aquí vamos a utilizar los atajos para generar el componente funcional React js. Tendré c, y aquí está. Pulse la tecla Enter para seleccionar. Para algunos de ustedes, puede que no tengan esto funcionando. Todo lo que tienes que hacer es instalar un plugin muy potente llamado el fragmento React Native React readers. Déjame mostrarte cómo instalar este fragmento tenía en el Explorador. Y si escucho, tienes que hacer click en las extensiones, entonces ves justo aquí en la parte inferior izquierda, click en las extensiones. Muy bien, dentro de la caja de set, vamos a buscar React, Native y neblina ya. Lo tengo instalado en mi máquina. Entonces esa es la razón por la que estás viendo la desinstalación comprada. ¿ Cuándo ves? Pero al final, si no lo tienes instalado, vas a ver la instalación en bote. Todo lo que tienes que hacer es hacer clic en el botón Instalar y tenerlo instalado en tu Código VS. Y por algunas razones, si no te funcionó por primera vez, todo lo que tienes que hacer es reiniciar VS Code. Ahora a menos que lo cierres. Por aquí, vamos a darle a este div un nombre de clase de contenedor de tablero profundo . Y bien, en este div, necesitamos otro div con el nombre de clase del padre de perfil. Div. Dar el perfil tema de la clase dash parent. Por tristemente. Otro, div con el nombre de la clase, detalles del guión del perfil. Y por último, necesitamos otro div con el nombre de clase de mazos. Perfecto. Está bien, así que escondamos al explorador o vengan a estar en tus ventanas. Ahora, lo que vamos a implementar son los iconos de las redes sociales. Pongamos al proyecto demo. Esta es la dirección de un Hey, se portafolio dot herokuapp.com. Y esto es lo que queremos implementar al principio, el Facebook, instagram, YouTube, y Twitter. Código de Toronto VS a menos que lo hagas rápidamente. Entonces justo en el div con el nombre de la clase , claro, vamos a tener la etiqueta a. Ahora. Vamos a tener la etiqueta I. Vamos a darle un nombre de clase de f, a f dash, facebook dash, square, lambda menos que line es duplicar este código cuatro veces. Por lo que sólo voy a destacar del cordón 9 al 11. Mantén presionadas las teclas Mayús y Alt y, a continuación pulsa la tecla de flecha hacia abajo del teclado cuatro veces. Puedes ver esto es exactamente lo que hacemos para duplicar código en VS Code. Y por aquí, vamos a cambiar el nombre de la clase a FA. Google dash, dash al cuadrado. Y ahora necesitamos el ícono de Instagram. F8 dash es el suelo. Y necesitábamos para el YouTube. Y por último para Twitter. Guardar. Ahora ejecutemos la aplicación para ver lo que tenemos a bordo tenía en la terminal. Y luego tenemos que cd cliente, MPM. Inicio. Esperémoslo. ¿ Verdad? Entonces si tus iconos no están apareciendo, ¿ sabes por qué ella en código VS? Y déjame mostrarte por aquí. Hemos utilizado las clases de Bootstrap, que es la FA, dash, Facebook, Google Plus Instagram, y el resto de ellas. Entonces para que utilicemos estas clases, tenemos que vincular el proyecto con Bootstrap. Abre el directorio de materiales. Para mí. El directorio de materiales se encuentra justo en mi escritorio. ¿ Y por qué lo es? Entonces sólo tengo que abrir. Este directorio está justo ahí en el recurso. Así que echa un vistazo y descarga este directorio. Contiene todos los archivos necesarios que vamos a utilizar en este curso. Ahora abrió el podría ayudarla. Pelo, ¿verdad? Y este es el enlace Bootstrap. Copia heroína a VS Code comando P para que aparezca este pequeño cuadro de búsqueda en la parte superior. Y luego vamos a establecer para el índice punto HTML. Y aquí está. Hermosa. Pega aquí. De acuerdo, entonces tenemos que formatear el código para lucir un poco reclamo. Haga clic derecho. Formatear documento con previa. De acuerdo, ahora el código se ve muy limpio. A mí me gusta. Y si no tienes pedia en tu VSCode, intrínsecamente Explorer otra vez, y déjame mostrarte cómo instalarlo. Explorer y luego dar click en S. Tensión está aquí mismo en este sandbox. Tienes que configurar para preordenar y neblarlo. Ya lo tengo instalado. Entonces haz clic en el botón Instalar al final para tenerlo instalado en tu VSCode. Ciérralo. Ahora tenemos que renderizar este componente en el js P y luego establecer para nuestro app.js aquí mismo en este div. De acuerdo, Antes de hacer eso, sólo tenemos que importar perfil de importación, ¿verdad? No he importado automáticamente que preocuparte, lo voy a hacer desde cero. Entonces sólo tengo que limpiar esto. Importar perfil de barra de puntos perfil de contenedor barra barra barra de inicio perfil de barra. Y aquí sólo tenemos que renderizar el perfil del componente con la etiqueta de autocierre. Guárdala en el navegador y vamos a comprobarlo. Echa un vistazo. justo aquí en el centro de la pantalla. Vamos a intentarlo haciendo clic en el icono es Facebook, instagram, YouTube y Twitter. Los enlaces no están funcionando. Ya sabes por qué Garza al código VS y déjame mostrarte. Proceder al perfil. Y por aquí, justo en el alto potasio o amigos. Tenemos que copiar y pegar el enlace de redes sociales correspondiente por ahí. Entonces para el Facebook, puedes ver solo tengo que copiar la URL de mi foso de Facebook. Ven aquí, limpia el letrero de la libra, y luego pega. Entonces solo lo voy a hacer por el YouTube. Aquí está mi canal de YouTube. Entonces aquí está el ícono para YouTube. Por favor, asegúrate de pegar el enlace y los iconos correspondientes. ¿ De acuerdo? Entonces solo tengo que hacerlo para Instagram también. Para que puedas seguir haciendo esto al final y tener todo hecho. Ahora por Instagram. Wip de esta libra pasta guardada, pasta guardada, tenía en el navegador. Abre el portafolio, arriba, recarga. Para darle una oportunidad, Vamos a hacer clic en los iconos una vez más. Facebook. ¿Puedes ver? Entonces solo tienes que volver a subir. Probémoslo en YouTube. Y Tierra, frase correcta, todo está funcionando como se esperaba. Por lo que en la siguiente conferencia, procederemos con los detalles del resto sobre el componente de perfil, incluyendo el reactor típico. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 8. Componente de perfil 2: En esta conferencia, vamos a implementar ese efecto tipo. Se puede ver. Y también implementaremos la breve descripción, los cuerpos y la foto de perfil. Código Toronto VS. A menos que implementen eso rápidamente. Antes de proceder, tenemos que hacer algo. Arruinarse. Y déjame mostrarte aquí mismo este div con un nombre de clase de detalles profundos. ¿ Puedes ver? Ahora quiero que resalten huevos comunes o Control X para cortarlo. Y luego ven aquí, péguelo aquí mismo. Por lo que aquí es exactamente donde debe cerrarse. Guárdala en el navegador. En realidad todo parece igual. Pero si no hiciste esta corrección, y cuando empecemos a estilizarla, te va a afectar mal. Entonces justo después del div de cierre de ClassName, perfil, nombre de base de datos, vamos a tener otro div, darle un nombre de clase de perfil, detalles, dash, rol. Y ahora vamos a tener que implementar el efecto tipo. Tenemos que instalar el tipo React de meta tenía encendido a la terminal y luego venir a ver para detener el servidor en ejecución actual. Ahora voy a hacer npm install. Reacciona dash. La instalación está en curso, por lo que tenemos que esperarla. Instalado con éxito Guerra. Desplácese hasta la parte superior a menos que importe el pepinillo. Desplácese hacia abajo. Ahora tenemos que implementarlo, ¿no? Oye, prefiero usar la etiqueta de autocierre. Entonces por aquí lo vamos a tener bucle infinito. Los pasos, configurarlo en objeto vacío. Y luego vamos a tener una matriz de elementos, que son los detalles a mostrar en función del tiempo. Y aquí vamos a tener un Dave plástico completo, separado con una coma. Queremos que sea 1 segundo. Por lo que cada segundo vamos a tener un display. Por lo que este tipo se exhibiría por un segundo. Y luego, está bien, resalta, mantén pulsado el Shift y Alt y luego toca la tecla de flecha abajo cuatro veces. De acuerdo, entonces aquí vamos a tener desarrollador de pila completa horror dedesarrollador de pila completa, ¿ verdad? Entonces lo que pasa aquí es esto, este tipo va a exhibir por un segundo, y luego este tipo va a exhibir es de silicio. Por lo que es más como todo esto en la sesga va a esperar cada corriente celular. Entonces, cuando Guy exhibe un circuito se va a apagar y este tipo exhibe un segundo, se apaga. Y al igual que papá, jaja, derecha, solver línea Nestor es implementar los emojis. Entonces hacer eso o marcar es muy sencillo. Entonces por favor, si te apoyas en Windows, solo tienes que aguantar. Entonces si tu taza, sigue mi pista. Ahora, coloca el ratón aquí abajo y luego ve al menú superior derecho. Aquí en Editar, emoji y símbolos. Aquí sólo voy a elegir a este tipo. ¿ Se puede ver muy sencillo de implementar? Y aquí también, solo tengo que elegir omega dot. Echa un vistazo. Está bien. Entonces ahora ya terminamos con ello. Entonces si estás trabajando en Windows, solo tienes que hacer es copiar y pegar mi código. Y vas a tener esto mostrado en la web. No, dirígete a la terminal. Tenemos que iniciar la aplicación una vez más. Inicio Mpm. Hermoso, me encanta. Se puede ver echar un vistazo. Harold, a código VS a menos que proceda. Justo después de esta etiqueta de span de cierre. Vamos a tener mucha etiqueta span. Dar el nombre de la clase de perfil, dash, dash, tagline. Enfréntate al proyecto demo. Entonces sólo tenemos que copiar esta breve descripción de un Hey, copia. Pega justo entre la etiqueta. Guardar. Echa un vistazo en el navegador. Se puede ver, hey, es ahora el nido y la línea es para implementar el barco es. Entonces hagámoslo rápidamente. Justo después de este cierre div. Vamos a tener opciones de perfil div. Y aquí vamos a tener un boughten darle el nombre de clase botnet. Y justo entre la etiqueta, contrátame , Ahorra. Y aquí está el fondo, correcto. Por lo que tenemos que implementar el get currículum comprado en. Envolvamos todo en una, una etiqueta, la hipótesis o una frase. Muy bien, entonces para implementar estos, tenemos que importar su currículum. Haber ido al directorio de materiales. Lo tengo aquí mismo en mi escritorio, ábrelo, y luego abrir el portafolio pro cliente público. Por lo que por aquí tenemos que copiar este currículum. Haga clic derecho. Copia. Ven aquí, pega Garza al Código VS, limpia el letrero de libra, el nombre del currículum dot PDF porque es un archivo PDF. Entonces aquí voy a hacer descarga. Aquí mismo vamos a tener un canotaje darle a este botón un nombre de clase de dash destacado btn. Y aquí, consigue currículum, ahorra. A menos que se saquen. Aquí está el get resume canotaje. Vamos a intentarlo. Haga clic. ¿ Puedes ver eso? Ahora descarga mi currículum, obedeciendo y lo tiene. ¿ Se puede ver tan hermosa? Esto es todo por ahora, para esta conferencia, nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 9. Imagen y correcciones de perfil de perfil y perfil: De acuerdo, entonces ahora vamos a implementar la imagen de perfil. Y después de eso, haremos las correcciones necesarias. Desplácese hacia abajo. Justo después de este div. Vamos a tener otro div con el nombre de clase de guión profundo. Cuadro. Otra. Dash profundo, cuadro, guión, fondo. Seguro. Arruinarse a menos que hagan las correcciones necesarias. Justo después de este div con el nombre de clase de Coase. Vamos a tener otro def, dar el nombre de la clase. Icono de Dash. Hermosa. Déjame mostrarte algo. Por lo que aquí lo más destacado de los carriles 14 al 28 son las a tags. Mantén presionada la tecla Alt y luego toca la tecla de flecha arriba del teclado. ¿Ves eso? Esta es exactamente cómo mover código en el código VS. Entonces si quiero sacar este código de este div con el nombre de clase del icono de pausa. Todo lo que tengo que hacer es presionar el Alt y luego tocar la tecla de flecha abajo del teclado. ¿ Ves eso? Está bien, así que vamos a moverlo. El más simple que seguro. Se puede ver ahora, tenemos el código justo en el div con el nombre de clase de Coase, dash icon ANOVA. Alternativa para hacer esto es copiar y pegar todas las etiquetas a, derecha, en un div con el nombre de clase de causa dash icon. Entonces, por ejemplar, esto es a menudo después de esta conferencia, y en la próxima conferencia, comenzaremos a estilizar este componente. Nos vemos en la próxima conferencia. Quédate por costos y cuídate. 10. Styling el perfil: Empecemos a estilizar el perfil componente elástico. Y recordemos que en la conferencia anterior, lo dejamos así. Me di cuenta de que no se ve hermoso, pero aunque tampoco se ve AGI. Entonces, no te preocupes, en las próximas conferencias, vamos a hacer que se vea perfectamente bien. Heroína a código VS a menos que proceda. Entonces lo primero que vamos a hacer aquí mismo es hacer que las importaciones necesarias abran rápidamente al explorador. Haga clic derecho en SRC, toque en nueva carpeta. Llamémoslo activos. Y bien, en este activo, vamos a crear una nueva carpeta. Inicio. Proceder al directorio de materiales, Orban, y así abrir los activos de portafolio pro cliente SRC. Entonces solo tengo que arrastrar estos hacia un lado y luego copiar el paquete de fuentes. Entonces esta es la fuente que vamos a utilizar en este curso. Ven aquí, pegarlo justo en los activos. Y por aquí, tenemos que copiar con imágenes innecesarias que sean relevantes para el componente de perfil. El BDI, la forma, y la foto de perfil. Seleccionar. Copia. Abre el hogar, pega, cierra la sonda de cartera. Al acercar se abrió el código, hasta dónde necesitamos copiar el archivo CSS. Echa un vistazo. ¿Se puede ver Copiar heroína al código VS? Procede al índice dot css, destaca, exfoliante, y luego péguelo aquí mismo. ¿ Verdad? Guárdala en el navegador y vamos a comprobarlo. Hermosa. A mí me gusta. ¿ Puedes ver? Ahora tenemos el barco se ve hermoso. Aquí está la importina, que es el Barton primario y los VCs. Destacaron abortar. Celebrado en al código VS. Déjame mostrarte. Desplácese hacia abajo. Desplácese hacia abajo. Aquí está el BTN primario, que es el AMI alto comprado en. Entonces todo lo que hicimos fue especificar el fondo, tamaño de la fuente, el borde, y el color de la fuente. Y por aquí, lo hicimos en Hoover. Entonces cuando se cierne sobre él, este va a ser el fondo de la frontera y todas las demás propiedades siguen siendo las mismas. Déjame mostrarte. ¿Ves eso? Cuando paso el ratón sobre él, el fondo del borde cambia. De acuerdo, así lo mismo para la destacada PTEN. Tener logre es lo mismo. Y aquí está el estilo de un heno. Entonces procede al poder. Desplácese hacia abajo. Y aquí están los colores que preparé para las partituras. Destacar, copiar, heroína a VS Código. Y luego tenemos que proceder a nuestra app dot CSS. También resalte el comando scrub V para pegar. Perfecto. Ahora terminamos con la configuración. Pasemos al perfil punto CSS. Cierra esto, cierra esto hacia abajo, oculta el Explorador, y luego procede al perfil de punto CSS. Por lo que aquí comenzaremos con el contenedor de perfil. Actualmente el JS preferido. Y déjame mostrarte y ¿por qué es? Por lo que vamos a ponerlo en un contenedor flex. Para ello, sólo tenemos que mostrar flex. Toma notas. Y cuando un contenedor está configurado para mostrar flex, expande los elementos para filmar el espacio disponible o encogerlos para evitar el desbordamiento. Aquí está la ilustración en la pantalla. Echa un vistazo. ¿ Puedes ver eso? ¿ Hermosa? Alineemos artículos. Para enviar nuestro mejor alineamiento. Centro. Justificar contenidos. Centro, la altura, 10 por ciento. La altura media, el contenido de ajuste y la URL de la imagen de fondo. Tenemos que avanzar algunos pasos hacia el patrimonio, hacia el hogar. Y aquí tenemos que escoger el bg dot JPEG, que guardará como fondo del perfil. Pero en el futuro, vamos a sacar esto de este lugar. Entonces esto es sólo con propósito docente. Para que puedas tener algo mostrado en la pantalla y ser feliz. Guardar. Ahora vamos a vincular los componentes con el archivo CSS. Procede al perfil. Y aquí sólo tenemos que importar perfil dot CSS Guardar. Aferrado al navegador. Y hey, ¿es ahora el efecto tipo y una breve descripción ya no es visible. Arreglemos eso rápidamente. Tan solo hay que proceder al perfil CSS. Entonces tenemos que estilizar el perfil. El padre sí tiene su flex de visualización, alinear elementos, centro, y el color. Hagámoslo sentir seguro. Dirígete al navegador y hazlo nublar. El tamaño de la granja es de 24 píxeles. El font-family amapolas, semi audaz. Ahora, para el perfil hizo este papel. Entonces solo tengo que destacar, copiar. Ven aquí, pega, cierra el soporte rizado. Y todo lo que necesitamos hacer aquí mismo es limpiar el nombre. Y vamos a tener papel, el colon de dirección flex. Entonces esta es la dirección en la que las líneas de gusto como tocaron el margen. Entonces lo vamos a tener desde arriba, derecha, abajo izquierda, desde arriba por 10 píxeles, desde la derecha, 0, desde abajo, 24 píxeles, y hacia la izquierda 0. Entonces a continuación sólo tengo que resaltar, copiar, pegar, cerrar el soporte rizado. Y aquí tenemos que estilizar la cabeza. Y por supuesto debes saber que el efecto tipo está justo en la etapa uno. Déjame mostrarte la etiqueta oculta y hazla neblina. Entonces nos estamos refiriendo a todo esto arriba derecho, oye, dale un tamaño de fuente de 40 píxeles. Fuente, familia, moneda que guardas. Vamos a comprobarlo. ¿Ves bien, la prueba primaria. Entonces el color, ahora tenemos que hacer uso de esos colores. Por lo que importamos LAR, blanco, el texto resaltado. Entonces aquí queremos usar la cola que importamos antes. Tenemos que establecer para el AARP dot css. Y aquí queremos usar el color naranja oscuro que se mantenga sobre el CSS. Es tan simple como eso. El profundo lema de rol, que es la breve descripción. Este tipo de aquí, perfil, guión, guión. Tenglón. Dale un tamaño de teléfono de 19 píxeles. Dale un margen. Desde arriba, vamos a tener 50 píxeles de la derecha. Y 0 en el resto de los lados. Y aquí las amapolas de la familia de fuentes se encienden, cargan, ven código o escriben algo acaba de llegar a mi aviso. A la pata donde tenemos las pruebas resaltadas. Está bien. Muy bien, chicos, tenemos que deletrear esto correctamente. Miren chicos, estamos construyendo un clásico proyecto de portafolio. Por lo que hay necesidad de que seamos gramaticalmente exámenes. Entonces creo que ahora es genial. Y por aquí vamos a dar el margen. Por lo que sólo voy a seleccionar Duplicar mujeres it para el en espera. Dale el color de fondo. El fondo es blanco. Por lo que tenemos que hacer el color negro Guardar. Y antes de proceder, déjame mostrarles algo justo en el perfil GAS. Entonces, ¿ves aquí mismo este div con un nombre de clase de opciones de guión profundo. Entonces tenemos que ser gramaticalmente EXXAT. Guárdala en el navegador. Ahora Hoover en el getter es importin DOC. En realidad, vamos a utilizar la clase de imagen de perfil y la sombra de caja. Entonces queremos tener un círculo. Por eso. Vamos a ajustar el radio fronterizo al 50 por ciento. Dale una altura de 80 píxeles, dale un ancho de 80 píxeles para el margen. Entonces a menos que saque el marco. Se puede ver aquí está el marco en la esquina superior derecha de la pantalla. Parece muy bien. A mí me encanta. Ahora tenemos que sentar la imagen de perfil justo en el marco. Sólo tengo que destacar esta copia. Ven aquí mismo, pega, cierra el soporte rizado, fondo de guión y dale el pellejo del 92 por ciento. Dale un ancho del 92%. Ahora tenemos que mostrar la imagen. Entonces vamos a hacer URL, ha golpeado los activos, el hogar, luego necesitamos la foto de perfil. Seguro. Se puede ver esto no se ve bien. Heroína a código VS. El tamaño de fondo. Cubierta, caja fuerte, cabeza al navegador. ¿ Se puede ver que el perfil aparece muy bien? Entonces ahora vamos a arreglarlo en el marco. Es bastante sencillo hacer eso. Entonces todo lo que tenemos que hacer es copiar el radio fronterizo. Pega bien, golpea, Guarda y regresa. ¿ Puedes ver eso? ¿ Hermosa? Repetir. No, repite. Posición de fondo. Centro. ¿Puedes ver eso? ¿ Hermosa? Por lo que ahora implementemos el Zoom en efecto. Déjame mostrarte. Ya ves cuando paso el ratón sobre el perfil, no pasa nada. Entonces sólo tengo que copiar estos. Ven aquí, pega, cierra el soporte rizado. Y aquí vamos a tener a la UNH sobre. Tenemos la transformada y luego le damos una escala de 1.07. Y queremos que pase 1 segundo. Acompárense. Seguro. Coloca el ratón sobre la imagen de perfil. ¿ Te puedes ver? Eso es perfecto. Muy bien, entonces tenemos que estilizar los iconos de las redes sociales. El perdón, ¿quedan píxeles de relleno? 0 píxeles. Por lo que sólo tenemos que completar todo aquí. Entonces cuando se pasa el ratón sobre los iconos, dada la escala de 1.5. Y por aquí tenemos que especificar la etiqueta yo, heroína segura al navegador y echar un vistazo. Todo está funcionando como se esperaba. Esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. Manténgase enfocado. Y TK. 11. Sesiones de perfil: Procedamos con el componente de perfil. Y en esta conferencia, vamos a trabajar en la capacidad de respuesta móvil. Vamos a comprobarlo rápidamente. Ya ves en el Galaxy S5. Vamos a comprobarlo en el iPad Pro. Está bien, genial. Ipad. ¿Ves por ahora la aplicación no responde al código VS a menos que proceda. Empecemos con el iPad Pro. El cuadro de perfil. Especifiquemos el margen. Los detalles del perfil, nombre, detalles del guión del perfil. Sólo tenemos que darle un tamaño de teléfono de 20 píxeles. Ahora tenemos que reducir el tamaño de los cuerpos en el iPad Pro. Por lo tanto, dale un ancho de 120 píxeles. Acollamiento del índice Z. Dirígete al navegador, y vamos a comprobarlo. Probémoslo en el iPad Pro. Otra vez como se esperaba. Me gusta que tuviera en el código VS a menos que proceda en la pantalla con el ancho máximo de 900 píxeles. Entonces solo tengo que desplazarme hacia arriba, resaltar, copiar, coma k, pegar, cerrar el corchete rizado. Y ahora tenemos que cambiar los píxeles, que es el tamaño de la pantalla. Entonces en esto coincide con el ancho máximo de los píxeles crudos de nadie. Tenemos que estilizar la imagen de perfil. Y lo que vamos a hacer es precisar que la altura sea de 320 píxeles. El ancho, 320 píxeles, le dan un margen. Resaltar, copiar, pegar, cerrar el soporte rizado. Y en una pantalla con el ancho máximo de 100 píxeles. Entonces la foto de perfil. Especifiquemos el margen. Entonces debes saber cuál es la regla impotente, las puertas del NCSS definitivamente estas de aquí va a anular esta. Está bien. Profundo. Dodge, padre de familia. El margen inverso de la columna de dirección del flex desde los 40 píxeles superiores, 0 en los lados de detención. Vamos a tener su flex de pantalla. Justificar el contenido. Espacio entre los detalles del perfil. Detalles. Todo lo que tenemos que hacer aquí mismo es precisar el margen. El perfil detalla nombre, punto coma. Profundo. Hizo este papel. Sólo tenemos que probar una línea a Santa. Guardar. Dirígete al navegador y vamos a comprobarlo. Se ve bien en Galaxy S5, iPhone, iPhone 6, 7 y 8. Hermosa. Entonces, probémoslo. Tengo una x en iPad, Un iPad Pro omega. Y por último, ahora en una pantalla más pequeña con el ancho máximo de 375 píxeles. Nuevamente, resalta, copia. Ven aquí, pega, cierra el soporte rizado, y tenemos que especificar el tamaño de pantalla, 3, 75 píxeles. En la pantalla. Tenemos que reducir el tamaño de la imagen de perfil. Dale una altura. 75 imágenes. Dale el ancho a 75 píxeles. Margen top menos 90 zapatos grandes. Los detalles del perfil le dan un ancho de 90 por ciento. Guardar. Ahora en el navegador, poco realista fuera. Por lo que estos deben ser responsivos en todas las plataformas. ¿ Lo ves? Se puede ver esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. Manténgase enfocado. 12. Footer de perfil: Vamos a empezar a trabajar en el FUTA justo en el componente de casa. Déjame mostrarte lo que quiero decir con eso. No leo proyecto demo. ¿ Se puede ver esta curva por aquí? Vamos a implementarlo rápidamente. Procede al Código VS. Haga clic derecho en casa aquí en Nueva carpeta. Y esto se llamaría FUTA. Aquí mismo. Tenemos que crear el alimento, nuestro componente. Aquí, un nuevo archivo, foo dot dot js. Vamos a crear su archivo CSS correspondiente. Fuera aquí en nuevo archivo, foo dot dot css. Estamos en comida RGS. Generemos el componente funcional. Hermosa. Ahora, sólo tenemos que vincular los componentes con su archivo CSS. Entonces no tenemos que hacer eso cuando empecemos a estilizarla, verdad. Por lo que con vinculado, se conoce el archivo CSS con la comida IgA. Vamos a dar esta clase de TV Nombre del contenedor FUTA. Si el nombre de la clase comida R dash, recipiente. Y justo en este div, vamos a tener otro div con el nombre de clase del padre FUTA. Tenemos que requerir la imagen IMG, SRC, abrir y cerrar corchete rizado. Entonces sí voy a requerir. Tienes que espaciarlo en el corchete abierto y cerrado. Vamos a avanzar unos pasos para golpear los activos. Home slash nave, dash BG dot PNG con la etiqueta de autocierre. ¿ Verdad? Hermosa. Ahora vamos a darle un raro. Por lo que esto se mostraría si hay algún problema con la imagen. Déjame mostrarte la imagen rápidamente. Ella sobre activos, casa. Y luego aquí están las imágenes. Recuerda, importamos esta imagen es aileron en la conferencia anterior. Y aquí está la nave dash BG dot PNG. Por lo que esta es la imagen que se utilizará como el FUTA. Muy bien, ciérrelo. Y además, creo que hemos terminado con esto. También tenemos que cerrarlo. Ahora ella a la FUTA CSS. Por aquí, comenzaremos con el contenedor de comida o salpicadero. Dar la altura de 17.8%. Frase, quiero que sigas mi ejemplo, correcto, para que todos podamos lograr el mismo resultado. Dale un ancho del 100%. Desbordamiento. Oculto. Pantalla, flex. Justificar contenido al centro, comida y guión, padre. Y siempre asegúrate de que los nombres de tus clases se escriban correctamente para que no te metas en problemas. El ancho 100%, le dan una altura del 100%. Y el ancho máximo 1920 píxeles. Ahora para cada imagen, FUTA dash, parent, y por supuesto debes saber que la imagen, que es la etiqueta IMG, se encuentra justo en la comida de aquí arriba. Y déjame mostrarte rápidamente. Este div con el nombre de clase del periodo FUTA. Y luego aquí está la etiqueta IMG. Dale un ancho máximo, 100%, y dale una altura de 130 píxeles. Queremos apuntar a la forma en que aparece en el iPad Pro. Alineemos artículos. Flex, final, seguro. Entonces suponiendo que no, tenemos que renderizar estos derechos de componente en el gs p app.js. ¿ Y dónde está? Ahora tenemos que importar alimentos de portafolio contenedor slash, slash slash home FUTA es tan simple como eso. Por lo que sólo tenemos que ejecutar el FUTA con la etiqueta de cierre suave, cabeza a la terminal. Y luego tenemos que cd cliente MPM inicio. Esperémoslo. Y como puedes ver, muestra el arte levantado de la pantalla, dice que no hay conexión a internet. Entonces con esto, debemos entender que hay algo mal con el código de la imagen toronto VS a menos que lo arregle rápidamente. Proceder a foo tag orejas y cabello. ¿Lo es? De acuerdo, entonces esta cosa que quiero mostrarte de un, Oye, ¿puedes ver? Ahora, en cualquier momento que requieras una imagen en React JS, tendrás que llegar al final de un aquí y luego dot default, asegurarla en el navegador. Y vamos a revisar una vez más. ¿ Ves que parece que la imagen no está apareciendo simplemente porque cae justo en el fondo blanco. Echa un vistazo. ¿Ves aquí es la imagen. ¿ Puedes ver? Lo muevo a la derecha y luego lo muevo a la izquierda. Lo muevo a la derecha y luego lo muevo a la izquierda. Entonces la imagen está justo aquí, pero no se puede ver simplemente porque se cae. El fondo blanco. ¿ Puedes ver que tienen razón? Entonces no te preocupes. En la próxima conferencia, lo vamos a tener arreglado. Y esto es a menudo son para esta conferencia. Nos vemos en la próxima conferencia. 13. Mostrar el pie de pie: Vamos a conseguir que los alimentos se muestran en la pantalla y que el componente de perfil se vea como se esperaba. Abre el explorador. Haga clic derecho en casa. ¿ Se puede ver esta casa de un Hey? Haga clic derecho aquí en Nuevo archivo. Inicio js. Vamos a crearlo archivo CSS correspondiente. Nuevamente, haga clic derecho en casa aquí en Nuevo Archivo, En punto CSS. Encendemos al js home y luego generemos el componente funcional React js. Y ya sé que ya debes saber hacer esto. Tan rápido. Vamos a dar a este nombre de clase defecto. Y lo vamos a llamar home dash container. Y aquí mismo, vamos a renderizar todos los componentes que conforman la página principal. Entonces vamos a importarlo más. Hey, vamos a importar perfil De perfil. Y aquí tenemos que importar el FUTA de FUTA slash foo tag js. Por ahora, sólo tenemos dos componentes. Y en el futuro, vamos a tener más componentes en la página principal. Tan rápido, vamos a tener una tendencia por aquí. En primer lugar, tenemos que renderizar el perfil con la etiqueta de autocierre. Y el nido es FUTA. Y así la etiqueta de autocierre. Esa nota, por ejemplo, no intercambia los componentes. Déjame mostrarte lo que quiero decir con eso. Destacados. Si mueves la comida en la parte superior, vas a obtener un resultado diferente. ¿ De acuerdo? Por lo que tienes que renderizar tu componente de acuerdo a lo que ves en la pantalla, lo que simplemente implica que debes seguir mi ejemplo. Entonces tengo que moverlo hacia abajo. Puedes ver Bien. Guardar. Ahora aferrado a la CSS casera. Entonces aquí mismo tenemos que estilizar este contenedor, que es el contenedor casero. Justificar contenido. espacio entre la altura es 50 vh y la altura media, de 670 píxeles. Y el nido y la línea es proceder al perfil CSS. Aquí está? Desplácese hasta la parte superior. Muy bien, En el contenedor de perfil, les dije en la conferencia anterior que éstos estarán fuera de este lugar. Así que resalta y luego Comando X para cortar. Ahora ella a la casa CSS listada por aquí. Guardar. Procede a lo anterior G S. Y aquí mismo tenemos que limpiar el perfil y los alimentos son componentes porque ya se renderiza en el componente casero. Entonces todo lo que tenemos que hacer aquí mismo es rentar que el componente de casa derecho, en la app g, s. Entonces esto no sirve de nada por aquí. No lo necesitamos. Ahora solo tenemos que importar a casa desde portafolio container slash home slash home JS y venir aquí y luego rentar ITA seguro. Habiendo hecho esto, tenemos que vincular el JS home con el archivo CSS. Rápidamente tenía en homogénea y luego importar home dot css. Y por favor tome nota de que estos son correctos. El convenio de nomenclatura de un componente es la convención de nomenclatura Pascal. Entonces no sé cómo surgió esto. Límpialo, y luego la F debe estar en algarrobo. Guárdala en el navegador y vamos a comprobarlo. ¿ Puedes ver eso? De acuerdo, Entonces este es el resultado que obtuvimos, pero esto no es agradable a los ojos. Tenemos que hacer algo aquí en VS Code. De acuerdo, procedan al CSS domiciliario. No creo que necesitemos esta altura por aquí. Resalta y luego límpialo. Guárdala en el navegador una vez más. Echa un vistazo. Hermosa. A mí me gusta. ¿ Puedes ver eso? ¿ También? Esto es a menudo ahora para esta conferencia. Nos vemos en la próxima conferencia. 14. Mantener la estructura del proyecto y limpiar el código: Ahora tenemos que limpiar el código o mantener la estructura de nuestro proyecto. Código VS horizontal a menos que proceda. Abre el Explorador. Yo quiero mostrarles algo por aquí. Justo en el directorio de inicio. Tenemos el perfil CSS y luego el perfil JS. Y estos dos expedientes, están fuera de lugar. De acuerdo, entonces tenemos que crear un paquete separado para eso. Ahora haga clic derecho en el directorio de inicio aquí en Nueva carpeta. Y a esto se le llamará perfil. Entonces, movámoslos al Paquete de Perfil. Haga clic en arrastrar y luego suéltala por ahí en el perfil. Y aquí está la caja de diálogo. Dice, ¿estás seguro de que quieres mover el CSS profunda al perfil? Para estar de acuerdo con eso, tienes que golpear Deshacer, Mover embarque, y así recoger el perfil GAS, arrastrarlo y soltarlo justo en el paquete de perfil. Y por supuesto muévete. Entonces hay algunos problemas por aquí en la terminal, simplemente porque ahora nos falta una Importación. En primer lugar. Tenemos que dirigirnos a la casa GAS. Aquí está el perfil. Ahora voy a hacer slash profile J S, Guardar. Y aquí en la terminal dice países de ustedes ven esto. Tenemos que volver al perfil CSS, sin fijar, las importaciones faltantes. Desplácese hacia abajo. Entonces por aquí tenemos que movernos. Otro paso adelante. Guardar. Y hueso. Problema resuelto. Si escribes aplicación así, se vuelve muy fácil de leer y entender. De acuerdo, Entonces te estoy enseñando exactamente cómo computar aplicación como un profesional. Actualmente navegador a menos que vea si todo funciona bien. Todo está funcionando como se esperaba. A mí me encanta. Está bien. Cuídate. 15. Renderizado componente: En esta conferencia, te enseñaré a renderizar componentes de una manera más perfecta y organizada para que se vuelva muy fácil obtener el nombre de la pantalla y el ID de pantalla cuando empecemos a implementar el desplazamiento suave . Eso implica que vamos a tener todas las pantallas mapeadas en un componente y luego tener sólo ese componente renderizado en la app. Suena complicado, ¿verdad? Está bien. Déjame mostrarte actualmente ab.js. Al proceder con las conferencias, vamos a tener de cuatro a cinco componentes diferentes. Y esos componentes se renderizarán en el app.js, como la forma en que se ve el hogar de un heno. Correcto. Entonces vamos a tener el testimonio, la razón el contacto, y el resto de ellos. Ahora, lo que vamos a hacer es mapear todas las pantallas en un solo componente y luego tener sólo ese componente renderizado en el app.js. De acuerdo, así que no necesitamos codificarlo así. Entonces creo a medida que procedemos, Joel, entenderlo lo suficientemente bien. Haga clic derecho en SRC. Aquí, una nueva carpeta. Y esta carpeta se llamaría utilidades. Están justo en las utilidades. Vamos a crear un módulo sobre utilidades aquí en Nuevo Archivo. Y vamos a crear un módulo llamado common t's dot js. Entonces bien, en este módulo, vamos a importar desde portafolio container slash home slash home slash. Ahora tenemos que conseguir el número total de pantallas como podcasts. Y lo vamos a llamar el subrayado total. Pantallas. Ponlo en una matriz, ¿verdad? En esta matriz, vamos a tener el objeto. Y entonces vamos a tener los pares de valor clave. Columna de nombre de subrayado de pantalla. El nombre de la pantalla es home y el componente es home. Entonces en el futuro, vamos a tener todo el componente almacenado por aquí. Está bien, así que déjame mostrarte, por ejemplo, supongamos que tenemos el componente de currículum y lo voy a hacer es duplicar y entonces se va a reanudar la media. Y entonces se va a reanudar el componente. Por lo que sólo tenemos que importarlo en la parte superior justo ahí. Entonces cuando hagas eso, tendrás se almacena justo en esta matriz. ¿ De acuerdo? Es un punto más simple. Entonces sólo tengo que deshacer. Ahora, tenemos que realizar una titulación para conseguir las pantallas disponibles. Entonces aquí voy a hacer un spot const, conseguir guión bajo, índice de subrayado. Vamos a tomar en la pantalla Nim, nombre de subrayado de pantalla. Y aquí vamos a comprobar si el nombre de la pantalla no existe. Si el nombre de la pantalla no existe, tenemos que devolver menos uno, lo que significa que no hay este tipo de pantallas enseñadas en el array. Ahora tenemos que mirar a través de las matrices de pantalla y obtener las pantallas disponibles. Para let I igual a 0 y yo es menor a 22 pantallas de longitud de punto. Y entonces tenemos que incrementar yo por uno. Entonces aquí vamos a comprobar si pantallas totales de I pantalla de puntos Nim, nombre de pantalla, entonces vamos a devolver la pantalla misma. ¿De acuerdo? Aquí sólo tenemos que volver riendo. Seguro, ¿verdad? Por lo que la línea anidada es crear un componente. Haga clic derecho en el contenedor de cartera. Aquí está el portafolio Contenedor. Haga clic derecho en nuevo archivo. Ahora vamos a crear un componente llamado Portfolio container dot js. Entonces aquí voy a hacer, vamos a importar las pantallas totales. Déjame mostrarte aquí. ¿ Es subrayado pantallas de utilidades slash oT. Por lo que lo siguiente en línea es mapear a través las pantallas totales para que se muestre en pantalla. De acuerdo, así que voy a hacer es total pantallas punto, ponerlo para abrir y cerrar corchetes. Si existe el componente de punto de pantalla, entonces vamos a tener screen.com. Dale un nombre de pantalla. Abrir y cerrar la pantalla de soporte rizado, pantalla de puntos con nombre. Dar el nombre de la pantalla de puntos de la pantalla clave. También tenemos que darle una identificación. Captura de pantalla, nombre de subrayado de pantalla. ¿ Verdad? Tan cerca Europa era etiqueta de autocierre. Otra si no existe. Entonces solo tenemos que devolver un div vacío de un aquí. Dale una llave al div. Nombre del guión bajo de pantalla de puntos de pantalla, luego ciérrelo. Hermosa. Y por último, tenemos que invocar este método. Déjame mostrarte esta función por aquí. Lo vamos a llamar aquí mismo en la UI. Entonces vamos a darle a este div un nombre de clase, contenedor de cartera. Y justo aquí, tomando el soporte rizado n, nuestras pantallas, sálvala en el app.js. Nosotros limpiamos esto. Entonces tenemos que importar portafolio contenedor, ¿verdad? Lo hizo por mí automáticamente otra vez. Entonces sólo tengo que limpiarlo. En realidad, estoy haciendo esto para que todos puedan seguir adelante. Y, um, sólo tendremos que importar contenedor de cartera desde portafolio contenedor slash portafolio contenedor. Y también tenemos que limpiar el hogar. Y todo lo que necesitamos para renderizar aquí es el contenedor de cartera. Ciérralo con una etiqueta de cierre automático. Guárdala en el navegador y veamos qué tenemos a bordo. Recargar. No se muestra nada en la pantalla. ¿ Verdad? Vamos a revisarla en la consola. Y uno en funcional no válido como carta de reactor. Está bien. Código de Toronto VS. Después está ella en oT comunes. Todo está fresco sobre hey, portafolio contienen dice función, son chicos correctos. Esta es una función por lo que debe tener paréntesis de apertura y cierre. Entonces esto es lo que hace que sea una función segura. Nuevamente, en el navegador. Tienen razón, guapa. Todo está funcionando como espectador. A mí me encanta. Esto es a menudo ahora para esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 16. Introducción a RXJS. Observables: Muy bien, entonces en esta conferencia, vamos a trabajar en las animaciones y el desplazamiento suave. Pero antes de proceder con esta conferencia, es bueno saber qué es un observador, un observable y es sujeto en nuestro USGS. Y después de la especie, te daré el enlace a la página oficial del USGS para que leas más al respecto y explores. Observador. En flechas G es un observador, ¿es consumidor de valor entregado por un observable? Y observables son Lizzy push colección de múltiples valores. El tema está sujeto en nuestro USGS es un tipo especial de observable que permite que los valores sean multicasting a diferentes observadores. De acuerdo, entonces es más como un evento y conocernos. Por supuesto, usted sabe que el emisor de eventos mantiene registro de pecadores diferentes. Muy bien, así que rápidamente déjame demostrártelo para que puedas tener una imagen clara de lo que estoy hablando. Así que ahora cuando me desplace hacia abajo, te darás cuenta de que el componente de los apoyos encaja. Ahora vamos a bajar. ¿ Se puede ver que el componente original encaja? Ahora, la idea es esta, este efecto, que es el observable, se va a implementar en un solo módulo. Y entonces tendremos diferentes componentes para consumir este observable suscribiéndose a él. ¿ Se puede ver el testimonial, el contactarme? ¿ Se puede ver la forma en que encaja? Por lo que todo este efecto se crea en un solo módulo, y luego vamos a consumir este efecto suscribiéndonos a él. Por lo que la idea en sí es lo observable y los observadores son el componente consumiendo este observable. Entonces ahora podemos decir que el componente contactarme es un observador y el módulo de desvanecimiento en efecto es el observable. Suena bien, ¿verdad? Hermosa. 17. ScrollService: No he entendido el concepto de USGS en la conferencia anterior. En esta conferencia, procederemos con la implementación del código. Por lo que Garza a la terminal y vamos a instalar un USGS. Tenemos que cd cliente, luego npm instalar errores GAS. Se encuentra en curso la instalación. Entonces tenemos que esperarlo. Instalado. Éxito. Y sólo hay que ignorar estos por ahora. Haga clic derecho en utilidades aquí en Nuevo archivo. Entonces vamos a crear un archivo llamado cross service dot js. El primer desconocido que vamos a hacer aquí mismo es importar la pantalla total. Importar pantallas de subrayado total de OTA comunes. Y la línea descendente de NES es importar el tema de nuestro USGS. Y si pueden recordar en la conferencia anterior, les dije que el tema es un tipo especial de observable que permite que los valores sean estado multicast, lo que implica este especial observable que vamos a crear se consumiría en diferente empresa y al suscribirse a comer. Por lo que aquí sólo tenemos que importar tema del REXX. Spot, la cuarta clase, CV de desplazamiento. Ahora vamos a tener este objeto de servicio cruzado. Empezaron sus amigos. Manejador de desplazamiento punto y coma. Por cierto, no creo que esto sea necesario. Ahora vamos a instanciar al sujeto. Entonces tenemos que crear el objeto o referencia. Y ahora lo vamos a llamar emisora de pantalla actual. Un nuevo tema. Y lo mismo aquí vamos a hacer estático, desvanecimiento de pantalla actual, un nuevo tema. Ahora vamos a tener un constructor aquí y añadir los eventos de desplazamiento a la ventana. Punto de ventana, agregar oyente de eventos. Este punto. Aquí mismo. Vamos a implementar la función call to action boating. Y déjame mostrarte. Aquí está el llamado a la acción abortando. Al hacer clic en este botón, se va a suavizar el desplazamiento al componente de contactarme. Y el nombre de esta función va a ser escrotal. Contrátame, ponlo a nuestra función. Y aquí vamos a hacer. Dejame contactarme, pantalla documento punto, obtener elemento por ID. Entonces vamos a conseguir el DNI de la pantalla de contactarme. En este caso espacio de contacto. Entonces amigos por aquí, tienen que seguir mi pista. Entonces si haces algo como esto, puede que no funcione para ti simplemente porque en el futuro, el ID de la pantalla va a ser así. Espacio de contacto. Están en lo cierto. Y si la pantalla no existe, tenemos que terminarla aquí mismo. Y si lo hace, vamos a hacer contactarme, pantalla, DOD, desplazarse a la vista. Y el comportamiento. Va a ser suave. Entonces esto es lo que lo hace suave. Desplázate K, estamos progresando y me gusta. Lo que voy a hacer ahora mismo es duplicar este método, este tipo de aquí. Entonces vamos a tener estos para el componente de casa. Déjame mostrarte rápidamente. ¿ Se puede ver este fondo aquí mismo? Por lo que esto se desplazaría al hueso del componente casero. ¿ Puedes ver eso? Hermosa. Entonces tenemos que darle un nombre. Por lo que esto quedaría atrapado. Desplácese a casa. Aquí va a estar en casa. Vamos a cambiar este nombre de variable a pantalla de inicio. Ahora lo que voy a hacer es presionar Command y D. Vuelva a presionarlo una vez más. Se puede ver la edición multicultural es muy agradable. Ahora voy a limpiarlo. Entonces vamos a tener pantalla de inicio presionando la tecla Escape para desactivar el multi causal. Agradable. Habiendo hecho esto, vamos a comprobar si el elemento está a la vista. Esto simplemente implica si el documento aparece completamente en la pantalla o no. Por lo que salgan de esta función. Y aquí vamos a tener es elemento en vista LM k Vamos a tener una variable llamada Req igual a L m dot. Consigue pegado cliente rect, discúlpame, el ojo de un cabello. Corta esto. Este método de I aquí devuelve un objeto directo DM proporcionando información sobre el tamaño de un elemento y su posición relativa a las pocas y las pocas macetas. Fase más simple a la parte del documento que está viendo, que actualmente está visible en su ventana. Y aquí vamos a tener un top de elementos variables, top elemento, req dot top. Y aquí vamos a tener un elemento variable fondo, punto req, supongo que ya sabes, fondo. Entonces veamos qué es parcialmente visible el elemento. Vamos elemento parcialmente factible top. Entonces cuando el elemento superior es menor que el punto de Windows en una altura y el elemento de fondo es mayor o igual a 0. Significa que es parcialmente visible. Muy bien, así que tenemos que comprobar por lo completamente visible. Dejar completamente visible. elemento superior es mayor o igual a 0 y el elemento inferior es menor o igual al punto Ventana en una altura. Ahora vamos a tener un dulce caso. Si el caso es parcial, vamos a regresar parcialmente visible. Este tipo de aquí, discúlpame, esto es coulomb. Y si el caso es columna completa, vamos a volver completamente visible. Y aquí vamos a tener el caso por defecto para ser falso. Por aquí hay una flecha, simplemente porque esto tiene que ser punto y coma para cerrar este caso. Correcto. Ahora vamos a revisar la pantalla que se encuentra actualmente en la ventana gráfica, lo que significa la pantalla que se muestra en su totalidad. Entonces aquí vamos a tener una función. Consultar corresponsal de view port. Hemos mirado un evento a nuestra función. Está bien, así que solo tienes que escribir el código junto conmigo así que tengo que explicarlo todo. Entonces déjame mostrarte. Este es el caso de aquí. Y entonces este punto es elemento a la vista. Entonces tenemos que mostrar el caso Porsche. Este tipo de aquí. Si es totalmente visible. Parcialmente visible. Entonces si la pantalla es parcialmente visible, de lo cual significa si no está completamente renderizada, tenemos que transmitir el feed en efecto. Ahora voy a hacer dot current screen fit en dot. Siguiente. Aquí hay un método y luego tenemos que tomar algún objeto vacío y el método de nido. Disculpe. El siguiente método se utiliza para encajar nuevos valores en el sujeto y tenerlo multicast cama a los observadores registrados para escuchar al sujeto. Entonces en este caso, va a ser de componente diferente. Esto es bastante explicativo así Y por último, si totalmente visible. Entonces, lo que significa que si el componente se renderiza completamente en la pantalla, entonces tenemos que transmitir el nombre de la pantalla, punto, punto. Y tenemos que tomar esto en objeto de un cabello. Y vamos a hacer pantalla en vista coelom, pantalla, nombre de pantalla. Y entonces tenemos que salir de estas cajas fuertes. Arróllala, ¿verdad? Lo hemos hecho perfectamente bien por aquí. Entonces preocúpate cuando empecemos a consumir este trabajo observables definitivamente lo entendería lo suficientemente bien. Está bien. Cuídate. 18. Módulo de animaciones: En esta conferencia, procederemos con las animaciones. Haga clic derecho en utilidades aquí en Nuevo archivo. Y entonces esto se llamará animaciones dot js. Y luego tenemos que exportar clase por defecto. La animación es abierta y cerrada corchete rizado. Y por aquí tenemos que instanciar la clase de animación. Y la referencia del objeto se llamaría animaciones. Animaciones punto y coma para terminarlo. Y por cierto, varía, opcional. Entonces aquí vamos a tener un ajuste de función en pantalla. Por lo que esta función va a tomar en el ID de pantalla, que es el nombre de subrayado de pantalla, configurarlo a nuestra función, y vamos a ir al portafolio GS. Por lo que quiero mostrarles el DNI y lo pelos. ¿ Puedes ver? Ahora vamos a tener una variable, pantalla. Documento punto, obtener elemento por ID. Tenemos que tener la idea de la pantalla. Y si yo, oye, tenemos que comprobar si la pantalla no existe. Entonces resulta que tenemos y luego tenemos que terminarlo. Y si existe, tenemos que estilizarlo. Dale un cinco. Y entonces vamos a transformarnos. Tenemos que traducir Y, que es del eje y. Uno. Fotos. 19. Instalación y pantalla de la instalación y actualización de paquetes: Bienvenidos de nuevo a los autos. Están en lo cierto. Por lo que en esta conferencia, comenzaremos a implementar el componente de cabecera. Al final de esta conferencia, tendremos que los componentes del hogar se vean como estos. Como exactamente lo que ves que se muestra en la pantalla. Código Toronto VS. A menos que proceda. Para proceder, hay que seguir la estructura del proyecto. ¿ De acuerdo? Por lo que haga clic derecho en el hogar de un héroe nueva carpeta. Y esta carpeta se llamará cabeza. ¿ Verdad? En el paquete de cabecera. Tenemos que crear el componente de cabecera. Entonces aquí en nuevo archivo. Y esto sería cabecera de tarjeta. Vamos a crearlo archivo CSS correspondiente. Punto de encabezado CSS. Js. Generar el componente funcional. Hermosa. Ahora tenemos que instalar los paquetes necesarios. Procede al directorio de materiales, materiales, y luego desplácese hacia abajo. Está bien, entonces aquí tengo una fuente que queremos instalar. Ahora voy a agarrar una copia de primera línea de Garza al código VS. Aquí tenemos que ver al cliente. Y luego npm instala el comando V para pegarla hecha en los materiales y luego copiar la segunda línea. Estoy aquí, npm instalar pasta. Hagámoslo instalado, MPL instalado. Y sé que la mayoría de ustedes tienen curiosidad por qué lo estoy haciendo así. Para la línea de falla, npm instalar, comando V para pegar. Y por último, instalar NPM. Estamos hechos con la instalación. Entonces si quieres instalar todo a la vez, todo lo que tienes que hacer es copiar así. Y luego ven aquí, haz npm instalar y luego pega. Entonces lo hice al final, pero no funcionó bien para mí. Vamos a golpear en el paquete JSON pesado. ¿ Puedes ver? Está bien. Ahora empecemos con las importaciones. Tenemos que importar pantallas de subrayado total. Y también vamos a importar pero obtiene pantalla de subrayado, índice de subrayado de Utilidades, lodo, lattes comunes. Por lo que estamos consiguiendo todas estas pestañas aquí mismo desde el módulo común de oT. debes saber. Importar el servicio de garantía de. De acuerdo, vamos a importar Awesome Font, Impresionante icono de. Y como todo lo que tenemos que importar. Ahora vamos a declarar las variables de estados necesarias a utilizar. Y aquí vamos a tener const. Selecciona esa pantalla, establece. Pantalla, configurarlo para usar estado. Y el estado inicial va a ser 0. Justo antes de proceder, tenemos que importar el US di dt. Entonces aquí vamos a usar estado. Tenemos que configurar el show, tenía una opción, establecerla a ti, indicar que el estado inicial va a ser falso. Ahora vamos a definir una función para actualizar la pantalla, configurarla a nuestra función. Y aquí vamos a recoger en pantalla actual. Entonces aquí vamos a tener una variable. Índice de pantalla. El índice de pantalla. Ahora vamos a hacer coreanos queen dot view screening. Si el índice de pantalla es menor a 0. Y así lo siguiente en línea es suscribirse al paso observable fuera de esta función. Y entonces vamos a tener una variable. Suscripción pantalla coreana, scroll service dot, podcast parabrisas. Entonces déjame mostrarte. Entonces tenemos que fijar cuatro V's. Y aquí está el Casta, el objeto o amigos de la clase de asignatura. Déjame mostrarte aquí. ¿ Y dónde está? Dot. Tenemos que suscribirnos a lo observable. Y luego vamos a tomar en la pantalla actual de actualización de funciones , este tipo de aquí. Está bien, así que no quiero que esta conferencia tome demasiado tiempo. En la próxima conferencia, procederemos con la UI. 20. Navegación de la navegación del haz clic: De acuerdo, entonces procedamos con el URI. Entonces el Austin que vamos a hacer aquí mismo es mostrar los nombres de los componentes como navegación. Para que puedas ver el currículum de Home About Mí y el resto de ellos. Pero aunque no hemos creado todos estos componentes. Por lo que por ahora, sólo verá el hogar mostrado justo aquí en la parte superior como navegación. Por lo que queremos hacerlo dinámicamente. Por aquí. Vamos a tener una función para hacer eso. Obtiene opciones de Hara, configurarlo en una función de flecha como de costumbre. Y por aquí vamos a volver abierto y cerrar corchetes. Vamos a mapear, dibujó el total de pantallas Comando P. Y luego los llevaré a las comunidades. Y aquí está el total de pantallas. Por lo que dondequiera que los componentes que se enseñen por aquí, lo tendremos exhibido en la parte superior como navegación. Entonces lo que vamos a hacer ahora mismo es mapear a través de ese total de pantallas. Total pantallas mapa de puntos. Entonces aquí mismo vamos a tener un div, dale una clave de nombre de pantalla, guión bajo de pantalla, nombre de pantalla. Déjame mostrarte rápidamente. Contenedor de cartera de Toronto. Y aquí está la clave. Perfecto. Te dije a medida que avanzamos, Joel, definitivamente entendemos todo. Entonces sí, se acerca. Ahora vamos a darle a este div un nombre de clase, obtiene encabezado clase opcional. Por lo que tenemos que especificar el OnClick para que se pueda hacer clic. Por lo que al hacer clic en cualquiera de los nombres, debe cambiar al componente correspondiente. Déjame mostrarte. Entonces toma, por ejemplo, quiero dar click en el About Mí. Te lleva hasta el About mero componente. Entonces al click va a ser un núcleo, abrir y cerrar corchetes rizados. Y luego más tarde vamos a tener una función llamada pantalla de interruptor. Entonces justo en el DV, tenemos que recorrer el nombre de la pantalla. Pantalla, nombre de subrayado de pantalla. Por lo que estos lo tendrán visualizado en la pantalla. A la siguiente función vamos a tener un step-up de las opciones de cabecera get. Y luego vamos a definir una función aquí mismo para lidiar con las opciones de encabezado para crear espacios entre la pantalla y burlarse del nombre de los componentes seleccionados sería de un color diferente. Entonces eso vendrá cuando empecemos a estilizarlo. Entonces aquí vamos a hacer obtener clase de opción de encabezado, que es el registro funcional por aquí. Esta función, si se establece índice total pantallas longitud de punto menos uno. Y vamos a tener clases más dash, dash, separador. Y si elige pantalla Record Index, entonces las clases van a ser iguales. Cabecera seleccionada opcional. Entonces aquí mismo, si hay más de una pantalla mostrada en la parte superior como navegación, tenemos que crear espacio entre las navegaciones. Déjame mostrarte aquí tienes Hogar y luego el un espacio entre el hogar y el sobre mí y desde lo anterior me a su currículum, al testimonial y luego al contactarme. Entonces esta pieza de aquí es de lo que estamos hablando. Y la intención aquí es tener el nombre del componente marcado como seleccionado al hacer clic. Se puede ver en este momento el About Mí es seleccionado cuando llego a nuestro currículum. A la pata. ¿ Puedes ver? Correcto. Entonces eso es exactamente lo estamos tratando de lograr desde carriles 41 hasta 42. Está bien. Por lo que lo siguiente en línea es implementar un interruptor entre las pantallas. Y ahora vamos a tener una función para eso. Y ya te lo he dicho antes, la pantalla del interruptor, interruptor. Vamos a pantalla componente. Documento punto, obtener elemento por ID. Tenemos que conseguir el DNI de la pantalla. Captura de pantalla, nombre de subrayado de pantalla. Los componentes de Scream no existen. Y si lo hace, vamos a tener componente de pantalla de desplazamiento de punto a la vista. El comportamiento va a ser suave. Y eso lo sabes. Ahora vamos a configurar la pantalla seleccionada. De acuerdo, ahora empecemos a implementar la IU. Creo que esto debería estar envuelto en paréntesis. Cierra este div. Aquí vamos a tener un bajo def, dale un nombre de clase de encabezado dash. Y vamos a tener un div con un nombre de clase de dash, hamburguesa, y haga clic en Mostrar opciones. Entonces lo que estamos tratando de implementar ahora mismo, déjame mostrarte aquí mismo. No aparece un iPad Pro, por lo que tiene que aparecer en las plataformas iPhone y móviles. Entonces esto es exactamente lo que estamos tratando de implementar. ¿ Ves a este humilde por aquí en la esquina superior izquierda de la pantalla? Y espero que se pueda ver que el nombre de la clase, cabecera dash 100 barras de guión de hamburguesa. Y luego el ícono. Vamos a hacer uso de este tipo. Déjame mostrarte esto por aquí. Sí tiene que venir aquí y pegar cerrar Europa era la etiqueta de autocierre. Y salir fuera de este div con el nombre de clase de hamburguesa cabecera. Este es el div de aquí, y aquí está la etiqueta de cierre. Justo después de la etiqueta de cierre, vamos a tener un div, darle un nombre de clase de encabezado dash, logo. Muy bien, En este div, vamos a recorrer el logo. Entonces de un Hey, si tienes un logo, también puedes usar el logo aquí mismo. Al igual que puedes hacer algo como esto. Entonces si el logotipo está en forma de imagen, puedes hacer IMG, SRC, bien, y luego apuntar a la ubicación de la imagen. Pero para mí, sólo quiero spam el logotipo. En este caso, va a ser mi nombre. Aquí. Vamos a tener que creo que sigamos con esto. De acuerdo, y entonces este es letrero de Giotto en mi teclado cerca de la barra. Entonces justo después del div de cierre de nombre de clase, cabecera, logo, cielo, vamos a tener otro div con el nombre de la clase. Show tenía opción. Y esta vez lo vamos a exhibir con una condición. Entonces si sí existe, vamos a tener aquí un guión opciones. Mostrar opciones de guión, guión. Entonces aquí vamos a llamar a la función obtener opciones de encabezado. Déjame mostrarte esto por aquí. Ahorra menos kick-start la aplicación. El encabezado no se muestra en la pantalla. Vuelve, y luego tenemos que renderizarlo en el JS de casa. Aquí, tenemos que importar desde. Y de nuevo, asegúrate de que la cabeza esté en la parte superior del perfil. Ahora ella en el navegador. Recargar. Ahora el encabezado está en la pantalla. Déjame mostrarte. ¿ Ves eso? En la esquina superior izquierda de la pantalla, verá el logotipo y el nombre del componente de inicio mostrado como navegación. Entonces aquí está el componente casa y aquí está el logotipo. Entonces en la siguiente conferencia, cuando empecemos a estilizar este componente, tendrás que todo se vea perfectamente bien. 21. Styling el componente del componente de encabezado: Empecemos a estilizar el componente de cabecera. Heroína puso VS Código. Y antes de proceder, tenemos que hacer algo, abrió Hadar JS. Entonces aquí mismo tenemos que cambiar el nombre de la clase para encabezar un contenedor de salpicadura seguro. Entonces, habiendo hecho eso, procedamos al encabezado CSS. Nosotros como él, vale, hey, ¿ es el contenedor de cabecera? Vamos a tener un flex de pantalla. Justificemos los contenidos al centro. El alto, 140 píxeles, el color de la fuente. Va a ser blanco. Y aquí tenemos que estilizar la cabeza aquí arriba y oops, esto se supone que es un punto. Rápidamente. Hagamos que muestre espacio flex entre darle una altura del 100% del 70 por ciento. Y el color de la fuente. También va a ser blanco, así que sólo tengo que agarrar estas pasta. Trabajemos en el logo. El tamaño del teléfono es de 50 píxeles. El teléfono de la familia, Poppins, extra audaz. Por lo que el color de la fuente va a ser blanco. Sólo tienes que agarrar estas pasta segura. Y por favor, debes asegurarte de que tu archivo CSS ya esté vinculado con el componente. Lo hicimos en la conferencia anterior. Teníamos en el navegador y vamos a comprobarlo. ¿ Se puede ver hermosa? Se ve bien. Y luego aquí está la hamburguesa Hara. No te preocupes, tendremos todo alineado adecuadamente. Por lo que el MNIST es la opción de cabecera. Tenía un chorro de esquisto. Tener un flex de pantalla. Alineemos los artículos al centro. Y también tenemos que estilizar el encabezado. Opción. A es darle un tamaño de fuente de píxeles del sistema. Por lo que el costo va a ser de 0.600. Ella en el navegador. Y déjame mostrarte puedes ver el encabezado? Hagamos algo. ¿ Ves aquí es en la esquina superior izquierda de la pantalla? Queremos mostrarlos en plataformas móviles. Línea occidental es la opción de cabecera, separa 0 puntos dash. Puede agarrarlo desde aquí. Separador, dale un margen de 50 píxeles. Y aquí vamos a darle un color. Por lo que el color va a ser blanco también. Se va a agarrar, luego péguelo aquí mismo. Ahora dialicemos el encabezado seleccionado, opción, punto, guión seleccionado, opción dash. Y entonces todo lo que tenemos que hacer es especificar el color. En realidad podemos codificar por aquí. Entonces esto es lo que es por aquí. ¿ Ves? Eso es exactamente lo que implementamos en este momento. Por lo que no lo harás aparecer por aquí simplemente porque sólo tenemos el hogar mostrado en la parte superior como navegación. Entonces cuando empecemos a agregar más componentes, vas a ver el efecto. Vamos a comprobarlo en plataformas móviles. ¿ Ves que esto no responde en absoluto? ¿ Puedes ver eso? Por lo que en la próxima conferencia, nos encontraremos con el jefe son responsive en plataformas móviles. Nos vemos en la próxima conferencia. Manténgase enfocado. Y TK. 22. Responsividad de jefe: Procedamos con la capacidad de respuesta móvil. Tienes que aguantar para contratar un CSS. Y luego vamos a empezar con el iPad Pro. Por lo que en la pantalla multimedia y ancho máximo de 1, 1, 1, 0 píxeles, que es el tamaño del iPad Pro. Ahora, vamos a tener la cabeza aquí arriba y darle un ancho de 80 por ciento. Resaltar, copiar, pegar, cerrar el soporte rizado. Y por aquí tenemos que cambiar el tamaño de tu pantalla a 970 fotos. Vamos a tener un bloque de exhibición. Guárdala en el navegador. Recargar. Se puede ver ahora la hamburguesa aparece en la esquina superior izquierda de la pantalla o a la derecha. Definitivamente todo va a ser genial. Todavía en el tamaño de la pantalla, queremos el encabezado parent. Tenemos 100%. Hagámosla posición. Absoluto, la izquierda, mi pérdida, 100%. Los píxeles superiores le dan una altura de 100 y un ancho de 100 por ciento. Vamos a justificar el contenido. Espacio alrededor. Y luego el fondo, que es el propio deslizador. Cuando es escena de Clyde, queremos que el fondo sea 1, f, 22, 35, el índice z, la opacidad. Hagámoslo 0.5. Seguro. Vamos a tener una transición, señalarlo. Y luego para la opción de cabecera separada o DOD. Oye, ¿se le da un margen de la cabecera seleccionada? Punto, guión, guión, barras. El tamaño de la fuente es 30. Las imágenes deben ser puntuales. Y el margen 0 píxeles, diez imágenes. Aquí sólo tenemos que pedir prestado este color de aquí. Pega aquí. A lo mejor le pagaremos más tarde. No lo sé. Aquí. Mostrar guión, hamburguesa, opción. Chicos. Saquémoslo y veamos si todo está funcionando perfectamente bien. Recargar todo de Qu Gary está funcionando como se esperaba. Ahora. ¿Puedes ver? Perfecto, me encanta. ¿ Lo ves? Entonces probémoslo en iPhone 6, 7, y 8, 2 x find. En el iPad Pro. Ya ves tenemos la navegación y ahora desapareció la cabeza de una hamburguesa 100. Pero cuando te vayas en el iPad, vamos a tener la cabeza, una hamburguesa. ¿ Ves? Entonces amigos, todo está funcionando como se esperaba. Muy bien, así que terminamos con el componente de cabecera ganado en el futuro, van a ver cómo vamos a mostrar los nombres del componente en una parte superior como navegaciones. Por lo que tendrás lo anterior me reanude testimonial, contáctame y todo eso. Nos vemos en la próxima conferencia. Quédate folclorista, y cuídate. 23. Componente reutilizado: En esta conferencia, vamos a crear el componente razonable. Un componente reutilizable es una pieza de interfaz de usuario que se puede reutilizar en una parte diferente de la aplicación a Butte más de una instancia. De acuerdo, así que déjame llevarte al proyecto de demostración. Desplácese hacia abajo. Aquí están los componentes reutilizables, que comprende el título, el encabezamiento, y el separador, que es esta línea de aquí. Se puede ver hermosa. Ahora, una cosa que más me gusta del componente reutilizable es que la flexibilidad. Por lo que esto se utiliza aquí en el componente About Me para mostrar el título About Me y cada subtítulo, que es el sobre mí y luego la facilidad de subtítulos. ¿ Por qué elegirme? Está bien. Ahora, cuando esto se reutilizaría en un componente diferente, déjame mostrarte. Entonces en este escenario, tenemos el currículum. Entonces lo vamos a pasar diferente valor hacia abajo al componente reutilizable. Ahora puedes ver la razón por la que dije, los componentes reutilizables son flexibles. También, mano a mano Microsoft encaja en unos componentes diferentes como el testimonial. Tenemos que cambiar el valor que se pasará al componente. ¿ Está bien? Entonces en este caso, aquí está el testimonial como título, y aquí está el subtítulo. Muy bien, así que vamos a sumergirnos en el código y entonces tendremos que entenderlo lo suficientemente bien a medida que procedamos. Heroína a VS Código de a. Hey, vamos a crear un directorio llamado subtítulo. Ahora sólo hay que hacer es hacer clic derecho en las utilidades. Aquí está. Se puede ver clic derecho aquí en Nueva carpeta. Ahora vamos a crear el componente aquí en New File, pantalla encabezado dot js. Generemos el componente funcional. Vamos a darle a este div un nombre de clase de cabeza en contenedor de dash, discúlpame, escribe bien en este div. Necesitamos otro div con el nombre de clase de screen dodge. Enfréntate. Y por aquí, tenemos que ampliar el título. Abran y cierran corchetes rizados. Y voy a hacer props dot title. Y aquí esta función le va a llevar sondas. Por lo que en realidad puedes cambiar el nombre de las indicaciones a otra cosa. Pero te recomiendo que te pegues a las sondas de convención simplemente porque éstas son generalmente aceptadas. Y mucha gente, esto es lo que hace. Entonces lo que está pasando aquí mismo es que sólo estamos recibiendo el valor, ¿verdad? Entonces en la próxima conferencia, vas a ver cómo podemos pasar valor a este componente a través de sondas. El más simple eso. Y tenemos que revisar el subrubro. Y por aquí vamos a tener el soporte rizado. Y luego abrir y cerrar paréntesis. Vamos a hacer props punto subpartida. Entonces, como de costumbre, estamos recibiendo un valor que se está pasando a estos componentes a través de sondas. Entonces en este caso, si hay algún valor que se está pasando por aquí, tenemos que mostrar ese valor. Entonces vamos a tener un div, darle al div un nombre de clase de screen dash, dash heading. En la derecha. En este div, tenemos que ampliar ese valor, que es el subtítulo. Entonces voy a hacer utilería, subpartida de puntos, y flechas. Si no hay un subtitular que se transmita a este componente, tenemos que mostrar un div vacío. Entonces ven aquí, coelom, que son las flechas, vamos a tener un div. Ciérralo. En resumen, apenas estamos recibiendo los datos que se pasarán a través de apoyos hacia abajo a esta empresa y no te preocupes. En las próximas conferencias, verá cómo podemos pasar valores a esta empresa y qué hermoso. Ahora ella en el proyecto demo. Déjenme mostrarles estos por aquí, que es el separador. Entonces esto es lo que vamos a hacer ahora mismo. Esta línea por aquí, sólo vamos a tener Este es el Blob. Estos son algo al norte de aquí. Esta es la blob. ¿ Puedes ver a este tipo por aquí? Esto es todo para el componente reutilizable. En la próxima conferencia, vamos a estilizar este componente. ¿ De acuerdo? Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 24. Componente Reuseable: En esta conferencia, comenzaremos a estilizar el componente razonable. Al final de esta conferencia, tendremos que se vea así. ¿ La puedes ver bien? Por lo que rápidamente proceder al código VS a menos que continúe. Haga clic derecho en el encabezado de la pantalla. Aquí un nuevo archivo. Y este archivo se llamaría Screen head en dot css. Antes de proceder, tenemos que vincular el componente con el archivo CSS. Abre la pantalla encabezando GAS, desplázate hacia arriba. Entonces ya estoy ahí en la parte superior. Ahora lo que voy a hacer es importar pantalla encabezado dot css. Guárdala en la pantalla aquí en CSS. Y aquí vamos a empezar por encabezar contenedor. Déjame mostrarte rápidamente. Entonces aquí está el encabezado contiene el encabezado de pantalla, el guión de pantalla, el encabezado de guión, y aquí el resto de las clases. Entonces sigamos adelante. Tenemos que ajustar esto a un contenedor flex. La columna de dirección flex. Alineemos los artículos al centro. El ancho, 100% de margen. Y aquí tenemos un guión de media pantalla, rumbo de guión, subpartida. Ahora vamos a tener el espaciado entre letras para ser de tres píxeles. Margen. Como la leche come. Mezclan 18 píxeles. Tamaño de fuente. Píxeles. El color. Tenemos que hacer uso del colo que importamos antes en la conferencia del profesor. Y espero que podamos recordar eso. Para un encabezado de pantalla, guión de pantalla. Vamos a dar el tamaño de fuente de 32 píxeles. El color cuando f, 22, 35. Y a estas alturas deberías estar familiarizado con este color. El tipo de letra, familia, Poppins, barco, la cabeza y separador, rumbo, guión. Separador. Vamos a tener una pantalla flex alinear elementos al centro. El cargo relativo. El ancho, 180 píxeles, ¿verdad? Para la línea separadora, DOD, la línea subtotal, dale un ancho del 100%, dale una altura de 200 píxeles. Y el color de fondo, vamos a hacer uso de este color. Entonces solo tengo que crecer y luego pegarlo aquí mismo. Entonces déjame mostrarte exactamente lo que hicimos en este momento. Esto es por aquí, esta línea por aquí. No estoy hablando de este tipo. Esta es la de la que estoy hablando, esta línea de un. hey, ok. Ahora, para el punto blob separado, ahora tenemos que cambiarlo para volar por aquí. Dale una altura de 10 píxeles, un ancho del 100%. El cargo absoluto. Vamos a tener una pantalla, flex, justificar contenido al centro, resaltar, copiar, pegar, cerrar el corchete rizado. Y luego tenemos que estilizar el Div. Déjame mostrarte este div de un heno. Por lo que rápidamente tenemos que darle un ancho de 35 píxeles, radio de borde de 10 píxeles. Y el color de fondo. Para estos Garza a la CSS. Tenemos que hacer uso de la copia naranja oscura. Vuelve al cabezal de pantalla en CSS, y luego solo tienes que pagar. De acuerdo, Así que cuida por aquí, cierra el espacio. Seguro. Ahora terminamos con el componente reutilizable. Y en la próxima conferencia, veremos cómo podemos pasar datos a la pantalla encabezando GAS a través de sondas están bien, este tipo de aquí. Por lo que cuando rendericemos el componente reutilizable, tendrá los detalles mostrados en la pantalla. Muy bien, así que esto es a menudo ahora para esta conferencia y nos vemos en la próxima conferencia. Cuídate. 25. Diseño de componentes en exacciones: Bienvenidos de nuevo a la causa. Muy bien, entonces ahora vamos a empezar a trabajar en los componentes Acerca de mí. Y al final de esta conferencia, tendremos algo tan hermoso como estos. Echa un vistazo. De acuerdo, así que vuelve al código VS. A menos que proceda. Para proceder, tenemos que hacer los insumos necesarios. Haga clic derecho en los activos. Aquí, ¿lo es? Haga clic con el botón derecho, toque en nueva carpeta. Y lo llamaremos sobre mí. Ahora, abre la carpeta de materiales. Está justo aquí en mi escritorio, así que solo tengo que 0 dolor y luego abrir la cartera pro client SRC, activos sobre mí. Entonces ahora solo tenemos que copiar la imagen que es relevante para los componentes About Me y pegarla aquí mismo. Y aquí está su clic derecho. Copia. Pegar. Ciérrelo, proceda hacia abajo, vuelva al código VS. El siguiente en línea es crear el componente correspondiente, un archivo SCSS. Solo tienes que abrir el contenedor de cartera así. Y luego haga clic derecho en el Acerca de mí. Aquí, un nuevo archivo. Esto se llamará Acerca de mí. Js crea su archivo CSS correspondiente. Acerca de mí dot css. Volver a sobre mu j es genérico, los componentes funcionales React js. Y si tenemos que importar el efecto estadounidense y nido es importar el componente reutilizable. Utilidades encabezado de pantalla de salpicaduras, encabezado de pantalla de salpicadura. Importar esos cuervos tienen 0s. Importar las animaciones. Hermosa. Ahora la línea es agregar estos componentes a la pantalla. Abre el test.js común. Y por aquí, tenemos que importar los componentes About Me. Guardémoslo en las constantes. Por lo que sólo tengo que destacar estos. Mantén pulsado el Alt y Shift y luego pulsa la tecla de flecha hacia abajo para duplicar. Hermosa. Entonces sólo tenemos que cambiar el nombre por sobre mí. El componente se trata de mí. Comando S para guardar. Ahora sólo tenemos que detener el servidor. Oye, ¿puedes ver que el componente ha sido agregado a la pantalla? Volver al código VS cerrado bajo common law test.js. Entonces si esta función va a tomar algún parámetro, pide y baja aquí y dale a este div un nombre de clase de sobre mí. Contenedor son sobre salpicadero, contenedor de salpicadero. Vamos a tener otro div con el nombre de clase de sobre MI padre. Por lo que lo siguiente en línea es renderizar componentes reutilizables. Encabezado de pantalla con la etiqueta de autocierre. Y este componente tiene dos atributos diferentes. Uno es el título y tenemos que darle un valor. Entonces voy a decir. Acerca de mí. Y el otro es el subtítulo. Y aquí voy a hacer ¿por qué elegirme? ¿ De acuerdo? Por lo que aquí la intención es que estos valores pasen al cabezal de pantalla en las empresas y que se muestre en la pantalla cuando se renderice el componente. Está bien, así que déjame mostrarte. Apenas golpeó en la cabeza de pantalla en G, S. Y si aquí se puede ver que estamos recibiendo los valores por aquí, ver prompts dot subencabezado. Entonces con la ayuda de estos avisos, estamos asignando un valor a este título. Y síntoma aquí estamos asignando un valor al subtítulo. Entonces si no hay ningún valor asignado, no se mostraría nada en la pantalla. Vuelve al Sobre mí, GAS. Ahorra, corre. Vuelve al navegador, y vamos a comprobarlo. Hermosa. ¿Puedes ver eso de mí y por qué solo yo? Todo está funcionando perfectamente bien. Y creo que con esto, se puede entender claramente de qué componente razonable se trata. Por lo que lo siguiente en línea es suscribirse a los observables para permitir desplazamiento suave y el efecto de desvanecimiento. Entonces aquí voy a hacer, vamos a desvanecernos en manejador de pantalla, tomando pantalla por aquí. Entonces vamos a comprobar si la pantalla de desvanecimiento de puntos de pantalla no es igual a prompts dot ID, entonces lo vamos a terminar aquí. Ahora. Tenemos que implementar para efecto de desvanecimiento. Ahora voy a hacer animaciones. Animaciones, pantalla de desvanecimiento de puntos. Entonces déjame mostrarte rápidamente Garza a la animación gs. Y aquí está la pantalla de desvanecimiento de función. Vuelve al About Me j. Así que tenemos que tomar el DNI. Hermosa. Por lo que por aquí tenemos que suscribirnos a los observables. La y yo vamos a hacer const, ajustando suscripción. CV de desplazamiento, punto corresponden encajar aquí en esta cruz F es componente y déjame mostrarte cruzar FSGS. De acuerdo, aquí está el desvanecimiento de pantalla actual, que es el objeto o se abstiene de la clase de sujeto. Muy bien, desplácese hacia abajo. Déjame mostrarte por aquí dónde lo implementamos. Entonces aquí está su actual ajuste de pantalla en punto siguiente. Y lo que hicimos aquí es transmitir el efecto de desvanecimiento. Vuelve al VGS anterior. Entonces vamos a hacer puntos. Tenemos que suscribirnos a ella, suscribirnos. Y aquí sólo tenemos que tomar en desvanecimiento en manejador de primavera. Finalizar sido manejador. Hermosa. Entonces para comprobar si está funcionando perfectamente bien, tenemos que bajar a este div con el nombre de clase de About Me container. Entonces dale a esto una identificación. Props dot id comando S para guardar. Vuelve al navegador y vamos a comprobarlo. Recargar. Pruébalo haciendo clic en el Acerca de mí. Abajo. ¿Puedes ver eso? Todo está funcionando perfectamente bien? ¿Ves eso? Al hacer clic en el About Me, es desplazamiento suave hasta es desplazamiento suave hasta el componente de base de hecho es exactamente lo que es la intención. Volver al código VS. Por lo que aquí vamos a mostrar alguna información estática en la pantalla. Para eso, tenemos que declarar datos no estáticos y almacenarlos en unos tiempos contras. Entonces por aquí, vamos a tener constante, llamémoslo pantalla, guión bajo, abrir y cerrar corchetes rizados. Y aquí vamos a tener la columna de descripción. Vuelve al navegador y déjame mostrarte. Por lo que este es el sitio web demo y Aquí está la descripción. Y lo voy a hacer ahora mismo es copiar, volver al código VS y luego pegarlo entre las comillas separadas con una coma antes de que el nido y la línea es lo más destacado, lo que implica la lista de elementos. Y aquí se remonta la lista de artículos. Ahora mismo, voy a hacer destacados. Por lo que aquí vamos a tener un área de datos para que se visualicen en la pantalla. Abramos y cerremos los corchetes. Y así aquí tenemos que colocar una columna aquí. Muy bien, El primero de la lista. Vamos a sacarlo. Aquí tenemos un desarrollo web y móvil de pila completa. Sólo tengo que copiar. Ven aquí, pégalo. Separados con una coma, retrocedan. Copia, pegada entre la cancha, por separado a la esquina. Para evitar la repetición, sólo tengo que adelantar el video con celeridad. Está bien, Ahora ya terminé. Rellenar la lista. También hay que pausar el video al final y terminarlo aquí. Y ahora necesitamos tener la cabeza sobre su cabeza en coulomb. Abre las cotizaciones, vuelve aquí. Copiar, pegar. Es tan simple como eso. El renglón es definir una función para mapear a través de los datos anteriores como para que se muestre en la pantalla. Entonces oye, creo que tengo que cerrar la terminal para tener pensión completa. Aquí, vamos a haber corrido los aspectos más destacados, ponerlo a nuestra función. Por lo que tenemos que mapear a través de las constantes de pantalla de esos datos, puntos destacados. Déjame mostrarte. Destacados. Balas, ok. Puntos de balas, abrir y cerrar corchetes, y luego abrir y cerrar corchetes una vez más. Ahora tenemos que tomar en algún argumento si lo pongo a nuestra función. Entonces aquí mismo, vamos a tener un div con el nombre de clase de destacados. Y tenemos que darle una clave para realmente evitar duplicados de valores. Y aquí vamos a tener otro div con el nombre de clase de blog destacado, destacados, dash, blob, más abajo. Y por último, tenemos que abarcarnos el valor. Hermosa. De acuerdo, Entonces por una llave, cuando hagas esto, todo va a funcionar para ti perfectamente bien. Por lo que ahora tenemos que mostrar los datos en la interfaz de usuario. Desplázate hacia abajo hasta donde tenemos la interfaz de usuario aquí. Entonces justo después del componente razonable, vamos a tener otro div con el nombre de clase de sobre mí Codd. Dale el nombre de la clase sobre dash, dash cod. Y también necesitamos otro div con el nombre de clase de sobre mi perfil. Acerca de Dash me, perfil de dash. Déjame mostrarte. Aquí está el perfil principal, esta imagen de un heno. Y también necesitamos otro div con el nombre de clase de sobre dash, detalles de dash. Por favor, asegúrate siempre de que los nombres de las clases estén bien escritos para que no te metas en problemas cuando empecemos a estilizarlo. Y aquí tenemos que mostrar la descripción y neblarlo. Entonces voy a darnos libra en clase nombre de sobre dash, guión descripción. Por lo que aquí tenemos que mostrar el artículo. Ahora voy a hacer guión bajo pantalla constantes descripción de puntos. Arruinarse. Déjame mostrarte. Aquí está la descripción. Necesitamos un div con un nombre de clase de sobre dash. Dash destacados, nombre de clase div resalta dash, encabezamiento. Aquí mismo. Tenemos que cubrir el rubro. Entonces vamos a hacer pantalla en las constantes de alcance, punto resaltado encabezado, rumbo, seguro. Entonces aquí voy a cd cliente NPS. Marcar hacia abajo. Hermoso, todo funcionando como se esperaba. Por lo que aquí te presentamos la descripción. Pero me sorprende tanto que el rubro no esté apareciendo. Vuelve y vamos a comprobarlo. Cierto chicos, hay un error en el hechizo aquí. Se supone que esto se dirige. Ahorra una vez más, regresa. Está bien, Aquí está el encabezamiento y ves n. Esta es la descripción. Mostremos la lista de artículos. Entonces aquí mismo, después del div de cierre del encabezado de resaltado de ClassName, vamos a invocar el método render highlight. Seguro, vuelve atrás. Y aquí la lista de artículos. Hermosa. El nido y la línea es tener las proteínas, Hey, volver atrás y tener un heno. Justo después del div de cierre de ClassName sobre mí destaca. Vamos a tener un div con el nombre de clase de sobre dash, dash. Por lo que ahora podemos tener los cuerpos. Lo que voy a hacer ahora mismo es ir al componente de perfil y copiarlo del comando P hat on provide g, s. Entonces aquí el cuerpo es copiar, volver al About Me gs y luego pegarlo aquí mismo. Comando S para guardar. Vuelve al navegador y vamos a comprobarlo. Desplácese hacia abajo. Preciosa frase, este es un resultado letal que esperamos de esta conferencia. Me di cuenta de estas no luciendo hermosas, pero aunque no está buscando IDA, pero no te preocupes. En la siguiente conferencia, cuando empecemos a estilizar este componente, lo tendremos perfectamente bien. Esto es a menudo son para esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 26. Componente de estilo: Esto es exactamente lo que obtuvimos en la conferencia anterior. Y todo está funcionando perfectamente bien como se esperaba. pata cuando calientas la bomba incorporada About Me te lleva hasta aquí. Por lo que significa que el Smooth Scroll es vagón perfectamente bien. Echemos un vistazo a una ganga de la región del intestino. Y también el botón get Reanudar está funcionando como se esperaba. Hermosa. Por lo que ahora lo siguiente en línea es estilizar este componente habitado look. Volver al código VS a menos que continúe. Abre el CSS Acerca de mí. Y por aquí comenzaríamos con el contenedor. Déjame mostrarte. Aquí, ¿lo es? Entonces solo tengo que llamar b dot, pegarlo por aquí, abrir y cerrar corchetes rizados. Y vamos a tener que mostrar flex, dirección flex, columna, justificar contenidos para enviar. Alinear artículos para centrar el margen. Entonces vamos a tener 50 píxeles. Comando S para guardar, volver a la GS son menos vincular el archivo CSS con el componente. Arruinarse. Y Hey, vamos a importar sobre mí, dot CSS, Guardar. Vuelve al navegador a menos que se saque. ¿Puedes ver? Muy bien, sigamos. Vuelve al About Mí. estilo Css es la clase de padres DOD sobre MIS padres. Y vamos a darle un ancho máximo de 100 píxeles. Y el ancho 70%. The About Mí, bacalao dot sobre mí. Tengamos una pantalla de flex. El ancho es del 100%. Caja-sombra. Guardar, volver al navegador. Todo va tomando forma poco a poco. A mí me gusta. Entonces para el Perfil Acerca de mí, sobre me disgustado perfil dash. Y aquí le vamos a dar un ancho del 50 por ciento de la imagen de fondo. Entonces tenemos que hacer uso de la imagen que importamos antes en la conferencia anterior. Url. Tenemos que golpear los activos. Choque sobre mí. Es chocarme dot JPEG. Y espero que puedan recordar cuando importamos en esta imagen el tamaño de fondo. Hagámoslo curva. Antecedentes, repetir, no, repetir la posición de fondo. Tengamos su centro. Guardar. Vuelve atrás. Y aquí está el perfil. Ahora vuelve al código VS. Tenemos que estilizar el Sobre mí, detalles sobre dash me. Y oye, vamos a darle un ancho del 48%. Prueba alineada. Hagamos su justificación. Agregando 30 píxeles. Guardar. Echa un vistazo en el navegador. Se ve genial. Procedamos. Entonces por aquí, tenemos que estilizar la descripción Acerca de mí. Así que sólo voy a hacer sobre me disgustado. Descripción. Aquí se llama el corchete. tamaño de fuente para la descripción es de 12 píxeles. Para mí destaca. Démosle un margen desde arriba a la derecha. En las fotos de aquí, vamos a tener a Sarah para un punto culminante odiando a Dodd, aspectos destacados, guión, rumbo. Entonces aquí vamos a tener la familia de fuentes. Poppins, barco. El tamaño de fuente, 14 píxeles, margen. Y aquí por lo más destacado, punto, destacados. Hagámoslo display flex. Alinear elementos al centro. El margen. Cinco píxeles, 0. Por último, para un tamaño de teléfono, hagámoslo seguro. Echa un vistazo en el navegador. Esto se ve impresionante, me gusta. ¿Puedes ver eso? Procedamos. Entonces el nido y la línea es mostrar una bala por aquí, que es la blob más destacada. Entonces voy a hacer resaltar dash blob. El alto va a ser tema demanda el ancho, 12 píxeles, el margen, 010 píxeles, y el color de fondo. Entonces vamos a tener 5823. Guardar. Vuelve atrás. Y aquí está la alberca por aquí, que es la blob destacada. Pero no me gusta la forma en que parece un rectángulo por ahora. Tenemos que cambiar. Todavía se parece más a una especie de cosas, ¿verdad? Entonces hagámoslo rápidamente. Por lo que es muy sencillo hacer eso. Ahora, todo lo que tenemos que hacer es aplicar el radio fronterizo y luego hacerlo 50 por ciento seguro. Vuelve atrás. Aquí está no es así de hermoso? Impresionante. A mí me gustó. Y si escucho que te dieron cuenta de que las botellas no respiran en absoluto, entonces ves que no hay espacio entre los cuerpos. Vuelve atrás y arregla eso rápidamente. Aquí vamos a hacer sobre las opciones de Dash me. Y luego tenemos que apuntar al destacado BTA. Por lo que sólo tendremos que precisar el margen. Entonces desde arriba a la derecha, abajo 0, y luego desde la izquierda lo tenemos 30 pixeles. Echa un vistazo. ¿ Puedes ver eso? Hermosa. Todo está funcionando como se esperaba. Entonces tomemos una plataforma móvil atom y veamos si responde. De acuerdo, así es como aparece en el iPad Pro. No es receptivo. Puedes ver que el aborto está bien. Vamos a sacarlo en el iPhone. Echa un vistazo. Puedes ver que no me gusta así. Está bien, vamos a sacarlo. Boom. Todo está funcionando como se esperaba. Pero para la capacidad de respuesta móvil, tenemos que trabajar en eso. Entonces esto es todo por ahora, para esta conferencia. Muy bien, cuídate. 27. Responsivo de componentes: Vamos a perfeccionar Esta empresa es haciéndola sensible, volver a VS Code. Y por aquí, tenemos que empezar con el iPad Pro como de costumbre. Por lo que un iPad Pro, iPad Pro capacidad de respuesta. Por lo tanto, queen para iPad Pro es de 11 píxeles. Por lo que aquí voy a hacer DOD sobre Dash me, pagar tasa. Tenemos que darle un ancho de la misma aún por ciento. Entonces eso es todo para el iPad Pro y para otras plataformas móviles. Ahora sólo tengo que copiar estos. Copia. Ven aquí, pega, cierra el soporte rizado, y luego ven a este lugar sin cambios. Los píxeles. Aquí lo tenemos noche ocho pixeles para su reina más pequeña que el iPad Pro. Entonces cuando se sube, sí, aquí en plataforma móvil, queremos desactivar el EMH. Entonces voy a hacer esto, jugar, guardar y correr, volver al navegador y hueso, la imagen se ha ido. Hermosa. Por lo que ahora tenemos que hacer los detalles para ocupar el resto del espacio. Vuelve a hacer eso. Oye, solo voy a hacer DOD sobre detalles de me disgustado. Hagamos que el ancho sea 100%. Guardar y ejecutar. ¿ Se puede ver ese núcleo? Regresa y sigamos. Ahora en un dispositivo muy pequeño, lo que significa en una pantalla más pequeña. Ahora sólo tengo que volver a copiar esto. Cierre los corchetes de columna. Y por aquí tenemos que especificar el tamaño de pantalla, que es cuando aparece en un esguince o con el ancho máximo apagado para 66 píxeles. Entonces creo que ésta debería ser una pantalla muy pequeña. Sí. Entonces la opción Acerca de mí es sobre dash. Opciones de Dash. Vamos a tener que mostrar flex, la columna de dirección flex. Por último, tenemos que posicionar correctamente los botones. Entonces ahora solo tengo que bajar aquí sobre dash, dash, opciones, dot resaltado PTA. Por lo que sólo tendremos que darle una fusión de 24 píxeles desde la parte superior, luego 0 en el resto de los lados. Entonces aquí sólo voy a hacer, bien, Hermoso. Yo sólo voy a copiar estos listados aquí. Hagamos que el ancho sea 100. Este santos salvan. Se puede ver que todo aparece como espectador y me gusta. Entonces vamos a sacarlo en todas las plataformas. Iphone X, está bien, lindo iPod, lindo. Ipad Pro. Hermosa. F15. Impresionante. Y por último, en Galaxy S5 tienen razón. Esto es, como resultado estamos esperando de esta conferencia. Ahora el componente se ve tan hermoso. Está bien, nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 28. Crear el componente de Resume y el volumen de estado y el volumen del uso para utilizar: Por lo que ahora vamos a empezar a trabajar en su componente de currículum. Y al final de esta conferencia, tendrás algo como esto. ¿No es esto hermoso? ¿ Verdad? Entonces vamos a sacarlo. Entonces aquí tienes la Historia Wacky, habilidad de programación, intereses, educación, los proyectos. Y el resto de ellos. Volver al Código VS. Y por aquí tenemos que crear el componente correspondiente y añadir archivo CSS. Por lo que haga clic aquí un nuevo archivo. Y aquí lo vamos a llamar currículum dot js. Vamos a crear su archivo CSS correspondiente. Haga clic derecho en nuevo archivo. Esto se reanudará dot css. Volver al componente original, generar los componentes funcionales React js, RFC y hueso sí tiene que ocultar el Explorer. Y ahora tenemos que hacer las importaciones necesarias. Aquí vamos a importar utilidades de componentes reutilizables, pantalla splash, encabezado de pantalla splash JS. Y aquí tenemos que importar el servicio de escrow de utilidades splash, pantalla, televisores. Y por aquí tenemos que importar las animaciones. Esta función lo va a tomar como parámetro los apoyos. Entonces aquí vamos a declarar unas variables de estado a utilizar. Para estado inicial va a ser 0. Y aquí abajo, vamos a tener const sets, carrusel de estilo conjunto. Y los estados iniciales. Aquí vamos a configurarlo en objeto vacío. Por lo que ahora tenemos que implementar el efecto de desvanecimiento en el desplazamiento suave. Por lo que solo tengo que copiar estos desde el Comando Componente D o Control D en Windows y luego configurarlo por años y lo tiene. Entonces solo tengo que copiar todo aquí así. Vuelve a los jeers originales. Y aquí sólo tengo que pegar. Hermosa. Vamos a ejecutar que el componente reutilizable y asignarlo, que los valores correspondientes a cada atributo. Por lo que aquí para este DFF se va a tomar en un nombre de clase de contenedor de guión de hoja de vida, contenedor de guión de pantalla. Muy bien, y aquí mismo en este div, vamos a tener otro div con el nombre de clase de region contiene un div, dale un nombre de clase de Reanudar, contenido de guión. Y aquí vamos a renderizar el componente de encabezado de pantalla de la etiqueta de autocierre. Y aquí el primer atributo es el título. Y el título debe reanudarse. Y el segundo atributo es el subtítulo. Y aquí esta debería ser mi forma de bio detalles. Y por supuesto a estas alturas deberías entender adecuadamente cómo funciona componente razonable porque lo expliqué lo suficientemente bien en la conferencia anterior. Añadamos este componente a la pantalla. Vuelve al Comando Común de OTUs P. Solo tengo que ponerlo aquí. OT comunes y lo tiene. Importar el componente original. Importación. Reanudar desde contenedores de cartera, choque, reanuda, choque, reanudar JS. Y luego aquí sólo tenemos dos aspectos destacados. Duplica este código o puedes copiar y pegar también. Creo que te he enseñado a hacer esto en unas conferencias anteriores. Entonces aquí, solo debes cambiarlo por el nombre de la pantalla, que es un currículum. Y aquí el nombre del componente debe ser reanuda, lo siento. Está bien. Mezcla de parafina. Aquí es lo mismo que, vale, es un satélite igual. Ejecutemos la aplicación para ver qué tenemos a bordo. Ven aquí abajo a determinador. Y entonces estamos en el directorio raíz. Por lo que sólo tengo que cd cliente. Y entonces NPM inicio con crossovers no está definido. Volver al Código VS. Abre su currículum. J está en la línea 15. Está bien. Hay un error en los hechizos de un heno. Y creo que esto viene de la conferencia anterior. Por lo que se supone que se trata CVs de desplazamiento Comando S para ahorrar una vez más. Volvamos al navegador. Por lo que aquí está la región mostrada en la parte superior como navegación. Vamos a dar click en él. ¿Verdad? Esta vez no pasa nada. Volver al Código VS. Y aquí sólo tenemos que darle a esto una identificación. Props dot ID son una cadena vacía. Guardar. Vuelve atrás y saca una vez más. Por lo que el calor en el abortado original. ¿ Se puede ver que el componente reutilizable ya está renderizado? Entonces empecemos a trabajar en la empresa original y rápidamente. Está bien, entonces antes de proceder, creo que hay necesidad las filas sean cromáticamente EXXAT de un cabello. único que hay que hacer es volver a la MEG está aquí está. Y luego aquí importamos CVs de scroll. No sé pronunciar estos de todos modos, pero hay un doble ojo de un día. Ahora sólo tengo que quitarme estos y luego volver a donde lo utilizamos. Lo tiene sólo tenemos que limpiarlo. Y entonces aquí está, deletreado. Dice en la línea 13. Varios otra vez, un arrendatario. Hermosa. Por lo que ahora vuelve al navegador. Nuestras escrituras, todo está funcionando como se esperaba. Entonces cuando estás escribiendo una aplicación como un pro, esta necesidad de que seas cromáticamente EXXAT. La línea anidada es crear un componente razonable menor. Volver a las áreas visuales. Y por supuesto que terminamos con el VGS anterior, así que solo tengo que cerrarlo. Y además, terminamos con los OT comunes. Ciérralo. Está bien, así que por aquí vamos a tener algún componente razonable menor. Por lo que aquí vamos a tener un dy para el nombre de clase de región rumbo, curriculum vitae, rumbo dash. También necesitamos un div con el nombre de clase de currículum dash, guión encabezado, un div, dale el nombre de la clase, dirigiéndose dash, bullet. Por lo que por aquí vamos a tener los encabezamientos de atributos. Por lo que si se asigna un valor al encabezado del atributo, mostraremos esas flechas de valor. No se mostrará nada en la pantalla. Para eso, vamos a tener un renderizado condicional. Por lo que aquí vamos a extenderse. Vamos a hacer props punto encabezamiento como atributo. Y si el encabezado un marcador z, tenemos que mostrar la cabeza y el valor impulsa encabezamiento de puntos lo contrario. se mostraría nada en una pantalla, solo una cadena vacía y no se mostraría nada en la pantalla. Por lo que por aquí, tenemos otro atributo de desde la fecha. Déjame mostrarte. Aquí está la fecha desde y luego aquí está la fecha del dedo del pie. El más simple eso. Entonces si el de fecha y dicho que existe, entonces vamos a exhibir. El día. Entonces por aquí vamos a tener un div con el nombre de clase de cabeza en tablero. Tomado comillas dobles, y luego subrayado por aquí. Props punto a la fecha. Entonces flechas. Si el deudor no existe, entonces tenemos que mostrar un div vacío. Vamos a mostrar un div vacío. Hermosa. Tengo que guardar y formatear este código más duro, ¿verdad? Entonces aquí mismo vamos a tener otro div con el nombre de clase de currículum, dash, dash, rumbo. Y por favor no coincidan los nombres de clases Java se deletrean correctamente, por lo que no tienes problemas cuando empezamos a estilizar la aplicación. Entonces aquí si existe el subtítulo, tenemos que mostrarlo y no se mostrará nada en la pantalla tan solo como de costumbre. Por lo que aquí tenemos el subtítulo atributos , props punto subtítulo. Si esto es z, entonces tenemos que mostrar el subtítulo. Y la nuestra. Sólo vamos a tener una cadena vacía. Todo lo que estamos haciendo aquí es recibir la duda de los datos se pasaría del componente principal. Muy bien, entonces aquí tenemos los atributos subpartida cuando corrimos eso es componente, los atributos de cabeza. Y va a tomar en un valor, que se especifique ese valor, entonces se va a mostrar por aquí. De lo contrario, si no hay valor dado a los atributos de encabezamiento, no se mostraría nada en la pantalla. Es tan simple como eso está justo aquí. Después del div de cierre de nombre de clase Iridium Subpartida. Vamos a tener otro div con el nombre de clase de un guión de currículum, rumbo, guión, descripción. Entonces lo mismo aquí. Lo mismo aquí. Si a la descripción del atributo se le da un valor, entonces tenemos que mostrar ese valor. Y no se mostraría nada en la pantalla. ¿ Verdad? Entonces no quiero que esta conferencia tome demasiado tiempo porque tenemos mucho que hacer. Esto es todo por ahora, para esta conferencia, nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 29. Preparar currículum de datos estáticos 1: Empecemos con los datos estáticos. Pero antes de proceder, tenemos que hacer las importaciones necesarias. Abrió el directorio de materiales, abre la cartera pro cliente, activos SRC. Entonces por aquí en el directorio de materiales, tenemos que copiar este paquete de revisión. Déjame mostrarte. Esto contiene el SVG es que vamos a utilizar en este componente. Entonces sólo tengo que copiar. Ven aquí, pega, ciérrelo, ciérrelo. Volver al Código VS. Vamos a declarar como se tiene que utilizar datos estáticos. Arroja la pata. Entonces por aquí vamos a tener un Konstanz, llámalo unos pollos de región. Esta es la mejor manera de nombrar una matriz. Está bien, para que puedas ver las balas de reanudación simplemente porque es una colección de datos. Entonces cuando hago balas, no es una buena práctica. Y en realidad esta es mi propia opinión, pero es buena. Nombres un área con una palabra plural. Entonces aquí mismo vamos a tener la etiqueta de fosfato. Columna. Aquí va a ser educación, logo coma, SRC, colon, punto de educación SVG. Déjame mostrarte rápidamente. Heroína a los activos. Y aquí está el currículum. Entonces esta es la educación como Vg por aquí. De acuerdo, por separado al coma. Y por aquí, vamos a tener la palabra historia. Aquí, es. Tan mismo cosa. Tenemos que tener una coma de columna de etiqueta, y luego tenemos el logo, SRC coelom. Entonces vamos a tener dash, historia, dot SVG. Éstas ciertamente implicarán repetición. Entonces sólo tengo que adelantar rápidamente el video. Está bien, Ahora ya terminé con ello. También. Solo tienes que pausar el video al final y completado. Todo es igual. Todo lo que tienes que hacer es cambiar la etiqueta y el SVG, ¿no? Por lo tanto, la línea menor que es declarar datos estáticos para la barra de progreso de habilidad. Entonces todo es el mismo proceso. Aquí vamos a tener habilidades de programación, detalles. La Escala de Otoño. Vamos a sacar una salida. Tenemos coma JavaScript y después le damos un porcentaje de calificación. Entonces para mí, mi capacidad en JavaScript es hasta 85 por ciento libre de cuota para especificar tu capacidad por aquí, separada con un duplicado de coma. Y por aquí tenemos que cambiar la escala para reaccionar JS. El índice y porcentaje de mi React js va a ser. Dejémoslo a 85 también. Y también, estos efectivamente implicarán la repetición. Entonces sólo tengo que adelantar rápidamente el video. Está bien, ya terminé con ello. Entonces todo lo que tienes que hacer es reemplazar la habilidad y la tasa en porcentaje. Entonces hazlo por otras habilidades que hayas atrapado y luego lo vas a tener bien. Ahora de una línea anidada es declarar datos estáticos para mostrar la información es sobre el trabajo del proyecto. Entonces aquí voy a hacer detalles de protesta const. Y como pueden ver, estoy usando la palabra pleura al escalador. Entonces aquí vamos a tener un título. Déjame mostrarte. Aquí está el proyecto, y luego aquí están los detalles. Entonces vamos a tener un título. Entonces aquí vamos a tener una columna de título. Entonces voy a hacer pasar la página web del portafolio. Coma. Entonces tenemos la duración. El tiempo de duración. Déjame mostrarte. Aquí está la duración. Ahora tenemos que hacer uso de la firma sí. Entonces sólo voy a hacer 2020 a 2021. Disculpe, eso debería ser un colon aquí, separado con una coma. Y luego aquí vamos a hacer la columna de descripción. Regresa y vamos a copiar la descripción. En medio del juzgado separado con una coma y para el subtítulo. Entonces aquí vamos a incluir otro proyecto. Puedes ver tenemos una tienda, la web de e-commerce. Hola, voy a hacer ahora mismo, es duplicar este código dos veces. De acuerdo, entonces todo lo que tienes que hacer es arreglar en el proyecto en el que has trabajado aquí. A lo mejor has trabajado en cualquier proyecto. Este debería ser el título del proyecto, esa deuda Tú iniciaste el proyecto y luego la fecha de fin del proyecto. Entonces aquí debes hablar de un proyecto que es la descripción y aquí está el subtítulo. Y lo mismo aplicable a todo este tipo de yo aquí. Éstas ciertamente implicarán repetición. Entonces sólo tengo que adelantar rápidamente el video. Tan mismo que hice aquí. Incluyo los proyectos en los que he trabajado, una fecha en la que inicié el proyecto y la fecha de finalización, la descripción y el subtítulo. Eso es exactamente lo que hice aquí. Y también puedes publicar un video al final y escribir el mío si así lo deseas. Se detallan los datos estáticos para el resto de la región. Entonces aquí voy a hacer const, retomar detalles. Aquí vamos a tener un div, darle un nombre de clase de currículum, guión de pantalla, contenedor, y tenemos que dar la clave. Entonces si escucho, tenemos que hacer que los componentes menores sean razonables. Currículum, rumbo, más cerca con una etiqueta de autocierre. Y aquí tiene un atributo llamado encabezamiento. Entonces vamos a darle un valor a este atributo. Sólo tengo que copiar estos, pegarlo entre la doble cita. Y también de este componente se tiene otro subtítulo de atributo. A modo de subpartida, es éste. Justo después de la copia? Te dije que esto va a llevar un rato porque vamos a hacer todo desde cero. Y tenemos del atributo ID. Entonces déjenme decir que no puedo ingresar a la universidad en 214. Después me convertí en egresados en digo hasta la fecha al 18. Por lo que puedes hacer cualquier cosa aquí como le plazca. Escribes algo aquí. Yo sólo voy a copiar este código por aquí, copiar, ven aquí, pega. Y entonces tenemos que cambiar los valores. Entonces aquí tenemos sobre la educación. Esta es otra clase de certificado. Por aquí tenemos el Servicio Nacional de la Juventud. Entonces todas estas son mis certificaciones. Por lo que hay que reemplazarlo por héroes. Y aquí. Y aquí va a ser 2019 a 2020. Así que resalta, duplicarlo una vez más. Y luego aquí tenemos la preparatoria. Entonces creo que todo el mundo debería tener estos. El bachillerato al que asististe, el nombre de la más alta cool por aquí. Y también tenemos que implementar estos para el trabajo como periodos. Entonces ven aquí. Además de una coma aquí al final de este nombre de clase div de cierre, contenedor de pantalla de reanudación. Entonces aquí vamos a tener un div con el nombre de la clase. A pesar de que va a tener el mismo nombre de clase. El nombre de la clase va a ser el mismo, sí tiene una copia estos de aquí, ven aquí, y luego pega. Ahora, cierra el div. Y aquí tenemos que cambiar la clave. Qué dash S periodos. Entonces probablemente va a ser lo mismo. Ahora, solo tengo que copiar este componente reutilizable. Ven aquí, pegarlo por aquí, vuelve al navegador. Historia del rock. Por lo que aquí debe ser el nombre de la empresa para la que está trabajando actualmente. Copia. Ven aquí en el rubro y subpartida. Copiar pegar. Ahora, es necesario indicar si actualmente se encuentra trabajando en esa empresa. Entonces tal vez me contrataron el año 2020 y luego aquí t correctamente o trabajando en esa misma empresa. Por lo que sólo voy a indicar presentar un portafolio muy clásico con el que estamos tratando. Ahora vamos a tener esa descripción. Entonces aquí vamos a tener un div, dar el nombre de clase de la descripción de la experiencia. Y por aquí vamos a tener una etiqueta span, dar el nombre de la clase española de currículum dash, pruebas de dash, justo entre esas etiquetas de libra. Ven aquí. Entonces aquí sólo tengo que copiar la primera línea colocada. Entonces para aquí, vamos a tener otro div con el nombre de clase de descripción experimentada, la ortografía de la experiencia. Entonces creo que esto no está bien deletreado. Entonces. Está bien. Entonces aquí mismo vamos a tener un lapso con el nombre de clase de prueba de descripción de currículum, guión, prueba. Y aquí tenemos que volver a través de los sitios web, que es la página de demostración. Y luego copiar estas dos líneas por aquí. Pega por aquí. ¿Todo bien? Y aquí sólo tengo que indicar con un guión. Completamente, esto es opcional. Justo después de esta etiqueta de libra. Vamos a tener un descanso. Y aquí vamos a tener otra ficha. Entonces sólo tengo que copiar esto simplemente porque es exactamente lo mismo. Hermosa. Ven a la demo del sitio web. Copia estas líneas. Ven aquí, pegarlo. Entonces, por último, vamos a tener un pensamiento deberíamos usar las etiquetas de autocierre para estos. También necesitamos una etiqueta span. Copia esto, ven aquí, pega. Vuelve atrás. Aquí. Tenemos que copiar la última línea, así y hueso. Estamos bien para ir. Tomemos un descanso aquí y continuemos en la próxima conferencia. Cuídate. 30. Preparar el Resume datos estáticos 2 2: Sigamos con los datos estáticos justo después de este div de cierre, nombre de clase, descripción experimentada. Entonces coloca una coma aquí. Tenemos que procesar los datos para el programa es que vamos a tener un nombre de clase. Démosle una llave. Entonces voy a llamar a las habilidades clave de programación a los detalles de la habilidad de programación. Déjame mostrarte la pata, arriba, aquí arriba. Entonces sólo tengo que copiar aquí abajo. Vamos a hacer programación DDOS dot. Ahora vamos a tener un div, dale un nombre de clase de padre de habilidad. Habilidad esquivar. Dale una llave, dale una llave. Índice. Cierra el dv. Muy bien, ahora vamos a tener otro div con el nombre de clase de rumbo bala. Y también aquí, no tenemos ni media etiqueta span aquí para mostrar. Entonces lo voy a hacer es Q dot skill. Necesitamos un div aquí. Q dash. Por favor, ten siempre cuidado las ortografías de los nombres de las clases. Tan importante. Entonces vamos a aplicar aquí algunos inlines, toallas. Voy a hacer estrella. Q dot escrito presentado. Dale a este div un nombre de clase de dash. Línea es los proyectos. Por lo que tenemos que mapear a través del proyecto para que se muestre en pantalla. Coloca una coma aquí justo después del div de cierre de ClassName. Reanuda contenedor reina. Dale un nombre de clase de un contenedor de pantalla de currículum, y dale una clave. Por lo que aquí tenemos que mapear a través de los detalles del proyecto. Detalles mapa de puntos. Ahora tenemos que rentar ese componente menor reutilizable. Dale una llave. Este componente tiene un atributo llamado encabezado. Entonces voy a hacer detalles punto, título, detalles del proyecto punto, punto, punto. Entonces más una coma aquí a menos que lo haga por último por el interés. ¿ Verdad? Por lo que parece que los nombres de las clases son los mismos. Sólo tengo que copiar, pegar. Cambia la clave para identificar de manera única todas las paradas. Por lo que tenemos que rentar el componente reutilizable también. Y aquí, déjame mostrarte por los intereses. Sólo tenemos el rubro y la descripción. Y anteriormente, el que hicimos fue por los detalles del proyecto. Por supuesto que tenemos la descripción del subepígrafe del indecible. Déjame mostrarte. ¿Se puede ver la descripción del subencabezamiento de la hasta la fecha? Nuestros derechos. Entonces ahora alguien está luchando conmigo y me gusta. Entonces aquí vamos a tener el rubro, asignarle un valor tal como lo tenemos aquí. Entonces el nido es la descripción. Copiar estos, pegarlo entre la cita. Hermosa. Por lo que ahora solo tengo que destacar los terceros componentes reutilizables. Duplicarlo dos veces o copiar y pegar dos veces. Entonces por aquí solo tienes que cambiar el encabezado y la descripción. El rubro y la descripción. De acuerdo, así que déjame adelantar rápidamente el video y hacerlo al final. Tienen razón, guapa, no lo hacen. Así que asegúrate de cambiar. Por aquí la cabeza y se puede ver música, cualquiera que sea la música que te gusta escuchar. Y luego, sí. Entonces aquí, juegos competitivos pueden hablar de ese juego. Tú más amas, así como lo tienes por aquí. Entonces también, podemos copiar de estos y copiar de éstos así. Sí. Está bien. Entonces nos vemos en la próxima conferencia. 31. Crear las Ui y las funciones para mostrar los datos de currículum en la pantalla: Entonces ahora finalicemos el componente original. Pero antes de proceder, tenemos que hacer esto. Está bien, así que me di cuenta que estos vinieron en la necesidad los códigos, solo tengo que cortar estos fuera de este lugar. Ven a la cima de un aquí, pégalo aquí. Correcto. Ahora, desplácese hacia abajo. Ahora tenemos que definir una función para el Caruso. Y voy a llamarlo, vamos a tener una variable de altura establecida. Vamos a nuevos Kouros offset, abrir y cerrar corchetes rizados. Y luego tenemos que darle una columna de estilo, abrir y cerrar corchetes rizados. Aquí, vamos a tener una transformación. Después traduce Y, que es qué, un eje y. Ahora, abre y cierra los corchetes. Y por aquí vamos a tener esa doble cotización. Entonces ahora vamos a hacer compensaciones de carrusel de set. Aquí vamos a llevarnos un nuevo Caruso. Y aquí vamos a establecer selecto al índice de viñetas, luego recogiendo índice justo en tu teléfono. Guardar. Ahora terminamos con la función de carrusel. Para que se llame a esta función, tenemos que habilitar el onclick. Por aquí. Vamos a tener una función. Por lo que sólo tenemos que mapear a través de las balas de curriculum vitae. Te estoy mostrando en la parte superior aquí en una región balas coma k y aquí los iconos en la etiqueta. El ícono en la etiqueta. Entonces sí. Está bien, Así que estamos bien aquí es todo. Ahora voy a hacer balas originales. Mapa de puntos. Por supuesto que a estas alturas deberías estar muy familiarizado con el mapa. Ponlo a nuestra función y por aquí, abra y cierre los corchetes. Entonces aquí vamos a tener un div y especificar el onclick. Y aquí vamos a invocar el mango kairos, nuestra función. Ahora dale un nombre de clase. Ahora tenemos que condicionar el nombre de la clase para habilitar estilizar el bote seleccionado. Entonces soy menos tiempo el código y déjame mostrarte. Ahora voy a hacer si índice, bala seleccionada, índice. Y vamos a mostrar este nombre de clase seleccionado dash, bullet. Y vamos a mostrar bala 90. Entonces básicamente, déjame mostrarte, por ejemplo, la educación no es click y entonces no está seleccionada. Por lo que ahora cuando haga clic en la educación, van a ver que el color de la fuente se va a convertir en blanco. Se puede ver estos es como resultado de la declaración condicional para estilizar las estufas en función de la condición. Muy bien, Así que ahora aquí la condición no es click, así que lo vas a ver, nuestro historial de trabajo en él, una especie de fuente oscura. Entonces cuando haga clic en él, te darás cuenta de que una fuente en realidad se ha vuelto blanca. Los datos más simples. Por lo que significa que cuando el índice es igual a índice de bala seleccionado, tenemos que estilizar esta clase para que los teléfonos sean blancos. Y la línea es darle una llave. Entonces aquí vamos a tener una etiqueta IMG con el nombre de la clase, guión de balas, logo, menos cerca con una etiqueta de autocierre. Src, abrir y cerrar los corchetes rizados. Y tenemos que requerir la E hizo todo el icono tipo de decir requieren espacio, abrir y cerrar corchetes. Y entonces tenemos que apuntar al paquete de activos. Squash, currículum. Aquí, abre y cierra el soporte rizado, las balas, el punto, el logotipo, SRC, y la conexión a internet art. Entonces esto significa que si la imagen no se muestra, vamos a mostrar esta prueba. Ahora pasemos a la región T2 es tenerla exhibida en pantalla. Vamos a tener una función para eso. Aquí mismo. Vamos a tener una función consigue pantallas de currículum, darle un nombre de clase de un currículum, dash, detalles, dash, flechas arriba. Y aquí tenemos dos verdaderos detalles. Detalles, dot save. Después del componente de encabezado de pantalla. Vamos a tener un div con el nombre de clase de currículum dash. Y aquí otro nombre de clase div, reanudar dash, balas, balas, contenedor, bala, icono, esto. Y vamos a tener una IV, dale un nombre de clase de balas. Ahora no tenemos info que obtengan función bala de S para guardar, ¿verdad? Ya que todo está bien. Y por último, después del div de cierre, ClassName razón bool it. Vamos a tener otro div con el nombre de clase de dodge, balas, detalles de dash. Tenemos que invocar que se den las pantallas de reanudación función S para guardar. Vuelve al navegador y vamos a comprobarlo. Recargar. No se devolvió nada de render. Esto generalmente significa que una declaración de retorno está acelerando. Vamos a ver cuál es el problema. Echemos un vistazo a los datos estáticos. Por aquí en el componente reutilizable. Chicos K. Echa un vistazo. Ahora aquí está. No es un bien deletreado lo siento tanto . Eso es corrección. Tenemos que devolver la UI. Y ahí es donde radica el problema. Por lo que ahora solo voy a destacar estos cortes extra pegados aquí. Sólo tienes que limpiar el punto y coma. Con días será acertado Comando S para ahorrar. Vuelve al navegador y echa un vistazo. Desplácese hacia abajo. Este es exactamente el resultado que estamos esperando de esta conferencia. Por lo que en la próxima conferencia, comenzaremos a estilizar esta aplicación. Y en efecto, se va a quedar extremadamente hermosa. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 32. Styling los componentes de Resume: Empecemos a estilizar su componente de currículum. Y como se puede ver en la pantalla, no hay espacio para diferenciar entre el componente escrito y el componente. Aquí está el componente medio. Aquí está el componente original. Otra cosa en la que quiero que te concentres por aquí. Basta con echar un vistazo al lado izquierdo de la pantalla. Se puede ver los iconos no están apareciendo, que son los SVG para la educación, la historia del rock, las habilidades de programación, y el resto del día. Entonces tenemos que conseguir que todas estas cosas estén arregladas en esta conferencia. Código Harold a VS a menos que proceda. Arruinarse. Aquí, ¿lo es? Ahora siempre que requieras una imagen de un paquete, tienes que venir aquí y luego hacer dot default. Creo que ya te lo he dicho en la conferencia anterior. Entonces, a mi propia opinión, esto podría ser un tema con la versión. Y por cierto, esa es mi propia opinión. Por lo que Garza para leerlos CSS y menos proceder. Empezaremos con el contenedor motivo. Por lo que voy a hacer dot resume contenedor. Déjame mostrarte rápidamente. Aquí en turismo JS. Desplácese hacia abajo. Y aquí está. ¿Todo bien? Vamos a tener un flex de pantalla. Y realmente hemos estado haciendo estos fósiles UNC. Y creo que ahora es bueno explicar exactamente qué hace esto. Cuando un contenedor está configurado para mostrar flex, expande los elementos para llenar el espacio disponible o reducirlos para evitar el desbordamiento. Es tan simple como eso. Ahora alineemos los artículos al centro. El sentido flex. Columna. Justificar centro de contenidos. El estatura media. Hagamos que se ajuste a contenidos. El margen, 120 píxeles. Para ver los efectos en la pantalla, tenemos que vincular su currículum con el archivo CSS. Por lo que la cabeza en turismo GAS, arruinar lava aquí tenemos que importar régimen dot css, guardarla en el navegador. Poco a poco las cuotas están tomando forma. Razón CSS. Y por aquí tenemos que estilizar la tarjeta. El carnet va a servir como contenedor donde se va a sentar la información de arresto. Vamos a tener un flex de pantalla. Dale una altura de física, los píxeles de ancho de 10 a 100 píxeles. Guárdala en el navegador. ¿ Ya puedes ver? Entonces vamos a darle a esto un color de fondo para que veas de qué estoy hablando. Esto es sólo por claridad. Color de fondo. Hagámoslo tomate. Guardar. Vuelve al navegador. Ahora, puedes ver, por lo que esto ahorrará como contenedor para el resto de los artículos. Y ahora los iconos por aquí. Cuando me quito el color de fondo, el pelo en el navegador. Puedes ver ahora parece que el ícono no es de alguna manera simplemente porque el fondo es blanco y el ícono en sí es blanco. Procedamos. El motivo por el que los booleanos , región punto, dash, balas. Vamos a darle una altura del 100%. El cuadro de sombra, 15 píxeles. Hay nueve píxeles por 15 píxeles, y el color de la sombra de caja en f, 2 a 3, cinco, la guarda en el navegador. Y aquí está la sombra de caja. Ahora vamos a especificar el ancho y hacer todo limpio. Con tantos niños, 30, 20 píxeles, guárdela en el navegador. Y aquí está. Se puede ver el mensaje M line es la razón por la que los detalles de las balas. Entonces creo que sí tiene dos aspectos destacados. Agarra, ven aquí, pega, cierra los soportes rizados. Todo lo que necesitamos hacer son detalles. Y por favor siempre partido de una clase los nombres son soldaduras, Paltz, el flex crecen. Especifique uno por aquí. El ancho. Este debe ser un 100 píxeles. Desbordamiento, calefacción y el relleno. 0, 0. Seguro. Nuevamente, dirígete al navegador y hazlo nublar. Ahora para la descripción de la experiencia, experiencia de punto, guión, descripción. Ten en cuenta que los hechizos son correctos. Vamos a tener el margen. Diez píxeles de arriba. 0 en el resto de los lados. Alinear. Justificar, especificar el ancho máximo, 100%. ¿ Verdad? Entonces por la razón detalla El Cairo en ella en el navegador y déjame mostrarte. Ahora, haga clic en cualquiera de la etiqueta. Se van a reventar los detalles corresponsales. Entonces probémoslo en la historia del trabajo. ¿ Ves eso? Habilidades de programación, proyectos, educación? De acuerdo, aunque está apareciendo bien, pero esto no es como se esperaba. aquí a VS Código dot currículum, detalles de guión. Dodge. Las reglas de autos son cuando se hace clic en cualquiera de la etiqueta. Queremos que sea desplazarse a cada detalle correspondiente. Entonces voy a hacer transición, transformarme. Hagámoslo seguro. Heroína al navegador. Y ahora tenemos que recargar aquí sobre la historia laboral. ¿ Viste que eso es hermoso? A mí me gusta. Proyectos educación. Y ahora quiero mostrarles algo con interés. ¿ Puedes ver que hay un espacio vacío por aquí? No te preocupes. A medida que procedemos a estilizar este componente, todo va a aparecer como se esperaba aquíen al código VS. Desplácese hacia abajo. Y ahora para el contenedor bullet, dot dash container, vamos a tener que mostrar flex, alinear elementos al centro. Démosle una altura, 101%, 100%. ¿ Qué hace de nuevo, el relativo de la posición, la guarda en el navegador. Ahora, todo en el contenedor de bala es estilo en línea como las balas. Las viñetas especifican el ancho del 80 por ciento, también la posición, relativa. Y el índice Z. Por la bala misma. Es decir, todas estas etiquetas, incluyendo a los economistas puntean balas. Vamos a tener un flex de pantalla. Alinear elementos al centro. El color de fondo. El color de fondo es correcto. Espero que estés familiarizado con este color. Dada la altura de 40 píxeles. Margen, a 15 píxeles de arriba. El derecho, Sarah pixels, relleno, 0 pixels. Disculpe, se trata de ocho píxeles. Borde-radio. Un radio de borde va a ser de 20 píxeles. El ancho 30 píxeles. Transición. Guárdela en el navegador, y aquí están los resultados. Todo bonito. Ahora, puedes ver lo que he enfocado mi ratón en las etiquetas que quería mostrar un puntero. Entonces voy a hacer Guardar de nuevo, cabeza al navegador. Ahora echa un vistazo. Ves eso son lo correcto. A continuación están las balas etiquetadas. Dash de balas, etiqueta. El tamaño de la fuente. 14 píxeles. El espacio en blanco arriba. El font-family, semi bowl. Echa un vistazo en el navegador. Ya ves, ¿puedes ver que todo está tomando forma trimestral? El nido es el logo de las pullets. Vamos a dar los 16 píxeles altos, margen. 0 píxeles mezquinos, heroína al navegador. Ahora puedes ver que los logotipos están bien espaciados. Se puede ver, ya sabes, ahora por los iconos de las viñetas, las balas de punto , el guión, puedo darle un ancho de 34 píxeles. Altura, 100%. Z índice 1. Vamos a darle un color de fondo. Como de costumbre, color de fondo. Vamos a sacarlo en el navegador. ¿ Se puede ver ahora este bar de aquí? Pero queremos los logotipos dos asientos justo aquí. Entonces para eso, vamos a tener una posición. Hagámoslo absoluto. Guárdala en el navegador. Hermoso, me gusta aquí en la parte superior VS Code. Y para el ícono de bala. Ahora por las balas seleccionadas, déjenme mostrarles que no tienen GAS de turismo y aquí abajo en la función. Está bien, Así que aquí está. Acabamos de estilizar la bala y vamos a estilizar también la bala seleccionada. Entonces déjame mostrarte cuando se hace clic en cualquiera de la etiqueta. Queremos que se resalte. No han surgido CSS. Y oye, voy a hacer puntar las balas de esquivar seleccionadas. Sólo tenemos que especificar el color. Hagámoslo blanco. El ancho. 100% seguro. Hermosa. Ahora da click en Proyecto DOC, historia del rock, educación. ¿ Verdad? Procedamos con el contenedor de pantalla. Entonces ahora después de ese interés oculto, déjame mostrarle que puedes ver esto? Tenemos que solucionar este problema. Dash de puntos, contenedor de salpicadero. Vamos a tener un flex de pantalla. Y la dirección flex. Colón. JUSTIFICAR contenido. Espacio uniformemente. Dale una altura. 360 pixeles. Dale un ancho. 100%. Seguro. Ella en el navegador. Ahora puedes ver que todo está bien en la tarjeta como se sospecha? Heroína a VS Código. Desplácese hacia arriba. Ahora vamos a especificar el color de fondo de este catálogo más tiempo. Nada está saliendo del auto. Todo está bien en la caja fuerte. Desplazarse hacia abajo hasta menos que línea es la razón por la que el guión de la región de cabeza, reanudando rumbo. Dash, guión rumbo. Rápidamente, tan feliz de posicionar relativo. Es así como visualizamos flex. JUSTIFICAR contenido. espacio entre línea es la cabeza y los booleanos. Dirigido, guión, bala. Darle un puesto. Absoluto, izquierdo menos 30 pixels. El alto y el ancho, 15 píxeles. Top es de 50 píxeles. Especifiquemos el color de fondo. Y esta vez lo vamos a hacer naranja. Guarda eso en el navegador y vamos a sobresalir. Entonces aquí están las balas sacadas sobre la historia laboral. Y aquí la línea sólida es para hacerlo bastante simple, por lo que sólo hay que hacer fronterizo radio. Que sea 50 por ciento. Vuelve al navegador y escucha la evidencia aparece muy bien. La línea MSDN es la razón por lo que decapitación, dot dash, dash, head. Y siempre asegúrate de que los nombres de tus clases estén bien deletreados. A tamaño de fuente, 14 píxeles. El curso font-family ya debes conocer, amapolas, semi Boulder, el color de la fuente. Entonces dialicemos la razón descripción del encabezado, dot dash, dash, descripción. Basta con especificar el tamaño extraño de los píxeles. Alinear, justificar tomar forma. Muy bien, entonces la línea es la fecha de un aquí, que es la duración. ¿ Se puede ver en el borde derecho de la pantalla? Destacemos ese punto semanal, rumbo, guión, fecha, ¿verdad? Entonces, um, especifiquemos el color de fondo. Por supuesto, vamos a hacer que sea naranja oscuro. Copiar, pegarlo aquí. Dale una fiesta. El tamaño del teléfono. Debe ser de 14 píxeles. Vamos a darle un radio de borde como 14 píxeles. Y por último, queremos que el color, que es el color de la fuente, sea blanco. Remanso seguro para el navegador. Y aquí la hermosa cabeza sobre código VS. Entonces comencemos a estilizar la sección de habilidades, que es este q bar dot, habilidad dash parent. Hagámoslo display flex. Y la columna de dirección flex. Para tenemos 50 por ciento. Ahora para el programa en contenedor de acero, contenedor habilidad de programación, hagámoslo display flex. Y la dirección flex va a estar equivocada. Alinear elementos al centro. JUSTIFICAR contenido. Espacio entre el flex wrap up. ¿ Cuál es el porcentaje de habilidad? Dot habilidad dash. Entonces esto va a mostrar la fuerza de tus habilidades de programación. Ahora, vamos a hacer posición. Hagámoslo relativo. Dale una altura de 15 píxeles, 70 por ciento. Y por supuesto, tenemos que especificar el color de fondo, así que solo tengo que copiarlo desde aquí simplemente porque va a ser del mismo color. Guarda heroína en el navegador. ¿ Verdad? Entonces tenemos este complejo raro terminado, oye, ¿cuál podría ser el problema? De acuerdo, agárrate al código VS. ¿ Cuál es el problema? Vamos a revisar a todos los padres, todo fresco por aquí. El contenedor de habilidad de programación. Estos son nuestros amigos correctos. Hagamos estos dos para envolver, ¿verdad? Por lo que el flex wrap va a ser Rob tenía en VS Code. Y boom, todo como se esperaba para la barra de porcentaje activo. Entonces aquí voy a copiar estos. Pegar, cerrar el soporte rizado. Y por aquí, salpicadero de puntos, guión. Hagámoslo rápidamente. Por supuesto, la altura va a ser la misma. Yo sólo voy a copiar la transición de pasta. Y esta vez el color de fondo va a indicar tu habilidad. Entonces tenemos que precisar, hey, ¿es seguro? Hermosa. Ahora puedes ver que todo está funcionando como se esperaba? A mí me gusta que tuviera hasta VS Code. Y por último, para la etiqueta span, derecha, en la clase de padres de habilidad. Por lo que sí tiene que copiar estos. Ven aquí. Pegar, cerrar los corchetes rizados. Vamos a tener la etiqueta span, la font-family, el tamaño de fuente, 16 píxeles. Y el color va a ser naranja oscuro. El color de la fuente, naranja oscuro. Seguro. Muy bien, así que vamos a golpear en el navegador y ver el resultado final. Hermosa. Sacarlo en educación. Dentro de Qu, whack, historia, programación, habilidad, proyecto, interés. Todo está funcionando como espectador y me gusta. Entonces cuando lo revises en plataforma móvil, te darás cuenta de que no responde. ¿ Se puede ver el Moire? Esto se arreglaría en la próxima conferencia. Entonces esto es todo por ahora, para esta conferencia, nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 33. Resume: Muy bien, entonces ahora vamos a hacer componentes del currículum respondan. Heroína, por lo que VS Código. Empecemos con el iPad Pro. Estilo como tarjeta de currículum muy. Reanudar guión. Dale un ancho de 80 píxeles. Riendo por eso. Entonces, baja aquí. Ahora tenemos que estilizar los detalles originales de las viñetas. Radio de puntos, esquivar balas, detalles de salpicadura. Especificar el relleno. Correcto, así que terminamos. Y para el iPad Pro, ahora procedamos bajo arresto plataformas móviles. A medida que resaltan estos agarres Basado, cierra los corchetes rizados. Y aquí tenemos que especificar los píxeles para los teléfonos móviles. 1023 puntos reanuda el contenido como cómo visualizamos flex y la columna de dirección flex. Alinear artículos para enviar nidos para las balas. Balas. De acuerdo, entonces tenemos que colocar un punto aquí simplemente porque es un nombre de clase. Y las balas van a tener el tejido del 90 por ciento. Para la tarjeta regional. El estatura. Hagamos que se ajuste al contenido. Vamos a tener un flex de pantalla. Y la columna de dirección flex. El margen, 30 píxeles alinean elementos. Centro. Por supuesto que el ancho va a ser del 90 por ciento, así que lo voy a agarrar aquí. Ahora para los detalles de las balas de currículum, dot resume. Detalles de guión de bala. Dale una altura. 360 pixeles. Dale un ancho de Contenido de Ajuste. Especifique el relleno, 0. El motivo bala. Por supuesto, esto debe leerse las balas. Dale un ancho del 100%. Margen, 30 pixels, 0. Por último, para el punto bala seleccionado seleccionado balas de esquivar. Y vamos a darle un ancho del 100%. Entonces solo voy a destacar, agarrar, venir aquí, pegarlo. Está bien, Así que si estás siguiendo mi ventaja, definitivamente obtienes el mismo resultado conmigo. Guárdala en el navegador. Vamos a recargar. Entonces, sobresalir en plataformas móviles. Aquí está en el iPhone cinco. Marcar hacia abajo. Hermosa. ¿ Ahora puedes ver? Excelente. Está bien, vamos a sacarlo en el iPhone X. Perfect Guys. Vamos a arenar. En iPad Pro. Impresionante. Me encanta esto en iPad. Echa un vistazo. Y por último, menos sacados en iPhone 6, 7, y 8 Cláusula. Todo se ve bien como spectate. Entonces este es un repentinamente el resultado que estamos esperando de esta conferencia. Todo se ve bien y me gusta. Está bien, así que esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 34. Componente plano y Carousel de Owl: Bienvenidos de nuevo a los autos. Está bien. Empecemos a trabajar en el componente testimonial. Y al final, vamos a tener un testimonio muy bonito como este. Echa un vistazo. ¿Puedes ver eso? ¿ No es esto hermoso? Muy bien, así que empecemos rápido. Volver al código VS. Haga clic derecho en el bolsillo testimonial. Aquí está, haga clic derecho? Y ahora vamos a crear su componente correspondiente. Entonces aquí un nuevo archivo. Y esto se llamaría testimonial dot js. Vamos a crearlo archivo CSS correspondiente. Haga clic derecho en testimonial. Nuevo archivo. Testimonial dot css es hermoso. La siguiente línea es instalar el OWL Carol es 0. Por lo que ella a la terminal. Justo aquí en la terminal, estoy en el directorio raíz. Entonces, vamos al cliente. Por eso. Yo sólo voy a hacer cliente de CD. Y aquí voy a hacer npm install, React dash, dash cruiser. A proceder. Calor en la tecla Enter de tu teclado. Se encuentra en curso la instalación. Instalado, exitoso. El siguiente en línea es vincular este proyecto con jQuery. Factory podría ayudar a subir y copiar el script jQuery. Materiales. Podría ayudar a nuestro puntaje hacia abajo. Entonces aquí tenemos el script jQuery, resaltar, copiar. Volver al código VS. Ahora solo voy a buscar index.html. Prefiero buscarlo de esta manera. Por lo que realmente puedes configurarlo en el Explorador. Desplácese hacia abajo más allá del script jQuery por aquí. Guardar el proyecto. Después cierra el index.html, dirígete al testimonial, genera el componente funcional React js. Por lo que aquí importamos el Búho Caruso de React dodge OWL kairos. Volver al código, cómo poder más tiempo. Y aquí tenemos que copiar esta Importación. Copia. Por favor, no copie estos por aquí. Esto es sólo un titular y varios por qué he colocado que el comentario firme por aquí. Entonces no copie esta línea, ¿verdad? Estas son las líneas necesarias. Copia, vuelve al código VS y luego pega. Entonces vamos a importar el encabezado de pantalla, que es el componente reutilizable. Y por supuesto a estas alturas deberías saber hacer eso. Utilidades splash screen heading, splash screen heading GAS también es importar este crosshair viz a viz de utilidades choque. Y por aquí tenemos que importar también la animación es la siguiente en línea es implementar el tornillo liso y el efecto de desvanecimiento. Por lo tanto, sólo tengo que copiar eso de sobre mí. Entonces sólo lo voy a pegar. Hermosa. Habiendo hecho eso aquí en Steve, vamos a renderizar el encabezado de la pantalla. Y tiene atributos título. Aquí vamos a hacer testimonial. Y por supuesto tiene subpartida de atributo. Aquí vamos a hacer hacer aquí. Vamos a tener una sección con el nombre de clase de una sección testimonial. Sé que la mayoría de ustedes en realidad esperaban que fuera dv, nombre de clase de sección testimonial. Y aquí le vamos a dar una identificación, props dot ID. Por lo que esta función va a recogerla mejora segura. Ahora tenemos que sumar estos componentes pero la pantalla común P. Y luego me voy a poner para botines comunes. Y por aquí, vamos a importar testimonios de portafolio contenedor slash testimonial. Testimonial. Hermosa. Y ahora mismo sólo voy a duplicar este código. Aquí. Tenemos que cambiar el nombre a testimonial. Y aquí el componente es testimonial. Vuelve a la terminal y voy a hacer npm, arranca. Hermosa. Ahora tenemos un testimonio exhibido en la pantalla. Y aquí está el componente reutilizable. Atornilla a menos que la comprobación de la ninfa aparezca como navegación en la parte superior. Aquí mismo se puede ver así al dar click en este testimonial a los componentes testimoniales. Hermosa. Vuelve al Código VS. Ya no necesitamos las papas comunes. Ciérralo. Y además no necesitamos el sobre mí. Ciérralo. Entonces en este momento estamos en el testimonial JS. Entonces bien, en esta sección, vamos a tener un div con el nombre de clase del contenedor. Y bien, en este contenedor, vamos a tener otro div con el nombre de clase de fila y un derecho en este rol. Entonces tenemos que llamar al Búho Caruso. Entonces voy a hacer OWL y oye, ¿es hermoso? Entonces aquí vamos a dar el nombre de la clase para las flechas de guión azul. Y vamos a darle una identificación, testimonio ARF, guión testimonial, carrusel. Y aquí vamos a tener otro div con el nombre de clase de. Por lo que este es un nombre de clase Bootstrap, guión de columna, guión 12. Y aquí vamos a tener un div, darle un nombre de clase de este t dash items y escribir en la prueba el ítem. También vamos a tener un div con el nombre de clase de S T dash comment. Y aquí vamos a tener una etiqueta p. Esto es sólo por el trabajo correcto. ¿ Todo bien? Entonces justo en esta etiqueta p, ya tengo una escritura. Entonces sólo tengo que volver al código. Y aquí van a ver testimonio. Ahora sólo voy a copiar estas líneas de hey, ven aquí, pégalo. ¿ Verdad? Entonces vamos a formatear este código con bastante arriba clic derecho Formato documento con. ¿ Puedes ver eso? Increíble. Queremos que esto aparezca como una cotización. Entonces lo que voy a hacer ahora mismo es terminar este testimonio con una etiqueta I. Entonces podemos especificar el icono. Y aquí prefiero tener la etiqueta de autocierre. Entonces aquí vamos a tener un ClassName, una clase bootstrap de FASFA, dash, dash, left. Por lo que esto va a generar el icono de la cita izquierda. Ahora sólo tengo que copiar esto. Ven aquí, pega, cámbialo a corte justo después de la etiqueta p de cierre. Vamos a tener una etiqueta UL. ¿ Verdad? En esta etiqueta UL. Vamos a tener la etiqueta LI aquí mismo. Vamos a tener una etiqueta I. Ahora sólo queremos implementar la tasa y los iconos. Déjame mostrarte rápidamente. Por lo que sólo tengo que detener estos comandos C para detener el amino. De acuerdo, entonces esto es lo que queremos implementar. Los iconos de calificación por aquí. Y estas son las cotizaciones dobles que acabamos de implementar. Se puede ver así así es exactamente como va a aparecer el testimonio en la pantalla. Entonces por aquí, antes de proceder con más cosas, tenemos que mantener esta etiqueta UL, un nombre de clase, dash. Está bien, así que ahora centrémonos en las etiquetas I. Y aquí vamos a darle a esto un nombre de clase, guión FASFA. Por lo que también prefiero tener la etiqueta de autocierre. Ahora vamos a resaltar la etiqueta LI, copiarla y pegarla. Pégalo una y otra vez. Entonces aquí vamos a tener FASFA dy dash, Dash Out. De esta manera ofreciendo etiquetas LI y desplácese hacia abajo. Y aquí vamos a tener un div, dale un nombre de clase de clientes dash en otoño, ¿verdad? En la info del cliente. Vamos a tener la foto del cliente, el nombre, y la posición del cliente. Entonces para ello, tenemos que importar las fotos necesarias. Sé el pop-up, el explorador, replicon público aquí en Nueva carpeta. Y esto se llamaría IMG. Vuelve a la carpeta Materiales abierta. Y aquí está el testimonio, ¿no? En el paquete testimonial, tenemos todas las imágenes innecesarias que es relevante para el componente testimonial. Y aquí el ahora abre la cartera pro cliente SRC, ¿verdad? Tenemos que buscar al público. Y aquí está el IMG, que se creó hace unos segundos. Y entonces ahora tengo que volver, copiar todo este paquete, que es el testimonial. Pega justo dentro del IMG. Común V. Hermosa. Ciérrelo, ciérrelo. Vuelve al código VS, y luego vamos a comprobarlo. Aquí está el IMD. Haga clic para abrir, y luego aquí está el testimonio. Y todas estas son las fotos relevantes. Entonces aquí vamos a tener la etiqueta IMG, SRC. Tenemos que hacer referencia el bolsillo IMG slash clase testimonial. Ahora queremos hacer uso de esta foto. Tennessee. Por lo que el nombre es Lady dot PNG. Ahora, dale un impar sin conexión a internet. Las probabilidades se mostrarían en la pantalla cuando haya un problema al cargar la imagen. Guarda, vuelve al navegador y lo odia. Entonces ahora especifiquemos el nombre del cliente. Y lo que vamos a usar H5 para eso. Entonces voy a hacer que vean dominar. Ahora para el puesto. Vamos a usar una etiqueta p para eso. Entonces supongamos que esta señora es CEO. Voy a hacer CEO, global. Ahorra, echa un vistazo. Entonces aquí está el nombre del cliente. Y a continuación está la posición. Hermosa. El nido y la línea es duplicar este código tres veces. O puedes copiar y pegar tres veces es todo lo mismo. Entonces mírame como copio de un div con el nombre de clase de collage o 12. Tengo que dejártelo tan claro para que no te metas en problemas. Y este div, NCAA de las líneas 32, líneas 67. Así que mírame como destaque. Ahora, voy a mantener presionada la tecla Mayús y la tecla de flecha abajo de tu teclado. 3 veces 1, 2, 3. ¿ Y ahorra? Vuelve al navegador, recarga. ¿ Puedes ver esa carpeta? Por ahora? No vamos a ver en efecto de depósito simplemente porque no hemos implementado ese Caruso. Muy bien, así que terminamos con la UI. Y en la próxima conferencia, implementaremos los kairos. Te veré en la próxima conferencia. Mantente enfocado y cuídate. 35. Implementar el Carousel Testimonial utilizando el caro de búho de react: Está bien, entonces ahora vamos a trabajar en los kairos testimoniales. Y al final de esta conferencia, tendrán los testimonios desplazándose desde el borde derecho de la pantalla a la izquierda fuera de la pantalla. Empecemos rápidamente. Ella en el código VS. Por aquí. Antes de proceder, tenemos que hacer los cambios necesarios. Comando B para abrir el Explorador. Y luego déjame mostrarte por aquí el punto testimonial CSS. Cuando pasé por la conferencia anterior, me di cuenta de que los testimonios, CSS, no se deletreaban correctamente. Por lo que ahora sólo hay que hacer es hacer clic derecho en el CSS testimonial, y luego hacer clic en Cambiar nombre. Por aquí. Asegúrate de que lo que ves en la pantalla ahora sea un nivel igual con lo que tienes en tu código. Por lo que hay que hacer las correcciones necesarias. Anteriormente, había una por aquí. Déjame mostrarte así. Entonces todo lo que tienes que hacer es limpiar el OH, y luego calentar la tecla de retorno de tu teclado. Hermosa. Nido, desplácese hacia abajo. Déjame mostrarte. He agregado algunas imágenes del cliente. Entonces aquí está la lady dot PNG. Y cuando se baja al siguiente cliente, tengo a Mike dot PNG. Por lo que en realidad puedes cambiar todas estas imágenes. Y estas imágenes están aquí mismo en un paquete testimonial. B, desplácese a república. Aquí, IMG, y luego aquí está la lady dot PNG. Pg y Mike dot PNG. Está bien. Cierra ese testimonial JS. Tengo que volver a traer los tuyos. Desplácese hacia arriba. Ahora vamos a implementar las opciones de const carrusel y luego configurarlo en objetos vacíos. Y aquí vamos a tener el bucle para ser verdad. Por lo que podemos tener una repetición constante de los testimonios. Por margen. Hagámoslo 0 separado con una coma y luego nervio aquí mismo, puedes hacerlo verdadero o falso. Y emiten en límites, ¿verdad? Ilimitado fuera cómo Lewis de él pero para separarlo con una coma y luego puntos esta operaciones booleanas. Entonces hagámoslo cierto. Puedes desactivarlo al final configurándolo como falso. Reproducción automática. Lo queremos a través de una velocidad inteligente. Entonces, cuáles son las puertas de reproducción automática, cuando abres el navegador, que es el sitio web, no necesitas hacer clic en ningún botón para el testimonio empiece a desplazarse. Por lo que eso se va a hacer automáticamente. Versus la velocidad por la que esos testimonios se desplazarán desde el borde derecho de la pantalla a la izquierda fuera de la pantalla. Puedes decidir aumentar la velocidad y así, puedes decidir reducir la velocidad. Ahora, es hora de que sea sensible. Esos artículos, va a ser uno. Entonces solo tengo que resaltar y luego duplicarlo dos veces. Por aquí. No te preocupes, te voy a dar vuelta todas estas pestañas. Y aquí vamos a tener 768. Y por último vamos a tener 100 y displays queremos que sean tres. Entonces si escucho alguna pantalla dentro de 0 a 768 píxeles, el testimonia va a aparecer una columna y una fila, ¿verdad? En. En laptop, desktop, e iPad, va a aparecer en tres columnas. Y sólo dispositivos más pequeños como el iPhone o Samsung, va a aparecer solo un colon, ¿verdad? Sí, así que eso es exactamente lo que hicimos aquí. Ahorra, desplázate hacia abajo hasta donde tengas el Búho Caruso. Ahora aquí voy a hacer abrir y cerrar corchete rizado. Ahora tenemos que tomar en las acciones op. Guarda, vuelve al navegador y vamos a comprobarlo. Puedes ver eso es lo bonito que me gusta. Ahora tenemos el desplazamiento testimonial desde el borde derecho de la pantalla a la izquierda fuera de la pantalla. Muy bien, así que esto es a menudo para esta conferencia. Y en la próxima conferencia comenzaremos a estilizar este continente y luego todo va a quedar bien. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 36. Componente testimonial de estilo: Está bien. Entonces, empecemos a estilizar el componente testimonial. Heroína a VS Código. Abre el CSS testimonial. Y aquí está. Cierra el comando Explorer B. Justo aquí. Vamos a empezar con la sección testimonial. Sección testimonial. Y el relleno. Van a ser 80 pixeles. Son 80 píxeles. El URL de la imagen de fondo. Y si escucho, tenemos que importar la imagen que queremos usar para el fondo. Ahora, abre la carpeta de materiales. Sí tiene que dirigirse a un escritorio donde se encuentra en mi extremo. Aquí abajo está los materiales, n, aquí está el testimonial o se ha abierto la cartera pro cliente SRC activos. Entonces sólo voy a arrastrar esto a un lado. Vuelve atrás. Entonces lo voy a hacer es copiar todo el bolsillo. Copia. Ven aquí justo en los activos. Sólo voy a pegar, cerrarlo, cerrarlo, luego dirigirme a VS Code. Cotización doble por aquí. Tenemos que avanzar un paso adelante para calentar el SRC. Src slash activos. Testimonial. N. Aquí está la imagen de fondo. Bitty dash un punto JPEG. El cargo de fondo. Hagámoslo centro. El adjunto de antecedentes. Vamos a tenerlo arreglado. Y la posición. Hagamos que se relacione. Nos vemos. Y para el índice z, índice Z dash, hagámoslo menos uno. Guardar. Vuelve al testimonial JS y menos lo vincula con el archivo CSS. Desplácese hasta la parte superior. Y por aquí sólo voy a hacer importación testimonial dot css, guardarla en el navegador y vamos a comprobarlo. Recargar. ¿Verdad? De acuerdo, así que aquí está el fondo. Entonces cuando me desplace a la parte superior, vas a ver que el fondo se está arreglando a la pantalla. ¿ Ves el fondo no se mueve. No está cambiando simplemente porque tenemos el apego de fondo que se va a arreglar. Ahora, ¿ves bien, cierto? Estamos en nido CSS testimonial. Tenemos que hacer la sección testimonial antes. Entonces sólo voy a copiar estos. Pegar, cerrar los corchetes rizados. Y aquí vamos a tener doble colon antes. Y aquí vamos a tener el contenido para estar vacíos. Y la posición absoluta. El izquierdo 0, el top 0, el ancho, 100%, la altura, 100%, el índice Z. Entonces sólo voy a tener esto copiado porque es exactamente el mismo equipo. El opacidad no tendrá el 0 de Harvard, es cinco. Ahora vamos a tener el color de fondo para ser. De acuerdo, Así que sálvala en el navegador y vamos a comprobarlo. Qué bonitos son, ¿verdad? Entonces cuando lo veas de cerca, te darás cuenta de que la imagen de fondo ahora es transparente simplemente porque hemos colocado otra barra grand encima de ella y luego especificamos la opacidad. Déjame mostrarte rápidamente. Tenía en VS Code y aquí es lo que lo hizo transparente, ¿verdad? Entonces cuando reduzca la opacidad a 0.5, guarde, vuelva aquí. ¿Puedes ver? Ahora se vuelve más transparente. Entonces creo que nuestro punto cero 85 sería genial para eso. Entonces se puede especificar en un valor de una elección, ¿es esa forma letal? Te gusta ¿verdad? Ahora vamos a estilizar son los puntos FUTA, foo dot, dash image. Con 100%. El estatura por supuesto, va a ser del 100%, Así que sólo tengo que copiarlo desde aquí. Y el máximo tenemos 1920 píxeles. Desbordamiento, calefacción. Vamos a tener que mostrar flex, justificar contenidos. Supongo que ya sabes, centro. Y luego la parte superior del margen. Nosotros lo queremos Manoj, uno no cero píxeles. Guardar. Vamos a sacarlo en el navegador. Desplácese hacia abajo. Ahora se puede ver que la curva por aquí en realidad está apareciendo pero no como espectador. Entonces no te preocupes, conforme procedemos a estilizar este componente, vamos a tener todo perfectamente bien. Está bien, así que vuelve aquí. Ahora vamos a hacer por la imagen IMG. Ahora vamos a tener el ancho máximo, 100%. Y la altura a los píxeles. Regresa y vamos a echar un vistazo una vez más. ¿ Puedes ver eso? ¿ Hermosa? A mí me gusta. Ahora tenemos los resultados esperados desde el horizonte de tiempo completo. Procedamos con el carrusel. Y aquí tenemos que estilizar que pone a prueba el ITA. Entonces sólo tengo que copiar esto. Vuelve aquí, y luego pega punto dash item. Dale un color de fondo. Hagámoslo blanco. Acolado, 30 pixeles. Guárdala en el navegador. Está bien, Esto se ve bien, pero tenemos que hacerlo beta. Ahora vuelve al código VS. Ahora tenemos que dar el rumbo de radio fronterizo. Queremos que este borde de un cabello sea un poco curvilíneo. Entonces ahora voy a hacer el radio fronterizo. 50 píxeles desde arriba, 50 píxeles desde la derecha, 50 píxeles desde la parte inferior. Y luego queríamos 0 píxeles de abajo a la izquierda. Guardar, volver al navegador y vamos a ver. Muy bien, así que ahora hemos aplicado el radio a todas las esquinas excepto a la esquina inferior izquierda. Y cuando lo mires de cerca, te darás cuenta de que el borde es muy afilado. Y en cuanto al resto de las esquinas, eso urge nuestra propia curva ahora mismo para la etiqueta p justo dentro de un equipo de prueba. Entonces solo voy a resaltar esta copia, bajar, pegar, cerrar los corchetes rizados. Y luego queremos estilizar la etiqueta p. Y por supuesto siempre puedes hacer referencia a ese JS testimonial si no estás seguro de los nombres de las clases. Ahora para el tamaño de fuente, 16 píxeles, altura de línea, 26 píxeles. los teléfonos nos comemos un 100, por lo que esto hará su garrapata aeróbica. Y bordo. El margen. Margen, vamos a tener esos errores diez píxeles. Y para el pueblo de teléfonos, queremos que aparezca en cursiva. Sálvala, ¿verdad? De acuerdo, Ahora puedes ver ahora la fuente aparece inclinada por estos. Está bien. Entonces lo siguiente en línea es estilizar la cotización. Ahora solo voy a copiar esta columna aquí mismo. Pegar, cerrar con el soporte rizado. Y luego voy a hacer punto, FA, dash, dash, left. No tenemos mucho que hacer aquí, sólo la derecha marginal. Hagámoslo cinco píxeles. Y el color del icono del ojo, que es la cita en sí. Tan menos el Comodoro de Mickey. Y luego antes de proceder, se supone que esto queda. Entonces lo siento por eso. Verdaderamente un error tipográfico. Ahorra, ven aquí. Ahora bien, la cotización que queda está en buena forma. Por lo que sólo tengo que destacar honorarios y duplicados. Entonces aquí tenemos que cambiarlo para cotizar, ¿no? Por lo que el color sigue siendo el mismo. Y aquí va a ser margin-izquierda. K. Ahora bien, la cita está en buena forma. Ahora para la calificación. Entonces aquí voy a subir aquí, copiar esto una y otra vez. Pegar, cerrar los corchetes rizados. Queremos estilizar los iconos aireadores, que son las estrellas. Por lo que aquí vamos a tener probados comentario estrellas dot. Entonces después de esto, voy a copiar pasta. Y ahora queremos estilizar la etiqueta LI. Y todas estas clases están por aquí en el testimonial j is. Ahora estas son las etiquetas LI con las que estamos tratando. CSS testimonial de Toronto. Entonces para las estrellas, déjame mostrarte. Lo ves de la forma en que aparece así. No nos gusta. Por lo que tenemos que hacerlo display, inline-block, Guardar, comprobarlo. Precioso, me gusta. Todo está casi hecho. Entonces sigamos. Especifiquemos los derechos de margen. Todo lo que voy a hacer ahora mismo es resaltar y luego duplicar este código. Ven aquí, queremos estilizar la etiqueta I. Déjame mostrarte otra vez. Aquí están las etiquetas I, ¿verdad? Que es el ícono en sí. ¿ Puedes ver? Entonces voy a limpiar esto. Vamos a dimensionar el icono. Ir al tamaño de forma de 30 píxeles. Y el color va a ser jitomate. Guardar Como comprobarlo de nuevo. Impresionante. Volver al código VS. El siguiente en línea es la info del cliente, dot info. Por lo que rápidamente hagámoslo. Posición. Relativo. Perdón a la izquierda, 80 píxeles, relleno superior 80 píxeles, y la altura media es de 60 píxeles. ¿ Verdad? Antes de proceder, un top de relleno tiene que ser de cinco píxeles. Para que puedas dirigirte al navegador para comprobarlo. Pero para mí, sólo tengo que proceder para que podamos terminar rápidamente. Ahora tenemos que estilizar las imágenes. Estas imágenes por aquí. De acuerdo, así que voy a copiar todo aquí. Ven aquí, pega, cierra los soportes rizados. Y luego voy a hacer IMG para apuntar a las imágenes. Por lo que para altura 70 píxeles, el ancho 70 píxeles. El límite. Vamos a tener sus dos píxeles, sólidos, transparentes. El color del borde. Hagámoslo negro. Desde la izquierda, 0, el top 0. Guarda tu reforma. Ahora, tenemos que hacer circular el borde del marco, ¿verdad? Entonces retrocedamos y hagámoslo rápidamente. Entonces sólo tenemos que manejar el radio fronterizo. Que sea 50 por ciento. Guardar. Ahora puedes ver, oh, hermosa. Me gusta aquí en código VS a menos que continúe. Y lo vamos a tener posición. Absoluto. Ahorra de nuevo, todo es como se esperaba. Hermosa. Me gusta aquí sobre VS Code. Entonces ahora tenemos que estilizar el H5 y una etiqueta p. Sólo voy a copiar estos. Pegar, cerrar el soporte rizado. Y esta vez tenemos que apuntar al seto cinco. Dale un tamaño de fuente de 16 píxeles. El tipo de letra que veríamos es de 100. Por lo que esto lo hará grueso. El alto de la línea, 26 pixels. Margen. Guardar. Está bien, entonces, por último, tenemos que estilizar la etiqueta p. Déjame mostrarte la etiqueta p. Este es el hit F5, y luego esta es la etiqueta p. Por lo que el nombre del cliente está envuelto menor de cinco años. Y el papel del cliente está envuelto en una etiqueta P, castigo a la cara derecha está limpio, por lo que todos deberían tener una comprensión adecuada de lo que estamos haciendo aquí. Ahora sólo voy a copiar esto otra vez, la etiqueta p esta vez. Entonces vamos a tener el tamaño de fuente. Copia desde aquí, pega y la altura de la línea. También. Copia de aquí. Pega el teléfono a que copiaríamos desde aquí. Pegar, pero esta vez van a ser 400. Y el margen es 0. Guárdala en el navegador. ¿Puedes ver eso? Precioso, me gusta. Ahora vamos a comprobarlo en plataformas móviles. Aquí tienes un iPhone S. Desplázate hacia abajo. Hermosa. Por lo que iPhone seis. Bonito. Entonces vamos a comprobarlo en el iPad Pro. Y aquí está en el iPad Pro? Parece muy bien. A mí me gusta. Y por último, tenemos que revisar el Galaxy S5. Desplácese hacia abajo. Entonces, por ejemplo, este es exactamente el resultado que estamos esperando de esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 37. Crear el componente ContactMe: Bienvenido de nuevo al curso. De acuerdo, ahora vamos a trabajar en el componente de contactarme. Y el componente comprende dos secciones diferentes. Primero es la UI, que tiene que ver con el front-end, y el segundo es el back end. Y al final, podrás recibir correo electrónico de un cliente. Respuesta a ese correo electrónico a través de esta página de portafolio. Suena genial, ¿verdad? Hermosa. Garza a código VS a menos que proceda. Entonces el primero que vamos a hacer aquí mismo es importar los archivos necesarios, que son las imágenes correspondientes. Esa es realmente divertida historia sobre MI componente. Ahora se abrió la carpeta de materiales. Materiales. Entonces vas a ver estas imágenes de bolsillo por aquí. Ahora, abre el portafolio Pro cliente. Haga clic en SRc. Entonces vamos a copiar esta carpeta por aquí, y luego pegarla aquí. Echemos un vistazo a lo que tenemos. Tenemos la carga, que es el GIF que vamos a utilizar. Tenemos la imagen de fondo de correo. Entonces déjame mostrarte lo que las puertas. Sólo tenemos que cerrar esto y luego cerrar esto. Actualmente navegador una vez más. Y si escucho cuando golpeo el botón de enviar, vas a ver al Señor en Bob. ¿Ves eso? Hermosa. Vamos a crear los componentes correspondientes. Contenedor de cartera de Toronto. Y aquí está el directorio de contactarme que creamos anteriormente en las conferencias anteriores. Entonces solo voy a hacer clic derecho aquí en Nuevo Archivo. Entonces lo llamaré contactarme dot js. Y rápidamente tenemos que crearlo correspondiente archivo CSS. Contáctame dot CSS, aquí mismo para contactarme js. Ocultemos al explorador. Generar el componente funcional React js, RFC. Hermosa. Ahora aquí tenemos que hacer las importaciones necesarias. Entonces aquí vamos a importar. Soy debug SRC slash images slash. Ahora vamos a echar un vistazo Yvonne nombre de las imágenes de están ahí. Ahora tenemos los machos dot JPEG. Entonces solo voy a hacer machos dot JPEG. Y aquí tenemos que importar el muro de barras de carga. Entonces sólo voy a llamarlo bucle uno. Muy bien, en el mismo directorio. Entonces aquí tenemos que importar las utilidades de componentes reutilizables, splash, encabezado de pantalla, encabezado de pantalla. Y por aquí tenemos que importar, Importar servicio de desplazamiento de utilidades scroll. Y así tenemos que importar la animación es utilidades. Animación es. ¿ Y qué es lo que tenemos que importar? ¿ Verdad? Parece para sustantivo. Estos estarán bien. Y luego la línea anidada es implementar este desplazamiento suave y el efecto de desvanecimiento. Entonces tenemos que venir aquí, llevarle apoyos por aquí. Ahora hemos implementado estos en varios componentes, así que solo tengo que volver a sobre mí js y luego. Hola, Ok, Ya está resaltado, así que solo voy a ir bien, para fines de enseñanza, solo tengo que hacerlo yo mismo. Ahora. Menos destacados de las líneas 92, líneas 15, copia. Volver a contactarme js. Y luego por aquí, sólo tenemos que pegar. De acuerdo, entonces antes de proceder, tenemos que añadir estos componentes a la pantalla. Ahora, Heroku común. De acuerdo, así que tenemos que importar. Contáctame. Se pueden ver chicos, esto automáticamente importará estos para mí cuando haga clic aquí y boom, se importa. Entonces sé que a la mayoría de ustedes les puede resultar difícil hacer estos H2 y por lo tanto, tengo que hacerlo manualmente yo mismo. Sí. Entonces déjame importarlo monógamo fuera contactarme desde portafolio container slash, contáctame, barra en contacto conmigo. Y ahora creo que todo el mundo está bien con estos. Entonces aquí tenemos que agregarla a constantes por aquí. Por lo que ahora sólo tengo que destacar estos. Presiona las teclas Alt y Shift y luego pulsa la tecla de flecha hacia abajo del teclado. ¿ Puedes ver eso? Ahora mismo tenemos que cambiar el nombre para contactarme. Y aquí el componente debería estar poniéndome en contacto conmigo. Guardar. Vuelve a contactarme JS. Y aquí mismo en el DV, vamos a darle a este div un nombre de clase de contenedor de dash medio. Entonces démosle una identificación para que no pudiéramos navegar a estos componentes. Uno, se hace clic en el nombre de la pantalla. Entonces aquí voy a hacer utilería. Dot ID. Ahora. Con cuidado. Tan rápidamente menos que eso, son componentes reutilizables para tener algo mostrado en la pantalla. Ahora voy a hacer el encabezamiento de pantalla más cerca con la etiqueta de autocierre. Y suponiendo que no, lo hemos estado haciendo en las conferencias anteriores. Ahora el subtítulo que voy a hacer aquí, menos mantenerse en contacto. De acuerdo, así que creo que mientras haces esto, vale, se ve mejor de esta manera. Entonces solo haz la L solo hazlo de cualquier manera que quieras que aparezca en la pantalla, ¿verdad? Entonces, sí. Está bien. Y el otro atributo es el título. Ahora voy a hacer contactarme. Hermoso, creo que esta bien. Guardar. Vuelve a la terminal y luego cliente de CD. Y luego vamos a hacer npm start. Está bien, esperémoslo. Hermosa. Ahora tenemos el componente contactarme en la pantalla. A la pata y a ver si se agrega el nombre. Se paró lo suficiente. Parfit chicos aquí es compatible. Por lo que cuando hago click en Contáctame, nos lleva aquí abajo. Heroína a código VS a menos que continúe. Amanda B, para ocultar al Explorador. Ahora, justo después de la etiqueta de cierre del encabezado de pantalla, vamos a tener un div, darle la clase extremidad ARF, teléfono central dash. Y oye, otro div, nombre de clase del carbón. Por lo que ahora vamos a tener React típico. Creo que ya lo hemos hecho antes, ¿no? En el componente de perfil. Entonces, vamos a ir al componente de perfil. Perfil ab.js. ¿ Ha venido aquí? Entonces vamos a copiar del seto. Este titular de aquí sí tiene que copiar. Vuelve a contactarme GS. Por lo que antes de tener esto implementado, tenemos que importar el típico fastidio React. Por lo que siguiendo las mejores prácticas, tenemos que hacer la importación de un hey, importar de React dash tipo de llamada. De acuerdo, Entonces después de esto, tengo que darle un espacio como este. Y aquí mismo, sólo tenemos que pegar. Entonces todo lo que tenemos que cambiar es la etiqueta de cabecera 1. Entonces solo voy a resaltar y luego voy a presionar Command y D. ¿Pueden ver estos dos está seleccionado, la etiqueta de cabeza de apertura y la etiqueta de cabeza de cierre. Esto se llama multicasts son edición. Que sea H2 y 1000. Y aquí no lo hemos hecho, le daré esto a un nombre de clase de título. Ahora lo que voy a hacer es resaltar estos y frotar al final húmedo elige mostrar más información. Pero para mí, sólo quiero que sólo se muestre esta información. Entonces permítanme mostrar la información de un aquí. Ahora sí voy a ponerme en contacto. Por lo que aquí tenemos que incluir a los MOOG. Yo creo que sabes hacer esto. Entonces para aquellos de ustedes que no están usando Mac, todo lo que tienen que hacer es copiar y pegar mi código para conseguir este MODS. Entonces ahora necesito este tipo de símbolo emo por aquí. ¿ Lo hace por menos de línea es los iconos de las redes sociales. Déjame mostrarte. Aquí están los iconos de las redes sociales. Y como recuerdo que hicimos todo el aileron de estas cosas en la conferencia anterior cuando implementamos la empresa de perfiles. Por lo que en esta conferencia, el componente de perfil va a ser muy útil. Volver a los componentes del perfil. A la pata. Está bien, así que vamos a copiar todo así. Destaca copia derechos de las líneas 122, líneas 26, para luego volver a contactarme ds, justo después de la etiqueta de cierre del HA2. Yo sólo voy a pegar y visitar el hermoso MAN S para ahorrar. Vuelve al navegador y veamos lo que hemos hecho hasta ahora. Muy bien, ¿puedes ver estos otros iconos en la esquina inferior izquierda de la pantalla? Y espero que alguien pueda ver eso. Por lo que tengo que acercar un poco esto. Y esto es lo que hemos hecho hasta ahora. No quiero que esta conferencia tome demasiado tiempo, así que vamos a tener un descanso aquí. Y en la próxima conferencia, procederemos a crear el formulario de contacto. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 38. ContactMe forma y variable en estado: Entonces ahora vamos a proceder con el contactarme teléfono Harrington VS Code. Aquí, Austin, vamos a hacer es declarar las variables estatales necesarias para ser utilizadas. Entonces creo que deberíamos hacerlo aquí mismo. De acuerdo, vamos a importar el estado estadounidense. Por lo que solo tienes que colocar una cámara estado estadounidense y luego desplazarte hacia abajo. Y aquí vamos a tener const. Y tenemos que tener el nombre feud, más tranquilo, setName para usar Estados. Y el estado inicial va a estar vacío. No habrá nada en la alimentación por primera vez. Entonces tendré que hacer ahora mismo es resaltar esto y luego duplicarlo cuatro veces. Cambia y toca la tecla de flecha hacia abajo de tu teclado. De acuerdo, entonces tenemos que cambiar esto por correo electrónico. Y luego aquí vamos a establecer el correo electrónico. Nota. Este es un caso poco común. Entonces vamos a ponerlo en una cadena vacía, que es el estado inicial. Y por aquí tenemos que cambiar este nombre por mensaje. Y aquí tenemos la pancarta. Y por último tenemos al booleano justo aquí. Y por supuesto debes saber que se trata una operación booleana y debe devolver ya sea verdadera o falsa. Entonces aquí los estados iniciales van a ser antebrazos. Ahora vamos a crear el formulario de contacto rápidamente. Entonces por aquí, justo después de este div de cierre, vamos a tener un div, dar el nombre de clase de dash. Y también vamos a tener un div aquí, dale el nombre de clase de IMG dash. Y aquí vamos a tener un seto para IMG SRC. Yo soy debug. Entonces le vamos a dar un OT. Entonces creo que deberíamos cerrarlo con la etiqueta de autocierre. Está bien. Por lo que lo siguiente en la fila es tener el puntaje telefónico hacia abajo justo después de este div de cierre por aquí de ClassName IMG de vuelta. Vamos a tener el teléfono justo aquí. Vamos a tener una etiqueta p. No te preocupes por estos por ahora porque te voy a mostrar. Entonces aquí vamos a tener una etiqueta. Vamos a darle un nombre de clase. Y yo voy a hacer por el tagline va a ser nombrado. Vamos a tener el tipo de entrada es prueba. Y también prefiero la etiqueta de autocierre para estas hermosas. Entonces lo que voy a hacer a continuación es destacar estos, como estos. Duplicarlo dos veces. O puedes hacer copiar y pegar dos veces. El nido es el correo electrónico. Entonces aquí lo voy a cambiar por correo electrónico. Cámbialo por correo electrónico. El tipo aquí va a ser correo electrónico. Y éstos serían utilizados para el mensaje. Y el mensaje. Guardar y ejecutar. Vuelve al navegador y déjame mostrarte. Aquí está la imagen. Déjame mostrarte. Que es el IMG back importamos aileron y lo mostramos por aquí. Ahora, aquí está el seto para. Entonces, cuando mires de cerca, vas a ver los tres campos de entrada. Déjame acercar un poco. Aquí está el nombre, el correo electrónico, y el mensaje. Pero no quiero que el cuadro de mensajes sea del mismo tamaño que los demás campos. Entonces para eso, tenemos que usar el área de prueba como el empalado. Volver al Código VS. Y aquí donde se tiene el imput, vamos a cambiarlo a área de prueba. Guardar. Vuelve atrás. Ahora puedes ver que tienen razón, así que lo tenemos nuestro pico en debajo del resto de los campos como eso. Pero una cosa que quiero mostrarles es esto, cuando tecleas algo, estos campos de entrada no funcionan. Déjame mostrarte lo que quiero decir con eso. Entonces voy a alejarme un poco. Voy a inspeccionar esto. Y vamos a comprobarlo en la consola. Ya ves cuando hago uso de los campos de entrada, no pasa nada. No está pasando nada. Por lo que significa que estos campos no están funcionando. ¿ Está bien? Entonces tenemos que manejar la impedancia. Ahora, vuelve a VS Code. Y creo que antes de hacer eso, sólo tenemos que implementar el fondo. Entonces, vamos a tener el fondo implementado rápidamente. Justo después del área de prueba. Vamos a tener otro div, dar el nombre de clase ARF, enviar a Dash. Y aquí mismo vamos a tener un Bolton. Entonces aquí vamos a hacer el tipo de entrada del Bolton. Por supuesto se va a resolver medios para que se va a enviar la etiqueta. Por lo que queremos mostrar un icono en la parte inferior. Tenemos que tomar la etiqueta I y luego darle un nombre de clase de FASFA dash p bar. Lo siento, el papel debe ser sólo un plano P xy. ¿ Todo bien? Y también me gusta cerrar con la etiqueta de autocierre. De acuerdo, creo que todo fenómeno fresco. Echa un vistazo en el navegador. Y tenemos dos k Este es el fondo de un aquí. En la esquina inferior izquierda de la pantalla. Se puede ver aquí es el canotaje. Volver al código VS. Entonces ahora tenemos que manejar la impedancia. Entonces desplácese hacia arriba y definamos una función para eso. Entonces ahora vamos a tener una constante y lo voy a llamar nombre de melaza. Ponlo a nuestra función, y luego tomar un evento. Hermosa. Entonces aquí vamos a hacer eventos SetName, puntos, objetivos, valor de punto, resaltar estos, duplicarlo dos veces. Y aquí tenemos que cambiarlo por correo electrónico. Estos también serán correo electrónico. Está bien. Sí. Y aquí debería haber menos edad. Está bien. Todo más fresco. Desplácese hacia abajo a menos que se implemente en enclave Entonces tenemos que empezar con el nombre, que es el campo de nombre. Y ahora tenemos que tener sin cambios. Vamos a invocar el nombre de la función y se debe nombrar el valor. Barra de desplazamiento. Vamos a probarlo. Tendremos que recargar. Muy bien, entonces aquí en la consola, vamos a ver el efecto de cambio. Entonces voy a teclear N. Saquémoslo en la consola. De acuerdo, Entonces cuando lo haga, puedo ver lo sin cambios por aquí. Se ve así que esto es exactamente lo que las puertas onchange. Por lo que en pocas palabras, el evento onchange en React, detectan el valor de un elemento de entrada cambia. Suena bien, ¿verdad? Hermosa. Volver al código VS a menos que lo tenga implementado en todos los campos. Y lo mismo que Lee lo vamos a hacer por el correo electrónico. Entonces vamos a tener en el cambio. Y recuerda, esto es sobre el caso del karma. Vamos a llamar a la función de email de manejo. El valor, por supuesto, va a ser correo electrónico. Y por último, tenemos que hacerlo por el mensaje. Entonces sólo tengo que copiar esta cámara aquí. Pegar. Y por favor haga cambiar la función para manejar mensaje. Entonces el valor que vamos a tener aquí es del cuadro de mensajes. Guardar, volver al navegador. Entonces démosle un char. Abre la consola, desplázate hacia abajo para el nombre que voy a hacer. Mike por lo tanto es donde puedo encontrar para el email que voy a hacer. Está bien, y por el mensaje. Entonces sólo tengo que hacer VIH a. Hey, ¿qué está pasando? El pie no está consiguiendo el valor. ¿Ves eso? Aparece aquí en la consola, pero el valor no lo es, no es agarrar el valor. De acuerdo, vuelve al código VS y vamos a arreglarlo. pata, ¿verdad? Amigos. Se supone que se establece mensaje y esperanza de obtener o estará bien esta vez. Está bien. De acuerdo, vuelve al navegador. Tenemos que recargar. Ahora probemos el mensaje. Está bien, todo está funcionando perfectamente bien. Entonces frase, esto es todo por ahora, para esta conferencia y en la próxima conferencia, comenzaremos a estilizar esta empresa es, vemos en la próxima conferencia. Mantente enfocado y cuídate. 39. Componente de ContactMe estilizado: Entonces vamos a estilizar las empresas de contactarme. Y al final tendrás que lucir como estos están en esta hermosa. Volver al código VS a menos que proceda. Abre el contacto conmigo CSS. Conjunto P común para contactarme CSS. Y aquí está. Empecemos con el contenedor principal, dot mean dash container. Entonces le vamos a dar una altura media de 100 vh. Para la forma central, punto central. Diversión. Vamos a tener el máximo ancho, el relleno. Hagámoslo display flex. Y el radio fronterizo de los píxeles. Margen 0 fuera. Mucha dirección flex va a ser coelom. Justificar centro de contenido. Y para el color de fondo. Vamos a tener aquí. Guardar. Ahora tenemos que vincular el contactarme CSS con los componentes de contactarme. Abrió el contacto conmigo. Desplácese hasta la parte superior. Entonces creo que deberíamos hacerlo aquí mismo. Guardar, volver al navegador a menos que lo revisen. Muy bien, entonces ahora tenemos el contenedor principal. Se puede ver. Pero hay un problema con esta imagen, que es la bolsa IMG. Definitivamente vamos a arreglar eso en el futuro. Entonces, dirígete a VS Code para contactarme. Y aquí Sigamos con la forma central H2. Déjame mostrarte la historia correcta, y tipo efecto. ¿ Dónde tenemos el efecto tipo, creo que está en la parte superior. Aquí. ¿Lo es? El sitio al color de la fuente definitivamente va a ser blanco. El espaciado entre letras, que es el espacio entre cada estilos de capa. Entonces lo vamos a tener para emborrachar el fondo del margen. Hagamos que sean 20 pixeles. Guárdelo y ejecutarlo. Aquí tenemos que estilizar para retroceso, retroceso, guión para el ancho máximo, 380 píxeles. El margen, 0 auto. Entonces ahora sólo voy a copiar estos. Cierra el soporte rizado y queremos apuntar al tablero IMG. Pero por supuesto, debes conocer todas estas clases por aquí. Debes saber esta es la espuma, el IMG atrás donde se encuentra el seto para y la imagen. Dale un ancho del 100%. Margen inferior de 20 píxeles. Por lo que ahora tenemos que estilizar el IMD cuatro atrás. Entonces para eso, sólo tengo que copiar estos. Pegar, cerrar el soporte rizado. Entonces voy a hacer H4, que son los teléfonos. Déjame mostrarte. Este es el IMG golpeó cuatro maneras está bien, míralo. Ahora se está mostrando en la pantalla simplemente por una fuente en sí es negro. Entonces aquí está. Envía tu correo electrónico aquí. Ahora primero, tenemos que cambiar el color para que podamos verlo aquí arriba en la pantalla. Hagámoslo amplio ahorrar. Se puede ver ahora es muy visible. Espaciado posterior. Punto cero. Una forma al trigo. Queremos que sea un poco pesado, así que parece corporal aquí. Entonces vamos a hacerlo 400, ahorrar, volver atrás. Se puede ver ahora es más tablero ahora. Entonces si te quitas estos ahora, ¿ puedes ver la diferencia? La diferencia es la arcilla. Dale un tamaño de teléfono de 18 píxeles. Ahora queremos esconder un poco el escenario de fondo. Dar la capacidad 0.5. Guardar. ¿Ya lo ves? Entonces tenemos este tipo de efectos por aquí, ¿verdad? Hermosa. Muy bien, vuelve al navegador. Y aquí la imagen que es este IMG de vuelta por aquí, es demasiado grande, así que tenemos que reducir el tamaño. Por lo que aquí yace la imagen. Voy a pegar y luego cerrar el soporte rizado. Ahora tenemos que apuntar al emisor su brazo, que es la etiqueta IMG. Entonces el ancho, hagámoslo 100% seguro. Ahora, ¿ves que poco a poco está tomando forma. Y lo menos de lo que vamos a hacer es realmente ocultar un poco la imagen de fondo. Entonces por aquí, voy a hacer opacidad. A menos McKee, 0.5. Ahorra una vez más. ¿ Ahora ves para emit es Heider justo al fondo? Ahora pasemos a los campos. Teléfono central. El teléfono, Es resolver. Por lo que se nos dice que vamos a tener un display. Flex, el color. Hagámoslo negro. 15 píxeles. Justificar centro de contenido. Y van a flexibilizar dirección. Columna. Ahora para margen superior menos 52 píxeles. El color de fondo blanco, y el borde radio. 12 píxeles. Guardar. Vamos a sacarlo. ¿Verdad? Poco a poco las cosas están tomando forma y me gusta. Muy bien, sigamos. Volver al código VS. Ahora tenemos que estilizar una etiqueta p justo en el teléfono. Déjame mostrarte. Aquí está la etiqueta p. Y no te preocupes, cuando empecemos a implementar las funcionalidades del correo electrónico, te mostraré lo que estas puertas, vale, así que no te preocupes por ello por ahora. ¿ Qué es un teléfono y una etiqueta p? Alinear texto, centro, el margen, abajo, diez píxeles. Y el color, que es el color de la fuente. A menos que mis hijos, naranja. El espaciado entre letras punto cero para la lluvia. En realidad quieren las funcionalidades son conjuntos, ¿verdad? Por lo que al hacer clic en la parte inferior, vas a ver alguna prueba en el teléfono para indicar si el mensaje fue exitoso o no. Eso es exactamente lo que la prohibición de puertas, que es esta etiqueta p de a, Hey, la font-family. Amapolas atrevidas, ¿verdad? Por lo que para la etiqueta del formulario, el margen inferior va a ser de cinco píxeles. El color, Hagámoslo negro. Entonces la celosía espaciando punto cero a la RAM. Guardar. Vuelve aquí. Ahora se ven las etiquetas vr bien colocadas. Estas son las etiquetas. Muy bien, Así que empecemos a estilizar los campos de entrada, que es el nombre, campos de nombre, el campo de correo electrónico, y el campo de mensaje. Ahora debes saber que el yo en la firma y la firma, tenemos que apuntar al coma de imput y esa zona de prueba. Nos vamos a ir con un ancho del 100%. El borde, dos píxeles, sólido, RGBA. Ahora tenemos 0, k Sólo hazlo en cuatro veces. Y el contorno, vamos a dar a conocer el color de fondo. Entonces antes de proceder con esto, tengo que mostrarles lo que queremos hacer es venir aquí, imitarlos hasta el proyecto demo. Y como puedes ver que el color por defecto de las entradas es una especie de gris. Déjame acercar un poco. Ver especie de color gris por aquí. Y cuando enfocas tu ratón en él, se va a convertir en blanco. Se puede ver eso con una especie de borde azul. Sí. Frontera de contorno azul. Sí. Entonces ya estoy tenemos que establecer el color por defecto de los imputes para que sea gris. Por lo que el color va a ser RGBA a 300, Kolyma a 30 Zara. Zara. Entonces vamos a tener hey, esquina, 0.6, guardar, volver atrás. ¿ Y por qué lo es? Ya sabes, ¿a ver cómo escribir el relleno? El tamaño de la fuente? M? Para margen inferior. Hagámoslo 22 pixels. Radio fronterizo. Queremos que sea un poco curvo. Voy a hacerlo 10 pixeles. Punto de transición. O secreto es seguro y hermoso. Todo se ve bien, pero aún tenemos algunas cosas que arreglar. Ahora sigamos. Para el área de prueba, para esta área, 3000 esquina a cinco coma dos, coma 0, 570, guardar. Y por último, el propio trasfondo. Cuál es el color de fondo debe ser blanco. Guardar. Vuelve atrás. Déjame acercar un poco. Entonces cuando enfocas tu ratón en el cuadro de mensajes, ya veo. ¿ Ves eso? Chicos perfectos. Pero por ahora, no está funcionando para el correo electrónico y un campo de nombre, pero puedes tenerlo y el mensaje que es el área de prueba, resaltar estos lo duplica, Shift y Alt y luego aplastar la tecla de flecha hacia abajo en tu teclado. Está bien, entonces ahora estos se cambiarán para imputar. Creo que va a tener los mismos estilos. Ahorra, vuelve, Oye, ¿puedes ver? De acuerdo, así que tenemos que estilizar el margen inferior, los 15 primeros píxeles. Acolado, cinco píxeles. Esquema. El 160 pixeles. Guardar. Se ve bien. El límite. Vamos a darle un borde de dos píxeles, sólido. Naranja. El tamaño de la fuente, 12 pixels, border-radius, 19 pixels. Color de fondo. Está bien, hagámoslo seguro. Está bien, la fuente no está apareciendo. Tenemos que darle un color de fuente. Por lo que el color debe ser blanco. Ahorra, vuelve. De acuerdo, y la fuente en sí es demasiado pequeña de un tamaño de fuente, así que hagámoslo tal vez 18 píxeles. Está bien, eso está bien. Sí, eso está bien. Alinear elementos centro y luego justificar el contenido a Santa. Está bien, hermosa. Pero por ahora la firma no es de la manera que la queremos. Y ya ves, esto es exactamente lo que vamos a lograr. Entonces trabajemos para lograr eso. Pero antes de eso, tenemos que hacer lo impío para el atornillado, dar el color de fondo de mismo aquí. Más suave. Transición. Uno es, que es uno, dicen Aquino, y el borde, dos píxeles. Entonces síntoma de plomo, Hey, ven aquí y vamos a probarlo. ¿ Me ves acercar? Eso está bien. Para la carga inferior. Lo cual está bien por ahora. No creo que tengamos que estilizar esto simplemente porque en realidad no lo hemos hecho en el contacto conmigo G es así en el futuro, vamos a hacer eso. El IMG buck, buck, flex. Hagámoslo uno. Alinear elementos al centro. El margen derecho? Smith calientan 20 pixeles. Quítate esto. Esto se debe alinear para enviar, para ahorrar. Y por el teléfono. Por lo que 0.9. Así que intentemos arreglar los iconos antes de que realmente podamos alinear esta carpeta. Entonces voy a hacer punto la etiqueta yo justo en el carbón. Vamos a hacer pod en siete píxeles. El color, más importante, es amplio. Guardar. Ahora puedes ver los iconos, ¿verdad? Muy visible. De acuerdo, así que queremos hacerlo así. ¿ Ves cuando pasas el cursor sobre él, muestra este efecto fresco. Ahora sólo tengo que copiar estos. Pega por aquí. Cierra aquí los corchetes rizados. Vamos a hacer sobre. Y vamos a transformar y darle una escala de 1.5. Ahorra, retrocede. Ahora ves hermosa cómo k, Así que tenemos que arreglar este problema simplemente por una firma no está bien alineada. Y este es exactamente el resultado final de un aquí lo que queremos lograr. 40. Corrección de la forma de contacto (talla de contacto (Styling): Por lo que queremos que se vea así en la plataforma móvil, pero lo queremos así en un dispositivo portátil o tableta. Entonces tenemos que arreglarlo rápidamente. Voy a hacer anuncios, pantalla y min-width de y luego vamos a tener la corteza del max-width. Hagámoslo display flex. Justificar el contenido, el espacio entre el margen, los 30 píxeles superiores. Ahorra, regresa y vamos a comprobarlo. Y tú ves eso hermoso. Este es un repentinamente el resultado que estamos esperando de esta conferencia. Volver al código VS a menos que proceda. Tenemos que estilizar El punto IMDB, dash. Y aquí lo vamos a tener flex. Alinearlo al centro. Y el módulo ¿verdad? 20 píxeles para la forma misma. Flex 0.9. Yo creo. Vaso por ahora. Guardar. Está bien, ¿puedes ver eso? Se ve extremadamente hermoso y me gusta. Entonces vamos a sacarlo en plataforma móvil. ¿ Verdad? Entonces esto es exactamente lo que tenemos si escucho que efectivamente es receptivo en todas las plataformas. Vamos a sacarlo en Galaxy S5 y iPhone 5. Iphone un iPhone 6. Vamos a sacarlo en el iPhone 678. Ya ves, todo se ve bien. Vamos a sacarlo en el iPad Pro, en el dispositivo tablet. Entonces así es exactamente como se ve en el dispositivo tableta. Entonces, por ejemplo, a esto se le ofrece un URI, y en la próxima conferencia , vamos, vamos a ir al back end. Entonces, por ahora, esto es exactamente lo que tenemos aquí. Se ve tan bien y me gusta. Todo está funcionando como se esperaba. ¿ Ves que este es el final de esta conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 41. Función de formas: Ahora tenemos la forma lucir extremadamente hermosa. Tenemos que finalizar la funcionalidad front end. Y por cierto, quiero mostrarles algo. De acuerdo, así que ahora cuando haga clic en el Sena abortando, te darás cuenta de que la aplicación se recargará. Déjame mostrarte rápidamente. Aquí está el mismo tablero en ahora hago clic. Echa un vistazo. Se cargará la aplicación. Por lo que vas a ver este efecto justo debajo de la pestaña, revisa otra pestaña por aquí. Entonces vamos a intentarlo de nuevo. Cuando golpeo el botón de enviar, solo tienes que pronosticar por aquí justo en la pestaña. ¿ Ves la aplicación con cargas? Entonces esta es una de las estufa que vamos a arreglarla al código VS. Desplázate hacia arriba y arreglemos este problema. ¿ Verdad? Por lo que aquí vamos a definir una carpeta de envío constante de función. Y aquí vamos a escoger un evento, ponerlo a nuestra función. Ahora voy a hacer event dot, prevent, default, atornillado en el formulario menos que invoque esta función. Aquí está. Ahora voy a hacer Enviar, Enviar Formulario, Guardar, dirigirme al navegador y vamos a comprobarlo. Recargar menos desplazamiento suave al componente contactarme. Dale una oportunidad haciendo clic en el mismo barco en DC. Ahora la aplicación no recargar animal Parfit, harold a VS sin fundamento continuó. Desplácese hasta la parte superior. Por aquí, vamos a crear un objeto llamado datos, configurarlo en objeto vacío. Y luego vamos a tomar en el campo de fuerza, que es el nombre separado con el correo más tranquilo, separado con una coma. Y por último, el mensaje. Está bien, así que vamos a comprobarlo. Ahora voy a hacer console.log. Registremos datos, guardadla en el navegador, recarguemos. Ahora, tengo que llevarte a la consola por el nombre. Voy a hacer a Mike por el correo, voy a hacer em en gmail.com. Y para el mensaje, sólo voy a hacer VIH. Oigo, cuando hago clic en el botón Enviar, vas a ver el objeto en la consola. Ya lo ves. Déjame abrirla. Aquí vamos. Mi nombre es Mike para correo electrónico en gmail.com y luego el mensaje es alto. Todo está funcionando como se esperaba aquí a VS Columbus continuum. Por lo que sólo tengo que despegar este log y par de veces estos metro y error. Entonces tenemos que envolverlo en un try-block. Intenta. Después hay que seleccionar el que tiene el bloque catch también. De acuerdo, Entonces para la captura aquí, sólo tendremos que iniciar cualquier error que tengamos en el show. Y por aquí, solo hay que destacar de las Líneas 44 a las líneas 48. Ven aquí mismo en el bloque try, pega. Entonces nido, tenemos que poner el booleano a verdadero. Establezca en true. A medida que avanzamos más, les explicaré lo que las puertas booleanas por aquí. Entonces, por ahora, vamos a tener un descanso constante. Ejes, punto post, pero tick slash datos de contacto, que es este objeto aquí mismo. Entonces lo estamos trayendo aquí para llevarse todo en los campos, ¿verdad? Entonces es tan simple como eso. Y tenemos alguna advertencia en la consola. Dice que Zeus no está definido. Por lo que tenemos que instalar eje, volver a la terminal, y luego a C para detener el servidor. Ahora voy a hacer npm instalar actos uso y también tenemos que instalar aunque reaccionar para justificar. Déjame mostrarte rápidamente. Encendemos al proyecto de demostración. De acuerdo, sólo tengo que recargar. Ahora cuando haga clic en el botón Enviar, el brindis va a aparecer en la esquina superior derecha de la pantalla mostrando ya sea el mensaje de error o el mensaje de sexo SOC. Haga clic. Dsi dice, por favor llene los campos. Entonces aquí está el mensaje de brindis, y este es el estandarte. No tenía que VS código y escribir en la terminal. También tenemos que instalar React, dash, justifique, instalado exitoso, desplazarse a la parte superior y menos importado. Está bien, oye, voy a hacer importación desde. Y también tenemos que importar brindis de, Reaccionar, testificar. Desplácese hacia abajo. Y aquí tenemos que seguir. Estos definitivamente devolverían una promesa. Entonces tenemos que esperar. Ese programa ya está aquí. Sólo tendremos que esperar. Por lo que siempre que estés lidiando con la espera, tienes que envolver la función con un mismo tornillo. Entonces aquí voy a hacer un santo. Muy bien, así que ten cuidado de no importar lo mismo de nuestro USGS. Está bien. Desplázate a la parte superior y vamos a comprobarlo. Correcto. Sigamos. Entonces tenemos que comprobar si los campos están vacíos. Si nombre longitud de punto es igual a 0. Entonces aquí, esto definitivamente implicará la repetición, que es después de copiar, pegar, cambiar el nombre a la longitud del punto del correo electrónico. Y también cambio basado estos dos mensajes de longitud de punto. Muy bien, entonces si esto está vacío, vamos a dibujar un mensaje desde el fondo. Entonces aquí vamos a hacer los datos de punto de descanso, punto MSG, que es el mensaje. Y también queremos usar el brindis para mostrar el mensaje en la esquina superior derecha de la pantalla. Ahora, voy a hacer esos errores de punto. Entonces aquí es exactamente lo mismo. Sólo tengo que copiar. Pegar. Entonces tenemos que poner al booleano para forzar otro. Si se llena el formulario y todo es correcto, tenemos que devolver el mensaje de éxito desde el back end. Entonces vamos a hacer otra cosa si el estado restaurado es de 200. Entonces solo voy a copiar todo desde aquí como estos, desde laicos 49 hasta 51. Copia. Pega a su derecha chicos, Aquí hay un error tipográfico. Se supone que esto es un error. No sé por qué mi teclado siempre haciendo estos dobles. Por lo que aquí tenemos que cambiar la flecha de tostadas a tostadas punto calcetín dice, Perfecto. Está bien, a salvo. Desplázate hacia abajo y vamos a implementar la carga él Bob. Entonces aquí está el Bertin. El nombre de clase de este div es st. Entonces por favor asegúrate que lo que estás viendo en la pantalla es exactamente lo que tienes al final en tu código VS. Entonces justo después del cierre de una etiqueta, vamos a tener un corchete rizado. Y luego si lo booleano es cierto, vamos a mostrar la barra de carga. Por lo que sólo tenemos que envolverlo en una etiqueta b, darle a esto un nombre de clase de carga. Justo en esta etiqueta b, vamos a tener los sonidos del IMG. Ver, carga uno. Dado un impar con las flechas de etiqueta autocierre. Si es falso, no se va a mostrar en el abortamiento. Entonces solo una cadena vacía. Y rápidamente déjame volver a mostrarte esta imagen. Desplácese hasta la parte superior. Oye, ¿lo es? Por lo que acabamos de importar las cargas dos puntos GIF y después lo almacenamos. Entonces cuando hago Comando P, t2. Entonces aquí está la barra de carga. Desplácese hacia abajo hasta la terminal npm. Inicio. Veamos el resultado final. Desplácese hacia abajo y luego haga clic en el mismo tablero. Cuando ves hermosa, me gusta. Por lo que estos podrían no estar funcionando al final simplemente porque no lo has estilizado. Enfréntate a la feroz no podía. Déjame mostrarte rápidamente. Ahora, vamos a abrirnos, contáctame CSA. Desplázate hacia abajo donde tenemos la carga. ¿ De acuerdo? Entonces solo hay que estilizar esta clase por aquí, que es la carga. Déjame mostrarte. Oye, ¿ es así que todo lo que tienes que hacer es darle un ancho de 60 pixeles. Y luego lo vas a tener así. Y al hacer click en el mismo puerto en recarga. Ahora el booleano se establece la fuerza. Cuando vuelvo a hacer clic en el botón Enviar, el booleano se establece en true y el arco de carga se mostraría en una pizarra cuando esto es todo por ahora para esta frase de conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 42. Llamar a la acción y Animación de FadeInScreen: En esta conferencia, implementaremos el llamado a la acción Wharton y así, la mitad del efecto de desvanecimiento. Afortunadamente perfectamente bien. Por ahora. Cuando golpeas al alto ejército abortando, no pasa nada. ¿ Ves? Y si escucho, no pasa nada. Cuando recargas el sitio web, el efecto de desvanecimiento no funciona perfectamente bien. Tan rápidamente tenía en el código VS a menos que proceda. De acuerdo, entonces comenzaremos con el componente About Me. Aquí hay un error tipográfico. Se supone que esta pantalla se desvanece. Por favor sí me aseguraré de que haga las correcciones necesarias. Y esto es lo correcto. Habiendo hecho esto, tenemos que volver a este div con el nombre de clase de sobre mi contenedor. Y luego voy a hacer fade, dash. Guárdela en el navegador. Y veamos si el efecto de desvanecimiento se está aplicando al componente About Me. Recargar. ¿ Puedes ver? Ahora echa un vistazo. ¿ Ves eso? Entonces hagamos lo mismo a todos los componentes. Por lo que tienes que abrir currículum js. Y entonces creo que también cometimos el error aquí. En realidad cometimos este error alrededor de la empresa simplemente porque esto fue copiado del componente About Me. Así que asegúrate de cambiarlos para que quepan en la pantalla y luego desplázate hacia abajo. Aquí mismo. Hace div con el nombre de clase del contenedor original. Entonces voy a hacer fade, dash, seguro. También ella sobre el testimonial GS. Chicos, sólo tienen que hacer esto. Está bien. Vamos a hacer encajar en pantalla, justo en el testimonial. Oh Dios mío. Este es un top. Está bien. Por lo que vamos a implementarlo en la etiqueta de sección. Guardar. Y por último, contáctame. Y por supuesto, deberíamos hacer el mismo dolor es que LI la guarde en el navegador y luego recargar. Entonces ahora cuando me desplace hacia abajo, el componente se desvanecerá. Doc, DOC. Perfecto. Ahora es momento de implementar la votación de convocatoria a la acción. En realidad no había podido ayudar son. Entonces aquí mismo vamos a copiar la copia onclick. En realidad, esto es tan sencillo y creo que algunos de ustedes pueden hacerlo al final incluso con eso viendo esta conferencia. Entonces ahora tenemos que proceder al perfil J. Arróllate , vale, por aquí donde tenemos la AMI alta de Bertin. Entonces ahora coloca tu ratón aquí y luego pega la propia camarilla. Entonces aquí está el método OnClick. Esta cruz F es manejador de desplazamiento de puntos escrotal alto AMI. Vaya al servicio de desplazamiento. Y esta es la función de desplazarse, de contratarme. Guardar. Vuelve atrás. Ahora, dale un click. Funciona perfectamente bien. En la esquina inferior derecha de la pantalla se encuentra la acción CTO votando para suavizar desplazamiento al componente de inicio. Y voy a dejar esto como una tarea para que lo implementen usted mismo. Pero te puedo asegurar que el código fuente completo está justo ahí en GitHub. Así que desplázate hacia abajo, uh, déjame mostrarte por aquí. Tienes que hacer exactamente el mismo dolor que yo hice aquí. Está bien. Solo tienes que copiar el método OnClick y luego pegarlo, correcto. Entonces déjame hacerlo por ti. No quiero que te quejes. Entonces vamos a dirigirnos a nuestro About Mí. Coloca tu ratón justo aquí, y luego pega, Guardar. Vuelve atrás. Haga clic aquí. Todo está funcionando como se esperaba y me gusta. Esto es a menudo ahora para esta conferencia y nos vemos en la próxima conferencia. Cuídate. 43. Inicialización de fondo: Muy bien, así que vamos a sumergirnos en la parte de atrás, fin. Ella en el código VS. Lo primero que vamos a hacer aquí mismo es inicializar el archivo package.json Comando B para abrir el Explorador. Y luego solo voy a dar clic en el directorio de clientes. Y aquí está el directorio raíz. Entonces aquí es donde inicializaremos el archivo package.json para la parte posterior, final, ella en la terminal y luego hacer Comando C para detener ese servidor en ejecución actual. Y luego tenemos que cd space dot dot para salir del directorio del cliente. Se puede ver ahora estamos en el directorio raíz portafolio Pro. Lo que voy a hacer aquí mismo es inicializar el gestor de paquetes de nodos, que es MPM necesita. Y por supuesto hay que aceptar todas las condiciones. Entonces vamos a sí, sí. Sigue golpeando la tecla Enter. Y sí. Ahora quiero mirar al Explorador. Ya lo vas a ver el paquete dot archivo JSON . Y aquí está. Doc. Hermosa, todavía en la terminal. Ahora tenemos que instalar los paquetes necesarios que se utilizarán en el back-end. Entonces aquí vamos a hacer la instalación de npm de forma concurrente. También tenemos que instalar pasillos y preocuparnos después de la instalación. Te voy a explicar todo. Y por supuesto necesitamos el punto ENV. También necesitamos expertos. Cargarme ley. Y por último necesitamos monitor de carga, que es para nodo. Entonces solo voy a pausar el video para que lo puedas echar un vistazo. Para la instalación está en curso y al final, lo vas a tener derecho en el archivo package.json para el back-end. De acuerdo, puedes ver aquí son los perfectos. Ahora empecemos con concurrencia. El simultáneamente es un paquete que puede ejecutar múltiples scripts MPM simultáneamente. Y por los autos. En un Tim muy sencillo, la causa es un mecanismo o que permite controlar el acceso a recursos ubicados fuera de él dado dominio, ¿no? Por lo que definitivamente la causa se usaría para agregar middleware a la aplicación. Por lo que Nest es el punto ENV. Dot ENV te permite separar secretos de tu código fuente. Está bien, así que toma por ejemplo estás obteniendo un sitio web de e-commerce y quieres compartir de código fuente o con tus amigos como en un dominio público, canciones como GitHub, ¿verdad? Y solo quieres ver en un código fuente con ellos, pero no quieres compartir tu clave API para la integración de pagos y así tal vez la contraseña a la base de datos. Entonces todo lo que tienes que hacer es ocultar todo el secreto dentro del archivo ENV y luego ignorar el archivo ENV. Y cuando quieras desplegar la aplicación en GitHub. Por lo que la línea anidada son los rayos X. En realidad el Express es un módulo Node.js que permite un enrutamiento fácil, ¿verdad? Y hemos denotado el propio MLA con un puré de manzanilla para enviar un mensaje directamente al buzón de correo electrónico. Y por último, es alto el nodo amoníaco, que es el nodo conocido. Entonces lo que las puertas Norman es ver la aplicación siempre que haya algún cambio en la aplicación, va a ayudar a reiniciar la aplicación de dramáticamente. Entonces aquí mismo en el paquete.json, cagó. Entonces aquí vamos a configurar los guiones. Está bien, Así que por favor una coma aquí, creo que dice el problema. Y vamos a tener una preocupación. Te voy a explicar todo. Por lo que sólo tenemos que escribir el código muy rápidamente. Mpm, inicio, prefijo. Cliente. Recuerda siempre añadir un coma para que no te metas en problemas. La mitad de la profundidad. Concurrentemente. barra inclinada contraria. Npm, ejecuta el lado del servidor de las comillas dobles y otra barra contraria ven justo aquí. También otra barra inclinada, MPM, ejecuta la barra inclinada contraria de Clyde, comillas dobles. Y el nido es dar acceso a héroe llamado compute nuestra aplicación para el despliegue. Ahora sólo voy a hacer el Comando B para tener pensión completa. Heroku. No te preocupes, te mostraré que tuvimos que copiar y pegar este código para que no te encierres en problemas también. Fue el BWT MPM subrayado producción de subrayado. ¿ Falso? Entonces voy a npm instalar prefijo cliente, MPM ejecutar visto. ¿ Verdad? Por lo que no conozco la carpeta de materiales. Materiales. Abre el código Hale-Bopp. Entonces me voy a desplazar hacia abajo. De acuerdo, así que aquí está el guión back-end. Sí tiene que copiar así. Ven aquí, límpialo, pega. Entonces esto es exactamente lo que debes hacer. Unidad diversa para tener mucho cuidado aquí porque cuando cometas algún error, Oye , honestamente, esto te hará, no quiero decir eso. Guarda este proyecto. En realidad, lo que voy a explicar el alegato es el concurrente, que es el div, ¿no? Cuando hagamos npm run dev, esto ayudará a detener el front end y el back end. Muy bien chicos, así que esto es a menudo ahora para esta conferencia. En la próxima conferencia, crearemos el ahorrador. Cuídate. 44. crear el servidor: Empecemos a crear un Saver Command B para que se abra el Explorador. Entonces aquí vamos a crear el módulo del servidor aquí en el directorio raíz. Pero lo voy a hacer es ratón sobre este archivo por aquí, este ícono, espero que puedan ver. Por lo que sólo hay que rondar en este expediente, que es la nueva agricultura puede ver. Haga clic en él y luego le vamos a nombrar server.js. Otro sobre este ícono, que es el nuevo archivo. Haga click en él, y luego vamos a tener punto ENV. Perfecto. Entonces ahora sólo tenemos que guardar el secreto de un aquí en el archivo ENV punto, aquí en la carpeta Materiales. Entonces aquí está el plomo dos secretos que queremos ocultar en este curso. Sólo tengo que llamar a B, volver a VS, bueno, pegado aquí, guardarla en el server.js. Por lo que ahora vamos a requerir que nuestros paquetes se ejecuten nuestro servidor usando el Express JS, requieren dot ENV, dot config. Y aquí sucede que tenemos una constante, llámalo express requieren. Queremos requerir radiografías. Por lo que esto simplemente significa que estamos importando expresados desde el módulo express. Déjame mostrarte lo que hicimos en este momento. A partir de aquí, solo requerimos que el expresado desde el módulo extras para luego almacenarlo en estas constantes por aquí. Los datos más simples. Y también tenemos que hacer lo mismo por la causa. Disculpe, estas tienen que ser constantes requieren vamos a requerir la causa. Entonces aquí voy a hacer radiografías. Entonces déjame explicarte en un GFP, estos llamarán a la función express y pondrán una nueva aplicación dentro de esta variable hacia arriba. ¿ Entiendes a lo que me refiero? Entonces esto es llamar a una nueva función express y luego poner una nueva aplicación express dentro de esta variable. Ahora tenemos que decirle a la app que use llamadas como middleware. Up DOT, use Express, dot, JSON, app.use llamadas. Entonces todo esto lo voy a hacer aquí, creando el middleware. Ahora vamos a crear los puertos. Proceso punto ENV, parcela de puntos. Tenemos que utilizar el puerto 5000. Y voy a hacer dot leasing a, tenemos que escuchar un puerto menos consola, log el pot que estamos escuchando. Voy a decir servidor, escuchando puerto 5000, guardar. Entonces justo en la terminal, voy a hacer npm run serve. Duc. Chicos de ganancia dice varios escuchando puerto 5000 y el nodo uno está leyendo perfectamente bien. Todo chicos cool. Entonces déjame mostrarte lo que las puertas de un Él. Ahora supongamos que quiero hacer varios escuchando solo el puerto 5000. Entonces voy a ahorrar. Cuando guarde, cuando compruebes en la consola, te darás cuenta de que dice reiniciar debido a cambios y luego iniciar el nodo server.js. Por lo que la mamá del NADH ayuda a reiniciar la aplicación en cualquier momento que realices cambios en tu código fuente. Entonces esto implica que no tienes que venir aquí y hacer npm run server más. Esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. Cuídate. 45. ContactRoute: Habiendo creado el servidor en la conferencia anterior, rápidamente, procedamos con la ruta de contacto. Aquí mismo en VS Code. Todo lo que voy a hacer ahora mismo es navegar al Explorador. Entonces por aquí sólo tengo que cerrar al cliente. Muy bien, entonces ahora estamos aquí en el directorio raíz. Entonces justo en el directorio raíz, vamos a crear un paquete llamado ruta. Da click aquí, donde mi ratón está en nueva carpeta. Vamos a nombrar esta ruta de carpeta. Justo en esta carpeta, vamos a crear el módulo de ruta. Haga clic derecho en las rutas. Aquí un nuevo archivo, dot js. Entonces aquí voy a hacer requerir router Express. Y el nido es el nodo Mailer. Constante. Cargarme ley. Requiere NADH me Le Havre, ¿verdad? Por lo que para implementar el nodo Mailer, se involucran tres pasos. primer paso es que tenemos que crear que transporten nuestros objetos. Paso dos, tenemos que establecer el objeto de opciones de correo. Y paso tres, tenemos que entregar el mensaje con el método de envío de correo. Por lo que antes de proceder con esos pasos de armas, sólo tenemos que crear la ruta. Ahora voy a hacer mensajes de punto router, contacto de barra única. Y aquí necesitamos tomar en pyramidalis solicitud y técnica de respuesta para es no intercambiar los parámetros, de acuerdo, Así que cuando haces respuesta aquí y solicitas aquí, posible que no lo tengas trabajo para ti. Establezca en función de flecha, Comando B para tener una pensión completa. Entonces aquí tenemos que agarrar los datos del formulario, que es del cuerpo. Ahora vamos a tener una variable data request dot body porque estamos haciendo una solicitud de la firma que creamos antes en las conferencias anteriores. Si los feeds son MTU, queremos devolver algún mensaje al cliente. Y creo que hemos implementado esto. Y el contacto J es tan común P, contáctame. Entonces es exactamente lo mismo que vamos a hacer. Cuáles son pocos cambios. Copiar las líneas 51, y luego volver a realizar ruta, pegar. Cierra el soporte rizado. Entonces aquí mismo va a ser nombre de punto de datos, longitud de punto, que es este dato aquí mismo. Datos variables. Entonces lo mismo aplicable al conjunto de ellos. Punto de datos, longitud de punto y luego data.dat mensaje longitud de punto. Hermosa. Entonces si son iguales a 0, lo que significa si no hay nada en los campos y haces clic en saint bote, tenemos que devolver respuesta dot JSON. Tomado un objeto vacío, y voy a hacer MSG para el mensaje. Entonces vamos a hacer aquí, por favor siéntete, ¿son hermosos los campos? Entonces, sigamos adelante con el paso uno. Entonces alguien me puede recordar, ¿qué es el paso uno? Jaja, bien, no te preocupes, te voy a ayudar. paso uno es crear ese transportador u objeto. Deja SMTP transportador, cargarme le dot crear transportador. Ahora le vamos a llevar algún objeto vacío. Aquí mismo. Vamos a tener el servicio y va a ser Gmail. Y por favor, tiene que colocar una coma aquí. El puerto de conexión. Hagámoslo por 65 coma. Y ahora tenemos que implementar la autenticación. El usuario. Ahora tienes que incluir tu correo electrónico. Tétanos. Este es mi correo personal. Por lo tanto, asegúrate de arreglar en tu correo electrónico, derecho, en la sola cita, coma. Y aquí tienes que arreglar en tu contraseña también. Entonces digamos que mi contraseña es ABC a 23. Entonces por favor asegúrate de que el correo electrónico y la contraseña sean correctos. Si no lo tienes correcto, podría no funcionar para ti. Semestre en línea es definir los medios de opción de correo. Establezca de nuevo en objeto vacío. Por lo que aquí vamos a tener desde la columna data dot herramienta de correo electrónico. Entonces este es el correo electrónico de tu cliente, como si viniera del correo electrónico de tu cliente a tu propio correo personal, que es el correo de administrador. Entonces sólo tengo que copiar estos. Pega el asunto de vuelta tick mensaje del signo de dólar por aquí, abre y cierra el corchete rizado y luego el nombre del punto de datos, coma, HTML, tick atrás. Está bien, así que aquí no debes confundirte. Esta garrapata trasera se está abriendo aquí y está terminando aquí. Yo solo quiero hacer estos por claridad para que todos puedan seguir adelante. Ahora vamos a tener h3. Cierra esta historia de un aquí. Informaciones. Fuera de la historia. Vamos a tener una etiqueta UL. Y aquí vamos a tener una etiqueta LI. Ahora vamos a tener el principal viniendo de datos, nombre de punto, resalte, duplicarlo. Y vamos a tener el correo electrónico, data dot email ahora mismo. Por último, lo vamos a tener para un mensaje. Pero para eso, tenemos que salir de la etiqueta UL y de las técnicas. Todavía estamos en el HTML justo aquí. Vamos a tener un h3. Entonces básicamente lo que estamos haciendo es estamos diseñando el diseño para el que asumirá el mensaje correcto, en tu bandeja de entrada, ¿verdad? Por lo que estamos creando el diseño para el mensaje. Es tan simple como eso. Mensaje. H3, tener una etiqueta p y luego cerrar la etiqueta p. Justo en medio de la etiqueta. Vamos a tener un signo de dólar, abrir y cerrar corchete rizado data.me, ¿verdad? Entonces esto es todo por las opciones de correo. Entonces justo después de esto, nuestros objetos de correo, tenemos que enviar el mensaje con el mismo método de correo electrónico. Entonces todo lo que voy a hacer aquí mismo es SMTP transporter dot enviar correo, tomar las opciones de comida, y luego ponerlo a nuestra función. Por lo que estos a veces podrían arrojar un error. Por lo que tenemos que envolverlo en un bloque try. Entonces aquí deberíamos tomar el error también. ¿ De acuerdo? Correcto, y un bloque de cartas, vamos a devolver punto de respuesta. Entonces si la respuesta.status es un núcleo de 500 puntos JSON, vamos a pasar el mensaje. Aquí. Vamos a hacer un mensaje. El error del servidor IIS. Y también por aquí en el bloque try. Nuevamente, una vez más. Si response.status es de 400, vamos a hacer. Por favor, sienta y escuche la respuesta. El estado de punto es de 200. Entonces esto es un éxito, que es el mensaje. Entonces gracias por lo hermoso, ¿verdad? Entonces, ¿qué es lo que tenemos para exportar este módulo? Exportaciones de punto de módulo, router. Hermosa. Muy bien, entonces antes de terminar esta conferencia, tenemos que hacer una cosa aquí. ¿ Se puede ver este soporte de colonia? Esto es todo por aquí. Entonces no se supone que esto sea. Entonces todo lo que vamos a hacer en este momento es más destacado de la cagada. Aquí, ¿lo es? Por lo que debería terminar aquí. Comando V para pegar. Se puede ver, ya sabes, todo genial. Rápidamente, Vamos a ir a las mismas ideas e importar este módulo. Hagámoslo aquí mismo. ¿ Verdad? Entonces esto es todo por ahora, para esta conferencia. Nos vemos en la próxima conferencia. 46. Configura Gmail: Configuremos la aplicación en la mitad del correo electrónico, trabajándola en server.js. Aquí mismo. Tenemos que calentar la ruta. Ahora. Voy a hacer puntos arriba, usar karma. Ruta de contacto. Reformas seguro. Ahora abre el archivo package.json justo en el directorio de clientes para el front-end. Entonces voy a hacer Comando P paquete.json. Y luego aquí está, este tipo de aquí en el front end, que es el directorio de clientes. Haber hecho esta heroína a. Desplácese hacia abajo. Aquí está el proxy, resalte. Copia heroína al código VS, y luego péguela aquí. Guardar. Está bien, así que si tu aplicación no se está ejecutando ya, así que ahora voy a hacer Control C para detener el servidor. Entonces tengo que volver a empezar todo para que todos puedan seguir adelante. Ahora voy a hacer npm run dev. Por supuesto que debes saber que esto arrancará el front end y Oswald el back end. Vamos a darle una oportunidad haciendo clic en el mismo comprado en DOC que dice, por favor siéntase son los campos. Déjame mostrarte rápidamente aquí en VS Code y luego contáctame EGS. Entonces aquí es donde tuvimos la condición. Aquí está. Entonces si los campos están vacíos, tenemos que recibir este mensaje desde el back end y mostrarlo en el front end. Entonces déjame mostrarte en el back end donde realmente lanzamos este mensaje. Abre la ruta de contacto. ¿ Y por qué lo es? Por lo que el front end está recibiendo este mensaje por aquí. Entonces ahora cuando lo hagamos en cualquier éxito, vamos a agarrar este mensaje y luego mostrarlo al front end también. Ahora heroína al navegador a menos que checkout el correo y funcionalidad. Entonces antes de darle una oportunidad a la funcionalidad continental, tenemos que hacer algo aquí en el podría ayudar a nuestra copia estas Garza al navegador y luego pegarla aquí mismo. Entonces aquí sólo tienes que ponértelo. Ahora déjame apagarlo. Se puede ver así que sí, por defecto va a ser como estos si no lo has hecho antes. Entonces si es así, sólo tienes que ponértelo. Y esto es exactamente lo que necesitas configurar para Gmail. Enfréntate al portafolio para arriba. Y por aquí. Yo sólo voy a recargar. Entonces vamos a intentarlo. De acuerdo, entonces antes de que hagamos eso, tengo que mostrarte mi correo correcto. Para mayor claridad. Ahora, puedes ver nuestro derecho, harold hasta el final aquí voy a tener un gmail.com. De acuerdo, así que vamos a intentarlo haciendo clic en el mismo bote. Espéralo. Dice gracias por contactar a una neblina es significa que afortunadamente todo está bien como se sospecha, heroína al Gmail. Y déjame mostrarte. Están en lo cierto. Entonces aquí está. El nombre es un do baba, el correo electrónico es adobe.com y luego aquí está el mensaje. Todo es genial chicos siempre equipo está trabajando como se esperaba, pero algo anda mal, por lo que estos no deberían estar ahí. Entonces tal vez tengamos algún tipo en la ruta de contacto, por lo que revisaríamos eso más adelante. Ahora déjame mostrarte algo. Como puedes ver aquí, te darás cuenta de que la grasa tostada, que es la reacción para justificar, no está apareciendo. Heroína a código VS a menos que se implemente. Pasar al corticobulbar. Y por aquí tenemos copia baja, esta Importación. Copiar, reaccionar más para justificar harén a VS Code común P y luego establecer para nuestro app.js. Y por aquí sólo tenemos que pegar esta importación y luego envolver el arriba con el contenedor de tostadas. ¿ Cuál es la etiqueta de autocierre? Guardar. Y vamos a comprobarlo de nuevo. ¿Puedes ver eso? ¿ No es esto hermoso? Esto es realmente asombroso. A mí me gusta. Entonces vamos a intentarlo una vez más ahora voy a hacer click en el Enviar portacion. Espéralo. ¿ Ves eso aquí como los exagerados reacciona para justificar posicionado en la esquina superior derecha de la pantalla. Perfecto. Todo está funcionando como se esperaba. Entonces, vamos al Gmail. ¿ Verdad? Tenemos que ver, vale, aquí está el nuevo mensaje. El nombre es John, y luego el correo electrónico es D Dmu.com. Aquí está el mensaje. Está bien, así que por ahora, solo quiero que ignores estos, ¿de acuerdo? Definitivamente, o lo vamos a arreglar en las próximas conferencias. Todo esto es de nuestra primera conferencia. Nos vemos en la próxima conferencia. Mantente enfocado y cuídate. 47. Corrección de errores: Está bien, así que por aquí te darás cuenta de que dice mensaje de nombre de punto de datos. Obviamente hay algo mal en dónde tenemos que volver al código VS y arreglarlo rápidamente. Heroína a código VS. Está bien. Por lo que sólo hay que golpear en ruta de contacto. Disculpe, tengo que revisarlo de nuevo. Dice mensaje de nombre de punto de datos. Está bien. Por lo que esto debería estar en las opciones de correo. Tenemos que revisar el mensaje de sales a partir del nombre del punto de datos. Esto debería ser correcto. Muy bien chicos, ya veo, ahora tenemos que usar los corchetes rizados k Creo que este es el nombre correcto. Guárdala en el navegador, poco realista y fuera. Vuelve a la cartera, arriba, recarga. Vamos a intentarlo una vez más. Pero el nombre del cliente es Joe. El correo nos asumimos que es Joe en gmail.com. Joe, solo quiero decir, hola, me encanta tu proyecto de portafolio. Haga clic en el puerto de envío de entrada a menos que lo verifique. Hermosa. ¿Puedes ver eso? Mi bandeja de entrada y vamos a comprobarlo. Tenemos que recargar. Echa un vistazo. ¿ Se puede ver mensaje de Joe? Perfecto, me encanta. Ahora, todo está funcionando como se esperaba. Ozono. Este es efectivamente un portafolio clásico, actualmente portafolio arriba. Y déjame mostrarte una cosa más. Cuando el formulario se envía con éxito, queremos despejar los campos, ¿no? Entonces, lo que significa que queremos establecer los campos en su estado predeterminado. Por lo que Garza al código VS a menos que haga eso semanalmente. Contáctame VGS. De acuerdo, bien, en esta función aquí abajo donde tenemos el sexo SOC de un heno. Por lo que aquí vamos a establecer los campos a sus conjuntos de estado por defecto Nim. Tenemos que establecer nombre a una cadena vacía, resaltar duplicado dos veces. Y luego por aquí tenemos que cambiarlos por correo electrónico. Y por último, tenemos que hacerlo por el mensaje. Seguro. Vamos a sacarlo una vez más. Relu k Así que intentemos volver a disfrutar esta vez, Joe. Y él va a ser joe.com. Se puede ver No. Y cuando el mensaje sea subtextos se refrescarán. Entonces, dirígete a la bandeja de entrada. Aquí está el nuevo mensaje de trabajo. Actualmente arriba. Precioso, me gusta. Entonces amigos. Este es el fin de todo el proyecto. Deja esperar que te encantará. 48. Limpiar el código y prepararlo para la implementación: El paso final antes desplegar su aplicación en Heroku. Código Heroku VS, a menos que realice los cambios necesarios. Abrió el testimonial, testimonial JS y lo tiene. Está bien, harold al escritorio donde se encuentra el proyecto. Y por aquí lo tengo en la esquina superior derecha de la pantalla, portafolio Pro, que es el directorio raíz o se ha abierto el público cliente. Aquí mismo. Voy a copiar el paquete, IMG. Copiar, volver, procede a la SRC, y luego pegarlo aquí justo en el SRC. Vuelve atrás, abre al público una vez más. Desechar heroína al navegador, y veamos si se recarga. Desplázate hacia abajo hasta el testimonial n. Esto es lo que vas a ver en pantalla que preocuparte, vamos a tener esto fijo en un código GP de heroína a VS. De acuerdo, Así que la pata y déjame mostrarte aquí mismo, vamos a importar las imágenes. De acuerdo, así que voy a hacer importación, discúlpame, vamos a tenerlo abierto como RC IMG. Ahora, estas son las diversas imágenes que es relevante para el componente testimonial. Vamos a importar es. Echemos un vistazo a los testimonios. Aquí tenemos a la dama dot PNG, llámalo P cagarse. Y voy a nombrar a esta imagen dama de una vez la cabeza, SRC slash IMG. Ese es el amoniaco slash lady dot PNG. Guardar. Desplázate hacia abajo hasta el primer testimonio y lo odia. Entonces lo que voy a hacer bien en esta etiqueta SRC, límpiala, y luego abrir y cerrar el soporte rizado. Tenemos que tomar la imagen, señora. Seguro, está bien. Heroína al navegador, recarga. Se puede ver este es el primer testimonio. Plaza. Se puede ver la imagen ha aparecido. Vuelve atrás. Ahora tenemos que hacerlo por el resto de los testimonios. Y por aquí tenemos la imagen para ser myc dot PNG, agarrar resaltar, duplicado cuatro veces 1234. De acuerdo, entonces aquí tenemos que importar Mike dot PNG. Desplácese hacia abajo primero testimonia, el círculo y la Fed. Disculpe. De acuerdo, Aquí está la Fed. También señora dot-dot-dot Y bien. Y también tenemos man dot PNG scroll up. Entonces solo tengo que importar todos los archivos o imágenes main.py Y desplazarme hacia abajo por última vez. Déjame mostrarte. Por lo que el FUTA está jodido. Sólo tenemos que importar todas las imágenes. Limpia esto. Chicos geniales. Con esto, estamos bien para ir. Entonces por aquí, vamos a darle un nombre. Este debería ser mi fin. Estos deben ser y esto debe ser de forma. Muy bien chicos, esto es todo para la importación. Por lo que tenemos que consumir estos insumos. ¿ De acuerdo? Esto es lo que un micro, justo en el SRC, limpie esto de abrir y cerrar soporte rizado, luego llévatelo Mike. Es tan simple como eso. Y también tenemos que hacer lo mismo aquí mismo. Y esto es para la señora otra vez. Por último, para el fondo curvilíneo alrededor del navegador y frío, todo es reconocido como espectadores. Esto es todo por ahora. En la próxima conferencia, desplegaremos este proyecto en Hiroko. Cuídate. 49. Deploy a Heroku: Está bien, Es hora de los playmates. Y por supuesto, al final de esta conferencia, deberías tener tu aplicación en vivo por Internet. Suena bien, hermoso. Garza al código VS a menos que proceda, abra el server.js. Y si yo aquí, vamos a crear un activo estático para que heroku ponga nuestros archivos. Y lo vamos a hacer aquí. Nosotros lo vamos a hacer en base a condición. Si proceso puntos, ENV, punto, carga en el marcador, envidia y yo te muestro rápidamente como heroína al archivo ENV. Entonces aquí Está. Volver al servidor. Entonces si esto es igual producción, lo que significa si estamos desplegando la aplicación. Ahora, esto es lo que vamos a hacer. Nuestro promotor, tenemos que crear una carpeta. Y voy a hacer ABC dot enorme. Y por supuesto, esta va a ser una función de middleware. Express dot comenzó justo aquí, justo en el del cliente vamos a crear el hermoso orden. Entonces, básicamente, el express.static entrega archivos estáticos como HTML, CSS, y el resto de ellos. Cuando queremos usar el Butte, queremos guardar estos archivos en el hermoso orden. Entonces si un cliente hace una solicitud o queremos enviar primero el index.html. Y por supuesto, debes saber que el index.html comprende toda la aplicación. Abc dot, consigue. Está bien, esquina. Aquí vamos a tomar dos parámetros, solicitudes y respuesta. Y por favor otra vez, no cambies los parámetros. Déjalo de la manera que veas hoy. Ahora vamos a hacer rest dot, enviar archivo, path, dot resolve, underscore, underscore, DIR name, que es el nombre del directorio, es el cliente, coma. Y entonces aquí tenemos el BWT. Y ahora tenemos que apuntar al índice de punto HTML. Es tan simple como eso. Sálvala, ¿verdad? Todo está bien. Ahora la línea es iniciar sesión en Heroku, heroína al navegador y buscar heroku.com. De acuerdo, ya estoy conectado, así que solo tengo que cerrar sesión, así que solo lo arrancaré desde cero. Entonces esto es exactamente lo que vas a ver si tienes una cuenta con Heroku, todo lo que tienes que hacer es ingresar la dirección de correo electrónico y tu contraseña. Pero si no tienes una cuenta, solo tienes que crear una para ti. Entonces para hacer eso, baja aquí y luego presiona el botón de inscripción. Al presionar el botón de inscripción, te va a llevar a una página donde rellenarás los datos necesarios que se requieren y luego tendrás abierta tu cuenta. Entonces si ya tienes una cuenta aquí, solo voy a quedarme en mi cuenta de Gmail, Gmail y luego hacer clic en el enlace de inicio de sesión. De acuerdo, Entonces cuando mires el borde izquierdo de la pantalla, verás algunos de los proyectos que he desplegado en heroku. Aquí. Puedes ver, no te preocupes, si eres nuevo en Heroku y aún no has desplegado ninguna aplicación, así pieza estará vacía. Entonces no quiero entrar en pánico. Y en el lado derecho de la pantalla se encuentra una breve descripción de esta aplicación. ¿ Ves eso aquí? La descripción de las aplicaciones es correcta? Entonces para crear una nueva aplicación, solo tienes que hacer clic en el mediodía, Ok, y luego crear una nueva app. Es tan simple como eso. Y aquí vamos a darle un nombre. Portfolio Pro. Dice que el portafolio Pro no está disponible. Eso significa que este nombre ya es elegido por alguien más. Entonces, está bien. Entonces vamos a tener aquí y hacer cartera. Muy bien, así que este nombre está disponible. Tenemos que hacer uso de este nombre es bonito, pero sí, así que tenemos que hacer uso de él. Y por aquí tienes que elegir dónde te encuentras, ya sea en Estados Unidos o Europa. Entonces lo voy a dejar como Estados Unidos. Y luego haga clic en la pestaña Crear. Desplázate hacia abajo y déjame mostrarles dos tienen la aplicación desplegada en Heroku. Vamos a usar todas estas instrucciones, heroína a código VS a menos que proceda con eso. Por aquí en código VS, la primera vez que vamos a hacer es inicializar el comando B. Por supuesto, ya sabes, debería aparecer el Explorador. Así que abre los clientes en. Déjame mostrarte justo aquí. Vas a ver a esos guids por aquí. ¿Ves eso? Pero para algunos de ustedes, puede que no tengan que llegar allí. Todo lo que tienes que hacer es venir aquí en la esquina inferior izquierda de la pantalla. Y vas a ver el icono de configuración por aquí. Haga clic aquí en dos ajustes. Justo en la caja de arena, vamos a buscar Fausto excluir. Y estos son los expedientes excluidos. Entonces si el tuyo no está ahí en el directorio de clientes, debería estar aquí. De acuerdo, así que solo tienes que buscarlo y luego presionar este botón por aquí para eliminarlo del archivo SQLite. Entonces todo lo que tienes que hacer es hacer clic en este ícono por aquí. ¿ Verdad? Entonces sólo voy a cerrar su kn después de toda la lucha. Lo siento mucho, no lo vamos a usar y el directorio de clientes. De acuerdo, así que aquí están las guids. Haga clic derecho, chatarra. Cierre el directorio del cliente, y luego salga del directorio raíz portfolio pro. Por favor, asegúrate fuera de ese cliente directorio. Y aquí estamos en el directorio raíz. Puede ser un determinante y luego venir a ver. Por lo que estamos en el directorio raíz portafolio Pro. Lo que voy a hacer ahora mismo es inicializar la puerta y cosechas en el directorio raíz. Se mete en ella. ¿Puedes ver eso? Calor en la tecla Enter de tu teclado? Y aquí está el bien de un cabello en el directorio raíz. Por lo que aquí la intención es sumar todo esto cae en la puerta. Muy bien, hagámoslo rápido. Nuevamente, heroína a la terminal. Ahora vamos a hacer git, añadir espacio punto. ¿ Se puede ver lo que hice en la pantalla? Obtiene espacio, impar, espacio, no. Y esto sumará todos los archivos a la puerta. El nido y la línea es cometer estos cambios. A Heroku, Heroku. Aquí tenemos que copiar el git commit. Y aquí está. Copiarla en código VS. Pégala justo en la terminal. Otra vez. Vuelve a aquí. Tenemos que copiar esta instrucción. Copia. Ven aquí, pega. Está bien, Así que heroína a Heroku otra vez. Ahora tenemos que empujar la aplicación a Heroku, copiar este comando, heroína en el código VS, pegar a la derecha en la terminal y luego presionar la tecla Enter de tu teclado. Esto va a disparar la aplicación y desplegada en Heroku. Y esta Butte va a tardar un rato. Entonces sólo tengo que pausar la grabación. Aplicación desplegada con éxito. Ahora puedes abrir esta aplicación en código VS en Heroku y abrir la aplicación. Entonces si quieres hacerlo en VSCode, solo tienes que hacer es Heroku. Y esto dará inicio a la vida del proyecto en el servidor Heroku. Esperémoslo. Hasta antes. Esto es realmente asombroso. A mí me gusta. El aplicativo está en vivo en internet. ¿ Verdad? Me encanta. Vamos a sacarlo rápidamente sobre MI currículum. Pruebe amoniaco, y póngase en contacto conmigo. Hermoso, me encanta. Entonces vamos a darle una oportunidad a la funcionalidad continental. Por 41 vez despliega esta aplicación en Heroku y el correo electrónico no va a funcionar. ¿ Sabes por qué? Simplemente porque tienes que dar acceso a la máquina Heroku para Gmail, heroína al código, cómo el poder abrió los materiales. Podría ayudar a nuestro desplazamiento hacia abajo. Y aquí está. Dale acceso a la máquina Heroku a tu Gmail. Copia este enlace aquí en el navegador. Y oye, sólo tengo que pegar. Todo lo que tienes que hacer es dar click en el botón Continuar aquí abajo sobre la aplicación y vamos a comprobarlo. Portafolio. Por lo que el nombre de VM va a ser Joe Gmail. Gmail.com. Y alegría sólo quiero decir hola. Hola. Haga clic en el botón Enviar. Aquí vamos. ¿Se puede ver que todo está funcionando como se esperaba? Vamos a comprobarlo en el Gmail. Por lo que Garza a la bandeja de entrada. Puedes ver aquí el nuevo mensaje de Joe. Y Joe dice, hola David. Este es el nombre del remitente, el correo electrónico del remitente. Y este mensaje viene de Joe. ¿ No es esto hermoso? ¿Clásico? Tomemos un átomo plataformas móviles. ¿ Ves eso? Todo está funcionando perfectamente bien? Y por supuesto, esto ya está desplegado en el salvavidas. Puedes usar tu teléfono para abrirlo y comprobarlo. Perfecto. Este es de hecho un clásico proyecto de cartera. Esto es a menudo ahora para esta conferencia. Y en la próxima conferencia, vamos a empujar el código SAAS a GitHub. Nos vemos en la próxima conferencia. Cuídate. 50. Deploy para git: Está bien, así que vamos a empujar el proyecto, lo llevamos salto Heron al navegador rápidamente. Entonces por aquí solo tienes que hacer github.com. Está bien, Bonito. Entonces si no tienes una cuenta con GitHub, todo lo que tienes que hacer es dar click en Regístrate, llenando los datos necesarios y tener tu cuenta configurada. Por lo que ya tengo una cuenta. Sólo tengo que firmar un y aquí voy a proporcionar mi correo electrónico. Aquí está mi correo electrónico y mi contraseña. Entonces firmando hueso aquí es mi cuenta de GitHub. Cuando mires el lado izquierdo de la pantalla, verás los diversos proyectos que he desplegado en GitHub. Y aquí v. Así que para ti, si esta es tu primera vez usando GitHub, posible que no tengas nada ahí. Por lo que para crear un nuevo proyecto, haga clic en este ícono aquí mismo en la esquina superior derecha de la pantalla. Este ícono más, ¿verdad? Oye, ¿lo ves? Y luego nuevo repositorio. Tenemos que especificar el nombre del repositorio. Portafolio Pro. Entonces aquí tenemos que proporcionar la descripción, pero esto es opcional, pero te aconsejo que siempre le des una descripción. Enfriar. Desplácese hacia abajo. Haga clic en Crear Repositorio. Muy bien, entonces ahora vamos a seguir estas instrucciones para desplegar el proyecto. Heroína a VS Código. Ven a ver y por favor sí asegúrate de que estás en el directorio raíz. Tan importante. Y está bien, vamos a cerrar esto. Ya no necesitamos esto. Entonces sólo tengo que fregar otra vez. Escriba. Aquí en el directorio raíz, tenemos que inicializar la nueva puerta. Entonces aquí voy a hacer el bien en ello. Y oye, es después de inicializar la puerta, ¿Qué más tenemos que hacer? ¿ Alguien puede decírmelo? Está bien, no te preocupes, te ayudaré. El siguiente en línea es agregar los archivos a la puerta. Todos estos archivos de aquí, vamos a sumar a la puerta. Entonces para hacer eso, está bien. Déjame dejarte para que puedas hacer eso. Dale una oportunidad. ¿ Verdad? Simplemente tienes que hacer consigue espacio, puntos. Sáctala. No te aferres a Heroku, lo siento, heroína para conseguir a Rava. Y por aquí tenemos que copiar este comando. Y por supuesto, esto va a ser fest commit. Colby. Bajen a la terminal, peguen de nuevo. Pero para conseguir, también tenemos que copiar este comando. Copia esta instrucción aquí. Ven a la terminal, pega, pulsa en la tecla Enter. Y por último, tenemos que empujar el proyecto para conseguir hop, volver atrás. Y ahora sólo tenemos que copiar esto. Copia. Entonces tenemos que hacer algunos cambios aquí. Aplastado en la llave para conseguirlo arma de fuego. De acuerdo, entonces la operación es exitosa. Tenemos que comprobarlo en GitHub, harold a GitHub. Todo lo que tenemos que hacer ahora mismo es recargar. Echa un vistazo. Se puede ver hermosa. Ahora tenemos el proyecto desplegado en GitHub. Y espero que hayas aprendido algo hermoso en este curso. Están en lo cierto.