{"id":32921,"date":"2024-11-01T09:12:29","date_gmt":"2024-11-01T09:12:29","guid":{"rendered":"http:\/\/atmokpo.com\/w\/?p=32921"},"modified":"2024-11-01T11:21:28","modified_gmt":"2024-11-01T11:21:28","slug":"react-course-diary-app-example-and-dynamic-route-routing-with-react-router","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/32921\/","title":{"rendered":"React Course: Diary App Example and Dynamic Route Routing with React Router"},"content":{"rendered":"

<\/p>\n

Hello! In this course, we will create a basic diary app using React. This app will allow users to write, edit, and delete diary entries. Additionally, we will use React Router to add dynamic path routing, so that each diary entry can be accessed individually. Through this article, I will help you gain a deep understanding of the basic concepts of React, state management, and routing.<\/p>\n

1. What is React?<\/h2>\n

React is a UI library developed by Facebook that provides a component-based approach to building user interfaces. Using React, you can manage the state of the UI and automatically update it based on changes in data. Moreover, React allows you to create reusable components, enabling efficient organization of your application.<\/p>\n

2. Project Setup<\/h2>\n

To create the diary app, we need to set up a React project. Use the command below to create a new React project.<\/p>\n

npx create-react-app diary-app<\/code><\/pre>\n
This command will create a new React application named `diary-app`. Once the project is created, navigate to the project directory.<\/p>\n
cd diary-app<\/code><\/pre>\n
3. Installing Required Libraries<\/h2>\n
To use React Router, you need to install the `react-router-dom` library. Please install it using the command below.<\/p>\n
npm install react-router-dom<\/code><\/pre>\n
4. Project Structure<\/h2>\n
The basic folder structure of the diary app will be as follows:<\/p>\n
    \n
  • src\/\n
      \n
    • components\/ – Stores React components.<\/li>\n
    • pages\/ – Defines individual pages.<\/li>\n
    • App.js – The main application file.<\/li>\n
    • index.js – The entry point.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
      5. Creating React Components<\/h2>\n
      To build the basic UI structure of the diary app, we need to create several React components. For example, we will create and use the `Header`, `DiaryList`, `DiaryDetail`, and `DiaryForm` components.<\/p>\n
      5.1 Header Component<\/h3>\n
      import React from 'react';\n\nconst Header = () => {\n    return (\n        
      \n            
      Diary<\/h1>\n        <\/header>\n    );\n};\n\nexport default Header;<\/code><\/pre>\n
      5.2 DiaryList Component<\/h3>\n
      This component is responsible for displaying the list of diary entries.<\/p>\n
      import React from 'react';\nimport { Link } from 'react-router-dom';\n\nconst DiaryList = ({ diaries }) => {\n    return (\n        
      \n            
      Diary List<\/h2>\n            
        \n                {diaries.map(diary => (\n                    
      • \n                        {diary.title}\n                    <\/li>\n                ))}\n            <\/ul>\n        <\/div>\n    );\n};\n\nexport default DiaryList;<\/code><\/pre>\n
        5.3 DiaryDetail Component<\/h3>\n
        This component shows the details of the selected diary entry.<\/p>\n
        import React from 'react';\n\nconst DiaryDetail = ({ diary }) => {\n    return (\n        
        \n            
        {diary.title}<\/h2>\n            
        {diary.content}<\/p>\n        <\/div>\n    );\n};\n\nexport default DiaryDetail;<\/code><\/pre>\n
        5.4 DiaryForm Component<\/h3>\n
        This is the form for writing a new diary entry or editing an existing one.<\/p>\n
        import React, { useState } from 'react';\n\nconst DiaryForm = ({ 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