ReactJS y Redux: crea 4 aplicaciones web [1/4]

1. Introducción del curso: bienvenido a un excelente recurso sobre cómo aprender reacción. Sí y Redox. Enhorabuena. Aprender reaccionar te pondrá un paso por delante porque es una de las habilidades más demandadas y pagadas en la industria del software. Diseñé este curso con un objetivo primordial para que hayas reaccionado en un Redux en tu currículum y preparado para construir tus propios proyectos de reaccionar desde cero. En este curso, construirás cuatro aplicaciones. Uno te pondrá en marcha con los principios de reaccionar e introducir la sintaxis JavaScript es six. El siguiente va a usar un P I y mostrar que tenía un trato con solicitudes web En reaccionar. En tercer lugar, se aprende Redux. Construye una aplicación que también almacena información localmente en el navegador. Y por último, lo mejor de todo, tendremos una app Redox que tiene educación completa para inscribir también a los usuarios. A medida que llegó una base de datos, voy a explicar cada nuevo concepto comprobando y midiendo con precisión cada idea fresca. De esa manera se tiene una comprensión minuciosa del abrigo y la ingeniería. Además, te dejaré entrar en un secreto ahora mismo. Redux puede sentirse complicado al principio, pero se puede hervir hasta tres pasos básicos. Muy bien, si por fin quieres desbloquear la clave para reaccionar y redux y agregarlas a tu conjunto de habilidades o solo quieres pincharte en tus chuletas de desarrollo Web, entonces este curso es perfecto para ti. Entonces, ¿a qué esperas? Empecemos a codificar. 2. Introducción a React: Tomemos un momento para presentarnos. Reaccionar ES seis y Redux. Si llegaste tan lejos, probablemente tengas un sentido de que reaccionar es una de las habilidades de ingeniería de software más populares y de demanda de hoy en día. De hecho, reaccionar es el quinto proyecto más inicio de todos los tiempos en Get Hub, y sólo seguirá creciendo en Popular. Construida por Facebook y apoyada por Instagram y otros desarrolladores, esta biblioteca JavaScript aparece en tantas plataformas. Estos incluyen Netflix, Airbnb, sitio web de Wal Mart y aún más. Ahora reaccionar corre en JavaScript. Pero la mayor parte del código de reacción que encuentres será un E a six, la versión seis de JavaScript, que salió en junio de 2015. Ahora algunos de este código Concil se ven nuevos para las personas que incluso tienen experiencia en guión laboral. Entonces no te preocupes. A medida que surge cada nueva sintaxis o concepto de ES six, me aseguro de explicar exactamente qué está pasando a través de este curso. Ahora tomemos un momento para hablar. Redox Reacts nos permite construir aplicaciones que escalan. Tiene una forma de gestionar los datos para asegurarnos de que nuestra ingeniería se comporte de manera consistente, y de una manera que podamos probar fácilmente ahora. Aprender Redux puede sentir como tratar de absorber muchos conceptos nuevos a la vez es un montón de terminología nueva. Pero lo esencial puede bajar a tres sencillos pasos, y lo compartiré con ustedes a medida que construimos aplicaciones en este curso, en general reaccionar es seis y relajarse, hacer una gran combinación y permitir a un ingenieros de software hacer impresionante Web aplicaciones. Reaccionar tiene un futuro tan prometedor, y no hay mejor momento que ahora para aprender. Reacciona. Nosotros en la comunidad de desarrolladores no podemos esperar a ver hasta dónde va esta biblioteca de JavaScript. 3. Instalación de React y herramientas: usaremos un pequeño número de herramientas para ayudarnos con el desarrollo de reaccionar. En primer lugar, debes asegurarte de que no tengas Js descargados en tus sistemas. Para los usuarios de Mac, basta con ir a conocer jazz dot org y encontrar el HomeLink en casa Descargar Nota versión 6.9 punto cuatro, la recomendada para la mayoría de los usuarios o la descarga recomendada que está actualmente en. No Js. Ahora bien, si no utilizas un maxus de no preocuparse, tuvo que descargar y encontrar el enlace relevante para tu plataforma. Ya sea que necesites el instalador de Windows o la nota del instalador de límites lo tiene para ti. Una vez que un paquete haya terminado de descargar, ábrelo. Deberá encontrar una serie de pasos para que no se instale completamente en su computadora. Continuar por la introducción continuó a la licencia. Adelante y acepta todo, luego adelante y escribe tu contraseña. Una vez que hayas terminado, debes ver que no se instaló ningún GS en una ubicación determinada de tu computadora. Por lo general es el usuario local slash VIN, que es el global en el entorno PATH, acaba de abrir la terminal y una manera fácil de abrir la terminal en un sistema Mac es espacio de comandos de prensa, que abre un foco de atención futuro e ir y presionar TRM. Y luego tan pronto como veas el icono terminal pop up press, enter y boom, se lanza la terminal. Para aquellos de ustedes nuevos en la terminal, básicamente se podría pensar en ello como una versión tipo de finder o la carpeta explore en su sistema. Podemos navegar por carpetas o directorios escribiendo CD, que significa directorio de cambio, por lo que cambiaré mi directorio de codificación. Ahora navegaré a otro directorio, uno llamado Directorio de pruebas. Entonces escribiré L s, que significa una lista, y luego podrás ver todos los contenidos que actualmente están ahí dentro, tal y como lo harías con el buscador. Podía ver archivos y otras carpetas también. Así que adelante y presiona claro para borrar todos esos contenidos tipo CD esta noche para volver al directorio de inicio. Despejado una vez más. Y ahora queremos comprobar si nota realmente instalada correctamente. Escribe nota dash V con un espacio entre y luego deberías ver tu número de versión, que para mí es 6.9 punto cuatro. La versión actual y luego también escriba NP envidia. Deberías ver una versión superior a tres. Un NPM cambia automáticamente de ningún NPM, principalmente instala los modelos son paquetes dentro de nota. Utilizamos mucho NPM en este curso, por lo que seguirás aprendiendo todo sobre lo siguiente. Insultemos nuestra primera herramienta dentro de PN. Vuelve a tu navegador, ve a Google y busca. Crear reactor. Adelante y encuentra el primer link get hub que aparece y deberías encontrar un proyecto que se vea así. Create react App es perfecta para estudiantes que acaban de empezar con reaccionar porque nos permite simplemente enfocarnos en el código reaccionar, Ejecutar nuestros proyectos de inmediato y ver cualquier error. Remake refleja automáticamente en nuestras aplicaciones en ejecución a medida que construimos en el proceso. Así que desplázate hacia abajo y encontraremos sus instrucciones de instalación justo por aquí. Te das cuenta de que para instalar, crear reaccionar arriba, simplemente podemos usar NPM, por lo que NPM install g create react at head back to your terminal y ejecutaremos ese comando. O ahora mismo hagamos NPM install G, que significa global create. Reacciona a impresionante. Tu salida debería verse así en la terminal. Entonces antes de que realmente creemos nuestra primera aplicación tendrá que insultar a un editor de código, y si ya tienes uno, puedes saltarte el siguiente video. Pero si quieres instalar uno nuevo o tienes que instalar tu 1er 1 como Adam, por ejemplo o sublime, el siguiente video podría valer tu tiempo. 4. Cómo conseguir un editor de código: la herramienta final necesitará para reaccionar El desarrollo es un editor de código. The Web tiene una tonelada de editores de código por ahí para que los encuentres, pero algunos de los más populares y dos de mis favoritos personales incluyen Adam, que obtienen ayuda, abiertamente soporta y sublime, que muchos otros desarrolladores usan ahora. Utilizo ambos editores por diferentes razones, pero principalmente me desarrollé en reaccionar con eso. Ahora puedes añadirlo en cualquier editor que te guste. Incluso puedes usar texto, editar o código ex. Pero recomiendo encarecidamente ya sea Adam o sublime por su formateo, lo que ayuda a hacer la vida mucho más fácil como ingenieros de software. No obstante, descargar Adam viene con una característica muy ordenada. Crea automáticamente ensamblar en tu sistema, lo que te permite abrir aplicaciones desde el terminal por lo que abrir proyectos se vuelve tan rápido como escribir. Adam dot dentro de una corriente directamente o directorio de prueba de Adam, por ejemplo, salió de uno para abrir. Ahora podemos abrir proyecto fácilmente en el editor de código arrastrando los iconos de archivos o carpetas al icono del editor. Al igual que eso. Pero lanzar un proyecto en un editor usando el terminal se siente como magia de ingeniería, así que por si acaso quieres hacerlo con Adam, y aún no está funcionando ni sublime. Incluso déjame mostrarte cómo enganchar tu configuración de terminal para hacer solo auto. Entonces. Como dije, Adam debería crear automáticamente ese hermano para ti. Vamos a probarlo. Si realmente pudiéramos abrir Adam primero con Terminal ve a tu carpeta de aplicaciones, encuentra la App Adam, ve a su contenido. Es recurso es encontrar la carpeta APP y luego adam dot shh. Entonces sigue adelante y abre el directorio actual que quieras. Ahora, como pueden ver, Adam lanza para nosotros. Entonces lo que vamos a hacer es crear un terminal de honor simbólico que nos permita ejecutar este comando con un comando muy acortado siempre que quieras abrir en. Y lo podrías hacer escribiendo esta cosa tan larga cada vez. Pero lo similar acorta ese comando de manera significativa para nosotros. Entonces lo haces teclea Ellen y s, y luego sigue adelante y escribe todo ese comando. A continuación, escriba slash user slash local slash Bean, que debería ser su variable de ruta. Después teclea slash Adam. Entonces, ¿el último después de la corte es ese comando que querrás entonces? mente dice que el archivo existe porque ya tengo esta Semling configurada. No obstante, si ejecutamos adam dot después una vez que haces el tuyo, notas el mismo comportamiento donde tu editor de código se lanza desde la terminal. Podríamos hacer lo mismo con sub línea para que podamos enlazar sublime. Y así tienes sublime instalado ahora para sublime. También es necesario acudir a las aplicaciones. Encuentra la aplicación de texto sublime, ve a contenidos, soporte compartido, encuentras el bin y luego el comando de lanzamiento es s ubl dentro de aquí y luego una vez más encuentra tu variable de entorno ruta local y luego haz sublime o SPL lo que quieras. Y mi expediente existe porque ya tengo ensamble. Entonces ahora puedo usar punto sublime y vemos el mismo comportamiento, pero con sublime. Entonces ahora que tenemos esta magia de ingeniería enganchada a nuestra terminal y tenemos todo preparado para desarrollar proyectos de reacción, pasemos a empezar realmente uno 5. ¡Mesa de contar con CountdownChamp primera aplicación de reacción!: Hola. Presentemos la primera aplicación que crearemos juntos llamada Countdown Champ. En esta app, tendremos una herramienta que nos permita saber cuánto tiempo tardará en llegar a una fecha de significación. Entonces contemos regresiva hasta Navidad, 25 de diciembre de 2017. No, el AB que ves que ya estás tiene un contador yendo y simplemente cada segundo el contador actualiza para mostrar cuánto tiempo queda hasta la fecha. A lo mejor te gustaría contar hasta una fecha diferente, sin embargo. Digamos que necesitas saber cuántos días te quedan para comprar presente para el Día de San Valentín. Entonces pongamos el 14 de febrero de 2017. Y ahí tienes, las actualizaciones con la nueva fecha en la parte superior y ahí tenemos un contador yendo al día que lo introduzcamos. Entonces empecemos a construirlo juntos 6. Construir tu primera aplicación: Construyamos nuestra primera aplicación con reaccionar. Para empezar, abramos una nueva ventana terminal en un mag. Normalmente se puede encontrar la terminal presentando espacio de comandos y escribiendo en terminal. Y en cuanto veas que aparece el icono, solo tienes que pulsar enter. Por lo que aquí tenemos una nueva ventana terminal. Estoy en el directorio de inicio. Voy a navegar a mi directorio de codificación y luego navegar a la carpeta React. Ahora bien, si no tienes ya una carpeta específica o directamente para revestir, te animo a que hagas una. Ahora solo ayuda a mantener organizados tus proyectos y archivos. Ahora, en esta carpeta de reaccionar, inicializaré un proyecto para recordar su nombre. Countdown Chip para construir un proyecto usará un paquete que instalamos antes, crear reaccionar en Vamos a correr, crear reaccionar y luego el segundo argumento. Después del espacio, especificamos el nombre de su aplicación. Por lo tanto, cuenta atrás chip ahora , dependiendo de tu conexión, debería tardar unos segundos más o menos, pero en cuanto termine empezará a mirar los archivos y lo abrirá en. Una vez hecho, tu salida debería verse así. Te da algunas indicaciones sobre cómo iniciar el servidor de desarrollo, cómo construir un paquete, cómo probarlo y también cómo destruirlo por completo. Ahora lo primero que vamos a hacer es seguir esa primera dirección CD Countdown champ. Pero antes de ejecutarlo, sigamos adelante y exploremos el AB en nuestro editor. También Adam Dunn. ¿ Lo oyes? Chip de cuenta atrás de ISS. Desde la izquierda, se puede ver el árbol de directorios donde tenemos todos los archivos y carpetas aquí Tenemos carpeta de módulos conocidos , pero tenemos todo el código reaccionar. Es muy denso. Entonces, a menos que seas ingeniero de Facebook, realmente no tendrás que preocuparte por mirar esas carpetas con la carpeta pública. Solo vamos a editar el index dot html más tarde, solo un poquito. Y luego la carpeta fuente, donde hospedamos todo el código reaccionar y esto es en lo que nos va a interesar principalmente. Entonces hagamos ese segundo paso que teníamos terminal antes. Y ahora vamos a correr en PM start aquí lanza una nueva ventana de host local. Dice Bienvenido a reaccionar. Tiene su logotipo está girando. Dice que empiece en su fuente Abdi s y se guardó para volver a mirar bien. Enfriar. Tenemos su aplicación en ejecución, y ahora que lo hacemos, vamos a personalizarla construyendo nuestro primer componente. 7. Edición de la aplicación: Empecemos a editar la aplicación para empezar. Vamos a hacer algo loco. Vamos a liderar toda esta carpeta fuente y deshacernos de todos sus contenidos. Así que adelante, eliminarlo. No, eso no debería vaciar todos los contenidos de la carpeta fuente. Ahora nos sigue gustando el nombre fuente. Entonces vamos a seguir adelante y quedarnos con eso, pero vamos a crear nuestro propio archivo de punto índice Js. Se trata de un nuevo archivo index dot jets. Dentro de este otoño, vamos a empezar a crear nuestro cocinero reaccionar. Nuestra primera línea es importar reaccionar desde por ahora esto nos permite usar reaccionar todos sus componentes toda la biblioteca para construir su aplicación. El siguiente es importante reaccionar dunk de reaccionar hace Ahora este paquete es uno completamente separado de reaccionar, los controles realmente lanzando el código de reaccionar al navegador para nosotros. Escribamos nuestra propia estabilidad de cocinero personal Reaccionar, volcar , parar, render Vamos ednitem spacing. Y lo primero que queremos es un def, que, en desarrollo Web, simplemente representa una sección de la página. Y en este div escribirá chip de cuenta atrás y luego necesitamos apuntar a dónde en el html vamos a renderizar este elemento ahora. Por suerte, si nos fijamos en el índice dot html, ya tenemos un componente con la idea de ruta. Esto permitirá apuntar este yo d con nuestro elemento reaccionar para seguir adelante y crear nuestro así que simplemente obtendremos el elemento por yo d llamado fruta. Ahora, esto cuando guardamos debería renderizar el campeón de cuenta regresiva en la pantalla. Y ahí vamos. Nuestro texto personal de Countdown Champ ya está en la aplicación. A continuación, por fin vamos a crear nuestro primer componente con reaccionar, Así que adelante y ve al siguiente video. 8. Crear tu primer componente: En este punto, podemos crear nuestro primer componente de reacción. Componentes Inter reacciona comprendidos interfaz de usuario y suelen tener alguna calidad reutilizable e independiente sobre para nuestro primer componente lo llamará F. Y cuando creemos componentes reaccionamos usaban la extensión de dot Js ex en lugar del punto Js extensión. Entonces eso es correcto. Secuestro J s ex. Ahora, aquellos de ustedes con alguna experiencia en desarrollo web podrían encontrar a JSX muy familiar. Se ve igual a HTML. Pero en realidad, dudoso SX no lo es. Hmm. Ah, es javascript con el aspecto de un lenguaje de plantillas como XML, pero lo usamos para crear componentes y elementos dentro de reaccionar. Entonces vamos a crear este componente reaccionar. Ahora tendremos que importar reaccionar como de costumbre de reaccionar. Pero ahora nos falta un paso. También queremos importar la función de componente de reaccionar. Adelante y tenía el componente. Eso es todo lo que vamos a necesitar para importar por ahora. Ya no necesitamos el reaccionar. Ya que el archivo index dot Js ya está cubriendo eso para comenzar a escribir, nuestro componente declarará Comer una clase de seis Ahora aquellos de ustedes con antecedentes de informática bien, como si, seis clases que estaban introduciendo Atma Script 2015 y nos permiten escribir script Java en un modelo orientado a objetos. Esto es especialmente útil en la creación de nuestro componente personalizado porque simplemente podemos extender reacciona componente con nuestra clase, heredar todos sus métodos predeterminados los cuales discutiremos más adelante a medida que se vuelvan relevantes para nuestras aplicaciones. Pero el 1er 1 y el más usado es un método de render. El método render nos permite devolver cualquier GSX que nos gustaría. Entonces volvamos un nuevo div que diga Countdown chain en componente Cool. Ahora ya has discutido la importación cuando importamos reacciona y ellos reaccionan hacia abajo desde los módulos. Pero no este componente es nuestro propio módulo que podemos exportar a otras clases que posteriormente serán importantes. Entonces vamos a exportarlo ahora y declararlo como el componente predeterminado. Por último, necesitamos que la aplicación reconozca este componente como un componente predeterminado a utilizar. Vamos a Index Thaci s y reemplaza a Div con nuestro componente APP. Ahora, algunos de ustedes podrían estar preguntándose por qué podemos usar el componente de la aplicación sin importarlo primero. Bueno, ustedes estarían exactamente en lo cierto. Tenemos que importar en desde el directorio actual y el punto siempre se refiere a la barras de directorio actual . Y a medida que guardamos, deberíamos ver su actualización de Dave en la pantalla. Pero arriba no hay nada renderizado en la página. ¿ Por qué es eso? Bueno, un error común dentro del método render es olvidar usar el estado de retorno. Siempre hay que devolver la JSX. No puedes simplemente escribirlo. Esto es algo que mucha gente empieza con React. Olvídate de hacer algo con lo que yo mismo tuve que ver un poco. Conforme estaba aprendiendo, iba a decir que nunca devolví y nunca fui. Campeón de cuenta regresiva en componente. Antes de seguir adelante, repasemos brevemente los tres temas que acabamos de discutir. A componente React es una pieza independiente y reutilizable de ti. I siguiente JSX se ve igual a HTML o XML pero en realidad es JavaScript y nos permite crear componentes de reacción. Y por último, importar y exportar nos permite compartir código entre módulos y archivos. Pasemos al siguiente video 9. Estructurar la aplicación: aquellos de ustedes con experiencia en qué desarrollo podría recordar que con HTML dibs son elementos sin ningún interior Los niños se pueden auto de cerca. La misma regla aplica a JSX, decir en su archivo de punto de índice Js. Podemos cambiar este elemento de aplicación de dos etiquetas a una, así que sigamos adelante y hagamos eso en y una etiqueta auto envolvente. A continuación, nos centraremos en estructurar esta aplicación. En primer lugar agregará algo de Temple JSX a la app de la que podemos trabajar después. Después le agregaremos un poco de estilo a la paz, pero agregando un archivo CSS. Vamos a añadir la estructura. Empecemos agregando un título Div a nuestro componente principal. Entonces, eliminemos este texto ahora mismo y agreguemos un did para el título. Y dirías cuenta regresiva hasta el 25 de diciembre 20. 70 Navidad. Ahora vamos a sumar alguna estructura para el reloj de cuenta regresiva. El amor ganó fuera de Div y cuatro introducen Cuando será por los días. Entonces digamos 14 días y por supuesto que solo estamos inventando esto por ahora. Diré 30 horas. Necesitamos uno para los minutos también. 15 minutos y luego 20 segundos y yo haría los días en minúscula ya que hizo todo el otro tiempo en minúscula y están reaccionan actualizaciones automáticamente tan pronto como los ahorra gracias a crear reaccionar arriba. A continuación, tendremos un campo de entrada donde los usuarios pueden escribir una nueva fecha, igual que un botón donde pueden enviar esa nueva fecha. Entonces, ¿qué es un combustible de entrada? Una vez más, tendremos una etiqueta auto encerrada. Tendrá un Marcador de posición por ahora, eso solo dice Nueva fecha y luego tendremos un botón justo debajo. Dicho esto, se somete. Sigamos adelante y envolveremos esto dentro de un div mismo, solo para que se coloquen juntos en la misma sección, y ahí vamos. Tenemos alguna plantilla ing para app, pero en este momento se ve realmente feo, para ser honesto. Entonces agreguemos algo de CSS para hacer esto solo un poquito. Simplemente, agreguemos un nuevo archivo llamado app dot CSS a la carpeta fuente en que cesa. En primer lugar, hagamos una clase de aplicación global. Entonces diremos que vamos a alinear todo el texto al centro. Vamos a hacer todos los fondos alrededor de 35 píxeles para que realmente lo podamos ver y ellos iban a seguir adelante y darnos un margen. No quiero que esté tocando la parte superior, así que voy a decir 20% porque ese es un número bonito, adaptable. Siempre que estés cambiando la pantalla con Now, los que están familiarizados con CSS podrían ya saber cómo funciona. Básicamente, estás agregando clases a cada uno de tus dibs para aplicar ciertos estilos como el tamaño de fuente de línea de Texas o márgenes para cambiar la apariencia de tu aplicación. Entonces vamos a añadir esta app closets. Eres componente. Ahora, antes de agregar cualquier estilo, lo primero que tenemos que hacer es realmente incluir el CSS dentro de nuestro componente. Por lo que importar en punto CSS. Es realmente tan simple como eso. Ya podemos seguir adelante y empezar a usar el CSS dentro de nuestra aplicación. Ahora, mi sensación intuitiva de simplemente escribir clase es igual aquí porque ya lo nombramos dentro de nuestro coño CSS. No obstante, si decimos esto, notaremos que ninguno de los estilos se desmayan. Eso se debe a que la clase ya es palabra clave reservada dentro del script de trabajo, Así que GSX utiliza una palabra clave diferente para nombrar nombres de clase dentro de sus plantillas. Puedo adivinar de qué se trata. Yo lo dije antes nombre de clase. Y ahí vamos. Ahí está nuestro nuevo estilo ya aplicar. Ahora, quiero que el título sea más distinto. Entonces vamos a agregar un componente de título y para hacerte más distinto, voy a aumentar el tamaño de la fuente. Entonces, por supuesto, necesitamos agregar la clase de título AB. Nombre es igual a título. Y ahí vamos. Es mucho más grande, pero voy a seguir adelante y re tamaño es solo para que podamos tener el efecto completo. Agradable. Entonces cada uno de estos dibs va a tener un nombre de clase separado. El 1er 1 van a ser días de reloj. El siguiente va a ser horas de reloj. El siguiente va a ser minutos de reloj. El final va a ser segundo reloj, Vamos a añadir un estilo. No. Y el razonamiento detrás de este estilo es que quiero que todos estos estén en línea. No me gusta cómo hay una nueva línea entre todos ellos, así que vamos a cambiar eso ahora. Por lo que para mis horas de reloj, voy a decir que la pantalla está en línea. Y luego para mis días de reloj, también voy a decir, Pero la exhibición está en la vida y ahí vamos. Vemos mucho las líneas. Y luego, por supuesto, tenemos que hacer eso tanto por los minutos como por los segundos. Está bien, Cool. No obstante, estamos como siendo un poco ineficientes con nuestro CSS. En realidad podríamos acortar significativamente esto mediante el uso de un truco de CSS. Es ciertas clases deben de la misma propiedad. En realidad podemos acortarlo. Podemos simplemente usar una coma y ver que las horas de reloj también hereda la pantalla en línea A medida que guardas . Vemos que sigue aplicándose el mismo estilo. Cilindro es lo mismo para los minutos de reloj así como oclock. Segundo, hacer que nuestro código sea mucho más eficiente. Y luego, por supuesto, mira, se están tocando más o menos. Realmente no puedo diferenciar que Estos aire separan palabras. Démosles a todos un margen de 10 píxeles, y ahí vamos. Eso es suficiente estilo por ahora. No te preocupes. Tendremos un truco en la manga más tarde para empatar realmente en todo el estilo y aspecto de esta aplicación. Entonces sigamos adelante y pasemos al siguiente video 10. Introducción a Estado: presentemos la idea de estado en componentes de reacción. En este punto, sólo hemos agregado sexo de jazz plantilla a su aplicación con algún texto predeterminado para actualizar la interfaz de usuario. No obstante, queremos agregar reactividad y lejos para que el usuario interactúe con ella. Aquí entra el estado. Se puede pensar en el estado como los datos que son pertinentes para la aplicación. Cada componente tiene su propio estado local con respecto al estado global de toda la app, igual que en una escuela. Por ejemplo, tiene estado de su número de profesores, número de alumnos y número de aulas, etcétera. Pero cada estudiante también tiene su propio estado, una serie de libros de texto, cuadernos y bolígrafos. Sigamos adelante y agreguemos estado a nuestros componentes. Necesitamos agregar un constructor a la clase. Esto nos permite tener estado local dentro de nuestra clase. Ahora necesitamos pasar un argumento de props, y por convención, y por convención, llama a esto props aunque se podría nombrar a esto cualquier cosa que te guste, sin embargo, para props se refiere a datos heredados de cualquier componente padre, esto es algo heredado de orientado a objetos. La programación se aclarará más adelante a medida que ampliamos nuestra aplicación. No Lo siguiente que necesitamos declarar es el estado real de nuestros componentes. Y en reaccionar. Estado es siempre un objeto en un objeto. Claves de propiedad, Matt a los valores. Y estos valores pueden ser cualquier tipo de JavaScript válido, como una cadena un número u otro objeto. Ahora lo primero que declarará es nuestro plazo. Aquí está nuestra clave en nuestro valor será,por supuesto, por supuesto, 25 de diciembre de 2017. Ya que a todos les encanta la Navidad, bien, sigamos adelante y hagamos que este título sea más fácil de ver. Vamos a sustituir el 25 de diciembre aquí a nuestro estado y en reaccionar. Cuando nos referimos a una variable dentro de nuestro texto, podemos usar esta notación de corchete para hacerlo. Por lo que esta que establece ese plazo. Y a medida que guardamos, deberíamos ver una actualización dentro de su aplicación. Y ahí vamos. Ahorramos. Sigue siendo el mismo plazo sólo para demostrar que funciona. Vámonos y cambiemos a noviembre, o puedes cambiarlo a cualquier día que te guste y agradable. Dice noviembre ahora. Por lo que ahí vas venganza y estado y algunos datos a nuestra aplicación y nuestra clase en Component. Vámonos y pasemos al siguiente video. Volveremos en realidad actualizaremos el estado dinámicamente 11. Actualización de estado: actualicemos de alguna manera el estado de nuestro componente dinámicamente. Para ello, podemos aprovechar un método específico dentro de reaccionar llamado estado conjunto. Simplemente necesitamos llamar a este estado de conjunto de puntos a través del código con el fin de actualizar nuestros datos de clases locales . En primer lugar, Let's acuario método dentro de esta clase pero actualiza el estado. A ver, tenemos un método de cambio de fecha límite, que actualiza un estado. Entonces, por supuesto, necesitamos llamar a este conjunto de puntos se quedó dentro de este método. Ahora hay una regla muy importante a seguir. Siempre que actualice el estado, nunca debe mutar o cambiar el estado directamente. Recuerda, repite eso una vez más. Nunca debes mutar o cambiar de estado directamente, lo que significa que el componente no retrotraerá Ender. Si, por ejemplo, llamamos a este pensamiento ST dot fecha límite es igual al 25 de noviembre de 2017. Este es un ejemplo de estado mutando directamente. Así es esto. Por ejemplo, si tuviéramos un contador aquí dentro y lo llamáramos cero, al principio, no seríamos capaces de decir este pensamiento afirmar que contador más es igual a uno. Esto no funcionaría. En su lugar, utilizamos este método de estado de conjunto de pensamiento. Pasó un objeto totalmente nuevo con el par de valor clave que nos gustaría actualizar. Entonces digamos que la nueva fecha límite va a ser el 25 de noviembre de 2017. Mutar directamente al estado llevaría, por supuesto, a bichos y áreas dentro de la aplicación. No obstante, si estás declarando un nuevo objeto como lo estás haciendo dentro de este estado de conjunto de pensamiento, permite que los datos permanezcan sin muelle y errores. Vamos a adjuntar este método a su botón arriba bien, agregando al oyente click al botón. Bueno, digamos al click igual y luego agregaremos una función de Essex Anonymous para llamar a esto no cambiar fecha límite. Ahora, tal vez te estés preguntando por qué necesitamos función anónima Si, por ejemplo, simplemente llamamos a esto no cambia el plazo. Tener manejadores sin una función anónima al igual que esta necesita saludos dentro de su aplicación, lo que podría provocar que se estrelle. Por lo que en cambio, aprovechamos la función anónima E six. Para llamar a esto no cambiado, método de la fecha límite podrá simplemente decir esto no cambiar el plazo, porque la función de Essex Anonymous nos permite llamar solo una vez sin causar que el bucle estrelle su aplicación. Conforme seguimos codificando, Will Seymour funciones anónimas e incluso funciones no anónimas en acción con el fin actualizar nuestras aplicaciones. Entonces vamos a ahorrar. Y por último, vamos a hacer clic en el botón de enviar para ver si funciona. Y ahí vamos. A medida que hago clic en enviar. Ves ese cambio a partir del 2 de diciembre 25 de noviembre de 2017. Pasemos al siguiente video. 12. Cambiar datos con el campo de entrada: hasta el momento, sólo tenemos una forma de que el usuario actualice el plazo. Y, por supuesto, sólo cambia a un solo plazo, no importa lo que escriba el usuario. Ahora eso es ventaja enferma de ese campo de entrada. Para poder actualizar verdaderamente la aplicación, agreguemos una nueva clave al estado. Esta clave se llamará Nueva Fecha límite y vamos Camel lo caso. Ahí es cuando tienes dos palabras. Pero los combinas juntos, y la segunda palabra que capitalices por ahora simplemente dirá el nuevo plazo a un estricto vacío . A continuación, tendremos que actualizar este nuevo plazo. Bueno, Adam, en función de cambio al campo de entrada. Adelante y formatear. Es un poco. Y en la función on change, vamos a agregar una variable de evento y de manera similar a una función anónima. Vamos a tener esa sintaxis de flecha igual. Por ahora. Simplemente cónsul dot registremos esta variable de evento para ver qué está pasando. Digamos que por ahora iremos a inspeccionar el elemento de la app para que puedas acceder al consejo . Veamos qué pasa cuando tecleamos noviembre, y ahí vamos. Se acerca un montón de datos, y la razón por la que parece tanto en ello. Es porque realmente hay esa cantidad de datos. Pero en realidad, lo que nos interesa es justo lo que el usuario escribe y podemos acceder a lo que el usuario escribe pero agregando las propiedades de valor de punto objetivo, Vamos a seguir adelante y guardar. Probemos eso una vez más. Y como puedes ver, se actualiza cada vez que el usuario cambia el campo de entrada y tenemos el cambio más reciente, que es noviembre, que es corto para noviembre. Por último, ya que podemos ver los datos ya registrados en nuestro cónsul, podemos seguir adelante y cambiar es función de registro constante a con esta función de estado de conjunto de puntos las actualizaciones y nueva fecha límite a ese evento punto valor objetivo. Cambiemos esto. Dirá esto. Dicho esto, estado, nuestro nuevo plazo. Recuerda, tiene que ser un objeto santo. Es el evento que se dirige al Dr Value. Seguiremos adelante y ahorraremos. Lo siguiente que tenemos que hacer es cambiar un poco el método de fecha límite de cambio real con el fin actualizar verdaderamente el plazo a nuestro nuevo. Por ahora, sobre el método que busca el mejor estado de inicio aquí bien, simplemente, simplemente, Cónsul registra el estado actual para ver cómo se ve la aplicación Hasta el momento. Ahorremos y luego diremos que nuestra nueva fecha límite es el 25 de noviembre de 2017. Vamos a entrar. Presione esta función de fecha límite de cambio ahora. Por lo que nuestra fecha límite de objetos es actualmente el 25 de diciembre de 2017. Pero aquí tenemos un nuevo plazo, que es el 25 de noviembre de 2017. Para que vayamos, no hemos actualizado componente estatal. Ahora simplemente necesitamos fijar el nuevo plazo para el plazo original a ese nuevo plazo o más bien, el nuevo plazo dentro del estado. Seguiremos adelante y borraremos eso. Por ahora. Veamos si funciona toda la aplicación. ¿ Te acuerdas de 25? El 2017 irá en prensa presentar y ahí vamos. Cambia. Podríamos hacer el 20 de noviembre si quisieras. Podemos incluso cambiar el año a algo loco como 30 17 hombre. Si tan sólo pudiéramos estar vivos, entonces para ver cómo se ve la tecnología. A lo mejor codificamos con nuestras mentes. En cualquier caso, el dimensionamiento se ve bastante poco atractivo por el momento, pero más adelante le agregaremos un poco de estilo así como un truco de reacción ordenado. Para que toda esta abogacía se vea lisa. Sigamos adelante 13. Crear un componente de relojes: momento tenemos un componente grande para sin embargo, en este punto necesitamos agregar mucha lógica a la función de reloj de su aplicación. En esta colección de cuatro dibs por aquí se ve tan relacionados entre sí, pero también podríamos, creando componente completamente nuevo para que lo haga. Pero agregando el archivo clock dot jsx con nuestra carpeta fuente. Nuevo archivo Clark No JSX Seguiremos el mismo código que antes, así que importa reacciona así como un componente de reaccionar, y también importaremos nuestro CSS. Dios nos ve. Declararemos la clase CLA y extenderemos el componente. Por último, vamos a exportar el reloj. No. Bueno, por supuesto, necesito leer o algo así. Por lo que así como antes hará aparente tive. Ese es nuestro reloj. Vamos a seguir adelante y agarrar el JSX que escribimos antes de pegarlo dentro de aquí para ahorrar algo tiempo. Entonces copia esto. Colóquelo dentro de aquí. Esta será la estructura de nuestra JSX. No, sigamos adelante y teníamos una memoria de constructor. Necesitamos pasar tu argumento hacia arriba apoyos así como un super props para el estilo de programación heredado orientado a objetos de US six JavaScript. Por último, declaremos algún estado inicial. Tenemos que tener algún estado para los días. Variable horas variable la variable minutos en la variable segundos. Digamos días para los análisis. Cero horas también cero en los minutos como cero. Y por supuesto, los segundos como cero también. Y va a cambiar todos estos números para ser este estado que queremos que sean. Por lo que este será el servicio en los días ST dot. El nuestro será este no horario estatal. Minutas. Te adivina este pensamiento ST dot segundos No sólo bromeando. Minutas. Y entonces este no estado consiguió segundos. Enfriar. Digamos que esto importante dentro de la app y el reemplazar nuestro JSX con componente oclock. Entonces vamos a importar nuestro reloj en el look de carpeta actual y luego vamos a reemplazar todo el reloj donde todo lo hizo más bien con nuestro componente de reloj del auto en etiqueta de cierre. Adelante y ahorra. Es realmente baja. Adelante e inspeccionemos el elemento. Tenemos algo mal arriba y aquí vamos un elemento reaccionar válido o no debe ser devuelto. ¿ Recuerdas cómo dije antes que siempre se devolvió el método de Orender? El JSX, en lugar de simplemente escribirlo. Bueno, aquí vamos. Muchos de ustedes probablemente cogieron eso, pero sigamos adelante y agreguemos eso ahora mismo. Y ustedes probablemente estaban gritando en la pantalla. David, te falta algo. Voy a ir a decir esto y luego nos vamos. Cero días, cero horas, cero minutos, cero segundos. Ahora que tenemos nuestro componente de reloj, podemos seguir adelante y seguir adelante. 14. Presentación de accesorios: se ve bonito. Sq, cuando la APP tiene una fecha de cuenta atrás del 25 de diciembre de 2017 pero el tiempo que tarda en llegar se sienta en día cero, cero horas, minutos y segundos. Es Navidad. Su diversión es, parecería el viaje en el tiempo esta manzana solo muestra el verdadero tiempo que tarda en llegar a este día increíble o el día que te gustaría hacerlo. Necesitaremos una forma para que el componente reloj reconozca la fecha establecida dentro de la aplicación. El componente padre. Podríamos aprovechar algo similar al estado llamado apoyos para poder hacerlo. Verano dos apoyos estatales se refiere a algunos datos dentro de la aplicación, Sin embargo, con apoyos se pasa datos o estado a componentes hijo de componentes padre, lo que significa que puedo especificar un plazo dentro de este reloj, igual a la estado actual de la fecha límite. Por lo que pasaremos la fecha límite desde el estado de solicitud de los padres hasta el reloj, que ahora podrá reconocer este plazo como utilería. Para demostrar esto, sigamos adelante y la consola registremos este stop apoyos dentro de su constructor para ver qué está pasando . Al inspeccionar el elemento, veremos que este tope de apoyos ahora es un objeto, y hay una fecha límite con nuestro loquero del 25 de diciembre de 2017. Los apoyos se vuelven especialmente útiles porque a medida que actualizamos el estado de nuestro componente padre, cualquier estado pasa apoyos a componentes hijos, actualizamos y leemos automáticamente. Render gracias a reaccionar ingeniería y principios de software. Bastante increíble aquí recibió la fecha límite. De niño de los apoyos de stock, podemos seguir adelante y usar eso para calcular el tiempo que tarda hasta la fecha pasada. Añadamos ese método dentro del siguiente video con el fin de actualizar estos números aquí mismo. 15. Calculación de tiempo hasta: Añadamos un método que calcula un tiempo que queda desde la fecha límite pasada hasta la hora actual. Por suerte, JavaScript ya viene con un objeto de fecha con mucha funcionalidad que podemos aprovechar. Entonces vamos a escribir esto. Obtener tiempo. Entonces método. Ahora mismo, Obtén tiempo hasta que tengamos un plazo de argumento dentro del método. Declaremos una variable llamada tiempo Ahora. Dentro de Essex, nos abstenemos de utilizar la palabra clave var utilizada en las versiones anteriores de script de trabajo. No uso Dejar o const. La mayoría de las veces queremos usar contras para variables que nunca necesitan actualización y dejar para variables que sí necesitan. actualización en el ámbito de esta función, sin embargo, sólo necesitará calcular esta variable de tiempo una vez por lo que utilizamos la palabra clave const. Ahora utilizaremos algunos métodos dentro del objeto de fecha de script de trabajo para ayudarnos. Lo estableceremos igual a una fecha, no método de análisis fuera de la fecha límite, y tendrán que restar otro el número analizando la hora actual en este momento. Y la razón por la que simplemente puedo decir nueva fecha es porque por defecto, cuando declaramos un nuevo objeto de fecha dentro de JavaScript, simplemente agarra la hora actual. Dice que el tiempo como es el tiempo. Por lo que el cálculo de resta está restando el tiempo actual entre el plazo y la fecha actual. Dentro de ese tiempo, podremos encontrar nuestros segundos, minutos, horas y días relevantes ocurridos minutos, que necesitamos lanzar a nuestro mostrador para poder actualizar la aplicación. Para ilustrar esto, simplemente en consola registremos la hora para que podamos ver esto en acción. Y cuanto más le agregue una llamada dentro de nuestro método de render por ahora, para fines de prueba, solo una función c r funcionando y cómo se ve realmente este número. Entonces digamos esto. Entonces el tiempo es algo así como tres mil millones 118 número demasiado largo para reconocer realmente y por supuesto no mostrar en la pantalla. Entonces ahora que vemos este número, necesitamos distinguir realmente los segundos, minutos, minutos, horas y días de este largo número de longitud de 10 dígitos. Entonces agreguemos algunas matemáticas y ciencias de la computación a esta función, y vamos a aprovechar la división en el Modelo para agarrar son números relevantes . Entonces de igual manera, vamos a declarar un const segundos y dijimos que igual a la función de piso de punto matemático. Divide esta vez por 1000 y módulo. Ah, todo eso por 60. Y el módulo. Parece el signo de porcentaje. Entonces todo el cálculo por seis igual así y los de ustedes desconocidos con el módulo . Ah, pero módulo Oh, sí es esencialmente sale el resto de una función. Entonces si hice 10 módulo Oh, gratis. El resultado sería uno pero seis modulares tres gal poner con el cero porque seis dividido por tres. El resto es cero, pero 10 dividido por tres. El resto es uno que avanza. Para conseguir nuestros minutos, se ven muy similares. No obstante, necesitamos hacer una división extra del tiempo por 60 para agarrar son minutos relevantes, horas, horas, lucir similares. Piso de matemáticas otra vez y oso conmigo. Escuchar estas funciones van a tomar un poco de tiempo para calcular. Aquí vamos. Vamos a dividir el tiempo mismo, pero 1000 veces 16 veces 60 otra vez en este tiempo por horas, vamos a modular por 24. Ya que solo hay 24 horas en el día, sigamos adelante y sumamos algo de espaciado, por lo que es más fácil de leer. Y no te preocupes, no estoy calculando estos números por encima de mi cabeza. No soy algún genio matemático. Escribí estos anteriormente o tal vez, y un genio matemático. Y yo simplemente no quiero que ustedes lo sepan. Entonces una vez más, voy a hacer uso de la palabra en los días y luego dividirme por 1000 veces 60 veces 24. Y vamos a dar salida a estas variables para ver si parecen minutos relevantes y luego haremos nuestras minutas. Yo quiero ver cómo lucen las horas. El nuestro. Y por último, ¿cuáles son los días desde dos días? Seguiremos adelante y seguros porque se recarga. Parece que nos dieron 347 días, ocho horas, 35 minutos y un segundo hasta Navidad. Tan cerca, ¿eh? Y parece que todo se está actualizando. Genial. Entonces lo último que tenemos que hacer es simplemente actualizar el estado. Entonces actualicemos primero el estado de nuestras fechas. Podríamos decir días es igual a la fecha, diremos esto y miraremos aquello. Tenemos un bucle de incidentes. Entonces tenemos algo muy defectuoso pasando aquí. No podemos llamar, conseguir Tom hasta dentro de nuestro método de render y pasar esta función de estado de conjunto de puntos. De lo contrario, estaremos en bucle infinito actual dentro de nuestra función. Por lo que dentro del siguiente video, aprenderemos acerca de los métodos del ciclo de vida para solucionar este problema. 16. Hooking con métodos de LifeCycle: en reaccionar siempre que el componente se renderiza en la pantalla o sale de la pantalla. Nos referimos a esos eventos como montaje o anuncio desde la aplicación. React proporciona métodos especiales para cada componente basados en estos eventos con el fin de permitirnos ejecutar código para aplicación y reaccionar llamadas. Um, ganchos ciclo de vida. El primer gancho o método que utilizará es un componente Will Mount Hook. Se ejecuta antes de que el componente se renderiza completamente en la aplicación. Usaremos este porque quieres calcular los apoyos pasados, los datos y los días actuales, datos y los días actuales, horas y minutos y segundos que necesitamos antes de renderizar nuestros datos en la pantalla. Por lo que una vez que tengamos nuestros datos, se actualizará el estado sobre aplicación dijo que lo correcto se renderiza. Añadamos ese componente notará función justo debajo de los apoyos, y luego calcularemos este pensamiento. Obtener azulejo hasta que nuestros apoyos no lo hicieron. Antes de guardar. Sigamos adelante y eliminemos esto del método render para asegurarnos de que no obtenemos el mismo error que antes. Vamos a ahorrar y ahí vamos. Este es un comportamiento inesperado porque en realidad no escribí componente will. Ahora, escribí, Come Ponette conocerá otra de esas áreas que ustedes probablemente reconozcan. Y ahí vamos recibir los días de actualización ¿quién? Pero también actualizamos ser horas a las horas. Whoa, ya está funcionando. Un sí fresco. Seis truco que podemos usar para simplificar nuestro código es usar la abreviatura del valor clave. Sintaxis. Observe cómo la clave y el valor se ven exactamente iguales. Bueno, en lugar de decir días son días. Simplemente puedo especificar días como una palabra clave, ya sabes, reconoce automáticamente que los días deben ser la clave, y el día también debe ser el valor. Entonces mientras guardo y recargo, notarás que aún funciona. Lo mismo pasa por horas, y ahora puedo acortar significativamente esta línea. Pero sólo diciendo minutos y segundos mientras guardo todo el asunto actualizaciones, Vamos a seguir adelante y deshacernos de estos registros de consola que ya no necesitamos. Dilo de nuevo, y ahora vamos a aprovechar otro ciclo de vida. Hook llamado Component did mount Este se ejecuta después de que el componente se haya renderizado por completo la aplicación dentro de nuestro componente hizo Mount Hook llamará get time hasta cada segundo. Con el fin de continuar actualizando nuestro script de trabajo de tiempo se envía con una función especial de intervalo de set que le permite ejecutar algún código en un intervalo específico. Se ejecuta en milisegundos, así que especificaré nuestra función como primer argumento y 1000 milisegundos, lo que equivale a un segundo como segundo argumento. Entonces es correcto que ahora establezca intervalo, y necesitamos especificar una función de flecha, que es anónima. Llamará a este pensamiento. Lleva a Tom a nuestra fecha límite de utilería , por supuesto, y diremos que corre cada 1000 milisegundos. Vayamos a guardar esto y miremos aquello. Ya tenemos tiempo de actualización. Muy cool. Tenemos una aplicación de trabajo ahora porque incluso podemos cambiar la fecha. Echa un vistazo. Digamos que quiero noviembre 25 2017 y mira. Se restaron alrededor de 30 días. Eso es tan impresionante. Solo hay un par de cosas que arreglar, sin embargo, para un aviso que hay un problema con los números menores a 10 estropean el espaciado de la aplicación porque les falta un dígito extra. Necesitan un prefijo cero inicial. Para solucionarnos, abordaremos ese problema En el siguiente video, agregaremos un método de ayudante cero líder 17. Agregar métodos de ayuda con expresiones de: agreguemos un método de ayuda cero líder para asegurarnos de que nuestro espaciado para nuestro temporizador siempre se vea bien. Este método será limpio y sencillo. Por ahora, declarar una función cero inicial. Simplemente toma un número o número para abreviar como su argumento, si el entumecimiento su lección. 10. Voy a devolver cadena cero, más las notas. Si no, le devolveremos el número en sí. Bueno, probemos si esto funciona por los días, las horas y los minutos. Entonces llama a este punto que conduce cero alrededor de cada una de nuestras variables. Sí, ahí, ahí dentro. Sigamos adelante y guardemos y veamos si esta función funciona. Por lo que como puedes ver funcionan nuestras horas, ya que era menos de 10 como jarabe líder. Y si esperamos 10 segundos, verás que los segundos también tienen un cero a la izquierda para cualquier número. Lección 10. Entonces vamos a comprobarlo. Perfecto. Ahora hay una cosa que podemos hacer para que esta función de cero líder, incluso que podamos acortar esta función aprovechando un guión de trabajo, expresión ordinaria en lugar de tener esta larga. Si declaración, podemos acortarlo dedo abajo una línea. Devolveremos el número por sí mismo. Pero comprobaremos si es menos de 10. Y si es una pregunta funciona. ¿ Qué convertiría la cadena cero, más el número que de lo contrario llama a quién devolvió el número en sí? Ahorremos freeload. Y como puedes ver con su expresión Turner, sigue siendo funcional. Las expresiones de giro son ideales para mantener el código comprensible, conciso y desorden. Lis. Pasemos a la parte de recubrimiento final de esta app, donde nos encargamos de un poco más de estilo una apariencia tirando de un truco de reacción de front-end de la bolsa. 18. Estilizar con Bootstrap de React: ahora para nuestro truco final agregará React bootstrapped su aplicación para que todo esto se vea bonito. Ahora tenemos un par de pasos que dar al instalar reaccionar bootstrap en tu habitación. En primer lugar, navega a una nueva pestaña del navegador y busca. Reacciona. Bouchra. Deberías ver un enlace que se ve así y eventualmente llegar a este sitio web. Ahí. Deberías ver un par de pasos a seguir después de navegar a empezar. Para empezar, necesitamos insultar reaccionar bootstrap a través y PM para que eso no sea para llegar a la terminal. Los hombres llamarán a instalar NPM. Reacciona. Bootstrap seguro , dice. Siguiente. Necesitamos incluir lo último compilado en enlace de archivo unificado de la CIA SAS dentro de nuestro documento HTML yendo copiar y pegar solo el 1er 1 No queremos el opcional por ahora e ir al índice html y en la parte superior. Vamos a incluir un enlace justo antes del título, que es ese CSS Fuck modificado. Ve y guarda en tu aplicación. Si recargas, parte del texto ya ha cambiado para nosotros. Entremos y comprobemos si has terminado de descargar y ahí vamos. Tenemos reaccionar bouchat descargado por completo en un nodo meses ahora, podemos aprovechar algunos de estos componentes. Nunca vuelvas a secuestrar a JSX. Y vamos a importar algunas cosas. Vamos a importar el componente de forma, componente, forma, control, componente, como siempre, componente de botón desde botas de reacción. A continuación, vamos a cambiar un poco nuestros campos de entrada. Para que así podamos tener los estilizados de la tienda de botas reaccionar que queremos. Qué cambia Div exterior a un componente de formulario. Y esta forma tendrá una clave de en línea puesta a la verdad. No obstante, en reaccionar, si alguna vez tenemos una clave que simplemente se establece a verdadero debilitarlo abreviado simplemente diciendo la clave, que está en el interior. Por último, vamos a cambiar entrada o siguiente, más bien no finalmente cambia entrada a componente de control de reforma. Y por último, este botón estará bien. Pero vamos a ahorrar y real Uh, y luego nos vamos. Las cosas se ven un poco mejor. A continuación, agreguemos un nombre de clase al control de cuatro en la entrada de fecha límite. De esa forma podemos controlar el tamaño de fuente de este campo de entrada. Volvamos a nuestra caída CSS. Tendremos una entrada de fecha límite, diré. Pero el tamaño divertido es de 25 píxeles y tiene un margen de cinco píxeles allí. Tenemos un estilo actualizado, y eso son tres tallas para ver cómo se ve. Y ahí podemos ver que está en línea aquí. Cambiemos al 14 de noviembre 15 2017 y se ve realmente bien. Está bien, se ve impresionante. Y tenemos una aplicación completa de cuenta atrás. Excelente trabajo. Puedes cambiar la fecha predeterminada a cualquier día festivo para tu cumpleaños o día especial que quieras . Diviértete con él. En la siguiente pieza hay una porción de reto y resumen, y en la siguiente sección iniciaremos una aplicación totalmente nueva que maneja la solicitud Web fin de recibir datos y seguir aprendiendo sobre el gran frente y marco de reaccionar . Nos vemos que