La Guía de estilo React/JSX de Airbnb es la guía de estilo más popular para la codificación en React. En este post, te explicaré cómo implementarlas.

Instalación y uso de ESLint

Puede consultar todas las reglas de ESLint en el sitio web oficial y todas las reglas especiales de React ESLint.

Para iniciar a configurar nuestras reglas ejecutamos el siguiente comando en la consola estando ubicados dentro de la carpeta del proyecto.

# Create eslint file$ npx eslint --init

Eslint nos preguntará diferentes opciones para configurar el proyecto, entre ellas, el foco de este post, con cual guia de estilos queremos trabajar en el…

A medida que el mundo se vuelve más conectado, un número cada vez mayor de empresas recurren a los sistemas de gestión de contenido para interactuar mejor con su base de clientes. Todos hemos oído hablar de WordPress, Drupal, Joomla, Sitecore y Squarespace. Sin embargo, muchas de estas herramientas tradicionales de CMS no parecen estar al día con la rápida evolución de la tecnología.

Su implementación y mantenimiento cuestan mucho y pueden presentar una gran cantidad de riesgos de seguridad. …

JAMstack significa:

• JavaScript
• API’s
• Markup

El JAMstack ha inspirado algunas de las mejores herramientas de desarrollo web que hemos visto. Publicar sitios web increíblemente rápidos, seguros y accesibles nunca ha sido tan fácil ni tan gratuito. Todavía me cuesta trabajo creer que mi propio sitio web personal ahora se ejecuta de forma gratuita en lugar de un VPS de $15/mes.

Veamos un corto repaso por varias etapas de la historia de la web hasta llegar al día de hoy y ver esa evolución a donde nos ha llevado.

Cuando surgió la web

En los años 90, las páginas web no se veían tan espectaculares…

Hay demasiadas personas que se encuentran con las siguientes advertencias. He visto muchos problemas de GitHub al respecto y también he sido de esas personas que se lo preguntan. Es por eso que quería tener este artículo para abordarlo y hacer referencia a él.

• Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op.
• Warning: Can’t call setState (or forceUpdate) on an unmounted component. This is a no-op, but it indicates a memory leak in your application. …

tl;dr: En esta entrada, aprenderemos cómo configurar toda la infraestructura necesaria para construir un sistema de diseño de componentes reutilizables en React, utilizando Storybook.

Comencemos por entender que un sistema de diseño es una serie de componentes que se pueden reutilizar en diferentes combinaciones. Los sistemas de diseño te permiten gestionar el diseño. Si vamos a a designsystemsrepo.com podrá ver los sistemas de diseño utilizados por algunas de las compañías más grandes y las marcas más sólidas, como Priceline, Apple, IBM, WeWork, GitHub e incluso el gobierno de los EE. UU.

Los sistemas de diseño pueden ser un importante multiplicador…

En el anterior post, conocimos un poco sobre la inmutabilidad y la razon de porque deberia importarnos a la hora de escribir nuestro codigo en especial nuestros reducers.

En esta ocasion, quiero abordar un poco sobre los side effect y como el trabajar con funciones puras nos puede servir, sin embargo, primero veamos qué hace que una función sea pura y porque está muy relacionada con la inmutabilidad.

Reglas de inmutabilidad

Para ser pura, una función debe seguir estas reglas:

1. Una función pura siempre debe devolver el mismo valor cuando se le dan las mismas entradas.
2. Una función pura no debe tener ningún…

La inmutabilidad puede ser un tema confuso, y aparece en todas partes en React, Redux y JavaScript en general.

Es posible que hayas encontrado errores en los que tus componentes de React no se vuelven a renderizar, a pesar de que sabes que has cambiado las props, y alguien dice, “Deberías estar haciendo actualizaciones de estado inmutables.” Tal vez tú o uno de tus compañeros de equipo escribe regularmente reducers en Redux que mutan el estado, y nos toca corregirlos constantemente (los reducers, o a nuestros compañeros de trabajo 😄).

Es complicado. Puede ser muy sutil, especialmente si no estás…

Parte 1

Con el nuevo lanzamiento menor de React, 16.4, más un parche posterior, 16.4.1, hemos recibido muchas correcciones, soporte para eventos de puntero, algo de ayuda con getDerivedStateFromProps() y algunas características experimentales. Han pasado menos de dos meses desde que tuvimos la versión 16.4 que nos dio excelentes actualizaciones, como el soporte oficial de la API de contexto. En lugar de vivir en el pasado, veamos las nuevas cosas brillantes que obtenemos con los últimos lanzamientos.

Pointer Events

Probablemente el “más brillante de los brillantes” para la versión 16.4.0 fue el soporte para Pointer Events. …