{"id":7322,"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":"2023-12-18T13:08:18","modified_gmt":"2023-12-18T12:08:18","slug":"build-a-simple-crud-app-using-react-and-node","status":"publish","type":"post","link":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/","title":{"rendered":"Build a Simple CRUD App using React and Node"},"content":{"rendered":"\n<p>In this article, we will learn how to build a simple CRUD app with React.js, Node.js, and TailwindCSS.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What Is a CRUD App?<\/h2>\n\n\n\n<p>A CRUD App performs four basic app operations, namely <strong>C<\/strong>reate, <strong>R<\/strong>ead, <strong>U<\/strong>pdate and <strong>D<\/strong>elete. Many apps you interact with daily at the core <a href=\"https:\/\/www.unimedia.tech\/de\/bespoke-software-development\/\">perform <\/a>these basic tasks. Take Instagram, for example. You can <strong>Create <\/strong>profiles and posts stored in the database, <strong>Read <\/strong>your and other users\u2019 profiles and posts. These details are retrieved from the stored created data. You can also <strong>Update and Delete<\/strong> your posts, profile pictures, etc.&nbsp;<\/p>\n\n\n\n<p>You may also be interested in: <a href=\"https:\/\/www.unimedia.tech\/2021\/10\/09\/paypal-checkout-integration-with-react\/\">&#8220;PayPal Checkout Integration with React&#8221;<\/a><\/p>\n\n\n\n<p>Apart from requiring a Front-End and Server, these functions require a database like MongoDB to store, retrieve, update and delete user-submitted data. As you can imagine, that takes a lot of effort to set up, which is why I was pleased when I discovered a <a href=\"https:\/\/www.mecallapi.com\/#api\">simple fake REST API <\/a>we can use to perform basic CRUD tasks for our app.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Goal<\/h2>\n\n\n\n<p>Our goal today is to learn the following tasks:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Install basic packages using Node.js<\/li><li>Create an excellent User interface using React and Tailwind CSS<\/li><li>Perform basic CRUD operations with our app.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Prerequisites<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Knowledge of React js and React Hooks.<\/li><li>React 16.8 or later<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Create A React App<\/h2>\n\n\n\n<p>Let\u2019s get started by using the React CRA boilerplate to create our React App. Since we will be using Tailwind CSS, we will follow the <a href=\"https:\/\/tailwindcss.com\/docs\/guides\/create-react-app\">Official Documentation steps<\/a> to make installation seamless.<\/p>\n\n\n\n<p>Start with,<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npx create-react-app my-react-crudapp\ncd my-react-crudapp\n<\/code><\/pre>\n\n\n\n<p>Open the folder in your favorite IDE and complete the rest of the steps.&nbsp;Next, we need to install <a href=\"https:\/\/v5.reactrouter.com\/web\/guides\/quick-start\">React Router DOM<\/a> &#8211; a routing functionality that helps us navigate our app.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install react-router-dom<\/code><\/pre>\n\n\n\n<p>Run, <em>npm run start,<\/em> and you should get the popular Welcome React Page as shown below.&nbsp;<\/p>\n\n\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=\"React App\"\/><\/figure>\n\n\n\n<p>First, we will be creating our Navigation component. To do this, we will use components from the Tailwind documentation page as much as possible.<br><br>Create a <em>Naviagte.js <\/em>component in your <em>src folder.<\/em><\/p>\n\n\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\n\n<p>Next, we will call the <em>react-router-dom<\/em> and our <em>Navigate.js <\/em>in the <em>main App.js <\/em>Component.&nbsp;<\/p>\n\n\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\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=\"React CRUD App\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">CRUD OPERATIONS<\/h2>\n\n\n\n<p>It\u2019s time to start building our CRUD functionalities. Here are the API calls we will be making to achieve this.&nbsp;<\/p>\n\n\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=\"React CRUD App API\"\/><\/figure>\n\n\n\n<p>First, let create a UsersList.js that will help us <strong>read <\/strong>the existing users already provided by the API for testing. Again, we will be <a href=\"https:\/\/tailwindui.com\/components\/application-ui\/lists\/tables\">an official UI component to build this<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">UsersList.js<\/h3>\n\n\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\n\n<p>In the code block above, we used <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">React useEffect Hook<\/a> to fetch the list of users once upon load. After that, we stored the received data using a useState Hook and mapped it to the table components provided by Tailwind CSS. In subsequent sections, we will be using the Edit and Delete and Create Button we created.<\/p>\n\n\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=\"React CRUD App\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">CreateUser.js<\/h3>\n\n\n\n<p>Next, we will create <em>CreateUser.js<\/em> that will allow us to create a user.&nbsp;<\/p>\n\n\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\n\n<p>In the code block above, we created a form and appended its input values to corresponding state variables using the UseState Hook. We then sent these values to the CRUD REST API to create a user.&nbsp;<\/p>\n\n\n\n<p>We will also import and use the newly created Component into our <em>App.js:<\/em><\/p>\n\n\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\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=\"Create page\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">UpdateUser.js<\/h3>\n\n\n\n<p>The next step is to create a <em>UpdateUser.js <\/em>component that will allow us successfully edit the created users.<\/p>\n\n\n\n<p>First, we will create a updateUser function in <em>UsersLists.js<\/em><\/p>\n\n\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\n\n<p class=\"has-small-font-size\">and pass it to the edit button.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>onClick={() =&gt; UpdateUser(user.id)}<\/code><\/pre>\n\n\n\n<p>Now, we can create our <em>UpdateUser.js<\/em><\/p>\n\n\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\n\n<p>In the code snippet above, we retrieved and displayed the current user ID of the user we would like to edit its details. Next, we updated the values using the form inputs made by the user.<\/p>\n\n\n\n<p>We will also import and use the newly created Component into our <em>App.js:<\/em><\/p>\n\n\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\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=\"Update Page\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">DELETE<\/h3>\n\n\n\n<p>Lastly, we will be activating the delete button. This doesn\u2019t require a new component instead, we will be updating our UsersList.js Component.&nbsp;<\/p>\n\n\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\n\n<h2 class=\"wp-block-heading\">Demo<\/h2>\n\n\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\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>That\u2019s all for now. In conclusion, we learn how to use Node.js to install essential packages for our React. Next, we used React Hooks and React Router to create and navigate our components. Lastly, we made basic CRUD interactions to create, read, update and delete user details.&nbsp;<\/p>\n\n\n\n<p>If you\u2019re interested in further developing your React and Node js skills, here are two tutorials of ours that should help. A <a href=\"https:\/\/www.unimedia.tech\/2021\/09\/12\/a-quick-introduction-to-react-hooks\/\">Quick Introduction to React Hooks<\/a> and <a href=\"https:\/\/www.unimedia.tech\/2021\/08\/17\/stripe-checkout-integration-with-react\/\">Stripe Checkout Integration with React<\/a>.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Unimedia Technology<\/h2>\n\n\n\n<p>Here at&nbsp;<a href=\"https:\/\/www.unimedia.tech\/de\/\">Unimedia Technology<\/a>&nbsp;we have a team of<strong>&nbsp;<a href=\"https:\/\/www.unimedia.tech\/de\/engagierte-entwicklungsteams\/\">Web Developers<\/a><\/strong>&nbsp;that can help you develop your most complex React Applications.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this article, we will learn how to build a simple CRUD app with React.js, Node.js, and TailwindCSS.&nbsp; What Is a CRUD App? A CRUD App performs four basic app operations, namely Create, Read, Update and Delete. Many apps you interact with daily at the core perform these basic tasks. Take Instagram, for example. You [&hellip;]<\/p>\n","protected":false},"author":6,"featured_media":6706,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[214,219],"tags":[],"class_list":["post-7322","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-technical-guides-de","category-technical-guides-de"],"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>Build a Simple CRUD App using React and 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\/de\/build-a-simple-crud-app-using-react-and-node\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build a Simple CRUD App using React and Node\" \/>\n<meta property=\"og:description\" content=\"In this article, we will learn how to build a simple CRUD app with React.js, Node.js, and TailwindCSS.&nbsp; What Is a CRUD App? A CRUD App performs four basic app operations, namely Create, Read, Update and Delete. Many apps you interact with daily at the core perform these basic tasks. Take Instagram, for example. You [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.unimedia.tech\/de\/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=\"2023-12-18T12:08:18+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=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Unimedia\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"13\u00a0Minuten\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build a Simple CRUD App using React and 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\/de\/build-a-simple-crud-app-using-react-and-node\/","og_locale":"de_DE","og_type":"article","og_title":"Build a Simple CRUD App using React and Node","og_description":"In this article, we will learn how to build a simple CRUD app with React.js, Node.js, and TailwindCSS.&nbsp; What Is a CRUD App? A CRUD App performs four basic app operations, namely Create, Read, Update and Delete. Many apps you interact with daily at the core perform these basic tasks. Take Instagram, for example. You [&hellip;]","og_url":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:08:18+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":{"Verfasst von":"Unimedia","Gesch\u00e4tzte Lesezeit":"13\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/#article","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/"},"author":{"name":"Unimedia","@id":"https:\/\/www.unimedia.tech\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd"},"headline":"Build a Simple CRUD App using React and Node","datePublished":"2021-11-30T05:34:40+00:00","dateModified":"2023-12-18T12:08:18+00:00","mainEntityOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/"},"wordCount":777,"publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"de"},{"@type":"WebPage","@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/","url":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/","name":"Build a Simple CRUD App using React and Node - Unimedia Technology","isPartOf":{"@id":"https:\/\/www.unimedia.tech\/de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/#primaryimage"},"image":{"@id":"https:\/\/www.unimedia.tech\/de\/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":"2023-12-18T12:08:18+00:00","breadcrumb":{"@id":"https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.unimedia.tech\/de\/build-a-simple-crud-app-using-react-and-node\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/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\/de\/build-a-simple-crud-app-using-react-and-node\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.unimedia.tech\/de\/"},{"@type":"ListItem","position":2,"name":"Build a Simple CRUD App using React and Node"}]},{"@type":"WebSite","@id":"https:\/\/www.unimedia.tech\/de\/#website","url":"https:\/\/www.unimedia.tech\/de\/","name":"Unimedia Technology","description":"Your software development partner","publisher":{"@id":"https:\/\/www.unimedia.tech\/de\/#organization"},"alternateName":"Unimedia Tech","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.unimedia.tech\/de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/www.unimedia.tech\/de\/#organization","name":"Unimedia Technology","alternateName":"Unimedia Tech","url":"https:\/\/www.unimedia.tech\/de\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/#\/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\/de\/#\/schema\/person\/3a250aa22526d5c9ff6bc95bb380a5dd","name":"Unimedia","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/www.unimedia.tech\/de\/#\/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\/de\/wp-json\/wp\/v2\/posts\/7322","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/comments?post=7322"}],"version-history":[{"count":0,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/posts\/7322\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media\/6706"}],"wp:attachment":[{"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/media?parent=7322"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/categories?post=7322"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.unimedia.tech\/de\/wp-json\/wp\/v2\/tags?post=7322"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}