Building UI Components in React using Storybook

Anisat Yunusa
Level Up Coding
Published in
4 min readFeb 22, 2021

--

I recently started a new role as an Interface Developer at Softcom.

Yay!

As an interface dev, I am required to convert designs for the web into code. So far, I have learned a lot and I’ll be sharing how I went on building UI components with React and Storybook.

I’ll be addressing how to:

  • set up a react application
  • add storybook-react as a dependency and
  • create a UI component Library with Storybook

Before anything else, I’ll answer the “what” question. That is, what react, components and Storybook are.

What is React?
React is a JavaScript library created by Facebook for building user interfaces for web and mobile applications faster and more effectively. It supports the easy use of breaking complex UIs into smaller chunks of code. These small chunks are called components.

What is a component?
Components are reusable blocks of code. Organizing your codes into components makes it easier to read and understand, reduces code duplication, and also allows for scalability.

Taking the Eyowo website as an example, there are different sections on the website which can be converted into components. You can have

  • Header
Header
  • Footer
Footer
  • Hero
Hero
  • Text content
  • Features content etc.

The combination of these components makes the website.

What is a Storybook?
Storybook is a UI library that can be used to document components. Storybook works with many popular front-end frameworks and libraries such as React, Vue, React Native, Angular, and more.

With Storybook, there isn’t a need to build an entirely new interface just to display your UI component which makes development faster and easier and also allows you to focus on one component at a time.

Setting up a react application

Create React App is a command used to set up the boilerplate for react application. It is one faster way to set up a react app as it requires no extra configuration like Webpack or Babel, as it is all done while installing the create react app. All you need is, have Node.js installed on your PC and run a set of commands. You can use any of the commands below for setting up the create React app

npx create-react-app my-appcd my-appnpm start

or

npm init react-app my-appcd my-appnpm start

or

yarn create react-app my-appcd my-appyarn start

Adding storybook-react as a dependency

Adding Storybook to a project is quite easy. All you need to do is install the storybook package into your project.

npx -p @storybook/cli sb init

Run the storybook app and start creating your stories.

npm run storybook

The interface should look like the image below

Storybook

Creating UI component Library with Storybook

To create a UI component Library with Storybook, you create different UI components and document equivalent stories for the different components in Storybook. By default, Storybook comes with some components including the Button component. You’ll see a stories folder, inside it you have button.stories.js

You can go ahead and create more components and also override the defaults by editing them to your preferences.

Developing with Storybook allows developers to interactively develop and test the components created. Storybook also has features that can allow developers to enhance its core abilities. These features are referred to as add-ons. For more info on add-ons, check Storybook addons documentation

PS: It can also serve as a playground for designers on the team to test what the developers have built.

--

--