{"id":32907,"date":"2024-11-01T09:12:23","date_gmt":"2024-11-01T09:12:23","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32907"},"modified":"2024-11-01T11:21:32","modified_gmt":"2024-11-01T11:21:32","slug":"react-course-diary-app-example-implementing-the-diary-page","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32907\/","title":{"rendered":"React Course: Diary App Example – Implementing the Diary Page"},"content":{"rendered":"

<\/p>\n

React is a widely-used JavaScript library for modern web application development. In this tutorial, you will learn how to create a basic diary application using React. First, this article will define the functionalities of the diary app and the necessary tech stack, and then guide you through the process of implementing the Diary page step by step.<\/p>\n

1. Diary App Functional Requirements<\/h2>\n

The basic functionalities of the diary app are as follows:<\/p>\n

Ability to write and save diaries<\/li>\n
Ability to view saved diaries in a list<\/li>\n
Ability to select a specific diary and edit its content<\/li>\n

Ability to delete a diary<\/li>\n<\/ul>\n

We will look into the basic knowledge of React and other related technologies required to implement these functionalities.<\/p>\n

2. Required Tech Stack<\/h2>\n

In this example, we will use the following tech stack:<\/p>\n

React:<\/strong> A library for building user interfaces<\/li>\n
React Router:<\/strong> A library for navigating between pages<\/li>\n
Context API:<\/strong> React’s built-in API for state management<\/li>\n

CSS:<\/strong> Basic styling using CSS<\/li>\n<\/ul>\n
Now, let\u2019s look at how to set up the React application in detail.<\/p>\n
3. Setting Up the React Application<\/h2>\n
\n To create a new React application, use the npx create-react-app diary-app<\/code> command. This command automatically generates the necessary files and folder structure needed to set up a basic React project.\n <\/p>\n
npx create-react-app diary-app<\/code><\/pre>\nAfter moving to the directory, let\u2019s run the development server.<\/p>\n cd diary-app\nnpm start<\/code><\/pre>\nNow you can open your web browser and check the basic React app at http:\/\/localhost:3000<\/code>. Let\u2019s start developing the diary application.<\/p>\n 4. Creating the Diary Page Component<\/h2>\nTo create the Diary page component, create the src\/components\/Diary.js<\/code> file. Then, set up the basic structure as shown below.<\/p>\n import React, { useContext, useState } from 'react';\nimport { DiaryContext } from '.\/DiaryContext';\n\nconst Diary = () => {\n const { diaryEntries, addEntry, deleteEntry } = useContext(DiaryContext);\n const [entry, setEntry] = useState(\"\");\n\n const handleSubmit = (e) => {\n e.preventDefault();\n addEntry(entry);\n setEntry(\"\");\n };\n\n return (\n \n Write a Diary<\/h2>\n \n setEntry(e.target.value)}\" value=\"{entry}\" placeholder=\"Write today's diary here\"><\/textarea>\n <button type=\"submit\">Save<\/button>\n <\/form>\n\n <h3>Saved Diary List<\/h3>\n <ul>\n {diaryEntries.map((e, index) => (\n <li key=\"{index}\">\n {e} <button onClick=\"{() => deleteEntry(index)}\">Delete<\/button>\n <\/li>\n ))}\n <\/ul>\n <\/div>\n );\n};\n\nexport default Diary;<\/code><\/pre>\n<p>In the code above, we use the <code>useContext<\/code> hook to access diary data and the <code>useState<\/code> hook to manage input data. This sets up a form for writing entries and displays a list of saved diaries.<\/p>\n<h2>5. Setting Up DiaryContext<\/h2>\n<p>To manage diary data and share it with other components, we will set up <code>DiaryContext<\/code>. Create the <code>src\/components\/DiaryContext.js<\/code> file and add the following code.<\/p>\n<pre><code>import React, { createContext, useState } from 'react';\n\nexport const DiaryContext = createContext();\n\nexport const DiaryProvider = ({ children }) => {\n const [diaryEntries, setDiaryEntries] = useState([]);\n\n const addEntry = (entry) => {\n setDiaryEntries([...diaryEntries, entry]);\n };\n\n const deleteEntry = (index) => {\n const newDiaryEntries = diaryEntries.filter((_, i) => i !== index);\n setDiaryEntries(newDiaryEntries);\n };\n\n return (\n <DiaryContext.Provider value={{ diaryEntries, addEntry, deleteEntry }}>\n {children}\n <\/DiaryContext.Provider>\n );\n};<\/code><\/pre>\n<p>In this file, we defined the state that holds the list of diaries and the functions to update it. Now let\u2019s configure this context to be used in the <code>App.js<\/code> file.<\/p>\n<h2>6. Modifying App.js<\/h2>\n<p>Open the <code>App.js<\/code> file and modify it as follows.<\/p>\n<pre><code>import React from 'react';\nimport { DiaryProvider } from '.\/components\/DiaryContext';\nimport Diary from '.\/components\/Diary';\n\nconst App = () => {\n return (\n <DiaryProvider>\n <div>\n <h1>My Diary App<\/h1>\n <Diary \/>\n <\/div>\n <\/DiaryProvider>\n );\n};\n\nexport default App;<\/code><\/pre>\n<p>We have now wrapped the Diary component in the DiaryProvider to allow it to use diary data. Thus, we have completed the basic diary application.<\/p>\n<h2>7. Application Styling<\/h2>\n<p>Now let’s add some simple styles to the application. Add the following basic styles to the <code>src\/App.css<\/code> file.<\/p>\n<pre><code>body {\n font-family: Arial, sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n}\n\nh1 {\n color: #333;\n}\n\ntextarea {\n width: 100%;\n height: 100px;\n margin-bottom: 10px;\n padding: 10px;\n}\n\nbutton {\n padding: 10px 20px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 5px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #0056b3;\n}<\/code><\/pre>\n<p>Applying these styles provides a visually simple and comfortable user experience with a bright background.<\/p>\n<h2>8. Checking the Results<\/h2>\n<p>Now that we have completed all the settings and code, let’s actually check if the application works well by accessing <code>http:\/\/localhost:3000<\/code> in a web browser.<\/p>\n<p>Test the functionalities like writing a diary and deleting from the list.<\/p>\n<h2>9. Additional Feature Considerations<\/h2>\n<p>We have implemented the basic diary app so far. Additional features to consider include:<\/p>\n<ul>\n<li><strong>Edit Diary Feature:<\/strong> Add the ability for users to edit saved diaries.<\/li>\n<li><strong>Communication with the Server:<\/strong> Add the ability to retrieve or save diaries stored on a server.<\/li>\n<li><strong>Search and Filtering Features:<\/strong> Add functionality to search or filter the list of written diaries by date.<\/li>\n<li><strong>Style Improvements:<\/strong> Use CSS frameworks to provide better UX\/UI.<\/li>\n<\/ul>\n<h2>10. Conclusion<\/h2>\n<p>In this lesson, we learned how to implement a simple diary app using React. It includes basic functionalities such as diary writing, displaying, and deleting. This fundamental app will help enhance your understanding of React and assist in adding more complex features as you develop further.<\/p>\n<p>By utilizing various libraries and tools provided in the React ecosystem, you can enrich the user experience even more. We encourage you to create your own diary application. Thank you!<\/p>\n<p><\/body><\/p>\n","protected":false},"excerpt":{"rendered":"<p>React is a widely-used JavaScript library for modern web application development. In this tutorial, you will learn how to create a basic diary application using React. First, this article will define the functionalities of the diary app and the necessary tech stack, and then guide you through the process of implementing the Diary page step … <a href=\"https:\/\/atmokpo.com\/w\/32907\/\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> “React Course: Diary App Example – Implementing the Diary Page”<\/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-32907","post","type-post","status-publish","format-standard","hentry","category-react-basics-course"],"yoast_head":"\n<title>React Course: Diary App Example - Implementing the Diary Page - \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\/32907\/\" \/>\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 - Implementing the Diary Page - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"og:description\" content=\"React is a widely-used JavaScript library for modern web application development. In this tutorial, you will learn how to create a basic diary application using React. First, this article will define the functionalities of the diary app and the necessary tech stack, and then guide you through the process of implementing the Diary page step … \ub354 \ubcf4\uae30 "React Course: Diary App Example – Implementing the Diary Page"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/atmokpo.com\/w\/32907\/\" \/>\n<meta property=\"og:site_name\" content=\"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-01T09:12:23+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-01T11:21:32+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\/32907\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32907\/\"},\"author\":{\"name\":\"root\",\"@id\":\"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7\"},\"headline\":\"React Course: Diary App Example – Implementing the Diary Page\",\"datePublished\":\"2024-11-01T09:12:23+00:00\",\"dateModified\":\"2024-11-01T11:21:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32907\/\"},\"wordCount\":621,\"publisher\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#organization\"},\"articleSection\":[\"React basics course\"],\"inLanguage\":\"ko-KR\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/atmokpo.com\/w\/32907\/\",\"url\":\"https:\/\/atmokpo.com\/w\/32907\/\",\"name\":\"React Course: Diary App Example - Implementing the Diary Page - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8\",\"isPartOf\":{\"@id\":\"https:\/\/atmokpo.com\/w\/#website\"},\"datePublished\":\"2024-11-01T09:12:23+00:00\",\"dateModified\":\"2024-11-01T11:21:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/atmokpo.com\/w\/32907\/#breadcrumb\"},\"inLanguage\":\"ko-KR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/atmokpo.com\/w\/32907\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/atmokpo.com\/w\/32907\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\ud648\",\"item\":\"https:\/\/atmokpo.com\/w\/en\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Course: Diary App Example – Implementing the Diary Page\"}]},{\"@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_head_json":{"title":"React Course: Diary App Example - Implementing the Diary Page - \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\/32907\/","og_locale":"ko_KR","og_type":"article","og_title":"React Course: Diary App Example - Implementing the Diary Page - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","og_description":"React is a widely-used JavaScript library for modern web application development. In this tutorial, you will learn how to create a basic diary application using React. First, this article will define the functionalities of the diary app and the necessary tech stack, and then guide you through the process of implementing the Diary page step … \ub354 \ubcf4\uae30 \"React Course: Diary App Example – Implementing the Diary Page\"","og_url":"https:\/\/atmokpo.com\/w\/32907\/","og_site_name":"\ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","article_published_time":"2024-11-01T09:12:23+00:00","article_modified_time":"2024-11-01T11:21:32+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\/32907\/#article","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/32907\/"},"author":{"name":"root","@id":"https:\/\/atmokpo.com\/w\/#\/schema\/person\/91b6b3b138fbba0efb4ae64b1abd81d7"},"headline":"React Course: Diary App Example – Implementing the Diary Page","datePublished":"2024-11-01T09:12:23+00:00","dateModified":"2024-11-01T11:21:32+00:00","mainEntityOfPage":{"@id":"https:\/\/atmokpo.com\/w\/32907\/"},"wordCount":621,"publisher":{"@id":"https:\/\/atmokpo.com\/w\/#organization"},"articleSection":["React basics course"],"inLanguage":"ko-KR"},{"@type":"WebPage","@id":"https:\/\/atmokpo.com\/w\/32907\/","url":"https:\/\/atmokpo.com\/w\/32907\/","name":"React Course: Diary App Example - Implementing the Diary Page - \ub77c\uc774\ube0c\uc2a4\ub9c8\ud2b8","isPartOf":{"@id":"https:\/\/atmokpo.com\/w\/#website"},"datePublished":"2024-11-01T09:12:23+00:00","dateModified":"2024-11-01T11:21:32+00:00","breadcrumb":{"@id":"https:\/\/atmokpo.com\/w\/32907\/#breadcrumb"},"inLanguage":"ko-KR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/atmokpo.com\/w\/32907\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/atmokpo.com\/w\/32907\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\ud648","item":"https:\/\/atmokpo.com\/w\/en\/"},{"@type":"ListItem","position":2,"name":"React Course: Diary App Example – Implementing the Diary Page"}]},{"@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\/32907","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=32907"}],"version-history":[{"count":1,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32907\/revisions"}],"predecessor-version":[{"id":32908,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/posts\/32907\/revisions\/32908"}],"wp:attachment":[{"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/media?parent=32907"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/categories?post=32907"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/atmokpo.com\/w\/wp-json\/wp\/v2\/tags?post=32907"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}