O'Reilly logo

React 16 Tooling by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Experimenting with actions

Let's shift our attention to another add-on—Actions. This add-on is enabled in your Storybook by default. The idea with Actions is that once you select a story, you can interact with the rendered page elements in the main pane. Actions provide you with a mechanism that logs user interactions in the Storybook UI. Additionally, Actions can serve as a general-purpose tool to help you monitor data as it flows through your components.

Let's start with a simple button component:

import React from 'react'; 
 
const MyButton = ({ onClick }) => ( 
  <button onClick={onClick}>My Button</button> 
); 
 
export default MyButton; 

The MyButton component re

 

nders a <button> element and assigns it an onClick event handler. The handler ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required