LogoLogo
GithubTwitterDiscordPlayground
English
English
  • 👋Atomico
  • 🚀Getting started with Atomico
  • ⚛️Getting started with Atomico for React users
  • 💡What can you do with Atomico?
    • You can create amazing webcomponents
    • You can create design systems
    • You can create websites
    • You can create mobile applications
    • You can create web applications
  • API
    • 🧬Props(Properties)
      • Value cycle as prop
      • Is it advisable to declare events using the props API?
    • 🧩VirtualDOM
      • Advanced
    • 🎣Hooks
      • useProp
      • useEvent
      • useRef
      • useHost
      • useState
      • useReducer
      • useEffect, useLayoutEffect and useInsertionEffect
      • useMemo and useCallback
      • useUpdate
      • useId
      • useContext
        • useProvider
      • usePromise
      • useAsync and useSuspense
      • useAbortController
    • 🔬Testing
      • Render cycle
      • atomico/test-hooks
      • atomico/test-dom
  • Guides
    • 🤔Frequent questions
      • Is it advisable to declare events using the props API?
      • How to declare events for your component at the type level for TSX?
      • When and why to use shadowDom?
      • Can I use Atomico in browsers without ESM support?
    • 🤩Component
      • Naming
      • CSS Styles with Shadow DOM
    • 🛡️Atomico with Typescript
      • Props
      • Component
      • Meta-types
        • Type
        • Event declaration
        • Method declaration
      • Check the correct use of hooks
    • 🤝Atomico and React
      • Integrating Atomico in React
      • From React to Atomico
        • Rendering Differences
        • VirtualDOM api differences
    • ⏳Atomico and Asynchrony
    • 🧠Atomico design patterns
      • ♻️Webcomponents with hybrid rendering
      • 🔗Slot as templates
      • 🔀Slot
    • 📖Atomico and Storybook
      • Frequent questions
    • 💧SSR / SSG
    • 🗃️Archives
      • Class inheritance
      • Forms and shadowDOM
      • Tips
      • Design systems
      • Atomico style guide
        • File structure
          • Monorepo
          • Design systems
  • packages
    • @atomico/hooks
      • useCurrentValue
      • use-intersection-observer
      • use-ref-values
      • use-script
      • use-attributes
      • use-prop-proxy
      • use-click-press
      • use-dollars
      • use-reflect-event
      • use-keyboar
      • use-click-coordinates
      • use-copy
      • use-debounce-state
      • use-form
      • use-listener
      • use-disabled
      • use-css
      • use-channel
      • use-promise
      • use-responsive-state
      • use-parent
      • use-resize-observer
      • use-slot
        • useSlot
        • useProxySlot
      • use-render
      • use-mutation-observer
      • use-css-light-dom
      • use-controller
      • use-router
      • use-async-effect
      • use-child-nodes
      • use-force-render
    • @atomico/store
      • Store
    • @atomico/storybook
    • @atomico/router
    • @atomico/vite
      • ⚙️Process CSS tag template blocks with PostCSS.
      • 🏗️Compile your code to be distributed optimally as a package.
      • 📕Use the JSX/TSX syntax of Atomico when using Storybook.
      • 🤖Automatically create customElements.define
      • ☑️Support for Vitest for Atomico.
      • 🧙‍♂️Server actions
    • @atomico/exports
      • 🚩CLI and Flags
      • 🤖Wrapper for React
    • @atomico/components
      • @atomico/keen-slider
      • @atomico/modal
      • @atomico/lottie
      • @atomico/table
    • @atomico/react
    • @atomico/postcss-tokens
      • Example with @atomico/vite
    • @atomico/wrapper
    • 🚫Deprecated
      • @atomico/magic-form
        • MagicFormProvider | <magic-form-provider>
        • MagicForm | <magic-form>
        • MagicForm Hooks
        • MagicForm in React and Preact
        • MagicForm in Microfrontend
        • MagicForm Patterns
      • @atomico/design-tokens
        • @atomico/design-tokens api
  • Support
    • Discord
    • Github
    • Twitter
Powered by GitBook
On this page
  • 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

Was this helpful?

Edit on GitHub
Export as PDF

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

PreviousGetting started with AtomicoNextWhat can you do with Atomico?

Last updated 6 months ago

Was this helpful?

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 , example:

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:

import { useState } from "react";
import ReactDOM from 'react-dom'

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}


render(
  <Counter initialCount={1}/>, 
  document.querySelector("#counter")
);
import { c, useProp } from "atomico";

function counter() {
  const [count, setCount] = useProp("count");
  return (
    <host>
      Count: {count}
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </host>
  );
}

counter.props = { count: { type: Number, value: 0 } }

const Counter = c(counter);

customElements.define(
  "my-counter",
  Counter  
);

From the example we will highlight the following differences:

  1. In Atomico you only use one import.

  2. useProp is like useState, but with the difference that useProp references the state from the webcomponent property defined in counter.props.

  3. counter.props allows us to create the properties of our webcomponent, these are like React's propTypes, but with a big difference they are associated with the instance and can be read and modified by referencing the node, example document.querySelector("my-counter").count = 10;

  4. ReactDom.render needs a reference to mount the component, in Atomico you only need to create the my-counter tag to create a new instance of the component.

  5. The <host/> tag is similar to <> </> for React, but <host/> represents the webcomponent instance and every component created with Atomico must return the host tag

  6. This is only readability, but in Atomico by convention we do not use capital letters when naming our component, these are only used when creating the customElement as in line 16, since Counter is instantiable.

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.

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";

function button() {
  return <host shadowDom><slot/></host>;
}

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

button.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(button);

Instances, children and slots

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


function Child({children}){
    return <span>children</span>
}

function Main(){
    return <>
        <Child>text 1...</Child>
        <Child>text 2...</Child>
    </>
}

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:

import { c } from "atomico";

function myComponent(){
    return <host>
        ...
    </host>
}

export const MyComponent = c(myComponent); // Constructor

customElements.define("my-component", MyComponent);

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

import { c } from "atomico";
import { MyComponent } from "./my-component";

function myApp(){
    return <host>
        <MyComponent/>
    </host>;
}

export const MyApp = c(myApp);

customElements.define("my-app", MyApp);

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

function MyStatelessTemplateBlock(){

}

function MyComponent(){
    return <host>
        <MyStatelessTemplateBlock/>
    </host>
}

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

⚛️
🪄
@atomico/react
From React to Atomico
VirtualDOM api differences