test.js

Una vez que una aplicación se está ejecutando en producción, puede darnos miedo hacer cambios. ¿Cómo sabemos que una nueo feature, un fix o un refactor no romperá la funcionalidad existente?

Podemos usar nuestra aplicación manualmente para tratar de encontrar errores, pero sin mantener una lista de verificación exhaustiva, es poco probable que cubramos todos los posibles puntos de falla. Y, sinceramente, incluso si lo hiciéramos, llevaría demasiado tiempo ejecutar nuestra aplicación completa después de cada commit.

Al usar un framework de testing, podemos escribir código que verifique que nuestro código anterior aún funciona. …


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…


Image from google

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. …


Si estás involucrado en el mundo de los sitios web, es probable que hayas oído hablar de JAMstack.

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. …


Documentar y probar tus componentes de React de forma aislada utilizando Storybook.

Storybook React

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…


Inmutabilidad en React y Redux

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…


https://egghead.io/courses/leverage-new-features-of-react-16

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. …


Esta publicación proporciona una descripción general de las últimas características y mejoras encontradas en 16.3^

React 16

React 16 viene con algunas características nuevas y potentes, en este primer post exploraremos algunas de ellas.

Disclaimer

En los últimos meses he estado trabajando en ejercicios que permitan conocer mejor las nuevas características de React 16, en este repositorio pueden encontrar algunos ejercicios adelantados. Si crees puede mejorar y/o ayudar a completar esta guía de ejemplos, abra un RP con las actualizaciones y envíe cualquier problema. Además, continuaré mejorando esto, por lo que es posible que desee destacar este repositorio para volver a visitarlo.

componentDidCatch

Un error de JavaScript en la IU no debería romper toda la aplicación. Para resolver este…

Cristian Moreno

FullStack Javascript Developer and Community builder. Javascript Lover 👨🏻‍💻♥️👨🏻‍🏫 Co-Organize of @MedellinJS @avanet

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store