Ahora tomemos unos minutos para mirar atrás.
sobre todos los conceptos que acabamos de aprender
a lo largo de esta sección.
Primero que nada, aprendimos
que los componentes son los bloques de construcción
de cualquier interfaz de usuario en React.
Ahora cada componente es una pieza independiente.
de la interfaz de usuario, que incluye sus propios datos,
su propia lógica de JavaScript y su propia apariencia.
Ahora en términos prácticos, escribimos esta aparición.
usando una sintaxis declarativa que se llama JSX
y es este bloque de JSX el que finalmente
se devuelve de cada componente.
Y este JSX es lo que va a describir
exactamente lo que verá el usuario
en la pantalla cuando usan la aplicación.
Y cualquier parte de JSX puede contener algún marcado,
básicamente en forma de HTML.
Puede contener algo de CSS, que en esta sección
escribimos usando el accesorio de estilo.
Entonces usamos el accesorio de estilo y luego pasamos un objeto.
allí, que contenía algo de código CSS.
Y también normalmente el JSX contiene algo de JavaScript.
dentro de llaves, que me gusta llamar
ingresando al modo JavaScript.
Este es básicamente como escribir JavaScript.
justo dentro de HTML.
Esto es básicamente todo lo que contiene un componente.
o puede contener, y así es como lo escribimos,
así que nuevamente, usando JSX.
Ahora bien, una solicitud completa suele estar compuesta
de muchos componentes diferentes, que luego se organizan
en un árbol de componentes como este.
Entonces, en un árbol de componentes como este,
los componentes que están en la parte superior
han incluido o utilizado los componentes que se encuentran debajo de ellos,
lo que los convierte en su componente principal.
Entonces los componentes en la parte superior, por ejemplo aquí,
el componente de la aplicación es el componente principal del encabezado,
menú y pie de página.
Y estos tres, encabezado, menú y pie de página,
son el componente secundario de la aplicación.
Y al mismo tiempo, por supuesto, el menú es el padre.
componente de todos los componentes de la pizza.
Y el pie de página es el componente principal del pedido.
Entonces, obviamente, un componente puede ser un padre.
y un niño al mismo tiempo.
Ahora, para compartir datos entre componentes,
Los componentes principales pueden pasar datos.
en un componente secundario directo usando accesorios.
Entonces, para cada valor que queremos transmitir,
simplemente definimos un accesorio, que es la abreviatura de propiedad.
Y así, usando accesorios, podemos configurar los componentes como queramos.
Por ejemplo, en esta aplicación,
hicimos muchas pizzas diferentes creando
un componente de pizza y luego pasar
en diferentes objetos de pizza en ese componente,
renderizándolo varias veces con un accesorio diferente.
Ahora es muy importante entender.
que los accesorios solo se pueden pasar por el árbol,
así que sólo de padres a hijos,
pero nunca al revés.
Ahora algo que hacemos todo el tiempo.
en aplicaciones React es renderizar múltiples componentes
del mismo tipo haciendo un bucle sobre una matriz.
Y esto es lo que llamamos crear una lista.
Entonces, en la aplicación que acabamos de crear,
Creamos una lista de pizzas haciendo un bucle.
sobre la matriz de pizza usando el método de mapa de JavaScript.
Y entonces, en React, no hay nada especial para crear listas.
Todo lo que necesitamos saber es el método del mapa.
que está disponible en todas las matrices de JavaScript.
Entonces nuestro conocimiento de JavaScript es más
más que suficiente para recorrer una matriz
para crear listas de componentes del mismo tipo.
Y finalmente, también aprendimos sobre el renderizado condicional.
Entonces esa es otra cosa que hacemos todo el tiempo.
para renderizar componentes sólo cuando
se cumplen ciertas condiciones.
Y al igual que las listas de renderizado,
podemos renderizar componentes condicionalmente
mediante el uso de herramientas comunes de JavaScript que ya conocemos,
por ejemplo, el operador final, el operador ternario,
y también usando múltiples devoluciones, y eso es todo.
Entonces estas son las cosas más prácticas.
que acabamos de aprender y que aplicamos
al proyecto que venimos construyendo.
También aprendimos algunas cosas más teóricas.
como la diferencia entre imperativo
y enfoques declarativos.
Aprendimos sobre la separación de preocupaciones.
Aprendimos exactamente por qué no podemos mutar accesorios,
que es otra cosa importante que aprendimos.
Y sí, también aprendimos muchas cosas más teóricas.
que no voy a abordar ahora.
Para que siempre puedas volver a ver esas conferencias.
si estás interesado.
Aquí sólo quería resumir los aspectos prácticos.
de todo lo que acabamos de hacer en esta sección.
Así que espero que esto haya sido útil.
Y ahora para cerrar este apartado,
hay un último desafío de codificación
esperándote donde acabaremos de terminar el desarrollador
tarjeta de perfil que comenzamos inicialmente.
Espero verte allí muy pronto.