{"id":7182,"date":"2021-11-30T06:34:40","date_gmt":"2021-11-30T05:34:40","guid":{"rendered":"http:\/\/www.unimedia.tech.mialias.net\/build-a-simple-crud-app-using-react-and-node\/"},"modified":"2024-01-09T19:36:24","modified_gmt":"2024-01-09T18:36:24","slug":"build-a-simple-crud-app-using-react-and-node","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/","title":{"rendered":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node"},"content":{"rendered":"\n<p>En aquest article, aprendrem a crear una aplicaci\u00f3 CRUD senzilla amb React.js, Node.js i TailwindCSS.  <\/p>\n\n<h2 class=\"wp-block-heading\">Qu\u00e8 \u00e9s una aplicaci\u00f3 CRUD?<\/h2>\n\n<p>Una aplicaci\u00f3 CRUD realitza quatre operacions b\u00e0siques d&#8217;aplicacions, a saber, <strong>crear<\/strong> , <strong>llegir<\/strong> , <strong>actualitzar<\/strong> i <strong>eliminar<\/strong> . Moltes aplicacions amb les quals interactueu di\u00e0riament <a href=\"https:\/\/www.unimedia.tech\/software-development\/\">realitzen<\/a> aquestes tasques b\u00e0siques. Prenguem Instagram com a exemple. Podeu <strong>crear<\/strong> perfils i publicacions emmagatzemades a la base de dades, <strong>llegir<\/strong> els vostres perfils i publicacions i els d&#8217;altres usuaris. Aquests detalls es recuperen de les dades creades emmagatzemades. Tamb\u00e9 podeu <strong>actualitzar i suprimir<\/strong> les vostres publicacions, imatges de perfil, etc.  <\/p>\n\n<p>Tamb\u00e9 us pot interessar: <a href=\"https:\/\/www.unimedia.tech\/2021\/10\/09\/paypal-checkout-integration-with-react\/\">&#8220;Integraci\u00f3 de PayPal Checkout amb React&#8221;<\/a><\/p>\n\n<p>A part de requerir un front-end i un servidor, aquestes funcions requereixen una base de dades com MongoDB per emmagatzemar, recuperar, actualitzar i eliminar les dades enviades per l&#8217;usuari. Com us podeu imaginar, la configuraci\u00f3 requereix molt d&#8217;esfor\u00e7, per aix\u00f2 ens vam alegrar quan vam descobrir una <a href=\"https:\/\/www.mecallapi.com\/#api\">senzilla API REST falsa<\/a> que podem utilitzar per realitzar tasques CRUD b\u00e0siques per a la nostra aplicaci\u00f3.<\/p>\n\n<h2 class=\"wp-block-heading\">Objectiu<\/h2>\n\n<p>El nostre objectiu avui \u00e9s aprendre les tasques seg\u00fcents:<\/p>\n\n<ul class=\"wp-block-list\"><li>Instal\u00b7lar paquets b\u00e0sics amb Node.js<\/li><li>Crear una interf\u00edcie d&#8217;usuari excel\u00b7lent amb React i Tailwind CSS<\/li><li>Realitzar operacions CRUD b\u00e0siques amb la nostra aplicaci\u00f3.<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">Requisits previs<\/h2>\n\n<ul class=\"wp-block-list\"><li>Coneixements de React js i React Hooks.<\/li><li>React 16.8 o posterior<\/li><\/ul>\n\n<h2 class=\"wp-block-heading\">Crea una aplicaci\u00f3 React<\/h2>\n\n<p>Comencem a utilitzar el boilerplate de React CRA per crear la nostra aplicaci\u00f3 React. Com que utilitzarem Tailwind CSS, seguirem els <a href=\"https:\/\/tailwindcss.com\/docs\/guides\/create-react-app\">passos de la documentaci\u00f3 oficial<\/a> per fer que la instal\u00b7laci\u00f3 sigui perfecta.<\/p>\n\n<p>Comen\u00e7ar amb,<\/p>\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-react-crudapp\ncd my-react-crudapp\n<\/code><\/pre>\n\n<p>Obriu la carpeta del vostre IDE preferit i completeu la resta de passos. A continuaci\u00f3, hem d&#8217;instal\u00b7lar <a href=\"https:\/\/v5.reactrouter.com\/web\/guides\/quick-start\">React Router DOM<\/a> , una funcionalitat d&#8217;encaminament que ens ajuda a navegar per la nostra aplicaci\u00f3.<\/p>\n\n<pre class=\"wp-block-code\"><code>npm install react-router-dom<\/code><\/pre>\n\n<p>Executeu, <em>inicieu l&#8217;execuci\u00f3 npm<\/em> i haur\u00edeu d&#8217;obtenir la popular p\u00e0gina de Benvinguda React tal com es mostra a continuaci\u00f3.  <\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/oqfRO0u2vQeEVdFhP7eLWJ1nD2ArUd1s9X9H6FRlzpxVBkrlZEEI4T_IkciUgMByjPSAAZiHJdZr-FpkYkDrBQW95dKs17iCR-9xtUvHkkEW9xt2hqUcou8Up3gUZU3_ANsIAifD.png\" alt=\"Aplicaci&#xF3; React\"\/><\/figure>\n\n<p>Primer, crearem el nostre component de navegaci\u00f3. Per fer-ho, utilitzarem tant com sigui possible components de la p\u00e0gina de documentaci\u00f3 de Tailwind.<br\/><br\/>Creeu un component <em>Naviagte.js<\/em> a la vostra <em>carpeta src.<\/em><\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import React from \"react\";\nexport default function Navigate(){\n   return (\n       &lt;nav class=\"flex items-center justify-between flex-wrap bg-green-500 p-6\"&gt;\n           &lt;div class=\"flex items-center flex-shrink-0 text-white mr-6\"&gt;\n               &lt;span class=\"font-semibold text-xl tracking-tight\"&gt;REACT CRUD APP&lt;\/span&gt;\n           &lt;\/div&gt;          \n           &lt;div&gt;\n               &lt;button class=\"inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0\"&gt;\n                   CREATE\n               &lt;\/button&gt;\n           &lt;\/div&gt;\n       &lt;\/nav&gt;\n   )\n}\n<\/code><\/pre>\n\n<p>A continuaci\u00f3, trucarem al <em>react-router-dom<\/em> i al nostre <em>Navigate.js<\/em> al Component <em>principal App.js.<\/em>  <\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import { Link } from \"react-router-dom\";\nexport default function Navigate(){\n   return (\n       &lt;nav class=\"flex items-center justify-between flex-wrap bg-green-500 p-6\"&gt;\n       &lt;div class=\"flex items-center flex-shrink-0 text-white mr-6\"&gt;\n           &lt;span class=\"font-semibold text-xl tracking-tight\"&gt;REACT CRUD APP&lt;\/span&gt;\n       &lt;\/div&gt;\n       &lt;Link to=\"\/\"&gt;\n           &lt;button class=\"inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-green-500 hover:bg-white mt-4 lg:mt-0\"&gt;\n               HOME\n           &lt;\/button&gt;\n       &lt;\/Link&gt;\n       &lt;\/nav&gt;\n   )\n}\n<\/code><\/pre>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/3A8UHiqnLUCfeaVbJdvuh705nZhMRTM65O6o6yPM2qk2uJK-5Dtor7CAi1qDyYCMBbk1Idohq7hsHzZc3nj-Bs_Aoo3fu2l0Vzx1HzavfCpyZkdWwdT3Ork4ZqcRLwpETKTa2fWi.png\" alt=\"Aplicaci&#xF3; React CRUD\"\/><\/figure>\n\n<h2 class=\"wp-block-heading\">OPERACIONS CRUD<\/h2>\n\n<p>\u00c9s hora de comen\u00e7ar a construir les nostres funcionalitats CRUD. Aquestes s\u00f3n les trucades a l&#8217;API que farem per aconseguir-ho.  <\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/iLjWBlGpe434PnimtEoPWTAwd7fAIYsahyjPFtZa_W_tEA7VxabKB4iRm5M0JRG7lxCXDXfT8SeZQ4q_f8yNzmXNrj1rHFrZzcx5Por7ONaX5c0xeXFnE-I7iDL_kvTepDh2DpFi.png\" alt=\"API de l'aplicaci&#xF3; React CRUD\"\/><\/figure>\n\n<p>Primer, creem un UsersList.js que ens ajudi <strong>a llegir<\/strong> els usuaris existents que ja proporciona l&#8217;API per a la prova. Un cop m\u00e9s, serem <a href=\"https:\/\/tailwindui.com\/components\/application-ui\/lists\/tables\">un component d&#8217;IU oficial per crear aquest<\/a> .  <\/p>\n\n<h3 class=\"wp-block-heading\">UsersList.js<\/h3>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import React, { useEffect, useState } from \"react\";\nimport { Link } from \"react-router-dom\";\n \nfunction UsersList() {\n   const &#91;users, setUsers] = useState(&#91;]);\n   useEffect(() =&gt; {\n       ReadUsers()\n   }, &#91;])\n \n   const ReadUsers = () =&gt; {\n       fetch(\"https:\/\/www.mecallapi.com\/api\/users\")\n         .then(res =&gt; res.json())\n         .then(\n           (result) =&gt; {\n             setUsers(result)\n           }\n         )\n   }\n   return (\n       &lt;div class=\"flex flex-col\"&gt;\n           &lt;div class=\"-my-2 overflow-x-auto\"&gt;\n               &lt;div class=\"py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8\"&gt;\n                   &lt;div class=\"lg:flex lg:items-center lg:justify-between px-20 py-2\"&gt;\n                       &lt;div class=\"flex-1 min-w-0\"&gt;\n                           &lt;h2 class=\"text-2xl font-bold leading-7 text-gray-900 sm:text-3xl sm:truncate\"&gt;\n                           Users List\n                           &lt;\/h2&gt;\n                       &lt;\/div&gt;\n                       &lt;div class=\"mt-5 flex lg:mt-0 lg:ml-4\"&gt;\n                           &lt;span class=\"hidden sm:block\"&gt;\n                           &lt;Link to=\"\/create\"&gt;\n                               &lt;button type=\"button\" class=\"inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"&gt;\n                                   &lt;svg class=\"-ml-1 mr-2 h-5 w-5 text-gray-500\"  viewBox=\"0 0 20 20\" fill=\"currentColor\" aria-hidden=\"true\"&gt;\n                                   &lt;path d=\"M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z\" \/&gt;\n                                   &lt;\/svg&gt;\n                                   CREATE\n                               &lt;\/button&gt;\n                           &lt;\/Link&gt;\n                           &lt;\/span&gt;\n                       &lt;\/div&gt;\n                   &lt;\/div&gt;\n               &lt;div class=\"shadow overflow-hidden border-b border-gray-200 sm:rounded-lg\"&gt;\n                   &lt;table class=\"min-w-full divide-y divide-gray-200\"&gt;\n                   &lt;thead class=\"bg-gray-50\"&gt;\n                       &lt;tr&gt;\n                       &lt;th scope=\"col\" class=\"px-10 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\"&gt;\n                           ID\n                       &lt;\/th&gt;\n                       &lt;th scope=\"col\" class=\"px-10 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\"&gt;\n                           Full Name\n                       &lt;\/th&gt;\n                       &lt;th scope=\"col\" class=\"px-6 py-1 text-left text-xs font-medium text-gray-500 uppercase tracking-wider\"&gt;\n                           Email Address\n                       &lt;\/th&gt;\n                      \n                       &lt;th scope=\"col\" class=\"relative px-6 py-1\"&gt;\n                           &lt;span class=\"sr-only\"&gt;Edit&lt;\/span&gt;\n                       &lt;\/th&gt;\n                       &lt;\/tr&gt;\n                   &lt;\/thead&gt;\n                   &lt;tbody class=\"bg-white divide-y divide-gray-200\"&gt;\n                   {users.map((user) =&gt; (\n                       &lt;tr key={user.ID}&gt;\n                           &lt;td class=\"px-10 py-4 whitespace-nowrap\"&gt;\n                               &lt;div class=\"text-sm text-gray-500\"&gt;\n                                   {user.id}\n                               &lt;\/div&gt;\n                           &lt;\/td&gt;\n                           &lt;td class=\"px-6 py-4 whitespace-nowrap\"&gt;\n                               &lt;div class=\"flex items-center\"&gt;\n                               &lt;div class=\"flex-shrink-0 h-10 w-10\"&gt;\n                                   &lt;img class=\"h-10 w-10 rounded-full\" src={user.avatar} alt=\" \/&gt;\n                               &lt;\/div&gt;\n                               &lt;div class=\"ml-4\"&gt;\n                                   &lt;div class=\"text-sm font-medium text-gray-900\"&gt;\n                                  &lt;span&gt; {user.fname}&lt;\/span&gt; &lt;span&gt;{user.lname}&lt;\/span&gt;\n                                   &lt;\/div&gt;\n                               &lt;\/div&gt;\n                               &lt;\/div&gt;\n                           &lt;\/td&gt;\n                           &lt;td class=\"px-6 py-4 whitespace-nowrap\"&gt;\n                               &lt;div class=\"text-sm text-gray-500\"&gt;\n                                   {user.username}\n                               &lt;\/div&gt;\n                           &lt;\/td&gt;\n                           &lt;td class=\"px-6 py-4 space-x-2 whitespace-nowrap text-right text-sm font-medium\"&gt;\n                               &lt;button class=\"inline-block text-sm px-4 py-2 leading-none border rounded text-blue-800 border-blue-600 hover:bg-blue-300 hover:text-blue-500 mt-4 lg:mt-0\"&gt;EDIT&lt;\/button&gt;\n                               &lt;button class=\"inline-block text-sm px-4 py-2 leading-none border rounded text-red-800 border-red-600 hover:bg-red-300 hover:text-red-500 mt-4 lg:mt-0\"&gt;DELETE&lt;\/button&gt;\n                           &lt;\/td&gt;\n                       &lt;\/tr&gt;\n                       ))}\n                   &lt;\/tbody&gt;\n                   &lt;\/table&gt;\n               &lt;\/div&gt;\n               &lt;\/div&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n   )\n}\n \nexport default UsersList;\n<\/code><\/pre>\n\n<p>Al bloc de codi anterior, hem utilitzat <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React useEffect Hook<\/a> per obtenir la llista d&#8217;usuaris un cop carregada. Despr\u00e9s d&#8217;aix\u00f2, vam emmagatzemar les dades rebudes mitjan\u00e7ant un useState Hook i les vam assignar als components de la taula proporcionats per Tailwind CSS. A les seccions seg\u00fcents, farem servir el bot\u00f3 Edita i Elimina i Crea que hem creat.<\/p>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/ACtrUo47r0qFuT3-2Mqmq7OQ8hFdOS41L-IlAjGXz0VoddhFIx_gHY1sIqBiqnJGxxxQmuRI4vDgCTxyHuE8YErffJs9fMknpmbY9m2JOJX0NV7ErqTJu-jN0RQi0p2wqF_4b5h1.png\" alt=\"Aplicaci&#xF3; React CRUD\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\">CreateUser.js<\/h3>\n\n<p>A continuaci\u00f3, crearem <em>CreateUser.js<\/em> que ens permetr\u00e0 crear un usuari.  <\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import React, { useState } from \"react\";\n \nfunction CreateUser() {\n  \n   const handleSubmit = event =&gt; {\n     event.preventDefault();\n     var data = {\n       'fname': fname,\n       'lname': lname,\n       'username': username,\n       'email': email,\n       'avatar': avatar,\n     }\n \n     fetch('https:\/\/www.mecallapi.com\/api\/users\/create', {\n       method: 'POST',\n       headers: {\n         Accept: 'application\/form-data',\n         'Content-Type': 'application\/json',\n       },\n       body: JSON.stringify(data),\n     })\n     .then(res =&gt; res.json())\n     .then(\n       (result) =&gt; {\n         alert(result&#91;'message'])\n         if (result&#91;'status'] === 'ok') {\n           window.location.href = '\/';\n         }\n       }\n     )\n   }\n    const &#91;fname, setFname] = useState('');\n   const &#91;lname, setLname] = useState('');\n   const &#91;username, setUsername] = useState('');\n   const &#91;email, setEmail] = useState('');\n   const &#91;avatar, setAvatar] = useState('');\n \n   return (\n       &lt;form class=\"w-full max-w-lg mx-auto my-20\" onSubmit={handleSubmit}&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-2\"&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3 mb-3 md:mb-0\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-first-name\"&gt;\n               First Name\n           &lt;\/label&gt;\n           &lt;input\n           class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white\" id=\"grid-first-name\"\n           type=\"text\"\n           placeholder=\"First Name\"\n           onChange={(e) =&gt; setFname(e.target.value)}\n           label=\"First Name\"\n           \/&gt;\n              \n          \n           &lt;\/div&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\"\n           for=\"grid-last-name\"&gt;\n               Last Name\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-last-name\"\n           type=\"text\" placeholder=\"Last Name\"\n           onChange={(e) =&gt; setLname(e.target.value)}\n           label=\"Last Name\"\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-2\"&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3 mb-6 md:mb-0\"&gt;\n               &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-first-name\"&gt;\n                   Email Address\n               &lt;\/label&gt;\n               &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white\" id=\"grid-first-name\"\n               type=\"email\"  placeholder=\"Email address\"\n               onChange={(e) =&gt; setEmail(e.target.value)}\n               label=\"Email\"\n               \/&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-last-name\"&gt;\n               Username\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-last-name\"\n           label=\"Username\"\n           onChange={(e) =&gt; setUsername(e.target.value)}\n           type=\"text\" placeholder=\"janeDoe\"\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-1\"&gt;\n           &lt;div class=\"w-full px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-image\"&gt;\n               Avatar\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-image\" type=\"text\"\n           placeholder=\"Image link\"\n           label=\"Avatar\"\n           onChange={(e) =&gt; setAvatar(e.target.value)}\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;button type=\"submit\" class=\"inline-flex items-center ml-8 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"&gt;\n           SUBMIT\n       &lt;\/button&gt;\n      \n       &lt;\/form&gt;\n   )\n}\n \nexport default CreateUser;<\/code><\/pre>\n\n<p>Al bloc de codi anterior, vam crear un formulari i vam afegir els seus valors d&#8217;entrada a les variables d&#8217;estat corresponents mitjan\u00e7ant el ganxo UseState. Despr\u00e9s vam enviar aquests valors a l&#8217;API CRUD REST per crear un usuari.  <\/p>\n\n<p>Tamb\u00e9 importarem i utilitzarem el nou component creat al nostre <em>App.js:<\/em><\/p>\n\n<pre class=\"wp-block-code\"><code>import CreateUser from '.\/CreateUser'\n\u2026\u2026\u2026\u2026\u2026\u2026\u2026.\n&lt;Route path='\/create' element={&lt;CreateUser \/&gt;} \/&gt;<\/code><\/pre>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/BHR0xJ20o55MFSA_2G1TPsZWM36jiM9wuuEXuFfpWl5uuIIlrQy-X6ir6U2rNLWLLBt8-1XUllJZVy-A625c6gYjDqRn48QwY7WS3oGFyrGVVy0fdCawzfzmPHyuHiTO9YNDUCOd.png\" alt=\"Crear p&#xE0;gina\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\">UpdateUser.js<\/h3>\n\n<p>El seg\u00fcent pas \u00e9s crear un component <em>UpdateUser.js<\/em> que ens permetr\u00e0 editar correctament els usuaris creats.<\/p>\n\n<p>Primer, crearem una funci\u00f3 updateUser a <em>UsersLists.js<\/em><\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>const UpdateUser = id =&gt; {\n   window.location = '\/update\/'+id\n }\n<\/code><\/pre>\n\n<p class=\"has-small-font-size\">i passa-ho al bot\u00f3 d&#8217;edici\u00f3.<\/p>\n\n<pre class=\"wp-block-code\"><code>onClick={() =&gt; UpdateUser(user.id)}<\/code><\/pre>\n\n<p>Ara, podem crear el nostre <em>UpdateUser.js<\/em><\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import React, { useState, useEffect } from \"react\";\nimport { useParams } from 'react-router-dom';\n \nfunction UpdateUser() {\n    const { id } = useParams();\n \n   useEffect(() =&gt; {\n     fetch(\"https:\/\/www.mecallapi.com\/api\/users\/\"+id)\n       .then(res =&gt; res.json())\n       .then(\n         (result) =&gt; {\n           setFname(result.user.fname)\n           setLname(result.user.lname)\n           setUsername(result.user.username)\n           setEmail(result.user.email)\n           setAvatar(result.user.avatar)\n         }\n       )\n   }, &#91;id])\n    const handleSubmit = event =&gt; {\n     event.preventDefault();\n     var data = {\n       'id': id,\n       'fname': fname,\n       'lname': lname,\n       'username': username,\n       'email': email,\n       'avatar': avatar,\n     }\n     fetch('https:\/\/www.mecallapi.com\/api\/users\/update', {\n       method: 'PUT',\n       headers: {\n         Accept: 'application\/form-data',\n         'Content-Type': 'application\/json',\n       },\n       body: JSON.stringify(data),\n     })\n     .then(res =&gt; res.json())\n     .then(\n       (result) =&gt; {\n         alert(result&#91;'message'])\n         if (result&#91;'status'] === 'ok') {\n           window.location.href = '\/';\n         }\n       }\n     )\n   }\n    const &#91;fname, setFname] = useState('');\n   const &#91;lname, setLname] = useState('');\n   const &#91;username, setUsername] = useState('');\n   const &#91;email, setEmail] = useState('');\n   const &#91;avatar, setAvatar] = useState('');\n    return (\n       &lt;form class=\"w-full max-w-lg mx-auto my-20\" onSubmit={handleSubmit}&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-2\"&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3 mb-3 md:mb-0\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-first-name\"&gt;\n               First Name\n           &lt;\/label&gt;\n           &lt;input\n           class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white\" id=\"grid-first-name\"\n           type=\"text\"\n           value={fname}\n           onChange={(e) =&gt; setFname(e.target.value)}\n           label=\"First Name\"\n           \/&gt;\n              \n          \n           &lt;\/div&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\"\n           for=\"grid-last-name\"&gt;\n               Last Name\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-last-name\"\n           type=\"text\" value={lname}\n           onChange={(e) =&gt; setLname(e.target.value)}\n           label=\"Last Name\"\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-2\"&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3 mb-6 md:mb-0\"&gt;\n               &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-first-name\"&gt;\n                   Email Address\n               &lt;\/label&gt;\n               &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white\" id=\"grid-first-name\"\n               type=\"email\"  value={email}\n               onChange={(e) =&gt; setEmail(e.target.value)}\n               label=\"Email\"\n               \/&gt;\n           &lt;\/div&gt;\n           &lt;div class=\"w-full md:w-1\/2 px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-last-name\"&gt;\n               Username\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-last-name\"\n           label=\"Username\"\n           onChange={(e) =&gt; setUsername(e.target.value)}\n           type=\"text\" value={username}\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;div class=\"flex flex-wrap mx-3 mb-1\"&gt;\n           &lt;div class=\"w-full px-3\"&gt;\n           &lt;label class=\"block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2\" for=\"grid-image\"&gt;\n               Avatar\n           &lt;\/label&gt;\n           &lt;input class=\"appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500\" id=\"grid-image\" type=\"text\"\n           value={avatar}\n           label=\"Avatar\"\n           onChange={(e) =&gt; setAvatar(e.target.value)}\n           \/&gt;\n           &lt;\/div&gt;\n       &lt;\/div&gt;\n       &lt;button type=\"submit\" class=\"inline-flex items-center ml-8 px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500\"&gt;\n           Update\n       &lt;\/button&gt;\n      \n       &lt;\/form&gt;\n   )\n}\n \nexport default UpdateUser;\n<\/code><\/pre>\n\n<p>Al fragment de codi anterior, hem recuperat i mostrat l&#8217;identificador d&#8217;usuari actual de l&#8217;usuari que voldr\u00edem editar-ne els detalls. A continuaci\u00f3, hem actualitzat els valors mitjan\u00e7ant les entrades del formulari fetes per l&#8217;usuari.<\/p>\n\n<p>Tamb\u00e9 importarem i utilitzarem el nou component creat al nostre <em>App.js:<\/em><\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>import UpdateUser from '.\/UpdateUser'\n\u2026\u2026\u2026\n&lt;Route path='\/update\/:id' element={&lt;UpdateUser \/&gt;}\/&gt;<\/code><\/pre>\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/8Dz8id83eyERq_XDSsnVOimXQ0nTbLqLQrK6rOrAMQLBP65YWuHuHKjip3vllgiGQ96-1gaiqw45Li4OQ1k_1cA-vd1BzTY7a6-oLNaR-xvmcC8jgQPg9mYZ3fIkblzOhs7WxBON.png\" alt=\"P&#xE0;gina d'actualitzaci&#xF3;\"\/><\/figure>\n\n<h3 class=\"wp-block-heading\">ELIMINAR<\/h3>\n\n<p>Finalment, activarem el bot\u00f3 d&#8217;eliminaci\u00f3. Aix\u00f2 no requereix cap component nou, actualitzarem el nostre component UsersList.js.  <\/p>\n\n<pre class=\"wp-block-code has-small-font-size\"><code>const DeleteUser = id =&gt; {\n       var data = {\n         'id': id\n       }\n       fetch('https:\/\/www.mecallapi.com\/api\/users\/delete', {\n         method: 'DELETE',\n         headers: {\n           Accept: 'application\/form-data',\n           'Content-Type': 'application\/json',\n         },\n         body: JSON.stringify(data),\n       })\n       .then(res =&gt; res.json())\n       .then(\n         (result) =&gt; {\n           alert(result&#91;'message'])\n           if (result&#91;'status'] === 'ok') {\n               ReadUsers()\n           }\n         }\n       )\n     }\n\n&lt;button onClick={() =&gt; DeleteUser(user.id)} class=\"inline-block text-sm px-4 py-2 leading-none border rounded text-red-800 border-red-600 hover:bg-red-300 hover:text-red-500 mt-4 lg:mt-0\"&gt;DELETE&lt;\/button&gt;<\/code><\/pre>\n\n<h2 class=\"wp-block-heading\">Demostraci\u00f3<\/h2>\n\n<figure class=\"wp-block-video\"><video height=\"486\" style=\"aspect-ratio: 1120 \/ 486;\" width=\"1120\" controls=\"\" src=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2021\/11\/ReactNODE_CRUD_APP.mp4\"><\/video><\/figure>\n\n<h2 class=\"wp-block-heading\">Resum<\/h2>\n\n<p>Aix\u00f2 \u00e9s tot per ara. En conclusi\u00f3, aprenem a utilitzar Node.js per instal\u00b7lar paquets essencials per al nostre React. A continuaci\u00f3, hem utilitzat React Hooks i React Router per crear i navegar pels nostres components. Finalment, hem fet interaccions CRUD b\u00e0siques per crear, llegir, actualitzar i eliminar els detalls dels usuaris.  <\/p>\n\n<p>Si esteu interessats a desenvolupar encara m\u00e9s les vostres habilitats React i Node js, aqu\u00ed teniu dos tutorials nostres que us poden ajudar. Una <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">introducci\u00f3 r\u00e0pida a la integraci\u00f3 de React Hooks<\/a> i <a href=\"https:\/\/www.unimedia.tech\/2021\/08\/17\/stripe-checkout-integration-with-react\/\">Stripe Checkout amb React<\/a> .<\/p>\n\n<p><\/p>\n\n<h2 class=\"wp-block-heading\">Unimedia Technology<\/h2>\n\n<p>A <a href=\"https:\/\/www.unimedia.tech\/\">Unimedia Technology<\/a> tenim un equip de <strong><a href=\"https:\/\/www.unimedia.tech\/dedicated-development-teams\/\">desenvolupadors web<\/a><\/strong> que us poden ajudar a desenvolupar les vostres aplicacions React m\u00e9s complexes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>En aquest article, aprendrem a crear una aplicaci\u00f3 CRUD senzilla amb React.js, Node.js i TailwindCSS. Qu\u00e8 \u00e9s una aplicaci\u00f3 CRUD? Una aplicaci\u00f3 CRUD realitza quatre operacions b\u00e0siques d&#8217;aplicacions, a saber, crear , llegir , actualitzar i eliminar . Moltes aplicacions amb les quals interactueu di\u00e0riament realitzen aquestes tasques b\u00e0siques. Prenguem Instagram com a exemple. Podeu [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6705,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[213,218],"tags":[],"class_list":["post-7182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-ca","category-technical-guides-ca"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v21.6 (Yoast SEO v27.1.1) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node - Unimedia Technology<\/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.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/\" \/>\n<meta property=\"og:locale\" content=\"ca_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node\" \/>\n<meta property=\"og:description\" content=\"En aquest article, aprendrem a crear una aplicaci\u00f3 CRUD senzilla amb React.js, Node.js i TailwindCSS. Qu\u00e8 \u00e9s una aplicaci\u00f3 CRUD? Una aplicaci\u00f3 CRUD realitza quatre operacions b\u00e0siques d&#8217;aplicacions, a saber, crear , llegir , actualitzar i eliminar . Moltes aplicacions amb les quals interactueu di\u00e0riament realitzen aquestes tasques b\u00e0siques. Prenguem Instagram com a exemple. Podeu [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/\" \/>\n<meta property=\"og:site_name\" content=\"Unimedia Technology\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.linkedin.com\/company\/unimedia-technology\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-11-30T05:34:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-09T18:36:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png\" \/>\n\t<meta property=\"og:image:width\" content=\"700\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Unimedia\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:site\" content=\"@UnimediaCTO\" \/>\n<meta name=\"twitter:label1\" content=\"Escrit per\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Temps estimat de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minuts\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node - Unimedia Technology","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.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/","og_locale":"ca_ES","og_type":"article","og_title":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node","og_description":"En aquest article, aprendrem a crear una aplicaci\u00f3 CRUD senzilla amb React.js, Node.js i TailwindCSS. Qu\u00e8 \u00e9s una aplicaci\u00f3 CRUD? Una aplicaci\u00f3 CRUD realitza quatre operacions b\u00e0siques d&#8217;aplicacions, a saber, crear , llegir , actualitzar i eliminar . Moltes aplicacions amb les quals interactueu di\u00e0riament realitzen aquestes tasques b\u00e0siques. Prenguem Instagram com a exemple. Podeu [&hellip;]","og_url":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/","og_site_name":"Unimedia Technology","article_publisher":"https:\/\/www.linkedin.com\/company\/unimedia-technology\/","article_published_time":"2021-11-30T05:34:40+00:00","article_modified_time":"2024-01-09T18:36:24+00:00","og_image":[{"width":700,"height":400,"url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png","type":"image\/png"}],"author":"Unimedia","twitter_card":"summary_large_image","twitter_creator":"@UnimediaCTO","twitter_site":"@UnimediaCTO","twitter_misc":{"Escrit per":"Unimedia","Temps estimat de lectura":"13 minuts"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node","datePublished":"2021-11-30T05:34:40+00:00","dateModified":"2024-01-09T18:36:24+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/"},"wordCount":809,"publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png","articleSection":["React","Technical Guides"],"inLanguage":"ca"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/","url":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/","name":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/ca\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#primaryimage"},"thumbnailUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png","datePublished":"2021-11-30T05:34:40+00:00","dateModified":"2024-01-09T18:36:24+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#breadcrumb"},"inLanguage":"ca","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/"]}]},{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#primaryimage","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/Blogging-Tips-LinkedIn-Post-Header-3-8.png","width":700,"height":400,"caption":"react and node"},{"@type":"BreadcrumbList","@id":"https:\/\/www.unimedia.tech\/ca\/build-a-simple-crud-app-using-react-and-node\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/ca\/"},{"@type":"ListItem","position":2,"name":"Creeu una aplicaci\u00f3 CRUD senzilla amb React i Node"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/ca\/#website","url":"https:\/\/www.unimedia.tech\/ca\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/ca\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/ca\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ca"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/ca\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/ca\/","logo":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/","url":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","contentUrl":"https:\/\/www.unimedia.tech\/wp-content\/uploads\/2023\/12\/cloud_border-3.png","width":403,"height":309,"caption":"Unimedia Technology"},"image":{"@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.linkedin.com\/company\/unimedia-technology\/","https:\/\/x.com\/UnimediaCTO","https:\/\/www.instagram.com\/unimedia.technology\/"]},{"@type":"Person","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"ca","@id":"https:\/\/www.unimedia.tech\/ca\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5901fd1c4628e2b48ffd4e47324e8fe0751b39e556a167f078471d4c4bec0f6f?s=96&d=mm&r=g","caption":"Unimedia"}}]}},"_links":{"self":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/comments?post=7182"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/posts\/7182\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media\/6705"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/media?parent=7182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/categories?post=7182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/ca\/wp-json\/wp\/v2\/tags?post=7182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}