Bienvenido al próximo desafío de codificación,
que, como puedes imaginar, tiene que ver con el estado.
Entonces, ¿qué quiero que construyas en este desafío?
es este contador de fechas muy simple.
Entonces aquí tenemos la fecha actual,
pero luego, cuando hacemos clic aquí en el ícono más,
ves que la cuenta aumenta a uno
y luego dice dentro de un día,
es el martes 22 de junio, mientras que antes eran las 21.
Entonces, cuando sigamos subiendo,
Básicamente sigue sumando este número de días.
a la fecha actual.
También podemos retroceder en el tiempo,
Hace como seis días, era esta fecha.
Entonces eso es lo más básico,
pero aquí también podemos ajustar el paso.
Así, por ejemplo, si el paso es cinco,
y cada vez que hacemos clic en el botón más,
aumenta en cinco.
Así que ya no por uno.
Entonces 10, 15, 20, y así sucesivamente.
Y el cálculo aquí, por supuesto, sigue siendo el mismo.
Entonces eso es lo que vamos a construir.
Así que abre un nuevo cuadro de envío de código con reaccionar punto nuevo,
o por supuesto, como siempre,
También puedes crear este desafío en tu computadora local.
Entonces, para eso, puedes crear una nueva aplicación React,
tal como lo hemos estado haciendo antes.
Ahora aquí, sólo para asegurarnos de que puedas ver,
Haré esto un poco más grande, tal vez no tan grande.
y luego empezaré a escribir
un poco de código aquí.
Así que sólo para mostrarte lo que realmente quiero,
entonces quiero que crees esta función de contador,
que por ahora solo devolverá prueba,
y luego todo lo que queremos hacer
es incluir ese contador aquí mismo.
y eso es.
Para que puedas dejar todo lo demás igual,
Incluso los estilos, dejémoslos aquí.
y solo concéntrate en esta funcionalidad de contador.
Ahora esta parte aquí con las fechas.
puede ser un poco complicado.
Entonces, ¿en qué quiero que te concentres más?
es en realidad la funcionalidad del contador aquí.
Entonces, si las fechas son demasiado complicadas,
Entonces déjalo hasta el final.
y puedes imprimir el valor de conteo actual aquí abajo.
O también puedes simplemente buscar en Google, por ejemplo,
Script Java en los días hasta la fecha.
Bien, entonces dejaré esto aquí.
para que puedas ver lo que se supone que debes construir
y luego te veré aquí en un minuto
con mi solución.
Muy bien, bienvenido de nuevo.
Esperemos que hayas tenido algún éxito con esto.
Así que en realidad hay muchas partes móviles aquí.
con el manejo de los eventos y de todo el estado.
Así que, con suerte, las conferencias que tuvimos anteriormente
fueron suficientes para que entiendas cómo funciona esto,
pero si no, realmente no hay ningún problema con eso.
Así que espero que hayas hecho algo.
aunque solo sea el contador muy simple.
Eso también está bien.
Pero de todos modos, sabemos que queremos este valor de recuento aquí.
para actualizar en la interfaz de usuario.
Entonces la vista de este componente debería actualizarse.
cada vez que hacemos clic en uno de estos botones.
Entonces esa es una buena señal de que necesitamos algún Estado, ¿verdad?
Entonces, comencemos creando el estado de conteo.
Entonces el recuento constante y el recuento establecido son estados de uso.
Y ahora, por alguna razón,
el estado de uso no se importó automáticamente,
entonces tenemos que hacerlo a mano.
De reaccionar.
lindo.
Y ahora, bueno, necesitamos mostrar este recuento en la pantalla.
y luego necesitamos actualizarlo.
Como siempre, los mismos tres pasos.
Entonces, primero declarando la variable de estado,
luego úselo en JSX y luego actualícelo.
Entonces aquí nos falta el valor predeterminado de cero,
y luego creemos un div con estos dos botones,
y también con el valor del propio contador.
Entonces, comenzando con ese valor, en realidad,
Contemos y luego el valor de conteo.
¿Oh, qué es eso?
Entonces el conteo es cero, eso es correcto,
y ahora necesitamos algunos botones.
Entonces botón,
y al hacer clic,
y aquí en realidad no crearé
la función del controlador de eventos por separado,
pero en lugar de eso, aquí simplemente los definiré en línea.
Pero si lo hicieras por separado,
Por supuesto, eso no es ningún problema.
Entonces, ¿qué queremos hacer aquí?
Entonces este de aquí está disminuyendo el valor.
Así que establecemos el recuento y queremos el nuevo recuento.
para ser el recuento actual menos uno.
Entonces, lo que eso significa es que queremos actualizar el estado del conteo.
basado en el estado actual, y por lo tanto,
aquí ahora deberíamos pasar una función de devolución de llamada.
¿recuerda eso?
Entonces escribiré C para contar.
Entonces esto significa contar, y recuerda,
es el valor actual del estado de conteo.
Y entonces queremos devolver esa cuenta menos uno.
Y eso ya debería ser todo.
Usemos esto aquí para el signo menos.
Muy bien, entonces copiemos y peguemos.
Oh, en realidad cerremos esta barra lateral.
Así que copie y pegue, y aquí, solo más uno.
Así que guárdalo y,
oh, ajustemos un poco la salida aquí,
y hermoso, eso ya está funcionando.
Entonces la vista de componentes se está actualizando.
a medida que actualizamos esta fecha.
excelente,
Y ahora vamos a mostrar también la fecha ahí abajo.
Entonces, para eso, creemos un párrafo.
o primero, calculemos esa fecha.
Entonces tal vez buscaste en Google cómo hacer esto, como te aconsejé.
Así que definamos una variable llamada fecha.
y luego nueva fecha,
y por supuesto podrías dejarlo así
o simplemente puedes pasar una cadena,
por ejemplo, para definir cualquier otra fecha que desees,
por ejemplo, 21 de junio de 2027.
Así que sólo por diversión.
Entonces esa no es la fecha de hoy, como puedes imaginar,
pero de todos modos, ahora aquí podemos, en el objeto de fecha,
Llame al método de fecha establecida.
Y entonces aquí podemos hacer la fecha y obtener la fecha actual.
Vaya, ¿qué es eso?
Sí, punto de fecha, para obtener la fecha actual
y luego agregando un valor.
Entonces ese valor puede ser el recuento.
Muy bien, ahora estamos usando nuestro recuento.
para agregar ese recuento a la fecha actual, básicamente.
Y eso es lo que podemos generar aquí abajo.
Pero nuevamente, esta parte era algo opcional aquí, realmente
esto no es lo que me preocupaba.
Lo que importa es que acertaste en esta parte de la fecha.
Entonces, pero de todos modos, ahora registremos la fecha.
y luego conviértalo en una cadena agradable y legible.
Así que hasta la fecha cadena.
Ahora bien, aquí tenemos algunos problemas.
y eso es porque, sí ahora mismo,
o JSX tiene dos elementos de ruta.
Eso es porque, por error, coloqué esto fuera del div,
pero ahí vamos.
Como ves, eso ya está funcionando.
lindo.
Ahora nos falta esa parte aquí.
eso dice dentro de 30 días, por ejemplo,
o hoy, o hace 10 días.
Así que hagamos eso.
Y para hacer esto, agreguemos quizás otro lapso.
Envuelvamos este en un elemento span.
y creemos un lapso.
Entonces, solo para algún texto en línea,
y ahora vamos a crear esa parte de la cadena.
Entonces, si el conteo es cero, entonces es hoy.
Entonces aquí podemos generar la cadena, hoy es.
Y si no, por ahora no devolvamos nada,
pero aquí tenemos un problema,
eso es porque aquí necesitamos dos puntos.
Muy bien, entonces el conteo no es cero en este momento, pero ahora lo es.
Entonces hoy es esta fecha.
Eso es correcto, pero ahora como alternativa aquí,
También debemos tener en cuenta el pasado y el futuro.
Entonces en realidad necesitamos dos valores diferentes más aquí.
y aquí necesitamos otro operador ternario.
Ahora usar ternarios de nido es bastante feo.
y puede ser bastante ilegible,
Por lo general, desaconsejo usar eso.
pero bueno, rompamos esa regla.
Básicamente aquí tenemos la rama else,
y aquí podemos preguntar si el recuento es mayor que cero,
entonces la cadena debería ser, usemos el literal de plantilla,
entonces el conteo de días a partir de hoy es
Y además,
contar hace días fue.
Así no, está bien.
Así que más guapa se encargó de formatearlo por nosotros,
para que sea al menos un poco más legible.
Entonces eso funciona, cinco es, aquí nos falta el espacio,
y ahora por el pasado.
Entonces hace cuatro días menos fue,
así que hagamos rápidamente un punto matemático absoluto aquí.
Y sí, eso lo soluciona.
Ahora tenemos este contador principal funcionando,
Así que básicamente esta parte aquí está funcionando.
y ahora preocupémonos del paso.
Y el paso va a ser bastante similar.
Entonces constante, paso y conjunto.
Paso y aquí necesito aprender a escribir paso aparentemente,
pero luego usa el estado nuevamente,
y aquí el paso por defecto es uno.
Entonces, porque de forma predeterminada, cuando hacemos clic aquí,
solo queremos que el contador suba uno.
Muy bien, ahora podemos simplemente copiar y pegar esto.
porque se verá muy similar,
pero aquí entonces tenemos el paso, y aquí también el paso,
y aquí, también dicho paso en ambos lugares.
Así que veamos, y sí, eso está funcionando.
Sin embargo, por supuesto, si ahora hacemos clic aquí,
entonces ese paso no se aplica aquí.
Así que todavía estamos simplemente sumando uno o restando uno.
Entonces, ¿cómo juntamos ahora estos dos?
bueno, como acabo de decir, por defecto,
acabábamos de restar o sumar uno,
pero eso ya no es lo que queremos.
En cambio, queremos sumar o restar el paso.
Así que reemplace el que está aquí.
paso, y
sí, eso está funcionando.
lindo.
Y creo que aquí podemos incluso volvernos negativos.
Tal vez deberíamos cambiar eso,
pero no importa, es demasiado trabajo.
Ahora, si sumamos tres,
en realidad estamos yendo al pasado.
Pero sí, eso no es problema.
Genial, esto concluye este desafío.
Funciona exactamente como nos habíamos propuesto construir.
Espero que te hayas divertido un poco con esto.
Ojalá tú también hayas tenido algún éxito.
y entonces sí, sigamos en esta sección.
y de hecho, en la próxima conferencia,
Crear un proyecto nuevo, muy, muy bonito.
Así que espero verte allí lo antes posible.