ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
18
Apr
2018
#react
#redux
#javascript
#storybook
#frontend
#learntocode
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: Storybook With React

18 Apr, 2018

Hey there, that’s me again and a new post from me!

Lately, I worked on the project that generates live documentation of the front-end components for apps built with create-react-app, and this UI development environment is called Storybook.

What is the significant purpose for using this tool?

First of all, it helps to avoid code duplications and to make it easy to know which components there are already, what they are doing and how they are being used.

Secondly, it allows to display and to test component behavior by showcase, which is very useful in getting quick feedback on everything we develop.

Another fantastic thing, React Storybook is an isolated app. After declaring stories, you can start to create components in isolation with quick iteration, and that allows us to create component documentation (style guide) without explicitly doing so, and keeps it up-to-date.

Now it’s time to show you how it works and which components are involved.

But before trying my example, you have to install and run Storybook with React. You can read about that here.

After you installed React Storybook, let’s have a look at my footer implementation:

// ./components/footer/Footer.js

import React from 'react';
import DisplayFooter from './DisplayFooter';
import ResponsiveFooter from './ResponsiveFooter';

const Footer = props => (
  <div className='footer'>
    <DisplayFooter {...props} />
    <ResponsiveFooter {...props} />
  </div>
)

export default Footer

Above you see standard React component. The next step is creating Footer.stories.js file and to add Footer component to stories:

// ./components/footer/Footer.stories.js

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

storiesOf('Footer', module).add('default', () => <Footer />)

To see the result, you have to type this command npm run storybook in your project path in the console line, what will run that on your localhost.

It might work with apps that have a similar Webpack configuration to create-react-app, for example, for Angular or Vue web apps.

Let me know what you think about using Storybook with React. Thank you for reading!

Tags | #react #redux #javascript #storybook #frontend #learntocode #coding #letsgetcoding #womenwhocode
Next: Front-end Shorts: How to Read Content From The File Input in React

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy