React Native Storybook

A brief presentation on React Native Storybook by Senne Van Cauwenberge

Transcript

1. React Native
   Storybook
   

   View Slide

2. Why?
   

   View Slide

3. Why?
   We create a lot of UI components
   

   View Slide

4. Why?
   We create a lot of UI components
   These components have multiple states
   Reusable Componen
   

   View Slide

5. Why?
   ate a lot of UI components
   mponents have multiple states
   Reusable Components
   

   View Slide

6. What?
   

   View Slide

7. Getting Started
   

   View Slide

8. Getting Started
   $getstorybook
   

   View Slide

9. Getting Started
   

   View Slide

10. Getting Started
    

    View Slide

11. Getting Started
    

    View Slide

12. Addons
    

    View Slide

13. Links Knobs
    Notes Info Options
    Storyshots Console Readme
    Addons
    Actions
    

    View Slide

14. Actions
    Allow you to inspect events related to your
    components.
    

    View Slide

15. Links
    With links you can link stories together.

    (And make prototypes)
    

    View Slide

16. Knobs
    Allow you to edit React props dynamically
    using the Storybook UI.
    

    View Slide

17. Notes
    Allows you to write notes for each story in your
    component.
    Info
    Allows you to build a nice-looking style guide
    with docs, automatic sample source code with a
    PropType explorer.
    

    View Slide

18. Options
    Allows you to customise the Storybook webapp UI.
    Console
    Redirects console output (logs, errors, warnings)
    into Action Logger Panel.
    Readme
    Allows you to add docs in markdown format for
    each story.
    

    View Slide

19. Storyshots
    

    View Slide

20. Fin
    

    View Slide