¿Deberíamos comenzar a utilizar React Server Components?

¿Estas considerando utilizar React Server Components? Pues, en este panel, desarrolladores de Meta, Vercel y Redwood, se pusieron a dar razones de porque utilizarlos.

Creando un editor de Markdown ligero

En este artículo, Ersin explica porque decidió usar Wails en lugar de Electron para construir una aplicación de escritorio ligera y como podrías hacerlo tu también, utilizando Wails, React y Tailwind.

No se puede vivir de Open Source

Este es un articulo para reflexionar, qué pueden hacer los individuos, pero sobre todo, las empresas, para ofrecer una justa compensación a los desarrolladores de Open Source, tomando en cuenta que muchas startups y compañías se sustentan en estos.

HERRAMIENTA 🛠️ 
qr-code web component

Responde a este correo, si eres un frontendero con años de experiencia y alguna vez te han pedido generar un código QR para un proyecto 🙋 Si nunca te lo han pedido, prepárate con esta herramienta porque en algún momento te lo pedirán.

Pagination React Component

Otra herramienta para añadir a tu cinturón de herramientas 🛠️ y que es muy necesaria en cada proyecto, sobre todo en proyectos de tipo Dashboard.

EL RINCÓN DEL CMS 🧑‍💻 
Primo

Primo, es un CMS open source, que puedes usarlo headless con tu framework React.js favorito, o generando las páginas por default utilizando SvelteKit.
Sí, con este CMS podrás aprender más sobre Svelte y SvelteKit 😉

GUÍA 📖 
Detrás de las escenas de una nueva herramienta de Anotación para Accesibilidad Web

En este articulo, verás todos los procesos que se llevan a cabo para crear un nuevo kit de anotaciones para accesibilidad web.

EL RINCÓN DE CSS 👩‍💻 
CSS-HOOKS

Ok, la idea de tener CSS en linea, puede sonar descabellado para 2023, pero si has utilizado styled components o tailwindCSS, quizás ya has hecho cosas descabelladas y puedes seguir haciéndolas 🤪 Pruébalo si te llama la atención y nos cuentas.

TIPOGRAFÍAS 🔠 
Marbia

Marbla, es una tipografÍa que permite experimentar con ella y… mejor ve a ver el link y experimenta por tu cuenta, el futuro de las tipografÍas podría ser más divertido de lo que te imaginaste. 😎 

NOTICIA 📰 
React Native Animated 3.6.0

Nueva versión de React Native Animated que trae nuevas caracterÍsticas para Async y multithreading tasks, Layout Animations for Web, asÍ como bug fixes y mejoras. 👌 

UN DÍA COMO HOY 🗓️ 

El 08 de diciembre de 2004, Lenovo Group, firma un acuerdo definitivo con IBM para adquirir el negocio de ordenadores personales por US$1250 millones y otros US$500 millones para riesgos y gastos generales. 🤓

VACANTE 💼 
Frontend Developer

Ubicación: México (Remoto)
Empresa: Meedan
Responsabilidades: Participar en el mantenimiento y mejora del software frontend existente. Participar en la planificación arquitectónica, especialmente relacionada con la comunicación frontend-backend. Participar en pruebas, análisis de desempeño y otras actividades orientadas a la calidad. Entre otras tareas.
Requerimientos: Fuerte dominio del idioma inglés. Fuertes habilidades de comunicación, especialmente a través de Internet. Experiencia sólida con tecnologías web: HTML, CSS, JavaScript, HTTP. Requerido: Familiaridad con las especificaciones más recientes de ECMAScript/JavaScript, entre otros.

"Los miembros de nuestro equipo están distribuidos en múltiples ciudades y zonas horarias. Los miembros de nuestro equipo pueden trabajar de manera flexible y responder a los desafíos en una variedad de áreas de proyectos. Esto incluye lo siguiente: Trabajo flexible desde casa, Horario flexible, Soporte para oficina en casa, Capacitación interna sobre EDI y revisiones periódicas del impacto y de las políticas del EDI. Código de conducta.”

Consulta más, aquí. 🤞 

CHALLENGE ⚔️ 
Implementación de un Custom Hook de React para Gestión de Formularios

En el desarrollo de aplicaciones web modernas con React, los formularios son una parte esencial de la interacción del usuario. Gestionar el estado y la validación de un formulario de manera eficiente y reutilizable es un desafío común. Tu tarea es crear un custom hook useForm que simplifique la gestión de formularios en React.

Descripción del Reto:

• El hook useForm debe ser un hook reutilizable que maneje el estado de los campos de un formulario, incluyendo validaciones.

• Debe proporcionar una forma de definir valores iniciales para los campos del formulario.

• Debe incluir lógica para manejar cambios en los campos del formulario y validaciones básicas (por ejemplo, campo requerido, formato de email).

• Debería devolver el estado actual del formulario, una función para manejar cambios en los campos y una función para validar el formulario antes del envío.

Ejemplo de Uso:

function Formulario() {
    const { formData, handleChange, handleSubmit } = useForm({
        initialValues: { nombre: '', email: '' },
        validations: { /* ... */ }
    });

    return (
        <form onSubmit={handleSubmit}>
            <input name="nombre" value={formData.nombre} onChange={handleChange} />
            <input name="email" value={formData.email} onChange={handleChange} />
            {/* ... */}
            <button type="submit">Enviar</button>
        </form>
    );
}

Ver resultado 👀

RESULTADO 🧐 

import { useState } from 'react';

function useForm(initialValues, validate) {
    const [values, setValues] = useState(initialValues || {});
    const [errors, setErrors] = useState({});

    // Maneja los cambios de los campos del formulario
    const handleChange = (event) => {
        const { name, value } = event.target;
        setValues({ ...values, [name]: value });
    };

    // Valida el formulario y devuelve si es válido
    const validateForm = () => {
        if (validate) {
            const newErrors = validate(values);
            setErrors(newErrors || {});
            return Object.keys(newErrors).length === 0;
        }
        return true;
    };

    // Maneja el envío del formulario
    const handleSubmit = (event) => {
        event.preventDefault();
        if (validateForm()) {
            // Procesar los datos del formulario
            console.log('Formulario enviado:', values);
        } else {
            console.log('Errores en el formulario:', errors);
        }
    };

    return {
        values,
        errors,
        handleChange,
        handleSubmit
    };
}

export default useForm;

Tu feedback nos ayuda a mejorar

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