Otra técnica muy importante
que usamos todo el tiempo en el desarrollo de React
es representación condicional.
Entonces, en este video y los dos siguientes,
hablaremos de tres formas de renderizar algo de JSX,
o incluso un componente completo,
basado en una condición
y comenzando en esta conferencia con el operador &.
Entonces, recuerda hace mucho tiempo creamos esto.
Variable isOpen aquí en el pie de página.
Básicamente esta variable nos dice
si actualmente el restaurante está abierto,
lo cual sucede cuando la hora actual es entre las 12 y las 22.
Y ahora lo que queremos hacer es
básicamente solo representar algo aquí dentro del pie de página
si el restaurante está abierto actualmente.
Y de eso se trata el renderizado condicional.
Básicamente se trata de renderizar una parte de la interfaz de usuario.
no importa si es una pieza de JSX,
o si es un componente completo,
en base a una determinada condición.
Y nuevamente, en este caso,
la condición es simplemente si el restaurante
está actualmente abierto o no.
Así que deshagámonos de todo esto.
Y luego aquí, ya que vamos a usar JavaScript,
entremos en modo JavaScript
usando estas llaves una vez más.
Entonces, como mencioné inicialmente en esta conferencia,
vamos a hacer renderizado condicional
con el operador &
y eso funciona debido al cortocircuito.
Ahora, en caso de que no estés seguro de lo que significa un cortocircuito,
y cómo funciona con el operador &,
entonces por favor regrese a la sección anterior
donde tengo una conferencia completa sobre eso.
Pero en pocas palabras,
si tenemos algún valor verdadero o veraz,
como está abierto,
y si luego usamos el operador &,
luego la segunda parte del operador &,
entonces, lo que sea que venga aquí,
será devuelto en caso de que la condición sea verdadera.
Así que escribamos algo muy simple aquí.
Recién abierto.
Entonces así.
Y vamos a comprobarlo.
Y efectivamente, dice abierto.
Y nuevamente, la razón de eso
es la forma en que funciona el operador &.
Entonces isOpen es actualmente cierto como podemos ver.
desde este console.log aquí,
y entonces, como esto es cierto,
se devolverá la segunda parte del operador &.
Ahora, cambiemos esto aquí.
Decir que el restaurante abre a las 20 horas.
Entonces, aquí obtenemos falso.
Y luego aquí abajo, bueno, básicamente no conseguimos nada.
Y ese es el cortocircuito en acción.
Entonces, el cortocircuito significa que si esta condición,
Entonces, si este valor aquí es falso o falso,
Luego la segunda parte de la operación.
Ni siquiera será ejecutado.
Entonces JavaScript ni siquiera mirará esto.
y luego no se representa nada.
Entonces el resultado aquí es verdadero,
cual es el resultado de esto,
pero React en realidad no se hace realidad
o falso en el DOM.
Y es por eso que esto funciona.
Así que déjame mostrarte esto aquí muy rápido.
Entonces, si escribimos falso aquí,
entonces un valor booleano,
Entonces ves que no aparece aquí.
Y lo mismo ocurre con la verdad.
Entonces eso no está ahí.
Bien, escribamos algo un poco más agradable aquí como,
"Estamos abiertos hasta"
y luego aquí, leamos la hora cerrada.
y luego formatéelo un poco.
"Ven a visitarnos o haz tu pedido en línea".
Y como ya estamos aquí,
Creemos también este pequeño botón que tenemos aquí abajo.
Ahora, ahora mismo aquí no podemos ver nada,
Así que retrasemos el horario de apertura.
para que nuestro restaurante esté realmente abierto.
lindo.
Y ahora resumamos todo esto en una diferencia.
Entonces diferencie con el nombre de clase de "orden".
Entonces terminemos esto aquí.
y luego cree un botón con el nombre de clase de orden "btn".
Y luego obtenemos todos los estilos.
de la hoja de estilo que incluimos al principio.
hermoso.
Ahora sólo observe aquí que estamos haciendo exactamente
lo que aprendimos en la conferencia sobre las reglas de JSX,
y en particular,
Estamos dentro de este modo JavaScript aquí.
devolviendo algo más de JSX,
lo cual está perfectamente bien.
Como aprendimos al final,
Esta también es solo una expresión de JavaScript.
Y es por eso que esto funciona.
lindo.
Este es un buen caso de uso de renderizado condicional.
Veamos otro.
Entonces, digamos que solo queremos mostrar este menú aquí.
en caso de que realmente tengamos algunas pizzas.
Entonces, antes que nada,
en realidad consigamos,
Sí, en realidad está aquí.
Básicamente, sólo queremos mostrar esta lista.
en caso de que tengamos unas pizzas.
Así que para empezar,
De hecho, creemos una nueva variable aquí rápidamente.
que llamaré pizzas
y lo estableceré igual a pizzaData.
Y luego aquí, usemos eso.
Y luego, pizzas.
Y luego hagamos nuevamente el renderizado condicional.
Entonces nuestro primer comienzo de una manera que realmente no va a funcionar.
pero sigamos adelante por ahora.
Entonces podemos volver a hacer pizzas.
y &.
Bueno, entonces esto.
Así que cortemos eso, péguelo aquí,
y ahí vamos.
Y por eso nuestras pizzas siguen aquí.
porque las pizzas son un valor veraz.
Y entonces este comportamiento del operador &
no sólo funciona para valores verdaderos y falsos,
sino también por los valores de verdad y falsedad.
Ahora, el problema con esto es
eso digamos que en realidad no tenemos pizzas.
Entonces pizzas equivale a una matriz vacía.
Bueno, entonces parece que esto está vacío aquí.
Pero si inspeccionamos,
Vemos que la lista en sí debería seguir ahí.
Como ves, tenemos aquí la lista vacía.
Entonces está vacío porque, por supuesto.
no tenemos pizzas para recorrer,
pero UL todavía está aquí.
Entonces esto aquí todavía se está renderizando.
Y eso se debe a que una matriz MT sigue siendo un valor veraz.
Entonces, lo que tenemos que hacer aquí es básicamente verificar
para la longitud de esta matriz.
Entonces hagamos numPizzas=pizzas.length.
está bien.
Y ahora que no hay pizzas,
entonces esto se volverá cero,
y entonces, si verificamos en base a esto,
entonces este es ahora un valor falso.
Y entonces, si es falso,
entonces esto aquí no se renderizará.
Así que veamos qué pasa entonces.
y...
ahora tenemos este extraño cero.
Mmmm, ¿por qué es eso?
Bueno, nuevamente es por un cortocircuito.
Entonces, cuando el operador & hace cortocircuito,
simplemente no evaluará esta parte,
sino el resultado de la operación
se convertirá en este.
Entonces, esto es cero,
y por lo tanto eso es lo que obtenemos en la interfaz de usuario.
Eso no pasó aquí abajo
porque como mencioné,
Reaccionar no generará valores verdaderos o falsos
pero felizmente generará un cero.
Y es por eso que obtenemos un cero.
Entonces como conclusión,
Nunca, jamás deberíamos tener esto aquí como un número.
Así que siempre deberíamos tratar de tener una verdadera
o condición falsa aquí.
Así que hagamos esto.
Si hay más de cero pizzas, haga esto.
Y si no, mientras no renderices nada.
Y este es el resultado que estábamos buscando.
Volvamos a colocarlo sólo para ver.
Y luego nuestras pizzas están de vuelta.
lindo.
Ahora, debido a este comportamiento que acabo de mostrarles,
de modo que a veces puede aparecer un cero en la interfaz de usuario,
mucha gente dice que en realidad deberíamos
nunca utilice el operador & para realizar renderizado condicional.
Ahora realmente no estoy de acuerdo con eso.
porque a veces es bueno hacerlo muy rápido
hacer algo de renderizado condicional con esto,
pero también normalmente prefiero el operador ternario
para hacer renderizado condicional.
Y ese operador será el siguiente en la próxima conferencia.