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.
Upcoming SlideShare
Etat de l'écosystème MPEG-DASH après l'IBC 2013
Next
Download to read offline and view in fullscreen.

Share

Atomic Design powered by React @ AbemaTV

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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. 
 
 

  • x-maverick

    Apr. 27, 2020
  • sayakaohnuma

    Feb. 26, 2020
  • DubaiEscortBunniesUAE

    May. 30, 2017
  • KentaAraki

    Feb. 21, 2017
  • cometmiki

    Jan. 31, 2017
  • satoshikishi

    Jan. 12, 2017
  • MegaBlackLabel

    Jan. 4, 2017
  • yosku

    Dec. 17, 2016
  • ryoheisonoda

    Dec. 8, 2016
  • arisyosaku

    Oct. 29, 2016
  • milkmeta

    Aug. 3, 2016
  • rot1024

    Jul. 30, 2016
  • watanabae-ei

    Jul. 21, 2016
  • nyoshitaka

    Jun. 19, 2016
  • uranodai

    Jun. 9, 2016
  • kosukemuramatsu39

    Jun. 3, 2016
  • takamasa

    Jun. 2, 2016
  • isamatakizawa

    Jun. 2, 2016
  • noriyotcp

    Jun. 2, 2016
  • yy8597

    Jun. 2, 2016

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

Views

Total views

13,579

On Slideshare

0

From embeds

0

Number of embeds

5,563

Actions

Downloads

22

Shares

0

Comments

0

Likes

26

×