#152 Como iniciar un proyecto React en 2024

Como iniciar un proyecto React en 2024

Aquí tienes tres opciones para iniciar un proyecto que use React en 2024. Deja de usar el lento y aburrido create-react-app que quizás ya no solucione tus necesidades y comienza a usar maneras más modernas de trabajar en frontend.

Construye una app en Next.js con Storybook y React Server Components

Con Storybook 8, vas a poder construir tus componentes con React Server Components 😎 así que actualiza, aprende a hacerlo y se la estrella de tu equipo siendo la primera persona que lo haga.

Actualizando variables de ambiente sin reconstruir

Imagina esta situación, estás construyendo una app enorme con muchas muchas variables de ambiente, y tienes que hacer cambios constantes en estás, por x razón. Si lo haces de forma normal puedes parar y reconstruir, pero si eres un hacker frontendero, sacas las artes oscuras de bash y nunca vuelves a sufrir por estar reconstruyendo con cambios en tus variables de ambiente

HERRAMIENTA 🛠️ 
Fathom Analytics

Dicen los rumores, que la gente no está contenta con la nueva versión de google analytics, y si una herramienta no sirve hay que reemplazar, después de todo así es como funciona el ecosistema de internet. Si andas buscando una opción flexible, económica y con opción para muchos sitios, no busques más.

INISPIRACIÓN 💡 
Bonhomme

Si aún eres un nostálgico de flash deberías aprender WebGL. Si necesitas inspiración, nada más checa este link.

NOTICIA 📰 
Tidal saca un SDK para la web

¿Usas Tidal? ¿Te gustaría consumir sus APIs de para algún proyecto frontendero? Quizás para tu portafolio o quizás para aprender más. Si te avientas un proyecto frontendero, cuéntanos mandando el link a tu repo o sitio.

UN DÍA COMO HOY 🗓️ 

El 10 de febrero de 1966 nace en Glasgow, Inglaterra, Gary McKinnon,  también conocido como “Solo”, un hacker británico acusado por los Estados Unidos de haber perpetrado «el mayor asalto informático a un sistema militar de todos los tiempos».
En 2002, McKinnon fue detenido y confesó haber intervenido en 1997 los sistemas TI de las fuerzas armadas estadounidenses y de NASA. Pero éste alegó que su único objetivo había sido “encontrar información sobre Ovnis y proyectos militares secretos”.
En 2006, McKinnon, se defendió de una posible extradición a los Estados Unidos.
Gary McKinnon luchó durante màs de 10 años contra la extradición a los Estados Unidos, el la cual corría el riesgo de cumplir una condena de cárcel entre 60 y 70 años y el pago de una indemnización de US$2 millones.

VACANTE 💼 
Desarrollador Jr.

Ubicación: Ciudad de México (Remoto)
Empresa: Covalto
Requisitos: 6 meses de experiencia escolar o profesional en el desarrollo de aplicaciones web a nivel back y front. Conocimientos sólidos en PHP o en framework front (React, JS,). Indispensable experiencia trabajando con GIT. Conocimiento sólido de metodología Scrum.
Beneficios: Sueldo Base Atractivo. Prestaciones Superiores a las de la ley.

Para aplicar, entra aquí. 🤞 

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

function esValido(string) {
    const pila = [];
    for (let char of string) {
        if (char === '(') {
            pila.push(char);
        } else if (char === ')') {
            if (pila.length === 0) {
                return false; // No hay paréntesis abierto correspondiente
            }
            pila.pop(); // Quita el paréntesis abierto correspondiente
        }
    }
    return pila.length === 0; // Verdadero si todos los paréntesis abiertos se han cerrado
}

// Ejemplo de uso
console.log(esValido("()()")); // Debería retornar true
console.log(esValido("(())")); // Debería retornar true
console.log(esValido("(()"));  // Debería retornar false
console.log(esValido(")("));   // Debería retornar false

• La función esValido toma un string como argumento.

• Se declara una variable pila para almacenar los paréntesis abiertos encontrados durante la iteración del string.

• Se itera sobre cada carácter del string:

  • Si el carácter es un paréntesis abierto (, se añade a la pila.

  • Si el carácter es un paréntesis cerrado ), se verifica si la pila está vacía. Si está vacía, significa que hay un paréntesis cerrado sin un correspondiente paréntesis abierto, y se retorna false. Si no está vacía, se elimina el último paréntesis abierto de la pila.

• Después de iterar sobre todos los caracteres, se verifica si la pila está vacía. Si está vacía, todos los paréntesis abiertos han sido correctamente cerrados, y se retorna true. Si no está vacía, significa que hay paréntesis abiertos sin cerrar, y se retorna false.

CHALLENGE DE HOY ⚔️ 
Crea una función en JavaScript que determine el número de "islas" presentes en una matriz. Una isla se define como un grupo de "1" conectados vertical u horizontalmente, rodeados por agua, representada por "0".

1. Implementa una función contarIslas que acepte una matriz bidimensional de números como argumento.

2. La función debe retornar el número total de islas encontradas en la matriz.

3. Considera que solo se puede viajar vertical y horizontalmente por la matriz, no diagonalmente.

Ejemplo:

const matriz = [
    [1, 1, 0, 0, 0],
    [0, 1, 0, 0, 1],
    [1, 0, 0, 1, 1],
    [0, 0, 0, 0, 0],
    [1, 0, 1, 0, 1]
];
console.log(contarIslas(matriz)); // Debería retornar 6

• Puedes utilizar una técnica de búsqueda como el recorrido en profundidad (DFS) para explorar la matriz.

• Marca las celdas visitadas para evitar contar múltiples veces la misma isla.

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 👀