Storybook luckily makes it really easy to get started with a standard installation of React. Once that's finished running, you can navigate to the directory: cd my-storybookĪnd we're ready to go! Step 1: Installing Storybook Note: feel free to replace my-storybook with the directory name of your choice. So let's get started by navigating to where we want to create our new app and run the Create React App command: npx create-react-app my-storybook That said, if you're already working with an app created using Create React App that's not ejected, you should be able to still follow on with Part 1 and beyond just the same! This will help us focus on getting productive in Storybook rather than walking through integrating it into a current app. To get started, we're going to start from scratch with Create React App. Inside that app, we're going to install Storybook and create a few new components that will help us learn how to create new components that we can work on in a story and then use it in a React app. We're going to bootstrap a new React JS app using Create React App. This provides an organized and focused environment to build new components and work on existing ones.ĪDVERTISEMENT What are we going to build? Once you build out a component, Storybook lets you create a "story" file where you can then import your component and create various use case examples in an iFramed sandbox using that component. Storybook is a JavaScript tool that allows developers to create organized UI systems making both the building process and documentation more efficient and easier to use. Repeat: Creating a new Header component.So how can we use Storybook to build libraries and design systems that self-document as we build them? Frameworks like React, Vue, and Angular all help developers create modular systems using components, but that doesn't usually include a good way to see them all from a higher point of view.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |