{"id":1668,"date":"2018-10-25T12:42:55","date_gmt":"2018-10-25T12:42:55","guid":{"rendered":"https:\/\/www.bsetec.com\/blog\/?p=1668"},"modified":"2018-10-25T12:42:55","modified_gmt":"2018-10-25T12:42:55","slug":"transform-your-react-development-with-recompose","status":"publish","type":"post","link":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/","title":{"rendered":"Transform your React Development with Recompose"},"content":{"rendered":"

\"transform<\/p>\n

Let\u2019s start the discussion with React. In computing, ReactJS is a javascript library for building user interfaces. It is maintained by the Facebook community and a community of individual developers and companies. <\/b>React can be used as a base in the development for single-page or mobile applications.<\/p>\n

Now let\u2019s see what is Recompose and why to use it. Recompose is a React utility belt which is used for function components and higher order components. Basically Recompose is a library for React that contains a bunch of helpers that return different higher-order components \u2014 which is nice because it takes some of the grunt work out of defining common React patterns and making them immediately available to extend other components. In simple words, a developer can create their own toolkit that allows to easily build and manipulate react components.<\/b> If you want to add custom props, variables or pure-render your React component <\/b>etc, then these can be done with the help of recomposing.<\/p>\n

There are a few things we can do with Recompose:-<\/p>\n

    \n
  1. Optimize your React components by making them pre-rendered<\/li>\n
  2. Set default props.<\/li>\n
  3. Add limited state variable.<\/li>\n<\/ol>\n

    WHY YOU NEED TO CREATE FUNCTIONAL COMPONENTS<\/b>
    \nIt is simple to create a component in React. Typically, we might create a class-based component, inheriting from React\u2019s own component class. Let see some example.<\/p>\n

    \"screen\"<\/p>\n

    The example basically of a component that creates a button. The button is provided with an onClick method, a type, and a className. These props are applied to the eventual <button> element created in HTML.<\/p>\n

    The onClick method might be long-running, so we can give the button to some internal state to track the loading time. when the onClick is loading, the button contents show a Loading component inside of the button text. I don’t have the Loading component here in the example, so let’s pretend it’s an hourglass or a loading animation.<\/p>\n

    we should state here that there’s nothing exactly wrong with creating a class-based component. However, creating a functional component is much easier to handle and more elegant. A functional component only knows what we tell to it; there is no inherited functionality from some other class. It’s easier to test because you give it variables, just like a regular function.<\/p>\n

    Also, it’s easier to reuse components that we know care about their presentation only. The only functionality or side effects are those we tell it about when we use them. Specifically, when using the functional component, the container where it’s used will define any props we can pass into the component.<\/p>\n

    Enhancing Component with Recompose<\/b>
    \nHere we can get some of the functionality from the class-based component by adding recompose to the mix!. Let see the example.<\/p>\n

    \"screen2\"<\/p>\n

    Let see the screenshot, here compose, setPropTypes and defaultProps are imported. The compose function returns back a composed function, which wraps around the component when it\u2019s exported at the button of the example.<\/p>\n

    Here we called this composed function enhance<\/i>. we can pick something more inventive, like spiceItUp<\/i>. Inside enhance, we defined our prop types and default props.<\/p>\n

    This example shows a simple enhancement which returns the ability to validate props that are passed to button.<\/p>\n

    It\u2019s important to remember that recompose is actually recomposing the props that are passed to components. Let\u2019s check example.<\/p>\n

    \"screen3\"<\/p>\n

    Here we can see withHandlers is included, which is basically another method provided by recompose.<\/p>\n

    Firstly overwrote the onClick. We can do this by adding the onClick method inside withHandlers. Then after executing another function like doSomethingDifferentHere. Then if there was an onclick method passed to button, it executes that too.<\/p>\n

    Next made entirely new method onHover. This method is invented by recompose within withHandlers. It gets passed into the button component like any other prop. Now when someone hovers the button, lookMomImHovering is executed.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Let\u2019s start the discussion with React. In computing, ReactJS is a javascript library for building user interfaces. It is maintained by the Facebook community and a community of individual developers and companies. React can be used as a base in the development for single-page or mobile applications. Now let\u2019s see what is Recompose and why […]<\/p>\n","protected":false},"author":1,"featured_media":1669,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,485],"tags":[],"class_list":["post-1668","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bsetec","category-products"],"yoast_head":"\nTransform your React Development with Recompose | BSEtec<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Transform your React Development with Recompose | BSEtec\" \/>\n<meta property=\"og:description\" content=\"Let\u2019s start the discussion with React. In computing, ReactJS is a javascript library for building user interfaces. It is maintained by the Facebook community and a community of individual developers and companies. React can be used as a base in the development for single-page or mobile applications. Now let\u2019s see what is Recompose and why […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\" \/>\n<meta property=\"og:site_name\" content=\"BSEtec\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bsetec\/\" \/>\n<meta property=\"article:published_time\" content=\"2018-10-25T12:42:55+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"891\" \/>\n\t<meta property=\"og:image:height\" content=\"453\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"BSEtec\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@BSEtech\" \/>\n<meta name=\"twitter:site\" content=\"@BSEtech\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"BSEtec\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\"},\"author\":{\"name\":\"BSEtec\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/24a8ed4eefa5e9bf112e896653ca21c4\"},\"headline\":\"Transform your React Development with Recompose\",\"datePublished\":\"2018-10-25T12:42:55+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\"},\"wordCount\":651,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg\",\"articleSection\":[\"Bsetec\",\"Products\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\",\"url\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\",\"name\":\"Transform your React Development with Recompose | BSEtec\",\"isPartOf\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg\",\"datePublished\":\"2018-10-25T12:42:55+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage\",\"url\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg\",\"contentUrl\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg\",\"width\":891,\"height\":453,\"caption\":\"transform your react development with recompose\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bsetec.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Transform your React Development with Recompose\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#website\",\"url\":\"https:\/\/www.bsetec.com\/blog\/\",\"name\":\"BSEtec\",\"description\":\"Exploring the World of Tech, One Byte at a Time\",\"publisher\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/#organization\"},\"alternateName\":\"BSEtec\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bsetec.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#organization\",\"name\":\"BSEtec\",\"url\":\"https:\/\/www.bsetec.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2023\/01\/fav.ico\",\"contentUrl\":\"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2023\/01\/fav.ico\",\"width\":1,\"height\":1,\"caption\":\"BSEtec\"},\"image\":{\"@id\":\"https:\/\/www.bsetec.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/bsetec\/\",\"https:\/\/x.com\/BSEtech\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/24a8ed4eefa5e9bf112e896653ca21c4\",\"name\":\"BSEtec\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/20fcfaf426a285886f813fd3e9e0ad48f22440b11201e9a669807c088bfdac8e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/20fcfaf426a285886f813fd3e9e0ad48f22440b11201e9a669807c088bfdac8e?s=96&d=mm&r=g\",\"caption\":\"BSEtec\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Transform your React Development with Recompose | BSEtec","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.bsetec.com\/blog\/transform-your-react-development-with-recompose\/","og_locale":"en_US","og_type":"article","og_title":"Transform your React Development with Recompose | BSEtec","og_description":"Let\u2019s start the discussion with React. In computing, ReactJS is a javascript library for building user interfaces. It is maintained by the Facebook community and a community of individual developers and companies. React can be used as a base in the development for single-page or mobile applications. Now let\u2019s see what is Recompose and why […]","og_url":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/","og_site_name":"BSEtec","article_publisher":"https:\/\/www.facebook.com\/bsetec\/","article_published_time":"2018-10-25T12:42:55+00:00","og_image":[{"width":891,"height":453,"url":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg","type":"image\/jpeg"}],"author":"BSEtec","twitter_card":"summary_large_image","twitter_creator":"@BSEtech","twitter_site":"@BSEtech","twitter_misc":{"Written by":"BSEtec","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#article","isPartOf":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/"},"author":{"name":"BSEtec","@id":"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/24a8ed4eefa5e9bf112e896653ca21c4"},"headline":"Transform your React Development with Recompose","datePublished":"2018-10-25T12:42:55+00:00","mainEntityOfPage":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/"},"wordCount":651,"commentCount":0,"publisher":{"@id":"https:\/\/www.bsetec.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg","articleSection":["Bsetec","Products"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/","url":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/","name":"Transform your React Development with Recompose | BSEtec","isPartOf":{"@id":"https:\/\/www.bsetec.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage"},"image":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage"},"thumbnailUrl":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg","datePublished":"2018-10-25T12:42:55+00:00","breadcrumb":{"@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#primaryimage","url":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg","contentUrl":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg","width":891,"height":453,"caption":"transform your react development with recompose"},{"@type":"BreadcrumbList","@id":"https:\/\/www.bsetec.com\/blog\/transform-your-react-development-with-recompose\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bsetec.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Transform your React Development with Recompose"}]},{"@type":"WebSite","@id":"https:\/\/www.bsetec.com\/blog\/#website","url":"https:\/\/www.bsetec.com\/blog\/","name":"BSEtec","description":"Exploring the World of Tech, One Byte at a Time","publisher":{"@id":"https:\/\/www.bsetec.com\/blog\/#organization"},"alternateName":"BSEtec","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bsetec.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.bsetec.com\/blog\/#organization","name":"BSEtec","url":"https:\/\/www.bsetec.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bsetec.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2023\/01\/fav.ico","contentUrl":"https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2023\/01\/fav.ico","width":1,"height":1,"caption":"BSEtec"},"image":{"@id":"https:\/\/www.bsetec.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/bsetec\/","https:\/\/x.com\/BSEtech"]},{"@type":"Person","@id":"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/24a8ed4eefa5e9bf112e896653ca21c4","name":"BSEtec","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bsetec.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/20fcfaf426a285886f813fd3e9e0ad48f22440b11201e9a669807c088bfdac8e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/20fcfaf426a285886f813fd3e9e0ad48f22440b11201e9a669807c088bfdac8e?s=96&d=mm&r=g","caption":"BSEtec"}}]}},"blog_post_layout_featured_media_urls":{"thumbnail":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose-150x76.jpg",150,76,true],"full":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",891,453,false]},"categories_names":{"2":{"name":"Bsetec","link":"https:\/\/www.bsetec.com\/blog\/category\/bsetec\/"},"485":{"name":"Products","link":"https:\/\/www.bsetec.com\/blog\/category\/bsetec\/products\/"}},"tags_names":[],"comments_number":"0","wpmagazine_modules_lite_featured_media_urls":{"thumbnail":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose-150x76.jpg",150,76,true],"cvmm-medium":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",300,153,false],"cvmm-medium-plus":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",305,155,false],"cvmm-portrait":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",400,203,false],"cvmm-medium-square":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",600,305,false],"cvmm-large":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",891,453,false],"cvmm-small":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",130,66,false],"full":["https:\/\/www.bsetec.com\/blog\/wp-content\/uploads\/2018\/10\/transform_your_react_development_with_recompose.jpg",891,453,false]},"_links":{"self":[{"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/posts\/1668","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/comments?post=1668"}],"version-history":[{"count":2,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/posts\/1668\/revisions"}],"predecessor-version":[{"id":1674,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/posts\/1668\/revisions\/1674"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/media\/1669"}],"wp:attachment":[{"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/media?parent=1668"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/categories?post=1668"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bsetec.com\/blog\/wp-json\/wp\/v2\/tags?post=1668"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}