{"id":4149,"date":"2024-12-24T13:12:17","date_gmt":"2024-12-24T13:12:17","guid":{"rendered":"https:\/\/www.kaashivinfotech.com\/blog\/?p=4149"},"modified":"2025-07-18T06:02:54","modified_gmt":"2025-07-18T06:02:54","slug":"reactjs-crafting-a-todo-list-application-in-7-simple-steps-code-included","status":"publish","type":"post","link":"https:\/\/www.kaashivinfotech.com\/blog\/reactjs-crafting-a-todo-list-application-in-7-simple-steps-code-included\/","title":{"rendered":"ReactJS: Crafting a ToDo List Application in 7 Simple Steps (Code Included)"},"content":{"rendered":"<p data-start=\"478\" data-end=\"870\">Creating a <a href=\"https:\/\/www.wikitechy.com\/tutorials\/react\/\" target=\"_blank\" rel=\"noopener\"><strong data-start=\"489\" data-end=\"513\">React Todo Component <\/strong><\/a>with <strong data-start=\"489\" data-end=\"513\">React Todo Component List <\/strong>is one of the best beginner-friendly projects to understand the power of React. In this tutorial, you&#8217;ll build a complete <strong data-start=\"636\" data-end=\"658\">React JS Todo List<\/strong> application \u2014 functional, stylish, and enhanced with features like local storage and task editing. This is a great way to master concepts like state management, components, event handling, and local persistence.<\/p>\n<figure id=\"attachment_8493\" aria-describedby=\"caption-attachment-8493\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-8493\" src=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component.png\" alt=\"react todo component\" width=\"1024\" height=\"1024\" srcset=\"https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component.png 1024w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-300x300.png 300w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-150x150.png 150w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-768x768.png 768w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-72x72.png 72w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-144x144.png 144w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-332x332.png 332w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-664x664.png 664w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-688x688.png 688w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-24x24.png 24w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-48x48.png 48w, https:\/\/www.kaashivinfotech.com\/blog\/wp-content\/uploads\/2024\/12\/React-TODO-Component-96x96.png 96w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><figcaption id=\"caption-attachment-8493\" class=\"wp-caption-text\">React TODO Component<\/figcaption><\/figure>\n<p data-start=\"872\" data-end=\"1039\">Whether you&#8217;re just starting out or brushing up your skills, this <strong data-start=\"938\" data-end=\"967\">React Todo List Component<\/strong> tutorial will walk you through every step of building a real-world app.<\/p>\n<div class=\"block__bord\">\n<ul>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/react-js-training-in-chennai\/\">React Course In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/mern-full-stack-developer-course-in-chennai\/\">MERN Stack Developer Course In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/courses\/\">Full Stack Developer Course In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/front-end-developer-course\/\">Front End Development Course In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/internship-in-chennai\/\">Internships In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/internship-for-cse-students\/\">Internship For CSE Students In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/internship-for-it-students\/\">Internship For IT Students In Chennai<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/top-50-mini-project-ideas-for-college-students\/\">Top 50 Mini Project Ideas For College Students<\/a><\/li>\n<li><a href=\"https:\/\/www.kaashivinfotech.com\/blog\/15-unique-web-development-project-ideas-for-beginners\/\">15 Unique Web Development Project Ideas For Beginners<\/a><\/li>\n<\/ul>\n<\/div>\n<h4>Installing Node.js and npm<\/h4>\n<p><strong>Download and Install Node.js<\/strong>: Head over to the <a href=\"https:\/\/nodejs.org\/en\/download\/package-manager\" target=\"_blank\" rel=\"noopener\">official Node.js website<\/a> to download the installer. Opt for the LTS (Long Term Support) version for better reliability and ongoing updates.<br \/>\n<strong>Install npm<\/strong>: Alongside <a href=\"https:\/\/youtu.be\/w1RAI6bzPuQ?feature=shared\" target=\"_blank\" rel=\"noopener\">Node.js<\/a>, the installation automatically includes npm (Node Package Manager), an essential tool for handling JavaScript libraries and dependencies.<\/p>\n<h4>Creating a New React Application<\/h4>\n<p><strong>Install Create React App<\/strong>: Open your terminal and use the command <code class=\"\" data-line=\"\">npm install -g create-react-app<\/code> to globally install this utility for scaffolding React projects.<br \/>\n<strong>Generate Your Application<\/strong>: Run the command <code class=\"\" data-line=\"\">npx create-react-app my-app<\/code> to set up a new directory named <code class=\"\" data-line=\"\">my-app<\/code>, preconfigured with everything you need to start coding.<\/p>\n<h4>Understanding the Application Structure<\/h4>\n<p><strong>Review the Setup<\/strong>: Enter your project folder and examine the default structure created by Create React App. The key directories include <code class=\"\" data-line=\"\">public<\/code>, which stores static assets, <code class=\"\" data-line=\"\">src<\/code>, which holds the app&#8217;s source code, and <code class=\"\" data-line=\"\">node_modules<\/code>, where the app\u2019s dependencies are located.<br \/>\n<strong>Important Files<\/strong>: Inside the <code class=\"\" data-line=\"\">src<\/code> folder, you&#8217;ll find <code class=\"\" data-line=\"\">App.js<\/code>, the main component of your application, and <code class=\"\" data-line=\"\">index.js<\/code>, which mounts the root component to the DOM.<\/p>\n<h4>Running the Development Server<\/h4>\n<p><strong>Start the Server<\/strong>: Within your project folder, use the <code class=\"\" data-line=\"\">npm start<\/code> command to initiate the development server. This will build the application and open it in your default web browser.<br \/>\n<strong>Live Updates<\/strong>: Any edits made to your source files will instantly update in the browser, courtesy of React&#8217;s hot reloading feature.<\/p>\n<p>This streamlined setup process, powered by Create React App, removes the hassle of manual configuration and gives you a ready-to-use project structure, so you can dive straight into building your React application.<\/p>\n<div>\n<hr \/>\n<\/div>\n<p data-start=\"1537\" data-end=\"1629\">To build your <a href=\"https:\/\/www.wikitechy.com\/tutorials\/react\/components-in-reactjs\" target=\"_blank\" rel=\"noopener\"><strong data-start=\"1551\" data-end=\"1575\">React Todo Component<\/strong><\/a>, you need a working environment with Node.js and npm.<\/p>\n<h4 data-start=\"1631\" data-end=\"1650\">Prerequisites:<\/h4>\n<ul data-start=\"1651\" data-end=\"1741\">\n<li data-start=\"1651\" data-end=\"1686\">\n<p data-start=\"1653\" data-end=\"1686\">Basic JavaScript &amp; HTML knowledge<\/p>\n<\/li>\n<li data-start=\"1687\" data-end=\"1714\">\n<p data-start=\"1689\" data-end=\"1714\">Node.js and npm installed<\/p>\n<\/li>\n<li data-start=\"1715\" data-end=\"1741\">\n<p data-start=\"1717\" data-end=\"1741\">Code editor like VS Code<\/p>\n<\/li>\n<\/ul>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 1: Setting Up Your React Todo Component<\/h2>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">npx create-react-app todo-app<br\/>cd todo-app<br\/>npm start<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 2: Creating the ToDo Component Structure<\/h2>\n<p>Let\u2019s create the core of our <strong data-start=\"2017\" data-end=\"2039\">React JS Todo List<\/strong>. Inside the <code class=\"\" data-line=\"\">src<\/code> folder, create a new file <code class=\"\" data-line=\"\">ToDo.js<\/code>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">import React from &#039;react&#039;;<br\/><br\/>const ToDo = () =&gt; {<br\/>    return (<br\/>        &lt;div className=&quot;todo-container&quot;&gt;<br\/>            &lt;h1&gt;ToDo List&lt;\/h1&gt;<br\/>        &lt;\/div&gt;<br\/>    );<br\/>};<br\/>export default ToDo;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>&nbsp;<\/p>\n<p>Now import it into <code class=\"\" data-line=\"\">App.js<\/code>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">import React from &#039;react&#039;;<br\/>import ToDo from &#039;.\/ToDo&#039;;<br\/><br\/>const App = () =&gt; (<br\/>    &lt;div&gt;<br\/>        &lt;ToDo \/&gt;<br\/>    &lt;\/div&gt;<br\/>);<br\/>export default App;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 3: Adding State for the React Todo List Component<\/h2>\n<p>We&#8217;ll now manage tasks using <code class=\"\" data-line=\"\">useState:<\/code><\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">import React, { useState } from &#039;react&#039;;<br\/><br\/>const ToDo = () =&gt; {<br\/>    const [tasks, setTasks] = useState([]);<br\/>    const [task, setTask] = useState(&quot;&quot;);<br\/>    const addTask = () =&gt; {<br\/>        if (task) {<br\/>            setTasks([...tasks, task]);<br\/>            setTask(&quot;&quot;);<br\/>        }<br\/>    };<br\/>    return (<br\/>        &lt;div className=&quot;todo-container&quot;&gt;<br\/>            &lt;h1&gt;React JS ToDo List&lt;\/h1&gt;<br\/>            &lt;input value={task} onChange={(e) =&gt; setTask(e.target.value)} \/&gt;<br\/>            &lt;button onClick={addTask}&gt;Add Task&lt;\/button&gt;<br\/>            &lt;ul&gt;<br\/>                {tasks.map((t, i) =&gt; &lt;li key={i}&gt;{t}&lt;\/li&gt;)}<br\/>            &lt;\/ul&gt;<br\/>        &lt;\/div&gt;<br\/>    );<br\/>};<br\/>export default ToDo;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 4: Styling Your React Todo Component<\/h2>\n<p data-start=\"3295\" data-end=\"3320\">Create a <code class=\"\" data-line=\"\">ToDo.css<\/code> file:<\/p>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\"><\/div>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-css code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-css code-embed-code\">.todo-container {<br\/>    max-width: 500px;<br\/>    margin: 50px auto;<br\/>    text-align: center;<br\/>}<br\/>input {<br\/>    width: 70%;<br\/>    padding: 10px;<br\/>    margin-right: 10px;<br\/>}<br\/>button {<br\/>    padding: 10px 20px;<br\/>    background-color: #28a745;<br\/>    color: white;<br\/>    border: none;<br\/>}<br\/>ul {<br\/>    list-style-type: none;<br\/>    padding: 0;<br\/>}<br\/>li {<br\/>    background: #f8f9fa;<br\/>    margin: 5px 0;<br\/>    padding: 10px;<br\/>}<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Then import it in <code class=\"\" data-line=\"\">ToDo.js<\/code>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">import &#039;.\/ToDo.css&#039;;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 5: Deleting Tasks in React JS Todo List<\/h2>\n<p>Now allow task deletion in the <strong data-start=\"3857\" data-end=\"3886\">React Todo List Component<\/strong>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">const deleteTask = (index) =&gt; {<br\/>    setTasks(tasks.filter((_, i) =&gt; i !== index));<br\/>};<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>&nbsp;<\/p>\n<p>Modify the list rendering:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">&lt;li key={index}&gt;<br\/>    {t} &lt;button onClick={() =&gt; deleteTask(index)}&gt;Delete&lt;\/button&gt;<br\/>&lt;\/li&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 6: Save Tasks Using Local Storage<\/h2>\n<p>Add persistence to your <strong data-start=\"4191\" data-end=\"4213\">React JS Todo List<\/strong>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">useEffect(() =&gt; {<br\/>    localStorage.setItem(&quot;tasks&quot;, JSON.stringify(tasks));<br\/>}, [tasks]);<br\/><br\/>const [tasks, setTasks] = useState(() =&gt; {<br\/>    const saved = localStorage.getItem(&quot;tasks&quot;);<br\/>    return saved ? JSON.parse(saved) : [];<br\/>});<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>This allows your <strong data-start=\"4474\" data-end=\"4498\">React Todo Component<\/strong> to remember tasks after reloads.<\/p>\n<div>\n<hr \/>\n<\/div>\n<h2>Step 7: Editing Tasks in React Todo Component<\/h2>\n<p>Add task editing support for better UX:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">const [editingIndex, setEditingIndex] = useState(null);<br\/><br\/>const editTask = (index) =&gt; {<br\/>    setTask(tasks[index]);<br\/>    setEditingIndex(index);<br\/>};<br\/><br\/>const addTask = () =&gt; {<br\/>    if (task) {<br\/>        if (editingIndex !== null) {<br\/>            const updated = [...tasks];<br\/>            updated[editingIndex] = task;<br\/>            setTasks(updated);<br\/>            setEditingIndex(null);<br\/>        } else {<br\/>            setTasks([...tasks, task]);<br\/>        }<br\/>        setTask(&quot;&quot;);<br\/>    }<br\/>};<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<p>Inside your <code class=\"\" data-line=\"\">ul<\/code>:<\/p>\n<div class=\"code-embed-wrapper\"> <pre class=\"language-javascript code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-javascript code-embed-code\">&lt;li key={index}&gt;<br\/>    {t}<br\/>    &lt;button onClick={() =&gt; editTask(index)}&gt;Edit&lt;\/button&gt;<br\/>    &lt;button onClick={() =&gt; deleteTask(index)}&gt;Delete&lt;\/button&gt;<br\/>&lt;\/li&gt;<\/code><\/pre> <div class=\"code-embed-infos\"> <\/div> <\/div>\n<div>\n<hr \/>\n<\/div>\n<h2>Conclusion<\/h2>\n<div class=\"flex-1 overflow-hidden @container\/thread\">\n<div class=\"h-full\">\n<div class=\"react-scroll-to-bottom--css-iqrxf-79elbk h-full\">\n<div class=\"react-scroll-to-bottom--css-iqrxf-1n7m0yu\">\n<div class=\"flex flex-col text-sm md:pb-9\">\n<article class=\"w-full scroll-mb-[var(--thread-trailing-height,150px)] text-token-text-primary focus-visible:outline-2 focus-visible:outline-offset-[-4px]\" dir=\"auto\" data-testid=\"conversation-turn-15\" data-scroll-anchor=\"true\">\n<div class=\"m-auto text-base py-[18px] px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5\">\n<div class=\"mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl lg:max-w-[40rem] xl:max-w-[48rem]\">\n<div class=\"group\/conversation-turn relative flex w-full min-w-0 flex-col agent-turn\">\n<div class=\"flex-col gap-1 md:gap-3\">\n<div class=\"flex max-w-full flex-col flex-grow\">\n<div class=\"min-h-8 text-message flex w-full flex-col items-end gap-2 whitespace-normal break-words text-start [.text-message+&amp;]:mt-5\" dir=\"auto\" data-message-author-role=\"assistant\" data-message-id=\"a597ffe7-7be7-44df-88a2-1d39a7ab31f1\" data-message-model-slug=\"gpt-4o\">\n<div class=\"flex w-full flex-col gap-1 empty:hidden first:pt-[3px]\">\n<div class=\"markdown prose w-full break-words dark:prose-invert dark\">\n<p data-start=\"5318\" data-end=\"5450\">You&#8217;ve just built a complete <strong data-start=\"5347\" data-end=\"5371\">React Todo Component<\/strong> and created a working <strong data-start=\"5394\" data-end=\"5416\">React JS Todo List<\/strong> app with essential features like:<\/p>\n<ul data-start=\"5452\" data-end=\"5595\">\n<li data-start=\"5452\" data-end=\"5475\">\n<p data-start=\"5454\" data-end=\"5475\">Reusable Components<\/p>\n<\/li>\n<li data-start=\"5476\" data-end=\"5512\">\n<p data-start=\"5478\" data-end=\"5512\">State Management with <code class=\"\" data-line=\"\">useState<\/code><\/p>\n<\/li>\n<li data-start=\"5513\" data-end=\"5531\">\n<p data-start=\"5515\" data-end=\"5531\">Event Handling<\/p>\n<\/li>\n<li data-start=\"5532\" data-end=\"5561\">\n<p data-start=\"5534\" data-end=\"5561\">Local Storage Integration<\/p>\n<\/li>\n<li data-start=\"5562\" data-end=\"5595\">\n<p data-start=\"5564\" data-end=\"5595\">Edit and Delete functionality<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"5597\" data-end=\"5684\">This <strong data-start=\"5602\" data-end=\"5631\">React Todo List Component<\/strong> is a great foundation for further enhancements like:<\/p>\n<ul data-start=\"5686\" data-end=\"5775\">\n<li data-start=\"5686\" data-end=\"5711\">\n<p data-start=\"5688\" data-end=\"5711\">\u2705 Task prioritization<\/p>\n<\/li>\n<li data-start=\"5712\" data-end=\"5745\">\n<p data-start=\"5714\" data-end=\"5745\">\u2705 Drag-and-drop functionality<\/p>\n<\/li>\n<li data-start=\"5746\" data-end=\"5775\">\n<p data-start=\"5748\" data-end=\"5775\">\u2705 Backend API integration<\/p>\n<\/li>\n<\/ul>\n<p data-start=\"5777\" data-end=\"5979\">If you&#8217;re serious about becoming a front-end developer, check out <a class=\"\" href=\"https:\/\/www.kaashivinfotech.com\/\" target=\"_new\" rel=\"noopener\" data-start=\"5843\" data-end=\"5895\">Kaashiv Infotech<\/a> for in-depth training in <strong data-start=\"5921\" data-end=\"5930\">React<\/strong>, <strong data-start=\"5932\" data-end=\"5946\">MERN Stack<\/strong>, and <strong data-start=\"5952\" data-end=\"5978\">Full Stack Development<\/strong>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/article>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Creating a React Todo Component with React Todo Component List is one of the best beginner-friendly projects to&hellip;","protected":false},"author":3,"featured_media":4155,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_page_load_nextpost":"","footnotes":""},"categories":[2084],"tags":[7806,7802,7804,7799,7807,7803,7798,7800,7805,7801],"class_list":["post-4149","post","type-post","status-publish","format-standard","has-post-thumbnail","category-projects","tag-beginner-react-project","tag-react-functional-component","tag-react-hooks-todo-list","tag-react-js-todo-list","tag-react-task-list","tag-react-todo-app-example","tag-react-todo-component","tag-react-todo-list-component","tag-simple-react-todo-list","tag-todo-list-in-react","cs-entry"],"_links":{"self":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/4149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/comments?post=4149"}],"version-history":[{"count":9,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/4149\/revisions"}],"predecessor-version":[{"id":8496,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/posts\/4149\/revisions\/8496"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media\/4155"}],"wp:attachment":[{"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/media?parent=4149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/categories?post=4149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kaashivinfotech.com\/blog\/wp-json\/wp\/v2\/tags?post=4149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}