Las listas de renderizado es una de las cosas más comunes.
que hacemos básicamente en todas las aplicaciones de React.
Probablemente lo harás como 100 veces.
a lo largo de este curso
Entonces, ahora aprendamos cómo representar listas en React.
Pero antes que nada, ¿a qué nos referimos realmente?
renderizando listas?
Bueno, básicamente renderizar una lista es cuando tenemos una matriz.
y queremos crear un componente
para cada elemento de la matriz.
Entonces, por ejemplo, aquí tenemos todos los datos iniciales, ¿recuerdas?
Entonces aquí tenemos una serie de estos objetos.
donde cada objeto es una pizza.
Y como puedes imaginar,
Ahora básicamente queremos representar esta lista.
Básicamente queremos tomar esta matriz,
y para cada uno de estos objetos de pizza,
queremos crear automáticamente un componente de pizza aquí
en nuestra interfaz de usuario.
Entonces en lugar de llamar o usar aquí
el componente de pizza manualmente uno por uno,
queremos hacerlo todo a la vez de forma dinámica.
Entonces, si tenemos como cuatro pizzas en el conjunto,
entonces queremos que se representen cuatro componentes.
Pero si tenemos como seis o 10,
entonces queremos que aparezcan 10 componentes aquí en nuestra aplicación.
Bien, ahora aprendamos cómo hacer esto.
Ahora, la belleza de React es que, para muchas cosas,
Todo lo que realmente necesitamos es el conocimiento de JavaScript.
que ya tenemos.
Así, por ejemplo, para representar listas,
No hay nada nuevo sobre React que debamos aprender.
Entonces no nos da un elemento de lista que podamos usar.
o algo como esto.
Todo lo que necesitamos es el conocimiento de JavaScript.
que ya tenemos.
Y en este caso, todo lo que necesitamos es el método del mapa.
Entonces déjame mostrarte cómo después de toda esta charla.
Así que creemos una nueva diferencia aquí.
y luego convertiremos esto en un elemento de lista real
pero comencemos con cualquier elemento aquí.
Realmente no importa cuál.
Y para empezar, comentemos también este código.
aquí mismo y tal vez te hayas dado cuenta aquí por cierto,
que un comentario en JSX es simplemente otra vez
ingresando al modo JavaScript así que con estas llaves
y luego esto es solo un comentario de JavaScript.
Entonces esta es una de las reglas de JSX que en realidad fue
en una de las diapositivas
o en realidad en la única diapositiva de la conferencia anterior.
Entonces, si lees eso, entonces ya estás familiarizado con esto.
Pero de todos modos, ahora rendericemos nuestra lista de pizzas.
Recordemos, sí, se llama datos de pizza.
Así que ingresemos al modo JavaScript aquí.
y luego tomemos nuestros datos de pizza,
que recuerde es solo una matriz.
Y luego mapeemos sobre ello.
Entonces, en el mapa, básicamente recorremos esta matriz
y crear una nueva matriz.
Entonces, en estos datos de pizza, cada elemento es una pizza.
Entonces hagamos esto y lo que queremos en esta nueva matriz,
entonces en la nueva matriz ese será el resultado del mapa
es para cada pizza, un componente de pizza.
Y ahora podemos simplemente pasar todos estos accesorios.
en dinámicamente aquí.
Primero cerrémoslo así.
Entonces ahora podemos decir pizza. y creo que es el nombre,
pero comprobemos.
Sí, tenemos nombre, ingredientes, precio, datos fotográficos.
e incluso esta otra propiedad.
Entonces, si lo guardo ahora mismo,
ya deberíamos ver los seis componentes allí
y de hecho, hermosa.
allí están.
Aqui les falta la imagen y los precios supongo.
Pero en principio ya funciona.
Como puede ver aquí, ahora obtenemos estos console.logs aquí.
Para cada una de las pizzas, exactamente cuáles son los nombres que tenemos aquí.
Y ahora ya estamos generando una lista.
Entonces, una lista basada en estos datos de pizza.
Ahora podríamos seguir aquí
y básicamente agregar otra propiedad ahora
para el nombre de la foto, por ejemplo.
Entonces podemos hacer pizza.photoname y así sucesivamente.
Pero normalmente no es así como lo hacemos.
Normalmente lo que hacemos es pasar el objeto completo.
en el componente más específico,
entonces eso es pizza en este caso,
y luego dentro de ese componente, entonces tendríamos
sacar la información que queremos del objeto.
Así que ahora cambiemos la forma en que pasamos los accesorios a esta pizza.
y simplemente pasa pizza y digamos tal vez objeto de pizza
solo para hacerlo un poco menos confuso
y luego o modo JavaScript
y luego el objeto de pizza actual.
Está bien y ahora todo se rompe aquí.
Porque necesitamos adaptar, por supuesto, nuestra pizza.
Ahora aquí tenemos props.pizzaobject.photoname, ¿verdad?
Entonces peguemos esto aquí en todas partes.
y aquí y aquí y aquí.
Y un poco más tarde nos haremos la vida un poco más fácil.
con algunas técnicas adicionales.
Pero por ahora, sigamos con esto.
Y ahí lo tienes.
Ahí tienes una lista de todas las pizzas.
basado en nuestra matriz de datos de pizza.
Deshagámonos de esto.
y claro, si ahora quitamos algo de aquí,
Entonces esa última pizza de allí va a desaparecer.
Verás, pero volvamos a colocarlo y sí, ahí está.
Ahora observe cómo tenemos un error aquí en la consola.
Así que avancemos un poco y veamos qué obtenemos.
Entonces tenemos esta advertencia que dice que cada niño
en una lista debe tener una propiedad clave única.
Básicamente, lo que esto significa es que cada vez que renderizamos
una lista como esta.
¿Dónde está?
Sí, cada vez que representamos una lista con el método del mapa,
cada uno de los elementos que se renderizan
necesita una propiedad clave única.
Entonces, la clave es básicamente un accesorio interno de React,
que necesita para algunas optimizaciones de rendimiento
y por ahora, no es realmente importante lo que eso significa
como aprenderemos más adelante qué es exactamente esta propiedad K
y lo que hace.
Por ahora lo que importa es que pasemos algo por aquí
que es único para cada elemento.
Entonces a cada pizza en este caso, y ese es el nombre.
Entonces el nombre en este ejemplo es siempre único.
Entonces podemos usar esa como clave única.
y entonces la advertencia aquí desapareció.
Bien, ahora lo siguiente que quiero hacer es convertir esto aquí.
desde una simple diferencia hasta un UL, por lo que es una lista desordenada.
Y luego cada una de estas pizzas.
debe ser un elemento de lista o un elemento de lista, por lo que un LI.
Por eso es muy importante que escribamos marcado semántico.
como este, que muchos cursos de alguna manera pasan por alto
pero creo que es bastante importante.
Y aquí también nos falta un nombre de clase importante.
para finalmente aplicar un poco más de estilo aquí,
que son solo pizzas
y entonces esto pone las pizzas muy bien
en esta cuadrícula y hace que se vea aún mejor.
Así que estoy muy feliz aquí con este diseño como este.
Y ya empieza a parecerme muy familiar.
a lo que tenemos aquí, verdad.
Nos falta este botón.
El texto aquí es un poco diferente y tenemos
Un estilo especial aquí cuando la pizza está agotada.
Por eso hablaremos de esto aquí muy pronto.
Pero por ahora, repasemos rápidamente lo que hicimos.
en esta conferencia
Y esa es fundamentalmente esta parte de aquí.
Entonces el objetivo era renderizar un elemento de pizza.
para cada uno de los objetos que hay dentro
la matriz de datos de pizza.
Y la forma en que lo hacemos en React es simplemente usando
el método de mapa en esta matriz,
y en caso de que no estés del todo seguro
qué hace el método del mapa, por favor regrese
a la sección anterior donde te presentaré
a todos los métodos de matriz más importantes
que utilizamos todo el tiempo.
Y éste es probablemente el más importante.
Entonces creará una nueva matriz,
y en esta matriz, en cada posición,
Habrá un nuevo componente de pizza.
Y en cada uno de estos componentes de la pizza,
Pasamos como accesorio el objeto pizza actual, ¿verdad?
Entonces lo recibimos aquí como apoyo, y desde allí,
leemos todos los datos que nos interesan.
Muy bien, ahora por supuesto tampoco podríamos tener
este componente.
Déjame mostrarte eso rápidamente a ti también.
Así que copiemos esto.
Y bueno, entonces simplemente podemos reemplazarlo aquí y pegarlo allí.
Y luego, por supuesto, tenemos que deshacernos de todo esto.
Entonces los estoy reemplazando todos al mismo tiempo.
y por favor no siga este código aquí.
Entonces no es necesario que hagas esto.
Solo quiero mostrarles que también podríamos haberlo hecho.
sin como el componente intermediario.
Entonces lo único que importa aquí es que devolvamos algo de JSX.
Entonces podemos escribir directamente un JSX aquí.
pero normalmente lo que hacemos es colocar ese JSX
en otro componente.
Así que volvamos y allá vamos.
Ahora, habrás pensado que tal vez aquí usamos
a para cada uno porque suena un poco más lógico.
Quizás quisiéramos hacer una pizza para cada uno de estos.
pero eso realmente no funcionaría.
Intentemos eso y verás que luego no pasó nada.
Y eso es porque aquí dentro de este UL
De hecho, necesitamos algo de JSX.
Y la única forma de conseguir ese JSX es creando una nueva matriz.
Y eso es lo que hace MAP.
Entonces crea una nueva matriz, que, en este caso,
contienen estas seis pizzas.
Y entonces aquí tendremos esta matriz.
con todas estas pizzas y luego React lo sabe
cómo renderizar eso.
Bien, una técnica muy, muy importante.
Asegúrate de memorizar esto.
o si no quieres memorizar, no te preocupes,
porque harás esto docenas de veces
A lo largo del curso.