De React ⚛️ a webComponents con Atomico 
Tags: webcomponents, react, jsx, shadowdom
Published: 2019-05-22 02:38:09

---
title: De React ⚛️ a webComponents con Atomico 
published: true
description: Te invito a conocer Atomico un pequeño proyecto de 2.7kB para la creacion de WebComponents 
tags: webcomponents, react, Jsx, shadowdom
---

> 👋 Hoy Atomico luce distinto al año 2017, ahora Atomico es más poderoso, rapido, declarativo y estable. Te invito a revisar este articulo actualizado en la [documentación de Atomico](https://atomico.gitbook.io/doc/guides/atomico-and-react/from-react-to-atomico)

[Atomico](https://github.com/atomicojs/core) es un proyecto OSS [personal](https://twitter.com/Uppercod) que busca simplificar la creación de WebComponents a base de JSX, Virtual-dom, Hooks con tan solo 2.7kB 🤯. **Este articulo es un introducción a lo simple 🤓 que es crear webComponents con Atomico**

## Pequeñas diferencias entre React y Atomico

Atomico se basa en parte del api de React, como :

1. **Hooks**: [@atomico/core](https://github.com/atomicojs/core) entrega soporte a los siguientes hooks, `useState`, `useEffect`, `useMemo`, `useRef` y `useReducer`.
2. **HoCs**: Este patrón funciona dentro de Componentes de alto orden, con la intención de asilar lógica invisible para el DOM, como [Router](https://github.com/atomicojs/router) o [Lazy](https://github.com/atomicojs/lazy), el uso de este patrón no queda expuesto en este articulo.

Para enseñar mejor las diferencias y como migrar un componente de React a WebComponent usaremos un ejemplo simple.

### Código de ejemplo

![General](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/full.png)

### Importación

![Importacion](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/import.png)

para unir Atomico con WebComponents, ud requerida 2 packages:

1. [**@atomico/core**](https://github.com/atomicojs/core): package que integra soporte sobre, virtual-dom, Hooks, HoCs y mas.
2. [**@atomico/element**](https://github.com/atomicojs/element) : package que utiliza el render de atomico sobre WebComponents.

### Componente a WebComponent

![Componente a WebComponent](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/component.png)

La mayor diferencia entre las funciones `function Component` y `function WebComponent` es el uso del tag Fragment(`<></>`) vs Host(`<host></host>`) El tag host de Atomico apunta al mismo contenedor, para ganar manipulación mas expresiva sobre atributos, propiedades y eventos del WebComponent.

![Constructor vs Host](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/host.png)

**El tag Host siembre deberá ser el retorno de un WebComponent creado con Atomico**, si ud no retorna este tag, Atomico asume que generara un desmontaje del componente de forma interna.

### Render a CustomElement

![Render](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/render.png)

Esta pequeña diferencia permite una declaración global de su función como webComponent en su documento, pudiendo ser usado desde React, Vue o HTML.

## Observables 🧐

los `obserbables` son la capa de Atomico para la definición de propiedades y atributos del WebComponent, ante cada mutación de estos se forzara una renderización sobre el nuevo estado de estos observables.

![observables](https://res.cloudinary.com/dz0i8dmpt/image/upload/v1557340605/github/atomico-element/observables.png)

#### Aun me encuentro escribiendo este articulo 👷, espero que sea de su agrado y si tiene observaciones no dude en comentar 🤓, si busca probar Atomico visite el siguiente repositorio [@atomico/core](https://github.com/atomicojs/core)