Entonces, con nuestro nuevo conocimiento sobre JSX,
ahora creemos un par de componentes más
para seguir construyendo nuestra aplicación.
Pero antes de hacer eso, este es probablemente el momento perfecto.
para mostrarle la aplicación como se verá
una vez que hayamos terminado con esta sección.
Básicamente, tenemos este encabezado aquí.
con el nombre de una pizzería.
Luego aquí abajo tenemos el menú,
y luego básicamente aquí tenemos algún tipo
de pie de página informando al usuario
que el restaurante está actualmente abierto, y este botón,
que por supuesto no hace nada una vez que hacemos clic en él.
Entonces, aquí está el corazón de esta aplicación,
cual es la presentación de estas seis pizzas,
Y observe cómo ya mostramos esta pizza aquí.
Y pues aquí ves que vamos.
reutilizar este componente de la pizza seis veces
para poder imprimir estas seis pizzas.
¿está bien?
Pero ahora lo que quiero hacer en esta conferencia es
Básicamente, centrarse más en estos componentes de diseño más grandes.
Entonces, creemos un componente.
para cada una de estas tres grandes partes.
Entonces, uno para el encabezado.
Entonces, un componente llamado Encabezado,
y podemos dejar esto vacío por ahora.
Recién estamos construyendo aquí la estructura.
Luego, uno para el menú,
y luego uno para el pie de página.
Y aquí siempre me faltan los paréntesis,
entonces eso no es bueno.
Sí! Genial.
Y por cierto,
Por supuesto, también podríamos escribir estas funciones.
como expresiones de función y funciones de flecha.
Entonces, también podríamos hacer const, llamémoslo prueba,
función igual como esta.
O incluso más simple, podría ser una función de flecha.
Entonces, si prefieres este tipo de funciones,
siéntete libre de usarlos,
pero siempre me gusta usar las palabras clave de función habituales.
como lo he estado usando.
Pero de todos modos, ahora volvamos algo desde aquí.
Y aquí es donde escribimos ese nombre del restaurante,
que es Fast React Pizza Company.
Muy bien, ahora podemos usar este componente en su lugar.
de este h1.
Y nuevamente, lo incluimos aquí.
como si fuera un elemento HTML más,
Y esa es la belleza de JSX.
Entonces, cambió a Fast React Pizza Co. aquí y ahora,
Y a continuación creemos un pie de página.
Y aquí vamos a jugar un poco.
con JSX y con elemento de creación.
Entonces, usando el conocimiento que adquirimos
en la conferencia anterior,
en lugar de regresar inmediatamente a JSX,
devolver una llamada de creación de elemento.
Entonces, React.createElement,
sólo para que puedas ver cómo
Malo sería escribir componentes de esta manera sin JSX.
Entonces queremos devolver una nota HTML, es decir, un elemento HTML,
pie de página con nombre.
Entonces aquí, el segundo argumento es nulo.
porque es para accesorios,
y luego aquí está el elemento hijo.
Así que aquí solo queremos algo de texto.
digamos.
Los anteriores ahora deben ser una cuerda.
Actualmente estamos abiertos.
Y ahora, por supuesto, necesitamos
para luego usar el componente aquí en la aplicación.
Ese es el pie de página, ciérrelo inmediatamente.
Y veámoslo aquí abajo.
Sí, ahí está nuestro pie de página.
Eso también lo podemos ver aquí, al menos si tuviéramos algo de espacio.
Sí, entonces en el cuerpo tenemos, por supuesto,
nuestra raíz, donde se representa toda la aplicación.
Luego tenemos este div aquí, que es este.
Entonces, viniendo del componente de la aplicación,
y luego tenemos aquí el h1, que es este de aquí,
y luego estos tres divs, cada uno para una pizza,
y finalmente el pie de página que acabamos de crear.
Por supuesto, aquí en el HTML real
ya no veremos el nombre de nuestros componentes ¿verdad?
Porque una vez que React convierte todo en el dom,
solo representa el elemento h1 en sí.
Entonces el dom no sabe que este h1 realmente viene
de este componente de encabezado y que estos divs,
por ejemplo, en realidad provienen de un componente de pizza.
Esta página web que ahora se está representando aquí.
No tiene idea de nada de eso.
¿bueno?
Pero de todos modos, volviendo aquí a nuestro pie de página,
ahora comentemos esto,
y luego devolver lo que realmente queremos devolver,
que por ahora es lo mismo
pero escrito de una manera agradable.
Así que actualmente estamos abiertos,
y ahora ingresemos al modo JavaScript aquí.
¿Por qué no? Sólo para hacer algo de JavaScript aquí.
y solo mostremos la hora actual.
De hecho, hicimos eso antes.
Entonces, simplemente crea una nueva fecha,
y luego .toLocaleTimeString.
está bien.
Y aquí abajo, vemos eso ahora mismo.
es esta vez que estamos abiertos.
lindo.
Entonces, este es el poder de poder
combinar JavaScript básicamente directamente en HTML.
Entonces, tal como aprendimos en la conferencia anterior.
Ahora finalmente tenemos el menú aquí.
¿Y qué queremos en el menú?
Bueno, comencemos agregando un h2 aquí,
solo diciendo nuestro menú,
y luego coloquemos nuestras pizzas aquí.
Entonces, estas pizzas deberían ser parte del menú.
Entonces, hagamos eso.
Puedes escribir simplemente pizza, pero claro,
React no va a estar contento con eso,
porque recuerda cada vez que escribimos una pieza de JSX,
ese JSX solo puede tener básicamente un elemento raíz.
está bien.
Entonces, quitemos todas las pizzas.
Así que los corto y los coloco aquí.
Y ahora se han ido de aquí
porque aún no incluimos el menú.
Entonces, hagámoslo rápidamente.
Y ahí vamos.
Entonces tenemos el mismo resultado que antes,
pero ahora nuestros componentes están aún más anidados.
Entonces todo esto aquí es el componente de la aplicación,
y luego dentro de la aplicación
tenemos el componente de menú anidado en él,
y luego dentro del menú
Tenemos estos cuatro componentes de pizza.
Y entonces, ahora realmente empiezas a ver esta idea.
que construimos interfaces de usuario complejas
combinando componentes pequeños en otros más grandes.
Tenemos estos componentes de pizza realmente pequeños,
luego combinamos un par de ellos
en un componente un poco más grande,
cuál es el menú, que luego combinamos con el encabezado
y pie de página para crear el componente general de la gran aplicación.