We designed and developed AbemaTV Web using Atomic Design and React.

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