Atomic Design is a methodology for building user interfaces that advocates designing in isolation at the individual component level before assembling them into pages. The document provides examples of React component code for an announcement item, a divider, and a check toggle that demonstrate how to build reusable UI elements at an atomic level and compose them to build interfaces. It also shows how to fetch data from a MediaStore to populate component state using a subscribe method.

1.
Atomic Design
powered by React @

10. stockimages / FreeDigitalPhotos.net

31. responsible for data-fetching
responsible for rendering

34. <AnnouncementItem
announcement={{ title: “ ",
url: “http://ygoto3.com”,
publishedAt: 1444050000 }}
active
/>

35. <AnnouncementItem
announcement={{ title: “ ",
url: “http://ygoto3.com",
publishedAt: 1444050000 }}
read
/>

36. <AnnouncementItem
announcement={{ title: “ ",
url: “http://ygoto3.com",
publishedAt: 1444050000 }}
/>

40. const Divider = ({ className }) => (
<hr className={className} />
);
<Divider className=“hoge” />

41. const createCheckToggle = ( size ) => ({ id, checked, onClick }) => {
const styleSize = styles[size];
return (
<div className={styles.container}>
<input id={id}
type="checkbox"
defaultChecked={checked}
className={styles.input}
onChange={onClick.bind(null, id)} />
<label htmlFor={id} className={`${styleSize} ${styles.check}`} />
</div>
);
};
export const CheckToggle = createCheckToggle("regular");
export const CheckToggleL = createCheckToggle("large");

49.
MediaStore.media$
.subscribe((channels) => {
this.setState({ channels })
});

51. 👍