React 101: Aprende React. js para principiantes

1. Bienvenido a React.js para principiantes: Bienvenido a reaccionar uno a uno con tu anfitrión, Caleb, alta magra. En este curso, lo que vamos a estar haciendo es crear un generador de personajes aleatorizado de Star Wars utilizando una API. Por lo que cada vez que hagas clic en este botón, va a encontrar un nuevo personaje para ti usando una API. Vas a obtener experiencia práctica con las solicitudes de API estatales del componente, actualizando tu estado, trabajando con utilería. Vas a crear una aplicación totalmente nueva usando el comando React create new app. Y luego la vamos a reemplazar por nuestra propia llamada Star Wars. El proyecto al final de este curso es realmente, muy divertido. Ya lo degré antes, lo volveré a hacer la demostración. Se trata simplemente de un generador de caracteres aleatorios. Y esto funciona con una API. Hola, me llamo Caleb contando y llevo enseñando a la gente a codificar desde 2012. He enseñado a más de 350 mil alumnos a codificar a nivel mundial. Y hoy voy a estar enseñando a reaccionar. Ahora, ¿por qué creo que debes aprender a reaccionar? Creo que debes aprender reaccionar porque es una habilidad de alta demanda que muchas agencias de desarrollo web y freelancers necesitan saber. Y así que prácticamente cualquier trabajo por ahí va a querer que aprendas a reaccionar. Y esta es una introducción realmente buena en cómo funciona React. Algunos prerrequisitos, sí necesitas conocer HTML. Deberías conocer un poco de CSS y deberías estar bastante familiarizado con JavaScript antes de tomar este curso. React utiliza JavaScript avanzado. Y eso significa que necesitas conocer JavaScript avanzado si estás listo para empezar a construir un divertido generador de caracteres aleatorios usando una API, entonces este es el curso para ti. No busques más y te veré esperemos en esa primera lección. 2. ¿Qué es React.js?: Antes de empezar, echemos un ojo rápido a lo que es React JS. Entonces si te diriges a reaccionar Js.org, en realidad puedes ver que tienen tutoriales y tienen todo tipo de cosas aquí. En realidad es realmente, muy buen sitio y te sugiero, y te recomiendo encarecidamente que te familiarices un poco con él a lo largo de tu tiempo aprendiendo React. Pero ¿qué es reaccionar? React es una biblioteca JavaScript para construir interfaces de usuario. De acuerdo, Eso es algo útil. Esa es una declaración bastante buena sobre lo que es React. Pero lo que React en realidad es, ya sabes, cómo un sitio web está hecho de HTML, CSS y JavaScript, y luego generalmente algún lenguaje back-end para el procesamiento de datos. React le permite construir sitios web interactivos. Por lo que HTML y CSS no pueden hacer eso. No puede ser súper interactivo, pero React puede hacerlo reactivo, puede hacerlo divertido y atractivo, y eso es lo que reacciona hace. Ahora React viene con una sintaxis interesante llamada js X. No es solo JavaScript, parece que JavaScript mezclado con alguna versión loca de HTML. Y vamos a meternos en eso en un poco. Pero básicamente, lo que necesitas saber en esta lección en particular es React simplemente te permite crear páginas muy dinámicas. Al igual que si hiciera clic en esto, solo es instantáneo, encrespa su, es más rápido que usar jQuery es más rápido que usar otras bibliotecas. Y se parece mucho a esto. De nuevo, hablaremos de la sintaxis de misma en un poquito sólo porque se ve un poco extraña en este momento. Pero nos meteremos en eso en un rato. Entonces no hay tarea para ti para esta lección en particular. A continuación, vamos a instalar Node y asegurarnos de que esté instalado en su computadora. 3. Instalación de Node.js y npm: De acuerdo, sigamos adelante y descarguemos e instalamos Node. Necesitamos lo mismo llamado Node.js. Entonces tecleemos en Google descarga Node JS, y esto nos va a llevar a las descargas de slash de NodeJs.org. Por lo que si te trae a la página de inicio, solo puedes hacer click en la descarga. El icono de descarga aquí o el, supongo que no icono, es un botón. Ve con LTS, eso es apoyo a largo plazo. Eso significa que no están probando cosas nuevas. Quiero decir que el 14 o el nodo 16 va a ser soportado por un largo periodo de tiempo. El número impar es generalmente no se soportan y Ubunto funciona de la misma manera a. Por lo que siempre que puedas ir con LTS, apoyo a largo plazo, va a hacer lo que esperas que haga. Para mí. Ya tengo instalado el nodo 15 en mi computadora, así que voy a estar usando 15, pero el nodo 14 va a funcionar igual para ti. Entonces vamos al 14 y se va a descargar esto. Si no lo hace, siempre puedes simplemente ir a las descargas aquí arriba y escoger ya sea el instalador de Windows Installer, Mac OS, o el código fuente que puedes descargar e instalar manualmente usando Linux. Normalmente sólo tienes que hacer clic en uno de estos aunque. Entonces, si estás en Mac, haz clic en instalador de Mac OS, si estás en Windows, haz clic en el instalador de Windows, sigue adelante e instala eso, ejecuta los pasos de instalación. Y cuando termines, vuelve y te voy a mostrar cómo puedes asegurarte de que ese nodo esté instalado correctamente en tu computadora. Muy bien, así que ojalá no tengas JS instalado en tu computadora. Lo que tenemos que hacer ahora es que necesitamos asegurarnos de que estamos ejecutando la versión correcta de Node y que esté instalada y la versión correcta de NPM, que es Node Package Manager, que hablaremos más de todas estas cosas y obtendremos alguna experiencia práctica con una muy, muy pronto. Entonces estoy en Mac y abrí un programa llamado Terminal. Si estás en Windows, puedes abrir CMD. Si estás en Linux, probablemente tengas un programa llamado bash o ya estás familiarizado con el programa de línea de comandos que te gusta más que bash. Entonces para mí estoy en Mac, así que voy a abrir terminal, que es este programa de aquí. Y simplemente voy a escribir N ODE dash v, node dash v Y esto dice node dash version, y esto me da la versión diez. Entonces eso no está bien. Tengo Node Version Manager instalado terminus va a cambiar rápidamente eso a nota versión 15. Ahí vamos. Cambio eso al nodo 15. Y si no hago dash v, aquí vamos, estoy usando el nodo 15. Por lo que quiero asegurarme de que estoy usando el nodo 15 o para utilices el Nodo 14 o el soporte a largo plazo. Entonces si estás viendo esto a un par de años de la fecha de grabación, y estamos en el nodo 16 o el nodo 18, y es LTS. Asegúrate de descargar e instalar la versión LTS. A continuación necesitamos escribir npm dash v. Y esto me va a mostrar mi versión de nodo, mi versión de Node Package Manager. Y éste no importa tanto. Solo necesitamos asegurarnos de que realmente esté instalado en que no te dé algún error diciendo que el comando no existe. Si ningún dash v funciona para ti y npm dash v funciona para ti, estás listo para pasar a la siguiente lección. Por lo que tu tarea para esta lección es ir al nodo js.org y descargar ya sea desde el instalador de Windows, instalador de Mac o el código fuente. Si estás en Linux, instálalo. Abre tu programa de línea de comandos, ya sea que sea Bash command terminal, cualquier otro tipo de programa de línea de comandos nodo dash v o npm dash tres o no o pero, toma ambos tipo node dash v y npm dash v. Si ves que hay una versión ahí dentro y la versión del nodo se ve como una versión correcta tres para ti. Para mí, este es el nodo 15, tu deberías decir nodo 14 o 16 o alguna versión LTS, versión de soporte a largo plazo. Si eso está funcionando para ti, has completado con éxito tu tarea. Y pasemos a la siguiente lección. 4. Inicia un proyecto nuevo: De acuerdo, sigamos adelante y empecemos un nuevo proyecto. Entonces estoy usando VS Code y esto viene con un terminal que puedo usar dentro de él. Entonces si voy a View y luego voy a donde está terminal? Terminal, muestra esta pequeña terminal para mí. Y así estoy en una carpeta llamada reaccionar 101. Y solo para hacer de esto un toque más grande, De acuerdo, así que solo estoy en una carpeta aquí llamada reaccionar 101. Y lo que queremos hacer es asegurarnos de que React esté instalado. Por lo que puedes teclear npm install dash g, eso es global. Crear aplicación React. Y lo que esto va a hacer es seguir adelante e instalar aplicación Create React globalmente en tu computadora. Para que veas que eso fue muy rápido para mí. Podría llevarte un poco más de tiempo. Ahora lo que podemos hacer es escribir np x, Crear, Reaccionar app y luego darle un nombre. Y voy a darle un nombre de mi app de dash. Vas a ver como este edificio, ya que esto está empezando a crear el proyecto, crea una carpeta llamada mi app dash a la izquierda. Entonces sólo voy a darle a esto un poco de tiempo para hacer lo suyo. Es simplemente descargar e instalar todas las cosas que reaccionan necesidades. Se va a conseguir todas las bibliotecas JavaScript que necesita. Se va a instalar todos ellos. Al parecer va a instalar Yarn para que pueda descargar cosas usando hilo en lugar de npm. Es sólo un poco más rápido. Es otro gestor de paquetes. De verdad, no necesitamos preocuparnos por eso. Estoy bastante seguro de que esto va a quitar el hilo. Sí, ¿se quitó el hilo? Y luego dice todo tipo de cosas que prácticamente podemos ignorar en este punto. Podemos o trabajar con esto o podemos ignorarlo. Por lo que dice, creado git commit. Enfriar, genial. Éxito. Creé mi aplicación en, y luego mi ubicación de carpeta de aplicaciones. Dentro del directorio se pueden ejecutar varios comandos. Te sugerimos que empieces escribiendo CD myapp. Y lo que esto va a hacer es cambiar mi directorio de trabajo en mi terminal. O si estás en Windows, puedes escribir DIR si estás en un sistema como Unix, Mac OS o Linux, por ejemplo, y puedes escribir PWD. Deberías estar dentro de la carpeta mi app en tu terminal. hecho de que lo abras por aquí, no significa que esté abierto en tu terminal. Entonces solo para aclarar, ahora, si abrimos mi app a la izquierda, tenemos un montón de cosas aquí. Contamos con módulos de nodo, público, SRC, gitignore package.json, readme dot AMD, hilo dot loc. No vamos a tocar muchas de esas cosas porque eso se mete en, en varios temas diferentes fuera del mundo de React. Pero para este curso, vamos a estar trabajando mayormente en el directorio SRC. Entonces sigamos adelante y solo pongamos esto en marcha. Entonces ahora que tengo CDD en mi app en mi terminal y puedo hacer ls dash a. Y eso me muestra todos mis archivos aquí. O puedo escribir DIR Si estuviera en Windows. Y deberías ver todos estos archivos aquí. Una vez que veas estos archivos, especialmente la carpeta de módulos de nodo aquí, puedes escribir npm start. Y lo que esto va a hacer es construir la app React y lanzarla en tu navegador automáticamente. Y así esto me va a pedir permiso. Se va a decir, oye, ¿puedo acceder a Google Chrome? Voy a decir que sí, de nuevo, y sólo esperar a que esto se cargue. Sólo va a tomar un segundo rápido. Y aquí vamos. Contamos con una aplicación React puesta y funcionando en nuestro equipo. Ahora si tu navegador no se abre para ti automáticamente, siempre puedes ir a HTTP colon slash slash local host colon 3 mil, y eso va al puerto localhost 3 mil. Ahora si por alguna razón eso no te funciona, siempre puedes ir a 127 puntos. No.1, colon 3 mil. Es exactamente lo mismo. Apenas algunas computadoras están configuradas un poco diferente, por lo que hay dos formas diferentes de hacerlo. Su siguiente, sigamos adelante y hablemos de algunos reacciona sintaxis. Pero por el momento, tu tarea va a ser básicamente poner esto en marcha y funcionando. Asegúrate de haber corrido ciertos comandos aquí. Por lo que has corrido npm install dash g para global, Create React app. Entonces escribe np x Create React app, mi app dash. Y eso va a crear todas estas carpetas y toda esta estructura para ti. Y luego CD en esa carpeta en particular. Entonces la mía se llamaba mi aplicación dash, así que solo CDD en esa carpeta. Cambié mi directorio a esa carpeta. Y luego escribes npm start. Debería lanzar un navegador para ti. Acude al puerto localhost 3 mil y te dice justo aquí arriba, puerto host local 3 mil. Y te mostrará tu app React, pero tienes que asegurarte de que npm start se esté ejecutando para que eso funcione. Una vez que hayas hecho eso, pasemos a la siguiente lección. 5. React.js: De acuerdo, echemos un vistazo a la sintaxis de reaccionar. Entonces lo que voy a hacer es sólo hacer que esto sea un toque más pequeño, sólo mueve eso hacia abajo. Voy a entrar en mi SRC, mi carpeta fuente, y entrar en app.js. Y esto se ve realmente, realmente, realmente extraño. Voy a hacer esto incluso sólo un toque más pequeño ahí porque no necesitamos la terminal para esta lección. Y esto se ve realmente extraño. Por lo que si estás acostumbrado a escribir JavaScript vainilla, es posible que nunca hayas visto un comando de importación antes. Esto podría ser nuevo para ti. Y si eso es nuevo para ti, está bien. Hablaremos de eso y tendremos un poco de experiencia con eso también. Vemos una función que se parece a una función regular en JavaScript y una declaración de retorno con paréntesis de apertura. Y si bajamos aquí, hay un paréntesis de cierre que coincide con él. Se puede ver aquí arriba esta línea resalta. Y luego tenemos un div. Ahora esto se ve raro porque no estamos usando una cadena, no estamos usando un literal de plantilla en JavaScript. Estamos usando HTML recto. Y de hecho, esto en realidad se vuelve un poco más raro sólo porque no estamos usando HTML, estamos usando esta cosa llamada JS Acts, que básicamente es XHTML. Entonces es HTML, similar al HTML5 normal, pero está escrito dentro de nuestro JavaScript, que es bastante loco para C. Así que si esta es tu primera vez que miras esto y estás como, whoa, o bien no me gusta esto o no tengo idea de lo que está pasando desnuda conmigo por un rato. Se pone mucho más fácil y se pone bastante agradable trabajar con abajo en el camino. Entonces, sólo leamos a través de esta línea por línea. Tenemos un div. Y ten en cuenta que no es clase. La clase es un nombre real en JavaScript, es una palabra clave, no podemos usar eso, por lo que usamos el nombre de la clase es igual a la aplicación. Vemos lo mismo aquí y aquí tenemos una imagen. Es SRC es, bueno, esto se ve un poco extraño. Entonces en lugar de un archivo, logo lago dot SVG, hemos importado logo dot SVG. Entonces vamos a abrir este archivo. Es solo un archivo SVG regular. Eso hemos importado como una variable llamada Logo. Siempre que usamos uno de estos y reaccionamos, decimos que el nombre del atributo o el nombre de la propiedad es igual a. Y en lugar de tener comillas a ambos lados, como solemos hacer en HTML, tenemos corchetes rizados y corchete rizado de apertura y un corchete rizado de cierre. Y luego ponemos ese nombre variable dentro de ella. Y lo que eso va a hacer es inyectar este logotipo directamente en esta fuente de imagen. De nuevo, tenemos nombre de clase, no clase, nombre de clase, es un atributo js X. Y podemos ver que aquí en cuanto pase el rato sobre esto, dice como DJ ESX atributos y etiquetas alt regulares y nombres de clases, yada, yada, párrafo con algún código, HTML estándar. Tenemos un enlace aquí, nombre de clase, pero el HRF es el mismo, el objetivo es el mismo, el riel es el mismo y dice aprender React. Algo a tener en cuenta sin embargo, es en su declaración de retorno, observe que estamos usando un corchete o un paréntesis al principio y al final aquí. También envolvemos todo dentro de un div. Por lo que no puedes simplemente escribir texto regular. En realidad necesitas tener un elemento HTML con más código dentro de él. Y así esa es una pequeña rareza con React. Pero si solo me aseguro de que mi servidor se esté ejecutando aquí, parece que lo es. Está en localhost 3 mil. Esto es lo que vamos a ver. Ahora para cambiar esto, digamos que quería cambiar esta línea aquí. Todo lo que tengo que hacer es cambiar este texto. Y luego cuando lo guardo, y esto es algo realmente bonito, automáticamente vuelve a cargar mi navegador por mí. Entonces por el tiempo vuelvo a Chrome o Firefox o Safari, ha cambiado para mí, está vivo, actualizado. No tengo que golpear Refresh, lo cual es realmente bonito porque a veces eso se pone bastante molesto si haces eso lo suficiente en un día. Todo lo que tengo que hacer es escribir. Y ves que un vivo cambió justo frente a mí. Y es casi la instancia, así que estoy en hit Save y luego me voy a pasar a Chrome muy rápido. Y vas a poder ver que realmente cambió. Fue muy, muy rápido, pero sí lo vimos cambiar. Entonces lo que voy a hacer es sólo hacer eso. Se puede ver que cada vez que guardé mi app.js, ese nodo también se está actualizando. Entonces dice que está compilando cada vez que golpeo guardar, compilar, compilar, compilar. Entonces tu tarea para esta lección es que quiero que abras tu app.js, asegúrate de que tu servidor se esté ejecutando y solo cambies un poco de texto. No te preocupes por el logo ni nada avanzado. Tan solo preocúpate por cambiar el texto. Y en tu navegador, debería cambiar el texto por ti una vez que tengas eso en marcha, pasemos a la siguiente lección. 6. Importar componentes: Muy bien, echemos un vistazo a la importación de componentes. Y podemos importar todo tipo de cosas. No sólo necesariamente tienen que ser un componente. Hablaré más de componentes en un poco. Pero si echamos un vistazo a nuestro app.js, que vive en nuestra carpeta fuente. Estamos diciendo logotipo de importación. Ese es el nombre que estamos usando de logotipos de slash de puntos. Entonces esto es decir la misma carpeta en la que estamos actualmente, misma carpeta en la que está app.js, Logo dot SVG. Adelante y abramos este archivo, logo dot SVG. Y podemos ver que se trata de un SVG estándar. Simplemente importante para nosotros y lo pone a disposición de nosotros para su uso en este archivo en particular. De igual forma, podemos decir importación, y no tenemos que darle un nombre necesariamente. En una cuerda, podemos decir slash de puntos. Por lo que esta carpeta exacta, app dot CSS. Abramos esto. Esto es app.use ESS, y esto solo hace que el CSS esté disponible para nosotros en nuestro archivo de aplicación ab.js. Por lo que podemos usar ClassName es igual a app. Y echemos un vistazo aquí. Tenemos una app aquí, text-align center. Sigamos adelante y cambiemos este texto alinear a la izquierda. Se puede ver recompilado rápidamente en la parte inferior de ahí. ¿ Y esto hizo algo? No parecía que hiciera nada. Hmmm ¿Tengo que volver a guardar app.js? No. Es solo CSS funky para que parezca que en realidad no es realmente todo tan útil. Adelante y cambiemos el color del texto a negro. Y vamos a abofetear e importante ahí porque no sé qué más hay aquí. En realidad no he leído a través de él y tampoco quiero perder su tiempo leyendo solo el CSS predeterminado. Entonces sigamos adelante y guardemos eso. Y eso no funcionó, probablemente por especificidad. Entonces echemos un vistazo al encabezado de la aplicación. Queremos cambiar el texto del párrafo del encabezado de la aplicación. Entonces esto es sólo algún trabajo de front-end que estamos haciendo aquí. Entonces tenemos App, tenemos cabecera de app en algún lugar, cabecera de app. Y el color ahí es blanco. Entonces sigamos adelante y cambiemos esto a negro. A ver si eso hace el truco aquí. Ahí vamos, lo cambiamos a negro y automáticamente compiló tu CSS para nosotros. Entonces podríamos cambiar esto a azul por ello. Para este texto automáticamente lo cambia para nosotros también, lo cual es realmente, realmente agradable. Entonces así es como importamos comandos. Simplemente la palabra clave import y el nombre de la variable opcional. O queremos importar un componente en particular en que nos meteremos en tan solo un poquito. Por favor, detente conmigo. Estamos llegando ahí, te lo prometo. De y luego un nombre de archivo. Y ese nombre de archivo va a estar en una cadena. Entonces en otros idiomas, python, no ponemos esto en una cadena. En JavaScript, ponemos esto en una cadena, y luego lo terminamos con un punto y coma. Ahora lo que me gustaría que hicieras para esta lección se abre tu app.use CSS y hacer algunos cambios en su nada importante. Por lo que acabo de cambiar el color del texto a azul. Voy a cambiar eso de nuevo a, lo voy a cambiar a amarillo para que sea brillante y visible. Si lo cambio a negro, es difícil de leer. El azul es difícil de leer, el amarillo es bonito y brillante. Adelante y cambia un poco de CSS, asegúrate de que aparezca en tu navegador de la forma en que esperas que aparezca. Y cuando termines con eso, pasemos a esa siguiente lección. 7. Sintesis JSX: Sigamos adelante y exploremos index.js. Entonces aquí es donde nuestra aplicación realmente se renderiza. Y podemos ver que acabo de cerrar mi terminal ahí, solo deja correr eso. Siempre lo puedo abrir con vista terminal y se puede ver que sigue funcionando, así que acabo de colapsar. Y ahora dice importar React from React as as as string. Ese es un paquete que instalamos reaccionar cuando escribimos npm install dash, dash g, Create React app. Creó un paquete ahí para nosotros llamado reaccionar. Ahora si entro en mis carpetas de módulo de nodo, lo vas a ver. Aquí hay un montón de cosas. Pero si nos desplazamos todo el camino hacia abajo, a, C, D, E, F, G, H, todo el camino hacia abajo. ¿Dónde estás? P, Q, R, S. ¿Dónde reaccionan? Ahí estás. Reacciona. Entonces eso es de lo que estamos importando, importando, React, desde React. Y podemos ver todo el código fuente para React aquí también. Si quisiéramos, vamos a importar DOM reaccionado De reaccionar Dom. Entonces si volvemos aquí y echamos un vistazo a React DOM, hay reaccionar Dom. También va a importar un relevante, no irrelevante, pero un familiar, supongo que también es relevante, pero un archivo relativo llamado index.js s. Así que en nuestro archivo index.js, estamos importando, cerraré éste. Estamos importando índice dot css. Y así esto sólo va a agregar algún margen y algún código ahí dentro, y no margen sino algún cuerpo. Incluye un margen y algún código aquí. Entonces eso es todo lo que está haciendo. Vamos a importar App. Este es básicamente nuestros componentes. Entonces si vamos a app, tenemos una función llamada App, y en la parte inferior vemos app export default. Y lo que esto va a hacer es decir tomar esta función APP y exportarla. Y eso permite que sea portátil. Por lo que vamos a importar App desde la misma app de carpeta. Entonces vamos a importar reportaje web vitals. Y eso viene de un reporte de URL relativo vitals web, que sólo va a reportar un montón de cosas para nosotros. No vamos a meternos en eso en este módulo en particular. Y luego llegamos a la nitty-gritty, el código real. Por lo que tenemos reaccionar DOM o Document Object Model dot render. En modo Reaccionar estricto. Vamos a poner nuestra app dentro de ella. Y así este es el GSS. Esto se ve realmente, realmente extraño. Pero básicamente nuestra aplicación en JavaScript era una función. Ahora podemos escribirlo como si fuera HTML estándar o XHTML. Y lo bonito de esto como React solo va a ir detrás de bambalinas y decir, oh, sé exactamente lo que es esto. Y yo sólo voy a trabajar con ello. Sólo voy a hacer que funcione por arte de magia. Y así podemos realmente ponernos realmente, realmente complicados con esto. Y podemos agregar cosas como variables dinámicamente a cada componente. Hablaremos de eso en el futuro. último, pero no menos importante, tenemos dos opciones aquí. Entonces este es nuestro primer argumento para el comando render. Este es el segundo argumento para un comando render. Lo que esto está diciendo es decirlo diciendo en modo estricto, renderizar nuestra app y modo estricto y ponerlo en nuestro, nuestros elementos que tiene un ID de raíz. Entonces si entramos en una carpeta pública y vamos a index.html, vamos a ver en algún lugar de aquí, ¿dónde estás? Id de raíz? Aquí es donde va a vivir nuestra app. Entonces si nos deshacemos de esto, esto ya no va a funcionar para nosotros. Por lo que queremos asegurarnos de que eso siempre exista. Ahora no hace falta que se le llame root. Se podría llamar a esto cualquier otra cosa. A menudo lo verás llamado App también. Por lo que solo un ID de app. Y si alguna vez cambias eso, tienes que cambiarlo aquí también. Así que solo asegúrate de que eso siempre coincida. último, pero no menos importante, estamos ejecutando vitals web. Y esto es realmente, realmente útil para, eso nos dice aquí mismo que empecemos a medir el rendimiento en tu app. Pasar una función para registrar resultados. Por ejemplo, reportar vitals web, console.log. Entonces esa es parte de la sintaxis extraña que vamos a ver con React. Y eso se llama el js X. Lo principal que quiero que te quitas de aquí y no hay tarea para esta lección es que solo quiero que le eches un vistazo a esto, solo lee a través de él. Entender que esto se está importando. Esta es una clase, este es un método en esa clase. Por lo que nos estamos metiendo en la programación JavaScript orientada a objetos. Se necesita un parámetro, podemos decir que es un parámetro porque aquí hay una coma. Y el segundo parámetro es donde se supone que esa aplicación se renderiza. Y luego reaccionar como va a compilar un montón de cosas. Va a decir, oh, reaccionar modo estricto, vale, sé cómo usar eso. Tu app va a entender cuál es tu app y la va a renderizar aquí también. Lo bueno de esto es que estamos empezando a meternos en los componentes. Entonces si tuviéramos una app secundaria, podríamos tener otra app aquí. Importación que nos permite fingir que lo importamos. Podemos llamarlo app o podríamos llamarlo tienda. Y va a renderizar nuestra app y nuestra tienda en nuestra raíz de documentos. Por lo que una vez más, no hay tarea para esta lección. Yo solo quiero que te lleves un, ya sabes, rasguño a. La tarea es en realidad abrir tu index.js y simplemente leer estas líneas aquí, solo una especie de hacerse una idea de cómo se ve esto, porque esto es realmente extraño al principio. Y esto no es nada como cualquier otra cosa en la web. Este es un completamente nuevo, esto se llama el js X. Y así básicamente tienes un componente y componente final y dentro de él, y se ve igual que HTML. Tenemos algo dentro. Entonces esto es como en HTML podemos tener un div slash div, y luego podemos tener un H1 dentro de él. Es muy, muy similar. Por lo que la curva de aprendizaje para esta parte en particular es bastante baja. Una vez que hayas terminado de leer eso, pasemos a la siguiente lección y quizá empecemos con la creación de nuestro primer componente. 8. Tu primer componente: De acuerdo, sigamos adelante y creemos nuestros primeros componentes. Entonces lo que vamos a hacer es ante todo que vamos a decir importar, Reaccionar desde paquete React. Y eso solo nos permite usar React. Y entonces lo que podemos hacer es crear un nuevo componente aquí. Y se parece a esta clase, mi nombre de componente. Entonces llamémoslo un ítem, extiende react.com. Y aquí dentro se necesita un método de render. Se parece mucho a una función. Y aquí dentro, se necesita una declaración de retorno, por lo que devuelve algo que vamos a abrir y cerrar con paréntesis y acaba de poner un h1 aquí. Hola mundo. Ahora eso es lindo. Pero se puede ver que este tipo de no es el color correcto. Se ve un poco tenue. Y entonces eso es básicamente decir que en realidad no se está usando. Entonces sigamos adelante y usemos esto. Ahora tenemos este componente React. Y lo bonito de esto es que podemos escribirlo igual que vimos en nuestro index.js, así como esto. Entonces sigamos adelante y creemos un nuevo artículo dentro de nuestro código. Y eliminemos este párrafo. Y primero lo primero, eliminemos el párrafo. Volvamos a nuestro navegador y solo asegurémonos de que el párrafo no exista. Esto es lo que parecía antes de que dijera cambios de texto. Yo me deshice de él. Se ha ido. Está bien. Enfriar. Entonces ahora que eso está borrado, puedo escribir ítem. Y esto es sólo un estándar XHTML save. Y dice hola mundo. Entonces ahora en realidad no he dicho nada aquí. Lo he escrito en lo escribí. Lo he escrito aquí. Y puedo escribir lo que quiera aquí. Puedo decir hola mundo. Y luego en letras pequeñas, esto es una prueba. Y lo que es bueno de esto es que en realidad no tenemos que cambiarlo en nuestra aplicación una vez que configuramos ese elemento, podemos hacer mucha de nuestra lógica, mucho de nuestro procesamiento en un componente. Ahora sigamos adelante y dividamos este componente en su propio archivo de componente de muro. Entonces lo que voy a hacer es que sólo voy a cortar esto. Corta eso. Y voy a decir importar artículo de. Y voy a crear un nuevo archivo aquí llamado mi artículo. Y podemos deshacernos de esta línea también porque no se va a utilizar en este archivo. Y voy a crear un nuevo archivo aquí llamado mi item dot js. Entonces note que lo llamé mi punto de artículo JS, Pero sólo se llama mi artículo aquí. Cuando reacciona compila tu código, lo sabe, entiende que esto va a ser muy probable un archivo JavaScript. Ahora, por ejemplo, especificamos app dot CSS porque teníamos que decírselo, hey, por cierto, no importes app.js, no importes logo ab.js importante logo dot SVG, pero por defecto, va a asumir Javascripts. Por lo que creé un archivo llamado mi ítem ab.js y no era una pasta esa primera línea ahí dentro. Y luego pega este código aquí también. Y sigamos adelante y arreglemos esa hendidura ahí. Eso se ve bien. Y ahora se puede ver que ese artículo también está condenado de nuevo, no se está utilizando. Lo que tenemos que decir aquí es exportar este ítem para que sea imposible más adelante, exportar por defecto este ítem. Y si vuelvo a app.js, vamos a importar artículo de mi artículo. Ahora abramos nuestra terminal y no hay errores en su, si escribimos esto dijimos ítem dos. Dice fallar en compilar. El artículo no está definido. Volvamos a ponerlo a la forma en que se supone que debe y no obtenemos ningún tipo de error de compilación en nuestra terminal. Ahora volvamos a nuestro navegador. Y funciona. Ahora hemos creado un componente y lo dividimos en su propio archivo de componentes. Y podemos cambiar esto en cualquier momento en el tiempo. Y justo como ejemplo, hola de Caleb Talia y esa soy yo. Y dice hola de Caleb Tolkien. Y así ahora podemos dividir los componentes, no solo de grandes cantidades de lógica, porque tu app.js podría llegar a ser bastante grande. Ahora puedes dividir ese componente en su propio archivo para que sea más mantenible en el futuro. Y toda tu lógica y todo tu procesamiento para este artículo en particular en tu, para este que estamos renderizando puede ir dentro de tu componente de ítem. Por lo que tu tarea para esta lección es el paso número uno. Lo que quiero que hagas es agregar esto, el texto que acabo de resaltar a tu app.js. Y luego quiero que en realidad instancien. Quiero que uses ese componente que creaste y puedes copiar mi código. No te voy a dar el código fuente necesariamente, sólo porque esto es muy, muy sencillo. Y es realmente, realmente buena práctica escribir esto para que sepas que, por ejemplo, las clases tienen llaves, pero return usa paréntesis. Así que adelante y dale una oportunidad a eso. Ese es el paso uno. paso dos es entonces tomar ese código de tu app.js y dividirlo en tus propios componentes como lo hice. Una vez que hayas terminado con eso, pasemos a esa siguiente lección. 9. Trabajar con accesorios: Está bien, hablemos de esta cosa llamada utilería. Entonces, ¿dónde está un buen ejemplo? Un buen ejemplo sería un ejemplo limpio estaría en nuestro index.js, tenemos un componente llamado App. Y podemos tener esta cosa igual que un HTML donde tenemos un atributo es igual a algún tipo de valor. En React, lo llamamos un prop. Entonces una prop es igual a algún tipo de valor y podemos pasar eso. Ahora cuando pasamos un prop o un atributo a nuestro componente, podemos acceder a eso como una variable JavaScript. Entonces sigamos adelante y acabo de deshacer eso. Voy a cerrar ese archivo, abrir app.js y donde tengo ítem aquí, voy a darle un nombre a este ítem. Y así este nombre simplemente va a ser barranco. Entonces guardo eso y vamos a ver que absolutamente no pasa nada. Y en mi artículo aquí, donde tengo este artículo, no puedo simplemente escribir barrancos porque un que no es una variable. No puedo escribir gully y ciertamente no puedo escribir nombre. Pensarías que seríamos capaces de hacerlo, pero simplemente no podemos. Entonces si guardo esto, vamos a decir que vamos a ver que dice falló en compilar uso inesperado del nombre. Así que vamos a seguir adelante y deshacer este tenedor de lugar aquí y guardemos eso. Ahora lo que podemos hacer es acceder a los apoyos usando el, esta palabra clave. Entonces en reaccionar, cuando tenemos algún tipo de referencia a otro reactor, otro JavaScript, siempre abrimos y cerramos con sintaxis de bigote con una apertura y cierre rizado. Entonces decimos este punto, puntería punto, y luego ¿cuál era ese nombre de prop? Ese nombre de utilería era sólo nombre. Entonces podemos decir este punto props nombre de punto, pero guarde eso. Y dice que ahora puedo abrir esto en el navegador. Y ahí está, hola desde gully. Ahora esto es realmente bonito porque podemos usar este artículo en múltiples lugares ahora. Por lo que podemos crear un artículo aquí. Podemos copiar y pegar esto a una nueva línea, ruibarbo. Esos son los dos gatos con los que vivo. Yo los quiero mucho, mucho. Son súper lindos y quiero que estén en este video. Entonces vuelvo y dice hola de gully, hola de ruibarbo. Puse otro, yo. Hola de Caleb. Hola de gully, hola de ruibarbo, hola de Caleb. Y así al escribir una cantidad muy mínima de código, simplemente usando un componente, un componente reutilizable llamado un elemento al que nombramos. Aquí. Podemos pasar en una variable llamada Nombre, y ese nombre se puede acceder a través de este nombre de punto props punto. Y la razón por la que usamos esto es porque estamos dentro de una clase aquí. Entonces esto se refiere a toda esta clase, solo ésta, no a ninguna otra clase. Esto simplemente se refiere a esta clase como un componente. Entonces lo espaciamos con apoyos para que no sea solo esto.nombre porque eso puede llegar a ser muy confuso cuando tienes un proyecto más grande, decimos esto.nombre recorta como en propiedades, y luego el nombre de la propiedad. Ahora, ¿qué pasa si escribimos aquí el equivocado? Digamos que hacemos este puntal, nombre de punto con un N. mayúscula Compilado, funcionó bien, pero en realidad no funciona para nosotros. Y la razón de eso es porque esto no está buscando un prop llamado nombre con un N. mayúscula Y así esto es muy, muy sensible a mayúsculas y minúsculas. Así que solo asegúrate de que tu nombre casing siempre funcione. Dije nombre con una n minúscula, ahí, ahí y allá. Y quiero asegurarme de que aquí funcione. Ahora lo que me gustaría que hicieras como tu tarea es por tu componente que creaste. Yo quiero que le des una propiedad y cuando le des una prop, y puedes usar mi ejemplo también si quieres. Puede ser un nombre es igual a algo. Y luego en tu componente, quiero que accedas a esa propiedad. Yo quiero que puedas mostrarlo en tu página. Así que di hola de este puntote y luego tu nombre de propiedad. Asegúrate de que aparece en tu navegador de la forma en que esperas que se muestre. Y cuando hayas hecho eso, pasemos a la siguiente lección donde hablamos de agregar eventos de clics. 10. Haz clic en eventos en React.js: Echemos un vistazo a la adición de un evento de clic. Por lo que tengo un componente aquí llamado ítem. Tengo tres de ellos en realidad con nombres diferentes. Entonces está usando la misma lógica. Simplemente estamos reemplazando el nombre. Y aquí dentro estamos usando ese problema. Esto es de nuestra última lección. Ahora qué pasa si haces click en, digamos éste. Ahora eso es una especie de ejemplo terrible, pero esto realmente va a llevar a casa la idea de que puede haber un evento de clics. Y así cómo funcionan los eventos de clic o cómo funcionan la mayoría de los eventos es que en realidad utiliza HTML de la vieja escuela, que no hemos visto en mucho tiempo. Entonces una forma de escribir una función es onclick es igual a y luego puedes poner alguna función JavaScript o JavaScript aquí. Ahora muchos lugares ya no nos enseñan porque es realmente, realmente vieja escuela. Pero React aprovecha esto muy, muy fuertemente. Entonces para crear un evento onclick, decimos onclick, y luego le damos algún tipo de valor. Sólo vamos a borrar eso por ahora. Y voy a volver a eso en tan solo un segundo. Tenemos que darle algún tipo de método, algún tipo de acción. Entonces vamos a crear una nueva función aquí llamada Click Me. Y todo esto va a decir como registro de consola, me hicieron clic. Y luego de vuelta al onclick aquí. Ponemos esto en sintaxis de bigote o llaves. Y podemos decir función de flecha, ejecutar este punto, Click Me as a funcion. Ahora esto se ve un poco raro al principio, pero te acostumbrarás, te lo prometo. Entonces tenemos esta apertura rizado, corsé rizado es esta sintaxis rara rizada aquí. Y esto es decir que todo entre aquí va a ser JavaScript, va a ser reaccionar. El resto de esto se parece mucho a HTML. Pero oye, reacciona cuando vayas a compilar esto, y esto va a ser JavaScript solo para que lo sepas, así que cuando hagas clic en algo, va a haber algún tipo de evento y luego va a ejecutar este punto clica conmigo. Y esta es la programación orientada a objetos. Y cada vez que hacemos clic en esto va al registro de la consola me hicieron clic. Entonces sigamos adelante y guardemos eso. Parecía un define compilado. Y si entro aquí, haga clic con el botón derecho inspeccionar, entra a mi consola. Y vamos a hacer esto significativamente más grande. Si hago clic en golly, dice que me hicieron clic. El ruibarbo dice que me hicieron clic y Caleb dice que me hicieron clic. Ahora lo que es genial de esto es porque cada componente es su propia pieza de código básicamente. Por lo que gully se va a conseguir como evento on-click, ruibarbo consigue su evento onclick y yo consigo mi evento onclick. Entonces lo que podemos decir ahora es que me hicieron clic. Y pongamos esto, Vamos a poner un segundo parámetro aquí que diga este punto props nombre de punto. Y va a decir que hice clic y luego sólo el nombre. Entonces sigamos adelante y echemos un vistazo. Dice que se refrescó. Vamos a despejar nuestra consola ahí. Y vamos a dar click a esto. Yo pinché golly. Hice clic en ruibarbo, hice clic en caleb. Entonces ahora podemos realizar algún tipo de lógica basada en eso. Podemos decir, oye, si hacías clic en el estampado de ruibarbo, este era un gato naranja. O si haces clic en gully console log otra cosa o si haces click en Caleb, di que esto no es una captura, podemos realizar algún tipo de lógica basada en ese nombre de propiedad y un evento click. Lo que me gustaría que hicieras como tu tarea es quiero que agregues un evento onclick con una función click y simplemente consola log la propiedad que se está pasando a tu propiedad desde la última lección. Por lo que ahora nos estamos poniendo un poco más avanzados aquí. Y para descomponer esto solo una vez más, estamos diciendo que onclick es igual a corsé rizado. Es así como sabemos que va a ser javascript y reaccionar dentro de esta función se va a ejecutar luego esto, que es todo este componente. Dot click conmigo con paréntesis porque eso coincide aquí. Eso se va a ejecutar entonces. Y puedes registrar en consola cualquier cosa que te guste ahí dentro. Puede ser solo una cadena regular o puedes registrar en consola tu nombre de punto de props. Podrías consola log cualquier cosa. Puedes crear una solicitud API si quieres, cual llegaremos a bajar el camino, realmente puedes hacer cualquier cosa en este momento porque esto es simplemente JavaScript regular. Por lo que ahora has combinado tu HTML con un evento onclick conectándose a tu JavaScript. En React, adelante y dale una oportunidad a esto, pasa unos minutos en esto. Y recuerda, si alguna vez te encuentras con un problema. Entonces digamos que aquí había un error tipográfico. Podemos salvar esto. Se va a compilar perfectamente bien. Pero cuando probemos esto, actualicemos la página. Nosotros probamos esto. Simplemente no funciona. Entonces quieres asegurarte de que tu código esté siempre, siempre funcionando. Y si querías ver este descanso, esto te dará algún tipo de error. Vigila esto. error de tipo no puede leer las indicaciones de propiedad de indefinido. Entonces te está diciendo que aquí hay algún tipo de problema. Y eso se debe a que esto es una propiedad, no un método. Esto está actuando como una variable, no como una función. Entonces, cada vez que te encuentras con un tema, siempre puedes simplemente leer a través de él se fue, pero puedes leer el error y es probable que te dé una idea de lo que está pasando. No es perfecto, pero te dará una buena idea de lo que está pasando y cómo arreglarlo. 11. Agregar estado a tus componentes de React: De acuerdo, sigamos adelante y agreguemos algún estado a nuestro componente. Y qué estado es, es que se parece mucho a utilería. Props es un valor que estás pasando a tus componentes. Entonces es una propiedad, es una propiedad personalizada que estás pasando a tu componente. El estado es como una variable que se está rastreando internamente dentro de tu componente. Por lo que cada vez que creas un nuevo elemento, se obtiene un nuevo estado. Y esto es un poco complicado de explicar. Y para mí, al menos cuando estaba aprendiendo esto hace mucho tiempo, la mejor manera de aprender esto era simplemente hacerlo. Entonces sigamos adelante y creemos algún estado. Por esto. Vamos a necesitar usar un método mágico llamado estructura con. Y necesito poder deletrear nuestro constructo de ayuda o, y esto puede llevar un utilería si quisiéramos. Y podríamos escribir súper utilería. Entonces solo estamos lidiando con utilería ahí. Si esto fuera a extenderse desde un componente diferente, uno que escribimos, esto aseguraría que todos los demás componentes de, digamos, no ítem, pero tal vez una lista que escribiéramos estaría disponible para nosotros aquí. Y eso es todo lo que está diciendo. Entonces podemos decir que este estado de punto es igual a, y este es un objeto. Y contemos el número de clics. Entonces podemos decir que los clics van a ser 0 y ese es el número de veces que se hizo clic en esto. Ahora en nuestro estado Click Me, otro estado donde método Click Me. Lo que podemos decir es que cada vez que se hace clic en esto, este estado de conjunto de puntos como una función toma un objeto y básicamente coincide con este objeto aquí. Entonces vamos a poner la clave de los clics, y va a ser este estado de punto, clics de punto más uno. Ahora, eso es genial y totalmente inútil. No está haciendo nada. Por lo menos tendemos a ver que está haciendo cualquier cosa. Entonces sigamos adelante y asegurémonos de que cuando hagas clic en uno de estos, en realidad haga algo. Tan interior. Uno. Cada vez que esto es click, va a hacer algo. Por lo tanto, pongamos el número de clics por debajo de él. Así es, un nuevo lapso aquí. Y esto sólo va a mostrar el número de clics. Podemos decir este estado de punto, clics de punto es el número de clics. Y esto va a hacer dos cosas, tres cosas en realidad. Entonces el primero aquí es que necesitamos envolver todo esto en algún tipo de elemento HTML. Sigamos adelante y solo movamos eso hacia arriba. Y te das cuenta de que ahí me estaba dando un gran problema. Me estaba dando todos esos subrayados garabateados. Eso se debe a que la declaración de retorno siempre está esperando al menos un elemento que se envuelva alrededor de todo tu otro código. Entonces ese es el número uno. Yo ahorro, voy aquí. número dos es, puedes verlo dice 0 como el número de clics Había el número de clics, ceros, el número de clics. Escribí esto en un solo spot. Pero debido a que tengo este componente siendo usado tres veces, se actualizó automáticamente en tres lugares diferentes. Eso es impresionante. Eso significa que tienes que hacer mucho menos mecanografía y tu trabajo se vuelve mucho más fácil o se vuelve más fácil. Fue una forma graciosa de decir eso. De acuerdo, entonces lo tercero que va a hacer es que va a actualizar el número de clics. Se puede ver que por defecto dice 0. Si hago clic en barranco, cada vez que hago clic en esto, quiero decir, probablemente debería haber hecho de esto un botón en lugar de un H1, pero cada vez que hago clic en esto, ese número sube. Lo mismo con el ruibarbo, lo mismo con Caleb. Y lo realmente bonito de esto es que el número de clics es local para este componente en particular. El número de clics para ruibarbo es local para este componente, y gully es local para este componente. Lo que eso significa es que éste no es artículo. Este es un artículo diferente. Este es un artículo diferente. Pero sólo hemos escrito una lógica una vez. Por lo que tenemos estado constructor es igual a un objeto con clics es por defecto 0. Entonces cuando haces clic en él y se actualiza y el número de clics por uno. Y todo lo que va a hacer es actualizarlo para un componente. Entonces cuando hago clic en ruibarbo, tres giros en 412 no cambia para no cambia. Sólo tres lo hace. Y el único este componente se está actualizando. Ese es el poder detrás del estado. Ahora, la sintaxis para esto es un poco rara y se ve un poco mágica. Pero básicamente podemos decir, cuando tienes un constructor, este estado de punto es igual a, y no sé por qué eso se movió. Pero este estado DOD es igual a un valor clave de objeto. Aquí también podemos tener numerosos valores. Podemos decir que el total restante es igual a 100. Y si quisiéramos actualizar el total restante, sólo agregaríamos una coma aquí y diríamos el total restante. Vamos a actualizar todo esto a la vez quedando. Asegúrate de que eso es espelta el mismo sí. Es igual a, es igual a este estado de punto, punto total restante menos uno. Y no un punto y coma porque se trata de un objeto, no de una línea regular de JavaScript. Y entonces podríamos decir aquí, el total restante va a ser este punto punto estado total restante. Y recuerda que usamos esa sintaxis, esa sintaxis de corsé rizado. Es así como sabe que esto va a ser JavaScript y no sólo HTML. Entonces ahora cada vez que haga clic en esto, esto va a bajar. puede ver que va bajando de 90 a 80. Lo mismo con éste, lo mismo con éste. Y los números van subiendo. Por lo que ahora tenemos dos estados diferentes trabajando al mismo tiempo para cada ítem en particular o cada componente. Ahora lo que me gustaría que hicieras para tu tarea es que antes que nada, añades algún estado que necesitas para escribir tu método constructor. No hace daño pasar en Props y super tus utilices ahí dentro. Crea tu estado en tu constructor. Entonces en tu función click de la última lección, quiero que escribas este estado de conjunto de puntos. Se necesita un objeto que se ve básicamente idéntico a este objeto y simplemente cambia ese valor. Podrías cambiarlo a un nombre, podrías cambiarlo a número de clics. Podrías cambiarlo por lo que quieras. último, pero no menos importante, necesitas poder realmente poner ese estado en tu modelo de objetos de documento en tu HTML. Y así todo lo que hacemos ahí es decir corsé rizado, este estado de punto, nombre de propiedad de punto de nuestro objeto que es. Y luego cerrando corsé rizado, HTML normal o JavaScript. Eso es todo lo que tenemos que hacer. Adelante, prueba eso y cuando estés listo, pasemos a la siguiente lección. 12. component de Star Wars: De acuerdo, vamos a crear unos componentes completamente nuevos. Entonces lo que voy a hacer es deshacerme de, bueno, voy a comentar esto para poder mostrarte cómo es un comentario y dejarme borrar estos otros dos. Por lo que un comentario en JS Acts o en React se parece a este corsé rizado. Entonces sabemos que esto va a ser JavaScript, termina con descansos rizados. Entonces sabemos que todo entre aquí va a ser JavaScript, luego un comentario de javascript, y un comentario de javascript final. Entonces eso es lo que parece. Si estás en VS Code, puedes golpear Command. Voy a escribir eso en realidad Cmd más esto, ese slash. Si estás en Windows, no puedo recordar si es barras de control o barras, pero de cualquier manera, simplemente puedes ir a tu línea y comando slash por mí. Y me acaba de comentar para que pueda seguir adelante y guardar eso. Y vamos a echar un vistazo y dice que compilado con advertencias elemento está definido pero nunca se usa justo aquí arriba. Entonces podemos seguir adelante y podemos comentar eso también. Esto utiliza un comentario regular de JavaScript porque no está dentro de js X. Guardar. Y sigamos adelante y creemos aquí unos componentes completamente nuevos, y luego lo dividiremos. Entonces vamos a crear un nuevo componente llamado Star Wars. Por lo que Clase Star Wars se extiende reaccionar. Esa fue una extraña reacción autocompleta.componente. Y debido a que estamos usando React.Component, necesitamos importar React. Por lo que podemos decir importar Reaccionar desde. Y luego la cuerda reacciona porque es un paquete. Entonces aquí dentro necesitamos algún tipo de función de render. Entonces Render y va a volver en múltiples líneas, así que usamos paréntesis y H1. Y aquí, esto es Star Wars. Eso es todo lo que vamos a hacer por ahora. En este componente en particular, al menos, sigamos adelante y agarramos a Star Wars. Y como no se está usando, hagámoslo usado. Entonces vamos a seguir adelante y deshacernos de nuestro encabezado. No necesitamos eso. Y vamos a limpiar un poco esto. Entonces digamos que esto es una prueba para asegurarnos de que esto funcione de la manera que esperamos esto como una prueba. En realidad queremos ese encabezado ahí porque eso viene con algún estilo agradable. Entonces, mantengamos ese encabezado. Acabo de deshacer Control Z o Comando Z. Esta es una prueba. Ahí vamos. Esto es lo que queremos. Entonces lo que puedo hacer aquí es ahora que básicamente he destripado el interior de mi app predeterminada React, puedo seguir adelante y poner Star Wars aquí. Adelante y escribamos Star Wars. Y este es un componentes React. Entonces lo escribimos como JS Acts dice logotipos no siendo utilizados. Adelante y deshacernos de eso. Y no tenemos más quejas son advertencias. Y dice que esto es Star Wars. Por lo que en tan solo un par de minutos, ahora estamos creando un componente React sobre la marcha muy, muy rápidamente. Ahora en el siguiente número de lecciones, lo que íbamos a hacer es que vamos a crear una API o no vamos a crear una API, vamos a consumir una API. Vamos a utilizar una API que nos permita generar al azar personajes de Star Wars cada vez que haga clic en un botón. Entonces lo que necesito que hagas para esta lección es que te necesito para crear una nueva clase, un nuevo componente, se extiende desde React.com. Simplemente renderizar una cosa. Podemos cambiar lo que renderiza un poco más tarde y luego usar eso en tus JS Acts. Una vez que eso esté funcionando realmente en tu navegador, siéntete libre de pasar a esa siguiente lección. 13. Coincidencia Pseudo: Muy bien, hagamos algo de pseudo codificación aquí. En primer lugar, vamos a estar creando un generador aleatorio de Star Wars utilizando una API. Entonces sigamos adelante y busquemos una API. Entonces hagamos Star Wars API, no datos, GitHub. Y podemos ir a swap dot def. El cambio de punto co ya no existe. También hay algunos copy.txt si quieres. Se trata de los swaps API de Star Wars. Y en cualquier momento que vayas a HTTPS swapping dot.gov slash API slash personas slash uno por instancia. Te va a dar información sobre Luke Skywalker. Entonces sigamos adelante y tecleemos esto en nuestra URL solo para asegurarnos de que esto funcione. Slash api slash personas slash uno. Y aquí podemos ver esto es lo que va a terminar regresando por nosotros. Ahora los estilings poco raros porque hay como texto blanco sobre un fondo gris claro. Pero este es el JSON que vamos a recuperar. Y sigamos adelante y agreguemos un nombre, altura. Añadamos una URL del mundo local y las películas que este personaje es N. Así que vamos a hacer un poco de pseudo codificación aquí. Simplemente nos vamos a armar para el éxito. Entonces vamos a crear un div, que va a ser nuestro contenedor para todo nuestro código. Entonces aquí dentro vamos a tener un nombre. Y entonces qué dije? Vamos a sumar una altura. Asumamos tal vez esa altura en centímetros. El mundo del hogar es una especie de mundo hogar. Todavía no lo sabemos. Entonces eso va a ser una URL, eso va a ser un enlace. Y entonces p tal vez no hagamos una P, Vamos a hacer UL, una lista desordenada con un LI. Justo como ejemplo, no una LU sino una LI filma aquí. Y esto va a parecer bastante terrible, pero esto va a funcionar por lo menos para nosotros. Entonces dice nombre. Esto es todo el texto alinear a la izquierda. Adelante y cambiemos eso. Cambio i al principio, índice punto CSS. No, fue en app.js S text-align. Deshaznos de eso porque no está haciendo nada text-align center. Se puede ver que se recompiló cerca. Ahí vamos. Está centrado. O último pero no menos importante. También necesitamos algún tipo de botón aquí. Porque ¿cómo vamos a generar aleatoriamente un personaje sin botón? Entonces sigamos adelante y agreguemos un gran botón viejo ahí dentro. Entonces escribimos botón, botón y esto es solo HTML. El tipo va a ser un botón regular. Clase va a tener algún tipo de nombre de clase que podamos agregar. A choque se le llama botón btn, supongo. Y esto va a decir Aleatorizar personaje. Ok, tenemos un botoncito ahí dentro. Vamos a seguir adelante y hacer ese botón más grande abriendo nuestra app dot CSS. Y voy a desplazarme al fondo y escribir punto btn porque eso coincide con el nombre de la clase. Esto es sólo CSS aquí. Así que tenga en cuenta ese archivo, pero el nombre de la clase aquí, así que este es CSS regular y en realidad cometí un error. No es clase, es nombre de clase es igual a btn. Y tenemos una clase aquí llamada btn. Cambiemos el color de fondo a negro. Frontera. Un píxel, negro sólido. No, Hagamos amarillo. El color del texto también va a ser amarillo. El relleno va a ser de 20 píxeles por todo el lugar y el tamaño de la fuente va a ser mucho más grande. Hagamos esto 25 píxeles y guardemos, esperemos a que compila carácter aleatorizado. Entonces este es un botón que en realidad es posible. Tenemos un error en tu clase de Aunque. ¿ Te referías a nombre de clase? Adelante y refresquemos. Y eso fue sólo un error de Hill hast compile. Entonces yo sólo refrescante y me deshice de ese error. Entonces ahora necesitamos aleatorizar a este personaje, pero lo hemos pseudocodificado un poco aquí. Y todo lo que hicimos fue decir, oye, va a haber un nombre y se van a acrecentar centímetros. Va a haber hogar mundo es URL. Aquí va a haber películas. Por lo que en realidad no estamos haciendo ninguna codificación JavaScript real en este momento. Solo estamos haciendo hashing esto donde desbaste nuestro código para que sepamos con qué trabajar. En la siguiente lección, lo que me gustaría que hicieras es espejarme. Yo quiero que hagas alguna pseudo codificación. Entonces si no quieres usar la API de swapping, esta de aquí, si no te quieres Star Wars, hay otra llamada la API de Pokemon. Sólo tienes que buscarlo en Google. Te dará básicamente un sitio de aspecto muy similar con estructuras de datos muy similares. Pero voy a estar usando el de Star Wars. Y quería conseguir el nombre de un personaje, la altura, el mundo hogar y las películas. Y eso es lo que vamos a empezar a hacer a partir de la siguiente lección en adelante. Así que adelante, mímame y cuando estés listo, pasemos a esa siguiente lección. 14. Otro hecho que hacer clic: Muy bien, ahora necesitamos agregar una característica rápida, por lo que una función onclick. Entonces tenemos este componente de Star Wars aquí y está renderizando HTML con un montón de H1, PP, UL, aliado y un botón. Y cada vez que haces clic en ese botón tiene que hacer algo. Entonces lo repasamos una vez. Adelante y repasémoslo una vez más. Entonces vamos a decir que onclick es igual a. Y luego en lugar de tus citas regulares como normalmente lo hacemos en HTML o XHTML. Y vamos a decir que esto va a ser de JavaScript. Utilizamos llaves. Entonces aquí podemos decir que get new character va a ser una función, y esto simplemente va a conseguir un nuevo personaje. Pero vamos a asegurarnos de que esto, funciona mediante consola de registro de algo, obtener nuevo personaje desde un botón. Y no lo llenamos onclick. Entonces OnClick, esto tiene que ser, esto va a ser una función de flecha. Este punto conseguir nuevo personaje. Este es un método, por lo que usamos paréntesis. Y lo que podemos hacer aquí, y lo verás mucho, es que podemos poner todo esto en nuevas líneas también, así que es un poco más legible así. Y sí, vas a ver esto bastante por el camino también cuando estás escribiendo mucho reaccionar. Por lo que tenemos una función onclick aquí. Sigamos adelante y guardemos esto y actualicemos nuestra página. Es sólo que aclara esa consola para mí en el fondo aquí. Y cuando hago clic en él, dice conseguir nuevo personaje de un botón. Entonces está funcionando. Nuestro evento click en realidad está funcionando. Ahora eso es todo lo que vamos a hacer para esta lección en particular. Y me gustaría que hicieras lo mismo. Asegúrate de tener un evento onclick. Tiene que realmente desencadenar algo. No te preocupes aún por hacer solicitudes de API. Llegaremos a eso en solo un poquito. Pero asegúrate de que tengas un evento de click que realmente funcione y solo escribo registro de consola como prueba. Vamos a terminar borrando este código en un poco. Pero es una buena prueba. Me dice que en realidad está funcionando. Así que adelante y consigue esa configuración y cuando estés listo, pasemos a la siguiente lección donde empezamos a trabajar con un poco de estado. 15. Cómo guardar datos utilizando el estado de React: De acuerdo, sigamos adelante y agreguemos algún estado a nuestro generador de personajes aleatorios de Star Wars usando una API. Entonces lo primero es lo primero, necesitamos agregar un constructor con, instructor. Podemos pasar en los apoyos si quisiéramos, no hay problema. Entonces sólo vamos a saltarnos eso. Y vamos a decir que este estado de punto es igual a. Y luego se necesita un objeto. O si vienes de Python, se necesita un diccionario. Y necesitamos almacenar, ¿qué necesitamos para almacenar? El nombre, la altura, el mundo de origen, y las películas en las que están. Entonces sigamos adelante y almacenemos el nombre como nulo. No sabemos cómo va a ser ese nombre todavía. El estatura va a ser nulo. No sabemos cuál va a ser aún esa altura. Esa tarea también va a ser nula. No sabemos qué va a ser eso todavía. Y las películas, eso va a ser una matriz vacía. Y la forma en que conseguí esto, y volveremos a esto en tan solo un segundo con un super. Pero la forma en que me quedé nulo en todas partes es porque no sabemos cuál es el nombre, la altura o el mundo de origen. Pero las películas, sabemos que eso va a ser al menos una lista o una matriz. Y si volvemos aquí, vamos a ver películas. Ver aquí mismo, esta es una matriz. Y así queremos almacenar esos datos tal como está dentro de nuestra aplicación. Ahora sigamos adelante y ejecutemos esto. Y esto es decir que el súper necesita venir antes. Entonces vamos a correr súper cool. Eso parece funcionar. Suficiente. Ahora, cada vez que hacemos clic en obtener nuevo personaje, necesitamos actualizar este estado. Y eso lo hacemos con este estado de conjunto de puntos. Y literalmente voy a copiar y pegar esto. Y vamos a codificar duro algunos de estos sólo por el momento. Entonces el nombre va a ser Luke. El estatura va a ser un 172. Si me acuerdo. Ted por favor no me juzgues si escribo eso mal. Y voy a dejar las películas como un solo artículo y tú eres solo Item uno. En realidad, voy a poner el punto dos aquí también, sólo para que podamos ver cómo se ve esto. Entonces sólo vamos a codificar duro estos valores y luego podemos cambiarlo aquí. Entonces podemos decir este estado de punto, nombre de punto, altura en centímetros, creo que es en centímetros. Este estado de punto, altura de punto. El mundo entero va a ser una URL. Por lo que este punto estado, punto hogar mundo. Y de nuevo estamos estableciendo ese estado. Originalmente dijimos ese estado y cuando hagas clic, vamos a establecer ese S8 o vamos a actualizar ese estado. Y por último, las películas van a entrar aquí. Esto va a ser interesante. Vamos a trabajar con esto un poco más tarde. Pero podríamos decir este punto de las películas de punto estado. Y lo codificamos duro como no usar una API solicita que se pueda ver como se ve un poco feo, poco roto por el momento. Cuando hacemos clic en él, automáticamente llena esas cosas para nosotros. Echa un vistazo a eso. Eso es bastante bonito. Ahora, sigamos adelante y asegurémonos de que esto no se presente. Eso lo vamos a hacer en la siguiente lección. Entonces cada vez que cargas la página, solo hay un botón. Y nada de esto va a aparecer hasta que se haga clic en ese botón. Eso haremos en la siguiente lección. Pero por el momento, asegúrate de tener este código duro. No te preocupes por las solicitudes de API. Solo necesitamos asegurarnos de que tengas un constructo o asegurarnos de que corres súper primero. Babum, babum, este.tab state, vas a querer nombrar películas de alto mundo home, o cualquier otro dato que quieras usar de swaps, de la API pantanosa. Asegúrate de que al hacer clic, vas a estar configurando ese estado. Por lo que quieres establecer el nombre, la altura, el mundo entero, las películas o las propiedades que establezcas en tu objeto y tu objeto de estado. Y luego simplemente imprime eso a la página en tu función de render. Adelante y prueba eso y cuando estés listo, pasemos a la siguiente lección donde escondemos todo esto hasta que esté realmente disponible para ver. 16. Si las condiciones en React: Echemos un vistazo a esconder estas cosas. Entonces si volvemos aquí y refrescamos nuestra página, dice centímetros mundo hogar y hay una lista y simplemente no queremos que eso se presente. Lo que necesitamos es algún tipo de declaración if dentro de nuestro método de render. Entonces lo que podemos hacer, entonces, hay un par de maneras diferentes en las que podemos hacer esto, pero te voy a mostrar el JS XY. Por lo que podemos decir llaves abiertas o rizadas. Eso sólo significa que aquí va a haber alguna lógica de JavaScript. Vamos a decir si algo es cierto, y, y entonces podemos darle a esto un div. Entonces vamos a volver a js X. Y vamos a mover todas estas cosas aquí excepto el botón. Entonces arriba, arriba, en, en. Y algo tiene que ser cierto. Entonces lo que podemos hacer es que aquí podemos trabajar con el estado. Entonces por defecto podemos decir que algo es falso. Cuando se hace clic en ese botón, algo es cierto. Entonces podemos decir que este punto tiene carácter o digamos caracter cargado. Y esto va a ser un estado, por lo que este estado.tab. Y necesitamos configurar eso aquí en nuestro constructor. Entonces queremos decir caracter cargado, esto va a ser falso por defecto. Y cuando consigas un nuevo personaje, vamos a actualizar eso para que sea cierto. Y lo que esto va a hacer es que no va a mostrar nada hasta que hagamos clic en esto. Lo cual es realmente, realmente agradable porque no queríamos ese CME ni ese mundo entero, o simplemente esa pequeña bala de ahí. No queríamos que nada de eso se presentara hasta que en realidad había algunos datos. Entonces, para recapitular, lo que hicimos aquí fue que abrimos nuestra sintaxis de JavaScript. Por lo que JavaScript dentro de js X, dijimos si el estado del carácter cargado es verdadero y este es un atajo de JavaScript. Entonces decimos y terminamos. Ponemos algo de texto aquí o algunos Actos JS. Eso dice entonces, si ese personaje se cargó, tenemos todo este otro estado. Y básicamente por defecto dijimos caracteres no cargados. Todavía no se hizo clic en el botón. Cuando se haga clic en el botón, vamos a decir como personaje está cargado. Cuando ese personaje esté cargado, todas estas otras cosas se van a poner al mismo tiempo, y lo podemos mostrar aquí. Por último, cerramos nuestra sintaxis con un corsé rizado de cierre, y eso simplemente dice que todo aquí va a ser alguna forma de lógica JavaScript. No es sólo XHTML. Adelante, prueba eso. Asegúrate de que funcione para ti. Cuando estés listo. Vamos a ir juntos a esa siguiente lección. Te veré por ahí. 17. tu primera petición de API basada: De acuerdo, sigamos adelante y hagamos nuestras primeras solicitudes de API. Entonces lo que tenemos que hacer es en nuestro carácter get new, no sólo necesitamos establecer el estado, sino que necesitamos hacer una solicitud API sobre para intercambiar hay que obtener algo de información. Entonces, vamos a trabajar con esto. En un asunto muy, muy sencillo para empezar. Vayamos a intercambiar e.gov. Y voy a conseguir esta API slash gente slash una URL. Y voy a poner esto aquí ya que la URL const es igual a sólo esa URL, entonces vamos a crear una solicitud de API de fetch. Por lo que vamos a decir fetch esa URL usando una solicitud get por defecto. Entonces vamos a tomar esa respuesta y vamos a JSON, desafiarlo o decodificado de JSON porque sabemos que la respuesta va a venir de JSON. Este es el formato JSON aquí. Por lo que queremos asegurarnos de que esa respuesta, sea lo que sea, va a ser JSON. Entonces una vez hecho eso, vamos a tomar esos datos, todo ese JSON, y vamos a trabajar con ello y vamos a decir datos console.log. Y vamos a deshacernos de nuestro primer console.log para que no nos desordenemos nuestra consola. Todo parece que es una orden. Se compiló perfectamente bien. Volvamos a nuestra app React y actualicemos. Y se puede ver que nuestras cosas se cargaron primero, eso es sólo porque está codificada. Eso está bien. No nos vamos a preocupar por eso por ahora. lo vamos a reemplazar en tan solo un segundo. Lo que queríamos asegurarnos de que funcionara fue esto. En nuestra consola. Se consiguió toda la información. Llegó a nacer año, ¿quién es este? Este es Luke Skywalker consiguió su nombre, su altura, su masa es color de pelo, color de piel, películas, género, altura, mundo hogar, masa, yada, yada, yada, yada, todo tipo de cosas ahí dentro. Por lo que ahora tenemos estos datos con los que trabajar en un objeto o en un objeto. En JavaScript, casi lo llamé diccionario porque escribo mucho Python, básicamente lo mismo. Entonces lo que queremos hacer ahora es que queremos tomar este código, el estado conjunto. Y queremos subirlo a los datos aquí. Y queremos que esos datos sean relevantes. Por lo que el nombre de datos va a ser Luke Skywalker. Obtenemos datos de aquí. Por lo que todo este objeto aquí se va a llamar datos. A eso lo asignamos aquí. Y luego dijimos que el nombre va a estar ahí mismo. Tenemos el nombre. Entonces data.frame altura va a ser altura es 172, supongo que no? Ahora vamos a hacer altura de punto de datos. Mundo de origen. Esta va a ser una URL. Entonces va a ser un mundo hogareño. Y se puede trabajar con esto un poco más tarde. Una vez que tengas este proyecto en marcha, puedes decir, oh, hay una URL del mundo en casa. Sigamos adelante y también busquemos esos datos también. Pero por ahora vamos a mantenerlo simple y decir data.dat home world, y sólo va a ser una URL y eso está bien. Y a las películas se le llama películas en tu sí. Películas. Ahí hay cuatro de ellos. Lucas y película 1236. Estas son las ideas, no el orden de la película por cierto. Entonces hacemos películas de punto de datos. Y sigamos adelante y probemos esto. Entonces lo que esto ahora va a hacer es cuando me refresque o no tienes que refrescar. Me gusta refrescarme justo como un hábito de especie de limpiar a mi consola rápidamente. Lo que esto va a hacer es que voy a hacer clic en este botón y luego va a hacer una solicitud para intercambiar e dot dev. Y te mostraré, va a aparecer en nuestra consola aquí. Y una vez que se haga esa solicitud, asumiendo que no tengo ningún tipo de tipografía, va a cargar los datos aquí arriba y siempre va a mostrarle a Luke Skywalker. Ahí vamos. Luke Skywalker, un mundo natal de 172 centímetros es planetas slash uno anys en películas, uno, ID de dos, Film ID de tres película idea para estos no son los episodios por cierto, esta es sólo una forma diferente de ordenar datos. Entonces tenemos eso funcionando ahora. Quiero que te asegures de que tengas esto funcionando de la misma manera que yo lo tengo trabajando. Y en la siguiente lección realmente vamos a aleatorizar esto porque ahora mismo cada vez que hago clic en esto, solo carga a Luke. Y ya sabes, tan grande como Luke es. A lo mejor quisiéramos que se expusiera a alguien más, algunos otros personajes por ahí que vienen del intercambio de dot dev. 18. Randomizing: De acuerdo, generemos un personaje aleatorio de Star Wars. Entonces puedes ver aquí que tenemos swapping dot dev slash, api slash gente slash uno. Y eso sólo va a conseguir el primer personaje en su base de datos. ID número uno es el primer carácter en la base de datos de swapping dot devs. ¿ Y si vamos a su página web y miramos a la gente slash por quién era el número cuatro? Darth Vader, agradable, Otro personaje común. Entonces esa es buena para usar. ¿ Y si quisiéramos conseguir el número de quién? No lo sé. Voy a adivinar el número 11. O tienes que estar bromeando. Voy a equivocadamente aquí y puede Skywalker agradable. Entonces, ya sabes, mantenerlo en la familia. De acuerdo, así que vayamos al azar ish. Veamos qué pasa cuando vamos al número 100. No hay un 100. Y así con un montón de API, y lo que podemos hacer es porque esta es una URL de detalle, simplemente podemos ir a recortar a la gente y esto nos mostrará a toda la gente. Dice que hay un conteo de 82. Por lo que sabemos que hay al menos 82 caracteres ahí dentro con identificación. Ahora necesitamos un número aleatorio entre 0 o no 0, sino un número aleatorio entre 182. Entonces vamos a crear un número aleatorio. Número aleatorio es igual a, y esto es simplemente JavaScript simple aquí. Entonces vamos a redondear lo que sea este número, punto matemático aleatorio. Y esto nos va a dar un número entre 01. Y entonces vamos a multiplicar eso por 82 y asegurarnos de que eso sea redondeado. Entonces si es como 0.4. 1.5.2 tres, se va a multiplicar eso por AD2 y luego redondear eso a un número entero. Entonces podemos tomar ese número y podemos convertir esto en un literal de plantilla en lugar de una cadena regular. Y podemos arrojar esta variable aquí otra vez, esto es simplemente JavaScript regular en este punto. Y lo que esto va a hacer es conseguir un número aleatorio entre 182. Y así cada vez que hacemos clic en esto, cada vez que hacemos clic en esta función, este evento de click va a crear un nuevo número aleatorio, crear una nueva URL aleatoria. Y va a afectar esa URL y luego establecer esos datos para nosotros. Y cada vez que se establecen esos datos, nuestra página se actualiza automáticamente. Entonces sigamos adelante y echemos un vistazo a este personaje aleatorio de refrescar. Uno es Ben. Y cada vez que hago clic en esto, se pone un nuevo personaje. Entonces ahora en realidad tenemos esto en marcha. Ahora todavía tenemos algunas cosas con las que trabajar, como la de la película, vale. Si hay múltiples películas, encontremos una que tenga múltiples películas. Aquí tienes una buena. C3po está en cada película que tienen en su base de datos. Esta es una cadena larga. Lo que queremos hacer es realmente mostrar esto como tal vez un enlace y convertir esto en un enlace también. Entonces sigamos adelante y en primer lugar, en la siguiente lección, vamos a crear aquí el enlace. Te mostraré cómo hacer eso. Y luego en la lección después de eso, vamos a seguir adelante y convertir esto en múltiples puntos de bala. 19. Crear enlaces desde el texto en React: De acuerdo, sigamos adelante y link de phi son mundos home o home world es data dot home world y eso es una URL. Y cuando aparece aquí, dice mundo hogar y luego solo una URL aquí. Entonces vamos, sigamos adelante y en realidad cortemos esto. Y lo que vamos a hacer es crear un enlace. Este va a ser un video realmente, muy corto. Así que acabo de pegar eso ahí dentro. Este es un enlace regular. Y miraría esa multa compilada. Lo único raro aquí es que HREF no tiene apóstrofes a su alrededor. Estamos usando JavaScript dentro de ella. Entonces estamos diciendo, oye, reacciona cuando compilas este corsé rizado, esto va a ser JavaScript aquí, así que asegúrate de saber qué hacer. Ah, por cierto, estamos cerrando ese JavaScript, el resto va a ser HTML. Y detrás de bambalinas, eso funciona mucha lógica y entender lo que tiene que hacer. Entonces cuando me refresque aquí, vamos a ver que este es un ahora es difícil de leer enlace, pero en realidad es un enlace. Y si hago clic en esto, esto me lleva al planeta 42. Haroun Cal, supongo. Oh, lo siento. Si eres un gran fan de Star Wars, soy una estrella bastante grande estuvo bien, pero no sé navegar los nombres. Entonces lo siento si masacré eso. Pero me trajo a mace Windows hogar mundo. Y de nuevo, todo lo que hicimos ahí fue que dijimos HREF es igual para abrir y cerrar esas llaves rizadas, luego poner tu JavaScript dentro de ella. Eso es todo lo que teníamos que hacer en la siguiente lección. Adelante y trabajemos en una especie de enlace desafiando estas películas. Pero tenemos que aprender a recorrer algunos de estos primero, y esto va a ser una lección más grande. Así que asegúrate de tener esto listo y funcionando y cuando estés listo, pasemos a la siguiente lección donde aprendimos cómo recorrer las cosas en nuestro HTML interno o js X más bien. 20. Cómo bucle a través de arreglos en React: De acuerdo, pasemos por todas las películas. Sabemos que las películas van a ser una matriz, por lo que podemos recorrer esas. ¿ Y cómo hacemos un bucle a través de esos? En reaccionar? Bueno, reacciona usa una forma diferente de bucles. Por lo que probablemente estés familiarizado con un bucle for o un for each loop en este punto. Y yo también quiero deshacerme de eso, porque queremos que cada LI esté en cada película. Pero vamos a estar usando una nueva forma. En lugar de usar un bucle for o un para cada bucle, vamos a estar usando mapa. Entonces abrimos nuestra lógica aquí y decimos este punto estado, películas de punto mapa de puntos. Y esta es una función. Y esto va a tomar una película, así que va a recorrer cada elemento. Lo vamos a llamar película. Y podríamos regresar, mentirnos con la película ahí dentro. Adelante y veamos qué hace esto. Creemos uno nuevo aquí y miremos eso. Eso está funcionando para nosotros. Ahora, eso es realmente, realmente genial. Pero, ¿y si quisiéramos arrojar esto a un nuevo componente? Podríamos hacerlo muy, muy fácilmente. Y entonces lo que voy a hacer aquí es porque hay mucho código. Voy a hacer esto un poco más pequeño aquí. Y vamos a deshacernos de esto. Y simplemente vamos a llamar a esto películas. Y aquí arriba en nuestra función de render por encima de nuestra declaración de retorno, porque nunca se ejecuta nada debajo de una declaración de retorno, necesita estar por encima de nuestro retorno. Guárdalo. Y podemos decir que las películas const es igual a este estado de punto, las películas de punto mapa. ¿ Y qué podemos mapear aquí? En primer lugar, podemos mapear el nombre de la película en sí o la URL de la película. Entonces llamemos a esta URL. Y también podemos darle un índice. Vamos a necesitar esto en tan solo un segundo y te voy a mostrar por qué. Y entonces en lugar de decir como LI algo más bien, que eso no hacía lo que yo quería que hiciera. En lugar de decir algo más bien así y escribir js X aquí o HTML más bien, podemos escribir dos js X. Así que podríamos devolver la película Item Row, que aún no existe, pero podríamos hacerla existir. Y esto me está dando sintaxis divertida destacando y porque me faltaba esa flecha ahí dentro. Por lo que ahora tenemos este nuevo componente. Todavía no hemos creado este componente. Tenemos que ir y crear este componente. Ahora esto va a ser un componentes bastante simples. Entonces sigamos adelante y digamos película de clase, Item, Row extiende react.com, render. Y regresamos, regresemos múltiples líneas. Por lo que usamos apertura, cierre, paréntesis. Vamos a devolver un LI cada vez. Va a haber un enlace que va a algún lado. Todavía no sabemos qué es eso. Y va a haber algún texto. Y en tan solo un segundo vamos a pasar en algunas propiedades que podemos poner dinámicamente algunos datos dentro de nuestra fila de ítems de película. Entonces bajemos y busquemos tu película Item Row, film Item Row. Y todo esto va a hacer es tirar cada película a un concepto llamado películas, que luego podemos poner dentro de aquí. Adelante y probemos esto y ¿Recibimos un error? El atributo href requiere un valor válido. ¿ De acuerdo? Ese fue mi error. Valor válido. Entonces digamos que no vayamos a ninguna parte. HTML de puntos. Ahí vamos. No más quejas. K, vamos a refrescarnos. Y puedes ver aquí dentro dice algo de texto, algún texto y esa URL, si miraras abajo a la izquierda, dice no ir a ninguna parte. Ahora lo interesante de esto es que si hago esta consola un poco más pequeña aquí podemos leer este error. Dice que cada niño de una lista debe tener un puntal clave único. Si alguna vez ves esto, lo que tienes que hacer es pasar en un prop. Y lo que hacemos aquí, porque cada componente en React necesita ser, para más o menos, necesita ser único. Y así pasamos en una llave para que sea único. Y vamos a pasar en eso. Yo, sigamos adelante y guardemos eso. Refrescar. Ya no obtenemos ese error. Y sigamos adelante y sustituyamos este texto por la URL y esa URL por la URL. Entonces vamos a pasarle otra propiedad aquí llamada URL es igual a URL y eso apenas viene de aquí. Entonces lo que esto está haciendo esencialmente es, es bucear a través de todas nuestras películas. Para cada película, va a mapear esa URL y luego el índice en esto básicamente un bucle for. Por cada película. Después va a devolver un nuevo componente que tiene una clave única ahí dentro. Entonces va a ser 0123, etcétera, etcétera , con un apuntalamiento de URL también. Ahora lo bueno de eso es que no tenemos que escribir múltiples componentes. Simplemente podemos poner el apuntalamiento aquí. Podemos decir este punto props dot dot URL. Y eso lo estoy sacando del punto punto-punto. Yo estoy sacando eso de donde estoy? Cerremos algo de esto para arriba. aquí estoy obteniendo la URL. Entonces eso es un utilaje. Por lo que este punto props dot URL no pertenece entre paréntesis porque eso es una cadena. Queremos que esto ejecute alguna lógica real detrás de bambalinas. Y pongamos ese mismo aquí. Este punto apoyos, dot URL, Guarda a nuestros compiladores que no hubo problemas. Vamos a refrescar nuestra página. A mí me gusta refrescar. Normalmente no tienes que refrescarte a menos que veas un error y no se actualiza automáticamente por ti. A mí me gusta refrescar esto como un viejo hábito y echar un vistazo a esto. Dice el cambio de películas API de punto dev por películas de API cinco, API filmes seis. Adelante y haga clic en este enlace. Api, películas seis, eso coincide aquí. Entonces ese es un enlace de aspecto apropiado. Es Venganza del episodio CIF ID es tres, y tiene todos estos personajes en tu, todos estos planetas, todas estas naves estelares, todos estos vehículos, todas estas especies tiene todo tipo de cosas ahí dentro. Entonces eso está funcionando para nosotros. Esencialmente lo que hicimos fue tomar una forma más larga de hacer esto. Este es un componente muy, muy sencillo. Y así probablemente no necesitábamos poner esto en un componente, pero sí lo hicimos. Lo ponemos en un nuevo componente que renderiza un aliado para cada película en la que se encuentra un personaje. Entonces dijimos, pasen esa URL como prop. Y como utilería se ve así. Pasamos esa URL en. Por lo que por cada película que la llamábamos URL, podríamos llamar fácilmente a esta película. Y esto va a funcionar exactamente de la misma manera. Esto no nos va a dar ningún error. Si hay cuatro películas, hay cuatro películas que lo van a almacenar en una constante, una variable constante llamada películas. Y luego accedemos a las películas aquí abajo. Ahora quiero que le des un tiro a esto. Ve por el camino difícil. No hagas de la manera fácil que te mostré en el primer minuto o 90 segundos más o menos. Prueba esto de la manera difícil porque así es React en producción. Como desarrollador profesional, vas a ver Components divididos en componentes diminutos, diminutos como este, o componentes más grandes que usan muchos otros componentes. Por lo que necesitas estar realmente familiarizado con cómo usar un componente. último, pero no menos importante, cada elemento de una lista. Cada elemento de una lista donde necesitas una clave y esa clave. Acabo de decir que esta clave va a ser i Así que si esta es la primera iteración, voy a ser 0, segunda iteración, 1, tercera iteración, Va a ser el número dos. Y eso sólo va a decir que cada uno de estos va a tener un valor clave diferente. Y eso sólo lo hace único para que reaccione tan agradable y feliz con eso y para que sepa manejar ese componente por el camino. En lugar de decir que cada componente es exactamente igual, Adelante y prueba eso. Si te quedas atascado, deja tu pregunta abajo abajo o siéntete libre de hacer tu pregunta. En el grupo de Facebook, aprendiendo a codificar. Cuando termines de eso, dirígete a la siguiente lección. Y te voy a dar un proyecto. 21. TU PROYECTO: Muy bien, bienvenidos a su proyecto final. Yo quiero que hagas algo diferente. Entonces tengo esta URL aquí, y fui a la equivocada. Whoops. Github.com slash, alias bab slash Star Wars dash API. Y aquí, si entra en API, puede entrar en Id. Y si entra en la identificación número uno, dice que es Luke Skywalker. Al igual que el swapping dot tiene Dev. La diferencia es que hay una imagen y puedes cargar esa imagen en tu aplicación. Entonces cuando al azar obtienes un personaje, en lugar de solo decir Sand Hill, muestra una foto de San Hill, o muestra una foto de cualquier otra persona que se muestre aquí. Ahora vas a necesitar cambiar la URL. Por lo que no puedes usar el swapping dot, dot, dot porque no soporta imágenes. Pero si utilizas esta URL aquí mismo, si solo haces clic en like ID, one dot JSON, te va a dar este personaje en particular. O si tu número aleatorio lo era. Y hay 88 personajes. Veamos quién se mantiene en plasma el número 88. Si eres número resultó ser un número aleatorio, 88, debería buscar esta URL. Entonces vas a querer asegurarte de que ocho sea un número dinámico, es un número aleatorio. Obtén esa URL, obtén el nombre. Y tal vez toda la moral, ¿Me gusta esto? Esto no es en realidad una URL, este es un nombre que me gusta eso, eso es un poco mejor. Consigue esa imagen. Y tal vez, tal vez conseguir sus especies o afiliaciones o algo así y poner eso en tu app también. Entonces básicamente, quiero que recrear lo que creamos en este curso o en este módulo. Y quiero que pongas una imagen aquí arriba. Vas a necesitar usar un poco el estado. Es posible que desee usar indicaciones. Vas a querer cambiar la URL de tu API y vas a querer cambiar el número aleatorio que estamos generando porque solo estamos generando hasta 8082, creo que lo fue. Esto soporta hasta el número 88. No olvides si alguna vez te atascas. Puedes hacer preguntas y el aprendizaje a codificar grupo de Facebook, ven únete a nosotros. Se trata de un grupo completamente gratuito. Puedes hacer cualquier pregunta sobre cualquier cosa relacionada con el desarrollo web. Se puede ver que aquí ya hay más de 65 mil socios. Siéntete libre de venir y unirte, hacer preguntas , obtener comentarios y ayudar a otras personas si quieres. Por lo general, puedes obtener una respuesta a los pocos minutos de que tu post sea aprobado, lo cual es realmente, realmente bonito. Es muy, muy rápido. Aquí hay mucha gente útil. último, pero no menos importante, mi nombre es Caleb Italian. Yo he sido tu maestro, garganta reacciona uno a uno. Espero que hayan disfrutado de este curso. Espero que esto fuera divertido y una divertida introducción a React JS. Si quieres seguirme, siempre puedes seguirme en todo tipo de lugares diferentes, pero Twitter es uno bueno. Siempre puedes seguirme en Instagram, o si quieres, puedes obtener consejos y trucos de codificación yendo a Instagram.com código slash para todos. Y obtienes buenos consejos y trucos como cómo trabajar con Django, cómo trabajar con decoradores de Python, cómo trabajar con React, etcétera, etcétera. Muchas gracias por tomar este curso. Agradezco mucho tu tiempo y espero verte en otro de mis cursos. O si estás en uno de mis cursos más grandes, espero verte en el siguiente módulo. Gracias de nuevo, y nos vemos por ahí. Adiós.