[Instructor Jonas] Para terminar este proyecto aprendamos
cómo establecer condicionalmente algún texto dentro de elementos
y también cómo establecer condicionalmente nombres de clases.
Entonces, si echamos un último vistazo a nuestro proyecto final
la única diferencia es que esta pizza aquí
eso esta agotado
tiene este texto de agotado en lugar del precio.
Y todo el elemento aquí está atenuado.
Sólo para mostrar que no está disponible.
Y ahora hagámoslo.
Ahora mismo tenemos esta línea de código aquí.
lo que hace que la pizza esté agotada
ni siquiera se muestra.
Así que comencemos por deshacernos de eso.
Y ahora estamos listos para mostrar condicionalmente algo de texto.
y lo vamos a hacer aquí mismo.
Entonces la diferencia entre lo que hicimos antes es que
antes de renderizar condicionalmente todo este elemento aquí
pero ahora eso no es lo que queremos.
Ahora ya sabemos que queremos este elemento span aquí.
pero todavía no queremos el contenido.
Y ahora establezcamos eso condicionalmente,
y eso es muy fácil.
Una vez más, usaremos nuestro operador ternario.
Entonces digamos objeto de pizza
punto agotado,
entonces el texto aquí debería ser,
¿Y ahora qué crees que necesitamos aquí?
Bueno, en realidad es sólo una cuerda.
Entonces, agotado.
Y si no, entonces queremos el precio de la pizza.
Guárdalo y,
Sí, bien, eso funcionó.
Pongámoslo en mayúsculas.
Debería ser manejado por el CSS,
pero también podemos hacerlo así ahora, ¿verdad?
Así que apreciemos nuevamente la diferencia aquí.
Entonces no estamos configurando el elemento condicionalmente,
que por supuesto podríamos.
Hagámoslo rápidamente porque ¿por qué no?
Entonces podríamos decir,
si pizza objeto
no agotado
luego muestra este lapso con agotado
y si no
luego muestra el lapso con pizza
precio punto.
Entonces el resultado va a ser exactamente el mismo.
como vemos aquí abajo,
pero lo que hicimos es fundamentalmente diferente.
Entonces aquí ya sabemos que queremos un elemento span.
simplemente aún no sabemos el contenido.
Mientras estamos aquí, aparentemente tampoco lo sabemos todavía
qué elemento queremos.
Aunque en ambos casos estamos usando un lapso.
Por eso creo que es mucho mejor hacerlo así.
Entonces, para establecer condicionalmente el contenido de texto de un elemento
En mi opinión, esto es mucho más limpio.
Pero sólo como referencia, dejaré este aquí también.
bueno. Y ahora, finalmente, en cuanto al nombre de la clase,
cada vez que la pizza se agota,
podemos agregar la clase agotada al LI,
que luego lo atenuará.
Déjame mostrarte eso.
Simplemente puedes agregarlo a todos ellos.
Y entonces verás que este es el resultado que buscamos,
pero por supuesto solo queremos esta parte aquí
cuando la pizza está realmente agotada.
Entonces usemos nuevamente nuestro operador ternario para eso.
Entonces así es como lo vamos a hacer.
Ahora usaremos en lugar de una cadena normal,
un literal de plantilla.
Entonces eliminando la cita y eliminando esto.
Pero ahora esto es en realidad JavaScript.
Entonces un literal de plantilla es JavaScript
por lo tanto, ingresemos al modo JavaScript.
Guárdalo.
Y por ahora, es exactamente lo que teníamos antes.
Pero ahora, dentro de esta plantilla literal, podemos,
bueno, ingrese el literal de la plantilla
Modo JavaScript también de esta manera.
Así que recuerda que en realidad es bastante similar.
La idea es ingresar al modo JavaScript dentro de JSX, ¿verdad?
La diferencia aquí es que en el literal de plantilla
Para agregar algún fragmento de código también necesitamos este, ¿verdad?
Entonces este signo de dólar.
Pero aquí podemos una vez más
haz uso de nuestro amigo el operador ternario.
Entonces podemos decir objeto de pizza.
agotado.
En caso afirmativo, aquí danos la cadena de agotados.
Pero si no, entonces sólo una cadena vacía.
Y esto debería ser suficiente.
Y sí, hermosa.
Así que esto es exactamente lo que buscábamos.
Entonces, recapitulemos por qué funcionó esto.
Entonces tenemos nuestra plantilla literal,
y luego aquí simplemente escribimos una expresión JavaScript.
Y entonces con el operador ternario,
comprobamos si esto existe y si es así.
Entonces, si esto es cierto,
entonces el resultado de este operador se agotará.
Y entonces todo esto aquí se agota.
Y luego la cuerda es exactamente la que teníamos antes.
Así que el espacio para pizzas se agotó.
Pero si esto es falso,
entonces simplemente no devolveremos nada aquí.
Entonces la cuerda es solo pizza,
que es lo que tenemos aquí en todos estos casos.
Entonces ves aquí, la clase es solo pizza.
con el espacio por supuesto que tenemos aquí,
pero eso no es ningún problema.
Y aquí tenemos la pizza agotada.
excelente. Así es como establecemos condicionalmente
algunas clases de CSS en elementos.
Entonces todo sin usar la propiedad sin clases.
que tendríamos que usar en Vanilla JavaScript.
Y para esto de aquí abajo, recuerda en Vanilla JavaScript
Tendríamos que hacer alguna manipulación de daños.
con la propiedad de contenido de texto
o HTML interno o algo así.
Pero aquí con la naturaleza declarativa de JSX y React
todo se vuelve un poquito más fácil
y es más agradable trabajar con él.
Y ahora sólo un último detalle.
Vayamos aquí a nuestra carpeta pública.
Y en el índice punto HTML
querremos establecer ahora el título del documento.
Así que aquí tenemos Fast React Pizza Co.
Pero aquí solo dice React Up predeterminado, lo cual es un poco feo.
Entonces digamos Fast React Pizza Co.
y eso es.
Entonces, con esto, realmente terminamos nuestra aplicación.
y nuestro primer proyecto.
Así que felicidades por llegar hasta aquí.
hasta el final de esta larga sección.
Y ahora solo para terminar esta sección.
tendremos una conferencia para repasar todo
que simplemente aprendimos porque fue mucho.
Y finalmente,
hay otro desafío de codificación esperándote
solo para que puedas practicar nuevamente lo que aprendiste aquí
en las últimas conferencias.
Pero antes de ir allí, te invito una vez más a
consulte el código completo que escribimos aquí juntos
ver cómo se relacionan todos los componentes
y realmente mira de nuevo
todo lo que aprendiste incluso antes de pagar
esa conferencia resumida que va a seguir.
Y después de eso, por supuesto,
Mire esa conferencia para transmitir realmente el mensaje.