{"id":14726,"date":"2023-09-08T16:47:31","date_gmt":"2023-09-08T14:47:31","guid":{"rendered":"https:\/\/www.espai.es\/blog\/?p=14726"},"modified":"2023-09-08T20:28:51","modified_gmt":"2023-09-08T18:28:51","slug":"hooks-personalizados-en-react","status":"publish","type":"post","link":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/","title":{"rendered":"Hooks personalizados en React"},"content":{"rendered":"

En React es posible escribir nuestros propios hooks personalizados<\/strong>, mas all\u00e1 de los que vienen en la propia librer\u00eda como useState()<\/em>, useEffect()<\/em>, etc.<\/p>\n

\u00bfPara que sirve un hook personalizado de React?<\/h2>\n

Cuando en JavaScript tenemos dos (o m\u00e1s) funciones que tienen c\u00f3digo en com\u00fan, si queremos compartirlo en lugar de tenerlo duplicado en ambas funciones, lo habitual es extraer dicho c\u00f3digo, colocarlo en una tercera funci\u00f3n, y llamar a dicha funci\u00f3n desde las dos funciones originales.<\/p>\n

Los hooks personalizados tienen la misma finalidad. Sirven para extraer funcionalidad de dos (o m\u00e1s) componentes que tienen c\u00f3digo repetido (o muy similar)<\/strong>.<\/p>\n

En JavaScript, tambi\u00e9n puede surgirnos la necesidad de simplificar una funci\u00f3n excesivamente extensa. Para ello lo que solemos\u00a0 hacer es extraer parte de su funcionalidad en otra funci\u00f3n, aunque no tengamos intenci\u00f3n de usar esa nueva funci\u00f3n en otra parte.<\/p>\n

Los hooks personalizados tambi\u00e9n pueden servir para esto mismo, es decir, para simplificar un componente, extrayendo parte de su c\u00f3digo y aisl\u00e1ndolo en un hook personalizado<\/strong>.<\/p>\n

\u00bfComo hacer un hook personalizado en React?<\/h2>\n

Un hook personalizado es simplemente una funci\u00f3n cuyo nombre (por simple convenci\u00f3n) empieza por \u00abuse\u00bb, y que puede (y suele) llamar a otros hooks<\/strong> (e.g. useState(), useEffect(), otros hooks personalizados…).<\/p>\n

Y ya est\u00e1, nada m\u00e1s.<\/p>\n

No se trata de una funcionalidad especial de React, ya que son funciones normales y corrientes, con un nombre y un uso que son simplemente producto de una convenci\u00f3n.<\/strong><\/p>\n

NOTA: Es importante tener en cuenta que si un hook personalizado hace uso de useState()<\/em><\/strong>, y dos componentes diferentes hacen uso de dicho hook personalizado, esto no implica que est\u00e9n compartiendo el mismo estado. En estos casos, cada llamada al hook personalizado obtiene su propio estado.<\/strong><\/p>\n

Ejemplo de un hook personalizado en React<\/h2>\n

Simplemente con la descripci\u00f3n anterior de lo que es un hook ya deber\u00edas de poder implementarlo sin problemas, pero mejor si vemos un ejemplo.<\/p>\n

Imaginemos que tenemos dos componentes diferentes, uno para mostrar la informaci\u00f3n de una Pelicula, y otro para mostrar la informaci\u00f3n de un Libro. Ambos componentes, al ser montados, realizan una conexi\u00f3n al servidor para leer la informaci\u00f3n necesaria desde un archivo .json<\/p>\n

Si pudi\u00e9ramos aislar la funcionalidad de pedir el archivo al servidor en un hook personalizado<\/strong>, podr\u00edamos tener unos componentes m\u00e1s sencillos y adem\u00e1s evitar\u00edamos repetir c\u00f3digo<\/strong>.<\/p>\n

A continuaci\u00f3n ten\u00e9is este ejemplo con el c\u00f3digo del hook personalizado<\/strong> y el c\u00f3digo de los componentes haciendo uso de dicho hook.<\/p>\n

Hook Personalizado<\/h3>\n
import { useState, useEffect } from \"react\";\r\n\r\nexport function usePedirJsonAlServidor(url) {\r\n  \/\/ estamos cargando la informaci\u00f3n?\r\n  const [cargando, setCargando] = useState(false);\r\n  \/\/ los datos del JSON los guardaremos aqui\r\n  const [datos, setDatos] = useState({});\r\n  \/\/ si se produce algun error lo guardaremos aqui\r\n  const [error, setError] = useState(\"\");\r\n\r\n  useEffect(() => {\r\n\r\n    (async()=>{\r\n      try {\r\n        setCargando(true);\r\n        let response = await fetch(url);\r\n        if (response.ok) {        \r\n            let d = await response.json(); \/\/ procesamos json        \r\n            setDatos(d);              \r\n        } else throw new Error(\"No se puede acceder a la URL: \" + url);\r\n      } catch (e) {\r\n        setError(e.message);\r\n      } finally {\r\n        setCargando(false);\r\n      }\r\n    })();   \r\n\r\n  }, []);\r\n\r\n  \/\/ devolvemos cargando + datos + error\r\n  return { cargando, datos, error }\r\n}\r\n<\/pre>\n
Componente Pelicula<\/h3>\n
import { usePedirJsonAlServidor } from '.\/usePedirJsonAlServidor'\r\n\r\nexport default function Pelicula() {\r\n  \/\/ obviamente, la URL podria ser una propiedad del componente...\r\n  const { cargando, datos, error } = usePedirJsonAlServidor(\"\/pelicula01.json\");\r\n\r\n  if (error) {\r\n    return (\r\n      <div className=\"pelicula\">\r\n        <p>ERROR: {error}<\/p>\r\n      <\/div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className=\"pelicula\">\r\n      <p>T\u00edtulo: {cargando ? \"...\" : datos.titulo}<\/p>\r\n      <p>A\u00f1o: {cargando ? \"...\" : datos.anyo}<\/p>\r\n      <p>Director: {cargando ? \"...\" : datos.director}<\/p>\r\n    <\/div>\r\n  )\r\n}\r\n<\/pre>\n
Componente Libro<\/h3>\n
import { usePedirJsonAlServidor } from '.\/usePedirJsonAlServidor'\r\n\r\nexport default function Libro() {\r\n  \/\/ obviamente, la URL podria ser una propiedad del componente...\r\n  const { cargando, datos, error } = usePedirJsonAlServidor(\"\/libro01.json\");\r\n\r\n  if (error) {\r\n    return (\r\n      <div className=\"libro\">\r\n        <p>ERROR: {error}<\/p>\r\n      <\/div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className=\"libro\">\r\n      <p>T\u00edtulo: {cargando ? \"...\" : datos.titulo}<\/p>\r\n      <p>Tipo: {cargando ? \"...\" : datos.tipo}<\/p>\r\n      <p>Autor: {cargando ? \"...\" : datos.autor}<\/p>\r\n    <\/div>\r\n  )\r\n}\r\n<\/pre>\n
Como se puede ver en este ejemplo, el haber aislado la funcionalidad compartida por los dos componentes en un \u00fanico hook personalizado<\/strong> que se encarga de realizar la petici\u00f3n de informaci\u00f3n al servidor, nos ha evitado repetir c\u00f3digo y a su vez, nos ha permitido escribir unos componentes m\u00e1s sencillos.<\/strong><\/p>\n
NOTA: Si tienes problemas de CORS al realizar las peticiones fetch<\/em>, puedes consultar este otro art\u00edculo<\/a>.<\/p>\n
Conclusi\u00f3n<\/h2>\n
Tal y como se puede ver, los hooks personalizados de React son un concepto muy sencillo y que nos va a permitir escribir un c\u00f3digo m\u00e1s limpio y reutilizable<\/strong>.<\/p>\n
Recuerda que los hooks personalizados son funciones normales y corrientes<\/strong>, y que lo que las convierte en hooks es una simple convenci\u00f3n.<\/p>\n
Para m\u00e1s informaci\u00f3n puedes consultar la p\u00e1gina oficial<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
En React es posible escribir nuestros propios hooks personalizados, mas all\u00e1 de los que vienen en la propia librer\u00eda como useState(), useEffect(), etc. \u00bfPara que sirve un hook personalizado de React? Cuando en JavaScript tenemos dos (o m\u00e1s) funciones que tienen c\u00f3digo en com\u00fan, si…<\/p>\n","protected":false},"author":23,"featured_media":14733,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_ef_editorial_meta_date_first-draft-date":"","_ef_editorial_meta_paragraph_assignment":"","_ef_editorial_meta_checkbox_needs-photo":"","_ef_editorial_meta_number_word-count":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[7,5],"tags":[857,469],"class_list":["post-14726","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-web","category-programacion","tag-hooks","tag-reactjs"],"yoast_head":"\nHooks personalizados en React - Blog Escola Espai<\/title>\n<meta name=\"description\" content=\"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.\" \/>\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.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Hooks personalizados en React - Blog Escola Espai\" \/>\n<meta property=\"og:description\" content=\"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Escola Espai\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-08T14:47:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-08T18:28:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"500\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Abel Camarena\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Abel Camarena\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\"},\"author\":{\"name\":\"Abel Camarena\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"headline\":\"Hooks personalizados en React\",\"datePublished\":\"2023-09-08T14:47:31+00:00\",\"dateModified\":\"2023-09-08T18:28:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\"},\"wordCount\":590,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg\",\"keywords\":[\"hooks\",\"reactjs\"],\"articleSection\":[\"Dise\u00f1o Web\",\"Programaci\u00f3n\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\",\"url\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\",\"name\":\"Hooks personalizados en React - Blog Escola Espai\",\"isPartOf\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg\",\"datePublished\":\"2023-09-08T14:47:31+00:00\",\"dateModified\":\"2023-09-08T18:28:51+00:00\",\"author\":{\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\"},\"description\":\"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage\",\"url\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg\",\"contentUrl\":\"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg\",\"width\":1000,\"height\":500,\"caption\":\"Hooks personalizados en React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.espai.es\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Hooks personalizados en React\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.espai.es\/blog\/#website\",\"url\":\"https:\/\/www.espai.es\/blog\/\",\"name\":\"Blog Escola Espai\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.espai.es\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897\",\"name\":\"Abel Camarena\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g\",\"caption\":\"Abel Camarena\"},\"sameAs\":[\"http:\/\/www.espai.es\"],\"url\":\"https:\/\/www.espai.es\/blog\/author\/abel\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Hooks personalizados en React - Blog Escola Espai","description":"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.","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.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/","og_locale":"es_ES","og_type":"article","og_title":"Hooks personalizados en React - Blog Escola Espai","og_description":"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.","og_url":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/","og_site_name":"Blog Escola Espai","article_published_time":"2023-09-08T14:47:31+00:00","article_modified_time":"2023-09-08T18:28:51+00:00","og_image":[{"width":1000,"height":500,"url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","type":"image\/jpeg"}],"author":"Abel Camarena","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"Abel Camarena","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#article","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/"},"author":{"name":"Abel Camarena","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"headline":"Hooks personalizados en React","datePublished":"2023-09-08T14:47:31+00:00","dateModified":"2023-09-08T18:28:51+00:00","mainEntityOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/"},"wordCount":590,"commentCount":0,"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","keywords":["hooks","reactjs"],"articleSection":["Dise\u00f1o Web","Programaci\u00f3n"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/","url":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/","name":"Hooks personalizados en React - Blog Escola Espai","isPartOf":{"@id":"https:\/\/www.espai.es\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage"},"image":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage"},"thumbnailUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","datePublished":"2023-09-08T14:47:31+00:00","dateModified":"2023-09-08T18:28:51+00:00","author":{"@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897"},"description":"Los hooks personalizados de React son simples funciones que nos van a permitir un c\u00f3digo m\u00e1s limpio y reutilizable.","breadcrumb":{"@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#primaryimage","url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","contentUrl":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","width":1000,"height":500,"caption":"Hooks personalizados en React"},{"@type":"BreadcrumbList","@id":"https:\/\/www.espai.es\/blog\/2023\/09\/hooks-personalizados-en-react\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.espai.es\/blog\/"},{"@type":"ListItem","position":2,"name":"Hooks personalizados en React"}]},{"@type":"WebSite","@id":"https:\/\/www.espai.es\/blog\/#website","url":"https:\/\/www.espai.es\/blog\/","name":"Blog Escola Espai","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.espai.es\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/b2d40404b9d987e3586e186c021ef897","name":"Abel Camarena","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.espai.es\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/035501b0f14e120b1a49121758e2056b8d589fc43b9d3c3ad3670a197a90dddf?s=96&d=mm&r=g","caption":"Abel Camarena"},"sameAs":["http:\/\/www.espai.es"],"url":"https:\/\/www.espai.es\/blog\/author\/abel\/"}]}},"jetpack_featured_media_url":"https:\/\/www.espai.es\/blog\/wp-content\/uploads\/2023\/09\/logo.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/comments?post=14726"}],"version-history":[{"count":7,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14726\/revisions"}],"predecessor-version":[{"id":14734,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/posts\/14726\/revisions\/14734"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media\/14733"}],"wp:attachment":[{"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/media?parent=14726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/categories?post=14726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.espai.es\/blog\/wp-json\/wp\/v2\/tags?post=14726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}