Construir tu primera aplicación de React en 75 minutos más o menos

1. ¿Qué es React?: Hola, aquí Maurice. Bienvenido a este curso de introducción o reaccionar. Entonces, ¿qué es reaccionar en cuanto a reaccionar? Página web dice. Reacted es una biblioteca de JavaScript para construirte para en caras. Por lo que con reaccionar, se pueden construir interfaces de usuario para aplicaciones Web. No hay aplicaciones nativas de shell usando una cosa llamada a reaccionar. Nativo. Simplemente vamos a mirar las aplicaciones web, así que vamos a usar reaccionar para construir una aplicación de arma. Tú. ¿ Por qué? Entonces, ¿quién más está usando reaccionar? Resulta que muchas empresas son primeras carpetas Facebook, lo que difícilmente debería sorprenderse porque cuando te sumerges en naufragado, aprenderás que Wrecked en realidad se desarrolla como un proyecto de código abierto, pero con el equipo central de Facebook sí mismo. Por lo que el sitio web de Facebook se desarrolla usando Rex. Pero resulta que el sitio web de Facebook no era el 1er 1 Cuando Facebook adquirió Instagram. El sitio web de Instagram fue en realidad el 1er 1 desarrollado con reaccionar, por lo que estaban liderando la espalda con nuestros muchos otros. Netflix, Airbnb, Twitter, ¿qué pasa? Y muchas otras grandes empresas están usando reaccionar para sus aplicaciones de armas, pero no solo grandes completos. Hay una larga, larga lista fuera de las aplicaciones construidas usando naufragados. Si quieres ver esta lista, puedes ir a la página web naufragada. Aquí está para reaccionar sitio web donde se puede obtener más información sobre reaccionar. Una de las cosas que puedes hacer es ir a buscar un árbol de propuestas. Ahora no recomiendo sumergirme en el propio código fuente de reaccionar. No es la más simple fuera de buena base para empezar, pero lo que puedes hacer es ir a la página wiki y el pelo ver lado eligiendo, destrozado. Y aquí se puede ver una larga, larga lista fuera de aplicaciones construidas con reaccionar todo el camino hasta el fondo. Ahora esto de ninguna manera está completo. Sus lotes fuera de mama público en sitios web probablemente públicos está bien construido con reacciones que no están en esta lista. He trabajado en bastantes aplicaciones de reacción, y no hay ninguna de ellas en realidad son públicas Taurel en aplicaciones de casa, algunas bastante grandes, pero no están en esta lista. Pero, ¿por qué no hacer pública tu solicitud y ponerla en un negocio también? Algo genial, ¿verdad? Entonces en esta clase, vamos a tener un pequeño proyecto de clase. Vamos a tomar este sitio, la base de datos de películas. Esto no se construye en realidad con reaccionar, pero eso no importa porque tienen esto realmente bonito a p I. Y usando eso un p I. Vamos a sacar la lista de las películas mejor valoradas en este momento. Por supuesto, esa lista cambia constantemente, pero vamos a construir nuestro propio frente de reacción y para mostrar esta lista está buscando ser exactamente la misma. ¿ Fue esto pero más de eso en otro video? Entonces únete a mí en el siguiente video, donde te contaré un poco más sobre quién soy, cómo me metí en el desarrollo donde vivo aan den. Podemos meternos en la carne fuera edificio reaccionan aplicaciones. Nos vemos ellos. 2. Introducción personal: hola inglés aquí. Bienvenido de nuevo a este curso de introducción o naufragado Así que antes te voy a contar todo sobre reaccionar Tiempo para un poco de introducción personal. Siempre es un poco agradable saber con que estamos hablando. Entonces estoy radicada en Holanda, Europa y Holanda es un país hermoso, sobre todo en primavera, con todos los tulipanes están fuera, Tenemos algunas playas encantadoras y, por supuesto, grandes molinos de viento. Y todas estas fotos fueron tomadas a menos de 20 kilómetros de donde vivo. Tan bonito lugar, creo que también estoy felizmente casada twits una esposa y un hijo. Pero probablemente no es por eso que estás escuchando este video. Entonces volvamos a chófer. He sido independiente. Entonces para desarrollador e instructor Shins 1995 De hecho, he estado desarrollando hasta ahora más que eso, y empecé camino, mucho atrás en uno de los primeros sea dejar de usar Turbo Pascal han estado haciendo desarrollos web desde que alrededor de 2000 por lo que casi 20 años también llevo siendo un profesional más valioso de Microsoft desde hace más de las décadas de ahora. También soy el altar fuera al boletín React, boletín semanal, con todo tipo de noticias sobre reaccionar y punteros a buenos artículos. Puedes suscribirte a ella para estar al día y leer todo sobre las noticias de reaccionar. Por lo que para suscribirse Goto Bit Perro Correa Última React newsletter. Asegúrate de que la capitalización sea correcta. Necesita coincidencia rellenando exactamente tu nombre y dirección de correo electrónico y recibirás el boletín todos los miércoles. Entonces ¿quieres ponerte en contacto conmigo? Puedes usar Twitter o correo electrónico o ir a través de mi página web. Y tuve que recomendarte que hagas porque realmente quiero saber de ti. Dime qué aprendiste en este curso y dime qué otras cosas quieres aprender reacciona a punto de reaccionar ecosistema o tal vez algo más de desarrollos Web. JavaScript view angler, Cuéntame al respecto y te puedo contar todo al respecto, pero solo avísame lo que quieres escuchar. Entonces únete a mí en el siguiente video cuando te explique todo sobre por qué debes aprender. Reacciona. Entonces nos vemos entonces 3. ¿Por qué aprende React: hola res aquí. Bienvenido de nuevo a este curso de introducción Viejo naufragado. En este video, vamos a hablar de por qué debes aprender reaccionar en primer lugar. Entonces reaccionar es la biblioteca JavaScript para construir interfaces de usuario. Pero podría decir lo mismo de un poco de otras bibliotecas o marcos como Angler View o incluso Jake cansado. Entonces, ¿por qué molestarse? Aprendió reaccionar? Bueno, es utilizado por muchas empresas. Fuera de curso. Es utilizado por Facebook. Crearon tras bata y uso por Instagram, el primer sitio web donde realmente fue utilizado. Pero también es utilizado por grandes empresas como Netflix, Airbnb, Twitter y muchas, muchas otras. Por lo que eres una buena empresa usando naufragado. Por lo que yo argumentaría que usando reaccionar, asegúrate de mejor programador. Por lo que algunos de para reaccionar ventajas. Bueno, tiene una gran comunidad que siempre es buena. Es pequeño y rápido. Bueno, ¿a quién no le gusta eso? Es estable, y hay una simple y predecible A p I. Otra gran característica, y puedes confiar en que es estable si la reacción cambia para reaccionar. AP I Ellos son los responsables de implementarlo en el abrigo de shorts de Facebook para que no quieran cambiar el AP. Yo sólo por el bien del cambio. Necesitan una buena razón. Apoya su renderización de supervisión, lo cual es genial. Si te preocupa la optimización del motor de la iglesia y los gustos, es de código abierto para que puedas llegar a la fuente e incluso contribuir si quieres. Y tiene un equipo dedicado para Facebook que están trabajando en ello, pero no solo trabajando en ello porque les gusta, sino que también se les paga para trabajar con tiempo completo. Pero también hay algunos comerciantes con reacciona y si su comercio de alguna nota podría realmente mirar punto en su punto de vista. Pero uno importante reaccionado es creado por Facebook para Facebook. Por lo que es impulsado por las necesidades de Facebook. Y si difieren mucho de tus necesidades, reaccionar podría no ser la elección perfecta. Pero para muchas aplicaciones, es genial. Otra cosa es marcar dentro de JavaScript. Redacción J Abrigo sexual en realidad es bastante bueno, pero no todo el mundo está de acuerdo con ello. Hay algunas personas a las que no les gusta eso. Quiero separación fuera del marcado de JavaScript. Eso está bien. Si eso es lo tuyo, reacciona Probablemente nota para ti. Los resultados se ejecutan preocupación pulgar, la forma en que reacciona es tan rápida es comparando algunas cosas, lo que significa que mantiene algunas cosas adicionales en la memoria, que, por supuesto, es grande sobre la presión de la memoria. No es mucho, sólo un poco, pero eso podría ser un poco demasiado para ti. Otra cosa. Reactores. No muy obstinado otra vez, Te podría gustar que tal vez no. El problema podría ser que quieres mucha orientación, y reaccionar no da combustible esa ciencia. Está bastante abierto. Tú decides cómo quieres resolver los problemas y en realidad no les importa. Te lo dejan a ti. A mí me gusta que mucha otra gente así. Pero puede que no sea para ti. Sólo ten eso en cuenta. Por lo que Reactores Álamo. Esto es para conseguir una propuesta para naufragado, y se puede ver que hay más de 88,000 estrellas. Entonces, ¿cómo se compara eso con algunos fuera de las competencias? Bueno, aquí está Angler cinco marco para sucesor de la ira popular en marco. Es bastante popular, pero solo tiene 33 mil estrellas. Ahora, 33 mil estrellas no es nada para avergonzarse. Eso es bastante bueno, pero no está ni cerca tanto como reaccionarnos. Entonces si eres otro popular tú. I biblioteca. Tiene 83,000 estrellas, así que es casi s popular como reactiva. Levántate millones. Entonces, ¿qué tal contar las descargas? Porque hay mucho de donde se puede obtener popularidad. Por lo que aquí está a la página del NPM para Wrecked. Se podía ver en los insights correctos que el mes pasado hubo más de ocho millones de descargas . Entonces, ¿cómo se compara eso con la competencia? Bueno, si nos fijamos en el canciller en este caso, hemos echado un vistazo a la biblioteca core de los peces, que siempre se descarga. Cuando descargas Angler, es un coma de dos, seis mil millones de descargas el mes pasado. Nada de qué avergonzarse, pero nada cerca de qué reactor. Entonces, ¿qué tal pocos? Bueno, ahí aún más bajo. Casi 1.2 millones. Todavía bastante impresionante para biblioteca, pero nada cerca de tantas descargas como reactivas. Entonces sin embargo nos fijamos en estas cifras naufragó s bastante populares y productos de orina infusiones de empresa . Entonces nos vemos la próxima vez cuando te contaré todo sobre lo que aprenderás en este curso 4. Lo que aprenderás: hola recuerdos aquí. Bienvenido de nuevo a dis. Curso de introducción reaccionará en este video. Vamos a discutir brevemente lo que aprenderás. Por lo que el objetivo principal de este curso es enseñarte a empezar con naufragados. Te explicaré por qué reaccioné tan impresionante y por qué querrías construir aplicaciones Web reaccionarían en primer lugar. Estoy asumiendo que ya conoces javascript terrible. Pero como muchos fuera reaccionan, los desarrolladores usan más que estilo. JavaScript cubrirá algunos de los más que la sintaxis de script Java, que quizás no conozcas aún. Otra cosa importante es lo que no aprenderás. No vamos a ver todas las formas posibles de crear componentes o cosas así. Entonces dejaremos eso para otro curso. También estamos buscando usar muchas bibliotecas externas como reducción o reaccionar Writer, ¿lo harás? Algunos. Pero la mayor parte de ella sólo saldrá para otro curso. La mayoría no van a echar un vistazo a las pruebas unitarias. Y de hecho, voy a dejar fuera algunas mejores prácticas sólo para mantener las cosas simples. Entonces nos vemos en el próximo video cuando voy a explicar algunos fuera del moderno JavaScript en impuestos 5. Javascript moderno: Yo soy Alicia. Bienvenido de nuevo a esto. Curso de introducción reaccionará en este video del que voy a hablar desde fuera de las construcciones modernas de JavaScript que iban a usar. Entonces vamos a hablar de gafas, raid Aled map fete, funciones de flecha, plantillas, cuerdas. Constand llevó a definir variables importadoras y exportadoras de funcionalidad, reestructuración de objetos y las obras asiáticas kuwaitíes. Entonces vamos a sumergirnos justo en el abrigo. Entonces aquí, después de que los shorts arrastren a la gente a la gente de ahí dentro y la capa de cónsul para imprimirlos, si corro este abrigo, sólo va a imprimir esos objetos como este. Entonces vamos a crear una impresión de personas o clase para imprimir esos. Por lo que creamos constructor. Se necesita recogida de grúa de personas. seguridad está en propiedad sobre el objeto usando el stolt, y luego agregamos una función para imprimirlos. Ahora podemos construir una instancia fuera de los objetos de la impresora con las nuevas palabras clave. Una vez que tengamos el objeto, podemos llamar a la impresión desde Kill it, y la salida es exactamente la misma que antes. Ningún humano. No queremos imprimir cada objeto personal, pero solo el nombre podríamos mapear la colección de personas en solo las cadenas de nombre . Por lo que la función de mapa toma una función es parámetro y se llamará una vez por cada objeto en su A y devolveremos lo que queramos en la derecha más nueva. Entonces en este caso, el primer nombre que puedes ver solo estabas imprimiendo lo primero. Si todo lo que queremos es una función simple como esta, en realidad podemos usar una sintaxis más corta. Yuzhin Febrero funciones tan eliminadas para funcionar trabajos clave y comida. De hecho, están ahí. Y si todo lo que queremos es solo devolver algo que en realidad no necesitamos ir a bloquear y volcar ahí, sólo podemos poner la expresión ahí dentro, que serán los resultados. Por lo que recibirán los nombres que se imprimen. Qué humano Queremos un nombre completo. Podríamos usar la concatenación de bebidas para tomar el nombre del espacio. Y luego el apellido que funciona bien. Este es un gran lugar para ti. Plantillas de cadena. Creas plantillas de fuerza con el pito trasero. Entonces eso es normalmente en la parte superior izquierda del teclado en el interior, con dolar y tirantes rizados. Puedes poner expresiones ahí, Así que aquí tenemos plantilla de fuerza, que devuelve exactamente el mismo resultado. Estas incluso pueden ser líneas Bolte, así que puedo añadir unas cuantas líneas en su corrida las y verás la tira y el personaje que se imprimen para nueva línea. Entonces en este caso, realidad no queremos nuevas líneas. Esto está bien. Entonces otro bonito caso fuera de la quinta función Arrow es que preserva a esto. Trabajó en una función. Entonces para ver el comportamiento, eso es solo una gran pequeña función de ayudante que lo toma de referencia y lo metas. Y eso es oro en con la impresora que imprime me acuerdo ahora mismo que sólo imprime los nombres completos de la gente. Pero si lo llamamos así, en realidad devuelve un error porque dentro fuera de la función, ya no sabe del disco e funciona. Por lo que se queja de personas para que podamos resolver esto con la quinta función Arrow también. Entonces en este caso, la función de impresión mejor porque se define como una función de flecha emplumada. En realidad, recuerda, almacena a qué apunta esto cuando se va a llamar, y sí ayuda. Si yo al arma llena, no me veo tan bien así que en realidad imprime la salida. Se corrió bien, pero no vimos en la salida. Y ahí vemos nuevamente los enlaces completos. Por lo que esto se usa comúnmente para reaccionar cuando compramos manejadores de eventos del dedo del pie y los gustos. Entonces una cosa con esta impresora, nunca la vamos a cambiar. Por lo que dijo que lo lejano se utilizaría a Costa más nueva. Eso son espectáculos es que no vamos a cambiarlo. Podemos hacer lo mismo con la matriz de personas en la parte superior. El entrenador se comportará exactamente igual. Pero si intentas cambiar una de estas variables, en realidad iría al error de tiempo de ejecución porque nos reasignaron. Impresora. Otra agradable nueva capacidad es poder exportar e importar datos. Este caso tenemos el archivo de la gente y exporta cinco personas diferentes por lo que podemos importarlas aquí usando la declaración de importación importar gente de y en este caso, vamos a usar baño relativo con pensamientos Slash para indicarlo. Es una falta local y no algo importado de MPM, así que la cabra corre igual, pero eso sería príncipe cinco personas diferentes. Otro mecanismo de uso frecuente en estos días es la reestructuración de opiáceos que funciona tanto en la carrera como en los objetos pequeños. Entonces supongamos que queremos sacar a la primera persona de la matriz de personas y luego el nombre de esa primera persona e impreso para que pudiéramos hacer a manera tradicional así. Vemos tu nombre de pila fuera de la primera persona, Hilda, pero podemos usar una estructuración de radi para esto y la reestructuración de opiáceos en este caso porque nombre de la variable del dedo nombre era decir Mr Nombre de la propiedad. Puedo hacer eso con una sintaxis más corta con las llaves corren al nombre de la variable. También hará lo mismo con y la tarifa. Entonces al agregar los corchetes tiempo de ejecución diciendo: Toma el primer objeto del rayo, toma la propiedad de primer nombre de eso e imprímalo. O podría decir, pensar este nombre de la segunda persona en este caso, la primera persona se asignaría al guión bajo que tomamos el nombre de la segunda persona, y también pueden conseguir el otro personas de la matriz. Entonces, ya ves, imprimimos el nombre de IRS, y luego fuimos a perder a tres personas en la matriz de personas. Por lo que otra buena capacidad es un Shing Espere aquí. Tenemos una función sencilla que sería arrecifes cita Chuck Norris y el más grande para buscar un p i, que volvió a prometer. Por lo que el primer regreso a la promesa con objetos responsables. Entonces necesitamos llamar al Jaysh en redes funcionales, que devuelve una promesa con los datos. Y entonces necesitamos tener una captura de Shalom allá por si fuera en la tierra. Entonces reescribamos esto con el de Kuwait asiático. En este caso, vamos a llamar a la función de hecho y vamos a esperar los resultados, que es responder. Después de eso, vamos a llamar a la delegación de respuesta para que vuelva a obtener los datos. Es retornos por promesa. Entonces usamos ese peso y que podemos imprimir outs. Eso es broma. Entonces porque estamos usando un peso, tenemos que cambiar esta función un poco declarada como asíncrona de Shin con las palabras clave asiáticas . Y ya ves, funciona perfectamente divertido. Yo era humana Grecia en error aquí así que no devuelve ventajosa si acabamos de correr, se produce un error entre alguna vez ver allí, Así que necesitamos agregar algún error trattling. Podemos simplemente envolver todo en un intento normal. Atrapa al igual que abrigo de singleness, y ahí verá el error que se está imprimiendo. Arreglemos tu pozo para que en realidad recuperemos chistes ahora. Otra cosa bonita con esta sintaxis es que podemos usar declaraciones de control regulares que acabamos de usar. Si declaración aquí para ver si la respuesta estuvo bien y sólo entonces consigue un J. Shin e imprimir una broma. Todo esto es mucho más fácil de hacer que con los respaldos escolares prometidos en Texas. Entonces hagamos una recapitulación rápida. Usamos anteojos porque es familiar. Torrent de opiáceos. Está en impuestos. Nosotros lo sabemos. Para la mayoría de otros lenguajes de programación utilizado el nuevo trabajo clave para crear instancias. Dirigido problemas de mapa antiguos para convertir una matriz en y una nueva matriz fuera de una forma diferente. Cada elemento está mapeado, normalmente función de mapa. Las funciones de Fete Flecha son una buena manera de declarar esas funciones de mapeo u otra función. Para esa plantilla madre las cuerdas son manera fácil de componer cuerdas. Usando diferentes variables. Use constante let's para variables. Ghost no te dejará cambiarlo con bastante frecuencia. Lo que quieras. Usar exportaciones importantes para combinar diferentes funcionalidades, mucho mejor que usar un tradicional variables globales cuyo objeto de estructuración si solo quieres obtener algunas propiedades de? No, otra cosa común en reaccionar. Utilizan un fregadero aguardan con el fetch un P I o, para el caso, con cualquier prometido basado A P. Yo realmente agradable. Entonces ver en el siguiente video, cuando voy a explicar todo sobre el proyecto de clase. 6. El proyecto de clase: Yo soy re share. Bienvenido de nuevo al platillo. Curso de introducción reaccionará en este video. Vamos a echar un vistazo rápido al proyecto de paños que vamos a hacer para este curso. Entonces vamos a utilizar los datos de la película para ser para crear nuestra propia aplicación de película. Entonces se va a ver así. Tendremos un bonito diseño con diseño de materiales en cuanto a guía para nuestras diferentes películas. Y si haces click en el botón de aprender más, obtendremos más detalles. También podemos camisar como aquí. Estoy buscando Star Wars en la esperanza correcta fuera de la pantalla. Podrían ver los criterios de búsqueda. Quieres probar la aplicación aquí. Se trata de una versión en funcionamiento. Podemos dar click en este enlace y se pondrá en marcha. El host de la aplicación ahora buscará cómo alojar la aplicación allí también. Entonces aquí puedes ver los detalles del Buen Padrino, o yo podría buscar Star Wars. Echa un vistazo a una de las películas que hay ahí, así que nos vemos en el siguiente video. Empezaremos por crear un nuevo proyecto de reactor 7. Crear un nuevo proyecto de React: Hola, Maurice. Aquí. Bienvenido de nuevo a este curso de introducción de reaccionar. En este video, vamos a echar un vistazo a crear un nuevo proyecto de reaccionar. La mayoría de la gente inicia un nuevo reaccionar Proyectos por Yuzhin Crea React app Great React, Una utilidad de pis desarrollada por el equipo de Facebook y hace que sea realmente fácil empezar con el nuevo proyecto React. Eso es genial. React App es una aplicación de notas que necesitas para asegurarte de haber notado viejo dedo del pie tu máquina de desarrollo. Esto es puramente para fines de desarrollo y no se necesita en tiempo de ejecución en absoluto. Entonces, empecemos y scaffold nuestra aplicación. En primer lugar, asegúrate de que la nota esté instalada con la versión correcta, así que he podido anotar 8.9 punto uno, no retrasar solo sino lo suficientemente bueno. A continuación, necesitamos uso del dedo del pie, NPM toe un puesto, crear app reaccionar, y necesitamos especificar un escritorio G para bandera global. Ya lo he hecho, así que no lo voy a volver a hacer. Usando crea reaccionar arriba, debilitar andamio hacia fuera el nuevo proyecto Realmente simple. Simplemente ve a crear app de reaccionar. Especifique el nombre del proyecto para las películas en este caso y pulse enter. Creará una nueva carpeta con el nombre del proyecto, creará algunos archivos forzados, comenzará a instalar paquetes y eso va a llevar un poco de tiempo porque los paquetes de desarrollo son bastante grandes. Y una vez hecho eso, en realidad podemos navegar a la carpeta e iniciar la aplicación usando MPM. Inicia y hay aplicaciones. Se inicia en la amplia por felicitaciones. Acabas de tener tu primera aplicación de reacción ejecutándose en la ventana de la terminal. Se puede ver que eso es todo. Abre a porche local host puerto retiro y en el local me p dirección deporte tres miles. Entonces nos vemos siguiente video donde vamos a explorar el proyecto que acabamos de crear. 8. Explorar el proyecto: Hola, Marie Compartir. Bienvenido de nuevo a este curso de introducción de Wrecked. Entonces en este video, vamos a explorar el proyecto que creamos en el video perdido. ¿ Recuerdas el video donde usamos crear reaccionar arriba? Bueno, eso es lo que vamos a ver ahora. Entonces si no echáramos un vistazo al entrenador y luego lo editamos, vamos a necesitar algún tipo de editor. Voy a usar visuales para repartir abrigo. Puedes usarlo también, o puedes usar otro. Realmente no importa. Reaccionar realmente no le importa qué otro usar. Simplemente me gusta el código de estudio visual porque es realmente potente y fácil de usar. Entonces eso es una vida en el abrigo. Aquí vemos el proyecto generado en la parte superior. Se ve la carpeta pública o archivo de árbol miró fijamente FF Aiken Index le dijo a H Mill en el manifiesto. Jason. El punto índice html es a Marco para nuestra aplicación. Una línea de sello 28 un año vacío, def. Con ruta I D, que en realidad se utilizará para renderizar nuestra aplicación de reaccionar. No hay nada ahí todavía, pero habrá cuando se ejecute la aplicación. También hay un manifiesto. Jason fueron cuales es para armas progresivas, no hace falta que te preocupes por eso ahora. La parte principal de su aplicación está en la fuente. Completo o así aquí tenemos puntera indexada. No obstante Js, que es de dos y tres puntos a nuestra aplicación. Se podía ver el render revuelto reaccionar que renderizará a nuestra aplicación ese elemento ahí en ese diff de raíces que vimos antes. También está este trabajador de servicio de registro. Voy a comentar trabajadores de superficie son bastante impresionantes, pero el apoyo por diferentes navegadores sigue siendo así que qué buggy. Entonces por ahora es mejor no a la juventud. Y entonces ¿de dónde viene la app que viene de Will que vive en el ajedrez de manzana? Y aquí se podía ver un cierre extendiendo los componentes del reactor el cual tiene una función de render que devolvió algo que parece marca. Esto no es en realidad marcar. Esto es lo que llaman Js x Intacs. Y en el siguiente video, voy a explorar más sobre J seis. Por ahora, solo tinta sobre Hay marcado que se renderizará donde en nuestra aplicación se ejecuta. Por lo que hay algunas cosas más para echar un vistazo al resto no hay carpeta más joyas que contiene todo el abrigo que no notamos de NPM. La mayor parte se necesita ese tiempo de diseño solo en la parte inferior versus Jason paquistaní, que contiene las dependencias. Se podría ver reaccionando React Dome, tanto primero como 16.2, que es la versión actual. Por el momento, podría obtener una versión posterior. Esas son las dos dependencias necesarias para el tiempo de ejecución. También hay una dependencia colt React Scripts React, que se utiliza en tiempo de desarrollo. No es necesario para el tiempo de ejecución, pero se asegurará de que tengamos una protesta surfista de desarrollo, falsa o acumulada y cualquier otra cosa que se necesite a continuación. Se ven cuatro guiones diferentes. Se ve el script de inicio, cual utilicé video anterior para iniciar la aplicación. Hay un script de compilación que usará al final del curso para construir versión desplegada en tiempo de ejecución , y sus dos scripts prueban en eyectos, que vamos a ignorar. Por ahora. Cubriremos hace en otro curso en algún momento en el futuro. Si te interesa, así que eso es básicamente mayor es a ello. Si quieres leer más al respecto, confianza es leerme Si abro la vista previa, es un poco más legible. Ya ves Aquí hay mucha información sobre lo que crear racked en EU y lo que no hace, incluyendo cómo implementarlo. Vamos a ver la mayor parte de esto, pero al final del curso, vamos a desplegar la aplicación que construimos. Y vas a mostrar más fuera la información de este cayó por ahora, Si tú que En la radio. Adelante. Basta con abrirlo en modo de vista previa y su legible el marcado en el propio Schorsch, iss legible, pero no del todo tan legible s para previsualizar. Entonces ese es el proyecto. Y en el siguiente video, voy a explicar todo sobre dos j seis centavos de impuesto y cómo solíamos construir aplicaciones de reacción , Así que nos vemos ahí. 9. ¿Qué es JSX?: Entonces en esto soy carrera aquí. Bienvenido de nuevo a este curso de introducción. Entonces en este video, vamos a hablar de qué? Js exes. Por lo que Js X es sólo azúcar sintáctico. Simplemente sucede que se utiliza para cargar con reaccionar. Por lo que es una corteza importante a la que echar un vistazo. Por lo que los elementos reaccionan se crean usando una llamada para crear directamente la función del elemento. Bueno, eso es bastante fácil de escribir. Js X hace que ese índice Tulse solo un poco de convulsión. Aquí hay un ejemplo de dónde el componente miraría el tiempo de ejecución. Tenemos una app de clase que extiende los paños de componentes desde reaccionar y dentro de a función de render . Volvemos llamadas a reaccionar, crear elementos tema llamado a un diff allá y ness. Es una H one y una nueva lista de órdenes Elementos, que contiene una lista elementos fueron Truell Display Star Wars. Ahora no es difícil leer esto, pero tampoco es el Syntex más fácil . El JSX, que en realidad produce esto, es mucho más fácil de leer. Parece un Tchmil. Es casi HTML no del todo, pero lee de la misma manera, por lo que este sexo J se transpira engrasado en dos JavaScript anteriores. Entonces lo que es diferente entre J. Sexo y HTML regular. Bueno, es una visión incrustada de JavaScript. Por lo que todavía estamos dentro de un Kloss, que extiende componente, que tiene función Orender, que devuelve este Índice JSX. Se ven elementos def regulares H uno elementos con el fin de enumerar elemento de lista. Todos esos elementos parecen familiares. Hay un poco todo, sin embargo, donde normalmente se ven atributos de tela CSS. Aquí. Es un nombre de clase. Esto se debe a que la clase es la clave reservada funciona en JavaScript, por lo que Direct Team decidió usar el nombre de la clase en lugar de cerrar. También ves esos tirantes rizados con nueva fecha a la fecha String. Todo entre llaves es una expresión normal de JavaScript, por lo que es solo JavaScript con ejecutes y se renderizará. En este caso, sólo va a renderizar una fecha actual como cadena. Nada especial a sin restricciones se parecen a algunos fuera de los lenguajes de plantilla donde sólo se pueden hacer cosas muy específicas dentro de las expresiones. No, esto es solo JavaScript. Cualquier cosa que puedas hacer en JavaScript Goche. Entonces únete a mí en el siguiente video cuando te explique todo sobre balbucear, que también lo es . Solíamos transportar todo JSX a JavaScript regular por lo que 10. ¿Qué es Babel: Hola, Marie Compartir. Bienvenido de nuevo a esto. Curso de introducción reaccionará en este video. Vamos a hablar de Babel. Entonces, ¿qué hace balbucear Babble es compilador de JavaScript. Básicamente puede compilar JavaScript de estilo moderno, que no es entendido por los navegadores más antiguos en remolque. javascript de estilo antiguo, que cada navegador en la valla. Pero también puede obligar a reaccionar código Extell de persecución. Entonces echemos un vistazo y veamos esto en acción. ¿ Recuerdas el proyecto que creamos? Bueno, teníamos este componente de app con J s X, que se ve así. Copiemos esto y vayamos a la batalla. Entonces este es el sitio web de la Biblia que pudieron ver. Aquí dice Babel es compilador de JavaScript, su pelo de perros. Y es un sitio muy bueno en general. Pero una de las características aseadas es que podemos probarlo aquí para que en realidad pueda basar nuestro entrenador en el folleto aquí mismo. Se podía ver que lo obliga sobre la marcha y en el lado derecho vemos la salida. Entonces se ven las llamadas a reaccionar crear elementos igual que vimos en el video anterior. Entonces, ¿por qué muestro balbucear para hacer esto? Bueno, cuando creamos una aplicación usando, crear, crear, reaccionar a ella se le dice balbucear de desatado todo el conjunto de herramientas. Por lo que utiliza balbucear detrás de las escenas para transpirar todo. Todos están lejos de JavaScript en JavaScript. El folleto en el sentido, incluyendo los Jays X. Así que únete a mí siguiente video cuando te mostraré cómo empezar a crear componentes de reacción. 11. Crear un nuevo componente de React: Hola, Marie. Pura Bienvenido de nuevo a este curso de introducción de reaccionar. Entonces en este video, te voy a mostrar cómo crear un nuevo componente de reaccionar y usarlo. Entonces vamos a sumergirnos justo en el abrigo creado para que no quiera desordenar mi short fuller con todo. Entonces lo primero que hago es crear una carpeta de componentes toe, mantener todos mis componentes debajo de la fuente. Fuller, asegúrate de que esto esté debajo de fuente y ahí voy a crear una nueva caída. Se trata de películas, Así que voy a crear un carrito de películas. No hagas jazz aquí. Por lo que lo primero que debes hacer es importar la biblioteca de reaccionar de reacciona. Lo siguiente que tendrás que hacer es crear una nueva clase. Llamaremos a esta tarjeta de película, y esto se va a extender desde los componentes reactivos de clase base. Por lo que esta clase requiere la rendición de métodos equivocados, y devolverá alguna marca para arriba. En este caso, vamos a mantenerlo realmente simple. Sólo vamos a devolver el hecho de que esto es tarjeta de película. Por último, necesitamos exportar este cierre para poder usarlo en otro lugar. Eso es usar export default. Ahora todavía necesitamos usar a nuevos componentes. Entonces vamos al cofre de la aplicación arriba componentes. Deshacernos de todo el contenido ahí dentro. Nosotros donamos. Sólo se interpondrá en el camino. Ya no es necesario ir más despacio. Es que vamos a importar nuestro carrito de películas y vamos a renderizarlo s parte de nuestro componente. Por lo que al importar algo desde dentro de la aplicación, siempre asegúrese de usar una ruta relativa con importaciones tan divertidas. No slash componentes slash carro de película. Así que incluye los componentes de la tarjeta de película en rendición y ve que estamos renderizando un carro de películas ahora . cualquier momento que hagamos cambios a la tarjeta de película te lo actualizaré automáticamente. Entonces si cambió, hacer esto es el carro de la película a través. Aplicación se actualiza automáticamente en el navegador. Genial, correcto. Entonces nos vemos en el siguiente video, donde te explicaré cómo usar apoyos a datos pasados para un componente en el siguiente. Nos vemos entonces 12. Usar accesorios para pasar datos: Hola, Marie. Pura bienvenida de nuevo a este curso de introducción reaccionará. Entonces en este video, te voy a mostrar cómo usar apoyos a datos pasados de un componente a un componente hijo . Entonces empecemos el viernes en ir desde el componente de trampa de aquí y ya hemos creado una nueva variable llamada Star Wars, que sostiene objeto de película. Se tiene una idea de uno y el título de Star Wars. Ahora eso es lo que quiero pasar a la guardia de cine. Por lo que la tarjeta de película. Se trata de exhibir películas. Por lo que voy a usar su propiedad llamada Película. Y en eso voy a usar tirantes rizados del dedo del pie para jefar en la expresión fuera de Star Wars. Ahora, dentro de la tarjeta de película, quiero usar esos datos. Entonces en la parte superior de mi render, puedo extraer los de una propiedad sobre los objetos actuales llamados Props So Close una película es apoyos distales, que devuelve la película de los apoyos y luego dentro de mi día. Si realmente puedo usarlo, puedo mostrar el título. Entonces ahí, este eres tú. Yo muestro Star Wars. Si vuelvo a la app y cambié el título a algo, Els inicia naufragio, por instancia, te objeta. Enseguida me enfrío, ¿verdad? Entonces únete a mí siguiente video cuando te mostraré cómo puedes trabajar con una carrera fuera de datos hacia elementos repetidos . Nos vemos entonces. 13. Repetir los componentes: Aquí soy raza. Bienvenido de nuevo al curso de introducción del plato de reaccionar. Entonces en este video vamos a hablar de repetir componentes, así que vamos a sumergirnos justo en el abrigo. Entonces aquí está nuestro proyecto anterior con un ligero cambio en lugar de una sola película. Star Wars of Good, una colección de películas con Star Wars, Star Trek y Late Runner todavía renderizando la primera masa de película. Entonces no hay cambio ahí. Entonces, ¿cómo los renderizamos todos? Bueno, podríamos repetir el componente de la tarjeta de película, pero eso no es realmente útil, porque tendría que saber cuándo eso fondos cuántas películas eran. Sí, eso vamos a usar tu expresión de script Java. Vamos a usar esa función de mapa de rayos para mapear sobre el array de películas y convertirnos en una tarjeta de película para cada elemento de la matriz. Boss en la película The debug and Wer's Good to Go, excepto si abrimos la depuración aquí podría ver un error sobre una propiedad clave que falta. Entonces cada vez que fuimos elementos de repetición, necesitamos asegurarnos de que tenemos que mantener la propiedad, que es única. Entonces en este caso, tenemos la película I d. usaré esa es la clave, y nuestro error va. Entonces solo una recapitulación rápida vamos a solventar usando la función Rehmat. Conocíamos cada película en la colección a unos componentes de película, y dijimos para mantener la propiedad así reaccionar sabe qué película se asocia con qué puede teléfonos . Entonces nos vemos la próxima vez donde vamos a hablar de gestión estatal. 14. Gestión de estado: Yo soy Orisha. Bienvenido de nuevo a adiciones. Curso de reducción reaccionará en este video. Vamos a hablar de gestión estatal dentro de los componentes del reactor, así que vamos a sumergirnos justo en el abrigo. Entonces aquí está nuestro proyecto anterior acaba de cambiar entrada fuera de la colección de películas originales. Pero aparte de eso, es lo mismo. Entonces lo primero que necesitamos hacer es agregar una propiedad estatal a nuestros componentes y especificar el estado inicial ahí dentro. Entonces en este caso, el estado inicial solo va a estar en matriz vacía fuera de películas dentro de a función de render. Queremos usar esto por lo que usamospara objetar de estructuración sintaxis para llegar a películas desde el objeto de estado. Entonces ahora nuestros componentes se van a renderizar con un vacío o una de películas. Por lo que a continuación necesitamos actualizar de estados para mostrar esta lista de películas que solían componer esa función del ciclo de vida. Para eso es este disparador Justo después de que el componente haya sido montado después del primer render, utilizará para arrojar la función de estado en el componente a más. El estado del viernes modificando la etapa activará que el componente se vuelva a renderizar, por lo que se renderiza dos veces ahora una con una matriz vacía y unos con el filtro derecho, el componente sí montajes. La función del ciclo de vida también es una gran manera de iniciar un comportamiento de herpes zóster. Lo fingeremos por ahora con el tiempo establecido. Por lo que sólo cambié el estado con las películas después de unos segundos. Por lo que hemos visto página vacía, sin películas, y después de unos segundos están realmente cargadas. Así que vamos a hacer una breve recapitulación que necesitábamos agregar la propiedad de estado para hacer componentes que solíamos usar para componer la función de ciclo de vida dit Mount a Trigger Nation o este comportamiento utilizado para establecer la función de estado toe update estate, que va a componente a Ender trasero y dentro de a función de render. Leemos los datos del estado, así que únete a mí la próxima vez cuando te mostraré cómo cargar datos de una cuota de o ilusión en Escuela Ajax 15. Cargar datos con una llamada AJAX: Hola ahí, carrera aquí. Bienvenido de nuevo a esto. Curso de introducción reaccionará en este video. Vamos a echar un vistazo a cómo hacer unas escuelas de cubierta y datos de recorte bajo del sheriff para así que el sheriff para trabajar en el uso es la película D B. Es una gran página web, que enumera películas populares entre compañeros de cosas. Pero lo importante para nosotros es que tiene una buena A p I. Así que aquí están los sitios web reales. Esta es la lista estaban interesados en la cooperación de las películas, por lo que solo para crear una cuenta en este sitio. Y una vez que tengas en el país puedes ir a tu configuración y al interior de la configuración. Encontrarás tu llave A P I. Rodar hacia abajo los bits. Aquí, encontrarás la llave A P I. Tendrás que alimentar la versión de tres. Copia eso y ve al sitio de desarrolladores. Aquí podemos aprender todo sobre la documentación para todo tipo de cosas que podemos pedir. Pero en nuestro caso, nos interesan las películas. Por lo que las películas mejor valoradas en realidad podemos probar esa vida desde este sitio basado en tu clave P I y desplazarte hacia abajo obits y ejecutar para solicitar. Y aquí pudimos ver la respuesta con la lista de películas en los resultados. Propiedad. Vamos, Pete, es tu L. Y volvamos a nuestra solicitud. Si la aplicación en su lugar compadece películas a una lista fija, vamos a hacer una pregunta real de edad. Entonces estamos acostumbrados a buscar función y bien basados en el Euro, y usaremos ticks de espalda para poder inyectar fácilmente la clave A P I, que importé del FBI. Archivo Keitel Js. Tendrás que pagar seguro en una llave P I ahí dentro. Arreglaste porque la función fetch ization Guinness es retorno para una promesa. Tenemos que hacer de esta una función de envejecimiento, por lo que prefijo componente hizo montar con un fregadero. Ahora podemos usar ese peso en el fetch para esperar a que dé resultado la promesa. Esto realmente devolverá un objeto de respuesta que nos cuenta todo sobre la respuesta. Entonces una cosa en la función de educación s respuesta, que podemos usar para recuperar a los datos devuelve otra promesa. Entonces tendremos que volver a usar un peso este Día Jason que es hoy que acabamos de ver cuando probamos , es el euro en la página web. Por lo que tiene una propiedad de resultados la cual contiene películas reales. Entonces usaremos eso para el estado set. Ahora, si vuelves a la frente por y miras la replicación, podemos ver que en realidad enumera las películas. Nosotros sólo así en la película para ser bastante cool, ¿verdad? Fecha realmente fácil a baja por este camino. Entonces lo que eso sólo haría. Utilizamos para buscar función a solicitudes Datos Ajax creamos en una función de cantar y solíamos esperar a que las promesas se resolvieran y las que teníamos el día que solíamos volver a configurar la función de estado , como antes para volver a renderizar el componente con la lista de películas. Entonces, nos vemos siguiente video. Vamos a echar un vistazo rápido al diseño de materiales, que usará para hacer de nuestra aplicación un aspecto más bonito. 16. Diseño de materiales: Aquí soy raza. Un curso de reducción de colegiaturas de bienvenida de vuelta reaccionará en este video. Vamos a echar un vistazo a qué es el diseño de materiales y cómo puede agregarlo a su aplicación. Entonces, ¿qué este material diseño de materiales? Issa Lenguaje de diseño de Google. Se trata de un sistema unificado para combinar. El recurso es, y ustedes son componentes juntos para crear una agradable U. Y. Y. Aplicación. Viene con CSS y mucha orientación sobre cómo usarlo. Está realmente diseñado alrededor del papel cómo se usaría el papel de una manera más tradicional y crearía capas encima de las de las demás. Pero agrega mucho de interactividad. Como verás en el momento. Es muy interactivo, en parte por su patrimonio móvil. Una de las cosas que podría verse en sí mismo es los componentes de tarjeta en el componente de tarjeta es una manera realmente bonita de combinar una imagen que hará texto y tal vez botellas adicionales como reaccionar volver que eso usará eso para mostrar nuestras películas. Podríamos usar el diseño de materiales SS, pero en el mundo reaccionar, es más fácil usar el material tú y la forma más popular de crear aplicación de diseño de materiales con reaccionar. Consiste en un número off reaccionar componentes que puedes usar. Entonces echemos un vistazo a la página web. Entonces aquí está para material que wai sitio web. Como se puede ver de la versión Little Banner un punto venía. Si no ves eso, dijo a Banner, cuando veas este video, podría que ya estuviera fuera. Pero ahora mismo para ti, uno sigue en beta. También puedes decir aquí mismo puedes ver que la versión actual es 0.20. Ya que el punto sobre ginebra es bastante diferente. Tendría un recomiendo saltarse la versión 0.20 o lo que pudiera ser en su momento, e ir al punto sobre ginebra si eso no es definitivo todavía. Por lo que para dar click en el link, llegamos a la noticia Oh, versiones. Podríamos echar un vistazo a algunos de los componentes. Echemos un vistazo a un botón sencillo, y aquí se pueden ver botones planos se puede ver si me pasa el cursor sobre ellos con el ratón. Se encienden como que se iluminan. Además, si hago clic en ellos, se puede ver este efecto ondulado, que es un poco agradable. No soc diferentes botones aquí todavía el efecto ondulado aquí. El de los componentes de la tarjeta. Vamos a usar una tarjeta realmente sencilla. Verás, se parece un poco a una hoja de papel sobre la mesa con algo de texto sobre ella. O en este caso, una tarjeta con una imagen tienen son algún texto y unas cuantas botellas, que es algo así como lo que estaremos haciendo. El componente at bar otro componente estará utilizando mostró un título fuera de la aplicación opcionalmente con un menú de hamburguesas y tal vez otra opción de menú aquí a Logan. Tipo de agradable y fácil de usar. Por lo que si quieres empezar, primero necesitarás instalar material. Entonces vamos a copiar esto y vamos a la ventana de control en PlayStation. ¿ Lo robamos? Otra cosa tendrá que hacer es instalar el Roboto formado porque aquí el enlace a la vista de Google AP para instalarlo. Entonces vamos a copiar esto. Ir al editor abrir el índice gira a Mel y debajo del título de la APP Debilitar basado. Ahí está dentro. Se descargará al falso automáticamente desde el sitio ghoul FBI. Bueno, estamos aquí con mi justo va a cambiar el título porque nunca llegamos a hacer eso. Entonces llamemos a esto las mejores películas. Entonces, mientras tanto, el material diseñado se instaló y podríamos volver a ejecutar la aplicación, pero en realidad no habría nada que ver. Entonces, saltemos esa parte por ahora. Así que nos vemos la próxima vez cuando vamos a utilizar los componentes de at bar como parte superior de nuestra página y realmente empezar a usar los componentes diseñados del material. Nos vemos entonces. 17. Añadir la AppBar: Hola, Marie. Señor. Bienvenido de nuevo a sólo curso de introducción reaccionará. Entonces en este video, vamos a agregar el componente at bar desde el material diseñado hasta nuestra aplicación. Entonces esto no es en BAR. Es un bar sencillo. Tipo de barra de herramientas. Eso es todo. Entonces la parte superior de su aplicación y es un lugar central para algunas acciones, como cerrar sesión o buscar. Ya sabes, ir implementar No solo iban a implementar un realmente simple en la barra y poner el título de la aplicación en su tipo de para branding. Entonces vamos a sumergirnos en el abrigo. Aquí está su componente de aplicación, y en este momento todos nosotros es solo mostrar una lista de títulos de películas. Entonces hagámoslo un poco más bonito y sumémoslo en un bar aquí dentro. Si acude al material que y documentación. Podríamos ver el en Bar Andi. Si hacemos clic en estos botones, concedemos abrigo de fuerza real. Si ves que hay una serie de cosas que se están importando, así que vamos a copiar esas importaciones. Tienen un estilo realmente sencillo. Eso es copiar ese también, Entonces no tienen en componente bar. Esperemos todavía. Eso en realidad incluye eso. Si eso es pegar está en Onda agreguemos un cierre adicional y si y necesitamos hacer una cosa más cuando exportamos bien, que usar eso que estilos funciones de orden superior y anotar lo simple en la barra pero nuestros componentes. Entonces veamos cómo se ve esto. En realidad no necesitamos este camino cerca. , se preocupa Sin embargo, se preocupa. Eso y su agudo en el componente bar se ve blanco en chico siempre bastante así. En realidad cambiaron un pelo Golar predeterminado de lo que hubiera sido primario a default. Prefiero la primaria, por lo que destaca un poco más. Obtenemos este color azulado, la vista, nada que me gustaría cambiar ahora mismo si nos desplazamos. Esa barra en realidad se desplaza fuera de la vista. Entonces me fui establece la posición desde el dedo del pie estático otro valor, creo que encontrar esos valores aquí en la parte inferior. Concede ap una definición para un bar, podemos ir allí. Admitieron que hay dos valores diferentes para la posición. Tan fijo, absoluto pegajoso o estático, correcto, eso sería estático. Entonces hagámoslo fijo, que lo arreglarías en los dos primeros en los más pequeños. Ahora puedes ver si me desplaza esa aplicación de bar station. Lo único es que las mejores películas están detrás de ello, así que tendremos que añadir un poco de relleno ahí. Pero lo haremos cuando empecemos a crear tarjetas. Hay un tipo especial de barra de herramientas. Agrega Brendan a la aplicación, hace que sea más fácil ver qué aplicación o en ella agrega una bonita ubicación para acciones globales como buscar, mirar hacia fuera o navegar a otras partes fuera de la aplicación. Entonces nos vemos a tu lado para verte la próxima vez donde vamos a crear guardias de cine para sostener películas individuales más antiguas . 18. Crear una tarjeta de película: Hola, Murray está aquí. Bienvenido de nuevo a esto. Curso de introducción reaccionará en este video. Vamos a cambiar la lista simple de títulos de películas en autos de cine de aspecto bonito. Vamos a usar un diseño como este. Mostraré un poco de imagen, el título fuera de la película, la pequeña descripción y tendremos para Button, que aún no hará nada en este video. Eso haremos en el siguiente video, pero llevará a ver los detalles de la película. Así que vamos a sumergirnos ahora mismo en el abrigo. Así es como se ve nuestra aplicación, y lo primero es que tenemos la lista. Pero parte de la lista está en realidad detrás de Ah en BAR, Así que necesitamos hacer algo de espacio ahí para mostrar la lista de películas debajo del aparte. Entonces vamos a añadir algunas ve tiene que hacer eso, así que eso es mejor. Ahora, al menos vemos la primera película. Entonces lo siguiente que queremos agarrar una tarjeta de película, vamos a los lados del diseño del material y echemos un vistazo al abrigo fuente aquí mismo. Podemos ver el marcado requerido para este carrito, así que vamos a copiar que hay una gran limpieza. Tenemos que hacer. Este nombre de clase no existe, pero tendremos que hacer clases allí. Entonces vamos al carrito de cine de cierre. En realidad, esa es la imagen de la película Digits el carro de la película y aquí en vez de decir Lizard, pongamos el título de la película ahí para que veamos una lista fuera de los títulos de las películas. El diseño aún no es muy bonito. No tenemos una imagen que escupe. Eso es arreglar eso primero. Por lo que para poder mostrar la imagen necesitamos echar un vistazo a las devoluciones Jason Data. Entonces aquí tengo un ejemplo. A consider es una propiedad back drop off, que contiene ese nombre de archivo fuera de la imagen real, pero no es el beneficio completo que no llegaría a La ruta completa. Base de datos de películas es un AP diferente. Llamo a donde se puede obtener la configuración y se mostrará la base. Ural en la diferencia permitió tamaños y mediante la combinación de dosis para inducir el archivo de imagen de fondo real . Podemos conseguir el buff completo, y un telón de fondo se verá algo como esto. Entonces vamos a copiar esto. Todavía no vemos una imagen, pero eso se debe a que el predeterminado IMA tchite son los píxeles de héroe. ¿ Necesitamos especificar un específico? Yo lo haría Si le echaran un vistazo a esta imagen, podríamos ver un tres en el Dwight. El límite real altura es de 196 píxeles. Usemos eso suficiente Eliminado de las cotizaciones extra que no necesitaban Hay imágenes. Todavía no se ven muy bonitas, porque por defecto la tarjeta va a sacar todo el peso fuera de la pantalla, lo cual es un poco demasiado. Queremos que un auto sea de 300 píxeles blanco, así que agreguemos algunos deja de hacer eso. Eso es mejor. El viejo trailer pixeles. Sigue siendo una larga lista, así que vamos a cambiar eso. Para hacerlo, tenemos que decir a la lista fuera de las películas que no debería simplemente renderizar a las masas. Pero habias renderizado a un músico o flex envuelto y que tenemos un bonito establo de películas, y dependiendo del tamaño de pantalla, el número de películas aumentará o disminuirá. Pero, como en la pantalla pequeña sólo tendrá una sola lista. Pero en mi laptop conseguiremos unas listas o cuatro películas juntas. Bonito. Entonces cambiemos la descripción para que sea el campo correcto. Tenemos una bonita lista fuera de las películas, incluyendo el texto antiguo si lo superamos. Todavía no hemos conectado el botón aprender más, pero haremos esa siguiente lección tan materialmente. ¿ Por qué? Los carros son una gran manera de mostrar información como esta, ya sea artículos repetidos o individuales. Pero en este caso con buena lista repetitiva de películas, son geniales para agregar imágenes, botones de acción. Eso es lo que necesitaba Francia, como lo hicimos en esta ocasión. Entonces nos vemos el próximo año cuando vamos a echar un vistazo a esto jugando los detalles del movimiento en una ventana emergente . Nos vemos entonces. 19. Mostrar detalles de la película: hola recuerdos aquí. Bienvenido de nuevo a este curso de introducción de Wrecked En este video. Vamos a echar un vistazo a mostrar más detalles de la película, así que vamos a sumergirnos directamente en el abrigo. Entonces aquí están nuestros componentes de aplicación, y en este momento en el estado, sólo tenemos la lista de películas. Pero vamos a añadir la película selector a ella cuando hacemos clic en la película para mostrar más va a cambiar este estado selectivo del año de película. Entonces para hacerlo, necesitamos una función de película selecta que cambie a estado. Por lo que solíamos establecer función de estado para actualizar la película selectiva en el estado. Recuerda, nunca cambió el estado directamente, quien también necesita poder despejar su caparazón, agregará una película clara para volver a poner la película selectiva a no. Ahora tenemos que pasar esta película selecta a los componentes de las tarjetas de película para que pueda ser usted muestra para su. Entonces en la tarjeta de película, creamos una nueva función select movie, donde agarramos esto como película de los apoyos junto con la película que llamamos la película Select con esa película. Entonces en las acciones de la tarjeta, tenemos el botón y nosotros Adam Click manejador y llamamos a la película selecta sobre los componentes actuales ahí. Recuerda usar click propio con casing de camello. No, cuando hacemos clic para aprender más botón, el estado está realmente actualizado, pero eso es que no estamos revisando a los estados haciendo nada con él. Podemos ver eso Así que una buena manera de mostrarlo es usando el diálogo para que lo usemos. Formado. Yo miro del material Tú. ¿ Por qué? Entonces vamos a copiar el código a partir de ahí y crear una nueva película de componentes. Muere. Mira. Se basará todo el coach de fuentes ahí dentro, así que hay unas cuantas cosas que no necesitamos. En primer lugar, cambiemos el nombre a película Die. Mira, no necesitamos afirmar el mango. Haga clic en abrir manija de orden cerrado. Podemos deshacernos de esos Estado se maneja a nivel de aplicación. Por lo que en la Render Function Remort Movie, que se pasará en la que será la película actualmente seleccionada, también se han agarrado el mango cerca de la función, que pasará más adelante. Ahora el diálogo va a estar abierto si se seleccionó la película motivo. Por lo que utilizamos un operador de doble explosión para convertir un objeto o no en un verdadero o falso así que volvamos a los componentes de la APP e incluye esta película Die. Mira ahí dentro, lo importaremos y luego renderizaremos su con película seleccionada. También hay que asegurarse de pasar en la función de asa cerrada, en la que, donde despejamos la película, que también lo más cercano a morir. Mira otra vez. Por ahora. Si hacemos click aprenderá más, vemos un bonito look de die motile pop up. Si hacemos clic fuera de ella, vuelve a desaparecer. Entonces vamos a mostrar en realidad el título de la película. Si acabas de utilizar el título de la película como ISS, Hair realmente obtendrá un error de tiempo de ejecución. Esto se debe a que la película a veces no es tan película. El título sería DVF enjuagando una propiedad sobre el No object. Por lo que necesitamos hacer esto ligeramente diferente. Ella creará una variable de título y se establecerá por defecto para saber cuál es valets como una instancia componente reacciona , y sólo si la película Opie Act realmente está configurada en una película real se crearán los componentes del título . Yo usaría las llaves en impuesto para renderizar el título ahí para que ya sea no o die look title y yo nos renderizaría tu nombre o para ir archivado son dependiendo de qué pelicula real Ucat , Así podemos hacer lo mismo con el contenido, el pleno a conocer. Y si tenemos una película emplumada, renderizar componentes de contenido. Tampoco necesitas tanto fuera de las botellas. Entonces, solo tengamos un solo botón ahí, que se llama Cerrado y Curso un manejador cercano. Entonces vamos a mostrar algunos detalles más de la película que se pone la visión general de la película. Ese es el texto ahí. Y actualicemos estos campos de texto para mostrar la fecha de estreno de la película. No, vemos la descripción de la película y lanzamos eso, pero la fecha de estreno aún era indatable. Entonces hagamos que este campo de texto se desactive para que se pueda cambiar. Balas anuncios la imagen de película hinchada Visión general. Will ATS la película real, uh, imagen de jactancia. Asegúrate de importar unas clases correctas, y solo necesitamos Kark me, tus notas, tus notas, las otras partes fuera de la guardia, igual que antes necesitaremos algunos CDs tiene que realmente dar la imagen al tamaño correcto. Se actualiza la imagen para mostrar el póster en lugar del retroceso y darle un nombre de clase diferente porque tiene un tamaño diferente. Tenemos algunas reparaciones. CSS con el correcto con y altura, y aquí vemos el cartel para El Padrino. Entonces vamos a agregar algunos campos de texto más para mostrar más detalles sobre la película. No, solo fechas de estreno, sino también la popularidad y el voto promediando conteo. Recapitulación tan rápida. Utilizamos el estado de aplicación para rastrear la película seleccionada. Actualizamos el estado de la aplicación con la función callback. Pasamos a la tarjeta de película, y solíamos materialmente la clase Why Dialogue para mostrar los detalles de la película. Entonces únete a mí la próxima vez cuando echemos un vistazo a cómo buscar otras películas. 20. Busando películas: Aquí soy Aries. Bienvenido de nuevo a esto. Curso de introducción reaccionará en este video. Vamos a hablar de buscar otras películas, así que vamos a sumergirnos justo en el abrigo. Aquí está nuestra aplicación actual, y agregar campos de entrada de búsqueda a la parte superior derecha de la pantalla en la barra APP sería un buen lugar para comenzar. Entonces aquí está nuestro componente APP con el at Bar. Añadamos un formulario entradas después del título. Usaremos esto para nuestras camisas en bota. Y cuando sometemos la firma, queremos empezar el ing eclesiástico. Entonces agregaremos un manejador de envío conocido, um, haciendo Escuela Ajax desde ahí. Por lo que buscar es muy similar a cargar la parte superior derecha de las películas. Tendremos que utilizar el evento nuestro porque por defecto, HTML presentará la página y recargará la aplicación. Por lo que tenemos que evitar el comportamiento por defecto. También tienes que cambiarte un poco a tu L. En este caso, vamos a buscar. Es menos película. Tendremos que proporcionar el texto de las camisas. Entonces inyectemos que no tenemos en realidad la mitad que no puede entre sumado en un minuto. Entonces la búsqueda Texas va a cambiar, así que vamos a conseguir eso de los Estados, vamos a inicializar. Es como una cadena vacía en el estado, así que pongamos un campo de entrada en el formulario. No voy a pre preparado, así que no tienes que verme tipearlo. Verás su valor es la búsqueda, Tex. Y siempre que se actualice, llamará a un buscado, intercambiado. Entonces vamos a buscar texto de los estados y eso es implementar que buscaron intercambió oro de nuevo. Por lo que en este lugar, queremos cambiar para buscar siguiente en el estado en base al valor real fuera de la entrada. Por lo que el evento es real. Díganos qué entradas ISS utilizando la propiedad objetivo y que como valor, que es el valor real en los libros de texto. Por lo tanto, asegurémonos de incluir dos declaraciones de importación requeridas para la entrada y el adorno de importación . Entonces se están quedando puesto. Está justo detrás de las mejores películas en la nota lateral izquierda en el lado derecho todavía, Sin embargo, si intentamos cortocircuito, obtenemos un error en el París hice un error en el euro. Olvidé incluir el parámetro queria, ya sabes, con el parámetro de consulta ahí funciona mejor, y podría buscar películas de Star Wars, así que pasemos a los libros de la iglesia a la izquierda. Por lo que al establecer el dedo uno de la propiedad Flex en el título, ocupará todo el espacio disponible, moviendo las entradas a la derecha. Eso es mejor rico a la derecha. También queremos agregar un poco de un adorno para asegurarnos de que esté claro que esta servidulidad de entrada para la búsqueda. Entonces vamos a añadir que en el lapso quién usará una Lupa Aiken Mucho mejor ahora. Si buscas Star Trek, veremos las películas más antiguas de Star Trek. Entonces hagamos una breve recapitulación. Solíamos controlar componentes de entrada para terminar para un texto de búsqueda. Utilizamos un Formulario dos envía la búsqueda Texano haciendo Escuela Ajax, y cambiamos las películas en el estado con los resultados fuera del objetivo de búsqueda. Entonces nos vemos siguiente movimiento, todos realmente desplegarán nuestra aplicación a Internet 21. Despliegue la aplicación: Yo soy preocupaciones aquí. Bienvenido de nuevo a las decisiones reducción núcleo de naufragado. En este video, vamos a desplegar la aplicación que construimos al arma. Entonces aquí estoy en la página de MPM para Crear Wrecked Up, y si hace clic en las guías de usuario desplácese un poco hacia abajo. Podrías ver opciones para la implementación, y una realmente bonita está usando Now. Ahora vemos el servicio desde los sitios, y hace que sea realmente fácil implementar una aplicación de reacción o muchas otras aplicaciones, para el caso de forma gratuita. Por lo que este es el sitio real. Entonces vamos a desplegar nuestra aplicación aquí estoy en los problemas de comando en nuestra aplicación. El primero que tenemos que hacer es crear para liberar la aplicación de oferta de versión. Usando MPM Run Built creará una versión de producción fuera de la aplicación este Warren Foster , por lo que es muy recomendable. Por lo que esto ha creado la carpeta construida, que contiene dos aplicaciones desplegables. Bueno, vamos a instalar ahora es un global se robó para que podamos usarlo para mi en cualquier lugar. Por lo que NPM instale ahora a medio plazo menos G para global, lo cual es bastante falso, por lo que ahora está instalado ahora podría implementar la aplicación usando ahora con la opción de nombre dash dash . De lo contrario, tomará la carpeta actual, que se llama Builds, y al agregar ese escombro público, no nos va a preguntar si debería ser público divertido liberar versión ahora. Y eso siempre será público. No obstante, recibo un error. aumento es el tamaño máximo para una aplicación gratuita es de un megabytes e incluso hay aplicación no es muy grande. Contiene una falta de mapa en el mapa. El otoño es relativamente grande, así que eliminemos que Andi re trate de desplegar. Por lo que ahora nuestro despliegue fue a lucir mejor. Podríamos ver el tu EL en la consola si Akopian ritmo a tu pozo en el pincel o podemos ver nuestra aplicación alojada. Entonces aquí se está ejecutando en Internet, solo disfuncional como era antes de poder ver los detalles de la película que conservamos para las películas . Genial, así que vamos a asegurarnos de que esto se pueda hacer más fácilmente. Podemos hacer mostrar agregando un nuevo comando en la sección de script. En nuestra práctica alegación, tendrás que conocer comando ahí, que primero se ejecutará y construirá, luego CD en el directorio de facturas. Entonces eliminaremos ese mapa caída y ahora generalmente demasiado fría ira habitación para aquello que ya se han instalado lo que lo hará en cada OS real os que meses difiere entre Mac OS , Windows y Lennox. Quiero que algunos archivos de mapa eliminen sus llamadas ahora con el nombre correcto para desplegarlo. Ahora podemos desplegar la aplicación simplemente haciendo ejecutar NPM ahora, y emitirá todos los dos meses requeridos. ¿ Quién se atreve? Es Euro en realidad es lo mismo en este caso porque la aplicación no ha cambiado. Ama de nuevo la aplicación para asegurarte. Sí, todo sigue completamente funcional. Genial. Y aún busca películas. Genial. Por lo que no se necesita mucho para hospedar para reaccionar aplicación. En realidad podría necesitar más la aplicación, pero en esto va nuestro día que viene de nadie. Aplicación usando sitio hace que sea realmente fácil implementar la aplicación. Entonces nos vemos en el siguiente y último video. Cuándo hará una rápida visión general de todo lo que hemos cubierto en este curso 22. Resumen: Yo soy Ray share. Bienvenido de nuevo a esto. Curso de introducción reaccionará. Este video acaba de perder. Y en este video, sólo vamos a tener un resumen rápido de todo lo que has aprendido, que es bastante. Entonces empezamos por echar un vistazo a lo que es reaccionar y por qué debes aprenderlo. Después echamos un vistazo a la creación de una nueva aplicación de reaccionar usando create react app. También tenemos que mirar el impuesto de acción de Jays para crear componentes naufragados. Nos fijamos en rendirse componentes de reacción de niños individuales o múltiples. Tenemos apoyos para pasar día abajo a componentes infantiles. Usted dice que logre quedarse ahí para su aplicación. Solíamos buscar un P I para hacer escuelas Ajax para recuperar datos del servidor. Se utilizó un partido de búsqueda, componentes materialmente y en nuestro caso para que la aplicación se viera bonita. Y desplegamos nuestra aplicación en Xitong ahora, lo cual fue realmente fácil. Entonces ahora es tu turno. Haz algo genial con reaccionar y avísame lo que construiste. Siempre me interesa ver qué hace la gente con reaccionar. Por lo que gracias por asistir a anotar. Espero que fuera por lo general para ti. Y avísame qué más te gustaría aprender sobre reaccionar o reaccionar temas relacionados para que pueda crear otros cursos alrededor de esas materias por.