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

<\/p>\n

Hello! In this lesson, we will create a simple diary application using React. This application will implement features that allow users to write, save, and read their diaries. We will also learn how to structure various pages through page routing.<\/p>\n

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

React is a JavaScript library for building web applications. It focuses on building user interfaces and is designed to be component-based, making it highly reusable. React uses a virtual DOM to optimize performance and helps developers create dynamic web applications more easily.<\/p>\n

2. Setting up the project environment<\/h2>\n

The first step in creating the diary application is to set up the development environment. Let’s use create-react-app<\/code> to generate a basic template.<\/p>\n

\nnpx create-react-app diary-app\ncd diary-app\nnpm start\n    <\/code><\/pre>\n
By executing the above commands, a React project will be created and a basic development server will start. Now, let’s install the necessary packages for the basic project.<\/p>\n
\nnpm install react-router-dom\n    <\/code><\/pre>\n
3. Designing the component structure<\/h2>\n
Now, let’s design the basic structure of the application. The diary application can consist of the following components:<\/p>\n
    \n
  • Home<\/strong>: The main page that displays a list of previous diaries.<\/li>\n
  • DiaryEntry<\/strong>: The page where users can write a diary.<\/li>\n
  • DiaryDetail<\/strong>: The page that shows the details of the selected diary.<\/li>\n<\/ul>\n
    4. Implementing page routing<\/h2>\n
    To create an application composed of multiple pages using React, we will implement routing using react-router-dom<\/code>. First, let’s set up the router.<\/p>\n
    \nimport React from 'react';\nimport { BrowserRouter as Router, Route, Switch } from 'react-router-dom';\nimport Home from '.\/components\/Home';\nimport DiaryEntry from '.\/components\/DiaryEntry';\nimport DiaryDetail from '.\/components\/DiaryDetail';\n\nfunction App() {\n    return (\n        \n            \n                <\/Route>\n                <\/Route>\n                <\/Route>\n            <\/Switch>\n        <\/Router>\n    );\n}\n\nexport default App;\n    <\/code><\/pre>\n
    5. Implementing components<\/h2>\n
    Home Component<\/h3>\n
    The Home component is the page where users can view their previous diaries. It provides a link to write a new diary along with the diary list.<\/p>\n
    \nimport React from 'react';\nimport { Link } from 'react-router-dom';\n\nfunction Home() {\n    return (\n        
    \n            
    Diary<\/h2>\n            Write a new diary<\/Link>\n            {\/* Add the diary list here *\/}\n        <\/div>\n    );\n}\n\nexport default Home;\n    <\/code><\/pre>\n
    DiaryEntry Component<\/h3>\n
    The DiaryEntry component is the page where a user writes a new diary. Users can input a title and content, and when they click the save button, the diary is saved.<\/p>\n
    \nimport React, { useState } from 'react';\n\nfunction DiaryEntry() {\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n\n    const handleSubmit = (e) => {\n        e.preventDefault();\n        \/\/ Logic to save the diary\n        console.log({ title, content });\n    };\n\n    return (\n        
    \n            
    Write a Diary<\/h2>\n            
    \n                 setTitle(e.target.value)} required \/>\n