Display the JSX of a React Storybook Story with the JSX Addon
Storybook is a UI component development environment for React, Vue, and Angular. With that, you can develop UI components without running your app.
Storybook has a rich Addons ecosystem that really adds a lot to the developer experience. Here I show how to set up the JSX Addon in Storybook to display the code behind React components. The juxtaposition of code and visual display can be very effective documentation for any users of your components.
Instructor: [00:01] First, we're going to install some dev dependencies for Storybook/Addons. In particular, we're going to use the JSXAddon.
[00:09] To configure the Addons, we're going to create a new file in the Storybook folder called Addons.js, then just declare our dependency StorybookAddonJSX/register, and that calls it within. Internally, this executes a registration function.
[00:28] Now over in config.js, we're going to import an additional function called setAddon from Storybook/React, and we're going to import JSXAddon from StorybookAddonJSX. Then we're just going to pair them together with setAddon, JSXAddon.
[00:50] That's all the setup we need to do. Now we can use this globally in any of those stories by just saying addWithJSX for any JSX component. Since we're using a React code base, this is basically all the components.
[01:07] Now when I run Storybook, and then I refresh on the right, I can see the JSX of whatever the component I'm demonstrating on the top.