Ahora a practicar el concepto de componentes.
y usando accesorios un poco más,
extraigamos partes del pie de página en un nuevo componente.
Entonces el JSX aquí dentro del componente de pie de página
se está haciendo demasiado largo,
Y entonces se me ocurrió la idea de hacer este papel aquí.
y extraerlo en su propio componente.
Así que tomemos todo esto y cortémoslo.
y luego simplemente vamos a crear un nuevo componente.
Entonces escribimos función, llamémosla orden,
y luego todo lo que tenemos que hacer
es simplemente devolver ese JSX que acabamos de crear.
Muy bien, Prettier no formateó esto.
porque en realidad nuestro código ahora es incorrecto,
porque aquí no tenemos nada
como primer valor en el operador ternario,
Así que solucionemos eso de inmediato.
Entonces, en lugar de ese JSX que teníamos aquí antes,
ahora lo que queremos es simplemente renderizar el componente de orden.
Entonces ordene y eso es todo.
Ahora, React todavía no está contento con nosotros.
y eso es porque aquí abajo,
La hora de cierre, por supuesto, ya no está definida.
Y tiene sentido porque la hora de cierre sólo se define aquí
dentro del componente de pie de página,
pero ahora el JSX que teníamos aquí antes ya no está.
y está en el componente de orden.
Entonces, ¿cómo le damos acceso a este componente de pedido?
a este valor aquí mismo?
Y espero que hayas adivinado
que la respuesta es mediante el uso de accesorios.
Como vemos aquí, los accesorios también son bastante similares.
para pasar argumentos a funciones.
Entonces todo lo que tenemos que hacer aquí es crear un accesorio.
Entonces digamos hora de apertura,
Entonces podemos darle exactamente el mismo nombre.
como la variable.
Entonces no tiene por qué ser así, pero puede ser así.
Y entonces aquí, recibamos accesorios como parámetro,
y luego podemos simplemente leer la hora cercana desde allí.
Y nuevamente, esto funciona porque hicimos el accesorio aquí.
exactamente el mismo nombre que la variable.
Entonces, si eran horas de utilería, entonces aquí, por supuesto,
también tendríamos que usar eso, ¿no?
Pero lo que importa es que esté funcionando bien.
Bueno, en realidad no estamos viendo el resultado allí,
así que volvamos a ponerlo en 12.
Y ahora, sí, recibimos el componente de pedido.
prestado allí.
Sin embargo, vemos que aquí hay un problema,
y me doy cuenta de que eso se debe a que en realidad creé un error.
Así que aquí tenemos horario cerrado,
pero lo que pasamos es en realidad el horario de apertura.
Así que no nos interesa abrir sino cerrar.
Así que esta debería ser la hora de cierre, y aquí, hora de cierre,
y aquí, también a hora cerrada como teníamos antes.
Y ahora eso está arreglado, y eso es todo.
Así es como tomamos un pedazo de JSX.
cuando el JSX en un componente se está volviendo demasiado grande
y simplemente extráigalo en su propio componente.
Y luego si ese JSX depende de algún valor
eso estaba en el componente principal, así que como esta hora de cierre,
luego simplemente lo pasamos como accesorio.
Y esto es algo que vamos a hacer todo el tiempo.
cuando construimos nuestras aplicaciones React.
Así que no siempre tenemos todos los componentes resueltos
al principio, pero en lugar de eso comenzamos a construirlos,
y luego, cuando crezcan, podemos decidir extraer
parte de ellos en un componente más.
Y ahora, como este era el último componente
que vamos a crear en este proyecto,
Te invito a tomar papel y lápiz.
y para extraer todo el componente
que acabamos de construir aquí.
Así que creo que será un pequeño ejercicio agradable.
para que tengas un mejor agarre
de cómo todos los componentes de esta aplicación funcionan juntos,
y sí, realmente entiendo la estructura
que construimos aquí para este pequeño proyecto.
Y luego, una vez que hayas terminado con eso,
simplemente puede pasar a la siguiente conferencia.