{"id":546,"date":"2024-09-03T10:32:42","date_gmt":"2024-09-03T15:32:42","guid":{"rendered":"https:\/\/camilopinzoncv.julianvalencia.co\/?p=546"},"modified":"2025-01-08T11:42:28","modified_gmt":"2025-01-08T16:42:28","slug":"component-lifecycle-methods-or-hooks","status":"publish","type":"post","link":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/component-lifecycle-methods-or-hooks\/","title":{"rendered":"M\u00e9todos del Ciclo de Vida del Componente (Hooks)"},"content":{"rendered":"<div data-elementor-type=\"wp-post\" data-elementor-id=\"546\" class=\"elementor elementor-546\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f521b69 e-flex e-con-boxed e-con e-parent\" data-id=\"f521b69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2e3d53 elementor-widget elementor-widget-spacer\" data-id=\"d2e3d53\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-18b3047 elementor-widget elementor-widget-heading\" data-id=\"18b3047\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">M\u00e9todos del Ciclo de Vida del Componente (Hooks)<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b8747ce elementor-widget elementor-widget-spacer\" data-id=\"b8747ce\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a4abc08 e-flex e-con-boxed e-con e-parent\" data-id=\"a4abc08\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53190d6 elementor-widget elementor-widget-text-editor\" data-id=\"53190d6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Ejercicio: <\/strong>Crea un componente que obtenga datos de un API y los muestre usando <code>useEffect<\/code>para manejar y liberar recuersos si es necesario.<\/li><li><strong>Pr\u00e1ctica:<\/strong> Entender como usar <code>useEffect<\/code>para distintos escenarios, como obtener datos, configuraci\u00f3n de suscripciones o liberar recursos.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-fd55cb8 e-flex e-con-boxed e-con e-parent\" data-id=\"fd55cb8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-97fa959 elementor-widget elementor-widget-heading\" data-id=\"97fa959\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Paso 1: Configurar el Componente<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aaa7b38 elementor-widget elementor-widget-text-editor\" data-id=\"aaa7b38\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Empieza creando un componente funcional b\u00e1sico en <a href=\"https:\/\/react.dev\/\" target=\"_blank\" rel=\"noreferer noopener\">React.<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3683982 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"3683982\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>const DataFetchingComponent = () =&gt; {\n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-861f5c8 e-flex e-con-boxed e-con e-parent\" data-id=\"861f5c8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7c23a6a elementor-widget elementor-widget-heading\" data-id=\"7c23a6a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Paso 2: A\u00f1ade state para almacenar los datos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7eca766 elementor-widget elementor-widget-text-editor\" data-id=\"7eca766\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Necesitas una variable state para almacenar los datos obtenidos de la API. Usa el hook <code>useState<\/code> para esto.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-323d366 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"323d366\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState} from &#039;react&#039;;\n\nconst DataFetchingComponent = () =&gt; {\n    const [data, setData] = useState(null); \/\/Initialize state for storing data\n    \n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    );\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7c5dc64 elementor-widget elementor-widget-text-editor\" data-id=\"7c5dc64\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n \t<li><strong>Explicaci\u00f3n:<\/strong>\n<ul>\n \t<li><code>useState(null)<\/code>inicializa <code>data<\/code> con un valor <code>null<\/code>.<\/li>\n \t<li><code>setData<\/code> es la funci\u00f3n que usar\u00e1s para actualizar el <code>data<\/code> state.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4efea73 e-flex e-con-boxed e-con e-parent\" data-id=\"4efea73\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-88e0757 elementor-widget elementor-widget-heading\" data-id=\"88e0757\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Paso 3: Obtener los datos con useEffect<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6b315f2 elementor-widget elementor-widget-text-editor\" data-id=\"6b315f2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ahora usa el <code>useEffect<\/code> hook para obtener la data cuando el componente sea montado.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7a591eb elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"7a591eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\n\nconst DataFetchingComponent = () =&gt; {\n    const [data, setData] = useState(null);\n    \n    useEffect(() =&gt; {\n        const fetchData = async() =&gt;{\n            try{\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\n                const result = await response.json();\n                setData(result);\n            } catch(error) {\n                console.error(`Error fetching data: ${error}`);\n            }\n        };\n        \n        fetchData();\n    },[]); \/\/ Empty dependency array to run only once on mount\n    \n    return(\n        &lt;div&gt;\n            &lt;h1&gt;Data Fetching Component&lt;\/h1&gt;\n        &lt;\/div&gt;\n    )\n};\n\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7299c73 elementor-widget elementor-widget-text-editor\" data-id=\"7299c73\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong>Explicaci\u00f3n:<\/strong><ul><li><code>useEffect(() =&gt; {}, [])<\/code> corre el c\u00f3digo una vez, cuando el componente es montado. El array vac\u00edo <code>[]<\/code> se asegura de esto.<\/li><li><code>fetchData<\/code> es una funci\u00f3n asincrona que obtiene los datos de la API suministrada.<\/li><li><code>setData(result)<\/code> actualiza el <code>data<\/code> con el resultado obtenido.<\/li><\/ul><\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4f206f6 e-flex e-con-boxed e-con e-parent\" data-id=\"4f206f6\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f3a72d elementor-widget elementor-widget-heading\" data-id=\"2f3a72d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Paso 4: Renderizar los datos obtenidos<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c4551d4 elementor-widget elementor-widget-text-editor\" data-id=\"c4551d4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Ahora que los datos se han obtenido y est\u00e1n almacenados, render\u00edzalos en tu componente.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-b5e24c8 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"b5e24c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\r\n\r\nconst DataFetchingComponent = () =&gt; {\r\n    const [data, setData], useState(null);\r\n    \r\n    useEffect(() =&gt; {\r\n        const fetchData = async() =&gt; {\r\n            try{\r\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\r\n                const result = await response.json();\r\n                setData(result);\r\n            }catch(error){\r\n                console.error(`Error fetching data: ${error}`);\r\n            }\r\n        }\r\n        \r\n        fetchData();\r\n    }, []);\r\n    \r\n    return(\r\n    &lt;div&gt;\r\n        &lt;h1&gt;Fetching data example&lt;\/h1&gt;\r\n        {data ? (\r\n            &lt;ul&gt;\r\n            {data.map((item, idx) =&gt; (\r\n                &lt;li key=&quot;{idx}&quot;&gt;{item.title}&lt;\/li&gt;\r\n            ))}    \r\n            &lt;\/ul&gt;\r\n            ) : (\r\n                &lt;p&gt;Loading...&lt;\/p&gt;\r\n            )\r\n        }\r\n    &lt;\/div&gt;\r\n    );\r\n};\r\n\r\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6e4b878 elementor-widget elementor-widget-text-editor\" data-id=\"6e4b878\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul>\n \t<li><strong>Explicaci\u00f3n:<\/strong>\n<ul>\n \t<li><code>data ? (...):(...)<\/code>: Este es un operador condicional (ternario). Si <code>data<\/code> no es <code>null<\/code>renderiza una lista de los datos; de otra forma muestra un mensaje de \"Loading...\"<\/li>\n \t<li><code>data.map((item, idx) =&gt; ...)<\/code>: Itera sobre el array de los datos obtenidos y renderiza cada uno como elemento de una lista.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5391400 e-flex e-con-boxed e-con e-parent\" data-id=\"5391400\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9bf32eb elementor-widget elementor-widget-heading\" data-id=\"9bf32eb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Liberar recursos (si es necesario)<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-df0e3f7 elementor-widget elementor-widget-text-editor\" data-id=\"df0e3f7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>En algunos casos, es posible que debas limpiar despu\u00e9s de los efectos secundarios. Por ejemplo, si configuras suscripciones o temporizadores. En este caso, no se requiere limpieza porque no hay ninguna suscripci\u00f3n o temporizador en curso.<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4b35ac1 elementor-widget elementor-widget-code-block-for-elementor\" data-id=\"4b35ac1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"code-block-for-elementor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<pre class='line-numbers theme-okaidia' data-show-toolbar='yes'><code class='language-javascript'>import {useState, useEffect} from &#039;react&#039;;\r\n\r\nconst DataFetchingComponent = () =&gt; {\r\n    const [data, setData], useState(null);\r\n    \r\n    useEffect(() =&gt; {\r\n        const fetchData = async() =&gt; {\r\n            try{\r\n                const response = await fetch(&#039;https:\/\/jsonplaceholder.typicode.com\/posts&#039;);\r\n                const result = await response.json();\r\n                setData(result);\r\n            }catch(error){\r\n                console.error(`Error fetching data: ${error}`);\r\n            }\r\n        }\r\n        \r\n        fetchData();\r\n        \r\n        \/\/Cleanup function (not necessary here)\r\n        return () =&gt;{\r\n            \/\/cleanup logic (e.g., unsubscribe, clear timers, etc.)\r\n        }\r\n    }, []);\r\n    \r\n    return(\r\n    &lt;div&gt;\r\n        &lt;h1&gt;Fetching data example&lt;\/h1&gt;\r\n        {data ? (\r\n            &lt;ul&gt;\r\n            {data.map((item, idx) =&gt; (\r\n                &lt;li key=&quot;{idx}&quot;&gt;{item.title}&lt;\/li&gt;\r\n            ))}    \r\n            &lt;\/ul&gt;\r\n            ) : (\r\n                &lt;p&gt;Loading...&lt;\/p&gt;\r\n            )\r\n        }\r\n    &lt;\/div&gt;\r\n    );\r\n};\r\n\r\nexport default DataFetchingComponent;<\/code><\/pre>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a23fff e-flex e-con-boxed e-con e-parent\" data-id=\"2a23fff\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0484fa3 elementor-widget elementor-widget-heading\" data-id=\"0484fa3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Conclusiones<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-57d436f elementor-widget elementor-widget-text-editor\" data-id=\"57d436f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<ul><li><strong><code>useEffect<\/code>:<\/strong> Este hook es esencial para los efectos secundarios en componentes funcionales, como la obtenci\u00f3n de datos. Puede ejecutarse al montar, al actualizar o al desmontar, dependiendo del array de dependencias.<\/li><li><strong><code>useState<\/code>:<\/strong> Maneja el estado local del componente, permiti\u00e9ndole ser reactivo a los cambios (por ejemplo, actualizando la interfaz de usuario cuando se obtienen nuevos datos).<\/li><li><strong>Renderizado condicional:<\/strong> Maneja diferentes estados (cargando, error, \u00e9xito) con l\u00f3gica condicional.<\/li><\/ul>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-73c2e69 e-flex e-con-boxed e-con e-parent\" data-id=\"73c2e69\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ecd90b1 elementor-widget elementor-widget-text-editor\" data-id=\"ecd90b1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Puedes encontrar este ejemplo utilizando TypeScript en mi <a href=\"https:\/\/github.com\/CamiloPinzon\/Component-lifecicle-methods\/tree\/main\" target=\"_blank\" rel=\"noopener\">github<\/a><\/strong><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-643b075 e-flex e-con-boxed e-con e-parent\" data-id=\"643b075\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>This example covers the basics of fetching data in a React component, which is a common pattern in real-world applications.<\/p>","protected":false},"author":1,"featured_media":581,"comment_status":"open","ping_status":"open","sticky":false,"template":"elementor_header_footer","format":"standard","meta":{"footnotes":""},"categories":[30,14,16,31,17],"tags":[],"class_list":["post-546","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-development","category-javascript","category-react","category-reactjs","category-web"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/posts\/546","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/comments?post=546"}],"version-history":[{"count":53,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/posts\/546\/revisions"}],"predecessor-version":[{"id":625,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/posts\/546\/revisions\/625"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/media\/581"}],"wp:attachment":[{"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/media?parent=546"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/categories?post=546"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/camilopinzoncv.julianvalencia.co\/es\/wp-json\/wp\/v2\/tags?post=546"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}