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

In recent years, React has established itself as one of the most popular libraries for web application development. With React, you can create fast, efficient, and reusable UI components. In this tutorial, we will examine how to create a simple diary app using React. Additionally, we will discuss performance optimization.<\/p>\n

1. Project Setup<\/h2>\n

Before getting started, you need to have Node.js and npm (Node Package Manager) installed. These tools are essential for creating and managing React projects. Once the installation is complete, you can create a new React project using the following command.<\/p>\n

npx create-react-app diary-app<\/code><\/pre>\n
This command creates a basic React project template. After moving into the project folder, you can install the required libraries.<\/p>\n
cd diary-app<\/code><\/pre>\n
Next, we will install the libraries needed for state management and styling in the diary app.<\/p>\n
npm install axios bootstrap<\/code><\/pre>\n
2. Designing the Basic Structure<\/h2>\n
Now, let’s design the basic project structure. The diary app is divided into the following main components:<\/p>\n
    \n
  • DiaryList<\/strong>: A component that displays the list of diary entries.<\/li>\n
  • DiaryEntry<\/strong>: A component for creating or editing a new diary entry.<\/li>\n
  • Header<\/strong>: A header component that includes the app title and navigation links.<\/li>\n<\/ul>\n
    These components will be created as individual files within the src<\/code> folder.<\/p>\n
    3. Implementing the DiaryList Component<\/h2>\n
    Create a DiaryList.js<\/strong> file and add the following code.<\/p>\n
    import React from 'react';\n\nconst DiaryList = ({ diaries }) => {\n    return (\n        
    \n            
    My Diary List<\/h2>\n            {diaries.length === 0 ? (\n                
    No diaries available.<\/p>\n            ) : (\n                diaries.map(diary => (\n                    
    \n                        
    {diary.title}<\/h3>\n                        
    {diary.content}<\/p>\n                        \n                    <\/div>\n                ))\n            )}\n        <\/div>\n    );\n};\n\nexport default DiaryList;<\/code><\/pre>\n
    This component displays the title and content of each diary entry through the diaries<\/code> array received as a prop. If there are no diaries, it outputs an appropriate message.<\/p>\n
    4. Implementing the DiaryEntry Component<\/h2>\n
    Now, create a DiaryEntry.js<\/strong> file and implement a form that allows the user to write a diary entry.<\/p>\n
    import React, { useState } from 'react';\n\nconst DiaryEntry = ({ onSubmit }) => {\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        onSubmit({ title, content });\n        setTitle('');\n        setContent('');\n    };\n\n    return (\n        
    \n             setTitle(e.target.value)}\" placeholder=\"Title\" type=\"text\" value=\"{title}\" required \/>\n