{"id":32829,"date":"2024-11-01T09:11:50","date_gmt":"2024-11-01T09:11:50","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32829"},"modified":"2024-11-01T11:21:49","modified_gmt":"2024-11-01T11:21:49","slug":"tutorial-react-to-do-app-example-deleting-tasks","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32829\/","title":{"rendered":"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks"},"content":{"rendered":"<article>\n<header>\n<p>In this course, we will create a simple To Do app using React. We will focus particularly on the feature to delete tasks. The To Do app is an excellent example that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The topics we will learn during the development process include the basic structure of React, component management, state management, event handling, and some basic CSS styling.<\/p>\n<\/header>\n<section>\n<h2>1. What is React?<\/h2>\n<p>React is a UI library developed by Facebook, used for creating user interfaces. React has a component-based structure that enhances reusability and utilizes a virtual DOM to improve performance. Because of these features, many developers use React to develop various web applications.<\/p>\n<\/section>\n<section>\n<h2>2. Overview of the To Do App<\/h2>\n<p>The To Do app is a simple application that allows users to manage a list of tasks. Users can add new tasks and delete tasks that have already been registered. Through this application, you will understand the basic state management of React and the data flow between components.<\/p>\n<\/section>\n<section>\n<h2>3. Setting Up the Development Environment<\/h2>\n<p>You need to set up the environment required for developing the To Do app. Follow the steps below:<\/p>\n<ol>\n<li><strong>Install Node.js<\/strong>: Node.js is a JavaScript environment required to run React applications.<\/li>\n<li><strong>Use create-react-app<\/strong>: Enter the following command in the command line to create a new React project.<\/li>\n<\/ol>\n<pre><code>npx create-react-app todo-app<\/code><\/pre>\n<p>Once this command is completed, a folder named &#8220;todo-app&#8221; will be created. You can move into this folder and start the project.<\/p>\n<pre><code>cd todo-app<\/code><\/pre>\n<\/section>\n<section>\n<h2>4. Creating Basic Components<\/h2>\n<p>Now let&#8217;s create some basic components. The To Do app consists of at least the following components:<\/p>\n<ul>\n<li><strong>App<\/strong>: The main component that contains all other components.<\/li>\n<li><strong>TodoList<\/strong>: The component that displays the list of tasks.<\/li>\n<li><strong>TodoItem<\/strong>: The component that represents an individual task item.<\/li>\n<li><strong>AddTodo<\/strong>: The component that adds a new task.<\/li>\n<\/ul>\n<p>These components reflect the characteristics of React. Below is how to create each component.<\/p>\n<\/section>\n<section>\n<h3>4.1 App Component<\/h3>\n<pre><code>\nimport React, { useState } from 'react';\nimport TodoList from '.\/TodoList';\nimport AddTodo from '.\/AddTodo';\n\nconst App = () => {\n  const [todos, setTodos] = useState([]);\n\n  const addTodo = (todo) => {\n    setTodos([...todos, todo]);\n  };\n\n  const deleteTodo = (index) => {\n    const newTodos = todos.filter((_, i) => i !== index);\n    setTodos(newTodos);\n  };\n\n  return (\n    <div>\n      <h1>My To Do App<\/h1>\n      <AddTodo addTodo={addTodo}><\/AddTodo>\n      <TodoList deleteTodo={deleteTodo} todos={todos}><\/TodoList>\n    <\/div>\n  );\n};\n\nexport default App;\n        <\/code><\/pre>\n<p>In the above code, we declare a state variable called todos using the useState hook and set its initial value to an empty array. The addTodo function is used to add a new task, and the deleteTodo function is used to delete a task at a specific index.<\/p>\n<\/section>\n<section>\n<h3>4.2 AddTodo Component<\/h3>\n<pre><code>\nimport React, { useState } from 'react';\n\nconst AddTodo = ({ addTodo }) => {\n  const [value, setValue] = useState('');\n\n  const handleSubmit = (e) => {\n    e.preventDefault();\n    if (!value) return;\n    addTodo(value);\n    setValue('');\n  };\n\n  return (\n    <form onSubmit={handleSubmit}>\n      <input type=\"text\" onChange={(e) => setValue(e.target.value)} \n        placeholder=\"Add a new task\" \n      \/>\n      <button type=\"submit\">Add<\/button>\n    <\/form>\n  );\n};\n\nexport default AddTodo;\n        <\/code><\/pre>\n<p>The above AddTodo component manages the value entered by the user as state and calls the addTodo function on form submission to add a new task.<\/p>\n<\/section>\n<section>\n<h3>4.3 TodoList Component<\/h3>\n<pre><code>\nimport React from 'react';\nimport TodoItem from '.\/TodoItem';\n\nconst TodoList = ({ todos, deleteTodo }) => {\n  return (\n    <ul>\n      {todos.map((todo, index) => (\n        <TodoItem deleteTodo={deleteTodo} index={index} key={index} todo={todo}><\/TodoItem>\n      ))}\n    <\/ul>\n  );\n};\n\nexport default TodoList;\n        <\/code><\/pre>\n<p>The TodoList component receives the todos array and renders the TodoItem component for each todo item. The deleteTodo function is also passed to enable the delete functionality for each item.<\/p>\n<\/section>\n<section>\n<h3>4.4 TodoItem Component<\/h3>\n<pre><code>\nimport React from 'react';\n\nconst TodoItem = ({ todo, index, deleteTodo }) => {\n  return (\n    <li>\n      {todo}\n      <button onClick={() => deleteTodo(index)}>Delete<\/button>\n    <\/li>\n  );\n};\n\nexport default TodoItem;\n        <\/code><\/pre>\n<p>The TodoItem component displays each task item and calls deleteTodo when the delete button is clicked to perform the deletion of that task.<\/p>\n<\/section>\n<section>\n<h2>5. Adding Styling<\/h2>\n<p>The basic functionality has been completed. Now let&#8217;s add CSS styles to make our To Do app look better. You can add styles like the following.<\/p>\n<pre><code>\n\/* App.css *\/\nbody {\n  font-family: Arial, sans-serif;\n}\n\nh1 {\n  text-align: center;\n}\n\nform {\n  display: flex;\n  justify-content: center;\n  margin-bottom: 20px;\n}\n\ninput {\n  padding: 10px;\n  margin-right: 5px;\n}\n\nbutton {\n  padding: 10px;\n}\n\nul {\n  list-style-type: none;\n  padding: 0;\n}\n\nli {\n  display: flex;\n  justify-content: space-between;\n  margin: 10px 0;\n  padding: 10px;\n  border: 1px solid #ccc;\n  border-radius: 5px;\n}\n        <\/code><\/pre>\n<p>The above CSS code defines the basic style for the App. It uses Flexbox to help align the form and applies styles to each task item.<\/p>\n<\/section>\n<section>\n<h2>6. Final Review and Conclusion<\/h2>\n<p>Through this course, you have created a simple To Do app and learned the basic concepts of React. You have implemented basic functionalities for adding and deleting tasks, and I hope this has helped you understand how each component interacts with one another. Build upon this app by adding more features and deepen your knowledge of React.<\/p>\n<\/section>\n<footer>\n<h2>7. Additional Learning Resources<\/h2>\n<ul>\n<li><a href=\"https:\/\/reactjs.org\/docs\/getting-started.html\">Official React Documentation<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/JavaScript\">JavaScript MDN Documentation<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\">CSS Tricks Website<\/a><\/li>\n<\/ul>\n<p>That concludes the course on building a To Do app using React. We will bring more informative content in the next course!<\/p>\n<\/footer>\n<\/article>\n","protected":false},"excerpt":{"rendered":"<p>In this course, we will create a simple To Do app using React. We will focus particularly on the feature to delete tasks. The To Do app is an excellent example that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The topics we will learn during the development process include the basic structure of React, &hellip; <a href=\"https:\/\/atmokpo.com\/w\/32829\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[123],"tags":[],"class_list":["post-32829","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8<\/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:\/\/atmokpo.com\/w\/32829\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In this course, we will create a simple To Do app using React. We will focus particularly on the feature to delete tasks. The To Do app is an excellent example that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The topics we will learn during the development process include the basic structure of React, &hellip; \ub354 \ubcf4\uae30 &quot;Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks&quot;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32829\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:11:50+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:49+00:00\" \/>\n<meta name=\"author\" content=\"root\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:site\" content=\"@bebubo4\" \/>\n<meta name=\"twitter:label1\" content=\"\uae00\uc4f4\uc774\" \/>\n\t<meta name=\"twitter:data1\" content=\"root\" \/>\n\t<meta name=\"twitter:label2\" content=\"\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04\" \/>\n\t<meta name=\"twitter:data2\" content=\"4\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks\",\"datePublished\":\"2024-11-01T09:11:50+00:00\",\"dateModified\":\"2024-11-01T11:21:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/\"},\"wordCount\":605,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32829\/\",\"name\":\"Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:11:50+00:00\",\"dateModified\":\"2024-11-01T11:21:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32829\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32829\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/atmokpo.com\/w\/#website\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/atmokpo.com\/w\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"ko-KR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\",\"name\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"url\":\"https:\/\/atmokpo.com\/w\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"contentUrl\":\"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png\",\"width\":400,\"height\":400,\"caption\":\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\"},\"image\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/bebubo4\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\",\"name\":\"root\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"ko-KR\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g\",\"caption\":\"root\"},\"sameAs\":[\"http:\/\/atmokpo.com\/w\"],\"url\":\"https:\/\/atmokpo.com\/w\/author\/root\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","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:\/\/atmokpo.com\/w\/32829\/","og_locale":"ko_KR","og_type":"article","og_title":"Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In this course, we will create a simple To Do app using React. We will focus particularly on the feature to delete tasks. The To Do app is an excellent example that demonstrates basic CRUD (Create, Read, Update, Delete) operations. The topics we will learn during the development process include the basic structure of React, &hellip; \ub354 \ubcf4\uae30 \"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks\"","og_url":"https:\/\/atmokpo.com\/w\/32829\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:11:50+00:00","article_modified_time":"2024-11-01T11:21:49+00:00","author":"root","twitter_card":"summary_large_image","twitter_creator":"@bebubo4","twitter_site":"@bebubo4","twitter_misc":{"\uae00\uc4f4\uc774":"root","\uc608\uc0c1 \ub418\ub294 \ud310\ub3c5 \uc2dc\uac04":"4\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32829\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32829\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks","datePublished":"2024-11-01T09:11:50+00:00","dateModified":"2024-11-01T11:21:49+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32829\/"},"wordCount":605,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32829\/","url":"https:\/\/atmokpo.com\/w\/32829\/","name":"Tutorial: React - To Do App Example - Deleting Tasks - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:11:50+00:00","dateModified":"2024-11-01T11:21:49+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32829\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32829\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32829\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"Tutorial: React &#8211; To Do App Example &#8211; Deleting Tasks"}]},{"@type":"WebSite","@id":"https:\/\/atmokpo.com\/w\/#website","url":"https:\/\/atmokpo.com\/w\/","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","description":"","publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/atmokpo.com\/w\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"ko-KR"},{"@type":"Organization","@id":"https:\/\/atmokpo.com\/w\/#organization","name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","url":"https:\/\/atmokpo.com\/w\/","logo":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/","url":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","contentUrl":"https:\/\/atmokpo.com\/w\/wp-content\/uploads\/2024\/11\/logo.png","width":400,"height":400,"caption":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8"},"image":{"@id":"https:\/\/atmokpo.com\/w\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/bebubo4"]},{"@type":"Person","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7","name":"root","image":{"@type":"ImageObject","inLanguage":"ko-KR","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/708197b41fc6435a7ce22d951b25d4a47e9e904270cb1f04682d4f025066f80c?s=96&d=mm&r=g","caption":"root"},"sameAs":["http:\/\/atmokpo.com\/w"],"url":"https:\/\/atmokpo.com\/w\/author\/root\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32829","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/comments?post=32829"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32829\/revisions"}],"predecessor-version":[{"id":32830,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32829\/revisions\/32830"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32829"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}