Atomic Design powered by React @ AbemaTV

6,825 views

Published on

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

Published in: Technology
0 Comments
24 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,825
On SlideShare
0
From Embeds
0
Number of Embeds
2,777
Actions
Shares
0
Downloads
16
Comments
0
Likes
24
Embeds 0
No embeds

No notes for slide

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. 
 
 


×