{"id":32925,"date":"2024-11-01T09:12:31","date_gmt":"2024-11-01T09:12:31","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32925"},"modified":"2024-11-01T11:21:27","modified_gmt":"2024-11-01T11:21:27","slug":"react-course-diary-app-example-2","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32925\/","title":{"rendered":"React Course: Diary App Example"},"content":{"rendered":"

<\/p>\n

In this course, we will learn in detail how to develop a diary app using React.<\/p>\n

What is React?<\/h2>\n
React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs). React enables reusable UI components through a component-based architecture. It is primarily used in single-page applications (SPAs) and helps manage state and data flow efficiently.<\/p>\n

Overview of the Diary App<\/h2>\n
The diary app is a simple application that allows users to record and manage their diaries. This app provides functionality for users to add new diary entries, edit or delete existing ones. Additionally, users can search or sort diaries by date.<\/p>\n

Project Setup<\/h2>\n

To start a React app, Node.js and npm must be installed. Create a new React project using the command below.<\/p>\n

npx create-react-app diary-app<\/code><\/pre>\nProject Structure<\/h3>\nThe folder structure of the project is as follows:<\/p>\n
\ndiary-app\/\n\npublic\/\n\nindex.html<\/li>\n<\/ul>\n<\/li>\n
src\/\n\ncomponents\/\n\nDiaryEntry.js<\/li>\n
DiaryList.js<\/li>\n
DiaryForm.js<\/li>\n<\/ul>\n<\/li>\n
App.js<\/li>\n
index.js<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\nMain Feature Implementation<\/h2>\n
1. Diary Adding Functionality<\/h3>\nTo implement the functionality for adding a diary, we will use the DiaryForm<\/code> component. This component takes diary content input from the user, updates the state, and passes it to the parent component.<\/p>\n
\nimport React, { useState } from 'react';\n\nconst DiaryForm = ({ addDiary }) => {\n    const [content, setContent] = useState('');\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        if (!content) return;\n        addDiary(content);\n        setContent('');\n    };\n\n    return (\n        \n             setContent(e.target.value)}\"\n                placeholder=\"Enter your diary here.\"\n            \/>\n            <button type=\"submit\">Add<\/button>\n        <\/form>\n    );\n};\n\nexport default DiaryForm;\n    <\/code><\/pre>\n<h3>2. Diary List Display Functionality<\/h3>\n<p>To display the diaries added by the user, we will implement the <code>DiaryList<\/code> component. This component maps the diary data received from the parent component and renders it on the screen.<\/p>\n<pre><code>\nimport React from 'react';\nimport DiaryEntry from '.\/DiaryEntry';\n\nconst DiaryList = ({ diaries }) => {\n    return (\n        <div>\n            {diaries.map((diary, index) => (\n                <DiaryEntry diary=\"{diary}\" key=\"{index}\"><\/DiaryEntry>\n            ))}\n        <\/div>\n    );\n};\n\nexport default DiaryList;\n    <\/code><\/pre>\n<h3>3. Diary Deleting Functionality<\/h3>\n<p>To implement the functionality for deleting a diary, we will add the <code>DiaryEntry<\/code> component. This component renders individual diaries and provides a delete button.<\/p>\n<pre><code>\nimport React from 'react';\n\nconst DiaryEntry = ({ diary, deleteDiary }) => {\n    return (\n        <div>\n            <p>{diary}<\/p>\n            <button onclick=\"{deleteDiary}\">Delete<\/button>\n        <\/div>\n    );\n};\n\nexport default DiaryEntry;\n    <\/code><\/pre>\n<h2>State Management<\/h2>\n<p>For state management, we will use React’s <code>useState<\/code> hook. This allows components to re-render with the latest state whenever the data changes. Below is a simple example of <code>App.js<\/code>.<\/p>\n<pre><code>\nimport React, { useState } from 'react';\nimport DiaryForm from '.\/components\/DiaryForm';\nimport DiaryList from '.\/components\/DiaryList';\n\nconst App = () => {\n    const [diaries, setDiaries] = useState([]);\n\n    const addDiary = (content) => {\n        setDiaries([...diaries, content]);\n    };\n\n    const deleteDiary = (index) => {\n        const newDiaries = diaries.filter((_, i) => i !== index);\n        setDiaries(newDiaries);\n    };\n\n    return (\n        <div>\n            <h1>My Diary<\/h1>\n            <DiaryForm addDiary=\"{addDiary}\"><\/DiaryForm>\n            <DiaryList deleteDiary=\"{deleteDiary}\" diaries=\"{diaries}\"><\/DiaryList>\n        <\/div>\n    );\n};\n\nexport default App;\n    <\/code><\/pre>\n<h2>Conclusion<\/h2>\n<p>In this course, we learned how to create a simple diary app using React. This app provides the basic functionalities needed for users to write and manage their diaries, leveraging React’s component-based architecture. Based on this example, more functionalities can be added to expand your personal diary app.<\/p>\n<h2>Next Steps<\/h2>\n<p>You can enhance the diary app by adding the following features:<\/p>\n<ul>\n<li>Diary search function<\/li>\n<li>Diary editing function<\/li>\n<li>Diary sorting by date function<\/li>\n<li>Building a backend to save diary data<\/li>\n<\/ul>\n<p>Challenge yourself with more diverse projects using React!<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this course, we will learn in detail how to develop a diary app using React. What is React? React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs). React enables reusable UI components through a component-based architecture. It is primarily used in single-page applications (SPAs) and helps manage state and … <a href=\"https:\/\/atmokpo.com\/w\/32925\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> “React Course: Diary App Example”<\/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-32925","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>React Course: Diary App Example - \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\/32925\/\" \/>\n<meta property=\"og:locale\" content=\"ko_KR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Course: Diary App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"In this course, we will learn in detail how to develop a diary app using React. What is React? React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs). React enables reusable UI components through a component-based architecture. It is primarily used in single-page applications (SPAs) and helps manage state and … \ub354 \ubcf4\uae30 "React Course: Diary App Example"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32925\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:27+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=\"2\ubd84\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Diary App Example\",\"datePublished\":\"2024-11-01T09:12:31+00:00\",\"dateModified\":\"2024-11-01T11:21:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/\"},\"wordCount\":376,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32925\/\",\"name\":\"React Course: Diary App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:31+00:00\",\"dateModified\":\"2024-11-01T11:21:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32925\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32925\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Diary App Example\"}]},{\"@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":"React Course: Diary App Example - \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\/32925\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Diary App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"In this course, we will learn in detail how to develop a diary app using React. What is React? React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs). React enables reusable UI components through a component-based architecture. It is primarily used in single-page applications (SPAs) and helps manage state and … \ub354 \ubcf4\uae30 \"React Course: Diary App Example\"","og_url":"https:\/\/atmokpo.com\/w\/32925\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:31+00:00","article_modified_time":"2024-11-01T11:21:27+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":"2\ubd84"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/atmokpo.com\/w\/32925\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32925\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Diary App Example","datePublished":"2024-11-01T09:12:31+00:00","dateModified":"2024-11-01T11:21:27+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32925\/"},"wordCount":376,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32925\/","url":"https:\/\/atmokpo.com\/w\/32925\/","name":"React Course: Diary App Example - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:31+00:00","dateModified":"2024-11-01T11:21:27+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32925\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32925\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32925\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Diary App Example"}]},{"@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\/32925","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=32925"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32925\/revisions"}],"predecessor-version":[{"id":32926,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32925\/revisions\/32926"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32925"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32925"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32925"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

Overview of the Diary App<\/h2>\nThe diary app is a simple application that allows users to record and manage their diaries. This app provides functionality for users to add new diary entries, edit or delete existing ones. Additionally, users can search or sort diaries by date.<\/p>\n

Main Feature Implementation<\/h2>\n

Overview of the Diary App<\/h2>\n
The diary app is a simple application that allows users to record and manage their diaries. This app provides functionality for users to add new diary entries, edit or delete existing ones. Additionally, users can search or sort diaries by date.<\/p>\n