Skip to content

Instantly share code, notes, and snippets.

@lauragift21
Last active February 17, 2020 13:04
Show Gist options
  • Save lauragift21/62ab6b50f5a92da4e71d54592d4fbc29 to your computer and use it in GitHub Desktop.
Save lauragift21/62ab6b50f5a92da4e71d54592d4fbc29 to your computer and use it in GitHub Desktop.
Document with React Component with Storybook

Lesson Description

Starting Code

Finished Code

Lesson Description

Starting Code

Finished Code

Lesson Description

Building UI components for your react application is great. But it becomes a daunting task to visualize all UI component and states at a glance within your code base. But this becomes possible with the integration of Storybook. In this lesson, We'll take a look at how to setup a React application with Storybook.

Starting Code

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <button>Storybook Lesson</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Finished Code

import React from 'react';
import { Button } from '@storybook/react/demo';

export default { title: 'Button' };

export const withText = () => <Button>Hello Button</Button>;

export const withEmoji = () => (
  <Button><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
);

Lesson Description

Starting Code

Finished Code

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment