Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Atomic Design powered by React @ AbemaTV

11,127 views

Published on

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

Published in: Technology
  • Be the first to comment

Atomic Design powered by React @ AbemaTV

  1. 1. 
 Atomic Design powered by React @
  2. 2. 
 

  3. 3. stockimages / FreeDigitalPhotos.net
  4. 4. 
 

  5. 5. 
 

  6. 6.
  7. 7. 
 

  8. 8. responsible for data-fetching responsible for rendering
  9. 9.
  10. 10.
  11. 11. <AnnouncementItem announcement={{ title: “ ",
 url: “http://ygoto3.com”, publishedAt: 1444050000 }} active
 />
  12. 12. <AnnouncementItem announcement={{ title: “ ",
 url: “http://ygoto3.com", publishedAt: 1444050000 }} read
 />
  13. 13. <AnnouncementItem announcement={{ title: “ ",
 url: “http://ygoto3.com", publishedAt: 1444050000 }}
 />
  14. 14. 
 
 

  15. 15. const Divider = ({ className }) => ( <hr className={className} /> ); <Divider className=“hoge” />
  16. 16. 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");
  17. 17.
  18. 18.
  19. 19. 
 
 MediaStore.media$ .subscribe((channels) => { this.setState({ channels })
 });
  20. 20. 👍
  21. 21.
  22. 22. 
 
 


×