1
00:00:01,110 --> 00:00:03,360
Ahora echemos un primer vistazo rápido

2
00:00:03,360 --> 00:00:07,053
en escribir lógica dentro de los componentes de React.

3
00:00:08,310 --> 00:00:11,940
Ahora ya hemos escrito algo de lógica de JavaScript antes

4
00:00:11,940 --> 00:00:16,940
pero siempre lo hicimos dentro del DJSX que se devuelve.

5
00:00:17,220 --> 00:00:19,830
Así como aquí, ¿verdad?

6
00:00:19,830 --> 00:00:23,340
Pero como los componentes son solo funciones de JavaScript,

7
00:00:23,340 --> 00:00:27,570
Por supuesto, podemos hacer cualquier JavaScript en ellos que queramos.

8
00:00:27,570 --> 00:00:30,180
Y ese código luego simplemente se ejecuta.

9
00:00:30,180 --> 00:00:32,520
tan pronto como se capture la función.

10
00:00:32,520 --> 00:00:36,240
Tan pronto como se inicialice el componente.

11
00:00:36,240 --> 00:00:38,070
Así, por ejemplo, aquí,

12
00:00:38,070 --> 00:00:40,773
Podemos crear cualquier variable nueva que queramos.

13
00:00:41,850 --> 00:00:46,850
Digamos hora, y aquí nuevamente crearé una nueva fecha,

14
00:00:49,680 --> 00:00:51,430
y luego digamos getHours

15
00:00:53,310 --> 00:00:55,500
y luego podemos registrarlo en la consola.

16
00:00:55,500 --> 00:00:57,810
Y ahora vamos a usar ese fragmento.

17
00:00:57,810 --> 00:01:00,930
por primera vez que configuramos antes.

18
00:01:00,930 --> 00:01:05,430
Entonces aquí podemos simplemente escribir cl, presionar Enter y luego hora.

19
00:01:08,760 --> 00:01:10,740
Entonces, echemos un vistazo a nuestra consola,

20
00:01:10,740 --> 00:01:14,070
Y aquí, sí, tenemos el número 9.

21
00:01:14,070 --> 00:01:16,320
Entonces esa es actualmente la hora

22
00:01:16,320 --> 00:01:17,730
y ahora lo que quiero hacer aquí

23
00:01:17,730 --> 00:01:21,060
es básicamente mostrar una alerta en la aplicación

24
00:01:21,060 --> 00:01:24,303
si el restaurante está actualmente abierto o no.

25
00:01:26,250 --> 00:01:29,043
Entonces, definamos algunas variables más para eso.

26
00:01:32,610 --> 00:01:33,780
Así que hora abierta

27
00:01:33,780 --> 00:01:36,210
entonces digamos que la pizzería realmente abre

28
00:01:36,210 --> 00:01:40,140
a las 12:00 p.m. y cierra a las 10:00 p.m.

29
00:01:40,140 --> 00:01:44,703
Entonces son las 12 y las 22 para la hora de cierre.

30
00:01:45,600 --> 00:01:50,160
Tan cercaHora = 22.

31
00:01:50,160 --> 00:01:54,450
Y ahora nuevamente, podemos usar cualquier JavaScript aquí.

32
00:01:54,450 --> 00:01:58,450
Así que escribamos una declaración simple que diga:

33
00:01:59,700 --> 00:02:04,700
que si la hora es mayor o igual, la hora de apertura,

34
00:02:04,710 --> 00:02:09,710
y la hora es menor o igual a la hora de cierre,

35
00:02:13,470 --> 00:02:18,470
luego simplemente alerta "¡Actualmente estamos abiertos!"

36
00:02:21,210 --> 00:02:25,620
Entonces, la alerta es solo una función incorporada de JavaScript.

37
00:02:25,620 --> 00:02:27,423
para que estés familiarizado con él.

38
00:02:28,380 --> 00:02:31,200
Tal vez usemos esto aquí como demostración.

39
00:02:31,200 --> 00:02:34,983
que podemos escribir algo de JavaScript simple aquí.

40
00:02:36,660 --> 00:02:41,110
Así que alerta: "Lo sentimos, estamos cerrados".

41
00:02:42,690 --> 00:02:47,403
Y aquí necesitamos algunas comillas dobles como esta.

42
00:02:48,330 --> 00:02:50,190
Y aquí tenemos algún error.

43
00:02:50,190 --> 00:02:52,380
Probablemente JavaScript nos quiera

44
00:02:52,380 --> 00:02:55,290
para incluir el punto y coma aquí.

45
00:02:55,290 --> 00:02:56,940
Y ahí está.

46
00:02:56,940 --> 00:02:59,010
Entonces "lo siento, estamos cerrados",

47
00:02:59,010 --> 00:03:02,290
y es que ahorita son las nueve de la mañana

48
00:03:04,920 --> 00:03:06,900
y viste que aquí pasó dos veces.

49
00:03:06,900 --> 00:03:08,910
Y eso es por el modo estricto.

50
00:03:08,910 --> 00:03:10,740
que te estaba diciendo antes.

51
00:03:10,740 --> 00:03:14,370
Entonces, en modo estricto, nuestros componentes generalmente se renderizan dos veces.

52
00:03:14,370 --> 00:03:18,360
Y es por eso que también recibimos esa alerta dos veces.

53
00:03:18,360 --> 00:03:20,160
Ahora, si cambiamos el horario de atención aquí,

54
00:03:20,160 --> 00:03:23,700
digamos a ocho y volvamos a renderizar,

55
00:03:23,700 --> 00:03:25,827
luego dice "¡Actualmente estamos abiertos!"

56
00:03:27,090 --> 00:03:29,760
Muy bien, ahora esta función de alerta

57
00:03:29,760 --> 00:03:32,010
en realidad está bloqueando JavaScript.

58
00:03:32,010 --> 00:03:33,930
Y es por eso que se ejecuta al principio.

59
00:03:33,930 --> 00:03:35,373
pero no pasa nada más.

60
00:03:36,330 --> 00:03:38,910
Y, por supuesto, esto no es realmente ideal,

61
00:03:38,910 --> 00:03:41,070
y no usaríamos esto en una aplicación real,

62
00:03:41,070 --> 00:03:44,550
pero de todos modos esto fue solo una breve demostración.

63
00:03:44,550 --> 00:03:48,060
Así que comentemos todo esto.

64
00:03:48,060 --> 00:03:51,300
y solo para usar este código aquí

65
00:03:51,300 --> 00:03:54,030
porque en realidad será útil más adelante.

66
00:03:54,030 --> 00:03:56,853
Creemos una variable aquí llamada isOpen.

67
00:03:59,040 --> 00:04:02,310
Entonces eso simplemente se convertirá en un valor verdadero o falso.

68
00:04:02,310 --> 00:04:05,613
dependiendo de si esta condición es verdadera o falsa.

69
00:04:06,810 --> 00:04:11,810
Fijémoslo en la consola, así.

70
00:04:12,120 --> 00:04:13,473
Vaya, ¿qué está pasando aquí?

71
00:04:15,690 --> 00:04:16,950
Sí, eso es mejor.

72
00:04:16,950 --> 00:04:19,140
Y ves que ahora mismo está abierto.

73
00:04:19,140 --> 00:04:24,140
Regresemos eso al puesto 12 y ahí vamos.