Recuerde que dije antes que la representación de listas es una
¿Cuáles son las tareas más comunes en el desarrollo de React?
Bueno, esta aplicación no es una excepción.
Y ahora rendericemos la lista de elementos picoteados.
Y antes que nada, vayamos a nuestro archivo CSS.
porque ahí es nuevamente donde pegué
este conjunto de elementos iniciales.
Así que aprovechemos eso.
También podemos cerrar index.js
y lo pegaré aquí en la parte superior.
Entonces ves que tenemos una vez más
una matriz con algunos objetos, y en este caso
cada objeto describe un artículo que se va a empaquetar.
Entonces cada uno de ellos tiene un ID, una descripción, una cantidad,
Propiedad empaquetada NT OD
lo que nos dice si éste ha sido empaquetado o no.
Entonces basado en esto
Luego mostraremos el artículo de forma un poco diferente.
Entonces aquí, bueno aquí no tenemos ninguno.
Entonces aquí en la aplicación de demostración.
Entonces ves ahorita no está empacado, pero si está empacado
entonces ves que es como tachado.
Bien, ahora tomemos estos elementos de aquí y
renderícelos como una lista en nuestra interfaz de usuario.
Así como lo dice el nombre
vamos a hacer eso en la lista de empaque.
Primero que nada, usemos nuevamente HTML semántico.
y convierta esta diferencia en un UL.
Entonces en una lista desordenada.
¿está bien?
Y luego inmediatamente aquí ingresamos al modo JavaScript.
porque ¿recuerdas cómo representamos listas en React?
Bueno, simplemente usamos el método del mapa que ya conocemos.
en la matriz.
Así que los puntos iniciales, y más adelante, por supuesto,
luego, cuando hagamos esto dinámico, use otra matriz aquí.
Pero de nuevo, por ahora sólo queremos representar algo
así que solo para que esto funcione.
¿bueno?
Luego dentro del método del mapa.
cada uno de los elementos será, digamos, un ítem.
¿está bien? Y luego para cada elemento
lo que queremos representar es un componente de elemento.
Así que escribamos eso aquí inmediatamente.
y luego crearemos el componente del artículo en un minuto.
Entonces el elemento, y luego pasamos como accesorio, el elemento completo.
Entonces, elemento y luego elemento nuevamente, cerremos esto aquí.
Como ves, tenemos muchos artículos aquí.
Entonces el nombre del componente, el nombre del accesorio,
y luego aquí el objeto mismo
cuál, recuerda, es el argumento
de esta función de devolución de llamada en cada iteración sobre esta matriz.
Espero que no haya nada nuevo aquí en este momento.
Por lo tanto, un regalo es una caja fuerte, pero, por supuesto, el artículo no está definido.
Así que ocupémonos rápidamente de eso.
Y ahora tenemos que aceptar los accesorios, ¿verdad?
Entonces podemos hacerlo así, recuerda, pero aún mejor.
podemos desestructurar esto inmediatamente
y luego dale el nombre aquí
del accesorio que pasamos, que es el elemento.
Y nuevamente, podría ser cualquier cosa.
Podría ser un objeto como O, B, G, X o cualquier cosa.
Pero sí, aquí es más fácil llamarlo elemento.
porque eso es lo que es.
Es sólo un artículo de embalaje, por así decirlo.
Entonces aquí, este elemento debería ser ahora un elemento LI.
Entonces, un elemento de la lista, porque eso es lo que normalmente dirige a los niños.
de la UI o del elemento UL debe ser.
Y luego solo para empezar, solo para ver si está funcionando.
Simplemente rendericemos, creo que se llama descripción.
si eso es.
En realidad, simplemente lo copiaremos.
Entonces, descripción del punto del artículo, dale una caja fuerte.
Y ahí está.
Entonces tenemos pasaportes y calcetines.
Ahora el estilo aquí está un poco fuera de lugar.
Y la razón de esto es
que aquí realmente cometí un error en el HTML.
Así que aquí vamos a crear una diferencia y luego
es esta diferencia la que se supone que tiene la clase de lista.
¿está bien?
Y la razón de esto es que más adelante
Tendremos otro elemento aquí para estos filtros.
Entonces tendremos una diferencia para estas dos cosas aquí abajo.
está bien.
Por supuesto, para mí eso es fácil de ver ahora.
porque ya creé la aplicación de antemano.
Pero una vez que empieces a crear tus aplicaciones por tu cuenta
habrá mucho más ida y vuelta
lo cual por supuesto no puedo hacer aquí en este curso
porque entonces tomará una eternidad.
Bien, pero de todos modos, ahora agreguemos algo más aquí.
Entonces no solo queremos una descripción.
También queremos este ícono aquí para el líder.
Y luego querremos esta casilla de verificación.
pero en realidad dejemos eso para más tarde.
Entonces aquí, creemos un elemento de giro.
Entonces, para el texto, tomémoslo y péguelo aquí.
Y luego también queremos el punto del elemento.
Veamos, es exactamente la cantidad de puntos del artículo.
Entonces, cantidad de puntos del artículo.
Y fíjate como a veces creas más bonitas como
estas cadenas vacías aquí en nuestro JSX
muchas veces esto no es necesario.
Así que deshazte de eso.
Y ahora, finalmente, necesitamos el botón Eliminar.
Y por ahora, no adjuntaremos ningún controlador de eventos aquí.
pero aquí simplemente colocaremos un ícono en forma de emoji.
Entonces tal vez así.
Entonces esta X aquí.
Y nuevamente, si no puedes hacer que esto funcione
entonces puedes escribir la X así o también así.
Entonces eso también funcionaría.
Muy bien, esto ahora se ha renderizado aquí según
fuera de esta lista.
Y si duplicamos esto y agregamos algo más aquí
como un cargador, un cargador, y ahí está.
Ahora, para terminar, marquemos uno de ellos como empaquetado.
Haz esto realidad
para que podamos agregar algún estilo adicional aquí.
Así que básicamente queremos lograr una huelga por ahí.
Entonces eso es algo simple.
Así que vayamos aquí al tema.
Y ahora agregaremos condicionalmente algo de estilo.
Entonces, en lugar de agregar condicionalmente una clase aquí
Quiero simplemente agregar algo de estilo de manera condicional.
Así que escribamos estilo.
y luego ingresa inmediatamente al modo JavaScript.
Pero ahora no escribiré el objeto inmediatamente.
de propiedades CSS.
En lugar de eso, usemos el operador ary para
decide qué objeto debería recibir realmente el estilo.
Entonces, si el artículo está empacado y aquí realmente no lo hacemos.
Necesito una condición porque esto ya es un lingote.
Entonces si está lleno
entonces queremos un objeto que contendrá algo de CSS
para el tachado, pero si no,
así que si el artículo no está embalado,
entonces querremos devolver este objeto vacío.
Y entonces no se aplicarán estilos.
Entonces la propiedad CSS que estamos buscando
se llama decoración de texto
y vamos a configurarlo para que se alinee así.
Y eso funcionó bastante bien.
Muy bien, probemos con otro sólo por diversión.
Y sí, inmediatamente ves
que también se tache.
Entonces esta era otra manera
de utilizar el operador de respuesta para
establece algo de estilo aquí.
Como ves, tenemos mucha libertad en React,
y nuevamente simplemente usamos las herramientas de JavaScript
que ya tenemos para este tipo de cosas.