Skip to content

A basic build using create-react-app and storybook CLI with steps written out

Notifications You must be signed in to change notification settings

micahgodbolt/react-with-storybook-starter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React w/ Storybook Starter

Want to get up and running with a React application and Storybook?

This repo is a combination of Create React App and the Storybook CLI. The stories folder has been changed to components and a new Button component has been scaffolded and used in the application.

Using This Repo

  • git clone https://github.com/micahgodbolt/react-with-storybook-starter.git && cd react-with-storybook-starter
  • npm install
  • npm start (for the application)

or

  • npm run storybook (for storybook)

Below are the steps taken to get to where this repo is now. If you're starting a new application I'd recommend following them, as the CLI's may have been updated since this repo was created.

New Project Setup

  • npm install -g create-react-app
  • npm i -g @storybook/cli
  • create-react-app my-app
  • cd my-app
  • getstorybook
  • changed src/stories folder to src/components

Import all stories

The default configuration of Storybook only imports a single index file. Lets change that to import all of our story files.

Change ./.storybook/config.js to import all files matching *.stories.js as follows:

const req = require.context("../src/components", true, /.stories.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

Building components

Start building in the components folder with this folder structure

- ComponentName
  - Component.css
  - ComponentName.stories.js
  - ComponentName.jsx

Create src/components/Button and add Button.css, Button.jsx and Button.stories.js

Button.jsx will be:

import React, { Component } from 'react';
import './Button.scss';

export class Button extends Component {
  render() {
    return (
      <button className="Button" {...this.props}> {this.props.children} </button>
    );
  }
}

Button.stories.js will be:

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

let stories = storiesOf('Button', module);

stories.add('Default', () =>
  <Button onClick={() => console.log("clicked!!")}>
    Hello Button
  </Button>
);

Button.css is just CSS, but will automatically be loaded when the component is used.

Run Storybook

npm run storybook

Add Button to App.js

import React, { Component } from 'react';
import './App.css';
import { Button } from './components/Button/Button';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button onClick={() => alert('i was clicked!')} > Click Me Please </Button>
      </div>
    );
  }
}

export default App;

Run the application

npm start

Adding Sass

Adding Sass isn't very difficult, but it does involve "ejecting" out of create react app. This process is out of the scope of this demo, but I'll include some links below.

About

A basic build using create-react-app and storybook CLI with steps written out

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published