{"id":6273,"date":"2023-05-24T07:25:23","date_gmt":"2023-05-24T07:25:23","guid":{"rendered":"https:\/\/dianapps.com\/blog\/?p=6273"},"modified":"2024-03-27T05:36:09","modified_gmt":"2024-03-27T05:36:09","slug":"concept-of-storybook-in-react-native","status":"publish","type":"post","link":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","title":{"rendered":"Concept Of Storybook In React Native"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Would you prefer a design system tool that expedites developers&#8217; work while also significantly enhancing team communication? The answer is a storybook.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The powerful tool allows <\/span>React native developers<span style=\"font-weight: 400;\"> to independently design components that operate outside the main app.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">At DianApps, we use a design system based on React Native, and Storybook is one of the tools we use to implement the <a href=\"https:\/\/www.droitui.com\/\" target=\"_blank\" rel=\"noreferrer noopener\">design system tool<\/a> in <\/span>React Native app development<span style=\"font-weight: 400;\">. Coherent design is a crucial component of branding, and Storybook in React Native provides a basis to do so, saving you time, cutting down on mistakes &amp; costs, and increasing satisfaction with code.<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><span style=\"font-weight: 400;\">Check out this guide to ascertain the <\/span><a href=\"https:\/\/dianapps.com\/blog\/complete-guide-to-react-native-app-development-cost\/\"><span style=\"font-weight: 400;\">cost of React Native App development<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Continue reading for more information on Storybook in React Native, including setup and benefits.<\/span><\/p>\n<h1><span class=\"ez-toc-section\" id=\"Concept-of-Storybook\"><\/span><span style=\"font-weight: 400;\">Concept of Storybook<\/span><span class=\"ez-toc-section-end\"><\/span><\/h1>\n<p><span style=\"font-weight: 400;\">In the words of Storybook itself, &#8220;Storybook is a tool for UI development. When we segregate components, it speeds up and simplifies the process of mobile app development. By isolating components, it speeds up and simplifies <\/span>mobile app development<span style=\"font-weight: 400;\">. This enables you to focus on one element at a time.<\/span><\/p>\n<p>This lets you focus on a single element at a time. Without having to launch a complicated development stack, force specific data into your database, or use your application&#8217;s navigational features, you may create entire UIs.<\/p>\n<p><span style=\"font-weight: 400;\">The open-source application, which is designed for React Native, React, Vue, Angular, Web Components, Ember, HTML, Mithril, Marko, Svelte, Riot, Preact, and Rax, accelerates UI development, testing, and documentation. It is feasible to create edge cases and challenging states by providing a sandpit where interfaces can be developed independently of data, APIs, or business logic.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Benefits-of-using-Storybook\"><\/span><span style=\"font-weight: 400;\">Benefits of using Storybook<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Storybook is a powerful tool that\u2019s quick to install. Other substantial benefits include:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">The simple installation of Storybook makes it a strong tool. Along with these other important advantages:<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Quick access to all components &#8211; without having to worry about business logic, access any component and browse through its states.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Increased chance of discovering all edge cases.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Component exchange and reuse made easy.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Better code quality since you create components independently of business logic and may pay more attention on reusability and code quality.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Advanced documentation.<\/span><\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"Should-you-use-Storybook-in-every-new-project\"><\/span><span style=\"font-weight: 400;\">Should you use Storybook in every new project?<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Yes!<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When a project has a large library of components but does not use Storybook, it may cause <\/span><a href=\"https:\/\/dianapps.com\/mobile-app-development\"><b>mobile app developers<\/b><\/a><span style=\"font-weight: 400;\">\u2014especially those who are new to the project or returning\u2014to spend more time than necessary looking for particular components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It doesn&#8217;t take a lot of time or resources to develop a fresh story. Stories are quick, simple, and have several advantages when using personalised emmet shortcuts. You only need to build and test components after adding the story to a pre-existing development cycle.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Setup\"><\/span><span style=\"font-weight: 400;\">Setup<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Now that we&#8217;ve explained what a storybook and stories are, as well as their benefits, it&#8217;s time to get a little more technical. Let&#8217;s go to setup and a demonstration.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"1-Installation\"><\/span><span style=\"font-weight: 400;\">1. Installation:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">The first step is to install Storybook for React Native by running the following command in your project directory:<\/span><\/p>\n<p><strong>npm install @storybook\/react-native &#8211;save-dev<\/strong><\/p>\n<p><span style=\"font-weight: 400;\">This will install the required dependencies for Storybook.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"2-Updating-AppRegistry\"><\/span><span style=\"font-weight: 400;\">2. Updating AppRegistry:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To run Storybook in the place of our application, we need to update the AppRegistry with Storybook&#8217;s configuration.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Create a new file called storybook.js in the root directory of your project, and add the following code:<\/span><\/p>\n<p><span style=\"font-weight: 400;\">import { getStorybookUI, configure } from &#8216;@storybook\/react-native&#8217;;<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">\/\/ import stories\r\n\r\nconfigure(() =&gt; {\r\n\r\n\u00a0\u00a0require('.\/path\/to\/your\/stories');\r\n\r\n}, module);\r\n\r\n\/\/ create Storybook UI\r\n\r\nconst StorybookUIRoot = getStorybookUI({});\r\n\r\nexport default StorybookUIRoot;<\/pre>\n<p><span style=\"font-weight: 400;\">In this file, we import the getStorybookUI and configure functions from @storybook\/react-native, and use them to load our stories and create the Storybook UI.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, proceed by updating the AppRegistry to utilize Storybook instead of your application. In your index.js file, replace the current AppRegistry.registerComponent call with the following code:<\/span><\/p>\n<pre class=\"font-size:14 height-set:true nums:false lang:default decode:true\">import { AppRegistry } from 'react-native';\r\n\r\nimport StorybookUIRoot from '.\/storybook';\r\n\r\nAppRegistry.registerComponent('%APP_NAME%', () =&gt; StorybookUIRoot);<\/pre>\n<p><span style=\"font-weight: 400;\">This will register Storybook as the root component for our application.<\/span><\/p>\n<h3><span class=\"ez-toc-section\" id=\"3-Running-the-application\"><\/span><span style=\"font-weight: 400;\">3. Running the application:<\/span><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">To run the application with Storybook, we need to open three terminal tabs:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the first tab, start the React Native packager by running \u2018npm start\u2019.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the second tab, start the Storybook server by \u2018running npm run storybook\u2019.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Now, you can start the application by running \u2018react-native run-android\u2019, or \u2018react-native run-ios\u2019 in the third tab. However, it depends on the platform you use. <\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Once the application is running, you can open Storybook by navigating to \u2018http:\/\/localhost:7007\u2019 in your browser.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">That&#8217;s it! You should now have Storybook running in your React Native application, and be able to view and develop your components in isolation.<\/span><\/p>\n<p><img decoding=\"async\" class=\"wp-image-7812 size-full aligncenter\" src=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/StorybookInReactNativeGiphy.gif\" alt=\"\" width=\"334\" height=\"514\" \/><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Setup-React-Native-with-Storybook\"><\/span><span style=\"font-weight: 400;\">Setup React Native with Storybook<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h2><span class=\"ez-toc-section\" id=\"Demo-%E2%80%93-How-to-create-a-simple-story-in-Storybook-for-a-React-Native-component\"><\/span><span style=\"font-weight: 400;\">Demo &#8211; How to create a simple story in Storybook for a React Native component<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Create a new file in your project directory called <\/span><b>\u2018Button.stories.js\u2019<\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Import <\/span><b>\u2018storiesOf\u2019 <\/b><span style=\"font-weight: 400;\">and \u2018action\u2019 from \u2018<\/span><b>@storybook\/react-native\u2019<\/b><span style=\"font-weight: 400;\"> and the <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component you want to create a story for.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Use <\/span><b>\u2018storiesOf\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">to create a new story for your component.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add a <\/span><b>\u2018title\u2019 <\/b><span style=\"font-weight: 400;\">and a <\/span><b>\u2018component\u2019 <\/b><span style=\"font-weight: 400;\">property to your story object, where the <\/span><b>\u2018component\u2019 <\/b><span style=\"font-weight: 400;\">property is set to the imported <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Add one or more <\/span><b>\u2018stories\u2019 <\/b><span style=\"font-weight: 400;\">to your story object, each with a unique name and a <\/span><b>\u2018render\u2019 <\/b><span style=\"font-weight: 400;\">function that returns the <\/span><b>\u2018Button\u2019 <\/b><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">component with some props.<\/span><\/span><\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">In the <\/span><b>\u2018render\u2019 <\/b><span style=\"font-weight: 400;\">function, use the <\/span><b>\u2018action\u2019 <\/b><span style=\"font-weight: 400;\">function to log some text when the button is pressed.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Here&#8217;s an example <\/span><b>\u2018Button.stories.js\u2019<\/b><span style=\"font-weight: 400;\"> file:<\/span><\/p>\n<pre class=\"theme:turnwall font-size:14 height-set:true height:250 nums:false lang:default decode:true\">import React from 'react';\r\n\r\nimport { storiesOf } from '@storybook\/react-native';\r\n\r\nimport { action } from '@storybook\/addon-actions';\r\n\r\nimport Button from '.\/Button';\r\n\r\nstoriesOf('Button', module)\r\n\r\n\u00a0\u00a0.add('default', () =&gt; (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Button onPress={action('clicked')} title=\"Click me!\" \/&gt;\r\n\r\n\u00a0\u00a0))\r\n\r\n\u00a0\u00a0.add('with custom color', () =&gt; (\r\n\r\n\u00a0\u00a0\u00a0\u00a0&lt;Button onPress={action('clicked')} title=\"Click me!\" color=\"#ff0000\" \/&gt;\r\n\r\n\u00a0\u00a0));<\/pre>\n<p><span style=\"font-weight: 400;\">In this example, we&#8217;re building two storylines for the Button component\u2014one with the pre-set props and one with a unique color. Every story has a different name, and it also contains a render function that returns the Button component along with certain props. Whenever the button is pressed, we also log some text using the action function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Running the Storybook server using npm run storybook and going to http:\/\/localhost:7007 in your browser will allow you to view your stories in Storybook. A list of your stories should appear, and you should be able to interact with them and view the action function logs.<\/span><\/p>\n<h2><span class=\"ez-toc-section\" id=\"Summary\"><\/span><span style=\"font-weight: 400;\">Summary<\/span><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p><span style=\"font-weight: 400;\">With this being said, your React Native projects will benefit immensely from using Storybook, a potent UI development tool. Storybook can enhance code quality and ultimately save time by simplifying testing, documentation, and knowledge-sharing. You have a higher chance of identifying edge cases and improving the user experience if you have access to all components without having to worry about business logic.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Being a top-notch <\/span><a href=\"https:\/\/dianapps.com\/react-native-app-development\"><b>React Native App development company<\/b><\/a><span style=\"font-weight: 400;\">, DianApps can help you seamlessly integrate Storybook into your upcoming project. Our experienced team of React Native developers excels in utilizing Storybook and its add-ons to enhance your product and streamline the development process. Contact us today to explore how Storybook can contribute to the success of your React Native project.<br \/>\n<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Would you prefer a design system tool that expedites developers&#8217; work while also significantly enhancing team communication? The answer is a storybook. The powerful tool allows React native developers to independently design components that operate outside the main app. At DianApps, we use a design system based on React Native, and Storybook is one of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":6275,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_wp_applaud_exclude":false,"footnotes":""},"categories":[3],"tags":[104,56,264],"class_list":["post-6273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app-development","tag-react-native","tag-react-native-app-development","tag-storybook-in-react-native"],"featured_image_src":{"landsacpe":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-1140x445.png",1140,445,true],"list":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-463x348.png",463,348,true],"medium":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73-300x169.png",300,169,true],"full":["https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png",1536,864,false]},"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Concept Of Storybook In React Native<\/title>\n<meta name=\"description\" content=\"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Concept Of Storybook In React Native\" \/>\n<meta property=\"og:description\" content=\"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn About Digital Transformation &amp; Development | DianApps Blog\" \/>\n<meta property=\"article:published_time\" content=\"2023-05-24T07:25:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-27T05:36:09+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"864\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Vikash Soni\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Vikash Soni\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Concept Of Storybook In React Native","description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","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:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","og_locale":"en_US","og_type":"article","og_title":"Concept Of Storybook In React Native","og_description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","og_url":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","og_site_name":"Learn About Digital Transformation &amp; Development | DianApps Blog","article_published_time":"2023-05-24T07:25:23+00:00","article_modified_time":"2024-03-27T05:36:09+00:00","og_image":[{"width":1536,"height":864,"url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2023\/05\/Untitled-design-73.png","type":"image\/png"}],"author":"Vikash Soni","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Vikash Soni","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","url":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/","name":"Concept Of Storybook In React Native","isPartOf":{"@id":"https:\/\/dianapps.com\/blog\/#website"},"datePublished":"2023-05-24T07:25:23+00:00","dateModified":"2024-03-27T05:36:09+00:00","author":{"@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f"},"description":"Learn about Storybook, a React Native UI development environment that enables the creation, testing, and showcasing of components separately.","breadcrumb":{"@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/dianapps.com\/blog\/concept-of-storybook-in-react-native\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dianapps.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Concept Of Storybook In React Native"}]},{"@type":"WebSite","@id":"https:\/\/dianapps.com\/blog\/#website","url":"https:\/\/dianapps.com\/blog\/","name":"Learn About Digital Transformation &amp; Development | DianApps Blog","description":"Dianapps","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/dianapps.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/0126fafc83e42bece2acbfe92f7d0f4f","name":"Vikash Soni","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/dianapps.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","contentUrl":"https:\/\/dianapps.com\/blog\/wp-content\/uploads\/2022\/07\/cropped-vikash-96x96.png","caption":"Vikash Soni"},"description":"Vikash Soni, the visionary CEO and Co-founder of DianApps. With his profound expertise in Android and iOS app development, he leads the team to deliver top-notch solutions to clients worldwide. Under his guidance, the company has achieved remarkable success, earning a reputation as a leading web and mobile app development company.","sameAs":["https:\/\/www.linkedin.com\/in\/vikash-soni-59726530\/"],"url":"https:\/\/dianapps.com\/blog\/author\/infodianapps-com\/"}]}},"_links":{"self":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/comments?post=6273"}],"version-history":[{"count":7,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273\/revisions"}],"predecessor-version":[{"id":8865,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/posts\/6273\/revisions\/8865"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media\/6275"}],"wp:attachment":[{"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/media?parent=6273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/categories?post=6273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dianapps.com\/blog\/wp-json\/wp\/v2\/tags?post=6273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}