Atomic Design

This project leverages the Atomic Design methodology to create a scalable and easy to maintain component folder structure.

In short, Atomic Design is a methodology proposed by @bradfrost by which you can better organize your UI components. It can be done by separating components in atoms, molecules, organisms, pages and templates.

However, these are not rules you must follow to the letter. Just take them as a basis for your project and adapt it for what better fits your use case (see this discussion)

Atoms

An atom is a native html tag, a React Component that renders an html tag or any third party component:

_{atoms/Input.js}

const Input = props => <input {...props />

^{See src/components/atoms/Input/index.js}

_{atoms/Label.js}

const Label = props => <label {...props} />

^{See src/components/atoms/Label/index.js}

Molecules

A molecule is a group of atoms:

_{molecules/Field.js}

const Field = ({ label, ...inputProps }) => (
  <Label>
    {label}
    <Input {...inputProps} />
  <Label>
)

^{See src/components/molecules/Field/index.js}

Organisms

A organism is a group of atoms, molecules and/or other organisms:

_{organisms/Form.js}

const Form = (props) => (
  <form {...props}>
    <Field label="Name" type="text" />
    <Field label="Email" type="email" />
  <form>
)

^{See src/components/organisms/PostForm/index.js}

Pages

A page is... well, a page, where you will put mostly (but not exclusively) organisms:

_{pages/HomePage.js}

const HomePage = () => (
  <PageTemplate header={<Header />}>
    <Form />
  </PageTemplate>
)

^{See src/components/pages/HomePage/index.js}

Templates

A template is a layout to be used on pages, see why templates are good practice:

_{templates/PageTemplate.js}

const PageTemplate = ({ header, children }) => (
  <main>
    {header && <div>{header}</div>}
    {children}
  </main>
)

^{See src/components/templates/PageTemplate/index.js}

---

Do not worry

Atomic Design should be a solution, not another problem. If you want to create a component and don't know where to put it (atoms, molecules, organisms etc.), do not worry, do not think too much, just put it anywhere. After you realize what it is, just move the component folder to the right place. Everything else should work.

This is possible because all components are dynamically exported on src/components/index.js and imported in a way that Atomic Design structure doesn't matter:

import { Input, Label, Field, HomePage, PageTemplate } from 'components'