Streamline your Front-End Development with Storybook
Tags: javascript, storybook, react
Published: 2018-08-02 11:00:26

---
title: Streamline your Front-End Development with Storybook 
published: true
description: 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/o9czspzbleakjhw0gh1z.jpg
tags: javascript, storybook, react
---

_[Cover image by Victor R. Ruiz on Flickr](https://www.flickr.com/photos/rvr/)_

Often I change things __or__ update the libraries I use and things work, but they don't look nice anymore.

For example, I updated `react-native-svg` and they renamed the `rotate` prop to `rotation` and suddendly a slider wasn't rotated 90° anymore. It still worked, but looked strange.

So I figured, I need a way to find these problems quickly. Automatically would be nice too, but the first step should allow me to see these problems without the need to click through the whole app.

### Enter Storybook

[Storybook](https://storybook.js.org/) sells itself as __a development environment for UI components__.

### What

__Storybook lets you render your components in different states in its own UI__, a component catalog. This allows your to __browse all the components quickly__, for example when you think about writing a new one to see if you already have something that would do the job, or if you want to check if some broke after an update.

Since the components are rendered outside of your app __it should also lead to a better component architecture__, because they have to be truly stand-alone.

## How

First you add it to your project. For this, you __install the CLI__ that sets up all the dependencies and creates some files you use later:


```
$ npm i -g @storybook/cli
$ cd your-project
$ getstorybook
```

The `getstorybook` command figures out what kind of project you have and tries to install Storybook pre-configured for it. I created a React app with [create-react-app](https://github.com/facebook/create-react-app).

After this, you have __new scripts__ in your `package.json`

- `storybook` is used for development
- `build-storybook` is used to create a static build of the catalog

You also have a new directory called `stories`, in my `create-react-app` case it was created inside of `your-project/src` 

You now can write __stories__ for your components, which are kinda like tests you know from unit-testing.

Lets try a simple example, I want a `<Text>` component, that lets me set its `text-decoration` to `underline` via a boolean prop.


```javascript
// src/Text.js

import React from "react";

export default ({ children, underline }) => (
  <span style={{ textDecoration: underline ? "underline" : "none" }}>
    {children}
  </span>
);

```

Now I try to render this component in Storybook with its two props states. For this I `import` the `Text` component into `src/stories/index.js` and use Storybooks `storiesOf()` function.


```javascript
// src/stories/index.js

import React from "react";
import { storiesOf } from "@storybook/react";
import Text from "../Text";

storiesOf("Text", module)
  .add("without underline", () => <Text>Hello, world!</Text>)
  .add("with underline", () => <Text underline>Hello, world!</Text>);

```

Now I can check if everything worked by running the `storybook` script and opening the browser at `http://localhost:9009`


```
$ yarn run storybook
```

On the left side you can see a tree-navigation. Every call to the `storiesOf()` function created a drop-down with links to the stories added via the `add()` method.

I can now click around this catalog to look at the different states of my `Text` component. 

## Conclusion

Storybook is an interesting apporach to front-end development. It lets you create and test your components in isolation, so you can focus on one problem at a time. The catalog UI allows you to browse components quickly and check if they still work after you changed something in your app.