1
00:00:01,050 --> 00:00:03,930
Ahora a practicar el concepto de componentes.

2
00:00:03,930 --> 00:00:06,750
y usando accesorios un poco más,

3
00:00:06,750 --> 00:00:11,073
extraigamos partes del pie de página en un nuevo componente.

4
00:00:12,270 --> 00:00:16,710
Entonces el JSX aquí dentro del componente de pie de página

5
00:00:16,710 --> 00:00:18,870
se está haciendo demasiado largo,

6
00:00:18,870 --> 00:00:22,260
Y entonces se me ocurrió la idea de hacer este papel aquí.

7
00:00:22,260 --> 00:00:25,230
y extraerlo en su propio componente.

8
00:00:25,230 --> 00:00:28,710
Así que tomemos todo esto y cortémoslo.

9
00:00:28,710 --> 00:00:31,743
y luego simplemente vamos a crear un nuevo componente.

10
00:00:32,910 --> 00:00:36,483
Entonces escribimos función, llamémosla orden,

11
00:00:38,160 --> 00:00:39,420
y luego todo lo que tenemos que hacer

12
00:00:39,420 --> 00:00:43,383
es simplemente devolver ese JSX que acabamos de crear.

13
00:00:45,000 --> 00:00:48,060
Muy bien, Prettier no formateó esto.

14
00:00:48,060 --> 00:00:50,820
porque en realidad nuestro código ahora es incorrecto,

15
00:00:50,820 --> 00:00:52,620
porque aquí no tenemos nada

16
00:00:52,620 --> 00:00:55,260
como primer valor en el operador ternario,

17
00:00:55,260 --> 00:00:57,033
Así que solucionemos eso de inmediato.

18
00:00:58,050 --> 00:01:01,650
Entonces, en lugar de ese JSX que teníamos aquí antes,

19
00:01:01,650 --> 00:01:05,673
ahora lo que queremos es simplemente renderizar el componente de orden.

20
00:01:08,160 --> 00:01:12,393
Entonces ordene y eso es todo.

21
00:01:13,290 --> 00:01:15,810
Ahora, React todavía no está contento con nosotros.

22
00:01:15,810 --> 00:01:17,550
y eso es porque aquí abajo,

23
00:01:17,550 --> 00:01:21,180
La hora de cierre, por supuesto, ya no está definida.

24
00:01:21,180 --> 00:01:26,130
Y tiene sentido porque la hora de cierre sólo se define aquí

25
00:01:26,130 --> 00:01:28,050
dentro del componente de pie de página,

26
00:01:28,050 --> 00:01:31,680
pero ahora el JSX que teníamos aquí antes ya no está.

27
00:01:31,680 --> 00:01:33,993
y está en el componente de orden.

28
00:01:34,890 --> 00:01:38,460
Entonces, ¿cómo le damos acceso a este componente de pedido?

29
00:01:38,460 --> 00:01:40,830
a este valor aquí mismo?

30
00:01:40,830 --> 00:01:42,660
Y espero que hayas adivinado

31
00:01:42,660 --> 00:01:45,570
que la respuesta es mediante el uso de accesorios.

32
00:01:45,570 --> 00:01:49,260
Como vemos aquí, los accesorios también son bastante similares.

33
00:01:49,260 --> 00:01:51,753
para pasar argumentos a funciones.

34
00:01:52,950 --> 00:01:55,713
Entonces todo lo que tenemos que hacer aquí es crear un accesorio.

35
00:01:56,640 --> 00:01:59,310
Entonces digamos hora de apertura,

36
00:01:59,310 --> 00:02:02,010
Entonces podemos darle exactamente el mismo nombre.

37
00:02:02,010 --> 00:02:03,993
como la variable.

38
00:02:05,370 --> 00:02:08,013
Entonces no tiene por qué ser así, pero puede ser así.

39
00:02:09,870 --> 00:02:13,323
Y entonces aquí, recibamos accesorios como parámetro,

40
00:02:14,490 --> 00:02:17,523
y luego podemos simplemente leer la hora cercana desde allí.

41
00:02:19,230 --> 00:02:22,500
Y nuevamente, esto funciona porque hicimos el accesorio aquí.

