Atomic Designpowered by React @

!

https://abema.tv

stockimages / FreeDigitalPhotos.net

👤

http://bradfrost.com/blog/post/atomic-web-design/

http://ygoto3.com/posts/atomic-design-on-actual-project

responsible for data-fetching

responsible for rendering

<AnnouncementItem announcement={{ title: “ ", url: “http://ygoto3.com”,

publishedAt: 1444050000 }} active />

<AnnouncementItem announcement={{ title: “ ", url: “http://ygoto3.com",

publishedAt: 1444050000 }} read/>

<AnnouncementItem announcement={{ title: “ ", url: “http://ygoto3.com",

publishedAt: 1444050000 }} />

const Divider = ({ className }) => ( <hr className={className} />);

<Divider className=“hoge” />

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

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

👍

http://ygoto3.com