Ahora echemos un primer vistazo rápido
en escribir lógica dentro de los componentes de React.
Ahora ya hemos escrito algo de lógica de JavaScript antes
pero siempre lo hicimos dentro del DJSX que se devuelve.
Así como aquí, ¿verdad?
Pero como los componentes son solo funciones de JavaScript,
Por supuesto, podemos hacer cualquier JavaScript en ellos que queramos.
Y ese código luego simplemente se ejecuta.
tan pronto como se capture la función.
Tan pronto como se inicialice el componente.
Así, por ejemplo, aquí,
Podemos crear cualquier variable nueva que queramos.
Digamos hora, y aquí nuevamente crearé una nueva fecha,
y luego digamos getHours
y luego podemos registrarlo en la consola.
Y ahora vamos a usar ese fragmento.
por primera vez que configuramos antes.
Entonces aquí podemos simplemente escribir cl, presionar Enter y luego hora.
Entonces, echemos un vistazo a nuestra consola,
Y aquí, sí, tenemos el número 9.
Entonces esa es actualmente la hora
y ahora lo que quiero hacer aquí
es básicamente mostrar una alerta en la aplicación
si el restaurante está actualmente abierto o no.
Entonces, definamos algunas variables más para eso.
Así que hora abierta
entonces digamos que la pizzería realmente abre
a las 12:00 p.m. y cierra a las 10:00 p.m.
Entonces son las 12 y las 22 para la hora de cierre.
Tan cercaHora = 22.
Y ahora nuevamente, podemos usar cualquier JavaScript aquí.
Así que escribamos una declaración simple que diga:
que si la hora es mayor o igual, la hora de apertura,
y la hora es menor o igual a la hora de cierre,
luego simplemente alerta "¡Actualmente estamos abiertos!"
Entonces, la alerta es solo una función incorporada de JavaScript.
para que estés familiarizado con él.
Tal vez usemos esto aquí como demostración.
que podemos escribir algo de JavaScript simple aquí.
Así que alerta: "Lo sentimos, estamos cerrados".
Y aquí necesitamos algunas comillas dobles como esta.
Y aquí tenemos algún error.
Probablemente JavaScript nos quiera
para incluir el punto y coma aquí.
Y ahí está.
Entonces "lo siento, estamos cerrados",
y es que ahorita son las nueve de la mañana
y viste que aquí pasó dos veces.
Y eso es por el modo estricto.
que te estaba diciendo antes.
Entonces, en modo estricto, nuestros componentes generalmente se renderizan dos veces.
Y es por eso que también recibimos esa alerta dos veces.
Ahora, si cambiamos el horario de atención aquí,
digamos a ocho y volvamos a renderizar,
luego dice "¡Actualmente estamos abiertos!"
Muy bien, ahora esta función de alerta
en realidad está bloqueando JavaScript.
Y es por eso que se ejecuta al principio.
pero no pasa nada más.
Y, por supuesto, esto no es realmente ideal,
y no usaríamos esto en una aplicación real,
pero de todos modos esto fue solo una breve demostración.
Así que comentemos todo esto.
y solo para usar este código aquí
porque en realidad será útil más adelante.
Creemos una variable aquí llamada isOpen.
Entonces eso simplemente se convertirá en un valor verdadero o falso.
dependiendo de si esta condición es verdadera o falsa.
Fijémoslo en la consola, así.
Vaya, ¿qué está pasando aquí?
Sí, eso es mejor.
Y ves que ahora mismo está abierto.
Regresemos eso al puesto 12 y ahí vamos.