{"id":19804,"date":"2020-04-18T08:27:31","date_gmt":"2020-04-18T08:27:31","guid":{"rendered":"https:\/\/www.aceinfoway.com\/blog\/?p=19804"},"modified":"2022-04-04T13:14:58","modified_gmt":"2022-04-04T13:14:58","slug":"react-component-library-and-storybook","status":"publish","type":"post","link":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook","title":{"rendered":"How to Build a Component Library with React JS and Storybook"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_37 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\r\n<div class=\"ez-toc-title-container\">\r\n<p class=\"ez-toc-title\">Table of Contents<\/p>\r\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\r\n<nav><ul class='ez-toc-list ez-toc-list-level-1' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\/#What_is_a_Storybook\" title=\"What is a Storybook?\">What is a Storybook?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\/#How_to_start_with_Storybook_to_create_your_React_Component_Library\" title=\"How to start with Storybook to create your React Component Library?\">How to start with Storybook to create your React Component Library?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\/#Storybook_Addons\" title=\"Storybook Addons\">Storybook Addons<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\r\n<div  class=\"fusion-fullwidth fullwidth-box nonhundred-percent-fullwidth\"  style='background-color: rgba(255,255,255,0);background-position: center center;background-repeat: no-repeat;padding-top:20px;padding-right:30px;padding-bottom:20px;padding-left:30px;'><div class=\"fusion-builder-row fusion-row \"><div  class=\"fusion-layout-column fusion_builder_column fusion_builder_column_1_1  fusion-one-full fusion-column-first fusion-column-last wireframe-post-single 1_1\"  style='margin-top:0px;margin-bottom:20px;'>\n\t\t\t<div class=\"fusion-column-wrapper\" style=\"background-position:left top;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;\"  data-bg-url=\"\">\n\t\t\t\t<p><strong>Looking to re-use the components of one project to another, without agonizing over internal dependencies?<\/strong><\/p>\n<p>Being a programmer, you are aware of the advantages of the component re-use, but the challenges faced during the process especially in the UI components, such as inter-dependency between the modules, code sharing within large teams, accurate documentation, etc, cannot be denied either.<\/p>\n<p>Think of a situation &#8211; how convenient it could be to create your components autonomously, which can be accessed and understood by your team easily. The <strong>Storybook<\/strong> proves to be a great solution here, facilitating you to create independent modules, so that it can be shared and reused conveniently.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"What_is_a_Storybook\"><\/span>What is a Storybook?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><a href=\"https:\/\/storybook.js.org\/\" target=\"_blank\" rel=\"noopener\"><strong>Storybook<\/strong><\/a>, a UI component development tool, is used to create <strong>\u201cbulletproof UI components\u201d <\/strong>for React, Angular, and Vue. The motive behind the creation of Storybook is to bridge the gap between the designing and development of a component, promoting the incremental approach in Software development. With Storybook, you can create the components independently, check its view and assess its states, in an isolated environment, i.e., you need not create the container program to test the performance of the component instead you can do it in the Storybook itself.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"How_to_start_with_Storybook_to_create_your_React_Component_Library\"><\/span>How to start with Storybook to create your React Component Library?<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>The Storybook runs along your development mode side by side. To start with the Storybook for React component library, <strong>first and foremost,<\/strong> you need to create a build system by using the <a href=\"https:\/\/github.com\/facebook\/create-react-app\" target=\"_blank\" rel=\"noopener\"><strong>Create React App<\/strong><\/a><strong> tool<\/strong>, which takes care of the configurations and tools required for your project. Once the App is created,<strong> enable the Storybook<\/strong> to create components and <strong>Jest Testing <\/strong>to test them.<\/p>\n<p><strong>Syntax to create a React App :<\/strong><\/p>\n<div class=\"code_contain\"><code><em>npx create-react-app name_of_app<br \/>\ncd name_of_app<\/em><\/code><\/div>\n<p><strong>Syntax to setup Storybook for React App :<\/strong><\/p>\n<div class=\"code_contain\"><code><em>npx -p @storybook\/cli sb init<\/em><\/code><\/div>\n<p><strong>Syntax to start your React Storybook:<\/strong><\/p>\n<div class=\"code_contain\"><code><em>yarn storybook<\/em><\/code><\/div>\n<p>This command creates a local server on <strong>port 9009<\/strong>, with the dashboard of the Storybook, where you can create, delete and test your components.<\/p>\n<h3>Creating React JS Components on the Storybook<\/h3>\n<p>React JS is one of the most preferred JavaScript libraries for front end development. You can incorporate Storybook <a href=\"https:\/\/www.aceinfoway.com\/React-JS\" target=\"_blank\" rel=\"noopener\">to build your React project<\/a>, and leverage its power into<br \/>\nthe development cycle. To create a React component in the Storybook to build your React Component Library, define the title as well as the structure of the component, describing its name and states respectively.<\/p>\n<p>Let\u2019s say if you create a component named DocList, following steps should be followed-<\/p>\n<ol>\n<li><strong>List down the actions-based categories, such as in this case it can be checked and pinned DocList.<\/strong><br \/>\n<strong>Creating Stories of the Component<\/strong>Stories, the basic building blocks of the Storybook, are the functions that represent the visual state of the component. Storybook not only maintains the component library, placing all the components in one place(localhost) but also works as a visual guide for the team members, tracking all the changes in place.<br \/>\n<strong>\u00a0Component<\/strong><\/p>\n<ul>\n<li>Story 1<\/li>\n<li>Story 2<\/li>\n<li>Story 3<\/li>\n<\/ul>\n<p><strong><strong>Syntax to define the component :\u00a0<\/strong><\/strong><\/p>\n<div class=\"code_contain\"><code><em><br \/>\nimport React from 'react';<br \/>\nexport default function DocList({ DocList: { title, state }, onArchiveDocList, onPinDocList }) {<br \/>\nreturn (<br \/>\n&lt;div className=\"list-item\"&gt;<br \/>\n&lt;input type=\"text\" value={title} readOnly={true} \/&gt;<br \/>\n&lt;\/div&gt;<br \/>\n);<br \/>\n}<br \/>\n<\/em><\/code><\/div>\n<\/li>\n<li><strong>Frame the test states according to the actions performed at each level.<\/strong><br \/>\n<strong>Syntax to define the test states :\u00a0<\/strong><\/p>\n<div class=\"code_contain\"><code><em><br \/>\n\/\/ src\/components\/DocList.stories.js\/\/<\/em><\/code><code><em>import React from 'react';<br \/>\nimport { action } from '@storybook\/addon-actions';<br \/>\nimport DocList from '.\/DocList';<\/em><\/code><code><em>export default {<br \/>\ncomponent: DocList,<br \/>\ntitle: 'DocList',<br \/>\n};<\/em><\/code><\/p>\n<p><code><em>export const DocListData = {<br \/>\ntitle: 'Test DocList',<br \/>\nstate: 'DOCLIST_INBOX',<br \/>\nupdatedAt: new Date(2019, 0,2, 8, 0),<br \/>\n}; <\/em><\/code><\/p>\n<p><code><em>export const actionsData = {<br \/>\nonPinDocList: action('onPinDocList'),<br \/>\nonArchiveDocList: action('onArchiveDocList'),<br \/>\n}; <\/em><\/code><\/p>\n<p><code><em>\/\/action() permits to create a callback in the actions panel when clicked. <\/em><\/code><\/p>\n<p><code><em>export const Default = () =&gt; &lt;DocList doclist={{ ...doclistData }} {...actionsData} \/&gt;; <\/em><\/code><\/p>\n<p><code><em>\/\/ actionsData- A React prop to bundle a set of frequently used actions. <\/em><\/code><\/p>\n<p><code><em>export const Pinned = () =&gt; (<br \/>\n&lt;DocList doclist={{ ...doclistData, state: 'DOCLIST_PINNED' }} {...actionsData} \/&gt;<br \/>\n); <\/em><\/code><\/p>\n<p><code><em>export const Archived = () =&gt; &lt;DocList doclist={{ ...doclistData, state: 'DOCLIST_ARCHIVED' }} {...actionsData} \/&gt;; <\/em><\/code><\/p>\n<\/div>\n<\/li>\n<li><strong>Check the Storybook configurations and create the component with mock data.<\/strong><br \/>\nMock data liberates you from the dependency of your component on the container class, empowering you to run it in isolation, using the addons like <strong>storybook-addon-mock<\/strong>.<strong>Syntax to change the configuration file :\u00a0<\/strong><\/p>\n<div class=\"code_contain\"><code><em>\/\/ .storybook\/main.js<\/em><\/code><code><em>module.exports = {<\/em><br \/>\n<em>\u00a0\u00a0stories: ['..\/src\/components\/**\/*.stories.js'],<\/em><br \/>\n<em>\u00a0\u00a0addons: ['@storybook\/preset-create-react-app','@storybook\/addon-actions', '@storybook\/addon-links'], \u00a0 \u00a0 };<\/em><\/code><\/div>\n<p>ow, you can restart the server and preview the changes on the dashboard.<\/li>\n<li><strong>Component Testing<\/strong><br \/>\nYou can test the component in three ways:<\/p>\n<ul>\n<li><strong>Unit Test-<\/strong> Checks the output of the unit on a specific input.<\/li>\n<li><strong>Visual Test-<\/strong> Done manually by the Developers to check the presentation of the component<\/li>\n<li><strong>Snapshot Test-<\/strong> Component\u2019s design is compared with the snapshot of the component\u2019s previous design for making effective changes.<\/li>\n<\/ul>\n<\/li>\n<li>Once the Storybook is set up, the styling and testing are done, you can proceed with the HTML part for designing the component, followed by defining the data requirement and the structure of data that should be enforced to interact with the component.<br \/>\n<strong>Syntax to define the structure of the Data :\u00a0<\/strong><\/p>\n<div class=\"code_contain\"><code><em>import React from 'react';<\/em><br \/>\n<em>import PropTypes from 'prop-types';<\/em><\/code><code><em>export default function DocList({ doclist: { title, state }, onArchiveDocList, onPinDocList })<br \/>\n{\/\/ code for the export function}<\/em><\/code><code><em>DocList .propTypes = {<\/em><br \/>\n<em>\u00a0\u00a0doclist: PropTypes.shape({<\/em><br \/>\n<em>\u00a0\u00a0\u00a0\u00a0title: PropTypes.string.isRequired,<\/em><br \/>\n<em>\u00a0\u00a0\u00a0\u00a0state: PropTypes.string.isRequired,<\/em><br \/>\n<em>\u00a0\u00a0}),<\/em><br \/>\n<em>\u00a0\u00a0onArchiveDocList: PropTypes.func,<\/em><br \/>\n<em>\u00a0\u00a0onPinDocList: PropTypes.func,<\/em><br \/>\n<em>};<\/em><\/code><\/p>\n<\/div>\n<\/li>\n<\/ol>\n<p>So, with this, your component is built and is ready to use. Storybook also allows you to grow your React Component Library by creating a number of components, modify your component by adding states, altering the design, etc. as per the requirement.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"Storybook_Addons\"><\/span>Storybook Addons<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>There are numerous <a href=\"https:\/\/storybook.js.org\/addons\/\" target=\"_blank\" rel=\"noopener\">Storybook addons<\/a> that you can use to enhance your component\u2019s functionality. With the Storybook addons, you can automatically take <strong>Storyshots<\/strong>,<br \/>\nchange the background settings of the component, link different stories together, check web accessibility, change the version of the build system, etc.<\/p>\n<p><strong>Syntax to include addons :\u00a0<\/strong><\/p>\n<div class=\"code_contain\"><code><em>yarn add -D @storybook\/addon-actions \u00a0 \u00a0 \/\/ Actions is an addon.<\/em><\/code><\/div>\n<h2><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span>Conclusion<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Storybook, a revolutionary living style guide, works wonders for the Software Development Team, especially in the case of large-scale projects. To create an efficient project, it requires proper coordination among the team members in order to follow the same standards within the code such as the nomenclature of the objects and variables, etc.<\/p>\n<p>Storybook not only liberates you from unnecessary confusion but also enhances the quality of the project and improves productivity.\u00a0 If you are also planning to create your React Storybook as well as a project, <a href=\"https:\/\/www.aceinfoway.com\/React-JS\" target=\"_blank\" rel=\"noopener\">hire a React Developer<\/a>. For any further related queries, <a href=\"https:\/\/www.aceinfoway.com\/React-JS#lets-get-started\" target=\"_blank\" rel=\"noopener\">Get In Touch<\/a> with us.<\/p>\n<div class=\"blog_bottom_banner\"><a href=\"https:\/\/www.aceinfoway.com\/Contact-Us\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" loading=\"lazy\" class=\"aligncenter wp-image-19818 size-full\" src=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-cta.jpg\" alt=\"How to Build a Component Library\" width=\"836\" height=\"273\" \/><\/a><\/div>\n<div class=\"fusion-clearfix\"><\/div>\n\n\t\t\t<\/div>\n\t\t<\/div><\/div><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":769419,"featured_media":19817,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[43],"tags":[334,335,336,337],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.10 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\r\n<title>React Library and React Storybook: How To Build Components<\/title>\r\n<meta name=\"description\" content=\"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.\" \/>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"React Library and React Storybook: How To Build Components\" \/>\r\n<meta property=\"og:description\" content=\"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.\" \/>\r\n<meta property=\"og:url\" content=\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\" \/>\r\n<meta property=\"og:site_name\" content=\"Ace Infoway\" \/>\r\n<meta property=\"article:published_time\" content=\"2020-04-18T08:27:31+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2022-04-04T13:14:58+00:00\" \/>\r\n<meta property=\"og:image\" content=\"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg\" \/>\r\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\r\n\t<meta property=\"og:image:height\" content=\"524\" \/>\r\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\r\n<meta name=\"author\" content=\"Vipul Patel\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vipul Patel\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\",\"name\":\"React Library and React Storybook: How To Build Components\",\"isPartOf\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\"},\"datePublished\":\"2020-04-18T08:27:31+00:00\",\"dateModified\":\"2022-04-04T13:14:58+00:00\",\"author\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551\"},\"description\":\"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.aceinfoway.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Build a Component Library with React JS and Storybook\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#website\",\"url\":\"https:\/\/www.aceinfoway.com\/blog\/\",\"name\":\"Ace Infoway\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551\",\"name\":\"Vipul Patel\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g\",\"caption\":\"Vipul Patel\"},\"description\":\"Vipul is a passionate techie and loves to get involved in high pace projects which involves creating business optimized applications, business processes, and strategies to maximize business growth with a clear focus on expertise in SaaS domain.\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Library and React Storybook: How To Build Components","description":"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook","og_locale":"en_US","og_type":"article","og_title":"React Library and React Storybook: How To Build Components","og_description":"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.","og_url":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook","og_site_name":"Ace Infoway","article_published_time":"2020-04-18T08:27:31+00:00","article_modified_time":"2022-04-04T13:14:58+00:00","og_image":[{"width":1024,"height":524,"url":"https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg","type":"image\/jpeg"}],"author":"Vipul Patel","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vipul Patel","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook","url":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook","name":"React Library and React Storybook: How To Build Components","isPartOf":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#website"},"datePublished":"2020-04-18T08:27:31+00:00","dateModified":"2022-04-04T13:14:58+00:00","author":{"@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551"},"description":"React Component Library and React Storybook: Here is the Definitive Guide to How to Build a Component Library with React JS and Storybook in 2020.","breadcrumb":{"@id":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.aceinfoway.com\/blog\/react-component-library-and-storybook#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.aceinfoway.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Build a Component Library with React JS and Storybook"}]},{"@type":"WebSite","@id":"https:\/\/www.aceinfoway.com\/blog\/#website","url":"https:\/\/www.aceinfoway.com\/blog\/","name":"Ace Infoway","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.aceinfoway.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/d8ac0c9df1e05d018b93b759e766c551","name":"Vipul Patel","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.aceinfoway.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f2d72931f141a85b2e53b3a0c67b5dea?s=96&d=mm&r=g","caption":"Vipul Patel"},"description":"Vipul is a passionate techie and loves to get involved in high pace projects which involves creating business optimized applications, business processes, and strategies to maximize business growth with a clear focus on expertise in SaaS domain."}]}},"rttpg_featured_image_url":{"full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false],"landscape":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false],"portraits":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false],"thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-150x150.jpg",150,150,true],"medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-300x154.jpg",300,154,true],"large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-1024x524.jpg",1024,524,true],"1536x1536":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false],"2048x2048":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false],"blog-large":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-669x272.jpg",669,272,true],"blog-medium":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-320x202.jpg",320,202,true],"portfolio-full":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-940x400.jpg",940,400,true],"portfolio-one":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-540x272.jpg",540,272,true],"portfolio-two":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-460x295.jpg",460,295,true],"portfolio-three":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-300x214.jpg",300,214,true],"portfolio-five":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-177x142.jpg",177,142,true],"recent-posts":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-700x441.jpg",700,441,true],"recent-works-thumbnail":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-66x66.jpg",66,66,true],"200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-200x102.jpg",200,102,true],"400":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-400x205.jpg",400,205,true],"600":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-600x307.jpg",600,307,true],"800":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library-800x409.jpg",800,409,true],"1200":["https:\/\/www.aceinfoway.com\/blog\/wp-content\/uploads\/2020\/04\/How-to-Build-a-Component-Library.jpg",1024,524,false]},"rttpg_author":{"display_name":"Vipul Patel","author_link":"https:\/\/www.aceinfoway.com\/blog\/author\/vipul-umretiya"},"rttpg_comment":0,"rttpg_category":"<a href=\"https:\/\/www.aceinfoway.com\/blog\/advanced-technologies\" rel=\"category tag\">Advanced Technologies<\/a>","rttpg_excerpt":null,"_links":{"self":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/19804"}],"collection":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/users\/769419"}],"replies":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/comments?post=19804"}],"version-history":[{"count":17,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/19804\/revisions"}],"predecessor-version":[{"id":21407,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/posts\/19804\/revisions\/21407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media\/19817"}],"wp:attachment":[{"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/media?parent=19804"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/categories?post=19804"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.aceinfoway.com\/blog\/wp-json\/wp\/v2\/tags?post=19804"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}