Welcome

Get the required tooling installed for developing our library.

What Does A React Library Development Environment Look Like?

Introduction

Setting up the files and directories needed to write a React library.

Essential Files and Directories for Publishing a React Library

Introduction to project dependencies, devDependencies, and peerDependencies.

An Introduction to the 3 Types of Dependencies in React Libraries

Installing dependencies for the Scroller library.

Installing React and React-DOM as peerDependencies

Setup Scroller using Git, create a new GitHub project, and how push code to GitHub.

A Beginner's Guide to Using Git to Push Code to GitHub

Initialize

Scroller schema

Writing code for the Scroller library and exporting it for users.

Implementing Scroller

Setup Storybook to view and test our code.

How to Set Up Storybook to View and Test Code

Implement

Why do we need to bundle our code, and how can ESBuild help?

Setting Up ESBuild to Simplify Code Maintainability

What are JS Modules, and how do they affect consumers of our code?

A Brief Guide to JavaScript Modules and What They Do

Updating ESBuild to export multiple JS module formats.

How to Use ESBuild to Export Multiple JavaScript Module Formats

How to configure and deploy to a public npm repository.

How to Configure and Publish an NPM Package

Deploy

An introduction to maintainability in a React library.

What it Takes to Make Your React Library More Maintainable

3 Ways to Add Typescript to a React Library

How to Install Jest and Run Your First Unit Test

How to Install and Run ESLint When Creating React Libraries

How to Prevent Bad Git Commits with Lint-staged

Maintain

What we learned in Creating React Libraries from Scratch.

Course Wrap Up - Creating React Libraries from Scratch

Summary

esbuild

react

In this course, we'll cover what it takes to write, maintain, and publish a React library from scratch. 
In the 2020 State of JS survey, an annual survey conducted of the frontend JavaScript community, React came in as the most used framework for frontend development. Because React is so popular, building libraries in it can open you up to a wide range of users, contributors, and possibilities!

## Why this course

Building a library is so much more than just the code. 
We need to know the ins and outs of versioning, deploying, building, documenting, dependency management, module types, tooling, and more. 
This is a daunting task for just one tutorial to cover. Creating React Libraries from Scratch will teach you everything you need to know to succeed in creating a library.

Don't worry if you're not a React wizard. This course is designed for beginner/intermediate developers who have never deployed a library before and have minimal React experience. However, you should be familiar with JavaScript.

## Course Topics
 
Throughout Creating React Libraries from Scratch we'll develop a React Hook called Scroller that will provide a utility for scrolling around web pages—taking advantage of window.scrollTo. 
We'll start in module 1 with an empty directory; adding documentation files, installing dependencies, and setting up GitHub. Right away, you'll have a project that could be deployable as a fully functional library!
In module 2 we'll implement scroller while taking advantage of Storybook to visually test our code. By module 3 Scroller will be deployed to npm in multiple JavaScript module formats.
Finally, in module 4, we'll look at different tools and techniques in software development to maintain a library. This includes linting, unit tests, TypeScript, and Lint-Staged!
By the end of this course, you'll be able to run _npm install scroller_, and take advantage of React code __you__ wrote in future projects.

Creating React Libraries from Scratch will dive into:
- initializing a new npm package
- maintaining code quality
- publishing to npm
- keeping contributors on track
- exposing modules that work in NodeJS and the Web
- unit-testing
- Storybook for demoing components
- exposing typing using TypeScript
- and more!

In this course we'll cover what it takes to maintain, write, and publish a React library from scratch.

Creating React Libraries from Scratch

Creating a React library from `yarn init` to deployed on npm

The different types of JavaScript dependency types and versioning

Setting up documentation for contributers and consumers

Keeping up with code quality while multiple people work on a project

 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 

 is working correctly without needing to deploy our library.

Get started setting up Storybook by using their initialization installer 

 is a tool which comes with npm for running scripts found in 

 or remotely. If a script isn't found locally, 

 will download the required scripts from npm and run it. 

 will scan our project for the correct frontend framework to use, in our case React, and add Storybook to Scroller's 

 directory is automatically created in the 

 directory, delete all the files contained within. These are all autogenerated files created by 

---
title: How to Set Up Storybook to View and Test Code
slug: setting-up-storybook
description: Setup Storybook to view and test our code.
isPublicLesson: false
privateVideoUrl: https://fullstack.wistia.com/medias/lvwhgaed5a
useMdx: true
---

import { Directory, Folder, File } from "~/../components/directory";

## What is Storybook?

[Storybook](https://storybook.js.org/) 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.

<Directory module="03" lesson="03">
    <Folder header="scroller">
        <Folder isHighlighted header=".storybook">
            <File isHighlighted>main.js</File>
            <File isHighlighted>preview.js</File>
        </Folder>
        <Folder header="node_modules" isClosed>
            <em style={{ color: "rgba(0, 0, 0, 0.6)" }}>Dependencies installed from yarn get added here.</em>
        </Folder>
        <Folder header="src">
            <Folder isHighlighted header="stories" />
            <File>index.js</File>
            <File>useScroller.js</File>
        </Folder>
        <File>CONTRIBUTING.md</File>
        <File>LICENSE.md</File>
        <File>README.md</File>
        <File>package.json</File>
        <File>yarn.lock</File>
        <File>.gitignore</File>
    </Folder>
</Directory>

## Writing our first story

Dylan Paulus

Storybook is a tool for viewing and interacting with user interface components.

There are plug-ins for a wide array of frameworks including React, Angular,

Storybook gives us a sandbox to test our React code.

It also gives us a nice website we can publish to our users to allow them to

Get started by setting up Storybook by using their initialization installer.

MPX is a tool which comes with MPM for running scripts found in node modules/

If the script is in found locally, MPX will download the required scripts from

SB will scan our project for the correct front-end framework to use in our case

and add Storybook to Scroller's dev dependencies.

A Story's directory is automatically created and source/stories delete all the

These are auto-generated files that we'll be replacing soon.

The initialization script also updated our package to that JSON to include a

Create a new file inside source/stories called usescroller.stories.js.

Files suffix with .stories tell Storybook which files to look for when

A Story is a place to visually share and test front-end code.

We can have a group of Stories for a single component show different

First, we'll import the dependencies needed to write a Story for usescroller.

We'll be needing React and usescroller itself.

Next, we'll export a view or Story for interacting with the usescroller hook.

Storybook uses a CSF or component story format to define its stories.

At a high level, this means that any component exported as a name export are

Metadata about these stories get exported as a default export.

We'll give our Story a title by saying Export Default and give it an object.

Here, we'll define a title which we'll call usescroller.

This is a title that groups all our Stories together in this file.

Next, we'll export a testing component or Story called usescroller example.

We'll set up the hook usescroller and we'll give some arbitrary values.

So our Y will be 200 and we'll say is smooth to be true.

Finally, we'll return a view for our Story.

In here, we'll create a div that is super-talled so we can display the

And then a button which on clicked calls our scroller callback.

Within the scroller directory, run Yarn Storybook.

This will run the Storybook sandbox so we can view the story we just created.

Now, when we click our button, we can see our hook working in scrolling.

How to Set Up Storybook to View and Test Code

What is Storybook?#

Setting up Storybook#

Writing our first story#