Document with React Component with Storybook

actions.md

Lesson Description

Starting Code

Finished Code

deploy.md

Lesson Description

Starting Code

Finished Code

index.md

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>
);

theming.md

Lesson Description

Starting Code

Finished Code