How to Install Storybook and Add Stories to React Components

[00:00 - 00:09] In this course, we will use Storybook in a real-world application. However, to learn the basics of Storybook, let's start with a fresh project using Create React app, and then later on move to the real project.

[00:10 - 00:20] I'm going to open the terminal and type "mpx create react app". I'm going to pin it to the version 5, and then I'm going to call it "learning project" with the template of Type Script.

[00:21 - 00:28] Once this is done, let's open the "learning project" folder which was just created using our editor. I'm going to be using VS Code.

[00:29 - 00:39] Now that we have our project, I'm going to open the terminal and I'm going to install Storybook to it. Installing Storybook is as simple as running a single command called "mpx" as " pinit".

[00:40 - 00:52] This command will automatically detect the configuration of our project. In this case, it's a React project using Create React app, and it will install everything necessary for Storybook to run, including an initial boilerplate that teaches us how to use Storybook in its basic form.

[00:53 - 01:03] Once this is done, it's telling us to run npm run Storybook so we can start Storybook. And this is possible because Storybook made changes to our packages on by adding a couple of scripts.

[01:04 - 01:20] The first script will start Storybook in development mode on port 6000, and the second one will build Storybook as a standalone application in case you ever want to deploy it and host it somewhere for other people to access it. Though you could use npm, I'm going to use yarn, so let's start by typing "yarn Storybook to run the application" and see what happens.

[01:21 - 01:43] Storybook should open a new tab in our browser with an introduction page containing very interesting and helpful links, as well as an example for a button, an atomic component, a header, which is a composition of components using the button, and a page that composes everything together. Those are there to serve as an example for us to create our own stories.

[01:44 - 01:51] But what exactly are stories? If you look at the components, for instance, a button, a button has different props and reacts differently to certain props.

[01:52 - 02:04] So in this case, we have a large button and a small button, or maybe a primary button and a secondary button. So stories are basically a combination of a component and certain annotation that makes the component react differently.

[02:05 - 02:11] So in this case, we're passing different props to the button and it's showing us all of these four different states. The stories are defined in code.

[02:12 - 02:24] So if we look at the examples that Storybook said, it added a stories folder to our project. It contains all of the components for the button, the header and the page, but as well as the components, we can see some implementations here.

[02:25 - 02:30] We also see the button.stories.tx file. And these are the stories files, which we're not getting to detail right now.

[02:31 - 02:38] So don't worry about it, but essentially these files, they are defining the primary, secondary, large and small. And as you can see, there are different configurations with your past.

[02:39 - 02:46] So we can see how they visually look. And when writing stories files, we should be mindful of where they should be at .

[02:47 - 02:54] So in this case, Storybook added a stories folder containing both the components and the stories. Some people like to put all of the stories in a separate stories folder.

[02:55 - 03:01] However, I don't think that's really good. The best practice is to actually, let's suppose you have a components folder.

[03:02 - 03:14] And then these button specific implementations, they should be part of the specific button folder. So that if you ever look for the component, you will see all the necessary files collocated right to it.

[03:15 - 03:22] So test files, style files, stories files and others. But in this case, I'm just going to put it back and put in the same structure it was before.

[03:23 - 03:31] And together with the stories folder, Storybook also added a folder called dot Storybook. Inside of it, there are two files.

[03:32 - 03:40] One is called mainjs and the other one is called previewjs. It's important to think that Storybook is a combination of a server and a client.

[03:41 - 03:47] So what we're seeing right now is the Storybook client. And what is happening right here is the Storybook server.

[03:48 - 03:54] The mainjs file is used to configure the Storybook server. And it tells Storybook how to load and process the Story files.

[03:55 - 04:04] It contains the main configuration that Storybook needs to work. So as you can see here, we have the definition of the stories and we're defining globs for Storybook to find these stories files.

[04:05 - 04:09] There's a list of add-ons which we'll get into detail in the next lessons. And there are some extra configuration.

[04:10 - 04:18] Because this project uses Create React app, there is a preset which is automatically installed and this is using Webpack 5. There's also the previewjs file.

[04:19 - 04:33] And the previewjs file is what configures the client part of Storybook, which essentially tells Storybook how to render and how to behave in the client . So as we can see here, there are a couple of parameters that are configuring something related to add-ons, which we'll also get into detail later.

[04:34 - 04:48] But essentially, if you need to configure how Storybook renders something, let's say you need to add some global styles or you want to add a wrapper around all of your stories, previewjs is the file that will load the configurations for that. So this should help you understand a bit more.

[04:49 - 05:04] Basically, once you have a configuration file, Storybook will read it and process in the Storybook server, which will open the browser with the Storybook client where you actually have the application. So if you ever want to make any changes on how the components render in the Storybook client, you can make changes to the previewjs file.

[05:05 - 05:16] And because Storybook uses hot module reloading, you don't need to run the application again. However, because the mainjs file is connected to the Storybook server, in order for your changes to be applied, you have to kill Storybook and run it again.

[05:17 - 05:26] So for experimentation sake, let's kill Storybook and let's change something in mainjs. I'm just going to delete the Stories MDX blob so that Storybook doesn't load this documentation story.

[05:27 - 05:36] So let's run Storybook again and see what happens. So Storybook should open again, but without the documentation story.

[05:37 - 05:46] So now you see how important it is to make sure to rerun Storybook after changing the mainjs file. Sometimes in the future you might find yourself in a situation where your changes don't get applied and that might as well be the reason.

[05:47 - 05:52] And that's pretty much it for the lesson. We wanted to explore Storybook for a bit and in the next lessons we will dive right into the details.

[05:53 - 05:53] I'll see you in the next one.