Uso de constantes y condicionales en archivos TSX de React Native

Aprende a dominar la mezcla de lógica y vista en React Native con TSX/JSX: inserta constantes, aplica condicionales y organiza utilidades en minutos. Aquí encontrarás las claves explicadas paso a paso, con foco en claridad y buenas prácticas.

¿Qué son los archivos TSX/JSX y por qué permiten mezclar HTML, CSS y JavaScript?

En TSX o JSX puedes escribir lógica de JavaScript junto a etiquetas visuales similares a HTML y estilos como CSS. Por eso su terminación no es .js, sino .tsx/.jsx, ya que el archivo es “superdotado”: combina comportamientos y presentación en un mismo lugar.

• Código y vista juntos: etiquetas y expresiones en un solo archivo.
• Productividad alta: menos saltos entre archivos para ver resultados.
• Sintaxis expresiva: lo visual se actualiza con tus valores al instante.

¿Cómo interpolar constantes y renderizar con condicionales en React Native?

Insertar valores en pantalla es directo: usa llaves para unir la parte lógica con la visual. Además, los condicionales permiten mostrar textos o componentes según tus constantes.

¿Cómo usar llaves para insertar valores?

Las llaves conectan variables con la UI: escribes el texto y, donde necesites, abres llaves para interpolar una constante. Puedes combinar cadenas y números, e incluso operar con ellos antes de mostrarlos.

• Constantes visibles: muestra nombre y edad con llaves.
• Operaciones en línea: suma 10 a la edad antes de renderizar.
• Texto dinámico: el saludo incluye variables reales del estado actual.

¿Cómo renderizar con un condicional ternario?

Con un booleano como premium, usa un ternario para decidir qué se muestra. Si está en true, el usuario es premium; si está en false, es gratuito. Todo se resuelve en una sola expresión.

• Control claro: una pregunta, dos respuestas posibles.
• Legible: ideal para alternar entre mensajes o componentes.
• Rápido de ajustar: cambia el valor y la UI responde al instante.

¿Cuándo mostrar elementos según la cantidad de mensajes?

También puedes condicionar fuera de la etiqueta: si los mensajes son mayor a cero, renderizas un bloque que indica cuántos mensajes nuevos hay. Si es cero, simplemente no se muestra.

• Render condicional: muestra solo cuando hay algo relevante.
• Menos ruido visual: la interfaz permanece limpia.
• Útil con estados: perfecto para notificaciones o pendientes.

¿Qué diferencias hay entre const y let y cómo crear utilidades reutilizables?

Además de renderizar, organizar tu lógica en constantes, variables y funciones te ayuda a mantener el código claro. Aprende cuándo usar cada declaración y cómo extraer funciones a utils para reutilizarlas.

¿Por qué const y cuándo let?

• const: el valor no se reasigna. Ideal para referencias fijas.
• let: el valor puede cambiar con el tiempo o la interacción.
• Elección consciente: usa la que refleje la naturaleza de tu dato.

También puedes generar un saludo dinámico con la hora actual: si es menor a 12, “buenos días”; si es mayor a 18, “buenas noches”. La constante resultante se imprime tal cual en la interfaz.

¿Cómo usar funciones y parámetros en utils?

Crea una carpeta utils y un archivo, por ejemplo “mat”, para centralizar operaciones. Define funciones con array function y parámetros claros: suma, multiplicación u otras tareas específicas.

• Funciones puras: reciben parámetros y devuelven resultados.
• Reutilizables: invócalas desde cualquier pantalla.
• Mantenimiento simple: un solo lugar para actualizar lógica.

¿Qué es la desestructuración e importación con llaves?

La desestructuración te permite extraer valores de un objeto (por ejemplo, nombre y edad de un usuario) y crear nuevas variables o combinarlas en otro objeto/resultado. Si exportas funciones desde utils, impórtalas con llaves y ejecútalas con paréntesis donde las necesites (por ejemplo, en index).

• Desestructuración: extrae solo lo que usarás.
• Exportaciones nombradas: importa con llaves desde utils.
• Cadena de texto: compón resultados usando variables y constantes.

¿Te quedaron dudas o quieres compartir cómo usas ternarios, desestructuración o utils en tus pantallas? Escribe tu pregunta o experiencia y continuemos la conversación.