React 16 Tooling

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. ...