This video is available to students only

Setting up Storybook

Setup Storybook to view and test our code.

What is Storybook?#

Storybook is a tool for viewing and interacting with UI (user interface) components. There are plugins for a wide array of frameworks including React, Angular, Vue, and many more. Storybook gives us a sandbox to test our React code. It also gives us a nice website we could publish to our users to allow them to demo our library! We'll be utilizing Storybook to check that useScroller is working correctly without needing to deploy our library.

Setting up Storybook#

Get started setting up Storybook by using their initialization installer npx sb init at the root of Scroller. npx is a tool which comes with npm for running scripts found in node_module/.bin or remotely. If a script isn't found locally, npx will download the required scripts from npm and run it. sb is a Storybook initialization script. sb will scan our project for the correct frontend framework to use, in our case React, and add Storybook to Scroller's devDependencies.

A stories/ directory is automatically created in the src/ directory.

In the stories/ directory, delete all the files contained within. These are all autogenerated files created by sb init which we'll be replacing.

Writing our first story#

Β 

This page is a preview of Creating React Libraries from Scratch

Start a new discussion. All notification go to the author.