Fundamentos de React para principiantes absolutos | Crea tu primer sitio web de portafolio

1. Introducción al curso: Oye, ahí. Bienvenido a este curso sobre fundamentos de reacción Soy Fazal, un emprendedor y un entusiasta de la tecnología que se apasiona en ayudarte a dominar las tecnologías modernas que pueden ayudarte a hacer la tuya y a los demás Ahora bien, en este curso en particular, vamos a cubrir los fundamentos de reaccionar, y hay una amplia gama de temas que voy a tocar en este curso en particular Entonces empezaremos. Entonces tengo este temario por aquí, primer lugar, tengo los beneficios del curso en cuanto a por qué deberías tomar este Ahora para empezar, comenzaremos con la visión general de reaccionar, qué es reaccionar y desarrollo web. Así que obtendremos una visión general completa de cómo funcionan las cosas cuando estás trabajando con React. Estaría haciendo una configuración de proyecto, ¿verdad? Y para la configuración del proyecto, haremos uso del código VS y Wheat. Estas dos son como herramientas de comercio de producción que se están utilizando cuando se trata de desarrollo web. Entonces vamos a estar aprendiendo sobre ellos. Descubriremos GSX. Ahora bien, qué es GSX y todo si nunca has oído hablar de estos términos, no te preocupes, te tengo cubierto dentro del curso Esto es solo una visión general que te estoy dando con los temas que básicamente necesitas conocer. Bien. Después hablaremos los componentes, props, callbacks Entonces todos estos conceptos voy a tocar. Después desestructurando y propagando la sintaxis. Entonces, ¿cómo se puede hacer uso de la sintaxis de desestructuración y propagación, que es un concepto de JavaScript con aplicaciones web de reacción o reacción es lo que debería decir Y luego vamos a tener un proyecto práctico en el que vamos a estar tomando todos nuestros aprendizajes y lo estaremos implementando para construir un sitio web de portafolio. Ahora, este sitio web de portafolio te va a dar una práctica completa de lo que hayas aprendido en todo el curso, y te dará la suficiente confianza para que puedas salir y construir cosas con reaccionar. Ahora, mientras aprende de este curso, hay un par de beneficios. Número uno, conferencia práctica. Entonces entiendo cuando se trata de aprender tecnología o desarrollo, los estudiantes prefieren las conferencias prácticas, el uso mínimo de diapositivas. Así que apenas uso diapositivas. Me aseguro de todo, desde el Ovie de react, desarrollo web hasta construir el sitio web de la cartera. Todo está cubierto de manera práctica. Ahora cuando hablo de Ovie de reaccionar y por qué reaccionar en realidad se inventa y por qué realmente existe, realidad te dan ejemplos en el navegador de cómo cuáles son las cosas o cuáles son los problemas que estaban ahí antes de reaccionar se compró en, y cuando reaccionó entró, cómo resolvió esos problemas Entonces todo esto con ejemplos en vivo. Entonces por eso he dicho que las conferencias son prácticas. Pasamos la mayor parte del tiempo en el navegador y el IDE. Y luego tenemos un cierre con la ayuda de proyecto. Entonces este es uno de los beneficios importantes en donde también se llega a construir cosa al final, que es un sitio web de cartera. Entonces esa es la visión general del curso, y al final de este curso, puedo garantizar que vas a tener una base sólida con reaccionar, que te dará la confianza suficiente para ir y aprender conceptos mucho más avanzados con respecto al desarrollo web. Además, este curso en particular viene con un proyecto que puedes consultar en la sección de proyectos. Y al final, una vez que hayas terminado con el curso, podrás hacer el proyecto y entregarlo y compartirlo con toda la clase. Entonces, ¿a qué esperas? Te veré dentro de la clase. 2. Introducción a React: Oye, ahí. Bienvenidos, y comencemos a hablar de reaccionar. Entonces hablaremos de lo que es reaccionar, por qué existe tal cosa. ¿Bien? Entonces aquí, estoy en Google, y simplemente voy a escribir en react. Entonces en el momento en que escribas react, te van a presentar este sitio web oficial de react, que es react dot F. Ahora antes de visitar el sitio web, déjame hablar un poco sobre lo que es reaccionar. React es una biblioteca, como puedes ver aquí en la descripción, y es una biblioteca JavaScript. Si estás un poco familiarizado con el desarrollo web o si eres ingeniero en computación, sabrás que la web consiste esencialmente en SGML, entonces tenemos CSS e incluso tenemos JavaScript. Ahora, ¿qué es HTML? HTML no es más que el bloque de construcción de la web. Entonces, si haces click derecho sobre cualquier cosa por aquí, como cualquier elemento, estos son todos elementos, ¿verdad? Entonces, si haces clic derecho sobre alguno de los elementos, si dices inspeccionar. Estoy en Chrome y tengo esta opción, inspeccione. Y déjame bajar esto. Vas a ver todo el código por aquí. Puedes ver todos los elementos HTML aquí. Si has terminado en alguno de los elementos, vas a ver resaltado el elemento HTML correspondiente . Se trata de un DIF. HTML consiste esencialmente en etiquetas, se puede ver por aquí, etiqueta DIF. Entonces tenemos la etiqueta H dos. Estos son todos en etiquetas HTML construidas que los navegadores entienden. Se trata de navegadores modernos que entienden estas cosas. ¿Bien? Entonces esto es HTML. ¿Para qué se utiliza el HTML? Se utiliza para definir los elementos. Ahora lo que pasa es definir los elementos no es suficiente. ¿Bien? Necesitas embellecerlos. Por ejemplo, aquí, ves que esta reacción se está resaltando en negrita, ¿verdad? ¿Por qué se destaca en negrita? Porque he buscado reaccionar. ¿Bien? Hay un estilo particular para esto, ¿verdad? Se puede ver que esto se está resaltando como en gris claro, que es un poco diferente a esta cosa de aquí. Esto es un enlace, ¿verdad? Entonces esto se está resaltando de manera diferente. Entonces, si hago clic derecho por aquí y si inspecciono verás que esto es H tres y una etiqueta. Aquí puedes ver una etiqueta. Entonces, en HTML, creas enlaces usando la etiqueta A. Ahora si expandes un poco, aquí es donde verás todo el CSS. Se puede ver. Entonces una etiqueta, esta es la etiqueta A, y aquí puedes ver el CSS, el color se define como azul. Si cambio el color por digamos rosa, rojo, verás que el color se está cambiando en el navegador. Se puede ver que esto es completamente en tiempo real. Si quiero cambiar esto por digamos amarillo, ¿qué color quieres? Bien. Para que puedas cambiar el color. Así es como se está agregando embellecimiento a las páginas web. Bien. Para que veas, embellecimiento está siendo controlado por CSS Qué es este código, puedes ver por aquí, este código es CSS. Así que estás diciendo para la etiqueta A. Ahora qué es Una etiqueta Una etiqueta está por aquí, que es que si coloco el cursor sobre una etiqueta, verás que la etiqueta correspondiente está resaltada o el elemento correspondiente resaltado a la izquierda, cuando coloques el cursor sobre la Entonces es el reaccionar, este texto de reaccionar. Eso es lo que es. Aquí tienes CSS para lo mismo. Una etiqueta, dice todo el etag. Yo pongo el cursor sobre Etag, verás que todas las etiquetas e están resaltadas en el lado izquierdo, Entonces ahí es donde se están usando todas las etiquetas, lo que significa que ahí es donde se están renderizando todos los enlaces porque estos son todos enlaces, ¿verdad? Entonces quiero que todas las etiquetas e sean de este color. No quiero ningún tipo de decoración de texto. Eso es lo que estás definiendo aquí. ¿Bien? El cursor se está cambiando a puntero. Entonces, si coloco el cursor sobre esto, puedes ver que se está cambiando el cursor, ¿verdad Se está cambiando a puntero. Eso puedo inhabilitar. Bien. Bien, no me está permitiendo anular eso, pero está bien. El punto es entender qué es CSS? Se puede ver que viven por aquí, ¿verdad? Entonces voy a tratar de llevarlo al color por defecto. Fue algo así. Bien. El amarillo y el verde no se ven tan naturales. Pero entiendes, esto es CSS, ¿verdad? Entonces tienes algo llamado JavaScript. Ahora, ¿qué es JavaScript? JavaScript da vida a las páginas web. Así que cualquier tipo de validación que quieras hacer en las páginas web, cualquier tipo de pop up que quieras mostrar, puedes hacer todo eso. Bien. Entonces, si quieres ver JavaScript en acción, podemos ir a la pestaña Console por aquí en la parte superior. Bien. Y esta es la consola del navegador. Entonces aquí puedo decir alerta, y simplemente puedo saludar aquí, algo así. Se puede ver hola. Esta es la alerta. Así que cualquier tipo de validaciones, pop ups o cualquier tipo de cosas dinámicas que quieras hacer, puedes hacer uso de Ja ¿Bien? Así que Ja Script le da vida a tus páginas web. ¿Bien? Ahora bien, lo que es React React es una biblioteca JavaScript. ¿Bien? Pasemos al sitio web de React y entendamos por qué existe esta cosa. 3. ¿Cómo funcionaba la web antes de React?: Ahora, entendamos cómo solía funcionar la web antes de reaccionar. ¿Bien? Entonces lo que solía pasar es, esta es una página web, y tienes diferentes elementos interactivos por aquí. Puedo dar click en la barra de la NAF y puedo ir a otra página. Ahora, cuando se carga una página web, se carga HTML, se carga CSS, se carga Ja script. Ahora, cuando cambias a otra pestaña por aquí, de nuevo, se vuelve a cargar todo el asunto HTML se vuelve a cargar. CSS se vuelve a cargar y Jascript se vuelve a cargar. Si voy por aquí, de nuevo, todo se recarga. Da click en Comunidad, de nuevo, todo está recargado. Entonces esto no es eficiente. Ya sabes, cada vez, aunque CSS y Jascript no cambian y es constante en todo el lado, estamos recargando ¿Bien? Y esto no es bueno, ¿verdad? Esta no es la forma eficiente, y a los humanos nos encanta ser eficientes, ¿verdad? Y por eso existe reaccionar. Entonces te voy a decir cómo reaccionar es diferente. Así que react se utiliza para hacer aplicaciones web de una sola página. ¿Qué significa eso? Entonces lo que pasa es que tienes esta aplicación web esta es una aplicación web. Es una página web. Es una aplicación web. Va a tener un marco afuera. Se trata de un marco y en su interior, por ejemplo, va a tener componentes. Por ejemplo, la búsqueda es un componente. Estas pestañas son un componente de barra NAV. Puedes crear una barra de NAV y puedes agregar cuatro botones allí. ¿Bien? Este botón también es componente. Esto también es un componente. Entonces la parte central también es componente. Toda esta página tiene un marco y dentro de este marco, tienes componentes dentro colocados. ¿Bien? Ahora bien, lo que pasa es, si quieres cambiarte para aprender por aquí, puedes ver que lo superior no cambia en toda la página web, ¿verdad? Entonces, ¿por qué quieres recargar esto? ¿No quieres recargar esto? Solo puedes recargar esta parte inferior, ¿verdad? Entonces, con la ayuda de esta arquitectura basada en componentes, esto se hizo posible. Entonces, en lugar de recargar toda esta página web, aunque Navbar sea constante, estás recargando todo eso No es eficiente, ¿verdad? Está consumiendo tus datos, está consumiendo actividad de red. También está consumiendo potencia de procesamiento. No es eficiente. Entonces es por eso que esta cosa basada en componentes entró en escena donde solo el componente donde había un cambio solía ser recargado Entonces, si vas a referencia, solo se recargará esta parte. Si cambio a esto, sólo se recargará esta parte. Entonces eso es lo que es una aplicación de una sola página. Así que en realidad es una aplicación de una sola página como una página, y los componentes están siendo recargados ¿Bien? Y se están recargando dependiendo de dónde estés interactuando y cómo se construya la aplicación Bien. Entonces eso es lo que son las aplicaciones web de una sola página, y react se utiliza para hacer este tipo de aplicaciones web de una sola página. ¿Bien? Entonces lo que reacciona te permite hacer es aquí lo puedes ver, te permite crear componentes. ¿Bien? Ahora, como dije, aquí, esta cosa es un componente, esta cosa es un componente. Todas estas cosas pueden ser componentes que hayas definido, y luego puedes tener un marco, y dentro de este marco, puedes cargar todos los componentes. Eso es lo que reacciona te permite hacer. Bien. ¿ Y por qué te permite hacerlo? Por lo que acabo de explicar. Porque si vas a referencia, solo estoy recargando esta parte inferior No voy a recargar este Navbar. No voy a recargar este mensaje en la parte superior, ¿verdad? Sólo se está recargando esta parte inferior. Si hago clic por aquí, solo se están recargando las cosas del lado derecho. No es necesario volver a cargar toda la página web cada vez, ¿verdad Entonces eso es lo que reacciona te permite hacer. Permite crear componentes. Puedes crear componentes, ¿de acuerdo? Entonces, por ejemplo, puedes crear barra de búsqueda usando re puedes crear Navbar usando react, y luego puedes definir un marco, y dentro de ese marco, puedes ensamblar todos los componentes manera que quieras ¿Bien? Entonces de eso es de lo que habla esta cosa. ¿Bien? Entonces te permite construir interfaces de usuario a partir de piezas individuales llamadas componentes, y también tiene una demostración increíble aquí en el sitio web, ¿de acuerdo? Por lo que este sitio web podría cambiar la interfaz podría cambiar dependiendo de cuándo estés viendo este video. Pero ahora mismo estoy viendo este tipo de interfaz en el sitio web. Bien, si vienes ellos tienen este increíble ejemplo. No te preocupes si no entiendes este código. Lo que esta cosa está tratando de resaltar por aquí es que aquí hay componentes. Se puede ver que esta es una interfaz. Nuestra interfaz que quieres mostrar. Esta es una miniatura de video. Entonces tienes el título del video, descripción, el botón Me gusta, y así sucesivamente. ¿Bien? Ahora bien, aquí lo que has hecho es que has creado un componente llamado miniatura, así puedes ver aquí miniatura, Después se ha creado un componente llamado botón. Botón Me gusta. un componente llamado video. Se puede ver. Este es el video de componentes completo, puedes ver, ¿verdad? Entonces esto es reutilizable, como se puede imaginar, como botón, si quiero usar en algún otro lugar, solo necesito hacer uso de esta etiqueta. ¿Bien? Miniatura, necesito usar otro lugar, solo puedo hacer uso de esta etiqueta.Mañana si hay algún cambio en la miniatura, solo necesito hacer ese cambio en un lugar y se refleja a través de la Mañana si quiero cambiar cómo funciona la animación de este botón o cualquier tipo de cambio de interfaz de usuario por aquí, quiero cambiar el color del botón me gusta. Simplemente haces el cambio donde sea que hayas definido este botón. Dondequiera que lo hayas definido como botón, haces ese pequeño cambio y lo guardas, se implementa en toda la aplicación. Esa es la magia. La reutilización, como puedes imaginar, es una de las principales cosas con las que se está cruzando. Se puede ver por aquí. Bien. Puedes ver si trabajas tu cuenta o miles de otros desarrolladores, usar react siente lo mismo. Le permite combinar a la perfección componentes escritos por personas independientes. Y aquí se puede ver, esto es increíble, se puede ver aquí. Usando un poco de JavaScript, se ha renderizado. Creaste un video por aquí. Este fue un video que creaste y usando JavaScript, estás renderizando video tres veces, puedes verlo. Tres videos. ¿Bien? Y sintaxis, esta es una sintaxis de marcado que se conoce como SX Entonces JSX es algo que escucharás a menudo cuando estés trabajando con reaccionar, ¿de acuerdo? Entonces se trata de reaccionar y cómo funciona. Bien. Por lo que los animaría a todos a que simplemente pasen por este sitio web. También, para darte un ejemplo más, un poco interactivo. Podemos ir a ganar por aquí. Y si me desplazo hacia abajo aquí, pueden ver esto. Bien. Entonces aquí, lo que hemos hecho es esencialmente haber creado una función. Entonces esta es una función que está regresando botón. Y digamos que este puede ser cualquier botón. Entonces ahora mismo, es un botón muy sencillo, y dice, soy un botón. Bien. Pero digamos que si necesitas una especie de botón que sea específico en UI y mensaje a tu aplicación, puedes definirlo así. Y aquí, lo que has hecho está aquí, yo estoy como, renderizando este botón por aquí. Puedes ver mi botón. Entonces te diré lo que pasa es cuando estás desarrollando con HTML, tienes etiquetas incorporadas Tienes esta etiqueta H una, tienes etiqueta H dos, tienes etiqueta H tres. Y cada etiqueta tiene un significado, ¿verdad? H una etiqueta tiene un significado, si escribes algo usando H una etiqueta, se va a mostrar de esta manera en encabezado. Si reemplazo esto y esto es como un editor adecuado, entonces me permiten cambiar el código por aquí. Entonces, si cambio esto a H dos, así, puedes ver que esto mostrará las cosas de una manera diferente, ¿de acuerdo? El tamaño de la fuente es un poco más pequeño, ¿de acuerdo? Entonces, cada etiqueta que está incorporada en HTML tiene su propio significado. Entonces aquí puedes ver que esta es nuestra propia etiqueta personalizada. Así que react te permite crear tu propia etiqueta personalizada aquí. Hemos definido nuestra propia etiqueta personalizada, Mi botón. Esta es la función, botón M que hemos definido. ¿Cuál es la definición de MyButon? Esta es la definición. Así que cada vez que llamas a MyButon estamos llamando a Mbiton, estamos usando Mbiton Siempre que estés usando Mi botón de aquí, esto se devuelve, y esto se reemplaza por aquí de alguna manera. Entonces, todo esto está siendo reemplazado por aquí así cuando esto se renderiza en el navegador. Yo solo haré Control set. Hasta te lo puedo demostrar. Entonces, si hago clic derecho por aquí y digo inspeccionar, veamos por aquí qué está pasando. Así que voy a bajar esto un poco. Me desplazaré hacia la derecha. Se puede ver. Aquí no estás viendo mi botón. Entonces aquí en realidad estamos escribiendo Mbton en el código. Pero aquí no estás viendo a Mybton. Aquí está viendo que se está renderizando este código. Puedes ver Entonces lo que está sucediendo es donde quiera que estés usando Mi botón, durante el tiempo de ejecución, esto va a ser renderizado. La definición de botón M va a ser renderizado. Entonces déjame replicar esto. Voy a replicar esto y se puede ver que se agregó un botón más Bien. Ahora bien, si cambio la definición, soy A, déjame decirte que soy un botón increíble. Se puede ver, se refleja en todas partes. ¿Te imaginas esta magia? Al igual que cambias en una cosa, cambias en un solo lugar. Lo siento, cambias en un solo lugar y se refleja en toda la aplicación. Entonces, si tienes algún tipo de botones personalizados, me gusta personalizados, imagina construir Instagram. Estás usando botón en varios lugares, ¿verdad? Y tienes ese tema que mantener. Entonces creas un componente. ¿Bien? Lo usas en varios lugares, mil lugares que usas. Es necesario hacer un cambio en el componente. No hay problema. Vienes y haces un cambio por aquí. Y se refleja en toda la aplicación. ¿Bien? Entonces esto es lo que puedes hacer uso de este componente cualquier número de veces. Yo solo puedo seguir renderizando esto y verás que puedes ver la definición siendo sustituida por aquí. Entonces este es el beneficio de reaccionar. Así que como entendimos esto, react promueve el uso de aplicaciones de una sola página. Se pueden hacer aplicaciones web de una sola página. Esencialmente puedes crear tus propios componentes. Puedes reutilizar esos componentes. Por lo que promueve la reutilización. También te permite mantener tu código fácilmente. Entonces, si quieres hacer un cambio, haces el cambio en un solo lugar, se refleja a través. Así que mantiene las cosas ordenadas, ¿de acuerdo? Además, reaccionar es muy popular en estos días. Entonces si buscas el salario de react en tu ubicación, de donde sea que seas, puedes ver, así que esto es payscale.com para Estados Unidos y puedes ver, este es el salario en este momento que se está pagando por reaccionar desarrolladores o incluso desarrollador full stack se están pagando Hay muchos trabajos que exigen este conjunto de habilidades, y es importante que aprendas esto como ingeniero de software. Tanto si eres ingeniero de backend como quienquiera que seas, estos días, react también se está utilizando para crear aplicaciones móviles Bien. Así que sí, es muy importante que entiendas estas cosas y empieces a construir cosas usando esta tecnología. Entonces esto es reaccionar. Ahora bien, ¿cómo escribimos código en React? Entonces, para escribir código y reaccionar, necesitas NODJs. Ahora bien, ¿qué son los nogs? Entonces NODGS no es más que un tiempo de ejecución de Jascript y te permite ejecutar código Jascript en el lado del servidor Entonces eso es algo que necesitamos asentir Gs. También necesitaremos algo llamado como NPM. Ahora, ¿qué es NPM? Entonces NPM no es más que un gestor de paquetes para JavaScript, ¿bien? Se utiliza para administrar los diferentes paquetes que usas con JavaScript. Al igual que, se utiliza para instalar bibliotecas, herramientas, frameworks. Entonces, si quieres hacer uso de react, necesitas hacer uso de este gestor de paquetes. Bien. Además, necesitaremos algo llamado como código de Visual Studio. Entonces este va a ser el IDE, ¿de acuerdo? Y vamos a hacer uso de esto y tiene un maravilloso soporte para el desarrollo web también. Entonces vamos a hacer uso del código de Visual Studio para esto. Entonces viniendo a nuestro navegador, lo que vamos a hacer es que vamos a dirigirnos a Google y vamos a buscar NodeG Esto es algo que vamos a necesitar. Voy a dar click sobre esto y se puede ver por aquí. Aquí es donde necesitaremos instalar el nodo JS. Se puede descargar la versión de NodeJS LTS. Puedes descargarla desde aquí. E incluso puedes ir a la página de descargas. Y si necesitas algo personalizado como para Windows, Mac, puedes obtener la selección desde aquí. ¿Bien? El proceso de instalación es muy sencillo. Descarga esto como cualquier programa de software normal, y solo tienes que seguir las instrucciones de configuración e instalación. ¿Bien? Una vez que hayas descargado, lo que puedes hacer es acercarte a tu terminal y verificar si la instalación fue exitosa. Por lo que se puede decir nodo guión V. Debería ver esta versión siendo impresa Entonces tu número de versión podría ser un poco diferente al mío. Porque esto puede depender de cuándo estés viendo este video y si hay una versión más nueva disponible. Pero no te preocupes por el número de versión diferente. Se debe imprimir un número. Eso es lo que debes preocuparte. Entonces tecleas NPM. Así que necesitamos este gestor de paquetes de nodos también. Y se puede decir guión. Entonces esto también debería imprimir un número de Vosion. Está bien si es diferente a la mía. Pero necesitamos que estas dos cosas se instalen en su sistema. Entonces uno es el nodo JS, que es el runtime de JavaScript, y luego tenemos NPM, que es un gestor de paquetes Solo asegúrate de que tienes ambos de esto. 4. Crea tu primer proyecto en React: Oye, ahí. Entonces ahora es el momento de que comencemos a crear nuestra aplicación react, y lo vamos a hacer con la ayuda de la línea de comandos. Entonces primero lo primero, lo que voy a hacer es dirigirme o navegar a través de la línea de comandos hasta la carpeta del proyecto. Ahora lo que quiero decir con carpeta de proyectos es que es una carpeta de mi elección donde deseo tener mis proyectos de reacción organizados, ¿de acuerdo? Entonces, lo que puedes hacer es dirigirte al Finder. Como si estás en Mac, puedes dirigirte a Finder o si estás en Windows como yo, puedes dirigirte a Explorer, Bien y crear una carpeta en la ubicación que elijas, puedes llamar a la carpeta, lo que quieras Yo lo nombraría reaccionar. Y luego desde la línea de comandos, puedes simplemente navegar hasta la ubicación donde has creado la carpeta. Así que he creado esta carpeta de reacción aquí en esta ubicación en particular, y CD es el comando, que es cambiar directorio, y me está ayudando a navegar o dirigirme a esta carpeta en particular o a estar en esta carpeta desde la línea de comandos. Entonces ahora estoy en esta carpeta en particular, voy a borrar todo lo demás. Bien. Ahora en esta carpeta en particular, voy a comenzar a crear mi aplicación react. Y para esto, voy a hacer uso de NPX, ¿de acuerdo? Uy. Entonces ya he creado algunas aplicaciones de reacción antes. Entonces puedes ver esta sugerencia por aquí, bien, pero no hay nada que pueda hacer al respecto. ¿Bien? Pero ignora esta sugerencia por ahora porque lo que hace este uh terminal en particular es, lo que sea que vea en tu historia, simplemente te sigue sugiriendo, lo cual es bueno. Mostrando todo el comando, eso está completamente bien. Entonces NPX voy a hacer uso de NPX, ¿de acuerdo? Ahora, NPX es un derecho de sintaxis. Se usa para ejecutar los paquetes de nodo, o se usa para ejecutar los paquetes. Y luego vamos a hacer uso de Create react app. Bien. Ahora qué es la aplicación Create React. La aplicación Create React es una especie de herramienta que te ayuda a crear toda la aplicación React. Ahora bien, ¿por qué estamos haciendo uso de esto? Debido a que el proyecto react tiene que organizarse de cierta manera, necesita tener la carpeta SRC, necesita tener algunos archivos, y todo esto se une y te permiten o habilitan que te permiten o habilitan tu aplicación funcione de una manera perfecta, ¿verdad Así que también puedes ir y crear manualmente esos archivos, pero esta es una herramienta que te permite crear para crear o configurar la estructura de la aplicación de la manera correcta. ¿Bien? Y después de esto, solo voy a mencionar el nombre de mi aplicación, así puedo llamarla aplicación MyRact, algo así Bien. Y lo que puedo hacer es simplemente presionar Enter. En el momento en que presiono Enter, lo que esto va a hacer es que va a crear una carpeta en esta ubicación en particular. Entonces en esta ubicación en particular, se va a crear esta carpeta. ¿Por qué está creando una carpeta en esta ubicación? Porque he navegado a esta carpeta desde la terminal, y este será el nombre de la carpeta bajo el cual existirán todos los archivos de mi proyecto react ¿Bien? Entonces puedes presionar Enter, y deberías ver algún tipo de procesamiento sucediendo. Así podrás ver la creación de una nueva app de reacción en esta ubicación en particular. Está instalando algunos paquetes, y esto podría tardar un par de minutos. Entonces está instalando también te está diciendo lo que está instalando. Se trata de instalar react, react Dom, react scripts, y todo, todo lo que necesita. Entonces esperaremos un rato hasta que se complete todo este proceso y veamos una confirmación. Entonces tengo la confirmación, y también recibí un mensaje menor. Bien. Entonces para cuando comencé a grabar este video, hay una nueva versión menor, dice de NPM que está disponible, y me está preguntando si puedo actualizar Bien, entonces voy a actualizar más tarde. Puede que no veas esto, bien, pero sí, solo voy a ignorar esto por ahora. Es solo una notificación de actualización. Puedes ver la confirmación por aquí, happy hacking. Bien. Y si te desplazas hacia arriba por aquí, verás todo el proceso de lo ocurrido. Entonces ejecutamos este comando aquí. Uy. Déjame desplazarme hacia arriba. Entonces ejecutamos este comando por aquí. ¿Bien? Si vienes por aquí, puedes ver que agregó tantos paquetes. Tomó 36 segundos. Si vienes aquí, bien, ha dicho que el éxito creó esta aplicación en particular en esta ubicación y dentro de ese directorio. Entonces necesitas navegar a este directorio, y dentro de este, puedes ejecutar todos estos comandos por aquí. ¿Bien? Ahora, una vez que navegas te ha dado comandos listos para usar como NPN start Se iniciará en el servidor de desarrollo. Entonces, la aplicación react que has creado viene con un servidor inbilt incrustado Puedes ejecutar puedes ejecutar este comando para agrupar la aplicación y en archivos estáticos, básicamente para implementación de producción, esto iniciará el ejecutor de prueba en caso de que quieras ejecutar casos de prueba, NPM ejecuta expulsión Esto es algo que puedes correr. Entonces la sugerencia es, puedes comenzar por ejecutar esto por aquí. Voy a copiar esto. ¿Bien? Lo pegaré por aquí. Voy a dirigirme a este directorio, bien y luego te está diciendo que comience NPM. Ahora bien, este es un comando mediante el cual puedes iniciar un servidor de desarrollo en tu máquina local. Así que también puedo ejecutar este comando, ¿de acuerdo? Y se podía ver la aplicación en funcionamiento. Entonces esta es la aplicación, ¿de acuerdo? Se puede ver el navegador automáticamente abierto, y se puede ver, esta es la aplicación que está en funcionamiento. Ahora bien, este es un servidor, que te está mostrando tu contenido que está ejecutando tu aplicación react en el navegador. Ahora, cualquier cambio que hagas en los archivos, verás recargas en vivo sucediendo por aquí ¿Todo bien? Ahora, puedes ver el mensaje por aquí, como necesitas editar este archivo en particular y guardarlo para volver a cargarlo ¿Bien? Entonces esta interfaz viene de este archivo en particular es lo que dice. Y si das click por aquí, este es el enlace al sitio web oficial de react. Eso es a lo que se ha vinculado. ¿Bien? Así que puedes ir a ese sitio web y revisar o leer algunas cosas también. Bien. Pero algunas cosas que me gustaría mencionar por aquí es que una vez que hayas iniciado el servidor de desarrollo, puedes detenerlo presionando Control y C en Windows o Comando y C en Mac. ¿Bien? Estoy en Windows, así que presiono Control C, y pueden ver que terminó este trabajo en particular. Y aquí ahora, vienes si intentas refrescarte, esto no va a funcionar. Bien, porque el servidor está caído, ¿verdad? Ahora, para que tu servidor esté en funcionamiento, necesitas ejecutar NBM start dentro de esta carpeta en particular ¿Bien? Sólo entonces su servidor estará activo. Entonces, mientras desarrollas mientras haces desarrollo, puedes mantener el servidor encendido y realmente modificar los archivos y guardar y ver los cambios que ocurren en vivo. ¿Bien? Ahora, voy a hablar un poco más sobre este comando. Así que creamos la app react o toda la aplicación usando este comando en particular. Ahora también puedes agregar opciones por aquí al final. ¿Bien? Entonces lo que puedes hacer es hacer uso de las plantillas de aquí. ¿Bien? Ahora, digamos que cuando estés trabajando con react, también quieres hacer uso de mecanografiado ¿Bien? Entonces, si estás haciendo uso de mecanografiado, puedes agregar algo como esto Puedes decir plantilla por aquí, y puedes decir escribir script. No voy a ejecutar esto, pero esto es solo una información extra. Lo que esto hará es que hará uso de la plantilla de mecanografía para crear tu aplicación, y agregará el soporte de mecanografía desde el principio, lo soporte de mecanografía desde el principio, cual es útil si estás trabajando en un proyecto más grande que pueda beneficiarse de una beneficiarse Bien. Entonces puedes hacer uso de este comando de esta manera, bien. Espero que esta orden sea clara. NPX create react tap para que no tengamos el servidor abierto funcionando, pero ahora puedes reiniciar el servidor nuevamente diciendo NPM run NPM start. Lo siento. Entonces es inicio de NPM, algo así Y si lo inicias, volverá a iniciar el servidor. Bien. Entonces espero que esto sea útil y espero que hayas podido seguirlo. 5. Instalación de código en Visual Studio: Esta es nuestra primera aplicación basada en reaccionar, que creamos, ¿de acuerdo? O debería decir que no creamos. Bien. Por lo que este proyecto se genera automáticamente usando la aplicación Create React. Bien, y también nos está dando alguna pista por aquí. Puedes editar app dot qs y guardarla para recargarla. ¿Bien? Tiene un enlace para aprender a reaccionar, que te llevará al sitio web oficial de react. Muy bien, hasta ahora tan bien. Entonces esta es nuestra aplicación en funcionamiento. Ahora, ¿qué tenemos que hacer? Tenemos que empezar a codificar y modificar las cosas. ¿Y qué vamos a hacer por eso? Vamos a instalar un IDE que es el código ID de Visual Studio. Bien. Entonces así es como se ve. Si ya lo tienes en la computadora bien y bien, si no lo haces, entonces dirígete a este sitio web oficial. Es una herramienta gratuita. Es gratis, construido sobre código abierto, funciona en todas partes. Ya que estoy en Windows, me está incitando a descargar un establo construido para Windows Puede cambiar a cualquier sistema operativo que necesite. Pero si tu sistema operativo tiene un instalador por aquí, va a hacerlo automáticamente. Entonces, si estás iniciando sesión desde Mac por aquí, te va a mostrar la descarga de Mac. ¿Bien? Entonces, cualquiera que sea la plataforma desde la que estés abriendo esto, te va a mostrar ese botón y podrás pasar por esto si no estás al tanto de qué es el código de Visual Studio Pero solo descárgalo e instálalo como cualquier otro programa de software. Ya lo tengo instalado, así que no voy a estar mostrándote los pasos de instalación, pero los pasos de instalación no son para nada complejos. Es muy sencillo y directo. 6. Pasar al código de Visual Studio: Ahora, una vez que haya instalado correctamente el código de Visual Studio, verá una página como esta. Entonces, si abres el código de Visual Studio, por primera vez, verás esta página de bienvenida. Ahora, he sido usuario de código de Visual Studio por un tiempo, ¿de acuerdo? Y ustedes están viendo todos estos proyectos recientes. Entonces es probable que no veas la lista de proyectos recientes a menos que y hasta que seas usuario, ¿de acuerdo? Pero como soy usuario, como dije, estoy viendo la lista de proyectos recientes que he usado o creado en el pasado. También verás estas opciones por aquí, nuevo archivo, archivo abierto, carpeta abierta, repositorio Clone Git, conéctate a todo esto. Es una herramienta muy útil. Código de Visual Studio, lo uso todo el tiempo. Ahora, para abrir el proyecto, ya conoces la carpeta, donde has creado el proyecto. Así que simplemente puedes hacer clic aquí, Abrir carpeta y puedes navegar hasta la ubicación de la carpeta donde has creado el proyecto. Alternativamente, si por alguna razón no estás viendo esto, puedes ir al archivo desde las opciones del menú aquí y puedes decir carpeta abierta. Ambos son iguales. Entonces lo que voy a hacer es seleccionar Abrir carpeta. Voy a navegar al directorio de mi elección, y voy a abrir el proyecto por aquí. Ahora cuando seleccioné Abrir carpeta, vi esta ventana de carpeta, que es exploer navegarla hasta la carpeta donde he creado la app react Y seleccionaré esta carpeta en particular. Este es mi proyecto de app react que hemos creado. En el interior, verás algunos archivos, pero debes seleccionar la carpeta raíz. Diré seleccionar, y me abrirá esta carpeta en particular. Ahora puedo cerrar esta página de bienvenida por aquí, ¿de acuerdo? Entonces puedes ver el proyecto por aquí en el lado izquierdo, ¿de acuerdo? Puedes ver toda esta carpeta. Si expandes esto, verás los archivos dentro. ¿Bien? Entonces, cuando ejecutaste el comando llamado Create React app, bien con la app Create React, creó todo esto para ti. También puedes crearlo manualmente. Pero como puedes imaginar, esto va a ser muy tedioso, Para que esa herramienta en particular, aplicación Create react haga el trabajo por ti , en la que configura toda la estructura del proyecto para ti. ¿Bien? pasaremos por esta estructura de proyecto Pronto pasaremos por esta estructura de proyecto, pero por ahora, lo que también me gustaría explicar es que tenemos el servidor listo y funcionando desde la terminal. Ahora bien, lo que puedo hacer es que no necesito hacer uso de un terminal externo. El código de Visual Studio tiene una forma en la que realmente puedo tener un terminal dentro del código de Visual Studio. De esta manera, nunca tengo que dejar código de Visual Studio y cambiar a una terminal local. Aquí en la parte superior en las opciones, voy a ver terminal por aquí. Se puede decir nuevo terminal, y se puede ver que este es un terminal integrado dentro del código de Visual Studio. Y si dices PWD, que está presente directorio de trabajo, el terminal se abre automáticamente en la carpeta que has abierto dentro del código de Visual Studio, que es la carpeta del proyecto Entonces no necesitas navegar también, no necesitas ejecutar comando, CD, y todo y navegar, esto simplemente funciona como una terminal local. Entonces aquí, puedo decir que NPM empieza de nuevo por aquí. En el momento que diga, voy a obtener un error, pueden ver, algo ya está funcionando en el puerto 3 mil. Y lo que se está ejecutando, nuestra propia aplicación se está ejecutando, y nos está preguntando si quieres ejecutar la app en otro puerto en su lugar. Yo no quiero hacer eso. Voy a decir que no. Bien, y sólo va a detener la ejecución. ¿Bien? Pero lo que voy a hacer es que voy cerrar este servidor porque ya no quiero hacer uso de un terminal externo, ya sabes, externo por aquí. ¿Bien? Quiero apegarme al código de visual studio proporcionado terminal, y voy a iniciar NPM, y esto ahora debería ejecutar el servidor de desarrollo por ti ¿Bien? Entonces de esta manera, lo que podemos hacer es mover esto a una nueva Ventana. Entonces aquí estamos en la nueva ventana, y tengo código de Visual Studio ejecutándose en la nueva ventana. Así que de esta manera, no tengo que dejar nunca el código de Visual Studio. Incluso puedo minimizar esto por aquí así. ¿Bien? Incluso puedo crear nueva terminal desde aquí, así que puedes ver más, y puedes tener múltiples terminales corriendo por aquí. ¿Bien? Es muy útil, y esta es la razón por la que. Entonces, este tipo de herramientas que proporciona el código de Visual Studio, esa es la razón por la que es tan querido en la comunidad de desarrolladores. Ahora, también te voy a mostrar la lista de extensiones que tengo. Entonces aquí, si vas a esta pestaña de extensión en el lado izquierdo, tienes algunas opciones como buscar, tienes control de fuente, ejecutar y depurar, todo esto, ¿bien? Estoy haciendo uso de Docker también en algunos de mis proyectos, así puedes ver Docker por aquí también Pero tal vez no veas esto. ¿Bien? Esto necesita una extensión por separado, ¿de acuerdo? Pero si vas a extensión. Ahora, ¿qué son las extensiones? Por lo tanto, las extensiones le permiten mejorar o ampliar la funcionalidad predeterminada que ya proporciona el código de Visual Studio. Para que puedan ver, tengo extensión para cuaderno Júpiter. Bien. Siempre que estoy codificando en Python, y si quiero soporte para notebook, hago uso de esta extensión. Bien. Entonces tengo esta extensión. Esto no es necesario para reaccionar. Tengo extensión Python. Bien. Ahora bien, esta etiqueta renombrada automáticamente, esto podría ser útil para reaccionar porque, ya sabes, si estás renombrando una etiqueta, bien y si hay una etiqueta de cierre, lo que esto hará es que va a renombrar la versión paga de esa etiqueta en particular Bien, entonces esto es algo que puedes tener. Es útil. Por ejemplo, si tengo que darte un ejemplo, déjame darte un ejemplo. Entonces digamos si creo o me dejo abrir algún archivo por aquí. Bien, déjame abrir un archivo HTML. Ahora bien, esta cosa de aquí, ya puede ver, déjame ir por aquí, desplazarme hacia abajo. Entonces este título tiene una etiqueta de apertura y una etiqueta de cierre. Entonces, debido a esa extensión en particular, si renombro la etiqueta de apertura, se puede ver que también se está renombrando la etiqueta de cierre ¿Bien? Entonces ese es el beneficio de esta etiqueta auto renombrada No tienes que renombrar primero la etiqueta de apertura y luego cambiar el nombre de la etiqueta de cierre, ¿verdad? Colorización beta, como se puede hacer desde el propio icono, se utiliza para que el color resalta el par de cierre del soporte Esto es útil si estás haciendo uso de muchos corchetes en tu Okay, Debugger para Java, dev containers, jango doco todo esto lo uso para otros lenguajes, extensión de nuevo para Java, gradle para Java, código Intel. ¿Bien? Esto es para el desarrollo asistido por IA. Esto también es para esto es ejemplos de uso de API de Intelicode. Bien. Tengo algunos para Python. Entonces estos son todos relacionados con Python. Me desplazaré hacia abajo, un servidor en vivo. No necesitamos a este Maven para Java. Esto tampoco es necesario. Más bonita es algo que puedes usar. Esto da formato al código. Bien. Yo organicé el código para ti. Bien. Y si, esto es lo que tenemos Bien. También voy a añadir algunas extensiones ahora mismo por aquí. ¿Bien? Entonces, lo que puedes hacer es buscar fragmentos de código de reacción por aquí, algo como Bien. Bien, para que puedas buscar ES seven plus react, algo así. Y verás esta extensión con casi millones de instalaciones. Entonces esto es 12.9 millones ya que estoy grabando este video. Por supuesto, esto seguirá aumentando y es posible que veas un número diferente cuando estés viendo esto. Entonces esta es extensión. Este es el nombre ES seven plus react redux react Native snippets Ahora bien, lo que esto hace es que te da plantillas, ¿de acuerdo? Como, por ejemplo, si quieres crear una función, entonces puedes decir RAFC Simplemente puedes escribir eso y te dará toda la definición de función. Bien. Entonces este tipo de atajos que tiene, lo que te ayuda a ahorrar tiempo. Para que puedas instalar esto. Simplemente haré clic en Instalar y agregarlo a mi lista de extensiones. ¿Bien? Así que sí, ya lo tenemos instalado, ¿de acuerdo? Puedes explorar más complementos o extensiones de React en el mercado aquí y puedes jugar con él. Y puedes mejorar la funcionalidad predeterminada que ya te proporciona el código de Visual Studio. Todo bien. Entonces sí, eso se trata de configurar el código de Visual Studio, y espero que te haya resultado útil. 7. Explora la estructura del proyecto: Entonces ahora es el momento de que comencemos a entender la estructura del proyecto React. Ahora, cuando abres o cuando analizas la aplicación react que has creado, hay muchos archivos que verás. Algunos de ellos también son carpetas. ¿Bien? Entonces aquí se ve esta carpeta de módulos de nodo. ¿Bien? Y ¿qué es el módulo nodo? Este es un directorio que contiene todos los paquetes de NPM, como bibliotecas, dependencias en las que se basa tu proyecto Y generalmente durante el transcurso del desarrollo de su aplicación react, generalmente no necesitará interactuar directamente con esta carpeta en particular. Bien. Entonces sí, esto es algo que está ahí, necesitas saber qué es, pero no vas a estar trabajando en ello. Carpeta pública. Ahora, esta carpeta alberga todos los archivos estáticos como el punto de índice principal HTML, que contiene el div raíz donde se inyecta tu tap react. ¿Bien? Si no entiendes eso, no te preocupes. Eso voy a explicar, pero esto esencialmente tiene una lista para todos los archivos estáticos. Al igual que puedes ver las fabricas puedes ver un par de logos, manifiesto Jason robot dot HD y index dot HTML. Bien. Ahora, ¿qué es el índice de punto HTML? Ahora bien, este es el archivo donde se está inyectando tu aplicación react. Entonces aquí, este es el HTML estándar, se puede ver, bien, todo. Y aquí, ves título como react tap. Entonces cuando ejecutas la aplicación, ves el título como react tap. Si cambias el título, puedo decir que aplicación de reacción cambió por aquí, algo así. Y si guardo esto, si vienes por aquí, verás que la app de reacción cambió, ¿verdad? Y cada vez que haces un cambio, el servidor se recarga solo. Entonces si agrego tres pensamientos, y si guardo esto, verás que esto se refrescó, ¿verdad Y si vienes por aquí, los cambios se reflejan inmediatamente en el navegador también. Entonces me desharé de esto. Voy a guardar esto, y si vuelves, ya verás que es la aplicación React, ¿verdad? Entonces este es el archivo donde se está inyectando tu aplicación de reacción, ¿de acuerdo? Y aquí, si ves dentro del cuerpo, estás teniendo este DIF. ¿Bien? Ahora, estamos haciendo uso de este div raíz para inyectar la aplicación react por aquí. ¿Bien? Y cómo lo estamos haciendo, eso lo explicaré en breve. Por ahora, solo entiende que index o HTML es un archivo donde se inyecta tu aplicación react, y está ahí en el directorio público. Tienes carpeta SRC. Ahora la carpeta SRC es la carpeta donde ocurre toda la magia. Contiene todos los archivos JavaScript para su componente react, hojas de estilo, imágenes, todo lo que existe en esta carpeta en particular. Entonces, esencialmente, todo el código fuente relacionado con tu aplicación react en la que trabajarás reside en la carpeta SRC Entonces tú, como desarrollador de React, estarás construyendo aplicaciones y pasarás la mayor parte del tiempo en esta carpeta en particular. ¿Bien? Tienes Get ignore, claro, si lo has configurado por aquí, paquete log paquete JCN ¿Bien? Entonces esta es la JCNFle Entonces puedes decir que este es el corazón del proyecto cuando se trata de node package manager, NPM, ¿bien? Entonces este es un archivo que va a enumerar todas las dependencias que está usando tu aplicación, ¿de acuerdo? Y dependiendo de qué dependencias tenga este archivo en particular, bien, todas las dependencias se van a buscar de forma remota y se agregarán a la carpeta de módulos de nodo Así va a funcionar. Bien. Así que cada vez que añades una nueva dependencia, paquete JCN siempre se actualiza Entonces eso es lo que hace Package GSN. Bien. Pero ahora, echemos un vistazo a la carpeta SRC Entonces, en la carpeta SRC, encontrarás este archivo llamado app dot Qs Bien, antes de explorar la app dot js, vayamos al punto índice Gs. Index dot js es el punto de partida de nuestra aplicación react, ¿verdad? Y aquí es donde se renderiza el componente app. Entonces abriré index dot js, abriré app dot js, y simplemente colapsaré esto. ¿Bien? Ahora bien, si le echas un vistazo al index dot js, lo que hace esto es, es conseguir la raíz por aquí. Se puede ver documento punto Obtener elemento por ID, raíz. Ahora, ¿qué es root? Raíz que vimos por aquí. Esto viene de índice punto HTML. Entonces index dot js está obteniendo esta raíz y está renderizando. Puedes ver el renderizado de punto raíz aquí. ¿Bien? Está creando la raíz de React primero usando React Dom, y está renderizando la aplicación por aquí. Se puede ver la aplicación. ¿Todo bien? Ahora bien, ¿qué es la app? Entonces app no es más que app dot choir. Así puedes ver en la parte superior la lista de entradas, Importar app from dot App. Ahora, ¿qué es esto? Esta es la app dot chos. ¿Bien? Entonces aquí tenemos un componente definido este estaba predefinido, no lo definimos. Se definió. Estaba disponible por defecto para nosotros. Y esto tiene algún código que se está renderizando en la interfaz. ¿Bien? Entonces estamos renderizando este componente por aquí. ¿Bien? Y si vienes por aquí, esto es lo que estás viendo la interfaz de usuario. Puede ver editar src slash app dot Gs y guardar para recargar. Se puede ver. Entonces, si quieres cambiar la interfaz, tienes que editar app dot js. Entonces yap dot js porque eso es lo que se está renderizando. Y según las instrucciones, puedes modificarlo. Para que puedas ver editar App Js y guardar para recargar. Ese es el mensaje que ustedes están viendo por aquí, y ese mensaje viene desde aquí. ¿Verdad? Entonces, cualesquiera que sean los cambios que hagas por aquí, lo verás de inmediato. Así que reflexionarlo. Entonces puedo decir recargar y puedo decir actualizar por aquí, actualizar teclado Y verás aquí 1 segundo. Yo no lo hice. Bien. Actualización. Puedes ver que la actualización se agrega aquí. Entonces estoy actualizando en vivo y estoy viendo los cambios. Si vuelvo a guardar, si voy aquí, se elimina la actualización, ¿verdad? Así que cualquier tipo de cambios que quieras hacer en la interfaz, puedes hacerlo en APD tiene, ¿de acuerdo? Incluso puedes agregar más componentes como si solo estuviéramos renderizando una aplicación aquí. Como app es el componente definido a partir de APD tiene. Se puede ver que la estamos exportando por aquí. Bien. Entonces lo estamos exportando por aquí y se está importando en este archivo y se está renderizando por aquí. ¿Bien? Cualquier tipo de cambio que quieras hacer puedes hacer aquí. Y si quieres agregar más componentes, nosotros también podemos hacer eso, por supuesto. Vas a estar aprendiendo eso cuando vayamos un poco más profundo. Pero sí, espero que esto te dé una completa claridad en cuanto a lo que está pasando, por qué está sucediendo. Y encontrarás algunos archivos más como índice punto CSS. Puedes ver en los puntos de la aplicación, encontrarás la aplicación CSS que se está usando. Entonces estos son todos archivos CSS, bien que existen y están siendo utilizados. Tienes logo punto SVG. ¿Bien? Este es el archivo del logotipo. Bien. Entonces sí, se trata de la estructura del proyecto. Es bastante sencillo, y te da una idea de lo que está sucediendo una vez que se crea tu aplicación react cuando la ejecutas por primera vez Todo bien. Entonces espero que tengan claridad en cuanto a cómo se está renderizando esta interfaz, y espero que esto haya sido útil. 8. Nuestro primer proyecto en React: Entonces ahora es el momento de que hagamos un poco de experimentación con nuestro proyecto que hemos creado. Entonces lo que vamos a hacer es que vamos a modificar un poco el discurso para imprimir un mensaje personalizado de nuestra elección, y el mensaje que podemos imprimir es bienvenido a reaccionar, y esta es mi primera aplicación de reacción. Entonces ese es un mensaje que vamos a imprimir. Si crees que puedes asumir esto como un reto, bien, dependiendo de lo que hayamos entendido hasta ahora, estaría feliz si lo haces. ¿Bien? Entonces, pausa el video ahora mismo e intenta esto como un desafío en el que reemplaces este contenido que estás viendo, y lo reemplaces con el mensaje que acabo de decir, ¿de acuerdo? Para reemplazar las instrucciones también se dan por aquí, es necesario editar este archivo en particular, arc slash app dot CHS para realizar cualquier cambio ¿Bien? Entonces prueba esto. Y si no eres capaz de hacerlo, no te preocupes, volverás. Puedes regresar y reproducir este video y ver esta solución. Entonces espero que hayas tenido la oportunidad intentar esto como un reto. Lo que yo haría es comenzar con esta cosa en particular aquí. Me dirijo a SRC e iré a app dot Hs. ¿Bien? Ahora, app dot js se está renderizando. Entonces este componente de la aplicación se está renderizando en puntos índice chas. ¿Bien? Y este es el componente principal en estos momentos, ¿de acuerdo? Entonces lo que voy a hacer es que voy a venir aquí. Bien. De hecho, puedo minimizar esto por aquí. El servidor se está ejecutando. Entonces aquí, estoy regresando este DIF. Entonces no necesito todo esto, así que solo puedo deshacerme de esto. ¿Todo bien? Por aquí. Y entonces aquí puedo tener un mensaje. ¿Bien? Entonces puedo decir H uno. Puedo decir, bienvenido a reaccionar, algo así. Y puedes tener la etiqueta E P por aquí y puedes decir que esto está bien, esta es mi primera app de reacción. Algo así, y puedes guardarlo. En el momento en que la guardes, y si vienes por aquí, vas a ver aparecer este mensaje. ¿Bien? Ahora bien, se puede ver que esto es completamente pantalla ancha porque hemos eliminado muchos elementos por aquí, ¿verdad? Entonces eso es lo que hay que hacer. Otra cosa es, voy a mencionar por aquí, he racked estos dos elementos, o estos dos elementos HTML dentro de un TIF padre ¿Bien? Entonces lo que está pasando por aquí solo observa Esta es una función, una función normal de JavaScript, y estoy haciendo uso de logo por aquí, que en realidad, no lo sé. Voy a hacer un poco de limpieza. Bien. Ahora, estoy haciendo uso de la app dot CSS, este archivo CSS. Esta es una función que está devolviendo algo. Bien Está devolviendo esto, y estoy exportando esta función en particular. Y esto se está utilizando en índice, índice punto Qs. Se puede ver por aquí. Se está utilizando por aquí. Lo que significa que se está renderizando por aquí, y se está renderizando en root Def. ¿Bien? Entonces lo que está pasando es que estoy devolviendo esto bien, este código de aquí. Esta pieza de código se parece a HTML, ¿de acuerdo? Pero en realidad no es HTML. Se le conoce como JSX, ¿de acuerdo? Entonces Ja Script sintaxis XML porque puedes ver en HTML, si quieres escribir un nombre de clase, tendrás un atributo diferente por aquí. No vas a hacer uso del nombre de la clase por aquí, ¿de acuerdo? Entonces, en lugar de nombre de clase, escribirás clase en HTML. ¿Bien? Pero en Jx, harás uso del nombre de la clase. Bien. Y la sintaxis es muy similar a HTML. Entonces, si conoces HTML, esto sería bastante fácil. Bien. Y hay una regla que debes saber que está aquí al regresar la interfaz. Entonces, en realidad, estás construyendo una interfaz y la estás devolviendo desde el componente. Entonces, al devolver esto, debe asegurarse de que todo el elemento de la interfaz de usuario esté envuelto bajo un solo elemento. Por lo que sólo se puede devolver un solo elemento y no múltiples. Te voy a mostrar esto. Entonces si elimino esto Bien, puedes ver que empiezo a recibir un error. Puede ver que las expresiones JSX deben tener un padre. Y si trato de guardar esto y pasar por aquí, puedes ver todo tipo de errores por aquí. Se puede ver. Y te está dando el mensaje de error también. Bien, está diciendo que debe estar envuelto en etiquetas que encierran y necesitas un fragmento por aquí Bien. Entonces esa es la explicación que está dando. Yo solo haré Control S, y traeré de vuelta el TIF, y guardaré esto para devolverlo a su forma original de trabajo. Todo bien. Entonces espero que esto sea algo que hayas entendido y espero que hayas podido hacer esto. ¿Bien? Incluso puedes agregar tu introducción aquí. Como, Oye, yo soy, sea cual sea tu nombre, puedes agregar eso. Puedes guardar el archivo y verás el resultado en la página web. ¿Bien? Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 9. Introducción a Vite y cómo configurarlo: Entonces estoy aquí en mi terminal, bien, y he navegado a mi carpeta donde estoy creando los proyectos de react Entonces si digo LS, voy a ver un proyecto de reacción ya está creado por aquí. ¿Bien? Ahora bien, lo que quiero hacer aquí es hablar de trigo. Ahora, ¿qué es comer? Entonces WT es otra forma de crear proyectos de reacción, y WT es en realidad una herramienta de compilación moderna que ofrece una experiencia de desarrollo rápida y eficiente para aplicaciones web modernas, ¿de acuerdo? Y acelera el tiempo de desarrollo para los desarrolladores, y lo hace procesando archivos solo cuando realmente se importan, y es mucho más rápido. También tiene un servidor de desarrollo mucho más rápido, ¿de acuerdo? Así que hoy, si estás haciendo desarrollo de reacción, el trigo se está utilizando mucho. ¿Bien? Y si te diriges al navegador, si buscas trigo por aquí así, bien, verás que es un servidor de desarrollo local. ¿Bien? Es una herramienta frontal. Y si vas al sitio web de aquí, verás que es un Biltol para web Bien, y es una herramienta de compilación front-end ultrarrápida que alimenta próxima generación de aplicaciones web, ¿de acuerdo? Y puedes pasar. Puedes ver el inicio instantáneo del servidor a la velocidad del rayo, HMR. Soporta muchas cosas Ja script, mecanografiado. Bien. Y sí, puedes pasar por el sitio web y aprender más sobre lo que te permite hacer. Todo bien. Además, para explorar más, puedes hacer clic en Empezar aquí. Bien. Y se puede ver más sobre el trigo. Se puede ver cómo se pronuncia. Se pronuncia como Trigo Bien. Y puedes ver, estas son las plantillas que soporta, bien, Vanilla juice Vanilla TypeScript, view it supports react Todo esto lo apoya. ¿Bien? Entonces, si te desplazas un poco hacia abajo, también verás los comandos usando NPM, yarn, PNPM, y B. Pero estamos haciendo uso de NPN, así podemos hacer uso de Entonces lo que voy a hacer es mostrarte cómo puedes crear un proyecto usando VT. Bien. Incluso puedes crear un proyecto usando la app Create React, pero yo diría que es una forma más moderna de crear proyectos de React y trabajar en desarrollo web. ¿Todo bien? Eso es lo que todos hacen estos días. Bien, entonces debes saber qué es la TI y cómo puedes aprovecharla. Para que puedas ver este comando NPM crear Wet latest. ¿Bien? Para que pueda copiar esto. ¿Bien? Hay una versión más. De este comando particular. Entonces, una vez que ejecutes el comando, te avisará con qué tipo de proyecto quieres crear. ¿Cuál es el nombre del proyecto? Te diré qué plantilla quieres usar. Bien. Entonces todo eso, te avisará y podrás seleccionar las opciones. Pero si se quiere especificar las opciones antes con este comando en sí, sin pasar por el prompt. Entonces puedes decir directamente NTM create Wet latest especificar el nombre del proyecto, y especificar la plantilla también Por lo que especificó que la plantilla es vista. Puedes especificar la plantilla como reaccionar si estás trabajando en reaccionar aquí. Bien. O si estás trabajando en reaccionar con soporte de TypeScript, puedes decir reaccionar guión Dependiendo de lo que quieras hacer o qué tipo de proyecto estés creando, puedes especificar la plantilla. Bien. Pero voy a seguir adelante con este enfoque. Bien. Te voy a mostrar todas las opciones que nos pide. ¿Bien? Ahora, asegúrate de estar en la carpeta, que no es una aplicación de reacción. ¿Bien? Entonces estoy aquí en esta carpeta donde estoy creando todas las aplicaciones de react, ¿verdad? Entonces esta es una aplicación de reacción que tengo. Ahora, voy a ejecutar este comando. ¿Bien? Vaya, ésta no ¿Bien? El que copié, o debería ser éste. Bien. Lo pegaré por aquí. Así que NPM crea Trigo a más tardar. En el momento en que presiona Enter, te dirá que, Oye, necesita instalar los siguientes paquetes. ¿Bien para proceder? Diré que sí. Bien. Y va a instalar todos los paquetes, y me está preguntando cuál debería ser el nombre de mi proyecto. ¿Bien? Para que pueda ingresar el nombre de mi proyecto. Puedo entrar. Puedo decir reaccionar o 1 segundo. Entonces tengo mi ficha de reacción, ¿verdad? Así puedo ver mi uh, reaccionar o no debería ser mi tap de reacción, así puedo decir lo que reacciona, algo así. ¿Bien? Y solo presionaré Enter, y ya pueden ver que me está preguntando el framework. Entonces, ¿qué marco quiero elegir aquí? ¿Bien? Quieres vainilla, quieres hacer uso de reaccionar. Entonces ya que estamos haciendo uso de react, seleccionaré react por aquí. Me está preguntando si quiero el soporte de TypeScript o algo así Así que solo seleccionaré JavaScript por aquí. Bien. Y si, ya terminamos, puedes ver lo rápido que fue esto. ¿Bien? Se puede ver. No es necesario instalar los siguientes paquetes. Bien, lo siento, necesito instalar los siguientes paquetes. Y me hizo algunas preguntas a las que había respondido. También puedes saltarte este prompt, como dije, agregando esto en el comando. Puede especificar el nombre del proyecto, y puede especificar cosas como plantilla y todo aquí. ¿Bien? Eso también es factible. ¿Todo bien? Pero elijo ir por el camino interactivo, y luego creó este proyecto por aquí, ¿de acuerdo? Y te está diciendo que hagas CD, qué reaccionar. Y hacer NPM instalar, y usted puede hacer NPM ejecutar Entonces ejecutemos estos comandos, y veamos qué pasa. Iré a CD en React. Diré NPM install, que instalará todas las dependencias que mi proyecto necesite, y voy a copiar esta ejecución de NPM Def Bien, sí, está instalando todo. Tomará unos segundos. Se hace en 10 segundos, y voy a decir que NPM corre def. Y ahora se puede ver que inició el servidor en el host local 5173 Entonces este es un puerto predeterminado por aquí. Bien, eso se está utilizando para ejecutar estos proyectos, ¿de acuerdo? Y si te diriges a esto, bien, déjame reiniciar para que veas que me acercaron mucho ¿Bien? Entonces puedes ver que esta es la página por defecto. Entonces dice Wt plus react, y puedes ver aquí hay un contador en el que puedes hacer clic y aumentar el conteo. ¿Bien? Y tienes app dot Jx, que puedes explorar y puedes editar básicamente para actualizar esta interfaz de usuario en particular por aquí ¿Bien? Y puedes hacer clic en TI y reaccionar logotipos para obtener más información. Entonces, si haces clic en React, serás llevado a la página de React. Si haces clic en el logotipo de Wet, serás llevado a la página de Wet. Todo bien. Entonces espero que hayas podido seguir una y espero que esto haya sido útil. 10. Pasar a Visual Studio Code y cambiar de puerto: Entonces ahora lo que voy a hacer es que tengo esta app de calor funcionando, pero en realidad la estoy ejecutando desde mi terminal nativa. Entonces, lo que haría es dirigirme a Visual Studio Code y simplemente abrir el proyecto de calor en código de Visual Studio para que trabaje en él. Entonces me dirijo a Archivo. Diré carpeta abierta, bien. Y aquí, seleccionaré comer reaccionar. ¿Bien? Entonces Wheat react es como es mi nombre de proyecto, ¿verdad? Yo también abriré la terminal. Aquí. Bien. Ahora puedo ejecutar el servidor desde aquí. Entonces puedo ejecutar el servidor, en realidad, pero aquí notarás que un servidor se está ejecutando en el puerto 5173 Bien. Así que sólo voy a detener este servidor. ¿Bien? Entonces establecemos NPM run deep y se está ejecutando en 5173, que es el puerto predeterminado para proyectos de trigo Ahora, digamos que quiero personalizar este puerto a Loose 3,000. ¿Bien? Entonces lo que puedo hacer es que voy a venir aquí. Uh, se puede ver la estructura del proyecto. ¿Bien? Es casi similar a la aplicación React de aquí. Se puede ver. ¿Bien? Lo que WeatJS Ese es el archivo de configuración que tenemos. Bien. Entonces lo que voy a hacer es entrar en esta configuración. Bien. Esto me permite hacer alguna configuración personalizada para Wheat. Voy a abrir esto y por aquí, puedes ver esto. Bien, esta es la configuración. Entonces tengo plug ins de react. Ahora aquí debajo de esto, voy a decir servidor. Bien, y voy a decir dos puntos voy a agregar una alabanza rizada abierta y cerrada. Voy a añadir una coma Terminaré esto con una coma. Y aquí, voy a decir puerto, Colin, diré 3 mil y terminaré esto con una coma ¿Bien? Esto está hecho. Voy a guardar este archivo por aquí, o y podemos decir NPM, corre sordo ahora ¿Bien? Si haces esto, verás que el servidor está en funcionamiento en host local 3,000. Vaya, accidentalmente terminé el servidor, pero se está ejecutando en 3,000 Ahora si refrescas 5173, no encontrarás nada por aquí Aquí en 3,000, si refrescas esto, esta es nuestra antigua app que creamos. Verás t plus reaccionar corriendo por aquí. ¿Bien? Entonces sí, tienes un mostrador. Se puede ver que todo es igual. Bien. Entonces así es como puedes cambiar el puerto agregando una configuración simple en et config chas y puedes hacerlo de la manera que te mostré. ¿Bien? Ahora, aquí verás todas las carpetas y todo lo que se ha creado, que son similares, debería decir, a la de la que vimos en el proyecto que generamos usando la app Create React. Verás el punto medio principal SX. ¿Bien? Así que en el archivo react o en el proyecto anterior que teníamos, si creas un proyecto usando create react app, verás que será medio punto js y no JSX Aquí tienes app dot jsx y no app dot Gs. ¿Bien? Entonces aquí, todo se está definiendo en la extensión GSX Y la razón de esto es porque tiene código JSX. ¿Bien? Entonces este código de aquí que estás viendo no es HTML. Bien, déjame minimizar esto. Entonces esto no es HTML. De hecho, este es en realidad el código JSX. Bien, que es lo que es similar a HTML. Casi similar, yo diría, si conoces HTML, en realidad puedes leer este código. Pero hay pequeñas diferencias como el nombre de la clase. Así es como se definen las clases. Entonces en HTML, tendrás clase así, bien, con esta etiqueta de clase. Pero aquí tienes el nombre de la clase, ¿de acuerdo? Y se puede ver resto todo se parece a HTML. ¿Bien? Entonces este es el XML JavaScript, JSX, ¿de acuerdo? Y encontrarás los nombres de archivo como jsx dot JSX por aquí. ¿Bien? Entonces esto es algo que necesitas saber, ¿verdad? Y cualquier RRS todo es similar. Index o TML, tienes fuera de la carpeta pública por aquí Se puede ver. Tienes paquete punto JCN que se utiliza básicamente para empaquetar o no empaquetar, debería decir, básicamente se usa para administrar dependencias para tu, proyecto de aquí Y todas las dependencias que agregues vendrán en módulos de nodo, que no estaremos tocando Usted carpeta pública, que tiene un archivo SVG. ¿Bien? Entonces es una estructura similar, casi la misma, diría yo. Y entendiste si entiendes el proyecto creado usando la herramienta Create React app, entonces entenderás esto también. Todo bien. Entonces sí, espero que esto sea útil y espero que hayas podido seguirlo. 11. Introducción a la sintaxis y las reglas de JSX: Entonces ahora es el momento de que comencemos a hablar de JSX. Ahora bien, ¿qué es JSX? Así que he agregado algunos comentarios a esta app o archivo JSX. Todo bien. Así que puedes ver por aquí, JSX es una extensión de sintaxis para JavaScript que se parece a HTML ¿Bien? Y con la ayuda de JSX, se le permite escribir código HTML como dentro de JavaScript. Entonces, ¿puedes escribir código HTML dentro de JavaScript? No, pero con la ayuda de JSX, puedes escribir, y esta reacción transforma esto en objetos JavaScript. Bien. Entonces esto es lo que es GSSix, y por eso se está utilizando, ¿verdad Así que vamos a echar un vistazo a algunos ejemplos por aquí, ¿de acuerdo? Ya puedes ver que hay algún código escrito en Gasix cuando creamos el proyecto, y esto es lo que se está renderizando, bien, con la ayuda de eso ¿Bien? Pero lo estaremos limpiando y bajaremos a ejemplos mucho más simples. Bien. Pero una cosa para recordar es, esto es lo que debes recordar. Parece HTML, pero no es HTML. Bien, si conoces HTML puedes entender y leer y escribir fácilmente lo siento, no Ja Script, GSX, y te permite básicamente ayudarte a construir componentes de reacción, y puedes ver cómo se verá tu UI directamente en tu código porque es HTML como. ¿Bien? Entonces lo que voy a hacer es, se puede ver aquí hay algunas variables y todo lo creado, así que me voy a deshacer de esto, de todo esto. Bien. Voy a deshacerme de todo esto. Bien. Y voy a guardar esto. Entonces no hay literalmente nada ahora en la página. Bien. Está totalmente vacía, como puedes ver. Bien. Yo también me desharé de estas importaciones, ¿de acuerdo? Yo sólo me quedaré con el archivo CSS. Si vas al archivo CSS. Bien, es CSS bastante decente, ¿verdad? Entonces se ha escrito algo por allá. Bien. Así que me quedaré con este archivo. Aún no tocaremos el CSS, ¿verdad? Pero vamos a empezar a escribir unos seis códigos. ¿Bien? Entonces lo que yo haría es que puedo decir por aquí, aquí dentro de esto. ¿Bien? Entonces aquí, digamos que esto es DIF. Bien, entonces voy a tener un elemento TF. O era una etiqueta vacía. Yo puedo decir por aquí H uno, o. y puedo decir cómo puedo decir wold, algo así Y verás hola mundo siendo impreso por aquí como salida. ¿Bien? Ahora esto es JavaScript. Esta cosa fuera es completamente JavaScript, ¿verdad? Y dentro de JavaScript, se le permite escribir HTML como código, y esto parece HTML, pero en realidad es JSX ¿Bien? Incluso puedes saltarte estas etiquetas Div si lo deseas. Te explicaré la importancia de tener un DIV, como todo envuelto dentro de un TIF. Pero se puede ver que esto también está funcionando absolutamente bien. ¿Bien? Ahora bien, lo que puedes hacer es llevarte esto aquí, ¿de acuerdo? Puedo decir const ligment por aquí, y puedo asignar esto por aquí, algo así Bien. Y así por aquí, simplemente se puede decir, bien, lamento dentro del par de dentro de retorno ¿Bien? Ahora bien, si guardas esto y si vienes, bien, no estás viendo ningún resultado. La razón por la que no estás viendo ninguna salida es porque esto necesita estar envuelto dentro de un TIF, ¿de acuerdo? Entonces cortaré esto y lo pegaré por aquí. ¿Bien? Algo así. Bien. Y voy a guardar esto. Y si vienes aquí, verás hola mundo como la salida. ¿Bien? Entonces sí, esta es otra forma de renderizar lo mismo. Incluso puedes cortar esto y pegarlo por aquí como lo hicimos desde el principio. ¿Bien? Pero sí, hay algunas reglas cuando estás haciendo uso de GSX, hay algunas reglas de las que quiero hablar . Todo bien. Ahora, la primera regla son los elementos GSX. Así que estás devolviendo elementos JSX por aquí como parte de la declaración return ¿Bien? Así que echa un vistazo a la estructura de este código, ¿de acuerdo? Tienes esta función. Eso es devolver los elementos JSX, lo que sea que estés devolviendo aquí se está renderizando en la interfaz, ¿verdad Entonces si no devuelves nada de aquí, si no devuelvo elemento, no se renderizará en la interfaz, puedes ver, ¿verdad? Si guardo el archivo, no se está renderizando. Si vuelvo a guardar el archivo, se renderizará. Entonces, lo que sea que estés regresando aquí se está renderizando en la interfaz, y esto es lo que estás exportando aquí. Y la razón por la que se está renderizando es porque en el punto principal Jx, estás renderizando app por aquí como parte del elemento raíz Y lo que es app app viene de aquí, es este componente. Bien. Entonces, sea lo que sea que esté renderizando, cualquier elemento que esté devolviendo aquí como parte de la declaración return debe envolverse en un solo elemento padre. ¿Bien? Entonces déjame explicarte esto mejor. ¿Bien? Entonces lo que voy a hacer es, voy a comentar esto por un tiempo, ¿de acuerdo? Y voy a tener hola a todo el mundo por aquí, ¿de acuerdo? Directamente en lugar de tener este elemento. ¿Bien? Entonces digamos que tengo hola mundo simple. ¿Bien? Ahora, sin este elemento padre, puedo tener hola mundo. No hay temas como tales. Se puede ver. Si tengo esto, funcionará bien. ¿Bien? Pero en el momento en que agrego un elemento más por aquí, digamos que digo alto por aquí. Bien. En primer lugar, ya ves que me sale un error. Bien, para que puedas ver las expresiones JSix deben tener un elemento padre Y si vengo por aquí, se puede ver el error por aquí. Se puede ver que debe estar envuelto en una etiqueta de cierre y se puede ver que no está funcionando, ¿verdad? Entonces tiene que haber un elemento padre. Y si estás teniendo múltiples retornos múltiples elementos que estás devolviendo, múltiples elementos J six, lo que puedes hacer es envolverlos en un solo elemento padre, el error desaparecerá y verás la salida por aquí. Entonces ves hola mundo, y luego ves alto, que está escrito en la etiqueta P. Todo bien. Entonces espero que esto tenga sentido. Esta es la regla número uno, ¿de acuerdo? Los elementos JSX deben estar envueltos en un solo elemento padre. Estarás trabajando mucho con JSX si estás haciendo reaccionar desarrollo y recordar esta regla, porque la gente siempre se pregunta por qué tienes que envolver todo en un solo tip y todo eso ¿Bien? Entonces esta es una de las reglas. ¿Bien? Otra regla está en HTML, haces uso de class, right, para asignar un nombre de clase a un elemento en particular, ¿verdad? Pero con JSX, hay que hacer uso del nombre de la clase. Y no clase. Entonces se usa el nombre de clase en lugar de class, y class no se usa porque class es, por supuesto, una palabra de reserva en Ja Script. Bien, entonces estamos haciendo uso del nombre de la clase por aquí. ¿Bien? Entonces esto es algo que hay que tener en cuenta. Entonces, si quieres agregar nombres de clase que puedan ser estilizados correctamente, tienes que hacer uso del nombre de clase ¿Bien? Y recuerda la sintaxis de aquí. Uy. Así que recuerda la sintaxis, tiene que ser nombre de clase. Entonces N, puedes ver el caso del camello en acción por aquí, ¿de acuerdo? Entonces esta es otra regla, entonces hay una regla sobre las etiquetas de cierre automático. ¿Bien? Ahora, habrá etiquetas que no necesitan ningún tipo de hijos, por ejemplo, etiqueta de imagen. Bien, entonces tienen que ser autocerrados. ¿Bien? Por ejemplo, necesito tener aros Entonces puedo decir, tengo que hacer uso de la imagen así. Puedo agregar SRC y todo por aquí. ¿Bien? Pero la etiqueta tiene que ser etiqueta de cierre automático. Se cierra a sí mismo, ¿verdad? Entonces eso es algo que hay que tener en cuenta. Bien. Entonces estas son algunas de las reglas sobre GSX, bien. Pero recuerden, los puntos clave de este video en particular es que JSX no es HTML Bien, se ve muy, muy similar, pero no es TML. También puede usar JavaScript dentro JSX incrustándolo en llaves Bien, por aquí, algo como esto. Se puede decir siete más seis más siete, algo así, por aquí, y verá 13 como salida A. Para que puedas tener código JavaScript incrustado dentro de un solo par de urbass Eso es algo que se puede hacer. ¿Bien? Y los elementos JSX deben envolverse en un solo elemento padre como DV por aquí ¿Bien? Entonces sí, esto es sobre J six, sobre introducción a JSix Espero que esto quede claro, y espero que esto esté resultando útil. 12. Expresiones y atributos con JSX: Entonces comencemos a hablar de expresiones y atributos con Jax Entonces tengo algunos comentarios por aquí. Bien, para que puedas ver este primero. El primer punto dice que puedes incrustar cualquier expresión válida de JavaScript dentro de la prese rizada en JA six, ¿de acuerdo? Y los atributos JSix utilizan la sintaxis de caso Camel. Entonces estos son los dos puntos que vamos a cubrir. ¿Bien? Ahora, lo que voy a hacer es que voy a hacer un poco de limpieza por aquí Voy a tener un solo tiff por aquí. Bien. Entonces primer punto C, puedes tener o puedes incrustar cualquier expresión JavaScript válida dentro de rizado pres, ¿de acuerdo? Y esto está dentro de JSX. Ahora bien, lo que esto significa está aquí, si quiero imprimir edición de dos números, bien, diez más dos, absolutamente puedo hacer eso porque esta es una expresión Java válida, ¿bien? Esto está completamente permitido. Ahora en lugar de simplemente imprimir en el total por aquí, puedo tener H una etiqueta, algo así. Bien, 1 segundo. Entonces voy a tener cada uno. Voy a saludar. Bien, y voy a tener nombre por aquí, algo así. Bien. Y por aquí, puedo decir const, nombre, y puedo decir ALS, algo así Bien. Entonces con esto, ya ves, estamos saludando a Alice, ¿de acuerdo? Y aquí, lo que hemos hecho es que hemos creado una variable JA Script o constante JA, puedo decir, llamada name. Y luego estoy haciendo uso de esto dentro de la sintaxis JSX. ¿Bien? Ahora bien, esta es una expresión que se está evaluando, ¿de acuerdo? Entonces el resultado será Hola Alice, y eso es lo que vemos como la salida. ¿Bien? Ahora, una cosa que me gustaría mencionar por aquí es que he mencionado un par de veces que G six no es HTML. Bien. Entonces la pregunta es, ¿cómo se está renderizando en el navegador? Entonces se convierte en HTML por react, y se está mostrando en el navegador. Entonces así es como funciona el renderizado para JSX. Ahora se trata de expresiones. Bien. Tomemos un ejemplo de J seis atributos. ¿Bien? Ahora, siempre que estés usando elementos, es, por supuesto, evidente que también estarás haciendo uso de atributos, ¿verdad? Por ejemplo, uno de esos atributos está por aquí, uno de esos atributos sería el nombre de la clase, ¿de acuerdo? O si quieres asignar una etiqueta H a una clase, agregarías el nombre de la clase aquí. Así es como asignarás una clase a un elemento en JSX, ¿bien? Y puedes llamar a esto como saludo por aquí. Bien. Ahora, recuerda que este es el caso del camello, ¿de acuerdo? Y no se puede tener clase por aquí, bien, porque esto es HTML, ¿verdad? Y esto es JSX. Bien. Así que tenlo en mente, ¿de acuerdo? Incluso puedes tener inline. Incluso puedes usar atributos que te permitan hacer uso del estilo en línea. ¿Bien? Déjame darte un ejemplo para eso también. ¿Bien? Así que digamos que deseo tener un botón por aquí, ¿de acuerdo? Y voy a decir, haga clic en M, algo así por aquí. Bien. Y digamos que deseo tener estilo por aquí. Bien, entonces voy a decir estilo. Bien. Y voy a añadir peras dobles rizadas y ya voy a ver. Entonces, sin un estilo, veamos cómo está entrando este botón. Entonces viene de esta manera. Se puede ver, haga clic en mí. Bien. Y aquí puedo en cambio ahora ver el color de fondo. Bien. Color de fondo. Se puede ver eso por aquí y voy a asignar, digamos, verde. Bien. Puedes asignar cualquier color que quieras. Bien. Y voy a tener color para ser el del blanco. O aquí. Algo así. Bien. Voy a guardar esto. Y si vengo por aquí, ya pueden ver, haga clic en mí. Bien. Se puede ver cómo se renderizó esto. Bien. Déjame mover estas dos líneas separadas para que sea visible para todos. Bien. Todo bien. Así se puede ver. Estoy haciendo uso de estilos en línea por aquí en lugar de un estilo externo. ¿Bien? E incluso puedo quitar esto, deshacerme de este texto. ¿Bien? Puedo añadir esto como una expresión. Entonces puedo decir const button, label, algo como esto, y puedo hacer clic en M aquí dentro de códigos individuales como una cadena O puedes hacer uso de códigos dobles. Eso sería mejor. Bien. Y aquí puedes tener la etiqueta asignada como expresión, y verás la misma salida. Se puede ver. ¿Bien? Entonces así es como puedes hacer uso de atributos, ¿de acuerdo? Incluso puedes tener otro botón. Bien, entonces déjame conseguir un botón, ¡Uy! Voy a copiar este botón. Lo voy a añadir por aquí. Bien. Y por aquí, puedes decir alertarme, o este es el texto. Bien. Y por aquí, se puede decir. Entonces aquí, lo que estoy haciendo ahora es que deseo asignar un evento on click. ¿Bien? Así que he creado un botón. Se puede ver alerta para mí. Bien. Pero digamos que deseo tener un evento onclick por aquí ¿Bien? Ahora al click en HTML es al click así, ¿verdad? Pero en la J seis, como dije, sigue la sintaxis camello Kaye, ¿verdad? Entonces C será capital por aquí. Solo tenlo en cuenta. Bien, C será capital por aquí, y luego dentro del par de llaves, puedes tener este tipo de función por aquí creada, y tendrás alerta, y puedo decir backticks button, click, algo así ¿Bien? Si guardo esto, veamos cómo funciona esto. Bien. Se puede ver el botón hecho clic. Esto funcionando absolutamente bien. ¿Bien? Entonces estas son pequeñas cosas sobre JA six que la gente siempre se pregunta. Entonces, si eres principiante, si te saltas esto y si vas directamente al código de reacción, y si ves un código escrito así, te preguntarás por qué esto es mayúsculas, antes que nada. ¿Bien? Entonces hay que entender así es como se usa en JA six. ¿Bien? Así que recuerda estas dos cosas, puedes incrustar cualquier expresión Jascript válida dentro de una brisa rizada en código JSix, y los atributos de JSix usan la sintaxis de las teclas Camel Entonces espero que hayas podido seguirlo te voy a dar un último ejemplo por aquí de mostrar una imagen. Bien. Entonces lo que voy a hacer es que voy a hacer uso de la etiqueta IMG por aquí Bien. Y mostraremos una imagen. Por aquí diremos SRC. Bien. Y lo que voy a hacer es que necesitamos imagen por aquí, así que voy a decir por favor sostenga la imagen, algo así. Bien. Y vendré a esta página web y obtendremos la imagen de marcador de posición de 600 por 400 Entonces este es un sitio web que te dará cualquier tipo de imagen de marcador de posición Bien. Entonces voy a decir SRC, esta es la parte de la imagen Y si guardo esto y si vengo aquí a ver la salida, ya pueden ver. Bien. Bien, 600 por 400 es súper enorme. Así que voy a cambiar esto a cien por 100. Si esto viene por aquí, se puede ver la imagen de 100 por 100. Y esto incluso se puede convertir en una expresión. Para que pueda cortar esto. Bien, puedo ir por aquí. Puedo decir consimage URL, algo así. Puedo agregar esto por aquí, y puedo venir aquí y puedo tener la ruta de la imagen por aquí, URL de la imagen. Al igual que así. ¿Bien? Incluso puedo agregar un marcador de posición. Puedo ver Alt y esta es imagen dinámica. Al igual que así. Bien. Se puede ver. La salida no ha cambiado, ¿de acuerdo? Está funcionando absolutamente bien. Bien, entonces así es como se puede trabajar con la imagen. Incluso puedes mover esta declaración por aquí, veamos. Bien. Uy, no se puede. No se puede. Entonces, dado eso, tiene que estar en la cima por aquí, ¿de acuerdo? Justo afuera del regreso, ¿de acuerdo? Esto no puede ser parte de lo escrito. Lo siento por eso. Bien. Entonces sí, esto es J seis, y espero que esto sea bastante claro para ti y espero que te haya resultado útil esto. 13. Renderizado condicional: Bien, entonces hablemos ahora del renderizado condicional y reaccionemos. Ahora, el renderizado condicional se usa cuando se desea renderizar diferentes elementos de la interfaz en función de ciertas condiciones, y en react, puede hacer uso del renderizado condicional de múltiples maneras. Por lo tanto, hay múltiples formas de implementar el renderizado condicional. ¿Bien? La primera forma es haciendo uso de declaraciones IL. Ahora bien, si conoces JavaScript, debes estar al tanto de la declaración FL. Para que pueda hacer uso de la declaración FFL para hacer renderizado condicional También puede hacer uso del operador ternario, y también puede hacer uso del operador Déjame mostrarte esto como funciona. Entonces aquí, tengo esta función que está devolviendo un TIF vacío. Aún no está devolviendo nada. Y si vienes por aquí, no verás ningún tipo de salida. Ahora, digamos, si deseo verificar si un usuario está bloqueado o no. Y dependiendo de si es si el usuario está bloqueado o no, quiero mostrar un mensaje, ¿verdad? Entonces lo que puedo hacer es que puedo tener una variable por aquí. Puedo decir que está encerrado, o, y puedo decir verdad. ¿Bien? Entonces el usuario está encerrado. Puedo decir si está encerrado. Bien. Entonces en ese caso, lo que puedes hacer está bien, esto no va a venir aquí. Bien. Entonces voy a tener que agregarlo por aquí. Bien. Entonces, si el usuario está bloqueado, entonces puedes regresar. ¿Bien? Entonces voy a quitar esta devolución por aquí. Puedo regresar, y puedo ver cada uno por aquí. ¿Bien? Bienvenido de nuevo. Algo así. No necesito este regreso por aquí. Bien. Entonces esto es lo que se convierte en mi regreso, ¿de acuerdo? Y si no está encerrado, bien, entonces puedo decir regreso, y puedo decir H uno y puedo decir, por favor inicie sesión. Por ejemplo, y voy a guardar esto. Bien. Así que aquí se puede ver, bienvenido de nuevo. Y si cambio la bandera a la de false y si guardo, van a ver, por favor inicie sesión. Entonces dependiendo de la condición, por lo que esta variable está controlando la condición. Dependiendo de esta variable, valore el valor que esta variable está manteniendo, ya sea verdadero o falso, en realidad estás renderizando diferentes mensajes en la interfaz. ¿Bien? Y así es como funciona el renderizado condicional. Se puede ver si estamos haciendo uso de dos declaraciones de devolución, lo cual está absolutamente bien. Incluso me he saltado los soportes redondos. Bien. Entonces se saltan esos corchetes redondos Puedes agregarlo si quieres, pero yo solo quería echar un vistazo más limpio por aquí. ¿Bien? Algo así. Está absolutamente bien. Bien. Yo sólo me desharé de estos soportes redondos. Entonces así es como funciona el renderizado condicional usando la declaración if. Bien. Espero que esto tenga sentido. Ahora, puedes convertir todo esto en usar un operador Turnario también ¿Bien? Entonces lo que haría es simplemente agregar el comentario de aquí. Bien. Simplemente voy a convertir esto en un comentario. Y ahora, voy a hacer uso del operador de tonería. ¿Bien? Entonces lo que puedo hacer es decir const por aquí Bien, puedo decir aliment. Bien. Y puedo ver cada uno. Bien. Ahora bien, si es así voy a tener esto como expresión. Bien. Ahora bien, la expresión dice que si está encerrado, bien, entonces tendré la bienvenida. Atrás. Bien, algo como esto, o si no, voy a decir, ¿Cuál es el mensaje? Por favor, inicie sesión. Así que voy a tener esto por aquí. Bien. Ahora lo que puedo hacer es que puedo devolver T, así puedo decir regresar por aquí, y simplemente puedo devolver H o simplemente puedo devolver el elemento aquí, algo así. Y puedo salvar esto. Bien. Uy, así que esto no va a funcionar Necesito envolverlo dentro de un TIF. Bien. Entonces esto debería darte la salida. Bien, puedes ver, por favor inicia sesión, y si cambio esto a true por aquí. ¡Uy! Cierto por aquí. Entonces en ese caso, verás Bienvenido de nuevo. ¿Bien? Entonces estamos haciendo uso del operador ternario, ¿de acuerdo? Llevaré esto a nuevas líneas para que sea visible para todos. Ya puedes ver cómo se está usando esto, ¿de acuerdo? Elemento constante es igual a H uno está conectado. ¿Bien? Entonces aquí estamos haciendo uso de esta expresión está bloqueada en Bienvenido de nuevo, por favor inicie sesión, y estoy cerrando la etiqueta H one. Y en base a eso, estamos regresando este elemento por aquí. Bien, entonces aquí estamos haciendo uso del operador ternario, esencialmente, para hacer renderizado condicional es lo que yo diría ¿Bien? Entonces espero que esto tenga sentido, ¿de acuerdo? Déjame darte un ejemplo más. Ahora bien, este ejemplo es renderizado condicional usando y operador. Bien, ¿ahora qué es el operador? ¿Usando y dos veces? Bien, entonces puedes usar esto también, básicamente para renderizar un elemento solo cuando una condición es verdadera. ¿Correcto? Ahora, déjenme darles un ejemplo para esto también. ¿Bien? Entonces digamos aquí, lo que puedo hacer está justo arriba escrito, puedo tener mensajes const Entonces digamos que tengo estoy manteniendo una lista de mensajes, ¿de acuerdo? Digamos que es una aplicación de chat. Ahora bien, si hay algún número de cien mensajes. Bien, entonces estos son 100 mensajes, digamos, ¿de acuerdo? Hay una matriz de cien mensajes. Ahora bien, si hay algún centenar de mensajes, deseo mostrarle una notificación al usuario que, Oye, tienes X cien mensajes por aquí. ¿Bien? ¿Cómo haría eso? Entonces por aquí, lo que haría es simplemente, diría mensajes de longitud de punto. Si la longitud del punto de los mensajes es mayor que cero. Bien, y voy a tener y operar por aquí. Diré H dos, algo así. Bien. Y voy a decir que tienen mensajes punto Longitud. Bien. Cien mensajes, algo así. ¿Bien? Si guardo esto, verás que no se muestra nada. Bien, porque la longitud de los mensajes es cero. Ahora si le agrego un mensaje. Bien, puedes ver que tienes 100 mensajes. Si agrego un mensaje más, ¿de acuerdo? Cualquier mensaje, bien, solo estamos echando un vistazo al conteo. Puedes ver que tienes 200 mensajes. ¿Bien? ¿Cómo funciona esto? Así que esto en realidad está tomando en consideración esta longitud de matriz y está viendo si la longitud de la matriz es mayor que cero. Ahora, déjame explicarte cómo está funcionando esta línea y cómo está renderizando condicionalmente el mensaje para nosotros, ¿de acuerdo? Entonces estamos haciendo uso de lógica y por aquí. Y si estás familiarizado con JavaScript, debes estar al tanto del operador lógico. Entonces, cuando y se está utilizando, primero se está evaluando el lado izquierdo. Entonces esta es la expresión del lado izquierdo. El mensaje tiene una longitud mayor que cero. Bien. Entonces evalúa esto y si esta expresión es verdadera, evalúa y devuelve el lado derecho ¿Bien? Si esto es cierto, entonces evalúa y devuelve el lado derecho Y si esto es falso, el lado izquierdo es falso, no devuelve el lado derecho, y cortocircuita, esencialmente. Y esto se conoce como cortocircuito, ¿de acuerdo? Donde no evalúa el lado derecho, y básicamente, entonces no hace nada por aquí. ¿Bien? Así que sí, así es como funciona por aquí, ¿de acuerdo? Y esto se está utilizando para hacer renderizado condicional. Y verás mucho este tipo de expresiones, ¿de acuerdo? Entonces, si vas a tener alguna condición por aquí y estarás haciendo uso de y luego lo que quieras renderizar en el lado derecho. ¿Bien? Entonces así es como se está aprovechando este cortocircuito por aquí para mostrar mensajes condicionales Y yo diría que esto es mucho más conciso que escribir declaraciones FL y operadores ternarios, en mi opinión ¿Bien? Así que también puedes convertir toda esta expresión uh, en algo de este tipo, ¿de acuerdo? Pero el operador ternario en realidad es útil si también quieres tener un mensaje de falla Bien, entonces estás teniendo dos mensajes. Bienvenido de nuevo, y por favor inicia sesión, ¿de acuerdo? Así que aquí solo tienes un mensaje, ¿de acuerdo? Pero aquí estás teniendo dos mensajes que se están renderizando cuando algo es cierto. Entonces, en realidad, ambos no son iguales, ¿de acuerdo? Pero sí, si estás mostrando solo una cosa, bien, entonces esta podría ser la mejor opción que existe. Todo bien. Entonces sí, se trata de renderizado condicional. Así que echamos un vistazo a la renderización condicional de múltiples maneras. Primero es usar FL. Luego hicimos uso del operador ternario, y luego vimos con la ayuda de lógica y operador. Todo bien. Entonces espero que hayas podido seguirlo, y espero que esto haya sido útil. 14. JSX y funciones: Entonces hablemos ahora de J six y funciones. Ahora, JSix le permite usar funciones dinámicamente para generar y devolver elementos o componentes, y esto podría ser útil si desea encapsular una lógica dentro de una función y reutilizarla en toda su Déjenme darles un ejemplo para esto. Entonces digamos que tengo este saludo por aquí, que es un saludo sencillo, hola, ¿verdad? Digamos que le agrego un nombre y estoy personalizando, así puedo decir Alice Hola, Alice por aquí. Bien. Ahora, digamos que quiero saludar a múltiples usuarios que pasaron en sus nombres, así puedo duplicar esto Hola Alice, hola, Bob, digamos. Bien. Bien, esto no va a funcionar porque necesito un padre def según las reglas, ¿verdad Entonces necesito mover esto. Cortaré esto, y lo pegaré por aquí, algo así. Bien. Ahora bien, esto funcionaría. Hola Alice, Hola Bob. Ahora hay una mejor manera de manejar esto. ¿Bien? Lo que estoy haciendo es que esencialmente estoy replicando la forma en que saludo a los usuarios en múltiples bloques. ¿Bien? Pero esta cosa se puede generar con la ayuda de la función también. Todo bien. Lo que puedo hacer aquí es que puedo decir función. Vaya, necesito desactivar las gorras. Puedo decir función. Puedo decir mensaje de bienvenida por aquí. Bien. Y puedo tener nombre como parámetro por aquí, o, y puedo cortar esto necesito esto. Y aquí, puedo decir regreso. Puedo agregar esto por aquí. En lugar de Alice por aquí, sólo voy a decir nombre. ¿Bien? Entonces estoy generando JSX con la ayuda de esta función Ahora, ¿cómo hago uso de ella? Puedo hacer uso de ella con la ayuda de la sintaxis de expresión. Puedo decir mensaje de bienvenida, y puedo pasar por aquí Alice. Algo así. Bien. Y puedo guardarlo, y verás Hola Alice, hola boop Así que todavía no he cambiado esto por pop, bien, pero me desharé del saludo de Pop por aquí, y convertiré el saludo de Bob en el del pop. ¿Bien? Ahora, verás Hola Alice, Hola Bob. Incluso puedo añadir uno más. Hola, John. Bien. Se puede ver. Entonces así es como se puede hacer uso de la función que devuelve seis y este Aix puede entonces ser renderizado en un componente dentro de un componente Todo bien. Así que sí, cómo funciona es que tenemos la función de mensaje de bienvenida por aquí, sencilla función Ja Script que toma nombre como parámetro y devuelve un mensaje de saludo. Este es un mensaje de saludo. Y en el componente app, puedes llamar a esta función y pasar el nombre como argumento, y puedes pasar diferentes nombres para renderizar saludos personalizados. Espero que esto tenga sentido, bien ahora incluso puedes hacer esto condicional. ¿Bien? Entonces puedes condicionalmente o puedes usar funciones para decidir qué elementos JSX renderizar en función de ciertas Entonces eso es lo que quiero decir con renderizado condicional. ¿Bien? Entonces déjame darte un ejemplo. Digamos, dependiendo de la hora en un día, quiero empujar buenos días o buenas noches. ¿Bien? Entonces lo que puedo hacer es que puedo tener una función por aquí. Diré función. Bien. Diré saludo, diré que es de mañana. ¿Bien? Ahora, si es de mañana, si es de mañana, bien. Entonces, ¿qué hacemos? Yo devuelvo cada uno. Por aquí, algo como esto. Puedo decir bueno. Vaya, mañana, algo como esto Bien. Y si esta condición no se satisface, entonces puedo regresar buenas noches, algo así. Bien. Ahora lo que puedo hacer aquí está aquí, puedo hacer uso de Const ahora igual a ocho nuevos, algo así Puedo decir que const está de luto por aquí, y puedo decir ahora enseñado, consigue Entonces esta es la lógica que estoy usando para comprobar si aquí es la lección 12 o mayor que diez, lo que estoy haciendo es aquí lo que necesito hacer es que pueda decir dentro de una expresión, puedo decir saludos, y puedo pasar es llorar por aquí, algo así Ahora estoy viendo buenas noches porque es tarde por aquí, ¿de acuerdo? Así que en realidad estoy recibiendo tiempo por aquí, ¿verdad? Pero sí, si es hora de la mañana para ti, entonces esta lógica va a volver buenos días por aquí. Bien. Entonces lo que está haciendo es tomar la fecha actual, bien, la actual, y luego está obteniendo las Rs. Bien, entonces si RS tiene menos de 12, significa que es de mañana. Si no lo es, significa que es de noche. Entonces esto será falso por aquí en ese caso, y dependiendo de eso, ya sea si el valor booleano es verdadero o falso, o en realidad estamos renderizando el saludo por aquí, Entonces sí, esto se puede hacer, e incluso se puede yo también me gustaría mostrarle un ejemplo más en el que pueda tener funciones que devuelvan JSX y también se puedan pasar como argumento a otras funciones permitiendo una lógica de interfaz de usuario más compleja Entonces digamos que queremos mostrar un cuadro de alerta dependiendo de una condición. Bien. Lo que haría es crear una función más. ¿Bien? Diré mostrar alerta por aquí. Bien. Voy a tener la condición por aquí y voy a tener mensaje. Ahora bien, esta condición, vaya, no mensaje de bienvenida. Será mensaje. Ahora bien, esta condición que estoy teniendo como parámetro, esto es un booleano, Entonces voy a tener un cheque booleano para esto. Si condiciona, luego regresa. Bien. Y puedo regresar alerta por aquí. ¿Bien? Entonces puedo decir TIF y puedo agregar un mensaje por aquí, algo así. Así. Bien. E incluso puedo darle estilo o lo que quiera hacer. ¿Bien? Entonces esto se puede hacer. Todo bien. Y de lo contrario, estoy devolviendo nulo, ¿verdad? Ahora, déjenme llamar a esto por aquí. Entonces aquí, lo que puedes hacer es que puedes tener una expresión tipo de sintaxis. Se puede decir mostrar alerta. Cierto. Bien. Y entonces se puede decir que esto es importante, algo así. Este podría ser tu mensaje. Voy a guardar esto y se puede ver que esto es importante. Esto es lo que estás viendo por aquí, ¿verdad? Ahora aquí, lo que podemos hacer es dentro de esta función en particular, puedo tener otra llamada de función. ¿Bien? Entonces aquí estamos renderizando esta alerta estamos creando esta alerta dentro de esta función en particular. ¿Bien? Entonces, en cambio, lo que voy a hacer es aquí puedo tener función. Bien, puedo decir caja de alerta, así está bien. Y aquí puedo tener mensaje. Bien. Y por aquí, puedo decir regreso y es esto. Bien. Ahora también puedo darle estilo por aquí. Puedo hacer que la alerta sea un poco compleja porque he segregado el código en una función separada Y por aquí, simplemente puedo llamar a este cuadro de alerta con mensaje, y esto no impactará la salida de aquí ni en la salida que estoy recibiendo. Bien. Y si vienes por aquí, verás que esto es importante. Entonces estamos viendo la salida, ¿de acuerdo? Esto es importante, y se puede ver cómo está entrando esto. Tenemos una función separada para generar la caja de alerta de estilo Se puede decir, Bien, esto no es en realidad estilo. Tenemos que escribir CSS para esto, pero entiendes lo que te estoy explicando aquí. ¿Bien? Necesito agregar punto y coma por aquí en los estados de cuenta de retorno. ¿Bien? Por lo que todas las declaraciones de retorno tendrán punto y coma. Bien, me di cuenta de que me perdí algunos. Bien. Supongo, sí, esto debería ser bueno por aquí. Bien. Así que sí, esta función en particular está siendo llamada entonces por esta función de aquí. Entonces estamos haciendo una llamada a función dentro de la llamada de función, y estamos devolviendo el Jx desde aquí dependiendo de la condición Y entonces esa condición se está rindiendo por aquí. ¿Bien? Entonces esto también está permitido, y así es como funcionaría. Si guardo esto, se puede ver que la salida está por aquí. Todo bien. Entonces espero que esto haya sido útil y espero que hayan podido seguirlo. 15. Comentarios en JSX: Entonces ahora es el momento de que comencemos a hablar de bienes comunes en JSX Entonces esta es una aplicación simple punto archivo JSX. ¿Bien? Tiene código JSix por aquí Entonces este es el código JSix que estoy devolviendo, puedes ver, y el resto del archivo tiene código JavaScript. ¿Bien? Ahora, estoy viendo esta salida por aquí. Está funcionando bien. Ahora bien, si quiero agregar bienes comunes, ¿de acuerdo? Ahora bien, aquí hay dos lugares o hay dos tipos de código. Uno es el código JSX que está por aquí, y luego tenemos código JavaScript que existe en el resto del archivo Entonces en el código Ja Script, puedes hacer uso de los comentarios regulares que normalmente usas. Entonces este es un comentario de una sola línea. Este es un comentario, y también puedes tener el comentario de varias líneas en el código Jascript Así, esto es comentario multilínea, algo así. Así es como escribes comentarios en JavaScript, ¿bien? Pero no se puede hacer esto cuando se trata de JA six. Entonces dentro del código J six, si intentas hacer esto, no va a funcionar, ¿verdad? Ahora bien, ¿cómo escribes comentario por aquí? Para que puedas agregar comentarios como este. Así que acabo de hacer uso del atajo Control y barra diagonal hacia adelante, así que me agregó estas etiquetas ¿Bien? Entonces, si quieres agregar comentarios dentro de Jasix, así es como lo harías Bien. Ya puedes ver, esto es un comentario. Bien. Y puedes agregar un comentario de una sola línea o un comentario de línea mult dependiendo de tu necesidad Bien. Entonces, en realidad, este es un comentario de una sola línea. Incluso puedo agregar un comentario de varias líneas por aquí. Bien. Puedo decir esto. Veré que este es un comentario de una sola línea, y este es un comentario multilínea, puedo decir que tome nota de esto aquí, algo así Espero que esto tenga sentido en cuanto a cómo funcionan los comentarios en el archivo GSX, y espero que esto sea útil 16. PROYECTO: crea un sitio web de portafolio con React: Entonces ahora es el momento de que vamos a hacer un proyecto usando lo que hayamos aprendido hasta ahora y reaccionar. ¿Y qué vamos a construir? Vamos a construir una página web de portafolio simple. Todo bien. Para que puedas ver este portafolio por aquí. Esto es lo que vamos a construir. Para que puedas ver el nombre, el espigón. Tienes secciones como sobre proyectos en contacto. Esta es la sección A, puedes hacer clic aquí y dirigirte a Acerca de también. Bien. Y aquí tienes proyectos. Para que puedas dar click en proyectos y Buenos proyectos. Tienes este Proyecto uno, descripción del proyecto y el enlace al proyecto, Proyecto dos, Proyecto tres, y así sucesivamente. Y entonces tienes la opción de contactar por aquí, y luego la FUTA, ¿de acuerdo? Bastante simple. ¿Bien? Es una aplicación de una sola página, aplicación web de una sola página, debería decir, en la que estamos haciendo uso de react J. Así que esto es exactamente lo que vamos a construir. Lo mantendremos realmente simple, y el objetivo es aprender y armar todo lo que hemos aprendido hasta ahora para construir esta aplicación para que tengamos algunas manos en la práctica. Entonces comencemos. Entonces estoy aquí en el código de Visual Studio, y tengo la app dot JS abierta, ¿de acuerdo? Y es simplemente imprimir un mensaje muy sencillo llamado hola. Todo bien. Ahora, lo que voy a hacer es que vamos a venir aquí. Y dentro de la app de funciones, bien, vamos a tener algunas variables creadas. Bien. Ahora bien, estas son las variables que nos ayudarán a mostrar toda la información que queremos mostrar en la aplicación de una sola página que estamos construyendo, ¿bien? La primera variable que vamos a tener es, por supuesto, nombre. Bien, puedes tener el nombre de tu elección por aquí. Voy a tener este nombre ficticio llamado John Doe. Puedes tener profesión por aquí. Bien. Y se puede decir desarrollador full stack. Algo así. Bien. Puedes tener proyectos por aquí, algo así. Y aquí, vamos a tener esto será en una especie de formato JCN Bien, puedo decir título. Vaya, Title Colin y yo tendremos Project one. Puedes tener algún tipo de detalle de proyecto agregado por aquí, ¿de acuerdo? Descripción por aquí, algo como esto, y se puede ver la aplicación web. Construido usando React y Node Chase, algo así. Cualquier tipo de descripción que puedas tener. Bien. También voy a tener un título. Lo siento, no título. Debería ser link por aquí. El enlace, lo voy a mantener como hash. Bien. No hay necesidad de agregar enlace en este momento, ¿de acuerdo? Eso es lo que pienso porque no es un proyecto real, ¿verdad? Entonces ad coma, y por eso estamos recibiendo el error. Creo que esto está hecho, ¿de acuerdo? Puedes duplicar esto para un proyecto más, coma Aada, un proyecto más, Proyecto dos Bien. Y se puede decir una plataforma de comercio electrónico. Vaya, así que me metí la pata. Todo bien. Entonces es una plataforma de comercio electrónico. Podemos decir que es una plataforma de comercio electrónico. Construido usando Gingo. Se puede decir algo así. ¿Bien? Sólo voy a tener dos proyectos por ahora, bien. Y ahora podemos venir aquí. ¿Bien? Entonces esto está regresando hola. Bien. No necesito regresar hola por aquí. Bien. Entonces lo que podemos hacer es mover esto. Bien. En primer lugar, para esta pestaña en particular, voy a tener el nombre de la clase como app. Y estoy haciendo esto porque después, me gustaría darle estilo también. ¿Bien? Ahora aquí tengo un encabezado. Bien. Entonces este es un encabezado HTML que estoy agregando. Bien, déjame agregar. Apellido. Bien. Y esto se llama encabezado, algo así por aquí. Bien. Ahora este encabezado está dentro de encabezado. Voy a tener algunas cosas por aquí. Voy a tener cada uno, y este sería el nombre, este rendiría nombre por aquí. Voy a tener etiqueta P. Esto haría profesión, algo así. Y entonces puedo tener E NAF par por aquí. Voy a tener NAF por aquí. Puedo decir, vaya, puedo decir etiqueta E por aquí, y esto puede ser sobre y esto puede apuntar a HF y esto puede apuntar a hash, sobre 17. Introducción a los componentes y crea tu primer componente: Oye, ahí. Bienvenida. Y ahora es el momento de que comencemos a hablar sobre qué son los componentes y cómo funcionan en reaccionar. Entonces aquí, estoy en el sitio web oficial de react, que es react dot TEF, y voy a tomar vamos a analizar este sitio web y entender y ser introducidos a este concepto de componentes, ¿verdad Ahora observa este sitio web, ¿de acuerdo? Se puede observar cualquier sitio web, pero he tomado este ejemplo porque estamos aprendiendo a reaccionar, y este es el oficial. Si ves en la parte superior, hay una barra superior por aquí, ¿de acuerdo? Puedes llamarlo encabezado o el Navbar superior o lo que quieras Ahora, dentro de esto, hay como logo en el lado izquierdo, la versión, ¿bien? Puedes ver la barra de búsqueda, los elementos de navegación como aprender referencia, blog de la comunidad y algunas opciones más por aquí. ¿Bien? Puedes desplazarte por el sitio web, ¿de acuerdo? Ahora bien, si cambias la página por aquí, referencia, comunidad, aprende, puedes ver esta barra superior permanece como está. No cambia, ¿verdad? Es estático en todas las páginas. Y lo mismo va para el pie de página. Por aquí. ¿Bien? Entonces, lo que quería decir aquí es el punto que estoy tratando de hacer es que cada vez que estás construyendo algún tipo de aplicación web o cualquier tipo de software, habrá algunos componentes o algunas cosas en tu aplicación que serían iguales y se puede reutilizar, ¿verdad Ahora, en el desarrollo web tradicional, lo que solía suceder es que si estás construyendo este tipo de sitio web, crearás esta página por aquí. Tendrás este código escrito en la parte superior, para renderizar esta interfaz de usuario. Cuando creas la página para aprender aquí, esta página, volverás a replicar este código que crea esta cosa en particular en la parte superior ¿Bien? Si estás construyendo una página de referencia, volverás a construir esto en la parte superior. Entonces esto solía suceder en el desarrollo web tradicional, ¿de acuerdo? Y como puedes imaginar, hubo mucha repetición, ¿verdad? Ahora bien, si tienes mañana si tengo que hacer algún tipo de cambio en la barra de navegación superior, quiero agregar una opción más por aquí. Así que tengo que recordar hacer cambios en todos los archivos, donde quiera que tenga esta barra superior siendo utilizada, ¿verdad? Y esto fue tedioso, no fácil, y no fue una buena práctica, Ahora, con el concepto de reutilización. ¿Bien? Por lo que existe un concepto de reutilización, lo que significa que creas cosas una vez y las reutilizas varias veces lo largo del ciclo de vida de la aplicación Entonces, lo que significa la reutilización es que tienes esta barra en la parte superior creada, un pie de página en la parte inferior creado, y simplemente puedes reutilizarla en todas las páginas ¿Bien? Eso es lo que significa reusabilidad, ¿verdad Y esto es posible con la ayuda de componentes en reaccionar. Bien. Entonces, ¿qué es un componente de reacción Entonces, si vas a aprender a reaccionar por aquí, ¿de acuerdo? Así que en realidad lo he abierto por aquí. Bien para que puedas ver por aquí. Un componente es una pieza de interfaz de usuario que tiene su propia lógica y su propia apariencia. ¿Bien? Puede ser tan pequeño como un botón o tan grande como una página completa. ¿Bien? Entonces déjame ponerlo de esta manera. Los componentes React son el bloque de construcción de cualquier aplicación de React. ¿Bien? Lo que es, se trata una pieza reutilizable de interfaz de usuario o UI que puede ser definida por el desarrollador y permite utilizarla, reutilizarla en múltiples lugares de la única aplicación. Entonces, por ejemplo, te di el ejemplo de este bar en la parte superior, ¿de acuerdo? Lo creas una vez y lo reutilizas en toda la aplicación, ¿de acuerdo? Y es independiente. Tiene su propio trozo de código. Bien. Mañana, si quieres hacer algún tipo de cambio, solo tienes que hacer el cambio en un archivo, y se refleja en todas partes. Eso es un beneficio de los componentes. ¿Bien? Ahora, puedes ver así es como puedes crear componentes, ¿de acuerdo? Ahora, antes de hablar de esta pieza de código, déjame decirte una cosa más. Los componentes en react se pueden crear de dos maneras. Una es haciendo uso de funciones, como puedes ver aquí en mi pantalla. Otra forma es haciendo uso de las clases. Ahora, clases si exploras algún tipo de código más reciente en react, no verás mucho uso de las clases por ahí. Entonces funciones es lo que se está utilizando en todos los lugares. Entonces eso es a lo que nos vamos a apegar. Y los componentes creados usando funciones se conocen como componentes funcionales, ¿verdad? Para que puedas ver esta pieza de código por aquí. Es una función de script Ja. Puede ver que los componentes de reacción son funciones de script Ja que devuelven un marcado. Derecha. Entonces aquí puedes ver que esta es una función, una función de script Ja, que está devolviendo JSX, el marcado, Y este es un ejemplo muy sencillo de un componente que es sólo un botón. ¿Bien? Para que puedas ver cómo está devolviendo este botón, y puedes hacer uso de este botón en tu aplicación, bien, donde quieras usarlo. Bien. Entonces aquí puedes ver que está haciendo uso de esto en mi app por aquí, y está renderizando el botón de aquí. ¿Bien? Ahora, una cosa hay que anotar por aquí, entonces dice que empieza con mayúscula. ¿Bien? Así que los nombres de componentes de react siempre deben comenzar con una letra mayúscula mientras que etiquetas HTML deben ser minúsculas ¿Bien? Para que puedas ver por aquí. Bien. Esto empieza por la letra mayúscula, ¿verdad? Entonces así es como se crean los componentes. Ahora aquí, también tienes un editor para jugar. Bien, puedes ver que este es el botón que se ha creado. Por supuesto, todo esto está en el mismo archivo app dot js. Se pueden crear varios archivos. Entonces, por ejemplo, puedes tener button o mybutton Js creados por aquí por separado, y puedes tener myapp dot js donde estés haciendo uso de ¿Bien? Eso también se puede hacer. Pero aquí, el ejemplo lo está demostrando en un solo archivo por aquí. ¿Bien? Así que aquí, si ves mi botón, ¿de acuerdo? Y puedo reutilizar el botón de aquí. Entonces si quiero, puedo hacer uso de él como diez veces o el número de veces que me guste. Puedes y si quiero hacer un cambio en el texto de aquí, tengo que hacer un cambio en un solo lugar, y soy un botón que dice hola. Lo siento. Canta hola. Se puede ver. Me reflejé en todos los usos. Puedes ver que lo estaba usando en varios lugares, ¿verdad? Para que veas que se está reflejando en todos los lugares. Entonces esto es un beneficio de los componentes. Ahora imagina si no estás haciendo uso de componente, en realidad estás tomando este botón de código y en realidad lo estás renderizando de esta manera diez veces. Mañana si quieres hacer un cambio en la copia por aquí o mañana si quieres actualizar cualquier tipo de texto o cualquier tipo de estilo, tienes que hacerlo en todos los lugares, ¿verdad? Y eso no es bueno porque, ya sabes, introduce la posibilidad de tener errores en la aplicación porque somos humanos, ¿verdad? Nosotros los desarrolladores somos humanos. dejar de hacer un cambio en una obra en particular, ¿verdad? Y eso introduciría cualquier tipo de error en la aplicación. Entonces esto no es recomendable, pero se recomienda esta forma de componentes, ¿verdad? Y puedes hacer uso de ella en tu aplicación, ¿verdad? Entonces lo que haría es que lo haría ya que ahora tenemos algo de claridad sobre qué son los componentes de reacción, bien, cambiaríamos a nuestra aplicación. Tengo esta aplicación react creada, bien, con app muy sencilla dot Jx Ahora, aquí en APdT Jasix aquí verías, tengo un saludo muy sencillo, muy sencillo que estoy regresando por aquí Y esto es en realidad un componente, ¿de acuerdo? Entonces, si ves por aquí en main.j6, realidad estoy renderizando app por aquí en root Y estoy importando app desde app dot Jx, y app se está exportando por aquí, puedes ver, ¿verdad Entonces sí, este es un ejemplo de componentes también. ¿Bien? Estamos viendo la exportación Oops IMS punto y coma por aquí Yo sólo lo agregaré. Bien. Pero se puede ver cómo está funcionando esto. También puede agregar componentes aquí en este archivo mismo. ¿Bien? Entonces lo que puedo hacer es tomar este pedazo de código. Puedo crear un botón. Bien. Entonces lo que voy a hacer es que voy a venir aquí. Bien. Voy a añadir un botón de esta manera. ¿Bien? Soy un botón diciendo hola, y de hecho puedo agregar un botón. ¿Bien? Pero antes de hacer eso, déjame mostrarte cómo es la salida actual. Entonces la salida de corriente dice hola porque no hay ningún botón involucrado en este momento. Aún no he visto el archivo. ¿Bien? Ahora he creado un botón. He dicho función, mi botón. Soy un botón y estoy diciendo hola por aquí. Bien. Ahora puedo venir aquí y puedo decir mi botón, algo así, y lo cerraré y puedes ver un botón entrando por aquí, ¿verdad? Y puedo replicar esto de la manera que quiera, ¿de acuerdo? Así puedo añadir cualquier número de botones como me guste. Puedes ver que se están agregando tantos botones, ¿ verdad? Estos son todos botones. Mañana si tengo que hacer un cambio en la interfaz de usuario, como dije, tengo que hacerlo en un solo lugar, ¿verdad? Y todo esto viene en un solo archivo, ¿verdad? Quizá quiera modularizar el código. Entonces esta no es una buena práctica tener múltiples componentes en un solo archivo. Entonces lo que debo hacer es crear un nuevo archivo por aquí. Bajo SRC, diré mi botón. Enseñó JAX por aquí. Bien. Y voy a cortar este código, y lo voy a mover por aquí. ¿Bien? Algo como esto. Y aquí, voy a decir export o default, y voy a decir myPTON por aquí, algo así Y por aquí, sólo voy a conseguir esto importado. Entonces en el momento en que presiono Control y espacio por aquí, bien, esta línea es importada. Incluso puedes escribir esta línea en la parte superior. ¿Bien? En realidad estás importando mi botón de este archivo de aquí, ¿de acuerdo? Si mantienes el control, y si pasas el cursor sobre esto, verás que esto se convierte en un enlace, y puedes ir a este archivo si quieres ¿Todo bien? Y si guardas esto, la salida no cambiará, pero el código ahora está mucho más modularizado. ¿Bien? Entonces tienes un componente que has creado y lo estás usando en tu aplicación. ¿Todo bien? Espero que esto tenga sentido. Y espero que esto sea útil. Espero que estés entendiendo la importancia de cómo son importantes los componentes. Entonces este es un ejemplo muy sencillo que he demostrado. Pero imagina como si estuvieras construyendo una aplicación compleja donde estás administrando múltiples perfiles de usuario, ¿verdad? Ahora, podría haber varios tipos de usuarios, y es posible que desee mostrar la información del perfil en diferentes lugares de la aplicación. Entonces puedes tener un componente ¿verdad? Puede tener un componente de imagen de perfil para mostrar la imagen de perfil de cierta manera. Y puedes reutilizarlo en varias ocasiones en múltiples lugares. Por ejemplo, si quieres mostrar la imagen de perfil en la pantalla de inicio, ¿verdad? Para que puedas usar ese componente. Bien, si quieres mostrarlo en la página Editar perfil, puedes mostrar usar ese componente, ¿verdad? Entonces esto es válido si tienes algún tipo de requisitos personalizados. Entonces, por ejemplo, normalmente las fotos de perfil se muestran en un círculo, ¿verdad? Siempre que vas a alguna aplicación, las fotos de perfil se muestran en un círculo, ¿verdad? Por lo tanto, es posible que desee tener una especie de vista circular en la que esté mostrando la foto de perfil del usuario. Así que podrías crear un componente para eso y reutilizarlo en toda la aplicación donde quieras mostrar la imagen. ¿Correcto? Y si hay algún cambio en la interfaz de usuario mañana para mostrar la foto de perfil, se realiza un cambio en ese archivo, y se refleja a través de él. Es tan bueno y tan útil, ¿verdad? Entonces espero que tengan un buen entendimiento de cómo los componentes son importantes y los bloques de construcción de la aplicación react, y espero que esto haya sido útil. 18. Pon manos a la obra con los componentes: Entonces es hora de que vayamos manos a la obra y hagamos algo de práctica con componentes, ¿verdad? Y aquí, lo que tengo es una aplicación react, que está renderizando una cartera de un desarrollador, para que puedan ver esta aplicación por aquí. ¿Bien? Es una app muy sencilla. Pero el problema con esta aplicación es que todo está entrando o siendo renderizado desde un solo archivo. Entonces, si tengo que darte un ist por aquí, ¿de acuerdo? Uh, déjame desplazarme hacia arriba. Entonces bien, esto es app dot JSX, que está siendo renderizado por punto principal JSX en el elemento raíz Y dentro de app.j6, estás haciendo uso de este archivo CSS y tienes esta aplicación de función que se está usando aquí Y dentro de esto, tienes estas variables. Bien, primero, tenemos estas variables. Y entonces lo que estamos haciendo es que estamos devolviendo este JSix que está haciendo uso de estas variables, como los datos almacenados en las variables, y estamos renderizando los datos Lo que vamos a hacer es que vamos a modularizar esto e introducir algunos componentes por aquí Entonces eso nos va a dar un poco de práctica práctica con componentes. Entonces primero lo primero, vamos a modificar encabezado por aquí. Entonces lo que voy a hacer es que voy a venir aquí en SRC. Voy a agregar encabezado punto Jx. Bien. Bien. Primero crearé todos los archivos. Entonces encabezado JSix es lo que voy a necesitar. Voy a necesitar cerca de J seis. Bien. También voy a necesitar que puedas decir, lista de proyectos tat J seis por aquí. También voy a necesitar contactar a Jix por aquí, y voy a necesitar un Pie de Página al final, que es Puta tout, J seis Bien. Ahora bien, para organizar esto mejor, puedo introducir una carpeta por aquí y puedo decir componentes por aquí, y puedo mover todos los archivos recién creados que acabo de crear a esta carpeta en particular. ¿Bien? Entonces esto se ve un poco limpio, incluso sobre la lista de proyectos de encabezado de contacto. Me he movido todos. Todo bien. Ahora lo que vamos a hacer es que voy a venir aquí en app dot JSX, y primero, trabajaremos en header dot JSX Así que voy a tomar esta sección de encabezado por aquí, bien toda esta sección de encabezado por aquí. ¿Verdad? Y voy a mover esto al componente. ¿Bien? Entonces lo que voy a hacer es aquí en cabecera. Lo que tenemos que hacer es que tengo que crear lo primero. Necesito tener una función. Declaración de función, voy a decir encabezado. Y aquí en los parámetros, no necesito nada. Bien. Y voy a regresar. ¿Todo bien? Tenemos que devolver el JSX Bien. Entonces voy a devolver esta parte por aquí. Voy a pegar esto. Todo bien. Ahora, el nombre y la profesión faltan por aquí. Entonces lo que tengo que hacer es desplazarme hacia arriba, cortaré o sacaré estas dos cosas por aquí, y agregaré nombre y profesión por aquí, algo así. ¿Bien? Así que esto está hecho, ¿de acuerdo? Y, si, esto es todo. Necesito agregar un estado de exportación por aquí. Puedo decir export default, y voy a exportar head. Bien, algo como esto. Y esto es todo. Ahora por aquí en este archivo en particular, me desplazaré hacia abajo y aquí en lugar de sección de encabezado, puedo decir encabezado. Puedes ver este componente y puedo presionar Enter. En el momento en que hago eso, necesito asegurarme de que yo mismo cierro la etiqueta también por aquí. En el momento en que agregué eso o seleccioné eso de la sugerencia de pedido, se puede ver que esta declaración de importación se agrega en la parte superior, lo que significa que estamos importando la cabeza del componente por aquí. Y bien, hay algún problema. La app no funciona como se esperaba. Déjame ver cuál es el tema por aquí. Así que voy a comprobar el error aquí en la consola. ¿Bien? El error dice que la profesión no está definida en la App JA 626. Bien, me dio el error, por cierto. Así que cambiamos la profesión a cabecera, ¿de acuerdo? Y es necesario por en la app punto JSX, debería decir por aquí Se puede ver profesión y también, yo diría que se necesita nombre. Bien. Así que me quedaré con las variables por aquí. Eliminaremos estas variables al final para evitar cualquier problema. Todo bien. Y ahora si vienes por aquí, puedes ver encabezado está funcionando absolutamente, bien. Sin ningún problema. Entonces esto se está renderizando absolutamente desde aquí. Puedes ver la sección de encabezado. ¿Bien? Ahora solo eliminaré este comentario. Bien. Y sí, o nos apegaremos al comentario. Lo quitaremos al final. ¿Bien? Ahora, hagamos lo mismo con la A. ¿Bien? Ahora voy a cortar esto sobre la sección por aquí. Bien. Y para A, ya hemos creado un archivo llamado en JSX por aquí ¿Bien? Entonces lo que voy a hacer es que voy a agregar una función, sobre ningún parámetro, y voy a decir return, o y voy a pegar este Jx, algo así Bien, entonces esto está hecho. Bien. Y solo presionaré tabulador para esto. Todo bien. Entonces se trata de, y necesito agregar export por aquí, export default, A por aquí, algo como esto. Todo bien. Voy a guardar esto y si vienes por aquí, necesito importar sobre. Todo bien. Esto está hecho, y si vienes por aquí, bien, volvemos a ver un problema. El problema es que el nombre y la profesión no existe. Entonces necesito estas dos llaves también. Entonces me llevaré los esquís lo siento, no llevaré estas variables por aquí y voy a ganarle por aquí Bien. Voy a guardar esto y deberías ver la salida. Se puede ver. A también se está convirtiendo en un componente. ¿Bien? Si vienes por aquí, desplázate hacia abajo. A está hecho. Tenemos proyectos. Entonces voy a tomar la sección de proyectos así. Voy a ir por aquí. Voy a añadir una función, algo así, proyectos o lista de proyectos. Algo así. No hay parámetros, LO, y solo voy a obtener la lista de proyecto también que estamos definiendo por aquí, esta lista. ¿Bien? Entonces voy a agregar esa lista por aquí. Uy. Entonces hay un problema. Esto debería ser parte de la declaración de devolución, ¿verdad? Por lo que debería ser devuelto. Así que voy a cortar esto Algo como esto. ¿Bien? Entonces esto está hecho. Bien, estamos regresando este GA six, y tenemos estos proyectos para encontrarlo a tope. ¿Todo bien? Esto tiene sentido, y voy a hacer exportación por defecto, y voy a decir lista de proyectos de distancia. Algo así. Bien. Y aquí en app.j6, voy a venir Sección de proyectos, voy a decir lista de proyectos, etiqueta de cierre automático, y veremos la lista si se está renderizando la manera correcta, lo es, ¿verdad? Haremos lo mismo para el contacto también. ¿Bien? Es más o menos lo mismo de mover esto. ¿Bien? Entonces contacta, vendré por aquí. Diré función, contacto. Voy a deshacerme de esto, y luego voy a decir que regresen por aquí. Así. Y luego lo tengo hecho, ¿de acuerdo? Y voy a decir exportación por defecto, y voy a decir contacto. Uy. Entonces voy a decir contacto por aquí. Así. Bien. Y necesitas hacer uso del contacto por aquí. ¿Bien? Entonces voy a decir contacto. Y si, Footer también hará lo mismo. Voy a cortar esto. Iremos a pie.j6 y voy a decir función, Futter Bien. Y luego voy a decir que regresen aquí. Así. Y voy a tener la Puta t, y voy a añadir **** tag. Bien. Bien, entonces no estás viendo al **** como una importación por aquí porque no has exportado. ¿Bien? Entonces necesito decir export default Puta. Bien. Y luego por aquí, Puta. Deberías ver a Puta entrando por aquí. Bien. Y bronceado, bronceado, ¿verdad? Ahora bien, si vienes por aquí, todo debería funcionar, absolutamente, ¿bien? Se puede ver. Bien vamos a hacer un poco de limpieza aquí en este archivo en particular, así que no necesitamos estas variables. Yo me desharé de ellos. Bien. Y voy a deshacerme de los comentarios, bien. Entonces algo como esto. Todo bien. Y si, estamos bien. Voy a alinear esto un poco. Ya estamos bien. Se puede ver. Entonces este es nuestro componente de aplicación ahora, bien, que está teniendo varios otros componentes como headbo lista de proyectos contacto FUTA Y estos son todos componentes individuales ahora, bien, que se están renderizando o que se están creando por separado. ¿Todo bien? Todos estos son componentes individuales, y cuál es la comida para llevar aquí, ¿de acuerdo? Así que mañana, si quieres agregar múltiples componentes en un solo proyecto, eso es absolutamente posible. No es como si pudieras tener un solo componente en un proyecto de reacción o algo así. No existe tal regla. Puedes tener cantidad de componentes que quieras, ¿de acuerdo? Y puedes usarlo de esta manera. Ahora, mañana, si quiero cambiar el orden por aquí, si quiero moverme por debajo de lista de proyectos, puedo hacerlo fácilmente. Se puede ver que ha cambiado. Puedo hacer Controles y puedo devolverlo al estado original, ¿verdad? Entonces esto es posible, ¿verdad? Además, una cosa que recuerdas esta es app de aquí es un componente en sí mismo. Y dentro de este componente, estamos entrando en otros componentes. Puedes ver app es un componente en sí mismo, y dentro de este componente, estamos ingresando otros componentes como header bow project list, contact, potter. Entonces esto es posible, ¿verdad? Una aplicación en sí es un componente, se está renderizando aquí. Entonces, si vas al punto principal Jx, se está renderizando aquí en el elemento raíz por aquí, ¿verdad Así elemento raíz en el main.j6, lo que se está renderizando app dot JSX, componente app Y el componente de la aplicación está renderizando estos muchos componentes en sí mismo, ¿verdad? Entonces el componente también puede renderizar otros componentes que es perfectamente válido y no hay ningún problema como tal en eso, ¿verdad? Entonces puedes imaginar cómo son los componentes modulares. Por lo que te permiten incorporar modularidad a tu código. Le permiten descomponer toda su aplicación en pequeñas piezas manejables Así que mañana si quiero hacer cambio de cabecera, ¿de acuerdo? Encabezado a través de la aplicación. Tengo que hacer un cambio en este único archivo. Bien, si tengo que hacer cambios en la FUTA a través de toda la aplicación web, tengo que simplemente hacer el cambio por aquí Eso es, ¿verdad? Entonces es reusabilidad. Una vez que se crea el componente, se puede reutilizar el número de veces. Puedes reutilizar FUTA número de veces en cualquier lugar que quieras, ¿verdad Mantenibilidad, por supuesto, debido a la reutilización, modularidad, le permite mantener estos componentes individualmente por estos Y también, hay una separación de preocupaciones es lo que yo diría, porque los Componentes te ayudan a organizar el código separando cosas diferentes directamente en sus propios archivos individuales, ¿verdad? Entonces es un individuo es un bloque autónomo es lo que yo diría, ¿verdad? Entonces hay separación de preocupación en donde tienes su propia función. El componente tiene su propia función, su propia JSX, su propia interfaz en su propio archivo, ¿verdad? Entonces es autónomo, ¿verdad? Entonces sí, se trata de componentes en react. Y una cosa más que me gustaría mencionar si quieres hacer uso o reutilizar el componente, tienes que agregar esta exportación en la parte inferior cada vez que estés creando esta función de esta manera, ¿verdad? Y que una vez que agregues la exportación, sólo entonces podrás introducirla de esta manera en el archivo donde quieras usarla, ¿verdad? Entonces no escribimos esta entrada porque si elimino esto, digamos. Puta. Si guardo esto, voy a obtener un error, claro. Esto no va a funcionar. Y si ves la consola, te va a arrojar el error. Se puede ver. Potter no está definido. Ahora para traer Putter, puedes escribir en toda esta línea de entrada, o lo que sugiero es que solo presione Control y espacio Control y espacio en Windows, comando y espacio en Mac, puedes ver esta sugerencia, con esta importación por aquí. Ya ves voy a seleccionar esto. Y en el momento en que selecciono esto, la entrada se agrega automáticamente en la parte superior. No hay temas como tales. Si guardo esto, la aplicación empieza a funcionar de nuevo, ves, está funcionando de nuevo, ¿verdad? Entonces sí, espero que esto haya sido bastante bueno, y espero que tengas una buena claridad cuanto a cómo puedes crear múltiples componentes y organizarlos dentro de una sola aplicación. Y espero que esto te haya dado una idea de lo importantes que son los componentes cuando se trabaja con react. 19. Accesorios: introducción: Bienvenido, y es hora de que hablemos de apoyos en reaccionar. Ahora bien, para demostrar lo mismo, tengo esta aplicación muy sencilla. Entonces aquí, si ves, tengo este punto principal Qx, que está renderizando esta app en el elemento raíz Y esta es la aplicación de aquí, que solo está renderizando hola por aquí. Entonces puedes ver Hola como la salida por aquí, ¿verdad? Ahora, permítanme crear un escenario. Digamos que estás construyendo o mostrando perfiles de usuario, ¿verdad? Entonces estás construyendo una aplicación en la que deseas mostrar perfiles de usuario para diferentes conjuntos de usuarios, ¿verdad? Ahora bien, lo que haría es crear otro componente. ¿Bien? Yo llamaría a esto como tarjeta de perfil por aquí, o punto Jx por aquí Bien. Y dentro de esto, voy a tener una función. Voy a decir tarjeta de perfil. Uy. Entonces voy a decir tarjeta de archivo por aquí. Voy a deshacerme de los parámetros. Y por aquí, voy a devolver algunos GSX. ¿Bien? Entonces interfaz tenemos que volver. Ahora bien, ¿cuál es la interfaz a la que regresas? Lo voy a mantener muy simple, ¿verdad? Voy a tener un TIF. Voy a tener H dos. Voy a decir nombre por aquí. Vamos a mostrar nombre y yo es. O apegémonos al nombre por aquí. ¿Bien? Sólo nos quedaremos al nombre ahora mismo. Y claro, voy a añadir exportación por aquí, por defecto, y voy a decir tarjeta de perfil, algo así. ¿Bien? Ahora, necesito hacer uso de la tarjeta de perfil por aquí. Lo que tengo que hacer es decir tarjeta de perfil, algo así, y voy a conseguir esto importado. ¿Bien? Para que puedas ver la declaración de entrada directamente a la parte superior. Voy a colapsar esto para que tengamos algo más de espacio. Y ahora, si vienes a la aplicación por aquí, puedes ver el nombre que se muestra por aquí, lo que significa que nuestro componente se está renderizando con éxito. ¿Bien? Ahora, vamos a venir aquí. Necesito mostrar el nombre de usuario por aquí, ¿verdad? Entonces lo que puedo hacer aquí es que puedo decir constante. Voy a crear una variable. Diré nombre, y llamaré al nombre como Alice. ¿Bien? Así que este es un script Java que estoy escribiendo, y voy a hacer uso de este JavaScript dentro de JSX así, y voy a decir Bien. Ahora vas a decir que vas a ver el nombre de Alice por aquí, ¿de acuerdo? Entonces, por el bien de la comodidad, solo cambiaré esto a H tres, algo así. ¿Bien? Para que puedan ver, nombre es Alice por aquí. ¿Bien? Entonces bien así que esto está funcionando bien. Ahora, digamos que nuestra aplicación se expande y es una aplicación multiusuario. Ahora, es posible que desee hacer uso de esta tarjeta de perfil para mostrar información de múltiples usuarios, ¿verdad? Ahora mismo, lo que estamos haciendo es que estamos mostrando ALS codificado por aquí. Yo no quiero hacer eso. Quiero mantenerlo lo más dinámico posible, y habrá escenarios en los que podríamos obtener datos del back end, podríamos obtener datos de la entrada del usuario. Podemos obtener datos desde cualquier lugar, ¿verdad? Entonces debería ser capaz de tener algún tipo de dinamicidad en este componente en particular, lo que me permite renderizar este nombre en base a este nombre en base es pasado o lo que está disponible, ¿ Entonces, ¿cómo podemos hacer que esto suceda? Entonces aquí es donde entra en imagen el concepto de utilería, ¿verdad? Entonces apoyos en reaccionar, ¿qué son? Se utilizan para pasar datos de un componente a otro. Así que imagina esto. Lo que quiero decir con esto es este componente, este es otro componente, ¿verdad? Quieres hacer uso de tarjeta de perfil en este componente por aquí, ¿verdad? Ahora, donde sea que estés usando, tendrías algún tipo de datos, ¿verdad? Por ejemplo, podría hacer una llamada EPI por aquí, digamos, llamada API por aquí, y podría recuperar el nombre de usuario de este servidor, Busco buscar nombre de usuario así que ¿verdad? Ahora bien, en realidad no estoy haciendo esto, pero digamos que tengo una llamada API en la que estoy recuperando el nombre del usuario del servidor usando JavaScript, ¿verdad Y tal vez quiera hacer uso de ese nombre, y tal vez quiera mostrarlo con tarjeta de perfil, ¿verdad? La tarjeta de perfil es un componente que quiero hacer uso de ella. Entonces, ¿cómo puedo pasar este nombre que tengo por aquí? Y muéstralo con tarjeta de perfil. No hay manera de hacerlo, ¿verdad? Pero con la ayuda de utilería, puedes hacer eso. Entonces necesitas hacer uso de utilería para habilitar esta funcionalidad, ¿verdad Entonces, lo que está sucediendo aquí es entender esto esta aplicación de aquí es un componente padre, que está renderizando esta tarjeta de perfil infantil. ¿Por qué la tarjeta de perfil es infantil? Porque se está renderizando en app. Y por lo tanto app es componente padre, y este es componente hijo, ¿verdad? Por lo tanto, los props en react se utilizan para pasar datos de un componente a otro, específicamente de un componente padre a un componente hijo Y con la ayuda de los apoyos, los apoyos ayudan a hacer que los componentes sean más flexibles y reutilizables, ¿verdad? Ahora mismo, tenemos a Alice codificada por aquí. Entonces claro, solo puedes usar esto para mostrar la información de Alice. ¿Bien? Pero si elimino esta cosa codificada por aquí y si la hago dinámica, algo dinámico por aquí, entonces esto me permitiría hacer uso de esta tarjeta de perfil para mostrar cualquier tipo de información de usuario, ¿verdad? Déjenme demostrarlo. Así que me desharé de esto por aquí, ¿de acuerdo? Y voy a añadir un parámetro por aquí. Diré utilería, algo como esto, ¿de acuerdo? Y aquí, voy a decir utilería. Nombre del punto, ¿verdad? Ahora bien, ¿de dónde viene este utilería? Entonces ahora mismo, no va a mostrar nada, Bien, porque no estamos pasando nada. Así que aquí, tengo que pasar. Entonces necesito decir que el nombre es igual a, y puedo decir, vamos así. Bien, para que pueda ver a Alice. Puedes ver a Alice, ¿verdad? Ahora bien, si duplico esta tarjeta, déjame duplicar esta tarjeta de aquí. Puedo ver a Joan. Bien. Se puede ver a John siendo rendido. Entonces de esto es de lo que estaba hablando. Esta es la dinamicidad que añaden los apoyos. Bien. Sin esto, si tienes hardcoded Alice por aquí Bien, imagina esto. Tienes a Alice codificada por aquí Bien. Entonces esto no va a funcionar. ¿Bien? Entonces no estoy codificando en este momento No voy a revertir mi código, ¿de acuerdo? Pero si codificas a Alice por aquí, te imaginas, como si duplicara esta tarjeta de perfil, veré a Alice por todas partes, ¿verdad Porque está codificado duro. Pero ahora mismo lo que está pasando es que estoy pasando dinámicamente este elemento por aquí o debería decir esta propiedad por aquí, y esto se está utilizando para mostrar la información. Todo bien. Entonces sí, esto es lo que son los apoyos Entonces props es una forma corta para propiedades, ¿de acuerdo? Y son una forma de pasar datos de un componente a otro en reaccionar, ¿de acuerdo? Y se utilizan para hacer que los componentes sean más reutilizables pasando diferentes valores como entrada al componente, ¿verdad? Entonces, en lugar de codificar el nombre duro y todo el otro tipo de información dentro del componente, puedes pasarlos como apoyos, ¿de acuerdo? Una pregunta más me gustaría abordar cual podrías estar pensando, bien, dije, voy a tener la información del usuario disponible en este componente, ¿verdad? Porque estoy haciendo una llamada a la EPA, o podría hacer una llamada a la base de datos de aquí, ¿verdad? Ahora bien, la pregunta que podrías hacer es, en lugar de usar utilería, ¿y si muevo la llamada de la EPA de aquí a aquí ¿Verdad? Esa es una muy buena pregunta. Pero te diré algo, si estás haciendo esto, no necesitas usar props, correcto, porque tienes la información del usuario por aquí, puedes buscarla y mostrarla por Bien. Pero déjame decirte aquí, si estás codificando la llamada a la API, entonces lo que estás haciendo es que estás definiendo cómo este componente en particular está recuperando datos ¿Bien? Es posible que no quieras hacer eso porque dependiendo del escenario, podrías obtener la información de diferentes lugares Entonces por ejemplo, si aquí estás mostrando la información del perfil, estás recuperando los datos del servidor, digamos Si estás usando esta tarjeta de perfil en algún otro archivo y ahí quieres mostrar la información de la base de datos. Entonces, en lugar de llamar a la API, es posible que tenga una llamada a la base de datos aquí o algún tipo de otra llamada por aquí. ¿Bien? Entonces, la obtención de datos está completamente desacoplada aquí del componente Si inicia la codificación rígida de datos en el componente, se restringirá se restringirá Entonces aquí hemos comprado el componente de datos como la parte de recuperación. ¿Bien? obtención de datos está fuera del componente, y solo estamos pasando los datos que recuperamos al componente Entonces el componente solo se enfoca en renderizar la información. Espero que esto sea útil y espero que sean capaces de tener una idea de esto. Ahora, un par de cosas que debes tener en cuenta sobre los apoyos es el flujo de los apoyos Por lo tanto, los props se pasan de un componente padre a un componente hijo Ya discutí qué es el componente padre. El componente principal en nuestro caso es la aplicación por aquí. Entonces, en este caso, se pasará de padre a hijo, lo que significa de aplicación a que significa de aplicación a perfil porque la tarjeta de perfil se está renderizando dentro de la aplicación. Entonces la tarjeta de perfil es componente hijo, ¿verdad? Entonces así es como funcionaría el flujo. Entonces este es el flujo de utilería de padres a hijos. Otro punto del que quiero hablar es la inmutabilidad. ¿Bien? Entonces los apoyos son de solo lectura Esto es algo que hay que recordar. Los apoyos son de solo lectura, es decir, componentes secundarios. Entonces, independientemente de los apoyos que estés pasando, los componentes secundarios no pueden modificar los apoyos que reciben En cambio, el padre controla los datos y los transmite según sea necesario. ¿Todo bien? Entonces, si intentas modificar los apoyos por aquí, digamos Entonces, si trato de decir props ese nombre de aquí es igual a probar, por ejemplo, si trato de guardar esto, la salida desaparecería Y si te diriges a la consola por aquí, si te desplazas hacia arriba, puedes ver, no se puede asignar a la propiedad de solo lectura, y estás tratando de modificar esto. Eso es lo que intenta decir. ¿Bien? Si te deshaces de esta línea, el error desaparecerá. Si guardo esto, se puede ver la salida está ahí y el error ha desaparecido. Se puede ver, ¿verdad? Entonces sí, los apoyos de utilería son inmutables. Son de sólo lectura. No pueden ser modificados por componentes hijos, y confían en el componente padre para pasarles los datos, ¿verdad? Entonces espero que esto sea útil y espero que hayas podido seguirlo. 20. ¿Varios accesorios?: Entonces tengo este ejemplo en el que estamos renderizando la tarjeta de perfil pasando el nombre como el prop por aquí, y estamos mostrando el nombre así en la tarjeta de perfil, y estamos viendo el nombre siendo renderizado aquí en la interfaz. Ahora bien, podría parecer mirando este ejemplo que estamos pasando por aquí solo un apuntalamiento. Entonces, ¿qué es una posibilidad? ¿Bien? Entonces me gustaría mostrarte y decirte que también puedes pasar en múltiples apoyos Entonces puedo decir 23 y puedo decir que H es 42, por ejemplo. ¿Bien? Entonces aquí estoy pasando un utilería más por aquí, que puedo exhibir por aquí. ¿Bien? Entonces puedo decir H y puedo decir H por aquí. Bien. Algo como esto. Y si vengo aquí, puedes ver a Alice y John, bien, con sus respectivas Hs. Bien, entonces esto es completamente posible en donde puedes pasar múltiples apoyos a un componente hijo Ahora en nuestro ejemplo, H que estamos pasando por aquí se está pasando como una cadena. Habrá un escenario en el que es posible que desee pasar los datos como número entero o número. Entonces lo que puedes hacer en ese caso es que puedes decir num por aquí, voy a pasar otro parámetro. Diré num como dos por aquí. ¿Bien? O déjame pasarlo como cuerda, ¿de acuerdo? Voy a pasar en un lugar en la cuerda y otro lugar por aquí de esta manera. Bien. Entonces así es como puedes pasar como número. Bien. Esto no es una cadena. Bien. Y por aquí, déjame probar algo. Puedo decir const sum es igual a props enseñados, num más uno ¿Bien? Y voy a mostrar los datos por aquí. ¿Bien? Entonces aquí, se puede decir num es así que no necesito esto no necesito esto, voy a ver suma por aquí. ¿Bien? Ahora si vienes por aquí, puedes ver que el num es 21 por aquí, que significa así que dos más uno, lo que significa así que dos más uno, se convirtió en 21 porque se estaba pasando como cadena por aquí en este caso. ¿Bien? En el segundo ejemplo, lo hemos pasado de esta manera, y aquí se está mostrando como tres, lo que significa que se está pasando como un entero, ¿verdad? Entonces espero que esto tenga sentido, cómo se puede trabajar con datos y pasar múltiples props en un solo componente ¿Todo bien? Espero que esto haya sido útil. 21. Administra valores booleanos y tipos de prop: Ahora hablemos de cómo puedes hacer uso de Pollans al trabajar con Entonces aquí en nuestro ejemplo, tenemos tarjeta de perfil, que estamos mostrando estoy pasando a cadenas y número, Allr? Y estoy mostrando este número de esta manera con la ayuda de cálculos. Entonces me desharé de esta pantalla para el número. No lo necesitamos. Bien. Y también me desharé de Num por aquí. Bien. Entonces ahora hablemos de booleano. Digamos que quiero pasar un prop booleano, diré que es miembro por aquí Bien, y voy a decir verdad por aquí. Bien. Y voy a pasar una cosa similar por aquí también. Vaya, tengo que cerrar esto por aquí. Bien. Voy a pasar es miembro, y voy a decir que cae por aquí. Algo así. Bien. Ahora, estoy pasando por aquí a Booleano, pero esto se está pasando como una cadena Bien. Déjame mostrártelo. Entonces si duplico esto, si digo que es miembro por aquí, lo siento. ¿Es miembro? Bien. Algo así como este inicio de utilería es memo. Bien. Ahora bien, si ves por aquí, verdadero y falso, se está imprimiendo como cadena E. Bien. Ahora, para pasarlo como E booleano por aquí, necesito, como, quitar estos corchetes redondos Lo siento, estas comas invertidas, y necesito agregar las Cobras. Bien. Esto es lo mismo para los enteros también. Ahora bien, si guardo esto y si vengo por aquí, verás que no eres capaz de ver los valores booleanos ¿Bien? Entonces, ¿cuál es el propósito de pasar los valores booleanos Por lo que los valores booleanos se utilizan para la toma de decisiones. ¿Bien? Entonces digamos que quieres mostrar, o quieres mostrar un mensaje dependiendo de si el usuario es miembro o no. Para que puedas hacer uso de este Booleano es miembro por aquí y puedes mostrarlo Bien, déjame mostrarte eso. Entonces puedo decir estatus por aquí. Estatus. Y si echas un vistazo al estado ahora, no hay nada porque es un valor booleano Entonces puedo decir si puedo hacer uso del operador ternario en realidad por aquí ¿Bien? Entonces puedo decir que props es miembro Entonces si esto es cierto, entonces estaría diciendo miembro activo o de lo contrario, estaría diciendo adivina. Algo así. Yo guardo esto y se puede ver miembro activo e invitado. Entonces Alice es miembro activo porque pasamos en verdad para Alice por aquí. Se puede ver que Alice era cierta. Y John no es un miembro activo, así que puedes ver invitado por aquí porque pasamos en falso. Bien, si quieres que esto también sea cierto, puedes pasar en verdad así. Uy. Entonces seleccionaré esto, guardaré esto y podrás ver miembro activo. Bien. Por una palabra, verás Johns adivina Bien. Entonces así es como puedes hacer uso de valores booleanos dentro Entonces props excepto miembro prop booleano, bien y le permite administrar el estado dentro del Entonces, si quieres agregar algún tipo de display condicional o algo por el estilo, puedes hacer uso de props booleanos display condicional o algo por el estilo, puedes hacer uso de props booleanos, ¿verdad? ¿Y cómo lo pasas? pasas dentro de un par de pasadas rizadas y no en comas invertidas como esta Esta es una manera de pasar una cuerda por aquí. Todo bien. Entonces espero que esto sea útil. 22. Desestructuración de accesorios: Entonces comencemos a hablar de desestructuración de utilería. Entonces aquí, tengo un ejemplo en el que tengo este componente app, que está haciendo uso de tarjeta de perfil dos veces, ¿verdad? Puedes ver que está renderizando la tarjeta de perfil dos veces, y está pasando estos datos por aquí, y estos datos se están pasando en forma de apoyos, y este componente de tarjeta de perfil está usando estos datos Con la ayuda de la notación de puntos. Para que puedas ver cómo lo está usando. Ahora bien, lo que quiero decir con notación de puntos es este dato que estás pasando de aquí, nombre, H es miembro. Estos atributos se están pasando en forma de objeto por aquí. ¿Bien? Entonces props se convierte en un objeto, y puedes acceder a lo que se haya pasado con la ayuda de la notación de puntos, lo que significa usar este punto por aquí Derecha, para que puedas ver props dot name, props dot h y props Esta forma de acceder a las cosas se conoce como notación de puntos, y podemos hacer uso de la notación de puntos por aquí porque props aquí es un objeto ¿Bien? Está en el objeto JavaScript, ¿verdad? Ahora, en JavaScript, es común hacer uso de la desestructuración, ¿verdad? Y cuando estás haciendo uso de props en react, desestructuración se usa comúnmente para hacer que el código sea limpio y más legible. Déjenme darles un ejemplo. Primero, solo te voy a dar una reseña de lo que es desestructurar Así que piénsalo de esta manera, ¿de acuerdo? Tienes un objeto JavaScript por aquí. ¿Bien? Esto no es reaccionar. Este es un script Java simple que estoy escribiendo por aquí. Bien, estoy diciendo nombre, John. Bien. Y tiene que tiene que tiene dos cosas en ella. Tiene nombre y cada uno. Entonces el cada uno es 30 por aquí. ¿Bien? Ahora bien, una forma de extraer los datos de este objeto es una forma de desempacar, es que se puede decir nombre, persona, tenso, nombre por aquí. Esta es una manera. Bien. Así que esto es sin desestructurarse, ¿de acuerdo? Y usando notación de puntos, ¿verdad? Eso es lo que estás usando, ¿de acuerdo? Se puede decir g por aquí y se puede decir persona punto edad. Esta es una forma de hacer las cosas, ¿verdad? Otra forma de hacer las cosas es con la ayuda de la estructuración T, con la desestructuración ¿Cómo lo harías? Entonces puedes decir const, ¿de acuerdo? Se puede decir nombre, g por aquí. ¿Bien? Y se le puede asignar persona. Uy. Entonces esto desempaquetaría todos los valores que existen en el objeto person y lo asignará a ambas variables Ahora me sale un error porque esto es redundante, ¿verdad? El nombre y la edad ya están creados, así que solo voy a comentar esto, bien para que no veamos el error. Pero tienes la sensación de que esto es una reestructuración en la que estás desempacando a la persona en nombre y a cada uno, ¿verdad? Y ¿cuál es el nombre y la edad? Nombre y cada uno son atributos que puedes ver aquí dentro del objeto de aquí. Entonces desempacamos las propiedades que existían dentro de este objeto Se puede ver que esto se desempacó. Ahora a esto se le conoce como desestructuración. Es una mejor sintaxis en comparación con esta. ¿Bien? Esto también es factible Esto se puede hacer, pero esto no es tan legible. Es un proceso un poco largo y engorroso, ¿verdad? Ahora, dije que esto se está pasando como el objeto, ¿de acuerdo? Y estas son todas las propiedades de aquí. Entonces aquí, si ves que tienes props, tienes props nombre punto, props punto H. Así nombre edad es miembro no son más Así que también puedes aplicar el patrón de estructuración D similar aquí. Bien. Y para hacer eso, lo que harías es que te puedes deshacer de esto por aquí. ¿Bien? Podemos hacer uso de la sintaxis similar, ¿verdad? Necesitas estos rizados, así que voy a copiar esto, pegarlo por aquí, y aquí puedo tener nombre H y tengo uno más es miembro, algo así Ahora bien, en el momento en que hago esto, no necesito acceder a todos estos atributos ni a todas estas propiedades, no a los atributos, a todas estas propiedades usando notación de puntos. Así puedo deshacerme del nombre del punto, punto H, y tot está por aquí. Bien. Voy a guardar esto y esto también se puede guardar, y verás que no hay ningún cambio en la salida. Tampoco habrá errores. Bien. Todo está bien, ¿verdad? Entonces esto es lo que es la desestructuración de JavaScript, y creo que estás familiarizado con la desestructuración de JavaScript. Pero esto solo fue un repaso. Entonces espero que entiendas qué es esto y cómo se usa esto para la desestructuración de utilería Ahora, recuerden, desestructurar en JavaScript es una forma conveniente extraer valores de matrices u objetos en variables, ¿verdad? Se usa con mucha frecuencia y el término que se usa es desestructurante permite desempacar Entonces desempacar es el término que se está usando en todas partes, ¿verdad? Entonces aquí, lo que estamos haciendo es que en realidad estamos desempacando los apoyos, Estamos desempacando los apoyos en variables individuales de aquí, Y estamos haciendo uso de esas variables dentro del componente, ¿verdad? Entonces aquí directamente se están utilizando variables, y esto es mucho más legible en lugar de hacer uso de la notación tot, ¿verdad? Entonces, cuando estés trabajando con componentes react, este tipo de sintaxis, verás mucho en donde los atributos se están pasando de esta manera. Las propiedades se están pasando de esta manera, y aquí se están desestructurando de esta manera. Así que no te confundas. Esto es una destrucción normal de objetos con script Java. Entonces Javascript el concepto de JavaScript se está utilizando por aquí, ¿verdad? Entonces espero que esto sea útil y espero que hayas podido seguirlo. 23. Valida los accesorios con PropTypes en React: Empecemos a hablar de validaciones de prop y cómo se puede usar para validar las propiedades que estás pasando, Entonces tengo este componente por aquí, app, que está haciendo uso de la tarjeta de perfil dos veces, y estamos pasando algunos apoyos por aquí, pueden ver, y este accesorio está siendo desestructurado por aquí por nosotros, y estamos haciendo uso de los datos desestructurados dentro del datos desestructurados dentro del compoun de aquí Ahora, déjame darte un escenario. Aquí estamos pasando en H y estamos pasando en H como una cuerda, ¿verdad? Ahora bien, no hay ningún tipo de validación como tal, ¿de acuerdo? No hay ningún tipo de validación que estemos haciendo ahora mismo que pueda ayudarnos a resaltar ese resaltado a un desarrollador o a quien esté usando este componente en particular que, oye, g se supone que es un número y no una cadena, ¿verdad? Entonces ahora mismo no estamos recibiendo ningún tipo de error. Todos estamos bien, pero habrá escenarios en los que hayas diseñado un componente y querrías a quien esté trabajando en ese componente o usando ese componente en su archivo, debería pasar datos de cierta manera, ¿verdad? Porque normalmente lo que sucede es que en un equipo estás trabajando en un componente, estás escribiendo un componente, y ese componente está siendo utilizado por cualquier número de desarrolladores. ¿Cómo se comunica eso? Entonces ahí es donde entra en imagen la validación de prop. Ahora, con la ayuda de los tipos de prop, el tipo prop es una herramienta que se puede utilizar para validar los apoyos que se están pasando o que recibe un componente ¿Bien? Entonces, con la ayuda de los tipos de prop, puede ayudar a atrapar pugs temprano durante el desarrollo cuando se están pasando los datos, asegurando que el tipo actual de datos se está pasando al componente Y si un componente recibe los apoyos que no coinciden con los tipos esperados, react emitirá una advertencia en la consola en el modo de desarrollo ¿Verdad? Entonces esto es algo que debes saber, y déjanos ver cómo puedes agregar validaciones Entonces, lo que haría es primero, necesitaríamos hacer uso de una declaración de entrada, así que voy a decir input, tipos prop. ¿Bien? Estoy escribiendo esto en tarjeta de perfil punto Qx, y voy a decir de voy a decir tipos de utilería por aquí Bien, entonces estoy haciendo esta declaración de entrada en la parte superior. Ahora bien, lo que haría es aquí, escribiría en la validación que necesito tener. Entonces para agregar validación, lo que haríamos es por aquí, diríamos tarjeta de perfil. Bien, este es el nombre del componente. Diríamos tot, yo diría tipos de utilería o algo así Bien. Y luego voy a abrir un par de alabanzas rizadas Bien, alinea esto con un punto y coma. Y por aquí, voy a escribir validación, lo que quiera tener. Entonces puedo decir nombre. Por nombre, necesito decir tipos de prop, tot string. Bien. Entonces esta es una. Bien. Puedo decir para cada tipo de utilería , pensamiento, digamos número. Queremos que sea número, cierto, entonces voy a decir número. Bien. Y para un miembro, Bien, voy a decir tipos de utilería, y voy a pasar en punto Bool por aquí Bien. Y voy a pasar en coma. ¿Bien? Todavía no he guardado este archivo, pero antes de guardarlo, quiero mostrarles que estamos pasando en cadena en este momento y no estamos recibiendo ningún tipo de error, ¿verdad? Entonces aquí, si ves desde app.j6, estamos pasando en cadena No estamos recibiendo ningún error en la consola. En el momento en que guarde esto y si vengo aquí, van a ver estas advertencias por aquí. Tipo de proposición fallido, no válido una edad de utilería de tipo cadena aplicada a la tarjeta de perfil, número esperado. ¿Bien? Entonces obtienes este tipo de advertencias en el modo de desarrollo solo cuando estás haciendo uso de la validación de tipos de prop. ¿Bien? Ahora bien, lo que sucederá es si un desarrollador está haciendo uso del componente de tarjeta de perfil. Digamos que el componente de tarjeta de perfil es desarrollado por usted y yo como desarrollador, soy su compañero de equipo, y estoy haciendo uso de esta tarjeta de perfil y pasa a pasar H S 23. Que es una cuerda. Simplemente comenzaría a lanzar advertencias a la consola y al desarrollador, yo soy el desarrollador, en este caso, lo sabría, oye, se supone que no debo pasarlo como cadena, sino que se supone que debo pasarlo como un número. ¿Bien? Ahora, puedo cambiar esto a número también por aquí, y la advertencia desaparecería. Entonces puedo decir 23. Si guardo esto, sigo recibiendo un error, bien, porque he cambiado solo en un lugar, ¿verdad? Entonces necesito hacer un cambio aquí también. Sólo guárdala. Bien. Y ahora, verás que no hay ningún error como tal. ¿Bien? Entonces está todo ordenado. Ahora, una cosa más de la que quiero hablar es que si no paso es miembro, veamos qué pasa, ¿de acuerdo? Entonces, si me omito I miembro, verás que no hay ningún problema como tal, ¿verdad? Para que veas, no hay problema, ¿verdad? ¿Estoy recibiendo algún tipo de error que se supone que debo aprobar es miembro? No, ¿verdad? Así que también puedes agregar validación para eso. Entonces, si algún tipo de utilería es obligatorio, ¿de acuerdo? Puedes agregar cualquier tipo de validación puedes agregar ese tipo de validación. Pedir al usuario que pase el valor de ese prop en particular. ¿Bien? Entonces aquí, Boll puedo decir tot, y aquí puedo decir que se requiere. Se puede ver. Si guardo esto, si vengo por aquí, verás que el prop is member está marcado como requerido en la ficha de perfil, pero su valor es indefinido, ¿verdad? Así que antes pasaba no estaba pasando en este utilería y no estaba recibiendo ningún tipo de error, pero ahora tengo que pasar esto obligatoriamente Bien, es No hay escapatoria. Y si guardo esto y si hago una actualización, verás que el error desaparece. Todo bien. Entonces espero que esto quede claro en cuanto a cómo funciona la validación de props Ahora, recuerden, esto se mostrará estos serán los errores que esté viendo se mostrarán en el modo de desarrollo, y esto se mostrará como advertencias, bien, en la consola del navegador, lo que ayudará a los desarrolladores a rectificar el problema y abordarlos, ¿verdad Entonces para eso están los tipos de utilería, ¿de acuerdo? Entonces esto significa que quieres una cadena. Esto significa que quieres un número. Esto significa que quieres un booleano, así como se requiere, ¿ Él y su nombre son opcionales, pero se requiere miembro, ¿de acuerdo? Puedes hacer T's también requeridos por aquí pasando en esto por aquí. Si se requiere agregar, entonces significa que también se requiere H y no es opcional. Todo bien. Entonces, dependiendo de tu requerimiento, puedes agregar este tipo de validaciones y hacer las cosas ¿Todo bien? Espero que hayas podido seguirlo, y espero que esto haya sido útil. 24. Uso de accesorios con matrices: Así que comencemos a hablar sobre cómo puedes hacer uso de arrays como props por aquí Entonces tenemos esta aplicación componente, que está haciendo uso de la tarjeta de perfil dos veces por aquí. Y tengo esta tarjeta de perfil, que está reestructurando los apoyos que estoy obteniendo Estoy mostrando los apoyos y tengo alguna validación para los apoyos por aquí ¿Bien? Ahora, lo que voy a hacer es digamos que deseo mostrar los pasatiempos por aquí, y los pasatiempos pueden ser múltiples. Entonces, lo que me gustaría hacer es que me gustaría que los pasatiempos se almacenaran en forma de arreglos por aquí. Digamos que tengo aficiones, así puedo decir con hobby uno. Bien. Puedo decir hobby uno, y puedo tener E de este tipo. Bien, algo como esto, y voy a decir leyendo, y solo voy a tener dos aficiones por ahora cocinando. Bien. Voy a pasar en esto. Bien. Y lo que puedo hacer aquí es que puedo agregar un utilete por aquí, aficiones, y puedo pasar en esto. Puedo decir hobby. Uno. Bien, entonces esto se está pasando ahora, y lo que tengo que hacer es hacer uso de él por aquí. ¿Bien? Entonces puedo decir hobby por aquí. Bien. Y si, me sale el hobby por aquí. Bien, aficiones, no va a ser hobby. Serán pasatiempos porque lo estás pasando como aficiones por aquí. ¿Bien? Entonces me dieron aficiones. Ahora lo que tenemos que hacer es mostrar los pasatiempos, ¿verdad? Entonces primero lo primero, voy a venir aquí. Diré tres años o tres años, aficiones. Bien. Y por aquí, lo que voy a hacer es voy a decir que voy a agregar una lista desordenada, L, y luego por aquí, voy a tener algo de guión Ja escrito Voy a decir mapa de aficiones. Entonces voy a hacer uso del método map por aquí. Bien, aficiones mapa de puntos, y voy a decir hobby. Voy a tener dos parámetros por aquí, bien. Así que por si acaso no sabes lo que estoy haciendo, estoy haciendo uso del mapa por aquí y estoy haciendo uso del mapa para iterar esencialmente sobre cada elemento en la matriz de hobbies Así que los pasatiempos son una variedad por aquí que he recibido. Bien, lo estoy pasando como una matriz. Se puede ver aquí, ¿verdad? Es una matriz. ¿Bien? Ahora necesito iterar sobre él y mostrarlo al usuario Así matrices en JavaScript. Entonces esto es JavaScript y las matrices en JavaScript tienen este increíble método llamado map, del que puedes hacer uso, ¿verdad? Entonces estoy haciendo uso de aficiones punto Mapa. Ahora, lo que hace el mapa es anuncios sobre cada elemento en la matriz de hobbies o cualquier matriz con la que lo estés usando Entonces en este momento, la matriz en cuestión son los pasatiempos. Estoy diciendo que califica sobre cada elemento en la matriz hobbies, y lo que haces es para cada elemento de la matriz, ejecuta esta función de flecha. Entonces tengo esta función de flecha que ves, así que solo cortaré esto. Bien, Este es mapa. Bien. Ahora dentro de esto, estoy pegando esta función de flecha. ¿Puedes ver? Bien. Esta es la función de flecha que estoy haciendo uso de, y esta función de flecha es que se aplicará o ejecutará, y va a regresar en nuevo valor. ¿Bien? Entonces esto está tomando en dos parámetros, esta función de flecha, hobby e índice. Ahora, hobby es el individuo o el elemento actual en el array hobbies durante cada iteración. Por lo que está representando el elemento actual durante cada iteración. Por ejemplo, si nuestra lista de pasatiempos es leer y cocinar, primero, hobby será leer y luego será cocinar. Y el índice correspondiente se pasará por aquí. ¿Bien? Entonces lo que haría es devolver algo por aquí. Entonces, lo que sea que esté agregando por aquí se devuelve. Así que voy a crear un elemento LI por aquí. Bien. Y voy a decir clave es igual a, voy a añadir índice por aquí y hobby se agregará por aquí, algo como esto. Así. ¿Bien? Entonces lo que hicimos es que agregamos esta función por aquí, y esta función básicamente se ejecuta para cada elemento de la matriz. ¿Bien? Tiene dos parámetros. Uno es el elemento actual en el array hobbies durante cada iteración. Se llama hobby. Y luego tenemos índice. Este es el índice del elemento actual en la matriz, ¿de acuerdo? Y lo que sucede es que después se ejecute esta función, se devuelve un valor, y el valor que se devuelve en este caso es esta rebaja, bien, o este código JSX que estamos devolviendo por aquí Ahora esto está pasando lo que esto está haciendo es esto es LI, ¿de acuerdo? Entonces es una lista que se está construyendo. Representa un solo elemento de la lista. Bien. Y tengo esta llave por aquí. Bien. Ahora, se está agregando prop clave por aquí con el valor del índice. Entonces, para el primer elemento, la clave será uno. Para el segundo elemento, la clave serán dos. Lo siento, para el primer elemento, la clave será cero. ¿Bien? Y para el segundo elemento, clave será uno y así sucesivamente, porque los índices empiezan con cero, claro, ¿verdad? Ahora bien, ¿por qué agregamos esta clave por aquí? ¿Bien? Entonces agregar esta clave es una de las mejores prácticas cada vez que trabajas con listas en react, ¿verdad? O siempre que estés renderizando matrices en react. Entonces esto es muy importante porque el uso de la clave aquí se está haciendo para administrar de manera eficiente la representación de la lista, ¿de acuerdo? Y esta clave ayuda a reaccionar, realizar un seguimiento de cada elemento de la lista y actualizar solo los que cambian que necesitan los cambios cuando cambia la lista. Entonces, si hay algún cambio en la lista o en la matriz por aquí, bien, en base a este valor clave, hará una actualización caliente, bien, porque necesita realizar una actualización, ¿verdad? Si hay algún cambio en el valor, no se recarga instantáneamente Entonces, en base al valor de la clave, dependiendo de cómo se esté asignando y renderizando esta clave en la interfaz, se realizará la recarga en caliente Entonces, básicamente desde el punto de vista de la optimización, react necesita esta clave, y es importante incluirla siempre que esté renderizando una matriz, o una lista, debería decir Bien, entonces esto es lo que hemos hecho. Y si vienes por aquí, bien, no estamos viendo ningún tipo de salida. ¿Por qué? ¿Por qué es así? Bien. Entonces, bien, entonces estoy recibiendo un error por aquí 11, ¿de acuerdo? Y no se pueden leer propiedades de undefined. Todo bien. Es porque estoy de paso en esto por solo probablemente 11 componentes y no el otro. Entonces, si guardo esto, idealmente debería ver la salida de aquí Se puede ver la salida que estoy viendo. Bien. Ahora no estoy viendo que se muestren pasatiempos por aquí. No se muestran aficiones. Bien, los pasatiempos no se están rindiendo, de hecho, ¿de acuerdo? Entonces veamos por qué no se está rindiendo la afición. Entonces creo que aquí tengo el problema. Sólo estamos elaborando este LI, pero no lo vamos a devolver. Entonces, ¿verdad? Tenemos que agregar una declaración de retorno por aquí. Bien. Y en el momento en que agreguemos la declaración de devolución, permítame guardarla por aquí. También cerraré esto con punto y coma, Bien, y lo guardaré Y si vienes por aquí, verás que se muestra la lectura y la cocina. Bien. Ignorar la interfaz. Bien. No se ve tan bonito, pero espero poder comunicar los conceptos que estamos aprendiendo, ¿verdad? Entonces aquí puedes ver Hobby, Hobby uno siendo aprobado. Bien. Lo que puedes hacer es cortarlo directamente en lugar de hacer uso de una variable. Voy a deshacerme de esto por aquí. Bien. Y por aquí, lo que puedo hacer es simplemente pegar la afición. ¿Bien? Así que aquí puedo tener lectura y senderismo. Bien, y nadando. Entonces primero tiene lectura, cocina, otro tiene natación y senderismo. Y si ves por aquí, leer y cocinar y nadar y hacer senderismo. ¿Bien? Por lo que se está visualizando correctamente. Esto es absolutamente genial por aquí. ¿Bien? Ahora aquí, lo que estamos haciendo es que estamos pasando en la matriz de cadena por aquí, ¿verdad? La matriz de cadena se está pasando. Ahora puedes agregar algún tipo de validación por aquí si así lo deseas. Entonces aquí, vendré a los tipos de utilería. Y puedo agregar validación. Digamos que deseo tener aficiones como la matriz de cuerdas solamente. No quiero que ningún otro tipo venga en aficiones. ¿Bien? Entonces lo que puedo hacer es que puedo decir aficiones por aquí. ¿Bien? Colin voy a decir tipos de utilería, algo así Matriz de por aquí. Y por aquí, puedo decir prop tipos punto puedo decir string, algo así. Entonces esta es una sintaxis que debes seguir. Bien. Estamos viendo tipos de prop array of y estamos viendo que debería ser string, ¿de acuerdo? Y esto asegura que la afición sea una variedad de cuerdas siempre. Entonces si guardo esto y si vengo por aquí, bien, si estoy fresco, verás que no hay errores como tales, ¿bien? Pero si cambio esto a la de número, y si vengo aquí, se puede ver que el tipo de prop inválido proporcionó un tipo de número. Verás renderizado sucediendo por aquí. Nada se detiene en renderizar, pero se emite una advertencia, ¿de acuerdo? Eso es lo que el beneficio es de la validación que estamos haciendo. ¿Todo bien? Entonces, sí, espero que esto sea útil, y espero que hayas podido seguir adelante en cuanto a cómo puedes hacer uso de arrays con props en react 25. Configurar devoluciones de llamada: Ahora es el momento de que comencemos a hablar de callbacks. Ahora bien, ¿qué son las callbacks? callbacks son funciones que se pasan como argumentos a otras funciones y se ejecutan después de completar una tarea en particular Ahora bien, esa tarea en particular podría ser algo así como una especie de operación de renderizado o una especie de operación asincrónica como una llamada a la API o algo así ¿Bien? Entonces te voy a mostrar cómo podemos hacer uso de callbacks en este ejemplo Entonces aquí, lo que he hecho es que tengo este, uh componente de app que estás viendo aquí. ¿Bien? Este es el componente completo de la aplicación, que está haciendo uso de la tarjeta de perfil por aquí. ¿Bien? Y la tarjeta de perfil es el componente de aquí, ¿de acuerdo? Está renderizando algunos datos, algunos apoyos que está obteniendo del componente padre Y he añadido algunos CSS solo para embellecer esta interfaz por aquí Entonces verás una interfaz un poco hermosa, una interfaz decente. Bien, presentable. No voy a decir que es demasiado bueno, pero es presentable es lo que diría yo. Todo bien. Y si vienes por aquí, este es el CSS que he agregado para lo mismo. Está ahí en el archivo CSS de punto de la aplicación. ¿Bien? Es CSS muy simple, bastante directo. Y tengo el trabajo hecho al agregar un par de clases también, como App contiene por aquí y la tarjeta de perfil por aquí. Derecha. Ahora, llegando al tema de las callbacks, ¿de acuerdo? Entonces digamos que quiero agregar un oyente on click sobre pasatiempos, y esto en el oyente de clic traerá alerta, ¿de Y quiero saber en qué afición se ha hecho clic. Quiero mostrársela al usuario. ¿Bien? Entonces la funcionalidad es simple. Bien, podría ser más complejo, pero solo me apegaré a la funcionalidad simple. Todo bien. Ahora bien, lo que haría es tener una función definida, correcto, primer lugar, dentro de app, voy a decir, vamos a tener una función. Entonces aquí se puede decir, const manejar, Hobby, haga clic aquí Bien. Y voy a tener un parámetro. Bien, por aquí. Voy a hacer uso de la función de flecha, y voy a decir alerta. Bien, algo como esto. Y aquí, voy a decir que hiciste clic en Voy a decir hobby más alto, ¿de acuerdo? Hobby, algo así. ¿Bien? Entonces esta es una función que he creado, y quiero que esta función se active cada vez que se haga clic en hobby ¿Bien? Además, sólo voy a alinear esto. Entonces esto se ha vuelto bastante largo, diría yo. Bien. Se va fuera de la pantalla, así que solo alinearé a esta mascota de una mejor manera. ¿Bien? Para que puedas ver esto por aquí. Bien. Voy a conseguir el nombre por aquí. Cada uno es aficiones de los miembros. Bien, entonces esto ahora es legible y ya no va a salir de la pantalla. Todo bien. Entonces ahora lo que tengo que hacer es lo que puedo hacer, puedo pasar esta función en particular como una devolución de llamada a este componente en particular ¿Bien? ¿Cómo con la ayuda de utilería Todo bien. Para que pueda venir aquí, bien, y puedo presionar Enter y puedo decir en Hobby, haga clic, ese es el nombre del utilero. Puedo tener esta sintaxis JavaScript, y puedo decir manejar hobby click, algo así. Bien. Y puedo pasarlo por esto también. Aquí, algo así. ¿Bien? Entonces sí, he pasado tanto por los componentes que estoy renderizando, tanto las tarjetas de perfil, estoy pasando en esto como utilería. Ahora, por aquí en la ficha de perfil, lo que tengo que hacer es que tengo que ponerme en Hobbie, da clic aquí Bien, algo como esto. ¿Bien? Ahora bien, lo que voy a hacer aquí está aquí, necesito agregar un oyente en el elemento LI cuando estemos renderizando el elemento LI, ¿verdad Entonces lo que puedo hacer aquí es después de clave como esta, puedo decir al hacer clic por aquí, y puedo tener igual a. Bien. Y voy a añadir esto y voy a añadir la función de flecha, y voy a decir en hobby haga clic por aquí, y voy a pasar en el hobby que tengo, ¿de acuerdo? Entonces espero que esto tenga sentido. ¿Bien? Entonces lo que estamos haciendo es que estamos agregando un clic L's por aquí. Tenemos acceso a la afición. Entonces, con la ayuda de este mapa, este mapa está iterando sobre la matriz Hobbie, Y para cada iteración, estas dos cosas tienen la afición actual y el índice Entonces estoy pasando en esta afición por aquí. Bien, cada vez que se activa el evento click, y estoy llamando a on hobbie click ¿Qué hay en Hobbie click? entrando como apuntalamiento por aquí. ¿Y qué viene aquí como utilería? Esta cosa está entrando. Esta función. Bien. Y lo que va a pasar es esta cosa que estamos pasando como parámetro por aquí. Bien. Déjame llevar esto también a la nueva línea, algo así. Bien. Entonces esta cosa que te estás metiendo en esta cosa que estás pasando como parámetro, afición se pasará por aquí. Bien, por aquí a esta función, y esta alerta se activará. ¿Bien? Veamos esto en acción. Voy a guardar este código. Voy a venir aquí. Uy. Así ves nadar en click senderismo en click. Hay algún problema en el renderizado. Entonces por aquí, si ves en click hobby. Uy. Cometimos un error, así que voy a cortar esto. Bien. Yo sólo cortaré esto. Bien. Y, uh, así que accidentalmente agregué esto en un lugar equivocado. Bien, entonces debería estar por aquí. ¿Bien? Sí, algo así. Ahora déjeme tomar esto en una nueva línea. Debería ser después de la clave, y luego esta etiqueta de cierre por aquí para HTML, y luego estamos renderizando la IA como espero que esto tenga sentido ahora, ¿de acuerdo? Entonces, cómo funcionó es que la etiqueta LI tiene dos atributos. Uno es clave, otro está en click, puedes ver. Y entonces estamos cerrando esta etiqueta aquí. Estamos entrando en la afición, y luego estamos cerrando la etiqueta LI. Bien. Espero que esto tenga sentido. Y si vienes por aquí, lo haré fresco. Hiciste clic en Cocinar, ¿de acuerdo? Has hecho clic en el senderismo. Has hecho clic en la natación. Has hecho clic en leer. Entonces puedes ver cómo está la devolución de llamada en acción, ¿de acuerdo? Ahora bien, esto puede así que aquí hemos pasado a un componente. Hemos pasado esto como un apoyo al componente. ¿Bien? Puede pasar esto a cualquier devolución de llamada que normalmente se utilizan para ser activadas Se supone que deben activarse cuando una operación asíncrona o cualquier tipo completando una operación asíncrona o cualquier tipo de renderizado ¿Bien? Entonces en ese tipo de escenarios, puedes hacer uso de callback. Entonces digamos que tienes una llamada API, lo que puedes hacer es que puedes pasar en esta función como una devolución de llamada Y una vez que se realiza la llamada a la API, dependiendo de una determinada operación o de un determinado evento, puedes activar la devolución de llamada, como si estuviéramos activando por aquí ¿Correcto? Entonces esta es la función definida en el componente padre que se activa a partir de un elemento en el componente hijo con la ayuda de al clic Lissner Todo bien. Entonces espero que esto haya sido claro y espero que ustedes puedan seguir esto a lo largo. 26. Props y la sintaxis de spread: Hablemos de cómo puede hacer uso del operador de propagación cuando se trabaja con react y se pasa props por aquí ¿Bien? Ahora, el operador de propagación es un concepto de JavaScript, ¿de acuerdo? Y ya veremos cómo podemos aplicarlo por aquí. Ahora lo que está pasando aquí es que tengo este componente de aplicación, bien, que tiene esta función creada, bien, esta función, manejar hobby clic dentro del componente de la aplicación, y estoy pasando en este mango hobby click junto con algunos otros apoyos por aquí a la tarjeta de perfil, y estoy renderizando tarjeta de perfil por aquí, ¿de acuerdo? Y la tarjeta de perfil es una tarjeta muy sencilla que renderiza esta información en la interfaz de usuario. ¿Todo bien? Tiene algunas validaciones, también Entonces lo que voy a hacer es que voy a pasar los apoyos en la tarjeta de perfil con la ayuda del operador de spread, ¿de acuerdo Y lo que voy a hacer primero es que voy a crear un objeto con todos estos valores. Ahora bien, estos apoyos se están pasando a la tarjeta de perfil, y estos son apoyos de diferentes usos, Entonces estas son propiedades de alguna manera para representar a Alice y John, ¿verdad? Entonces lo que podemos hacer es conseguir que estos apoyos se conviertan en objetos por aquí ¿Bien? Entonces lo que haría es aquí, yo diría const, yo diría perfil de Ale Bien, diré el perfil de Alice por aquí, y los agregaría como objetos por aquí. Oh, lo siento, como uh propiedades. Bien. Entonces aquí, estoy construyendo un objeto, bien, no necesito esta llave rizada. Bien. Y aquí, entonces voy a tener, uh, este miembro, bien, algo como esto. No necesito True, algo así. Voy a tener aficiones. Y cuando te deshaces de estos tirantes, esto era necesario en GSX, pero no por aquí, ¿de acuerdo? Voy a tener coma Y, uh, voy a añadir esto. Bien. Y si, sigo recibiendo error, lo sé. Y la razón de eso es que deberían ser pares de valores clave y no iguales a, ¿de acuerdo? Entonces voy a Ups. Voy a Ups. Estoy metiendo la pata con el teclado. Bien. Así que sólo voy a copiar esto. Bien. Sólo voy a copiar esto y lo voy a pegar. Uy. Entonces sí, algo como esto. Bien. Y si. Entonces así es como se ve el perfil de Alice. ¿Bien? Entonces estamos pasando los datos para la Alice de aquí. ¿Bien? Tenemos que hacer lo mismo por John también. Entonces voy a cortar esto. Bien, corta esto por aquí. Voy a venir aquí. Bien. Esto está hecho. Diré const, John, perfil Bien. Y aquí, vamos a tener esto. Bien. Primero lo primero, voy a conseguir esto por aquí con una coma. Bien. Y tenemos que formatear esto un poco, ¿de acuerdo? Entonces 42, no necesito un las llaves rizadas. Esos eran necesarios para el sexo masticable. Y voy a añadir dos puntos. Bien, coma. Y aquí, de nuevo, voy a agregar dos puntos y no se necesitan estos rizados Voy a agregar coma y esto será colon. No se necesitan las llaves rizadas, y luego voy a alinear esto Esto está hecho. Bien. Tenemos perfil de John y tenemos perfil de Alice. Ahora lo que podemos hacer es que podemos venir aquí, en la ficha de perfil. Bien, tenemos que pasar estos como apoyos, estos objetos como utilería Lo que puedo hacer es agregar una Base rizada. Puedo decir tres puntos y puedo decir perfil de Alice por aquí. Y por aquí, puedo ver tres puntos y puedo ver el perfil de John. Puedo ver si esto. Ahora bien, si le echas un vistazo a la salida, no ha cambiado. No hay ningún cambio en la salida, no hay errores como tales, ¿de acuerdo? Todo es igual. Es solo que hemos mejorado un poco más las cosas donde estamos creando perfiles primero para cada miembro, lo que todo lo que queremos pasar, y estamos pasando en eso usando el operador de spread a este componente en particular. Por lo tanto, el operador de spread se utiliza para pasar todos los pagadores de valor clave en el objeto como apoyos al componente de tarjeta de perfil Y de esta manera, en lugar de enumerar cada prop manualmente, esparces el objeto y el componente recibe el valor correspondiente como props Bien. Deslice los beneficios sobre el enfoque anterior. Muchas personas también preferirían el enfoque más antiguo, pero algunos beneficios aquí es un código más limpio. Estás reduciendo la reputación y básicamente tienes objetos creados ahora, en base a qué datos quieres pasar. Ahora bien, este objeto que estamos construyendo sobre la marcha, ¿verdad? Estamos construyendo, estamos codificando duro todos los valores. Habrá escenarios en los que obtendrás este objeto directamente desde la API, bien, obtienes algunos datos del EPI, lo conviertes en este tipo de objetos, y luego lo pasas de esta manera a los props Lo siento, al componente en forma de apoyos. Bien. Así que no te confundas con este tipo de sintaxis. Es una y la misma, ¿verdad? Hace el mismo trabajo. Solo son las diferentes formas de hacer las cosas. ¿Bien? Esto es muy útil si estás obteniendo algunos datos de una llamada EPI o de una llamada a base de datos, y luego los tienes en forma de objetos, ¿de acuerdo? Entonces, en lugar construir todos los apoyos manualmente por aquí, solo haces uso del operador spread y lo pasas porque ya lo estás obteniendo en forma de objetos ¿Verdad? Entonces espero que esto sea útil y espero que hayas podido seguirlo. 27. Conclusión del curso: Y eso nos lleva al final de este emocionante viaje hacia el mundo de los fundamentos de reacción Juntos, hemos explorado los conceptos básicos de reaccionar desde la creación de su primer proyecto, masterización de la silla sX, los componentes, los apoyos y mucho más En el camino hemos construido habilidades prácticas e incluso completado un proyecto para solidificar tu aprendizaje Pero recuerden, esto es solo el comienzo. React es una herramienta potente y muy versátil con infinitas posibilidades para construir las aplicaciones web dinámicas como has entendido hasta ahora. Te animo a que sigas experimentando, explorando, temas avanzados y aplicando lo que has aprendido a tus propios proyectos Estoy encantado de ver cómo usas reaccionar para crear aplicaciones increíbles para tu cartera. Ya sea un proyecto personal, asignación profesional o cualquier cosa, siéntase libre de usar react, y servirá como base de creación para una aplicación grande. Las habilidades que has adquirido aquí te servirán como un escalón en el futuro de tu carrera. Gracias por ser un grupo de aprendiz tan comprometido y motivado Espero que este curso no solo te haya enseñado nuevas habilidades, sino que también te haya animado a pensar desde una perspectiva y dimensión completamente diferente sobre el desarrollo web. Además, no olvides consultar la sección de proyectos de este curso donde tenemos un proyecto que puedes completar y compartir con toda la clase. Gracias por acompañarnos en este viaje. Codificación feliz, todo lo mejor.