42
00:02:22,500 --> 00:02:25,320
exactamente el mismo nombre que la variable.

43
00:02:25,320 --> 00:02:28,200
Entonces, si eran horas de utilería, entonces aquí, por supuesto,

44
00:02:28,200 --> 00:02:32,460
también tendríamos que usar eso, ¿no?

45
00:02:32,460 --> 00:02:36,240
Pero lo que importa es que esté funcionando bien.

46
00:02:36,240 --> 00:02:39,663
Bueno, en realidad no estamos viendo el resultado allí,

47
00:02:41,220 --> 00:02:42,873
así que volvamos a ponerlo en 12.

48
00:02:44,460 --> 00:02:47,400
Y ahora, sí, recibimos el componente de pedido.

49
00:02:47,400 --> 00:02:48,540
prestado allí.

50
00:02:48,540 --> 00:02:51,240
Sin embargo, vemos que aquí hay un problema,

51
00:02:51,240 --> 00:02:54,930
y me doy cuenta de que eso se debe a que en realidad creé un error.

52
00:02:54,930 --> 00:02:57,033
Así que aquí tenemos horario cerrado,

53
00:02:58,230 --> 00:03:01,170
pero lo que pasamos es en realidad el horario de apertura.

54
00:03:01,170 --> 00:03:04,293
Así que no nos interesa abrir sino cerrar.

55
00:03:05,250 --> 00:03:10,230
Así que esta debería ser la hora de cierre, y aquí, hora de cierre,

56
00:03:10,230 --> 00:03:14,130
y aquí, también a hora cerrada como teníamos antes.

57
00:03:14,130 --> 00:03:19,020
Y ahora eso está arreglado, y eso es todo.

58
00:03:19,020 --> 00:03:21,660
Así es como tomamos un pedazo de JSX.

59
00:03:21,660 --> 00:03:25,680
cuando el JSX en un componente se está volviendo demasiado grande

60
00:03:25,680 --> 00:03:28,860
y simplemente extráigalo en su propio componente.

61
00:03:28,860 --> 00:03:32,460
Y luego si ese JSX depende de algún valor

62
00:03:32,460 --> 00:03:36,480
eso estaba en el componente principal, así que como esta hora de cierre,

63
00:03:36,480 --> 00:03:39,060
luego simplemente lo pasamos como accesorio.

64
00:03:39,060 --> 00:03:41,520
Y esto es algo que vamos a hacer todo el tiempo.

65
00:03:41,520 --> 00:03:43,890
cuando construimos nuestras aplicaciones React.

66
00:03:43,890 --> 00:03:46,890
Así que no siempre tenemos todos los componentes resueltos

67
00:03:46,890 --> 00:03:50,010
al principio, pero en lugar de eso comenzamos a construirlos,

68
00:03:50,010 --> 00:03:53,580
y luego, cuando crezcan, podemos decidir extraer

69
00:03:53,580 --> 00:03:57,270
parte de ellos en un componente más.

70
00:03:57,270 --> 00:03:59,850
Y ahora, como este era el último componente

71
00:03:59,850 --> 00:04:02,280
que vamos a crear en este proyecto,

72
00:04:02,280 --> 00:04:05,250
Te invito a tomar papel y lápiz.

73
00:04:05,250 --> 00:04:08,100
y para extraer todo el componente

74
00:04:08,100 --> 00:04:10,170
que acabamos de construir aquí.

75
00:04:10,170 --> 00:04:13,200
Así que creo que será un pequeño ejercicio agradable.

76
00:04:13,200 --> 00:04:15,300
para que tengas un mejor agarre

77
00:04:15,300 --> 00:04:19,320
de cómo todos los componentes de esta aplicación funcionan juntos,

78
00:04:19,320 --> 00:04:22,050
y sí, realmente entiendo la estructura

79
00:04:22,050 --> 00:04:25,260
que construimos aquí para este pequeño proyecto.

80
00:04:25,260 --> 00:04:27,030
Y luego, una vez que hayas terminado con eso,

81
00:04:27,030 --> 00:04:29,523
simplemente puede pasar a la siguiente conferencia.