1 of 1

Getting started with Atomico for React users

Hi, I'm Atomico js and I bring you the React syntax for webcomponents, I think you and I get along very well 😊.

First let's say that Atomico is light since it has a size close to 3kB vs React + ReactDOM that have a size close to 60kB, now if your project is already written in React I can integrate Atomico progressively since a component created can be instantiated as a component for React thanks to @atomico/react, example:

Magical 🪄, isn't it?... well now let's speed up your Atomico learning path:

How to declare a component?

Atomico, like React, allows a declaration of components using only functions, example:

From the example we will highlight the following differences:

In Atomico you only use one import.
useProp is like useState, but with the difference that useProp references the state from the webcomponent property defined in counter.props.

Now I want to invite you to learn how to declare a style using Atomico.

How do you declare styles using Atomico?

It is common to see the use of libraries such as Emotion or styled-components to encapsulate styles in React, but these add an additional cost, be it for performance or bundle, in Atomico there is no such cost.

Instances, children and slots

It is normal for React to create components that you then instantiate within other components, for example:

with Atomico there are certain differences:

1. With Atomico you can instantiate CustomElements using its constructor

The constructor in Atomic is the product of the c function and is the one you will use to register your webcomponent, example:

According to the previous example, you can instantiate MyComponent as a JSX Component, example:

This instance type allows autocompletion at the JSX level and type validation at the Typescript level.

2. With Atomico you can instantiate components as functions as long as these are only stateless functions

This will be useful for reusing templates, but always remember stateless.

Getting started with Atomico for React users

Hi, I'm Atomico js and I bring you the React syntax for webcomponents, I think you and I get along very well 😊.

import { Button } from "@formas/button/react";

function App(){
   return <>
      <h1>React App!</h1>
      <Button onClick={()=>console.log("Click!")}>
         Submit
      </Button>
   </>
}

Magical 🪄, isn't it?... well now let's speed up your Atomico learning path:

How to declare a component?

Atomico, like React, allows a declaration of components using only functions, example:

From the example we will highlight the following differences:

In Atomico you only use one import.
useProp is like useState, but with the difference that useProp references the state from the webcomponent property defined in counter.props.

Now I want to invite you to learn how to declare a style using Atomico.

How do you declare styles using Atomico?

Instances, children and slots

It is normal for React to create components that you then instantiate within other components, for example:

with Atomico there are certain differences:

1. With Atomico you can instantiate CustomElements using its constructor

The constructor in Atomic is the product of the c function and is the one you will use to register your webcomponent, example:

According to the previous example, you can instantiate MyComponent as a JSX Component, example:

This instance type allows autocompletion at the JSX level and type validation at the Typescript level.

2. With Atomico you can instantiate components as functions as long as these are only stateless functions

This will be useful for reusing templates, but always remember stateless.

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  </div>
)

import { c, css } from "atomico";

const props = { primary: { type: Boolean, relfect: true } };

const styles = css`
  :host {
    display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  :host([primary]) {
    background: white;
    color: black;
  }
`;

export const Button = c(
  () => (
    <host shadowDom>
      <slot />
    </host>
  ),
  { props, styles }
);

customElements.define("my-button", Button);

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

render(
  <div>
    <Button
      href="https://github.com/styled-components/styled-components"
      target="_blank"
      rel="noopener"
      primary
    >
      GitHub
    </Button>

    <Button as={Link} href="/docs">
      Documentation
    </Button>
  </div>
)

import { c, css } from "atomico";

const props = { primary: { type: Boolean, relfect: true } };

const styles = css`
  :host {
    display: inline-block;
    border-radius: 3px;
    padding: 0.5rem 0;
    margin: 0.5rem 1rem;
    width: 11rem;
    background: transparent;
    color: white;
    border: 2px solid white;
  }

  :host([primary]) {
    background: white;
    color: black;
  }
`;

export const Button = c(
  () => (
    <host shadowDom>
      <slot />
    </host>
  ),
  { props, styles }
);

customElements.define("my-button", Button);

Getting started with Atomico for React users

hashtagHow to declare a component?

hashtagHow do you declare styles using Atomico?

hashtagInstances, children and slots

hashtag1. With Atomico you can instantiate CustomElements using its constructor

hashtag2. With Atomico you can instantiate components as functions as long as these are only stateless functions

Getting started with Atomico for React users

hashtagHow to declare a component?

hashtagHow do you declare styles using Atomico?

hashtagInstances, children and slots

hashtag1. With Atomico you can instantiate CustomElements using its constructor

hashtag2. With Atomico you can instantiate components as functions as long as these are only stateless functions

How to declare a component?

How do you declare styles using Atomico?

Instances, children and slots

1. With Atomico you can instantiate CustomElements using its constructor

2. With Atomico you can instantiate components as functions as long as these are only stateless functions

How to declare a component?

How do you declare styles using Atomico?

Instances, children and slots

1. With Atomico you can instantiate CustomElements using its constructor

2. With Atomico you can instantiate components as functions as long as these are only stateless functions