> For the complete documentation index, see [llms.txt](https://rangle-io.gitbook.io/react-training/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rangle-io.gitbook.io/react-training/index-1/atomic_component_principles.md).

# Atomic Component Principles

## Atomic Component Principles

![](/files/-LZp6GQ0W0iR2IPLimfe)

### Atoms

![](/files/-LZp6GQ2M6lDdXOk2lD_)

* The simplest building block
* HTML tags
* Not very useful on their own
* Easily styled
* Very reusable
* Foundation of building a brand

```markup
<Form>
  <Label>Search</Label>
  <Input />
</Form>
```

### Molecules

![](/files/-LZp6GQ4rO2xppxR1vRc)

* Groups of Atoms bonded together
* Serve as backbone of design system
* For example, a Search Form
* Do one thing, do it well

```markup
<Form onSubmit={ onSubmit }>
  <Label>Search</Label>
  <Input type="text" value={ search } />

  <Button type="submit">Search</Button>
</Form>
```

## Organisms

![](/files/-LZp6GQ6DMs728NEOVJc)

* Groups of molecules
* Distinct section of an interface
* Portable, easily modified

```markup
<Header>
  <Navigator>
    <Brand />
    <NavItem to="home">Home</NavItem>
    <NavItem to="about">About</NavItem>
    <NavItem to="blog">Blog</NavItem>
  </Navigator>
  <SearchForm />
</Header>
```

## Ecosystem

![](/files/-LZp6GQ848yMi-m7VXFn)

* What the client will see
* Connected containers
* Many components that make up a view

## Environment

![](/files/-LZp6GQAoVf8R5w-xc0f)

* Root Component
* Typically the `<App />` component
* Represents everything packaged together as an application

Images from:

* Brad Frosts's article, [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/)
* Joey Di Nardo's article, [Atomic Components: Managing Dynamic React Components using Atomic Design — Part 1](https://medium.com/@yejodido/atomic-components-managing-dynamic-react-components-using-atomic-design-part-1-5f07451f261f#.9b2faky8s).