React 201: nivel intermedio

1. Bienvenido a la React intermedio: Hola y bienvenidos a reaccionar al 001. Esto es intermedio reaccionar en este módulo o en este curso, vamos a estar trabajando con muchos componentes diferentes en React. Por ejemplo, hacer una aplicación de una sola página para que puedas cambiar entre páginas al instante. También vamos a estar trabajando con la búsqueda. Por lo que puedo escribir en Star Wars y obtener todos estos diferentes resultados de búsqueda. Incluso puedo hacer clic en los detalles de uno de estos e ir a alguna forma de vista de detalle usando React routing. Vamos a estar usando componentes funcionales en React to 01. Y vamos a estar trabajando con cosas como el estado y el estado de configuración. Trabajando con API como la API de película db.org. Vamos a estar trabajando con utilería. E incluso vamos a estar trabajando con la historia en esa línea. También vamos a estar usando el efecto estadounidense, que es un libro React. Entonces vamos a estar usando eso en conjunto con el estado. De nuevo, vamos a estar usando una API. Vamos a estar usando routers, íbamos a estar usando componentes. Vamos a estar pasando apoyos a estos componentes. Y vamos a hacer que toda esta aplicación hable con diferentes componentes de un componente pueden hablar con otro componente. Ahora bien, ¿por qué querrías aprender nivel intermedio reaccionar? Reaccionar como una de las habilidades de mayor demanda para el desarrollo web front-end. Saber React casi te puede garantizar un trabajo como desarrollador web front-end. Por lo que llegar bien en React es realmente, realmente importante. Si vas a convertirte en desarrollador web freelance, vas a necesitar saber escribir reactante lo que hace. Y este curso es sólo un poco diferente de reaccionar uno a uno. Reaccionar uno a uno fue muy, muy básico. No usamos páginas diferentes ni nada. Todo fue sólo en una sola página. Esta es más una aplicación web progresiva donde literalmente puedes escribir cualquier cosa en esta barra de búsqueda y obtener respuestas de API de inmediato. Colleen y yo hemos estado enseñando desarrollo web desde 2012. He enseñado a más de 350 mil estudiantes en todo el mundo cómo codificar y en reaccionar a uno, te voy a estar enseñando unos componentes funcionales usando React. Bienvenido a reaccionar a uno, y te veré adentro. 2. Crear una nueva aplicación React: De acuerdo, bienvenido a reaccionar una tuple 1 primeras cosas primero, necesitas tener instalado Node y reaccionar instalado. Si no tienes el nodo n, React ya instalado en tu computadora, por favor dirígete a reaccionar 101 donde cubrimos los conceptos básicos de React incluyendo instalarte y ponerte en marcha con Node JS. Ahora voy a asumir que ya tienes instalada la app Create React en tu computadora usando nodo y NPM, en cuyo caso solo podemos sumergirnos justo en esto. De acuerdo, entonces lo que voy a hacer aquí es que voy a escribir n px, Create React app. Y voy a llamar a esta película Navegador, Navegador de películas. Y esto va a seguir adelante e instalar un montón de cosas para nosotros. Muy bien, entonces antes de continuar aquí, echemos un vistazo a la versión de nodo que estoy usando. Estoy usando el nodo 15. Quieres estar usando Node 14 o más nuevo si es posible, si estás usando Node Versión diez, este comando de la aplicación Crear React va a construir algo diferente para ti. Por lo que quieres asegurarte de tener básicamente la versión más reciente de la versión LTS más reciente de Node. Por lo tanto, usa el nodo 14 o 15, o si 16 o 18 está fuera, usa la versión LTS, tal vez 16 o el nodo 18. Entonces ahora voy a cd en película Browser. Y lo que puedo hacer es ls dash LA. O si estás en Windows, puedes escribir DIR. Y te muestra que tienes un paquete leerme node_modules, público, SRC, hilo dialogo. Deberías tener todos estos archivos y carpetas. Lo que voy a hacer es abrir esto y VS Code escribiendo código dot. Si no tienes este comando por el motivo que sea en tu computadora, está bien. Simplemente puedes abrir el código VS e ir a Archivo Abrir y seleccionar toda la carpeta. Y solo quieres asegurarte de seleccionar esas carpetas del navegador de películas. Por lo que puedes ir a archivo abierto. Y puedes seleccionar toda esta carpeta aquí. Entonces Navegador de películas. De acuerdo, una vez que tengas eso en marcha, lo que puedes hacer es en código VS o si no tienes código VS en realidad, solo puedes abrir tu terminal como lo que había abierto antes. Apenas este terminal aquí o PowerShell o, o lo que quieras usar. Lo que voy a hacer es que voy a usar este derecho dentro del navegador. Entonces voy a cerrar esto. Por lo que terminal dejó de terminal. Y en mi código VS voy a ver mi terminal aquí. Entonces todo mi código son todos mis archivos va a ser, van a estar a la izquierda. Mi terminal va a estar en la parte inferior y mi código va a estar en la parte superior justo aquí arriba. Entonces ahora lo que quiero hacer es que quiero teclear npm start. Y esto debería llevarte a tu primer tipo de página de reaccionar. Te dice exactamente qué hacer. Editar SRC slash app dot JS. Y vamos a hacer un montón de cosas. Entonces en este punto en el tiempo, deberías tener esto en marcha. Si no tienes esto en marcha, haz que sea tu tarea para este video. Asegúrate de tener tu primera aplicación React en funcionamiento usando el comando Crear React app. 3. Limpieza de código: De acuerdo, bienvenido a la siguiente lección. En esta lección, lo que vamos a hacer es entrar en nuestro SRC y entrar en app.js. Y yo simplemente voy a un hacer esto sólo un poco más pequeño. Y ahí vamos. Eso parece un poco más razonable. Y lo que voy a hacer es que me voy a deshacer de estas cosas de aquí. Simplemente, ya no necesito el logo. Entonces sigamos adelante y eliminemos ese logotipo. Eliminar logotipo. Sí, eliminar la aplicación ClassName. Tampoco necesito ese nombre de clase ahí dentro. Y simplemente voy a decir retorno H1, hola de React 201. Y eso es todo lo que voy a hacer. Y para salvar esto. Y se puede ver que esto compilado con éxito, me dirá compilado con éxito como esperamos. Entonces sigamos adelante. Guardar. Cada vez que guarde, se va a recompilar. Y cada vez que se recompila, debería leer refrescar mi navegador automáticamente para que no tenga que tocar Refresh. Es realmente, muy agradable. Y así debería decir Hola de reaccionado a uno. Adelante y limpiemos eso. Y mientras te tengo haciendo eso, sigamos adelante y abrimos app.use CSS. Y dejemos claro eso también. Vamos a seguir usando app.use ESS. Simplemente no necesitamos ninguno de los CSS por defecto que viene con. Entonces sigamos adelante y eliminemos eso y guárdalo. Y se puede ver que dice compilado con éxito. Una vez que haya hecho eso, pasemos a la siguiente lección donde instalamos bootstrap cinco. 4. Instalación de Bootstrap 5: Muy bien, bienvenido a la lección donde instalamos bootstrap. Esto es lo que va a hacer que nuestro sitio se vea bonito. Y en lugar de simplemente parecerse a un, un sitio web estándar bruto basado en texto, realidad vamos a tener como un sistema de navegación y Lake, una sección de héroes y tarjetas y esas cosas. Entonces vamos a bootstrap.com, getbootstrap.com y haga clic en Empezar. Y aquí estoy usando docs versión cinco por cierto. Entonces estoy usando Bootstrap cinco. Dice en el Quickstart que básicamente puedo copiar y pegar esta hoja CSS en mi página. Y eso es todo lo que voy a hacer es literalmente sólo voy a dar clic a copiar aquí. Y voy a ir por aquí y abrir pública index.html. Y va a tener un montón de cosas en el año, un montón de comentarios y demás. Yo quiero hacer dos cosas. En primer lugar, quiero poner este eslabón aquí dentro de la cabeza. Entonces ante esta cabeza de corte y antes, no antes sino después de la cabeza. Entonces lo quieres en algún lugar entre aquí. Entonces si colapso esto, quieres el código en algún lugar entre estas dos etiquetas. Lo segundo que quiero hacer es que quiero cambiar el nombre de esto de app React al navegador de películas. Y eso simplemente va a parecer, Honestamente va a parecer que no hizo nada. Básicamente, no hizo nada. Simplemente cambió algo del espaciado, especie de reset o CSS un poco. Sí hizo algo, pero básicamente a no hizo nada en este punto. Todo esto hizo fue permitirnos usar nuestro CSS desde un bootstrap five, que eventualmente nos va a permitir usar bonitos componentes como esta tarjeta. Así que adelante y consigue instalado Bootstrap. Asegúrate de copiar y pegar ese enlace esta hoja de estilo aquí. Solo asegúrate de copiar y pegar eso en tu index.html que vive dentro de tu carpeta pública. A continuación, sigamos adelante y creemos un componente funcional de barra de navegación. 5. Agregar un componente de navar: De acuerdo, echemos un vistazo a agregar una barra de navegación global a nuestro sitio. Entonces solo tengo app.js abierto y aquí es donde básicamente va a vivir toda la aplicación. Y así quiero que este navbar, esta barra de navegación teórica viva en algún lugar de aquí. Y quiero que el resto del sitio también viva básicamente aquí. Pero hay algunas maneras diferentes en las que podemos hacer esto. Y el primer camino es a través de un componente funcional. El segundo camino es a través de un componente basado en clases. Y la tercera vía es algo similar a la primera vía, que es un componente funcional. Podemos usar const. Y así les voy a mostrar las dos maneras usando funcional y const. Entonces voy a escribir función navbar. Y todo esto hace es devolver algo. Entonces escribo div aquí. Div, esta es mi barra de navegación, y este es un componente funcional. Y todo lo que es, es literalmente solo una función y devuelve un montón de js X. Así que JavaScript y XML juntos. Por lo que copiamos barra de navegación y sigamos adelante y escribimos esto como barra de navegación componente. Y se puede ver esto fue compilado con éxito. Entonces si abro mi navegador ahora, y cerremos Bootstrap por ahora. No lo necesitamos. Dice Este es mi barra de navegación. Y si cambio algo más en mi barra de navegación, esta es mi barra de navegación 123123. Puedes verlo actualizado automáticamente para mí y dijo Esta es mi barra de navegación 123123. Entonces ese es un componente basado en funciones, un componente funcional. Y estos son un poco diferentes a los componentes basados en clases de los que aprendiste en reaccionar 101. Ahora en mi opinión, no hay forma correcta o incorrecta de escribir componentes. Puedes escribirlos como componentes funcionales o puedes usarlos como componentes basados en clases. Personalmente solo me gusta asegurarme de que si estoy usando componentes funcionales, pero son todas funciones, o si estoy escribiendo componentes basados en clases que son todas las clases tenían solo una especie de mantiene el código estandarizado de esa manera. Ahora si tienes un trabajo en el camino y notas que cuando estás escribiendo reacciona que una sección está usando un componente funcional y otra segunda es usar componente basado en clases. Eso en realidad es ALK. No hay nada de malo en eso y esto es sólo una preferencia mía. Entonces reacciona a uno que vamos a estar usando componentes funcionales. Entonces volvamos a nuestro navegador y tecleemos en Bootstrap cinco, en realidad cerramos eso demasiado pronto y bootstrap F5 y yo queriendo barra de navegación aquí. Y así voy a entrar en componentes. ¿ Y dónde está mi barra de navegación? Y hay uno en tu específicamente que quiero que vamos a modificar y es este primero aquí. Entonces voy a copiar todo esto y nos vamos a encontrar algunos errores aquí. Entonces, antes que nada, solo voy a pegar todo eso ahí dentro y cambiar al sangrar. Y ahora se puede ver cuando guardamos esto que dice esperada etiqueta de cierre js X correspondiente para HR. ¿ Dónde está RRHH? Aquí hay una RRHH. Y así en HTML regular, puedes escribir RHH así. Se puede escribir BER, así. Incluso puedes escribir IMG y tenerlo no realmente auto-cierre, n js X. Necesitas todas tus etiquetas de autocierre para realmente ser correctamente autocierre con una barra al final. Entonces sigamos adelante y guardemos eso. Dice esperada etiqueta de cierre js X correspondiente para entrada en línea 3838, columna 1038, columna diez me va a mostrar aquí mismo. Eso en realidad no está del todo bien, pero está lo suficientemente cerca. Y lo que busca es esta etiqueta de entrada. El input es lo mismo que JS Acts y él es una etiqueta de autocierre. Sigamos adelante y guardemos eso. Y ahora me va a dar un montón de otras advertencias. Y creo que en este momento, esto debería funcionar perfectamente bien. Entonces volvamos a nuestro navegador y miremos eso. Si no funciona para ti, simplemente puedes pulsar refrescar y debería funcionar para ti en este momento. Ahora el desplegable no iba a funcionar. No agregamos Bootstrap. Javascript no va a estar usando eso. Básicamente, solo queremos el enlace de inicio de la barra de navegación, tal vez un enlace deshabilitado, y la búsqueda ahí dentro. Eso es todo lo que buscamos en este momento. Ahora una cosa a tener en cuenta es cuando abres tu herramienta de inspección. Entonces si haces clic con el botón derecho inspeccionas y vas a la consola, vas a ver que te va a quejar bastante duro de un montón de cosas. Y antes que nada, sigamos adelante y arreglemos este índice de tabuladores. ¿ Te referías a índice tabulador? Reacciona y js X es un poco. Ahora no hay forma de poner esto. Es quisquilloso. Y escribo índice de tabulador con un I. mayúscula Y cuando refresco mi página y vuelvo a subir a los errores, ese error no existe. Y lo bonito es que en realidad me dice lo que piensa. O sea, el otro aquí y éste me sube todo el tiempo y esto probablemente te vaya a agarrar también. ¿ Esto dice clase de propiedad DOM inválida. ¿ Te referías a ClassName? Ahora no estamos usando clases en el sentido de clases de JavaScript, pero estamos usando clases en el sentido de HTML, CSS, atributos de clase. Y así clase es en realidad una palabra reservada. Es una palabra clave en JavaScript y no queremos usar eso. Entonces lo que voy a hacer es seleccionar todos estos e ir a selección y luego agregar siguiente ocurrencia. Y sólo va a seleccionar todos estos. Por lo que quiero seleccionar clases iguales a y luego seleccionar todas estas, cada una. Y entonces puedo teclear, básicamente, puedo escribir en todos estos lugares todos a la vez. Puedo escribir un nombre de clase con un N. mayúscula Vale, sigamos adelante y actualicemos y miremos eso. Y ya no tenemos esos errores ahí dentro. Tenemos algunas advertencias sin embargo. Entonces sigamos adelante y limpiemos esto solo un poquito y quizá necesitemos ignorar estas advertencias por solo unos minutos. Entonces este desplegable, no necesitamos esa barra de navegación. No vamos a llamar a ese bar nav. Vamos a llamar a ese navegador de películas. Y va a estar quejándose de HRF con enlace en blanco. Entonces solo un signo numérico que es un enlace en blanco. Digamos que vamos a ir a algún lugar solo para que nos deshagamos de esas quejas por ahora, volvamos a nuestro navegador, pulsa Refresh, y con nuestra consola abierta, vemos que ahí no hay errores. Ahora si hacemos clic en alguno de estos, esto no va a ir a ninguna parte. puede ver que va a algún lugar de la URL, en realidad no hace nada. Entonces vamos a abordar eso bastante pronto. Pero lo principal que deberíamos estar quitando aquí es esa clase, la clase de atributo es en realidad nombre de clase en reaccionar. Por lo que quieres asegurarte de usar el nombre de la clase. Y quieres asegurarte de que todos tus elementos sean JS Acts o XHTML, no HTML normal, XHTML. Y la diferencia de nuevo es sólo en HTML regular se puede escribir imagen. O entrada, o HR o BR. En tanto que en JS Acts y en XHTML, realidad es barra inclinada de imagen. Y es por eso que me ves en otros cursos u otros módulos escribiéndolo así. Esta es la manera de la vieja escuela, pero esta es también la forma en que React está esperando que formatear tu código, tu HTML. Por lo que siempre está esperando que en su reacción cuando se compila, se vaya a decir, oye, si hay un BR sin esta barra aquí, entonces probablemente haya una etiqueta BR de cierre. Pero en HTML, no hay una etiqueta BR de cierre como etiqueta de autocierre. Por lo que utilizamos esta etiqueta de autocierre siempre que sea posible usando React. De acuerdo, hay una cosa más que tenemos que hacer aquí. Tenemos esta función en navbar. Tenemos que poner esto en un archivo diferente, de lo contrario, nuestro archivo app.js se va a poner muy difícil de tratar. Entonces sigamos adelante y haga clic derecho en SRC New File. Y voy a crear una nueva carpeta aquí llamada componentes. Y esto se va a llamar navbar ab.js. Y lo que voy a hacer aquí es que literalmente voy a cortar este código. Déjame ir al nav bar dot js y pegarlo ahí. Y te dije que te iba a mostrar que hay una forma funcional, como una forma de escribir un componente usando la función de palabra clave. Y también hay una forma de usar const. Entonces cuando exporte esto eventualmente por el camino, voy a estar usando const. Y así lo que quiero decir es const nav bar es igual a una función de flecha sin parámetros en ella todavía. Aquí es donde vamos a estar poniendo nuestras indicaciones. Hablaremos de eso por el camino. Pero básicamente esta es una función anónima, función flecha anónima entrando en un concepto llamado navbar. Y en la parte inferior voy a decir export default navbar. Ahora, eso en realidad no va a hacer nada excepto eliminar nuestra barra de navegación de nuestro app.js e incluso falla en compilar porque navbar no está definido. Entonces lo que tenemos que hacer ahora es importar navbar de.com. Eso es decir esta carpeta en particular, luego la carpeta de componentes. Por lo que la barra de puntos va a ser esta carpeta en particular, luego la carpeta de componentes, y luego la barra de navegación. No necesitamos tomar navbar ab.js porque va a suponer ab.js fue la única vez que necesitamos escribir nuestra extensión es si va a ser layout.css o algo así, pero React y básicamente paquete web en general es va a suponer que cuando importas algo, estás importando otro archivo JavaScript. Entonces sigamos adelante y guardemos esto. Y si esto funciona correctamente, deberíamos ver que aquí nada ha cambiado. Eso significa que está trabajando para nosotros. Ahora en cualquier momento, React es realmente bueno de esta manera. En cualquier momento, si tienes algún problema, siempre puedes mirar tu terminal. Te dirá exactamente cuál es el problema. Si necesitas más detalles, siempre puedes abrir tu navegador y te dirá exactamente lo mismo. Por lo que en este caso, nav bar no está definido. Esto es decir, oye, tratar de usar navbar, pero no se definió porque fue comentado. Ahora lo importé. Tengo acceso a esto como componente. Va a funcionar para mí. Se va a compilar con éxito. En nuestra siguiente lección, sigamos adelante y creemos un nuevo componente para nuestra página de inicio. Entonces esta va a ser nuestra página de inicio aquí. Vamos a tener más detalles dentro de nuestra página de inicio. Entonces en la siguiente lección, sigamos adelante y hagamos eso. 6. Agregar un componente del hogar: Muy bien, sigamos adelante y creemos un componente funcional de la página principal. Entonces vamos a hacer consola. Voy a usar constante esta vez. Voy a llamar a esta home page, home view ahora solo llámelo casa es igual a flecha entre paréntesis. Por lo que esta es una función de flecha. Y puedo devolver lo que quiera aquí dentro. Y así voy a decir volver con un div. Y de hecho, una cosita genial que puedes hacer es que no necesitas escribir div, solo necesitas abrir, cerrar JS Acts ahí dentro. Y puedes escribir hola mundo desde React 201. Y fíjate que éste sólo dice hola del reactor uno. Este dice hola mundos. Adelante y deshacernos de esto. Y debido a que aquí tenemos esta constante, esa es una función de flecha y función de flecha anónima llamada home. Ahora podemos calificar el hogar como componente. Adelante y guarde eso. Y vamos a refrescar nuestra página y dice hola mundo de reaccionar a uno. O si quisiera, podría hacer yada, yada, yada, y se actualizará automáticamente para mí en mi página también. Ahora, eso es genial y todo, no súper, súper servicial. Pero lo que hizo fue sacar el código de la app y ponerlo en un componente para que en nuestra app, solo puedas fingir que esto es todo nuestro código de app aquí. Es bonito y limpio. Por lo que sabemos que tenemos una barra de navegación, tenemos unos componentes para el hogar. Y si quisiéramos, si solo quisiéramos cambiar en casa los componentes, lo que podríamos hacer es abrir home.html o nav bar dot js y editarlos por separado. Entonces es mantener separados nuestros componentes es, bueno, esa es la idea de todos modos, es que podemos mantener nuestros componentes separados y por eso los llamamos componentes. Entonces lo que voy a hacer aquí es que voy a tomar este corte que voy a decir importar casa de dot slash componentes slash home. Ahora esto no me va a compilar. Lo que voy a necesitar hacer es crear un nuevo archivo aquí llamado home.html. Y eso sólo vive en mis componentes. Se puede ver que aquí componentes. También está en mis componentes. Y lo que voy a hacer es decir pega esto y luego exportar por defecto esa casa const. Y ahora se puede ver que esto funciona. Y así si solo actualizo la página, hay poco error ahí abajo en la consola, pero si actualizo la página, no hay más error. Y si alguna vez quise cambiar mi página de inicio, consigo decir que este es un cambio en un archivo diferente. Y lo que es bueno de esto es que mi página de inicio ahora es autónomo. No tengo que escribir toda esta lógica en mi app porque todo va a ser tu app. Y si hiciste eso, este archivo puede llegar a ser realmente, muy largo. Estamos hablando de miles y miles de líneas de código. Y eso es realmente, muy difícil de trabajar. Esto es mucho más fácil. Se puede decir, oye, mira, hay una app, tiene una barra de navegación, tiene un hogar. Hagamos clic derecho en barra de navegación, ir a la definición. Se lo abre para mí en código VS. No todos los navegadores harán eso, pero el código VS es realmente, realmente inteligente cuando se trata de JavaScript. Entonces lo que me gustaría que hicieras para tu tarea aquí es que quiero que te asegures de que tengas el componente Navbar y unos componentes para el hogar. Asegúrese de que estén en archivos separados. Importa y úsalos. No tienen por qué ser complejos. El no tiene que tener mucho texto y aquí, de hecho, esto ni siquiera tiene muy buen texto en él. Esto simplemente dice hola mundo de reacciona a uno. Adelante y asegúrate de que eso funcione para que podamos escribir nuestro código en otros archivos. Y eso sólo va a mantener nuestro código también va a mantener su cordura en línea avanzando. 7. Agregar un componente sobre la: De acuerdo, sigamos adelante y creemos una nueva vista de página. Entonces en este momento, la única vista de página que tenemos y lo que yo llamo vista. Y lo que yo llamo una vista es esto, todo esto de aquí. Entonces esto es como la vista de la página de inicio. Y si hubiera como una página sobre, eso sería una vista Acerca o si hubiera una página de búsqueda dedicada, sería una revisión de oleadas. Y utilizamos mucho este término en lenguajes de representación de plantillas y marcos como Django. Entonces esta es una vista y necesitamos crear una página sobre. Por lo que no tenemos página de inicio, ahora necesitamos una página Acerca. Entonces vamos a hacer const sobre Vw es igual a una función de flecha y volver, esto va a hacer se devuelve y H2. Eso dice Acerca de Nosotros. Ahora bien, esto es genial. En realidad se puede ver que alrededor de v fue asignado pero nunca se usa. Lo que podemos hacer es que podemos tirar esto aquí y podemos decir sobre vista. Probablemente debería haber llamado a esa página de inicio, la vista de inicio. Pero avanzando, sólo mantengamos esta vista con nombre. Por lo que tenemos esto sobre el combustible y se puede ver que lo, se compila con éxito. Pero el problema es que ahora tenemos una vista de la página principal. Oops, y ahora tenemos una vista de la página de inicio. Y no hemos tenido vista en barco y en realidad queremos que estén en páginas separadas. Entonces lo que quiero que hagas es quiero que escribas en vista de barco y luego quiero que muevas eso a su propio componente. Y luego una vez que lo hayas hecho, pasemos a la siguiente lección donde aprendemos sobre lo que empezamos a aprender sobre el DOM router React, es un paquete diferente. Vamos a estar instalando un nuevo paquete en la siguiente lección. Así que asegúrate de dividir esto en un nuevo componente. Esa es tu tarea para esta lección. Cuando termines eso, te veré en el siguiente video. 8. Instalación de un router de React: De acuerdo, bueno, tenemos que hacer ahora es que tenemos que empezar a trabajar con esta cosa llamada rotor. Y el rotor es básicamente cómo nos dirigimos desde diferentes páginas. ¿ Es ruta o es raíz? Yo digo ruta. Entonces si haces click en casa donde si haces click en longitud, finge esto es como la página Acerca. Sólo debe mostrar sobre nosotros. Y si haces click en casa, solo deben mostrar el título de la página de inicio. Y la URL incluso debería cambiar también. Por lo que debería ser como slash sería solo tu casa es slash sobre va a ser la página Acerca. Actualmente solo lo renderiza todo junto. Por lo que en los próximos videos, vamos a acostumbrarnos a trabajar con reaccionar, router DOM. Y entonces lo que tenemos que hacer aquí es entrar terminal. Solo cancelemos el control C para cancelar ahí. Voy a hacer nodo v. Eso sólo te va a mostrar que estoy usando una versión equivocada de Node. Sorprendentemente, como voy a cambiar ese nodo, usa 15, esa es mi versión más nueva. Y lo que voy a hacer es npm install React, router, dash, DOM. Y esto se va a apagar e instalar básicamente otra herramienta útil en el mundo de React llamada rotor. Entonces si nos fijamos en nuestro paquete.json y entramos aquí, hacemos, hacemos, hacemos. Vamos a ver dependencias. Tenemos reaccionar, reaccionar, Dom, reactor, router, DOM, así que tenemos eso ahí dentro ahora. Y eso es sólo una prueba de que se instaló correctamente. Entonces lo que quiero que hagas por este video en particular es simplemente ejecutar NPM install, React, router, DOM. Eso es todo lo que necesitas hacer una vez que tengas eso en marcha o supongo que no en ejecución, pero una vez que tengas eso instalado, pasemos a la siguiente lección donde configuramos nuestro router de navegador. 9. Uso del router de navegador: De acuerdo, echemos un vistazo a activar realmente nuestro router. Por lo que el router, sólo porque lo instalamos con npm install React router dump en realidad no patea automáticamente. Tenemos que decirle que se use. Y entonces lo que queremos hacer aquí es entrar en index.js y queremos escribir importación, y vamos a estructurar esto o deconstruir esto. Vamos a obtener el router del navegador de React Router, dash.com. Y se puede ver que esto es una especie de tenue porque en realidad no se está usando en este momento. Dentro de nuestro modo Estricto, lo que voy a hacer es que sólo voy a crear un nuevo elemento aquí. Y moverá esta app dentro de ella. Y así tengo reaccionar modo estricto, cool. Entonces tengo rotor del navegador, y luego tengo mi app dentro de eso. eso trabajamos en los últimos videos, es nuestra aplicación real. Se puede ver lo que viene de la app de punto. Dot, dot-dot-dot, ab.js. Eso viene de aquí. Y luego dije cerrar el router en caso de que ya no quisiéramos usar un router. Cerrar modo estricto. Ahora, eso solo dice que nuestra aplicación va a estar dentro de un router. Todo lo que eso está haciendo. Entonces sigamos adelante y guardemos eso. Volvamos a nuestro app.js. Y aquí dentro tenemos que hacer esta cosa llamada interruptor, y luego cambiamos las raíces. Y así si has escrito una declaración de cambio de JavaScript, se ve algo como esto. Cambia, tu caso. Y luego va a decir que tu caso va a ser cosa, hacer algo, romper. Caso, Default. Haz algo que se rompa. Y así esta es una declaración de cambio. Es, básicamente es una sentencia if muy rápida, else if usando solo un tipo diferente de sintaxis en JavaScript, muchos lenguajes diferentes tienen una sentencia switch y JavaScript es uno de ellos. Y entonces lo que queremos hacer ahora es que queremos escribir aquí nuestra declaración de cambio. Entonces tengo este div y lo que voy a hacer es que voy a escribir switch y ese interruptor creado automáticamente. Sigamos adelante y subiremos eso. Y luego puedo escribir router. Path es igual a slash exact. Y aquí dentro puedo decir que va a haber una página de inicio. Hay otra forma en que podemos escribir estos dos y vamos a mover esta suma de esta barra de navegación hacia arriba fuera del switch para que siempre vaya a ser global. Y hay otra forma de escribir esto. Podemos decir camino del rotor slash un barco. Y entonces podemos pasar a componente. Podemos decir que ese componente va a ser el About view. Y es una etiqueta de autocierre esta vez, sigamos adelante y guardemos esto y veamos si hay algún problema. Npm inicio. Y tenemos, sí, eso tiene sentido. Switch y router o no definido, es porque no lo importé, claro. Entonces lo que quiero hacer aquí, tampoco es un router. Lo que estoy haciendo aquí es ruta. Y lo que quiero hacer es importar, cambiar y también ruta desde para React, router, tonto. Sigamos adelante y guardemos eso compilado con éxito. Sigamos adelante y veamos si esto realmente funciona. Entonces si vamos al puerto localhost 3 mil, podemos ver que dice hola mundo de reaccionar a uno. Si voy a cortar sobre, muestra la página Acerca. En la siguiente lección, sigamos adelante y agreguemos enlaces aquí para que podamos enlazar hacia y desde las páginas. Es un poco diferente a un enlace regular porque te darás cuenta si hago esto, es una especie de flashes rápidamente. Entonces si acabo de escribir barra un barco, ve otra página tipo de flashes, toma 15 o 20 milisegundos para cargar. No es instantáneo. En realidad podemos hacer que eso al instante completamente al hacer clic en un enlace. Y eso va a hacer de nuestra app una aplicación de una sola página. Nos llaman una aplicación web progresiva. Eso lo vamos a hacer en la siguiente lección. Por ahora, lo que quiero que hagas es que te asegures de que has cambiado de configuración. Dentro de tu conmutador, tienes diferentes rutas. Deberías tener una ruta para tu página de inicio, una escribió para ti sobre vista. Y hay dos formas diferentes de hacer esto. Son exactamente lo mismo, hace exactamente lo mismo. Algo a lo que vas a querer poner atención sin embargo, es que esta es tu página de inicio, así que solo slash va a ser tu página de inicio. Y aquí dice exigente, esta es la única ruta que va a tomar exacta. Y eso viene a decir, si ese camino es exactamente este, entonces va a renderizar nuestra página de inicio. Si el camino es slash sobre no exacto. Esto es pescar V. Aquí está este caso en particular. Si es exactamente eso, entonces renderiza la página de inicio. De lo contrario este camino es barra inclinada sobre componente es sobre vista y sabemos sobre el, sobre combustible, sabemos sobre el componente de casa. Ya hemos construido estos. Tenemos, hemos importado estos, ya los tenemos en diferentes archivos de componentes. Y así son estas, estas son solo dos formas diferentes de hacer exactamente lo mismo. Cualquiera que sea la forma que quieras escribirla está totalmente bien conmigo. Yo sólo quería mostrarles que hay esta manera y hay esta manera. 10. Reactuar: Muy bien, lo que tenemos es si acabo de abrir Google Chrome y tenemos esta barra de navegación y actualmente los enlaces en realidad no van a ninguna parte. adelante y asegurémonos de que esos enlaces sí vayan a algún lugar para que podamos cambiar entre la página sobre y la página de inicio. Y para eso necesitamos abrir navbar ab.js. Y así tenemos este navegador de películas, y este es solo nuestro título. Eso es justo aquí arriba. Y dice que eso va a algún lado. Entonces en lugar de decir a, lo que vamos a decir es que vamos a agarrar todos estos. Vamos a usar un enlace. Todavía no hemos importado esto, así que esto va a ser un pequeño problema, pero llegaremos en tan solo un segundo. Voy a agarrar todas las etiquetas de enlace de cierre, las etiquetas de anclaje y hacer enlace de barra en su lugar. Y todos los HRF. Href va a serlo también. Ahora ese navegador de películas se va a ir a slash casa también va a ir a slash. Y esto no va a salvar. Se puede ver que esto realmente va a fallar porque el enlace no está definido. Adelante y enlace de importación. Por lo que importa enlace de React, router, dash.com. Y ahí vamos. De acuerdo, así que sigamos adelante y cambiemos esto de su enlace. El que acaba de tener a Lincoln regular por ahí y sí, vamos a llamarlo sobre no sobre nosotros. Y esto se va a ir a recortar y no se estaban haciendo slash sobre de es justo aquí que coincide con este camino en particular. Por lo que barra sobre discapacitados. Adelante y hagamos éste, digamos que próximamente. Este que hacer no importa. Este enlace está deshabilitado de todos modos, por lo que puede ir prácticamente a cualquier parte. Y creo que eso es todo lo que tenemos aquí. Y volvamos a nuestro navegador, actualicemos. Y tenemos una página Acerca. Y cuando hago clic en estos, se puede ver que es instantáneo. Es súper, súper rápido. Y lo bueno de esto es que no es recargar todo mi JavaScript no es recargar todo mi CSS. Ya está cargado a la vez. Y así cuando yo, cuando hago clic en uno de estos, todo tiene un interruptor hacia fuera el contenido para mí. Y entonces cómo hacemos eso es que escribimos enlace, que se importa desde un DOM router React. Por lo que tenemos nombre de clase de enlace al igual que un elemento HTML regular. Más elementos HTML atributos a en lugar de HREF, escribimos 2x es igual a y luego ponemos en un enlace que realmente existe. Entonces slash va a la página de inicio, slash Acerca, va a nuestra vista Acerca. Entonces decimos slash link. Por lo que funciona mucho como etiqueta de anclaje irregular en HTML. Este simplemente está diciendo que hey, porque estás usando un router, puedes intercambiar ese contenido al instante. No tienes que preocuparte por recargar la página ni nada. Simplemente ya sabe que existe. Y así esto va a ser realmente, realmente rápido cuando la gente eventualmente cargue tu página. Ya sabes, una vez que tengas tu página en un servidor en vivo, alguien la va a cargar y solo va a ser instantáneo. Así que adelante y cambia esas etiquetas a una etiqueta de enlace. No olvides cambiar tu HREF 2A, dos atributo. Y cuando hayas hecho eso, pasemos a la siguiente lección donde quizá añadamos un nuevo componente llamado, sí, no es un componente nuevo llamado Hero. Y sólo vamos a añadir un bonito título a cada una de nuestras páginas. 11. El componente de héroe: De acuerdo, vamos a añadir un nuevo componente llamado héroe. Entonces vamos a abrir este archivo home.html y vamos a crear un nuevo componente. Tan constante, llamémoslo Héroe es igual a una función de flecha vacía y simplemente va a devolver algo de Bootstrap. Por lo que podemos decir el encabezado. Y esta va a ser una sección de héroes. Te mostraré qué es eso en tan solo un segundo. El nombre de la clase va a ser VG oscuro. No puedo recordar si esto es Bootstrap o tailwind. Creo que esto es Bootstrap. Entonces BG, texto oscuro blanco. Hagamos relleno cinco por todo el camino. Y digamos sólo una. Este es un componente de héroe. Ahora esto no va a hacer nada. Se puede ver aquí en realidad fue represado y recibimos una advertencia que se asigna, pero nunca se usa en nuestro hogar. Lo que podemos hacer es que ahora podemos decir héroe como componente. Y eso parece renderizar perfectamente bien. Ahora cuando volvamos a nuestra página, Bueno, actualmente estoy en la página sobre, pero cuando voy a la página de inicio, Este es un componente de héroe. Ahora no teníamos esto previo a este punto. Y lo que podemos hacer es que si no lo quisiéramos en la página sobre, solo podemos dejarlo fuera de la vista sobre. Pero lo que podemos hacer es decir, hey, me gustó este componente y también quiero que esté en la página sobre. Entonces sigamos adelante y dividamos esto en sus propios componentes llamados Hero. Y lo que voy a hacer es crear un nuevo archivo llamado Hero ab.js y simplemente pegarlo ahí. Y voy a escribir export default y luego el nombre de este const hero. Y cuando abrí home.html s, Se va a tratar de acceder héroe, pero no está definido. En realidad se puede ver que aquí abajo dice eso. Entonces lo que quiero hacer ahora es importar héroe desde componentes no slash o componentes barra de puntos porque ya estamos en la carpeta de componentes. Entonces queremos decir en esta carpeta, dot slash hero. Y eso funciona para nosotros. Ahora bien, si las cosas funcionaban, deberíamos ver ningún cambio. Eso es perfecto. Cuando no ves cambios mientras estás moviendo código, mientras estás refactorizando, eso es exactamente lo que quieres. Entonces sigamos adelante y movamos a este héroe y no nos movamos, pero sumamos a este héroe. Entonces voy a copiar la línea uno y la línea siete. Y voy a ir a mi sobre vista. Yo también voy a pegar eso aquí. Y tenemos que hacer un poco de trabajo aquí. Entonces en mi punto de vista sobre, voy a importar héroe también. Por lo que este es un componente que se utiliza en dos archivos diferentes. Y quiero devolver js X. Quiero mover a ese héroe hacia arriba. Yo quiero mover el sobre nosotros hacia arriba. Vamos a deshacernos de eso. Y todo se ve bien. Ahora cuando regrese aquí, tenemos este componente de héroe en ambas páginas. Ahora en la siguiente lección, lo que les voy a mostrar es cómo podemos cambiar esto en base a la página para que podamos hacer esto dinámico porque este es un componente de héroe. Esto podría decir bienvenido al navegador de películas, pero si dice Bienvenido a la película navega por cada página que se va a poner algo viejo. Nadie quiere ver contenido antiguo en cada página. Entonces nosotros, queremos decir, vemos que esto diga de nosotros o por qué existimos o algo así. Y la página de inicio va a decir, bienvenido a reaccionar a uno o algo en esa línea. Pero por ahora lo que quiero que hagas es quiero que crees un nuevo componente de héroe. Y luego quiero que lo importe a su página de inicio y lo importe a su vista sobre también. Asegúrate de usarlo en ambos lugares. Puede ser codificado duro y debe ser codificado en este punto del tiempo. Y así como este es un componente de héroe en la siguiente lección, cuando lo hayas hecho, vamos a hablar de pasar en utilería. 12. Accesorios: De acuerdo, echemos un vistazo a pasar en un mensaje de texto a los componentes del héroe. Por lo que en nuestra página de inicio tenemos este componente héroe y se renderiza un encabezado. Con esto es un héroe componentes. Y queremos que esto sea diferente porque actualmente en la vista Acerca, tenemos lo mismo. Estamos importando este componente de héroe. Pero si hago clic derecho y voy a la definición, dice exactamente lo mismo y esa no es forma de vivir tu vida. Lo que quieres hacer es que quieras poder pasar algo un poco más flexible. Y entonces lo que vamos a hacer es primero ir a nuestra página de inicio y vamos a añadir nuestro primer prompt. Y sólo se va a llamar texto. Y este texto va a ser bienvenido para reaccionar 201. Y de hecho, porque esto es sólo una cuerda regular, no necesito ese corsé rizado ahí dentro. Entonces tenemos esta propiedad de texto o un atributo en HTML, pero en React, lo llamamos prop. Y como se llama textos, pero lo podemos hacer ahora en nuestro héroe, podemos usar llaves, escribir texto, y luego podemos poner el texto dentro de nuestro componente, como este texto. Y dice bienvenido a reaccionar a uno. The About page no tiene nada más que la página de inicio dice Bienvenido para reaccionar a un 1s. Entonces es, se está volviendo un poco más dinámico en este punto en el tiempo. Ahora, lo que queremos hacer por nuestra vista de morada es que también estamos usando el componente héroe aquí. Entonces digamos que el texto va a ser sobre nosotros. Y de nuevo, lo que eso va a hacer es decir, hey, renderizar este componente héroe con una propiedad de texto. En nuestros componentes de héroe, tenemos a Collins héroe es igual a. Y luego hacemos algunas reestructuraciones aquí. Entonces esa primera variable destructiva va a ser texto, y eso coincide con el nombre de la propiedad justo aquí. Y entonces podemos usar eso dentro de nuestra declaración de retorno. Y así cuando vamos a nuestra página de inicio ahora dice de nosotros y esto es perfecto, ese contenido se está cambiando dinámicamente. Ahora lo bueno de esto es que ahora tenemos un héroe. Podemos deshacernos de éste, ese H2, y en nuestra página de inicio podemos deshacernos de ese H1. Y tenemos esta página tipo de juntarse, estas dos páginas se juntan. Entonces quiero que te asegures de que tengas componentes de héroe, no la tarea, pero oye, componente de héroe, eso es tomar una propiedad. Pasa en ese prop. Usa el texto que quieras pasar ahí, pero pasa ese puntal en tu componente de héroe y luego renderiza esa proposición en tu declaración de retorno. Adelante y prueba eso. Y cuando termines, pasemos a la siguiente lección, donde solo agregamos algún contenido básico a nuestra página de inicio y nuestra página sobre. 13. Agregar contenido genico: De acuerdo, agreguemos un poco de contenido a nuestra página de inicio y nuestra página sobre. Entonces esto en realidad no es súper reactivo, pero esto es algo importante para construir una página. Y así estamos usando bootstrap y estoy en mi archivo home dot js aquí. Y lo que puedo hacer es tipo div nombre de clase es igual al contenedor. nombre de la clase Div es igual a rho d de ClassName. Y esto se parece mucho al HTML normal, solo escribiendo bootstrap cinco, class_name va a ser carbón, LG ocho offset LG también. Y eso sólo va a centrar mis ocho de 12 columnas aquí que voy a estar fijando. Y sigamos adelante y escribamos lorem ipsum aquí. Y vamos a guardar eso. Vuelve a nuestra página de inicio. Podemos ver que aquí tenemos algo de lorem ipsum. Ahora tenemos que sumar algún margen aquí en margen superior e inferior. Por lo que margen y de cinco. Ahí vamos. Eso se ve un poco mejor. Y lo que podemos hacer aquí es porque se supone que es un párrafo. De todos modos, lo que vamos a hacer es decir que este párrafo class_name va a ser líder. Y eso sólo va a hacer que este texto sea un poco más grande. Y esto es de nuevo sólo Bootstrap regular. Y así se puede ver el texto yendo un poco más grande. Adelante y cerremos eso. Y en nuestra página sobre, sigamos adelante y hagamos exactamente lo mismo y puedes escribir lo que quieras aquí. Yo sólo voy a mantener esto como un texto ficticio. Y cuando llegue al final de esto, antes de darte todo el código fuente, voy a cambiar lo que es este texto en la página de inicio. Simplemente no quería que tuvieras que verme escribir esto porque eso es aburrido y no hay forma de vivir tu vida. Y así voy a simplemente pegar esto aquí. Y este formateo se puso todo gracioso. Entonces lo que voy a hacer es antes que nada, tengo instalada una extensión llamada bonita. Entonces PRE TTIP, ER, Es éste y es un simple formateador de código. Y así una vez que tengas eso instalado, puedes golpear Command Shift P, controlar turno B en Windows, todo turno P. De cualquier manera, vas a querer que este pequeño compañero esté abierto. Entonces si golpeas como ALT P, solo puedes golpear el signo mayor que y luego escribir formato documento. Y esto podría pedirte que configures usando más bonita, en cuyo caso irás, vas a tener que seleccionar más bonita, lo cual está totalmente bien, y formateará tu código por ti. Entonces tal vez lo haga en un par de otros archivos aquí para que hagamos esto en el Documento de Formato de Inicio. Hagámoslo en formato App. El documento, no, nada cambió. Perfecto. Ahí lo estamos haciendo bien. Index.js, podemos cerrar, nunca vamos a volver a tocar eso. Y eso es todo. Y así que eso solo formateó mi código para mí muy bien. Y así ahora cuando voy a alrededor y a casa, tenemos contenido diferente y sí, en realidad vamos a asegurarnos de que tenemos lorem diferente aquí también, Lorem 25. Sólo para que podamos ver que esto de hecho está cambiando y ese fue exactamente el mismo texto. A ver Lorem 50. Acabo de tener un atajo en mi computadora para Lauren 25 y Lauren 50. Ahí vamos. Eso se ve diferente. Entonces ahora tenemos una página de inicio y sobre página usando una aplicación de una sola página. Ahora nuestro sitio React está usando esto y qué es bueno de esto. Si alguien viene a tu sitio, ve directamente a cortar un barco y va a renderizar la página Acerca para nosotros. No tenemos que hacer nada mágico. Simplemente lo descifra mágicamente para nosotros, lo cual es genial. En nuestra siguiente lección. Una vez que termines de trabajar en esto y hacer que se vea como quieres. Puedes agregar imágenes y cualquier otra cosa que quieras aquí. Cuando estés listo. Encendemos sobre esa siguiente lección donde creamos una nueva vista final de ruta de búsqueda, porque en este momento nuestra búsqueda no hace nada. Esto no funciona. Y queremos que esto empiece a funcionar. Por lo que en los próximos videos, vamos a estar trabajando con la búsqueda. 14. Agregar un componente de búsqueda: De acuerdo, sigamos adelante y creemos una ruta de búsqueda y una vista. Y entonces lo que voy a hacer aquí es antes de nada solo voy a decir importar vista de búsqueda desde puntos slash componentes slash search view. Y ahora esto no existe. Y esto me va a quejar en tan solo un segundo y voy a crear una nueva ruta aquí. Y esta ruta va a tener un camino de búsqueda de slash y eso es todo lo que va a hacer. Y aquí dentro puedo decir la vista de búsqueda y no quiero que eso esté cerrando, quiero que esto sea autocierre. Ahora esto no se va a compilar. Esto obviamente va a decir que componentes Cuota de búsqueda no existe, no puede resolverlo. Adelante y hagamos que exista. Entonces vamos a agarrar nuestro hogar. Y solo voy a volver a guardar esto como search view dot js. Y tenemos que cambiar esto a la vista de búsqueda. Y sí, mantengamos a nuestro héroe como está. Porque eso me gusta. Y sigamos con esto diciendo algo como lo estás buscando. Y luego algunas cosas ahí dentro. Lo dejaremos como está por ahora. Asegúrate de que exportamos eso. De acuerdo, ahora funciona. Por lo que ahora podemos entrar en la búsqueda de slash. Y dice que estás buscando. Por lo que ahora hemos creado una vista de búsqueda muy, muy rápidamente. Y creamos una nueva ruta. Y solo una especie de en esa ruta, utilicé esta versión de la misma manera que usamos la página de inicio solo para mostrarte que puedes hacer esto de dos maneras diferentes. Podría haberlo escrito tan fácilmente de esta manera. Elegí escribirlo de esta manera. Entonces tal vez el siguiente que terminas escribiendo es, o el siguiente terminamos escribiendo porque vamos a estar escribiendo uno más. Vamos, usaremos de esta manera sólo para mostrarte y para demostrar que puedes usar cualquiera de los dos de manera intercambiable. 15. Accesorios de componentes de búsqueda: De acuerdo, hablemos de usar el estado así como pasar el estado hacia abajo a través de indicaciones a ocho, otro componente. Ahora eso podría sonar un poco aterrador, un poco abrumador, pero no, sólo lo daremos un paso a la vez, como siempre lo hacemos. Entonces en nuestra app aquí, lo que podemos decir es esta cosa mágica llamada cont. Vamos a D estructura y array. Por lo que vamos a llamar a estos resultados de búsqueda conjunto de comas resultados de búsqueda. Y esto va a usar estatal, no estatua, sino estatal. Y va a tomar, creo que va a ser un objeto. No hay resultados de búsqueda necesitamos algo para recorrer más adelante usando la función de mapa. Entonces vamos a establecer una matriz como la predeterminada. Ahora dices que no es importante, necesitamos importar esto. Entonces vamos de Importar. Usa apátridas también, obtienes efecto de EU mientras estamos aquí, vamos a usar esto un poco por el camino. Y vamos a importar eso de React. Y así cuando compilamos, al menos esto es decir que no se está usando, pero al menos no se está quejando de que sea indefinido. Ahora vamos a necesitar poner una cosa más en tu texto de búsqueda const. Eso es lo que vamos a estar mostrando en nuestra página y establecer texto de búsqueda. Te voy a mostrar cómo funciona la prop en tan solo un segundo. Entonces use state y el valor predeterminado va a ser una cadena vacía. Muy bien, entonces les voy a mostrar cómo funciona esto, pero necesitamos conseguir primero la configuración. Entonces sigamos adelante y conseguiremos la configuración. En realidad nominar. Voy a volver a eso. Por lo que siempre que utilice los resultados de búsqueda establecidos se establecen texto de búsqueda o como se llame a esto. Esta va a ser tu variable a la que podrás acceder. Esta va a ser la función que luego estableces ese estado. Y así si eres completamente nuevo en State o si eres relativamente nuevo para quedarte y lo has hecho, has jugado con un poco en los componentes basados en clases de Lake, como en reaccionar uno a uno. Bueno, usamos en reaccionar uno a uno y reaccionamos uno a uno. Usa este estado de punto. Si bien no tenemos eso en componentes basados en funciones. Entonces usamos un gancho llamado estado estadounidense. Y podemos cambiar esto diciendo set search text, new text. Y, y así sigamos adelante y hagamos esta consola. Bitácora de puntos. El texto de búsqueda es el predeterminado. Tengo un error tipográfico ahí, pero está bien. Voy a borrar esto en tan solo un segundo. Y luego hagamos tiempo de espera establecido. Y hagamos de esto una función de flecha también. Y eso es tiempo que fuera por dos segundos. Vamos a decir texto de búsqueda conjunto, texto nuevo. Y luego vamos a console.log. Texto de búsqueda es el nuevo texto. Y así pasemos a nuestro navegador de películas y actualicemos nuestra página. Y no hice eso lo suficientemente grande con la suficiente rapidez. Y se puede ver que esto en realidad está empezando a cambiar un poco. Ahora, hay un poco de bicho aquí. Y lo que voy a hacer es que me voy a deshacer de esto sólo porque y esto es realmente importante saber. Ahí vamos. Hay uno y no quería que destrozar mi navegador es cada vez que llamas a la función set, usar el estado va a volver a renderizar toda tu aplicación. Entonces lo que esto estaba haciendo fue conseguir mi texto de búsqueda, que no era nada por defecto. Después de dos segundos, establecería mi texto de búsqueda en texto nuevo. Pero debido a que se utilizó texto de búsqueda establecida en el estado, volvió a renderizar todo mi componente, que simplemente pasa a ser toda mi aplicación. Que luego otra vez lee de arriba a abajo y dice, vale, busquemos texto va a ser nada en segundos. Configura para que sea texto nuevo. Oh, mira eso. Está bien. Texto de búsqueda cambiado de nuevo, re-renderizar la aplicación. Y va una y otra vez. Hay una manera de que te voy a mostrar cómo funciona eso con efecto de EU por el camino. Pero por ahora, sigamos adelante y pasemos algunas de estas cosas a nuestra vista de búsqueda. Y así nuestra vista de búsqueda aquí va a ser como la palabra clave va a ser y este es un texto de búsqueda de prop. Y cuando lleguemos a los resultados de búsqueda, también queremos poner eso en nuestra búsqueda de vista también. Entonces vamos a decir que los resultados de búsqueda son iguales a dos resultados de búsqueda. Y lo que esto va a hacer es porque tenemos una barra de navegación y aquí también tenemos estos diferentes componentes. Toda esta información, el estado se va a almacenar en la aplicación general. Y así en, digamos nuestra barra de navegación y podríamos decir establecer resultados de búsqueda va a cambiar los resultados de búsqueda. Cuando esos resultados de búsqueda cambien, luego va a volver a renderizar esta vista o toda esta aplicación y va a cambiar nuestra vista de búsqueda para nosotros. Entonces sigamos adelante y guardemos esto. Y abramos nuestra vista de búsqueda. Por lo que hago clic derecho y voy a Definición. Y nuestra vista de búsqueda ahora necesita tomar a apoyos y ESA, tomar palabras clave y resultados de búsqueda. Entonces vamos a estructurar D estos. Entonces decimos palabras clave y resultados de búsqueda, y acabo de copiar y pegar eso de mi portapapeles. Tengo un portapapeles de lujo para que pueda copiar y pegar múltiples cosas al mismo tiempo. Y entonces lo que quiero hacer es que quiero cambiar esa palabra clave. Entonces mira esta palabra clave y solo va a cambiar un texto en mi héroe. Entonces si voy por encima a la búsqueda de slash, no hay nada ahí dentro por defecto. Pero si cambio esto, porque este es el valor por defecto. Buscando punto-punto-punto, buscando punto-punto, 1-2-3, 1-2-3, 4-5-6, 4-5-6. Entonces eso sólo va a ser usando el texto de búsqueda regular ahí dentro. Ahora no quiero que solo diga lo que sea que esté buscando. Yo quiero que esto realmente diga una frase. Por lo que const título es igual a una plantilla literal. Estás buscando, y luego palabra clave. Y lo que podemos hacer es en lugar de usar una cadena aquí, podemos usar este título. Está buscando. Y luego en blanco. no hay nada ahí dentro. Eso está bien. Vamos a trabajar con esto. Ahora también sigamos adelante y consola registremos nuestros resultados de búsqueda. Console.log o resultados de búsqueda son los resultados de búsqueda. Eso es todo lo que vamos a hacer por ahora. Eventualmente vamos a tomar los resultados de búsqueda, que va a ser una lista o una matriz. Y vamos a recorrer cada uno y poner algo de texto en nuestra página para que realmente podamos recorrer los resultados de búsqueda usando una API. Todavía no hemos llegado tan lejos, sólo necesitábamos pasar esto más o menos al mismo tiempo. Entonces como una breve recapitulación, lo que hicimos aquí es que dijimos texto de búsqueda y establecer texto de búsqueda va a estar usando estado. Establecer texto de búsqueda cambiará buscado el texto de búsqueda. Y siempre que se cambie el texto de búsqueda, usando esta función, va a volver a renderizar toda la aplicación, que puede o no ser lo que queremos todo el tiempo. Y así hay una manera de evitarlo usando efecto estadounidense. Entonces dijimos que el texto de búsqueda y los resultados de búsqueda, que va a ser una cadena y una matriz van a ser apoyos de la vista de búsqueda. Por lo que podemos pasar estos a la vista de búsqueda para renderizar por el camino. Entonces en nuestra vista de búsqueda, dijimos que había una palabra clave y resultados de búsqueda. Esa palabra clave que pusimos en una plantilla literal y un concepto llamado título. Y cambiamos dinámicamente ese texto de Héroe. Y así eventualmente cuando cambiemos nuestros resultados de búsqueda, cuando cambiemos esa palabra clave, va a decir que estás buscando Star Wars, estás buscando Star Trek. Estabas buscando esbirros o cualquier tipo de película que quieras buscar. Será mucho más dinámico por el camino. Ahora, adelante y dale una oportunidad a esto. Esto podría ser un poco confuso, pero en este punto en el tiempo, realidad no hace falta que tenga mucho sentido porque estamos en el medio terreno de un par de grandes características aquí. Y esta justo la forma en que funciona cuando enseñas en línea es que necesita ser dividida en múltiples videos. Y así estamos en un estado raro aquí. Y si esto no tiene sentido para ti, si lo que hice en este video no tiene sentido perfecto para ti, está bien. Poder a través de esto de todos modos, dale un tiro a esto. Siempre se puede consultar el código fuente también. 16. Concursos. eventos de keyup: De acuerdo, sigamos adelante y trabajemos con nuestra barra de búsqueda. Entonces en nuestra barra de búsqueda, cuando escribimos algunas cosas, necesitábamos realmente hacer algo. Y actualmente no hace nada. Entonces vayamos a nuestra barra de navegación donde está nuestra búsqueda. Y aquí dentro, ya sabes, formateemos este documento. Por lo que tenemos este insumo y queremos poner un valor aquí. Entonces el valor va a ser, digamos prueba. Es prueba, pero puedes ver que en realidad recibimos un error en tu oído diciendo o un componente de advertencia está cambiando una entrada incontrolada para ser controlada. Esto es probablemente causado por el cambio de valor de indefinido a un valor definido que era, actualmente era signo de interrogación y ahora es prueba, cual no debería suceder. Decidir entre utilizar una entrada controlada y no controlada durante la vida útil del componente. Aquí hay más información, siempre se puede leer sobre eso. Pero básicamente lo que esto está diciendo es, oye, esto fue un solo lectura y no se puede teclear y no sé si me puedes oír portazos en mi teclado aquí, pero estoy escribiendo, no pasa nada, y eso es un problema. Entonces, ¿cómo logramos evitar eso en reaccionar? Bueno, en primer lugar, reaccionar siempre dice que un campo de entrada siempre se lee solo si intentaste establecer ese valor. Bueno, tenemos que hacer es que necesitamos establecer este valor para que sea el valor de búsqueda. También necesitamos un manejador de eventos onchange para manejar realmente esto. Y vamos a decir actualización de texto de búsqueda. Ahora bien, esto actualmente no tiene sentido. Pero si, si, si, si, si está cerca, algunos de esos nope, demasiado. Ahí vamos. Esto se está poniendo amable aquí y solo quiero hacer esto un poco más corto para que podamos ver más o menos todas las cosas de la misma, en la misma ventana aquí. Podemos decir const, si lo llamamos actualización de texto de búsqueda. Actualizar el texto de búsqueda es igual a un evento. Ese es el primer parámetro. Y podemos decir consola dot log e dot target dot value. Y eso es simplemente decir que esto está encendido, digamos una entrada. Va a decir punto E, básicamente valor de punto de entrada, sea cual sea ese valor, va a costar mucho para mí. Ahora bien, esto no es súper útil porque actualmente esto está codificado duro. El valor dice Ser el valor de búsqueda. Y necesitamos que esto sea algo un poco más dinámico, como el texto de búsqueda. Pero el texto de búsqueda no se agrega todavía. Entonces sigamos adelante y asegurémonos de que lo tenemos agregado aquí en nuestra barra de navegación para que podamos decir texto de búsqueda y barra interna de navegación en nuestra app, tenemos que añadir ese texto de búsqueda como prop. Por lo que ahora podemos decir que el texto de búsqueda es igual al texto de búsqueda. Y este es el nombre de la propiedad. Simplemente pasa a llamarse lo mismo que nuestra variable de estado aquí. Entonces sigamos adelante y probemos esto. Vamos a refrescarnos. Y cada vez que escribo puedes verlo aparece en mi consola, así que en realidad está funcionando ahora. Eso es genial. Pero en realidad necesitamos acceso a esto desde un nivel superior. Y lo que quiero decir con eso es. Tenemos que entonces poder establecer ese texto de búsqueda aquí arriba para que podamos pasarlo de nuevo a nuestra vista de búsqueda. Entonces en nuestra barra de navegación, vamos a estar configurando ese texto de búsqueda. Se va a llegar a nuestra app, que es donde se define esto. Y luego va a volver a bajar a nuestra vista de búsqueda como resultados de búsqueda. Por lo que necesitamos establecer esos resultados de búsqueda. Y lo que vamos a hacer es pasar como utilería. Entonces vamos a decir que establecer resultados de búsqueda es igual a establecer resultados de búsqueda. Y esto va a ser sólo una propiedad, una prop. Y todo lo que vamos a hacer aquí es poner esto en nuestra barra de navegación, lo que significa que tenemos que añadir esto también aquí. Texto de búsqueda y establecer resultados de búsqueda. No, eso es alrededor de un texto de búsqueda conjunto. Ese es el correcto. Perdón por eso. Yo uso el redondo. Y eso sucede de vez en cuando. Por lo que necesitamos establecer ese texto de búsqueda. Ahora cuando configuramos ese texto de búsqueda, tenemos que asegurarnos de que cada vez que hacemos clic en una tecla que establecemos ese texto de búsqueda. Entonces en este momento solo estamos registrando la consola. Pero lo que podemos hacer es decir establecer ese texto de búsqueda E dot target dot value. Ahora esto va a establecer ese texto de búsqueda, que también va a cambiar el valor aquí arriba, que es lo que está buscando React. Está buscando un manejador de eventos específico como ese. Pero porque el texto de búsqueda también está cambiando y va a subir aquí. Digamos que cambió aquí también. Esa palabra clave va a cambiar también. Que si volvemos a nuestra vista de búsqueda, esa palabra clave va a entrar en nuestro título, que va a entrar en nuestro héroe. Entonces teóricamente, si escribo aquí, si escribo por ahí gran ratón, debería cambiar aquí también. Entonces veamos si rompí algo o si esto va a funcionar. Ahí está. Guerra de las Galaxias. Cambia para mí. Bastante bien, ¿verdad? Entonces eso está funcionando. Y en este momento, en realidad podemos empezar a trabajar con una API, que es exactamente lo que queremos empezar a hacer. Queremos empezar a trabajar con una API porque las API hacen que el mundo dé la vuelta. Tan gran aliento. Podría haberte confundido en este caso. Sé que cuando estaba aprendiendo reaccionar por primera vez si esto fue definitivamente confuso para mí. Entonces lo que me gusta hacer es pensar en mi app es ser, esto es realmente grande cubo. Entonces digamos que tienes como un cubo gigante, gigante y dentro de él tienes estos pequeños recipientes de helado. Y entonces lo que estamos diciendo aquí es app es nuestro cubo gigante, gigante. Navbar es nuestro sabor de helado. El hogar es un sabor de helado buscar vistas de sabor de helado. Y necesitamos básicamente sacar un chip de chocolate de nuestra barra de navegación y ponerlo en nuestro campo de búsqueda. Y entonces lo que necesitamos hacer es decir, Oye, cuando establezcas ese texto de búsqueda, sácalo de ese contenedor en nuestro cubo, y déjalo flotar un poco en nuestro cubo. Y luego cuando encuentre esa vista de búsqueda, pon ese chip de chocolate, pero esa pequeña pepita de chocolate de nuevo en el contenedor de helados de la vista de búsqueda. Y así la idea es que nuestros datos fluyan desde la barra de navegación hasta nuestra aplicación, luego volver a nuestra vista de búsqueda. Y hicimos esta muy elegante interfaz de usuario con un montón de utilería. Por lo que pasamos el texto de búsqueda para que siempre pudiéramos renderizar el texto de búsqueda en nuestro campo de entrada. Establecer texto de búsqueda es una función que pasamos como texto de búsqueda conjunto. Nosotros lo deconstruimos. No, esa es la equivocada. Nosotros lo deconstruimos y establecer el texto de búsqueda está aquí. Y en cualquier momento este valor cambie, se va a ejecutar el texto de búsqueda de actualización. Y luego se va a establecer ese texto de búsqueda, que luego burbujea de nuevo a nuestra app. Y luego vuelve a bajar a nuestra vista de búsqueda, donde tenemos nuestra palabra clave y estamos obteniendo palabra clave de nuestro texto de búsqueda aquí. Acabamos de pasar a cambiarle el nombre como propiedad, como problema. Tenemos esta palabra clave y luego finalmente aterriza en nuestro texto de héroe. Adelante y prueba esto, no lo olvides, también puedes hacer referencia al código fuente en cualquier momento. Si te quedas atascado, no olvides hacer preguntas. Yo estoy aquí para ayudar. Pero lo más importante, ya sabes, trató de divertirse con nosotros, aunque se rompa. Cada vez que se rompe y te da un error, ve en Google qué es ese error, que es una gran manera de aprender. Entonces, cuando veas un error, solo tienes que ir a Google. O si te da un enlace derecho a los React Docs, lee los muelles React, los React Dogs son realmente, realmente buenos. 17. Conseguir las claves de API: De acuerdo, empecemos con algunas cosas de API. Entonces, ante todo, vamos a estar usando la base de datos de películas. Entonces tm DB. Y no recuerdo his.com or.org. Es la película db.org. Y así vas a querer inscribirte en unas cuentas absolutamente gratis. No tienes que pagar nada. Yo pero tú quieres registrarte para una cuenta gratis y luego vas a querer entrar en tu configuración. Y en tu configuración tienes esta pequeña sección de API. Ahora, ya tengo una clave API, así que vas a necesitar crear una nueva clave API. Y estoy usando el V3 off. Y así esta es mi clave API. ¿ Y puedo hacer uno nuevo? No creo que pueda hacer uno nuevo aquí. Eso es desafortunado. De lo contrario, te mostraría exactamente cómo hacerlo. Pero lo que no puedes hacer es simplemente seguir adelante y crear una nueva clave API y quieres copiar esto. Entonces solo tienes que hacer clic con el botón derecho en copiar y vas a querer almacenar eso en algún lugar porque lo vamos a hacer referencia un par de veces. Y entonces lo que voy a hacer es incluso sólo en mi código donde voy a estar buscando. Lo que voy a hacer es solo poner un comentario en el año t IMDB API key es igual a eso, solo para tener acceso a eso más adelante. Ahora lo que puedes hacer es decir que los desarrolladores puntean la película db.org. Aquí hay algunas cosas que podemos hacer. Y así, antes que nada, sigamos adelante y busquemos películas. Y podemos probar esto. Y lo que voy a hacer es simplemente abofetear mi clave API y su identificación de película. Hagamos 559, estudiante número 11. Y enviemos esta solicitud. Y oh, dice que el servicio no está disponible. Interesante, interesante. Me pregunto si eso no me podría causar problemas mientras en grabación en los próximos minutos, espero que no. Pero esencialmente lo que esto terminaría haciendo es escupir un montón de información. Boat va a ser formato JSON sobre esta película en particular, lo que sea en esta película que sea. Hay otra API, API endpoint que vamos a utilizar llamada Buscar y no sólo búsqueda general, sino que queremos buscar películas. Podemos probar esto también. Y déjame poner ahí esa clave API. Ya está en su consulta Star Wars. Y probemos este auto veggies o yendo a 503 en mí también. Sí. No sé si ese servicio está realmente abajo o cuál es el problema. Podríamos mirarlo si quisiéramos. Somos desarrolladores, podríamos averiguar por qué está pasando esto, estoy seguro. Pero no perdamos nuestro tiempo en eso. Ese no es nuestro servicio, esa no es nuestra granja. No son nuestros animales que valga la pena cuidar. Ese es el problema de alguien más. Pero no nos da un lindo eslabón que podamos usar aquí. Y vamos a terminar queriendo copiar este enlace. Por lo que acabo de copiar todo eso. Y yo voy a guardar esto aquí. Ejemplo Enlace para búsquedas de películas. Búsquedas es igual a y luego solo el enlace ahí dentro. Y notarás que dice consultas iguales a Star Space Wars ahí dentro. Y eso es lo que vamos a estar agregando. Y eso es lo que vamos a estar cambiando dinámicamente. Y nuestra clave API va a ser esta clave API. puede ver que selecciona en ambos spots e incluye a adulto. Sin embargo, asegurémonos de que eso sea falso para que sea seguro para el trabajo si estás viendo esto en el trabajo. Y de eso se trata. Entonces lo que necesito que hagas para esta lección en particular es ir a la película db.org. Crea una cuenta nueva si aún no tienes una, ve a configuración, ve a API y obtén una clave API. Por lo que debería verse algo así. No va a ser exactamente lo mismo que el mío, pero debería verse algo parecido al mío. Entonces un montón de letras y un montón de números. Entonces una vez que tengas esa libertad de sentir, pasa a la siguiente lección. 18. Reactuar las peticiones: De acuerdo, sigamos adelante y hagamos una solicitud API. En cualquier momento que escribas en la barra de búsqueda. Por lo que en cualquier momento que cambie ese texto de búsqueda, vamos a hacer una solicitud API. Y así para esto vamos a estar usando el efecto estadounidense, que viene de React. Todavía no hemos usado eso. Me he estado quejando de que aún no se ha utilizado. Adelante y usémoslo. Tipo, efecto de uso. Y esta es una función y se necesita una función de flecha anónima. Y como su segundo parámetro, ¿qué va a monitorear los cambios? Por lo que se va a monitorear el texto de búsqueda. Entonces estamos configurando el texto de búsqueda aquí. Lo estamos pasando a la barra de navegación. Esa barra de navegación va a onchange, actualizar ese texto de búsqueda, que luego va a establecer ese texto de búsqueda. Así que establece ese texto de búsqueda, establece ese texto de búsqueda, que luego se va a actualizar este texto de búsqueda. Por lo que ahora podemos decir console.log. El texto de búsqueda es el texto de búsqueda. Y no me importa que tenga un error tipográfico ahí dentro. Eso está bien. Y vamos a seguir adelante y refrescar esto y se puede ver que no hay nada ahí hay un texto de búsqueda. Pero si escribo Star Wars, puedes ver Star Wars es el texto de búsqueda. Y eso está empezando a venir. Y así que cada vez que escribimos un personaje, necesitamos hacer algún tipo de solicitudes de API a TMD B. Y así podemos hacerlo con fetch. ¿ Y dónde está ese enlace? Ese enlace que queríamos de esa última lección arrinconada aquí, ese es el que queríamos. Vamos a tomar esa solicitud de API. Y lo único que queremos cambiar aquí es donde dice Star Wars, queremos cambiar esto para que sea una variable llamada texto de búsqueda. Entonces vamos a tomar esa respuesta y vamos a decir, Hey, por cierto, JavaScript, esta respuesta va a ser una respuesta JSON. Por lo que analizarlo en JSON. Y luego vamos a decir toma esos datos restantes y solo registra en la consola esos datos solo por un segundo. Eso es todo lo que vamos a hacer. Y así cuando me refresco y escribo Star Wars, puedes ver que estoy haciendo un montón de peticiones aquí. Obtenemos una página con un montón de resultados aquí con 20 resultados por página. Y así el primero aquí es un objeto adulto falso. Tiene un telón de fondo, ID de género, que son IDs. Podemos realizar otras solicitudes de API. El título original Star Wars vista general capas princesa, capa. La princesa Leia es capturada y retenida como rehén por las malvadas fuerzas imperiales y sus esfuerzos por apoderarse del Imperio Galáctico, yada, yada, yada. Por lo que tenemos todo tipo de información aquí. También tenemos un camino de póster, que va a ser eventualmente una imagen que podamos usar. Y así podemos ver que cada vez que escribimos algo, estamos obteniendo resultados diferentes. Por lo tanto, páginas totales, 414 páginas. Cuanto más escribimos, menos páginas tenemos. Eventualmente bajamos a ocho páginas donde puedes escribir solo Star Wars y obtener unos 160 resultados o un 157 en total, en total. Entonces lo único que queremos aquí es que queremos esta matriz. Por qué estamos buscando una matriz es porque queremos establecer esos resultados de búsqueda. Y el resultado de búsqueda se establece en una matriz. Y la razón por la que queremos una matriz es porque podemos recorrer una matriz más fácil de lo que podemos recorrer un solo objeto. Y así toda esta página aquí, todo este resultado es un objeto. Y de hecho, lo que puedo hacer es que sigamos adelante. Haga clic derecho abrir en nueva pestaña y podemos ver toda la respuesta JSON aquí. Vamos a hacer esto más grande. Por lo que tenemos un ID de página de objeto, los resultados son iguales a una matriz de resultados. Y podemos hacer a todos los más pequeños porque básicamente son iguales. Bueno, eso fue divertido. Sólo abramos uno. Y así esta es una matriz de resultados. Y en cada resultado, cada iteración es un objeto. Y solo queremos esta lista y solo queremos esta matriz de datos. No queremos el número de página. Si quisieras, podrías tener el número de página y esas cosas más tarde. A lo mejor como una forma de extender este proyecto como proyecto propio. Pero sigamos adelante y solo mantengamos estos resultados. Y entonces lo que queremos hacer aquí ahora es decir establecer resultados de búsqueda. Resultados de punto de datos. Sí, se llamaba, así que todo esto se llama datos. Oops, ¿qué hice aquí? Entonces todo esto son todos nuestros datos y queremos resultados de punto de datos porque eso es una lista, eso es una matriz, eso es lo que queremos. Y de nuevo, sólo queremos eso para que podamos recorrer más adelante usando JavaScript. Por lo que vamos a establecer esos resultados de búsqueda como datos re.search results. Ahora en este punto del tiempo, va a parecer que no ha pasado nada cuando hacemos una búsqueda aquí. Entonces escribo Star Wars y está haciendo todas estas diferentes solicitudes de API lo cual está funcionando. Simplemente no está renderizando nada aún. La otra cosa también es cuando estás aquí, puedes escribir Star Wars y puedes ver que está haciendo todas estas diferentes solicitudes de API aquí para mí. Eso es genial. Está funcionando, pero en realidad no está en la página de búsqueda y queremos forzar que esto esté en una página de búsqueda. Entonces en el siguiente video, lo que voy a hacer es mostrarte cómo cuando alguien escribe aquí, puedes forzarlo automáticamente a ir a la página de búsqueda. 19. Historial del navegador React: De acuerdo, echemos un vistazo a cómo podemos forzar a la gente a la página de búsqueda en cualquier momento que busques algo, sigamos adelante y deshaznos de esta consola inicia sesión aquí. No necesitamos eso. Tampoco necesitamos esos resultados de búsqueda. Y en nuestra barra de navegación aquí, lo que queremos hacer es querer importar, usar el historial así como enlazar. Y entonces vamos a decir const, historia es igual a la Historia de Estados Unidos. Y luego en cualquier momento actualizamos ese impuesto de búsqueda, pero lo vamos a hacer es vamos a obligar al usuario a ir a la búsqueda de barra. Y así mira esto cuando iría, digamos a la página sobre y escribo cualquier cosa, escribiré la letra T. Me trae directamente a la página de búsqueda, cambié mi URL por mí, T E S T. T E S T. Si vuelvo a la homepage, test dos, me trae de vuelta a la página de búsqueda cada vez que escribo. Entonces todo lo que hicimos ahí fue que dijimos cada vez que escribimos con esta entrada, siempre que se cambie, ejecute, actualice el texto de búsqueda, que es una función anónima aquí arriba, una función de flecha. Va a empujar esa historia a buscar. Y luego vamos a establecer ese texto de búsqueda. Ahora usamos la historia aquí. Dijimos que la historia del concurso es igual a la historia de Estados Unidos. Y importamos historial o el gancho de historia de Estados Unidos de React, router, DOM. Eso es todo lo que hicimos. Entonces dentro de tres líneas de código, simplemente dijimos, oye, usuario, siempre que estés en cualquier página, digamos que estás en la página principal y escribes una carta. Cualquier letra, ve directamente a la página de búsqueda porque estás buscando, por lo que debes ir directamente a la página de búsqueda por ti. Y eso lo hace automáticamente para ti? Sí. Dije automágicamente porque es un poco Magia. Adelante y ponte esa configuración y cuando estés listo, pasemos a la siguiente lección. 20. Mapeo de resultados de búsqueda: De acuerdo, echemos un vistazo a mapear nuestros resultados de búsqueda. Por lo que en nuestra barra de navegación, estamos configurando el texto de búsqueda y la vista de búsqueda interna. Eventualmente vuelve a bajar como resultados de búsqueda y que pasan por una API y luego vamos a utilizar los resultados de búsqueda. Entonces lo que podemos hacer es usar los resultados de búsqueda y podemos recorrer cada resultado y hacer algo. Entonces vamos a recorrer cada resultado usando la función de mapa en JavaScript. Y luego pongamos todos esos resultados de búsqueda en nuestro modelo de objetos de documento en nuestra página. Entonces digamos const resultados, HTML es igual a Search Results dot map. Y esto va a tomar un objeto y en iteración, y va a ser una función de flecha. Ahora si te preguntas, ¿de dónde obtuve objeto e iteración? Aquí, donde estamos pasando por cada uno de los resultados de búsqueda. Aquí hay un objeto. Por lo que para el resultado de búsqueda número uno, tenemos el objeto número uno. Para el número dos, tenemos el objeto número dos y podemos ver que es un objeto porque a, esto es solo JSON y ser JSON se ve igual a JavaScript. Y así este es el símbolo de una matriz y este es el símbolo de un objeto. Y así es donde estamos sacando el objeto. Estamos diciendo que por cada resultado de búsqueda, recorra todos ellos. Obtenemos el índice. Entonces es 12345, etcétera, etcétera. Y vamos a conseguir el objeto. Y así entonces podemos decir retorno div, cualquiera que sea ese objeto y los datos que vienen aquí. Entonces digamos div título original. Entonces solo voy a pegar eso ahí dentro. Objeto punto título original. Y con nuestros resultados de búsqueda, podemos poner nuestros resultados de búsqueda aquí ahora. Y esto simplemente va a hacer algo muy cool. Echa un vistazo a esto. Oh, rompimos algo. ¿ Qué rompimos aquí? Vayamos Star Wars. Ah, seguimos rompiendo algo. ¿ Qué hicimos, qué rompimos? No se puede leer el mapa de propiedades de resultados indefinidos. Veamos qué podemos hacer aquí. Por lo que probablemente queremos asegurarnos de que aquí haya algún tipo de resultado y algún tipo de textos. Entonces queremos asegurarnos de que si hay texto de búsqueda, entonces haz esta solicitud de API. De lo contrario, si no hay texto de búsqueda, no hagas nada. Entonces probemos esto. Ahí vamos. Eso funciona un poco mejor. Entonces el problema ahí estaba, no había nada aquí. Entonces esta consulta estaba vacía y no estaba devolviendo nada para nosotros, lo cual no es una respuesta de API impar. Pero teníamos un mango eso. Y así estamos diciendo que solo realiza la solicitud API si cambia el texto de búsqueda. Y de hecho hay algún texto de búsqueda ahí dentro y no es nulo, no está vacío. Entonces ahora cuando cierro esto y tres frescos, Vamos a la página de inicio. Asegurémonos de que esto funcione. Y escribo Star Wars y obtenemos todas estas diferentes películas de Star Wars y esas cosas. Entonces eso es bueno. Obtenemos la primera página aquí. Eso es básicamente todo lo que queríamos hacer en este momento en el que estamos filtrando, lo cual es genial, estamos filtrando a través de una API. Entonces si quería teclear star, star track, si puedo escribir eso bien, Star Trek y conseguimos Star Trek. Star Trek Beyond Star Trek nemesis, interacción en la oscuridad, evoluciones, etcétera, etcétera, etcétera, etcétera, etcétera. Ahora, hay un pequeño problema aquí advirtiendo que cada analista infantil debe tener una propiedad clave única. Y lo que esto está diciendo es en nuestra vista de búsqueda, esto debería tener una clave. Y así podemos simplemente decir que C0 es igual a i Y así va a ser 0, luego uno, luego dos, luego tres, luego cuatro. Entonces básicamente va a tomar esa iteración y tirarla como clave. Y vamos a entrar a hacer reaccionar feliz. Entonces sigamos adelante y refresquemos. Y se puede ver que ese error ya no aparece. Algo a tener en cuenta es ¿qué pasa si escribimos aquí un montón de chatarra y no hay resultados? Te lo voy a dejar a ti si por parte de tu proyecto final es hacer un, whoops, no hay resultados de búsqueda. Tiene que haber algún tipo de texto aquí, así que eso te va a dejar a ti. Pero continuando hacia adelante, sólo vamos a hacer de esto unas bonitas tarjetas. Entonces lo que quiero que hagas es asegurarte de que tu búsqueda esté funcionando realmente. Ahora, realmente todo lo que teníamos que hacer era agregar tres líneas de código. En nuestra vista de búsqueda, tenemos estos resultados de búsqueda y luego dijimos resultado constante es igual a un montón de cosas aquí. Está bien, adelante y prueba esto cuando estés listo en la siguiente lección, lo que vamos a hacer es crear un nuevo componente para nuestros resultados de búsqueda. Y en lugar de solo usar un div, vamos a usar una tarjeta bootstrap. 21. Bootstrap 5 resultados de búsqueda: Muy bien, lo que tenemos que hacer aquí es, en primer lugar, ir a getbootstrap.com. Estoy usando Bootstrap cinco y voy a copiar esto a mi portapapeles y todo lo que hice fue ir a componentes y luego tarjeta. Y acabo de elegir el primero porque me gusta éste, ese es el que quiero usar. Y así la idea es en cualquier momento que escribas aquí, en lugar de solo decir Star Wars o algo así. Y debería decir, o debe mostrar una tarjeta con tu imagen en ella. Y así vamos a generar eso usando un componente basado en funciones. Y así vamos a seguir adelante y crear un nuevo componente aquí. Tarjeta de película Const es igual a, y esto va a tomar una propiedad. Y vamos a llamar a esta película de utilería. Eventualmente vamos a pasar eso. Y va a ser una función de flecha. Y esto va a devolver un montón de cosas. Y así quiero simplemente chocar eso en y donde dice Clase es igual a k, necesitamos arreglarlo cada vez que dice Clase es igual a dos, nombre de clase es igual a IMG necesita ser una imagen DJ Sx o un elemento js X. Esa fuente necesita ser algún tipo de URL de póster. Entonces hablaremos de eso en tan solo un segundo. Eso todo va a ser el título original de punto de película. También copiemos eso de aquí a nuestro VIH donde dice título de la tarjeta, deshazte de eso, ve a algún lugar de esto va a decir Mostrar detalles. Ahora esto actualmente no hace nada. La URL del cartel no está definida, eso actualmente no va a hacer nada sin que se defina eso. Entonces hagamos contras. Const. La URL del cartel es igual a, y queremos esta URL del cartel. Ahora bien, esto no es una imagen, no sabemos de dónde viene esto. Entonces lo que voy a hacer es escribir en TMD BY camino de póster, imagen, algo así, y basta con dar click en el primer resultado y me va a dar algo. Entonces, vamos a dar click en uno de estos. Sí, eso es lo que queríamos. Creo que fue de Fight Club. Entonces echemos un vistazo a esta documentación. Y sí, aquí está, una imagen así. Entonces lo que quiero hacer es copiar eso y pegar eso en mi URL. Y tengo este camino de póster con una barra en él. Y así presumiblemente, todo lo que tengo que hacer es sacar la última barra y todos esos divertidos personajes ahí dentro. Pega mi nuevo aquí. ¿ Y qué película vamos a conseguir? Star Wars? Y esto es decir que hay un ancho de 500, así que eso es lo que queremos. La otra opción es original. Entonces echemos un vistazo al original. Origen. Ahora, éste es mucho más grande y mira eso. O podemos hacer ancho de 500. Y podemos hacer con algo más? Creo que son solo 500 y ¿qué pasa con 250? No, no se admite el tamaño de imagen. Y eso está bien. Nos pegamos con ancho de 500. Y así básicamente queremos, queremos tomar esta URL, toda esta URL. Y simplemente queremos reemplazar esta última parte por la ruta de póster de punto de película. Y de donde me dieron poste tu camino estaba justo aquí. Entonces ahora estamos haciendo mucho movernos. Entonces esta tarjeta de película es en lugar de esto, vamos a decir regreso. Tarjeta de película. Y esa película va a ser el objeto y la clave porque siempre necesitamos Key. Y así que eso va a tomar este objeto, por ejemplo, éste de aquí. Va a renombrarlo a cine como un prop. Vamos a aceptar ese prop. Entonces vamos a revisar ese punto de película tu camino, camino póster de punto de película. Anexámalo a esta URL aquí. Y esa va a ser nuestra URL de póster. Ahora bien, esto no va a quedar muy bien por el momento. Vamos a arreglar esto en sólo un poquito. Pero lo que esto va a hacer es renderizar un montón de HTML para nosotros. Sigamos adelante y guardemos esto. Y se va a quejar de esto. Link abordará eso y sólo un poquito. Pero sigamos adelante y veamos qué hace esto con los datos. Algo está roto. Ah, estilo. Hay una forma diferente de hacer estilo. De acuerdo, entonces si alguna vez ves este error en particular, esta prop de estilo espera un mapeo de propiedades de estilo a valores. Está buscando JavaScript aquí, extraño que parezca, para tu atributo de estilo. Y así lo escribirías como este estilo es igual a las llaves dobles. Y luego se puede decir como el ancho es igual a 18 m coma, y luego es solo un objeto. Por lo que se parecía mucho a un objeto JavaScript regular. Simplemente tiene las dos llaves a su alrededor. El exterior rizado llaves. Este de ahí. Y este de aquí está diciendo: Hey, salta fuera de HTML y usa JavaScript solo regular. Y entonces aquí está diciendo, oh, esto es lo que vas a ser mapeando. No necesitamos que ninguna de las dos se ocupe de estilo un poco más tarde en una nueva característica. Vamos a seguir adelante y eliminar eso porque no quiero ese ancho máximo ahí dentro y refrescar declarar una consola, Star Wars. Y se puede ver que cambió un montón de cosas aquí. Y es grande. Es demasiado grande. Está bastante cerca de lo que queremos, pero es demasiado grande. Entonces, ¿qué queremos hacer aquí? Queremos resultados HTML o resultados HTML HTML y terminar si hay resultados, entonces podemos hacer algo así como nombre de clase div. Vamos a tirar esto en un contenedor. Vamos a agregar otro nombre de clase div es igual a una fila. Y luego pongamos aquí nuestros resultados HTML. Vamos a ver que esto no es del todo lo que estamos buscando, pero esto nos acerca un poco más. Entonces esto es ahora al menos todo dentro de un contenedor. El problema es que, en nuestra fila, tenemos todas estas tarjetas diferentes y lo que realmente necesitamos como columnas, porque en Bootstrap cinco tienes un contenedor con una fila dentro, con una columna dentro. Entonces lo que podemos hacer es en lugar de escribir tarjeta de nombre de clase, podemos decir div, nombre de clase es igual a algas de carbón de vamos a hacer, vamos a ver cómo se ven dos. Y grande terminan. Eso también es hacer col, md. Tan media arriba, va a haber 33 veces tres más tres más tres más tres más tres. Matemáticas rápidas, van a haber cuatro columnas porque las columnas siempre están fuera de 12 y bootstrap. De lo contrario hacen carbón, SM, no SM sino carbón de dos. Y esto siempre necesita estar dentro de un elemento padre. Entonces vamos a seguir adelante y recortar div eso. Y mira eso. Eso se ve bien. Eso se ve un poco lleno, demasiado abarrotado para de alto gusto. Adelante y digamos carbón LG. Tres. Eso se ve un poco mejor, aún poco lleno de gente. Entonces para cada uno de estos que está sumando margen superior y margen, inferior, margen en el eje Y de cuatro. Ahí vamos. Eso se ve bastante bien. Echemos un vistazo a lo que esto hace en busca de Star Wars, echa un vistazo a eso. Hace una búsqueda real para nosotros ahora nos da el título, nos da un nombre. Y así es como agregamos tarjetas Bootstrap a nuestro proyecto. Entonces lo que me gustaría que hicieras para esta lección es que quiero que agregues tarjetas Bootstrap a tu proyecto hasta el momento. Y todo lo que realmente teníamos que hacer fue crear un nuevo componente con el que deberíamos estar familiarizados. Pasamos en un prop llamado película. Y en nuestro mapa dijimos, usa ese nuevo componente de prop de esa película simplemente pasa a ser que se llama OBJ En este punto. Siempre le damos una clave para que reaccione no se queje. Y entonces básicamente regresamos un montón de HTML que era puramente bootstrap. Bueno, no puramente noventa y cinco por ciento bootstrap. Y luego acabamos de intercambiar algunas de las propiedades como la imagen SRC es igual a la URL del cartel. Cuando termines eso y está funcionando para ti. Lo que vamos a hacer a continuación es que vamos a cambiar este enlace a una vista de detalle. Y así en realidad puedes hacer clic en esto porque en este momento no puedes hacer clic en esto y no va a ir a ninguna parte. Simplemente desplazando de nuevo hasta la parte superior de la página, lo cual no es útil. Vamos a configurar una vista de detalle de película para que realmente pueda usar, por ejemplo, su sitio web.com slash películas slash 11. Y te va a mostrar la película ID 11 usando una API. Y va a quedar realmente bonito y va a hacer un montón de cosas. Entonces vamos a hacer eso a continuación. 22. component de detalles de película: Muy bien, sigamos adelante y agreguemos una vista de detalle de película con solicitudes de API. Entonces lo primero es lo primero, vamos a seguir adelante y deshacernos de esta línea. No necesitamos eso. Es encontrable en otros lugares. Doo-doo-doo-doo. Abramos nuestro app.js. Y en nuestra ruta, sigamos adelante y creemos una nueva ruta. Voy a copiar este y sólo usar esto. Y iba a decir películas slash slash colon ID. Y vamos a usar este DNI por el camino. Y en lugar de hablar de VR, vamos a llamar a esto una vista de cine. Ahora podría haber usado este método, podría haber usado este método, realmente no importa. Me gusta usar este método si tienes apoyos para pasar, como palabras clave o resultados de búsqueda. Pero yo no. Entonces solo voy a usar una película View y voy a dejar que la U o L descubra qué ideas de película y luego hacer una solicitud API basada en esa identificación de película. Entonces sigamos adelante y digamos que esto va a fallar en compilar como se esperaba, vista de película no está definida. Así que sigamos adelante e importemos algo que aún no existe, importa vista de película desde componentes de barra de puntos barra barra vista de película barra. Va a seguir quejándose. Simplemente voy a reescribir sobre VW dos movie view dot js y abollarlo, editarlo y terminó. Acerca de vista se va a llamar vista de cine. Y esto al menos cargará para nosotros ahora. Entonces si voy a slash películas slash 11, dice de nosotros. Eso no está bien. ¿ Y no fue un tipográfico en el estribo? Sí, sí dijo de nosotros. Vamos a cambiar eso de nosotros. Y ahí vamos. Y vista de detalle de película eventualmente este va a ser el nombre de la película. Ahora para sacar el parámetro de esa URL, necesitamos importar primero. ¿ Y qué es? Creo que es params usados, si recuerdo correctamente, usa params de React, router, DOM. Y entonces tomemos ese DNI y lo deconstruiremos. Por lo que const ID es igual usar params inicialmente va a averiguarlo por arte de magia para nosotros, lo cual es increíble. Y console.log ese ID. Y abramos nuestras herramientas aquí y podemos ver que dice 11 en año, así que se está consiguiendo 11. Hagamos como 550. Se pone 550. Entonces eso es perfecto. Ahora estamos sacando datos de nuestra URL y dentro de nuestra aplicación. Eso es exactamente lo que queremos usar. A continuación, queremos asegurarnos de que tenemos algunos detalles de la película aquí para que podamos hacer const detalles de la película como igual a anotar nada igual a establecer detalles de la película ahora es igual al estado estadounidense. Y esto va a sostener un objeto. Y el único dato de película que queremos tener es este dato en particular aquí. No queremos todas las películas, solo queremos una película en particular aquí. Y de hecho, lo que podemos hacer es si volvemos a nuestra documentación de desarrollador aquí, vamos a películas, películas, películas, ¿dónde están las películas? Nosotros queremos hacer. Sí, solo vamos a conseguir detalles. Enviar solicitud. Cinco más de tres, eso no nos funciona. Copiemos esto y peguemos. Y, ya sabes, en realidad pega sólo el texto que quieras, no al botón también. Ahí vamos. Estos son todos los datos que nos van a volver. Entonces voy a cerrar el original. Cerrar bootstrap. Creo que ya no vamos a usar eso. ¿ Y qué lo tenemos aquí? Tenemos presupuesto, ID de página de inicio, ID IMDB, que es bastante genial. Idioma original, título original, visión general, trayectoria de póster de popularidad. Deberíamos tener un telón de fondo también, que va a ser una imagen ligeramente diferente. Tan solo un telón de fondo más grande como un póster gigante. Por ejemplo. Estado de ingresos de la productora, tagline, etcétera, etcétera, etcétera, etcétera, todo tipo de cosas aquí. Entonces esto es lo que queremos usar. Queremos aquí a este Lincoln. Entonces es sólo meter eso en nuestro bolsillo trasero por ahora. Ahora necesitamos usar un hecho. Por lo que siempre que cambie este ID, necesitamos luego ir a buscar nuevos datos de TM db. Por lo que necesitamos importar, usar efecto de React. Y vamos a escribir un efecto aquí de inmediato sólo para demostrar que esto va a funcionar. Entonces vamos a decir Efecto de uso. Se va a tomar una función de flecha, Console.log, hacer una solicitud API. Y segundo parámetro va a ser ¿qué está buscando? Está buscando el DNI. Entonces, cada vez que este ID cambie en la URL, va a, va a hacer una, una, una solicitud API a lo que sea que esas ideas. Entonces vamos a seguir adelante y guardar este estado de usuario no está definido. Sí, eso es correcto. El estado del usuario no está definido. Entonces usa un hecho y también es importante use state que Río, quejándose de algunas cosas que podemos arreglar eso en un poquito. Star Wars. Y no podemos ir a ninguna de esas, pero vamos al cine slash 11. Y podemos ver 11, hacer una API solicita a 11. Eso es perfecto. Eso es lo que queremos. Entonces está bien, vamos a dar un paso atrás aquí y volvamos a nuestro campo de búsqueda. Y hagamos Star Wars. Y cuando hacemos clic en uno de estos botones, no va a ninguna parte. Simplemente nos trae de nuevo a la cima. Y así queremos que esto vaya realmente a nuestras nuevas vistas de detalle. Y lo que podemos hacer es entrar en nuestra vista de búsqueda e intercambiar un HREF por link es igual a. Y esto se supone que va a ir al cine slash HIZO lo que sea que va a ser, vamos a cambiar eso por una const en tan solo un segundo. Necesitamos importar link. Por lo que importamos enlace de React Rotterdam. Y luego podemos obtener la URL de const detalle. Yo lo llamo URL de detalle porque así es como lo llamamos en Django. Y la idea es que va a mostrar datos sólo detallados de una película en particular. Entonces no va a mostrar todas tus películas, que va a ser como una vista ListView o de búsqueda, va a mostrar datos en una película, una película en particular con identificación, y eso se llama vista de detalle. Y así se supone que esto va a recortar películas y luego lo que sea que esas ideas. Y obtuve esa identificación de mi app.js. Y eso entra a, a, a, a, a hacer ruta, camino películas colon ID. Ahora lo que quiero hacer es que quiero reemplazar ese ID de colon por el ID de película real. Para que pudiera hacer película DID, creo que lo es. Y echemos un vistazo a esto. Esta es nuestra respuesta API. El ID de película es igual a 11. Eso es lo que buscamos. Entonces eso funciona perfectamente. Detalle URL y simplemente reemplaza esa cadena por nuestra variable. Guardemos eso. Y volvamos a nuestra página aquí. Y se puede ver que al pasar el rato en la parte inferior izquierda ahí dice slash película slash 123475. Vamos a dar click en esa y se va a una película VW 13475, hacer una API solicita y 13475. Entonces estamos llegando, estamos llegando ahí. Estamos haciendo que esto funcione despacio, pero seguramente. Estamos creando una vista de detalle aquí. Entonces podemos cerrar nuestra vista de búsqueda porque creo que eso ya está todo hecho. Y volvamos a nuestra vista de cine. Y lo que vamos a querer hacer es que vamos a querer buscar estos datos. Y así vamos a entrar aquí, agarrar este enlace. Tiene nuestra clave API y había simplemente totalmente bien. Simplemente voy a desactivar mi clave API más tarde o se desactivará cuando demasiadas personas terminen usarla. Pero aquí dentro queremos intercambiar esa identificación. Entonces fuimos a api dot la película db.org slash 3 slash películas slash lo que sea que ideas. Entonces en mi caso fueron 11. Y luego mi clave API. Entonces vamos a tomar esa respuesta y vamos a decir, oye, respuesta sea JSON, o viene como JSON y especie de convertido de JSON XML, analizarlo desde JSON. Entonces vamos a tomar esos datos y vamos a decir que los detalles de la película del set son los datos. Y entonces aquí dentro podemos cambiar esto para que sea algo así como detalles de película. Título original de punto. Y mientras que los detalles de la película que vienen de la actualidad, está ambientado como nada. Pero lo que podríamos hacer. Y lo que estamos haciendo es que estamos usando este efecto. Entonces, en cualquier momento que cambie esa ID, entonces vamos a hacer una solicitud de API a esa ID. Vamos a decir, oye, es JSON. Trabaja con esos datos como JSON. Establece esos datos, que luego van a cambiar los detalles de nuestra película. Y siempre que utilicemos la parte de set de nuestro estado estadounidense, nos va a volver a renderizar todo este componente para nosotros, en cuyo caso, y esto es realmente agradable. Esto va a estar en blanco al principio y luego en realidad va a aparecer con un nombre. Entonces sigamos adelante y hagamos esto. Y vamos al número 11. Y se puede ver cómo cuando me refresco, es una especie de que no hay nada ahí y luego de repente hay algo ahí. Eso se debe a que está haciendo que las solicitudes API. Está diciendo, oye, usa el número 11, luego haz esa solicitud API y vuelve a usar el número 11. Entonces, vamos a deshacernos de ese registro de consola. ¿ Y qué más queremos hacer aquí? Eso es justo sobre eso. Entonces lo que vamos a hacer en la siguiente lección es que vamos a agregar algunos detalles más aquí. Vamos a añadir un contenedor, una fila, y un montón de columnas, algo de información extra. Y vamos a, vamos a asegurarnos de que haya algún tipo de carga aquí para que por defecto, si esto sigue cargando, vaya a decir cargar y luego va a mostrar el título. Entonces en lugar de simplemente estar en blanco y luego unirse con eso, al menos muestra algo al instante. Entonces vamos a hacer eso en la siguiente lección. Lo que me gustaría que hicieran para esta lección en particular es en su vista de cine, use params, use state, pongámoslos juntos. Efecto de uso. Consigue que las solicitudes de API. Asegúrate de poner esto como tu DNI. Si no pones esto como tu DNI, digamos que lo pones como detalles de película. Vas a establecer esos detalles de la película. Va a ser entonces desencadenar este efecto de uso, que luego va a provocar otras solicitudes de API que va a establecer detalles de la película. Los detalles de la película serán diferentes. Entonces provocará que este efecto se ejecute. Otra vez. No queremos eso. Solo queremos que el efecto se ejecute cuando se cambie el ID. Entonces, cuando pases de como slash movie slash 11 a slash slash película 13475, adelante y prueba eso y cuando estés listo, pasemos a nuestra siguiente lección. 23. Estado de carga: Muy bien, agreguemos un estado de carga a, a nuestra página aquí. Y la razón es que en nuestro último video, refrescamos la página y se puede ver que está en blanco por un segundo rápido, y luego en realidad aparece con los datos, así que queda en blanco por un segundo, luego hace esa solicitud API, obtiene el datos, luego vuelve a renderizar o componente para nosotros. Y eso es genial y todo. Pero esa no es realmente una buena experiencia de usuario. En ocasiones solo queremos que esto diga cargar y luego reemplazarlo automáticamente. Entonces la idea es que tus usuarios no se frustren con la idea de que hay, con el concepto de que no podría haber información hasta que haya información, solo siempre quieren ver algo. Y así vamos a seguir adelante y añadir un estado de carga. Entonces vamos a decir const está cargando y set es la carga igual al estado estadounidense y por defecto, se está cargando? Lo es. Y una vez que tengamos datos aquí, podemos decir que set is, cargando, es falso, ya no está cargando. Y podemos crear una nueva función dentro de esta función. Digamos que función render detalles de película. Y podemos decir si está cargando, queremos entonces devolver héroe con un texto de punto, punto, punto o cargando punto-punto, sería mejor. De lo contrario si hay detalles de la película y de donde estoy obteniendo está cargando y detalles de la película es aquí arriba detalles de la película y se está cargando. Y solo estoy configurando esos cambios usando el estado. Entonces si estás cargando, entonces va a hacer esta solicitud API y luego va a decir que cargar es falso. Ya no está cargando. Si cuando renderizamos estos detalles de película, de hecho está cargando, va a decir cargando en nuestro héroe. De lo contrario. Vamos a mover esto hacia arriba a esta línea aquí. Y vamos a renderizar los detalles de la película. Entonces en lugar de una declaración de retorno grande, vamos a devolver una función que luego va a devolver algunos JS X4 más como dependiendo de un condicional. De acuerdo, vamos a refrescarnos. El CEO dice cargar muy rápido. Cargando, cargando, cargando Star Wars cargando Star Wars, cargando Star Wars. Eso es lo que queremos. Ahora, la razón por la que hacemos eso es porque si la conexión a internet de alguien es realmente, realmente lenta, podría llevar un poco de tiempo. Podría tomar 2-3 segundos para que cualquier API responda de nuevo. Y así mientras esperan, al menos va a decir cargar. Y hagámoslo sólo como ejemplo. Settimeout. Y lo que vamos a hacer es que vamos a cambiar esto para esperar dos segundos o 2 mil milisegundos. Está agarrado que mueven eso por una línea. Y vamos a refrescarnos. Dice que está cargando. Y luego dice que cargó tristeza o así imitamos la idea de que una API podría tardar dos segundos en responder. Ahora mi internet es agradable y rápido, así que simplemente parpadea muy, muy, muy rápido. Pero si el internet de alguien es lento, podría aparecer como punto de carga, punto, punto por mucho más tiempo. Y por eso esto es importante. Entonces así es como agregamos el está cargando ahí. Por lo que decimos es el conjunto de carga está cargando. Y nosotros, podríamos haber hecho todo esto honestamente dentro de nuestro principal retorno. Pero solo para que esto se viera un poco más bonito, lo que terminamos haciendo fue crear otra función aquí y diciendo, si está cargando, entonces regresa al héroe con carga. De lo contrario, devuelve un montón de otras cosas. 24. API de componentes de película: Ahora sigamos adelante y hagamos esto un poco más complicado. Y no complicado, supongo porque en realidad no estamos haciendo nada complejo aquí. Vamos a escribir algo grande, más grande. Entonces vamos a abrir algunos JS x aquí y cerrar ese js X. Y vamos a tener un héroe aquí, pero también vamos a tener un nombre de clase div. Y va a ser un contenedor. También vamos a escribir div. El nombre de la clase es igual a la fila. Y vamos a poner dos columnas en tu nombre de clase div. La primera columna va a ser col md E3. Y esta va a ser la columna de la izquierda. Y luego div nombre de clase col md nueve. Y esta va a ser la columna correcta. Y vamos a seguir adelante y sumar algo de margen también. Justo lo que no está abrazando del todo el tiempo a nuestro estandarte o a nuestro héroe. Mira esa columna izquierda, columna derecha. Entonces vamos en la columna de la izquierda es ir adelante y añadir una imagen aquí. Por lo que necesitamos esa URL del cartel. Y así tenemos una URL de póster. ¿ Dónde estás? ¿Cartel? Ah, se llama camino del cartel. Y eso está volviendo en los detalles de nuestra película. Entonces ahora podemos decir aquí que el camino del cartel const es igual a y sabemos que va a ser detalles de la película dot poster path. ¿ Y de dónde salió esa imagen? Califica aquí. Nosotros queremos ese 501 también. Entonces, solo tomemos esa primera parte de esa URL. Y vamos a poner eso aquí. Y lo vamos a anexar con el camino de la película. Ahora lo que quiero que hagas es cuando termines de trabajar en este proyecto como tu tarea, ¿y si no hay un camino de póster que valga ese camino de póster vuelve como nulo? ¿ Qué haces eso? Porque esto va a decir imagen que equipo db.org slash T slash p slash w 500 slash null o podría ni siquiera decir slash null, podría simplemente ser nulo. Entonces, ¿cómo manejas esa imagen faltante? Y eso es algo en lo que tú también trabajes. Así que todo tratar con una posible imagen faltante. Y eso es realmente sólo un condicional. Si hay algo, si no hay algo, cambie esta variable. Para que ese camino del cartel, sigamos adelante y agreguemos una imagen en tu IMG SRC va a ser ese camino del cartel. Alt va a ser dot-dot-dot. Podemos poner ahí todo lo que queramos. El nombre de la clase va a ser fluido IMG para que sea sensible usando Bootstrap. Vamos a darle una sombra y vamos a redondear. Y veamos cómo se ve esto. Ah, ahí vamos. Tiene poca imagen ahí dentro. Y luego cambiemos algunas de las cosas de la columna correcta. Entonces digamos que aquí va a haber un H2. Y este va a ser los detalles de la película dot título original. Y sigamos adelante y agreguemos una p con un nombre de clase de plomo, y eso es solo bootstrap. Y pongamos detalles de película. Creo que se llamaba Overview, to-to-to-to-hacer visión general. De qué se trata esta película. Detalles de la película punto visión general. Y yo tengo eso. Entonces ahora tenemos un poco de una visión general aquí y puedes poner más detalles aquí si quisieras. Podrías poner un enlace a la página de inicio. Si lo quisieras. Podría enlazar a una página del IMDB. También hay calificaciones aquí dentro. Hay conteos de votos, así que a la persona promedio le gustas. 8.2 de cada diez. Estatus ha sido liberado ya que no ha sido liberado. Por ejemplo, echemos un vistazo a Deadpool. Y me acabo de enterar hoy que va a haber una piscina muerta de tres. Y este es el ID 5.3.3, cinco, 35. Cambiemos eso aquí y veamos si eso se liberó. Se cambia el estado. dio a conocer su planeado. Por lo que está planeado Deadpool tres y no hay votación por ello. Entonces, ¿cómo lidiar con eso si no hay votos? Entonces hay mucho con lo que puedes trabajar aquí. Ni siquiera hay una visión general. Sí, no sabemos de qué va a ser la película. Entonces tal vez poner eso en una declaración if. Entonces así es como creamos un poco de una vista de detalle. Ahora este no es el mayor ejemplo sólo porque había nada ahí dentro sino que el de Star Wars se ve bastante bien. Ahora en la siguiente lección, sigamos adelante y tomemos un telón de fondo, que va a ser esta imagen de fondo. Y volvamos a colocarlo aquí para que el texto siempre esté en capas encima. Y vamos a escribir un poco de CSS para eso. 25. Agregar fondo con CSS: De acuerdo, en este video, y esta va a ser nuestra última lección antes del proyecto final. Yo creo. Queremos cambiar esta imagen aquí atrás. Entonces ahora mismo es sólo gris, pero vamos a seguir adelante y en realidad cambiarlo a una imagen para que haya algo un poco más tematizado sobre esto. Y para eso, vamos a necesitar volver a trabajar con nuestro componente héroe. Entonces abramos nuestra vista de película. Y aquí dentro, nuestro héroe, vamos a añadir un telón de fondo. El telón de fondo es igual a algún tipo de URL. Entonces llamemos a esta URL de fondo. Todavía no sabemos qué es eso, pero sigamos adelante y descubramos qué va a ser eso. Por lo que la URL de fondo const es igual a algo y se llama ruta de fondo. Por lo que podemos poner una variable en tu camino de fondo, detalles de película arriba camino de fondo. Y entonces probablemente podríamos tomar esto también. Y llamemos a eso original. Creo que eso fue lo que fue hace unos videos. Y vamos a tomar URL de telón de fondo. Y lo vamos a poner en nuestro héroe, lo que significa que ahora necesitamos abrir a nuestro héroe y aceptar un telón de fondo opcional. Y solo por fondos estos, sigamos adelante y veamos cuál va a ser ese telón de fondo. Y abramos esto. Sí, esa es una gran imagen, eso es exactamente lo que queremos. Entonces queremos volver a poner esa imagen aquí. Ahora para eso, necesitamos un poco de CSS. Entonces, antes que nada, sigamos adelante y llamemos a esto nuestro contenedor de héroes. Y para H1, vamos a darle a esto un nombre de clase de texto de Héroe. Y para un div opcional para la imagen. Vamos a decir ClassName, telón de fondo de héroe. Y vamos a mantener este telón de fondo aquí por ahora solo para poder acceder a eso si lo necesitamos en un poco. Entonces ahora lo que queremos hacer es abrir nuestro app.js S, que aún no hemos tocado. Y vamos, dividamos nuestra pantalla. Y así tenemos texto oscuro BG, relleno blanco, contenedor de cinco Hero. Así psu dot hero dash container. Y esto va a ser relativo a la posición. Es ese índice de 100. También tenemos hero 2.txt, nuestro texto de guión de héroe, posición, índice de zed relativo 200. Y luego tenemos nuestro telón de fondo de héroe, telón de fondo de héroe. Y esta va a ser posición absoluta. Arriba, 0, izquierda, 0, ancho 100%, altura 100%. Y fondo x2 tamaño de fondo está contenido. Y dejémoslo en eso por ahora. Lo ajustaremos en un poco. Seguro que esto no va a salir de la forma que espero que salga. Entonces tenemos este telón de fondo de héroe y que coincide aquí. Sigamos adelante y guardemos esto. Sí, solo cerraré esto por ahora. Siempre podemos reabrir eso un poco más tarde si es necesario. Y necesitamos establecer este telón de fondo, esta imagen de fondo. Entonces decimos estilo, abrimos nuestro JavaScript y luego abrimos un objeto con nuestro mapeo. Déjame decir atrás, la imagen del suelo es igual a, aquí es donde se pone raro. Atrás ticks, URL, paréntesis de apertura y cierre. Después tenemos una variable con llaves de apertura y cierre. Y luego ponemos aquí nuestra URL de fondo. Entonces esto es mucho por escribir y lo que me gusta hacer es que solo hago URL abierta y cerrada. Entonces dentro de esa URL, escribo mi variable. Y luego dentro de esa variable escribo el fondo del nombre de la variable real o no fondo sino fondo. Y eso sólo una especie de lo mantiene manejable. Porque en este punto, esto llega a ser mucho a ver a pesar de que es sólo, bueno, ¿qué hace ese dato a los 3839 personajes que esta parte parece mucho. Entonces sigamos adelante y guardemos esto y miremos aquello. Eso no se ve mal. Y como era de esperar, no resultó de la manera que esperaba que lo hiciera. Entonces volvamos a nuestro app.js S. El tamaño del patio trasero se va a cubrir. Y cambiemos la posición de fondo para ser centro y centro. ¿ Y qué pasa si ese texto es blanco sobre blanco? Eso puede ser complicado. Entonces hagamos opacidad o le pagará a la ciudad 0.5. solo hazlo un poco más oscuro y siempre va a aparecer. Hagamos que eso solo sea un toque más oscuro también. Y ahí vamos. Ahora vamos a ver otra imagen. Hagamos Star Trek, así. Se ve bastante bien. Star Wars. Echemos un vistazo a este. Agradable, eso se ve bonito y temático. Y así ahora usamos un poco de CSS. También usamos esto, usemos un condicional aquí solo para asegurarnos que este div no se muestre si no hay un telón de fondo. Por lo que podemos decir retroceso. Y, y pondremos ese div ahí, refresca. Y funciona. Echa un vistazo a esto e incluso dice cargar y luego carga todo a la vez. Eso es realmente, muy bonito. De verdad, de verdad nos gusta eso. Ahora eso es más o menos todo lo que hay que hacer por esto para todo este proyecto. Hicimos mucho aquí. Entonces en el siguiente video, lo que voy a hacer es que te voy a describir algunos de tu pozo, básicamente las cosas que necesitas hacer para terminar este proyecto dice, nos conseguí alrededor del 90% ahí. Aprendimos mucho en el camino, pero hay alrededor de otro 10%, que tal vez 5%, que me gustaría que hicieras. Y hablaremos de eso en la siguiente lección, que va a ser tu proyecto final. 26. TU PROYECTO: De acuerdo, bienvenido a tu proyecto final para reaccionar a uno. Ahora esto es un poco interesante, un poco diferente a la forma en que suelo hacer las cosas. Por lo general te mostré los fundamentos y te hago construir algo por tu cuenta. Pero porque React puede ser tan grande y hay tanta información por ahí. Lo que hicimos fue construir toda esta base de datos de películas buscando aplicación casi en su totalidad. Y lo que voy a hacer es dejar el resto de esto en tus manos. Entonces hay algunas cosas que quiero que hagas por tu proyecto. Y hay algunos bichos que a propósito aún no he resuelto. Por lo que no hay página 404. Entonces, por ejemplo, si voy a recortar página faltante, simplemente no hay nada ahí. Entonces debería haber algo que yo quiera que crees algún tipo de página de captura que diga: Oye, esta página no existe. Debería haber un 404 ahí dentro. En ocasiones un resultado de búsqueda no tiene imagen. Y un buen ejemplo es Wanda, intentaba buscar una división por ejemplo. Y simplemente no hay imágenes para uno, ni siquiera puedo decir ese nombre o la película que acaba de llamar Wanda. Y entonces lo que quiero que hagas es si no hay camino de póster, quiero que lo cambies para que sea algo meramente genérico, solo para que siempre haya una imagen ahí dentro. Tampoco hay manejador si no hay resultados de búsqueda. Entonces si tipeo en uno a 99999, no dice nada. Y debería haber algo ahí para buenas experiencias de usuario dice, oye, mira, sé que estás buscando uno a 99999, pero no hay resultados. Simplemente no existe. Entonces vas a necesitar crear eso. Y el botón de búsqueda, botón Buscar en la navegación no funciona. Entonces si tecleo Wanda y hago clic en buscar, no va a ninguna parte, no hace nada. Y eso va a ser grande, eso va a ser difícil de implementar. Así que adelante y dale una oportunidad a esos. propósito te estoy dejando colgando alrededor del 5% de ellos eran alrededor del 95% ahí. Por lo que solo necesitas terminar esos últimos pedacitos. Y entonces terminamos. Lo lindo de esto y la razón por la que lo estoy haciendo de esta manera, y es un poco diferente a como suelo crear un proyecto, son estas tareas que a propósito he dejado fuera de este proyecto para que tengas que resolverlas por tu cuenta. Y esto es muy, muy, muy similar a básicamente una tarea de llevar a casa que una empresa te va a dar cuando te postulas, cuando trabajes con ellos. Y así una vez que superes tus fases de entrevista, la empresa a menudo te dará un poco de código. Te lo enviarán por correo electrónico o algo así. Y luego hay que resolver algunos de los bichos. Y tienes que averiguar cuáles son esos bichos y cómo resolverlos por tu cuenta. Y esta es realmente buena práctica de la vida real donde 95% ahí, tienes que superarnos esa línea de meta con ese último 5%. Porque así es como lo hacemos en el mundo profesional. Es así como casi todo el mundo lo hace. Y así esto es simplemente realmente, realmente buena práctica para ti. Así que adelante y prueba eso. Y no olvides si te quedas atascado, puedes dejar una pregunta abajo. último pero no menos importante, mi nombre ha sido un Caleb Tolkien ha sido no, Mi nombre es Caleb Pauline. Gracias por seguirme a través reaccionar a uno. No lo olvides, puedes descargar el código fuente en cualquier momento y divertirte un poco con él. Es posible que necesite intercambiar las claves API. No estoy demasiado molesto por que la clave API es ser mía o de otra persona. Para que no tengas que cambiar esos. Pero definitivamente puedes echar un vistazo al código fuente. Siempre puedes seguirme en Twitter en Caleb Tolkien o en Instagram. Codificación, punto para punto. Todo el mundo. Gracias de nuevo por chequeo reacciona a uno. Ojalá te divirtieras mucho y ojalá te vea en otro módulo mío, mordedura.