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 props

Perhaps, the most straightforward way to get started with developing components in Storybook is to start experimenting with different property values. To do so, you just have to create different stories of your component, each with different property values.

First, let's take a look at the component that you're working on:

import React from 'react'; 
 
const MyComponent = ({ title, content, titleStyle, contentStyle }) => ( 
  <section> 
    <heading> 
      <h2 style={titleStyle}>{title}</h2> 
    </heading> 
    <article style={contentStyle}>{content}</article> 
  </section> 
); 
 
export default MyComponent; 

There isn't much to this component. It takes four props and renders some HTML markup. The title and the content prop values are simple strings. ...

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