#167 State of React Native 2023

State of React Native 2023

Los resultados de la encuesta del state-of-art de React Native 2023 ya salieron y hay muy buenas noticias, porque la comunidad percibe que el desarrollo de esta tecnología va en buena dirección y sus principales componentes y exponentes, como Expo, siguen creciendo.

De muchos a uno: Moviendo varios repos a un solo monorepo

Quizás conoces esta situación. Muchos repos de un mismo producto que a veces has pensado que deberían funcionar como uno solo o que no les dan el mismo mantenimiento. La cultura del monorepo fue muy popular hace unos años, sobre todo cuando se supo que Google lo hacía. Pero para hacer este tipo de decisiones de arquitectura necesitas tener equipos comprometidos y responsables, y si los tienes, quizás sea buena idea considerarlo.

EL RINCÓN DE CSS 👨‍💻 
Cuando usar la función min() o max()

Aquí tienes un buen CSS tip, por cierto, checa este sitio, tiene muy buenos consejos que luego puede ser confuso ¿cuándo usar min o max? Después de ver estos ejemplos, esperamos que te quede más claro.

PODCAST 🎧️ 
Dan Abramov en PodRocket

PodRocket, es un podcast de la popular compañía de análisis de datos de sesión de usuarios y popular blog, que quizás has visitado más de una vez. En este episodio tuvieron a Dan para hablar de React, React Server Components y el futuro. Tienes que escucharlo 🎧

BOILERPLATE 🗃️ 
React Native TypeScript boilerplate

Este boilerplate acaba de llegar a su versión 4.0 y tiene muchas cositas interesantes que te pueden ayudar a sacar ese demo o MVP en unas cuantas semanas. Si eres frontendero de móvil, definitivamente tienes que checarlo y ponerlo en tus marcadores.

HERRAMIENTA 🛠️ 
CSSFormalize

Una de las cosas más difíciles al aplicar estilos en HTML, son los formularios. ¿Te gustaría tener un generador de estilos para tus formularios? No busques más, aquí lo tienes.

React Datepicker

Este seleccionador de fechas es una de las bibliotecas que más vas a usar y debe estar en tu cinturón de herramientas en los primeros lugares.

LANZAMIENTO 🚀 
Anunciando Vite 5.1

Todos sabemos como funciona SemVer, ¿verdad? El primer número es para una nueva versión que normalmente significa cambios que pueden romper la compatibilidad de las APIs o arquitectura. El segundo número es para cuando añades funcionalidad y es compatible con el primer número. El tercer número cuando arreglas bugs. Por eso, siempre debes esperarte a la versión 5.1.0 o 5.1.1 para subir a producción 😄 porque son las mejoras de performance en una nueva versión.

UN DÍA COMO HOY 🗓️ 

El 25 de febrero de 2002, Kimberly Vanvaeck a los 17 años de edad creó su virus más conocido el virus “Sharp-A“, "el primer virus escrito en lenguaje C#", fue uno de los primeros en infectar ordenadores con el MS .Net Framework instalado.
Vanvaeck, conocida como “Gigabyte” nació y vive en el pueblo de Mechelen, Bélgica.
A los 6 años de edad utilizaba y programaba una “Commodore 64″ de un familiar.
Vanvaeck, comenzó la programación de virus a los 14 años dentro del equipo “Metaphase VX”, siempre como un Hobby.
En entrevista en línea el 06 de marzo de 2002 Gigabyte dice que ella escribió el gusano para hacer un punto social, así como un técnico. "Quiero que la gente (y especialmente los chicos) sepan que hay chicas por ahí que les gusta las ordenadores y no solo para jugar”.
El 16 de febrero de 2004, salió la noticia de que una mujer de 19 años y estudiante de tecnología, había sido detenida en Bélgica el día 9, acusada de estar detrás del “Nick” Gigabyte, en el diario “La Libre Belgique”.
Se le imputaron 11 cargos por sabotaje informático, castigados con hasta 3 años de prisión y multas de hasta 100.000 Euros. Fue puesta en libertad bajo fianza 24 horas después.
Vanvaeck se graduó en Ingeniería Industrial en el Electronics-ICT. En la actualidad trabaja donde estudió como asesora IT.

VACANTE 💼 
Frontend Developer

Ubicación: México (Presencial)
Empresa: Novelus
Requisitos: Licenciatura en informática, ingeniería o campo afín. Experiencia comprobada como ingeniero Frontend con enfoque en el desarrollo de React y Tailwind CSS. Gran comprensión de los principios y patrones de diseño de UI/UX. Comprensión profunda de los principios y mejores prácticas de UI/UX. Capacidad comprobada para escribir código limpio, mantenible y bien probado. Entre otros.
Beneficios: Ambiente de trabajo amigable y colaborativo. Oportunidades de crecimiento personal y profesional. Exposición a proyectos dinámicos y las últimas tecnologías.

Para poder aplicar, ingresa aquí. 🤞 

RESULTADO DEL CHALLENGE DE AYER 🧐 
¡Gracias a los que contestaron el challenge de ayer! Aquí te dejamos nuestra respuesta:

