Descubre Preact, la alternativa rápida a React con todo el poder de los componentes de un DOM Virtual.

Preact: una alternativa rápida de ReactJS de 3 KB con la misma API de ES6

React no es la única biblioteca que implementa un DOM virtual para resolver el problema de actualizar el DOM del navegador (ya que teóricamente es más lento que el virtual), sin embargo es, con mucho, el más popular. Ser el más popular significa que muchos colaboradores de código abierto trabajan en el proyecto y hay más componentes públicos que se pueden implementar dentro de su aplicación. Esta es claramente una razón por la que debería usar React en lugar de otra biblioteca de este tipo, sin embargo, ¿y si le dijera que aún puede usar la mayoría de los componentes de React con otra biblioteca, que funciona igual y es extremadamente liviana en comparación con React? ? Existe y el nombre del proyecto es Preact.

¿Qué es Preact?

Preact es una alternativa de React muy rápida con la misma API de ES6, maneja componentes, Virtual DOM y solo pesa 3KB. Si está preocupado por el tamaño y el rendimiento de React, debería considerar usar un Preact como una "biblioteca de clones", que dice tener un mejor rendimiento y, además, es extremadamente liviano.

Preact exporta una Component clase genérica  , que puede extenderse para crear piezas encapsuladas y autoactualizables de una interfaz de usuario. Los componentes admiten todos los métodos estándar del ciclo de vida de React  , como  shouldComponentUpdate() y  componentWillReceiveProps(). Proporcionar implementaciones específicas de estos métodos es el mecanismo preferido para controlar  cuándo  y  cómo se  actualizan los componentes.

Pasar de React a Preact

El punto más importante de React es el increíble trabajo que hace un componente. Puedes usarlo desde cualquier lugar y cuando quieras dentro de tu proyecto. Aunque no todos los componentes de React son compatibles con Preact, es posible hacerlo compatible usando una Capa de compatibilidad de React . Es sorprendente que todo lo que necesita hacer es instalar preact y preact-compat, eliminar react y agregar es un alias en Webpack y eso es todo.

Esa es una de las características más impresionantes de Preact, porque como se mencionó, aquí hay un proyecto de ejemplo  que usapreact-compatpara trabajar con una biblioteca React existente sin modificar, logrando una reducción de más del 95% en el tamaño (eso es mucho amigo). Estamos seguros de que si realmente te importa el tamaño del paquete de tu aplicación, preact será ahora tu mejor amiga. Vale la pena decir que si está dispuesto a pasar a Preact desde un proyecto de React existente, debe asegurarse de probar su aplicación a fondo antes de cambiar, ya que puede perder algunas características de React (que pueden compensarse con el rendimiento del aplicación en sí). La razón por la que Preact no intenta incluir todas las características de React es para permanecer pequeño y enfocado; de lo contrario, tendría más sentido simplemente enviar optimizaciones al proyecto React, que ya es una base de código muy compleja y bien diseñada.

Depurar con Preact

Puede inspeccionar y modificar el estado de sus componentes de la IU de Preact en tiempo de ejecución utilizando la extensión del navegador React Developer Tools .  

  1. Instale la extensión React Developer Tools  
  2. Importa el módulo "preact/devtools" en tu aplicación
  3. Vuelva a cargar y vaya a la pestaña 'Reaccionar' en las herramientas de desarrollo del navegador

Contribuyendo a Preact

Preact está abierto a pull-request y cualquier tipo de soporte. Puedes apoyar el proyecto con una donación mensual y ayudarlos a continuar con sus actividades. No olvide visitar el repositorio oficial en Github para obtener más información sobre la biblioteca.


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores