{"id":420318,"date":"2022-03-23T13:00:12","date_gmt":"2022-03-23T10:00:12","guid":{"rendered":"https:\/\/en.buradabiliyorum.com\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/"},"modified":"2022-03-23T13:00:12","modified_gmt":"2022-03-23T10:00:12","slug":"how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it","status":"publish","type":"post","link":"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/","title":{"rendered":"#How to Start a React Component Library With Storybook and Create-React-App \u2013 CloudSavvy IT"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_84 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6a2947c9bb17b\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #dd3333;color:#dd3333\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #dd3333;color:#dd3333\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6a2947c9bb17b\" checked aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-1'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#%E2%80%9CHow_to_Start_a_React_Component_Library_With_Storybook_and_Create-React-App_%E2%80%93_CloudSavvy_IT%E2%80%9D\" >&#8220;How to Start a React Component Library With Storybook and Create-React-App \u2013 CloudSavvy IT&#8221;<\/a><ul class='ez-toc-list-level-2' ><li class='ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#What_Is_Storybook\" >What Is Storybook?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#Initializing_Your_React_Project\" >Initializing Your React Project<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#Adding_Storybook\" >Adding Storybook<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#Writing_Your_Components\" >Writing Your Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#Building_With_Babel\" >Building With Babel<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/buradabiliyorum.com\/en\/how-to-start-a-react-component-library-with-storybook-and-create-react-app-cloudsavvy-it\/#Conclusion\" >Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h1><span class=\"ez-toc-section\" id=\"%E2%80%9CHow_to_Start_a_React_Component_Library_With_Storybook_and_Create-React-App_%E2%80%93_CloudSavvy_IT%E2%80%9D\"><\/span>&#8220;How to Start a React Component Library With Storybook and Create-React-App \u2013 CloudSavvy IT&#8221;<span class=\"ez-toc-section-end\"><\/span><\/h1>\n<div id=\"article-content-area\">\n<img loading=\"lazy\" decoding=\"async\" class=\"type:primaryImage aligncenter size-full wp-image-8770\" data-pagespeed-lazy-srcset=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=398&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 400w, https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1 1200w\" sizes=\"auto, 400w, 1200w\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg?width=1198&amp;trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"React logo on a dark background\" width=\"1602\" height=\"902\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>React is one of the leading frameworks for frontend development with Java<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/download-scripts-themes-apps\/\" data-internallinksmanager029f6b8e52c=\"9\" title=\"Download Scripts &amp; Themes &amp; Apps\" target=\"_blank\" rel=\"noopener\">Script<\/a>. It\u2019s a naturally component-based approach where you assemble your app from reusable pieces of self-contained functionality.<\/p>\n<p>A logical step is to separate your fundamental UI components from your scenario-specific application code. Creating a component library gives you ready-to-use building blocks that you can pull into your next project.<\/p>\n<p>In this article we\u2019ll put together a simple set of React components with <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storybook.js.org\">Storybook<\/a>, then package them using Babel. Storybook provides a convenient way to inspect components during and after their development. It\u2019s an interface for browsing your library, experimenting with included components, and surfacing documentation.<\/p>\n<p>We\u2019re not going in-depth on any single <a href=\"https:\/\/buradabiliyorum.com\/en\/category\/technology\/\" data-internallinksmanager029f6b8e52c=\"4\" title=\"Technology\" target=\"_blank\" rel=\"noopener\">technology<\/a> in this article: instead, this is an overview guide of how to develop, package, and visualize components using the combination of React, Storybook, and Create-React-App.<\/p>\n<h2 id=\"what-is-storybook\"><span class=\"ez-toc-section\" id=\"What_Is_Storybook\"><\/span>What Is Storybook?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Storybook is simply a toolkit for developing and rendering components in isolation, outside the context in which they appear in your app. It provides a mechanism to build components, document their props, and provide interactive example renderings in a web-based UI. Storybook is framework-agnostic: you can use it with Angular, Vue, Ember, Svelte, and others besides React.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15686\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/b18668d9.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1268\" height=\"648\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Components are created by writing your regular React code and then adding a second companion file that describes the \u201cstories\u201d for that component. Your actual component is unchanged; Storybook gets all the information it needs from the accompanying <code>.stories.js<\/code>file. Storybook discovers these files automatically and uses their content to create entries in your library\u2019s web UI.<\/p>\n<p>We\u2019ll see the model in action later on when we get to writing components. First you need to create a new React project and add Storybook to it.<\/p>\n<h2 id=\"initializing-your-react-project\"><span class=\"ez-toc-section\" id=\"Initializing_Your_React_Project\"><\/span>Initializing Your React Project<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>We\u2019re going to use the popular <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/create-react-app.dev\/docs\/getting-started\">create-react-app<\/a> (CRA) toolkit to initialize the project. This gives you everything you need to build React components. It\u2019s also fully supported by Storybook.<\/p>\n<p>Open your terminal and type this command to create your library:<\/p>\n<pre>npx create-react-app my-components<\/pre>\n<p>Press <code>y<\/code> to confirm the installation of <code>create-react-app<\/code> if you\u2019ve never used the tool before. The installation process can take a couple of minutes. Once it\u2019s done, head to your new <code>my-components<\/code> directory. CRA will have added React\u2019s dependencies to your <code>package.json<\/code> and scaffolded a basic React application in the <code>public<\/code> and <code>src<\/code> directories.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15680\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/3ce606a3.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1279\" height=\"346\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>CRA assumes you\u2019re developing a codebase that\u2019ll be delivered straight to the browser. As we\u2019re actually building a library that won\u2019t be run as a standalone application, you can safely delete the default <code>public<\/code> and <code>src<\/code> directories if you like.<\/p>\n<h2 id=\"adding-storybook\"><span class=\"ez-toc-section\" id=\"Adding_Storybook\"><\/span>Adding Storybook<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It\u2019s simple to add Storybook to an existing CRA project. Running this command will get you everything you need:<\/p>\n<pre>npx sb init<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15681\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/b9e6a1f5.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1279\" height=\"262\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Be prepared to wait for a couple of minutes again while Storybook\u2019s packages are added to your project. The installer will create new <code>.storybook<\/code> and <code>stories<\/code> directories. The latter contains a set of example components. Delete this directory now as we won\u2019t be using it.<\/p>\n<p>The files within <code>.storybook<\/code> configure your Storybook server. <code>main.js<\/code> contains global settings such as the filename patterns to look for stories in. <code>preview.js<\/code> controls how stories are rendered within the Storybook web UI. References for both these files are available in the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storybook.js.org\/docs\/react\/configure\/overview\">Storybook docs<\/a>; for now, only one change is required.<\/p>\n<p>Storybook defaults to looking for stories in your <code>stories<\/code> directory. This doesn\u2019t make much sense for a project that\u2019s exclusively a component library. We\u2019ll place our components with their stories straight into the <code>src<\/code> directory, using the format <code>src\/ComponentName.js<\/code> and <code>src\/ComponentName.stories.js<\/code>. Change the <code>stories<\/code> field in your <code>.storybook\/main.js<\/code> file to reference the <code>src<\/code> directory instead of <code>stories<\/code>:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\">module.<span class=\"me1\">exports<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    <span class=\"st0\">\"stories\"<\/span><span class=\"sy0\">:<\/span> <span class=\"br0\">[<\/span>\n        <span class=\"st0\">\"..\/src\/**\/*.stories.@(js|jsx|ts|tsx)\"<\/span>\n    <span class=\"br0\">]<\/span><span class=\"sy0\">,<\/span>\n    <span class=\"co1\">\/\/ ...<\/span>\n<span class=\"br0\">}<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This snippet means Storybook will discover stories in files within the <code>src<\/code> directory that have a <code>.stories.js<\/code> suffix; <code>.jsx<\/code> (React JSX), <code>.ts<\/code>, and <code>.tsx<\/code> (TypeScript) variants are also supported. If you don\u2019t want to use this file structure, take the time now to adjust Storybook\u2019s matching patterns to your liking.<\/p>\n<h2 id=\"writing-your-components\"><span class=\"ez-toc-section\" id=\"Writing_Your_Components\"><\/span>Writing Your Components<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now you\u2019re ready to write your first component. Author your components in the familiar way, using whichever approach you prefer. Here\u2019s a simple button that we want to use throughout all our frontend projects:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> PropTypes from <span class=\"st0\">\"prop-types\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> styles <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    background<span class=\"sy0\">:<\/span> <span class=\"st0\">\"#fff\"<\/span><span class=\"sy0\">,<\/span>\n    border<span class=\"sy0\">:<\/span> <span class=\"st0\">\"0.2rem solid #0099ff\"<\/span><span class=\"sy0\">,<\/span>\n    color<span class=\"sy0\">:<\/span> <span class=\"st0\">\"#0099ff\"<\/span><span class=\"sy0\">,<\/span>\n    letterSpacing<span class=\"sy0\">:<\/span> <span class=\"st0\">\"0.1em\"<\/span><span class=\"sy0\">,<\/span>\n    fontWeight<span class=\"sy0\">:<\/span> <span class=\"st0\">\"bold\"<\/span><span class=\"sy0\">,<\/span>\n    padding<span class=\"sy0\">:<\/span> <span class=\"st0\">\"1em\"<\/span><span class=\"sy0\">,<\/span>\n    textTransform<span class=\"sy0\">:<\/span> <span class=\"st0\">\"uppercase\"<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Button <span class=\"sy0\">=<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">{<\/span>disabled<span class=\"sy0\">,<\/span> label<span class=\"sy0\">,<\/span> onClick<span class=\"br0\">}<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"br0\">(<\/span>\n    <span class=\"sy0\">&lt;<\/span>button disabled<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span><span class=\"br0\">(<\/span>disabled <span class=\"sy0\">?<\/span> <span class=\"st0\">\"true\"<\/span> <span class=\"sy0\">:<\/span> <span class=\"st0\">\"\"<\/span><span class=\"br0\">)<\/span><span class=\"br0\">}<\/span> onClick<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>onClick<span class=\"br0\">}<\/span> style<span class=\"sy0\">=<\/span><span class=\"br0\">{<\/span>styles<span class=\"br0\">}<\/span><span class=\"sy0\">&gt;<\/span>\n        <span class=\"br0\">{<\/span>label<span class=\"br0\">}<\/span>\n    <span class=\"sy0\">&lt;\/<\/span>button<span class=\"sy0\">&gt;<\/span>\n<span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nButton.<span class=\"me1\">propTypes<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    disabled<span class=\"sy0\">:<\/span> PropTypes.<span class=\"me1\">bool<\/span><span class=\"sy0\">,<\/span>\n    label<span class=\"sy0\">:<\/span> PropTypes.<span class=\"me1\">label<\/span><span class=\"sy0\">,<\/span>\n    onClick<span class=\"sy0\">:<\/span> PropTypes.<span class=\"me1\">func<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\nButton.<span class=\"me1\">defaultProps<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>\n    disabled<span class=\"sy0\">:<\/span> <span class=\"kw2\">false<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> Button<span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Next create the component\u2019s story file. This is how Storybook will find the component and understand its configuration.<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> Button from <span class=\"st0\">\".\/Button.js\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">{<\/span>\n    title<span class=\"sy0\">:<\/span> <span class=\"st0\">\"Button\"<\/span><span class=\"sy0\">,<\/span>\n    component<span class=\"sy0\">:<\/span> Button<span class=\"sy0\">,<\/span>\n    args<span class=\"sy0\">:<\/span> <span class=\"br0\">{<\/span>\n        label<span class=\"sy0\">:<\/span> <span class=\"st0\">\"Demo Button\"<\/span>\n    <span class=\"br0\">}<\/span>\n<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Template <span class=\"sy0\">=<\/span> args <span class=\"sy0\">=&gt;<\/span> <span class=\"sy0\">&lt;<\/span>Button <span class=\"br0\">{<\/span>...<span class=\"me1\">args<\/span><span class=\"br0\">}<\/span> <span class=\"sy0\">\/&gt;;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Standard <span class=\"sy0\">=<\/span> Template.<span class=\"me1\">bind<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw1\">const<\/span> Disabled <span class=\"sy0\">=<\/span> Template.<span class=\"me1\">bind<\/span><span class=\"br0\">(<\/span><span class=\"br0\">{<\/span><span class=\"br0\">}<\/span><span class=\"br0\">)<\/span><span class=\"sy0\">;<\/span>\nDisabled.<span class=\"me1\">args<\/span> <span class=\"sy0\">=<\/span> <span class=\"br0\">{<\/span>disabled<span class=\"sy0\">:<\/span> <span class=\"kw2\">true<\/span><span class=\"sy0\">,<\/span> label<span class=\"sy0\">:<\/span> <span class=\"st0\">\"Disabled Button\"<\/span><span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"br0\">{<\/span>Standard<span class=\"sy0\">,<\/span> Disabled<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The module\u2019s <code>default<\/code> export provides metadata to Storybook. This needs to be an object that includes <code>title<\/code> and <code>component<\/code> properties. The <code>title<\/code> is used to label your component in the Storybook UI; <code>component<\/code> is the component function or class you\u2019re exposing.<\/p>\n<p>Storybook\u2019s <code>args<\/code> are equivalent to React\u2019s <code>props<\/code>. The <code>args<\/code> property of the default export effectively sets default prop values to apply to component instances rendered by Storybook. Here buttons receive a label of <code>Demo Button<\/code> if the prop\u2019s not changed later.<\/p>\n<p>Your module\u2019s named exports define the actual component instances which will be presented in your Storybook. At least one is required. Two are created here, the <code>Standard<\/code> button in its default state, and a <code>Disabled<\/code> button which sets the <code>disabled<\/code> prop to <code>true<\/code>.<\/p>\n<p>Now start the Storybook development server:<\/p>\n<pre>npm run storybook<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15682\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/6f271f7e.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"of starting the Storybook dev server\" width=\"1279\" height=\"710\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Visit <code>localhost:6006<\/code> in your browser to view your component library. You should see your <code>Button<\/code> component in the sidebar with its two named story variations. Clicking one of the stories will show you the component\u2019s rendered state.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15683\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/49a5f1d5.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1280\" height=\"720\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>The \u201cControls\u201d tab below the rendering canvas lets you dynamically change prop values within the Storybook UI. This makes it quick and easy to experiment with different combinations of props when you\u2019re discovering components created by others. There are a few different ways in which Storybook can <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storybook.js.org\/docs\/react\/writing-stories\/args\">find controls<\/a>; in this case, they\u2019re coming <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/docs\/typechecking-with-proptypes.html\">from the <code>propTypes<\/code><\/a> assigned to the <code>Button<\/code> component.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15684\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/1a0f800d.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"1280\" height=\"720\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>Storybook automatically handles component \u201cactions\u201d such as our button\u2019s <code>onClick<\/code> prop. In a real app, you should supply a function to this prop that\u2019ll be called when the button is clicked. Within Storybook, clicking the button logs an event to the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/storybook.js.org\/docs\/react\/essentials\/actions\">\u201cActions\u201d tab<\/a> below the canvas. This includes the name of the called prop and the parameters that would have been passed to its callback.<\/p>\n<h2 id=\"building-with-babel\"><span class=\"ez-toc-section\" id=\"Building_With_Babel\"><\/span>Building With Babel<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Now we\u2019ve written a simple React component, created a story for it, and used Storybook to check the component renders in the way we expected. The next step is to build your component library and package it with npm, ready for inclusion in your next application.<\/p>\n<p>Unfortunately you can\u2019t just <code>npm publish<\/code> your raw JavaScript files. Create React App won\u2019t transpile JSX within packages in your app\u2019s <code>node_modules<\/code> folder, so you\u2019d get a build error when trying to run a project with your components. You need to transpile your component library before publication by using a tool like Babel.<\/p>\n<p>Begin by adding an <code>src\/index.js<\/code> file that will export your module\u2019s public API:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> Button from <span class=\"st0\">\".\/Button.js\"<\/span><span class=\"sy0\">;<\/span>\n<span class=\"kw5\">export<\/span> <span class=\"br0\">{<\/span>Button<span class=\"br0\">}<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This will let your package\u2019s users access the <code>Button<\/code> module by writing:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>Button<span class=\"br0\">}<\/span> from <span class=\"st0\">\"@example\/example-components\"<\/span><span class=\"sy0\">;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>It gives you the freedom to change file paths in the future without impacting your library\u2019s users. Your package\u2019s public API is now defined by the exports of <code>index.js<\/code>.<\/p>\n<p>Next add Babel to your project with the following command:<\/p>\n<pre>npm install --save-dev \\&#13;\n    @babel\/cli \\&#13;\n    @babel\/plugin-transform-react-jsx \\&#13;\n    @babel\/preset-env \\&#13;\n    @babel\/preset-react<\/pre>\n<p>Create a <code>.babelrc<\/code> file at the root of your project with this content:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"json\">\n<pre class=\"de1\">{&#13;\n    \"presets\": [&#13;\n        \"@babel\/preset-env\",&#13;\n        \"@babel\/preset-react\"&#13;\n    ],&#13;\n    \"plugins\": [&#13;\n        [&#13;\n            \"@babel\/plugin-transform-react-jsx\",&#13;\n            {&#13;\n                \"runtime\": \"automatic\"&#13;\n            }&#13;\n        ]&#13;\n    ]&#13;\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>This Babel configuration activates support for React with the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/reactjs.org\/blog\/2020\/09\/22\/introducing-the-new-jsx-transform.html\">new JSX transform<\/a>. It means you don\u2019t need to <code>import React from \"react\";<\/code> at the top of every file that uses JSX.<\/p>\n<p>Finally, add the following lines to the <code>scripts<\/code> section of your <code>package.json<\/code> file:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"json\">\n<pre class=\"de1\">\"scripts\": {&#13;\n    \"prepare\": \"npm run dist\",&#13;\n    \"dist\": \"rm -rf dist\/* &amp;&amp; babel src\/ --out-dir dist --copy-files --no-copy-ignored --ignore src\/**\/*.stories.js\"&#13;\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>The <code>prepare<\/code> script is automatically executed by npm before your package is published to a registry. It\u2019s used here to compile your components each time you push a new version.<\/p>\n<p>You can now run <code>npm run dist<\/code> to create a distribution-ready build of your library. The output files will be deposited to the <code>dist<\/code> directory. It\u2019s a good idea to add this to your <code>.gitignore<\/code> file.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-15685\" data-pagespeed-lazy-src=\"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2022\/02\/908fedb9.png?trim=1,1&amp;bg-color=000&amp;pad=1,1\" alt=\"\" width=\"993\" height=\"206\" src=\"\/pagespeed_static\/1.JiBnMqyl6S.gif\" onload=\"pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\" onerror=\"this.onerror=null;pagespeed.lazyLoadImages.loadIfVisibleAndMaybeBeacon(this);\"\/><\/p>\n<p>There\u2019s two changes left to make. First npm needs to be instructed to publish just the built files in your <code>dist<\/code> directory. This is controlled via the <code>files<\/code> field in your <code>package.json<\/code>. The second tweak is to reference the compiled version of your <code>index.js<\/code> as the package\u2019s entrypoint using the <code>main<\/code> field:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"json\">\n<pre class=\"de1\">{&#13;\n    \"files\": [&#13;\n        \"dist\"      &#13;\n    ],&#13;\n    \"main\": \"dist\/index.js\"&#13;\n}<\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>You\u2019re done! Now you can <code>npm publish<\/code> your package and <code>npm install<\/code> it in one of your applications. The downloaded package will contain just the compiled code, s<a href=\"https:\/\/buradabiliyorum.com\/en\/category\/trip-and-travel\/\" data-internallinksmanager029f6b8e52c=\"10\" title=\"Trip &amp; Travel\" target=\"_blank\" rel=\"noopener\">trip<\/a>ped of JSX and ready-to-use in your project. Try it out with a minimal example in a new CRA app:<\/p>\n<div class=\"wp-geshi-highlight-wrap5\">\n<div class=\"wp-geshi-highlight-wrap4\">\n<div class=\"wp-geshi-highlight-wrap3\">\n<div class=\"wp-geshi-highlight-wrap2\">\n<div class=\"wp-geshi-highlight-wrap\">\n<div class=\"wp-geshi-highlight\">\n<div class=\"javascript\">\n<pre class=\"de1\"><span class=\"kw5\">import<\/span> <span class=\"br0\">{<\/span>Button<span class=\"br0\">}<\/span> from <span class=\"st0\">\"@example\/example-components\"<\/span><span class=\"sy0\">;<\/span>\n\u00a0\n<span class=\"kw5\">export<\/span> <span class=\"kw1\">default<\/span> <span class=\"br0\">(<\/span><span class=\"br0\">)<\/span> <span class=\"sy0\">=&gt;<\/span> <span class=\"sy0\">&lt;<\/span>Button <span class=\"sy0\">\/&gt;;<\/span><\/pre>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<p>Your component should appear the same as its Storybook rendering. Any discrepancies will be down to the presence of global styles leaking in from your application\u2019s CSS.<\/p>\n<h2 id=\"conclusion\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>It takes a little upfront work to put together a React component library. You need to write the components themselves, find a way to inspect them during development, then offer a mechanism for users to discover, try, and learn about the available components. When it\u2019s time to publish your package, you need to set up transpilation and configure npm to serve your compiled files.<\/p>\n<p>Storybook solves the first of these challenges by providing a dedicated interface for rendering and experimenting with components. It\u2019s easy to integrate with Create React App, requires no changes to your actual components, and overlaps nicely with React\u2019s concepts.<\/p>\n<p>You can solve the distribution issues by using Babel to produce transpiled builds of your components before you publish them. npm\u2019s <code>main<\/code> and <code>files<\/code> fields are helpful to control what gets packaged and provide a convenient public API to users. Once you\u2019re done setting it up, you can publish your package to the npm registry or your own private server, then import your pre-built components wherever you need them.\n<\/div>\n<blockquote><p><strong><span style=\"color: #ff6600;\">If you liked the article, do not forget to share it with your friends. Follow us on\u00a0<span style=\"color: #ff0000;\"><a style=\"color: #ff0000;\" href=\"https:\/\/news.google.com\/publications\/CAAqBwgKMLG0nwswvr63Aw\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Google News<\/a><\/span>\u00a0too, click on the star and choose us from your favorites.<\/span><\/strong><\/p><\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\">For forums sites go to <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/forum.buradabiliyorum.com\/\" target=\"_blank\" rel=\"noopener\">Forum.BuradaBiliyorum.Com<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<blockquote>\n<p style=\"text-align: center;\"><strong>If you want to read more like this article, you can visit our <span style=\"color: #ff9900;\"><a style=\"color: #ff9900;\" href=\"https:\/\/en.buradabiliyorum.com\/technology\/\" target=\"_blank\" rel=\"noopener\">Technology category.<\/a><\/span><\/strong><\/p>\n<\/blockquote>\n<p><span style=\"color: black;\"><a style=\"color: #ff9900;\" href=\"https:\/\/www.cloudsavvyit.com\/15679\/how-to-start-a-react-component-library-with-storybook-and-create-react-app\/\" target=\"_blank\" rel=\"noopener\">Source<\/a><\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>&#8220;How to Start a React Component Library With Storybook and Create-React-App \u2013 CloudSavvy IT&#8221; React is one of the leading frameworks for frontend development with JavaScript. It\u2019s a naturally component-based approach where you assemble your app from reusable pieces of self-contained functionality. A logical step is to separate your fundamental UI components from your scenario-specific&#8230;<\/p>\n","protected":false},"author":1,"featured_media":420319,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/www.cloudsavvyit.com\/p\/uploads\/2021\/01\/24b43beb.jpg","fifu_image_alt":"","footnotes":""},"categories":[18],"tags":[],"class_list":["post-420318","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technology"],"_links":{"self":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/420318","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/comments?post=420318"}],"version-history":[{"count":0,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/posts\/420318\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media\/420319"}],"wp:attachment":[{"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/media?parent=420318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/categories?post=420318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/buradabiliyorum.com\/en\/wp-json\/wp\/v2\/tags?post=420318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}