Para implementar un sistema de enrutamiento básico para una SPA (Aplicación de Una Sola Página) que maneje diferentes vistas sin recargar la página, se puede seguir el siguiente enfoque en JavaScript. Este código incluye la configuración de rutas, la actualización del contenido al cambiar la URL y el manejo de los eventos de navegación del navegador:

// Contenido asociado a cada ruta
const rutas = {
    '/': '<h1>Inicio</h1><p>Bienvenido a la página de inicio.</p>',
    '/acerca': '<h1>Acerca de</h1><p>Esta es la página acerca de.</p>',
    '/contacto': '<h1>Contacto</h1><p>Contáctanos a través de este formulario.</p>'
};

// Función para actualizar el contenido visible basado en la ruta actual
function actualizarContenido(rutaActual) {
    const contenido = document.getElementById('contenido');
    contenido.innerHTML = rutas[rutaActual] || '<h1>404</h1><p>Página no encontrada</p>';
}

// Función para manejar el cambio de ruta
function onRutaCambio() {
    const rutaActual = window.location.pathname;
    actualizarContenido(rutaActual);
}

// Función para iniciar el enrutador
function iniciarEnrutador() {
    // Manejar cambios de ruta cuando se carga la página y en cambios de URL
    window.addEventListener('popstate', onRutaCambio);
    onRutaCambio(); // Para cargar la ruta inicial

    // Escuchar clicks en enlaces para manejar la navegación interna
    document.body.addEventListener('click', e => {
        if (e.target.matches('[data-link]')) {
            e.preventDefault();
            const nuevaRuta = e.target.getAttribute('href');
            history.pushState(null, '', nuevaRuta);
            onRutaCambio();
        }
    });
}

// Ejemplo de HTML para enlaces de navegación
// <a href="/acerca" data-link>Acerca de</a>
// <a href="/contacto" data-link>Contacto</a>

document.addEventListener('DOMContentLoaded', iniciarEnrutador);

• Las rutas son definidas como un objeto donde las claves son las rutas de la aplicación y los valores son el contenido HTML correspondiente a cada ruta.

• actualizarContenido es una función que actualiza el contenido de la página basado en la ruta actual. Si la ruta no está definida en el objeto de rutas, muestra un mensaje de 404.

• onRutaCambio se ejecuta cuando hay un cambio en la ruta. Utiliza window.location.pathname para determinar la ruta actual y actualiza el contenido de la página.

• iniciarEnrutador prepara el enrutador para escuchar eventos de cambio de ruta (popstate) y clics en enlaces dentro del documento. Los enlaces que deben ser manejados por el enrutador deben tener el atributo data-link.

• Al hacer clic en un enlace, se previene el comportamiento por defecto del navegador, se actualiza la URL usando history.pushState, y se llama a onRutaCambio para actualizar la vista.

CHALLENGE DE HOY ⚔️ 
Crea un Editor de Texto Enriquecido (WYSIWYG)

Los editores de texto enriquecido son herramientas esenciales en aplicaciones web modernas, permitiendo a los usuarios introducir y formatear su contenido de manera intuitiva. Tu tarea es crear un componente de editor básico que soporte negrita, cursiva, subrayado, y la inserción de enlaces.

Tareas a realizar:

1. Implementa un componente de editor de texto enriquecido que muestre una barra de herramientas con opciones para aplicar negrita, cursiva, subrayado, y añadir enlaces al texto seleccionado.

2. Asegúrate de que el editor refleje inmediatamente los cambios de formato en el contenido.

3. Implementa una forma para que los usuarios puedan insertar enlaces, abriendo un prompt para ingresar la URL cuando se seleccione la opción correspondiente.

4. El contenido formateado debe ser editable y mantener su formato en ediciones subsiguientes.

Ejemplo de estructura HTML básica:

<div id="editor-toolbar">
  <button id="boldBtn">Negrita</button>
  <button id="italicBtn">Cursiva</button>
  <button id="underlineBtn">Subrayado</button>
  <button id="linkBtn">Insertar Enlace</button>
</div>
<div id="editor" contenteditable="true"></div>

Código Base para Empezar:

document.getElementById('boldBtn').addEventListener('click', function() {
    document.execCommand('bold');
});

// Añadir más listeners para los otros botones

// Ejemplo de uso para el botón de enlace
document.getElementById('linkBtn').addEventListener('click', function() {
    var url = prompt('Ingrese la URL del enlace:');
    if (url) {
        document.execCommand('createLink', false, url);
    }
});

document.addEventListener('DOMContentLoaded', () => {
    // Inicialización y configuración del editor
});

Consejos:

• Utiliza document.execCommand para aplicar estilos y acciones de formato en el contenido editable. Aunque esta API está obsoleta y puede no ser recomendada para nuevos proyectos, sigue siendo una forma práctica de implementar funcionalidades de edición de texto básicas sin librerías externas.

• Experimenta con contenteditable para hacer que un div sea editable y pueda ser formateado.

• Asegúrate de validar y sanear la entrada del usuario al insertar enlaces para evitar vulnerabilidades de seguridad como XSS.

Comparte tu respuesta en redes sociales y etiquétanos (@frontenderos), compartiremos nuestra respuesta en el issue de mañana. 😎 

Tu feedback nos ayuda a mejorar

Por favor elige una opción y dinos lo que te gustó y lo que no. Leemos todas las respuestas 👀