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

<\/p>\n

\n

Setting Common Styles<\/h2>\n

Hello! In this React tutorial, we will learn about React and how to set common styles through a diary app example. React is a component-based library that is very useful for building user interfaces. The diary app we will develop in this tutorial will be an application where users can record their thoughts and feelings.<\/p>\n

Project Setup<\/h2>\n

First, we will create a new React project. For this, we will use create-react-app<\/code>. Run the command below to set up the project:<\/p>\n

\n    npx create-react-app diary-app\n    cd diary-app\n    npm start\n    <\/pre>\n
Setting Common Styles<\/h2>\n
To ensure visual consistency in the diary app, we need to set common styles. Generally, styles can be set through a CSS file, but in React, we can use methods such as styled-components<\/code> or CSS Modules<\/code>. Here, we will simply use the App.css<\/code> file to set up styles.<\/p>\n
Creating Basic Styles<\/h3>\n
First, open the src\/App.css<\/code> file and add the basic styles as follows:<\/p>\n
\n    body {\n        background-color: #f0f4f8;\n        font-family: 'Arial', sans-serif;\n        margin: 0;\n        padding: 0;\n    }\n\n    h1 {\n        color: #333;\n        text-align: center;\n    }\n\n    .diary-entry {\n        border: 1px solid #ddd;\n        border-radius: 4px;\n        padding: 15px;\n        margin: 10px 0;\n        background: #fff;\n        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);\n    }\n\n    .entry-title {\n        font-size: 1.5em;\n        color: #007acc;\n    }\n\n    .entry-date {\n        color: #888;\n        font-size: 0.9em;\n    }\n\n    .entry-content {\n        margin-top: 10px;\n        font-size: 1.1em;\n    }\n    <\/pre>\n
Creating a Diary Component<\/h3>\n
We will create a new component to display diary entries. Create a file named src\/DiaryEntry.js<\/code> and write as follows:<\/p>\n
\n\/\/ src\/DiaryEntry.js\nimport React from 'react';\nimport '.\/App.css';\n\nconst DiaryEntry = ({ title, date, content }) => {\n    return (\n        
\n            
{title}<\/h2>\n            
{date}<\/p>\n            
{content}<\/p>\n        <\/div>\n    );\n};\n\nexport default DiaryEntry;\n    <\/pre>\n
Final Structure of the Diary App<\/h3>\n
Now, let’s open the src\/App.js<\/code> file and write as follows:<\/p>\n
\n\/\/ src\/App.js\nimport React from 'react';\nimport DiaryEntry from '.\/DiaryEntry';\nimport '.\/App.css';\n\nconst App = () => {\n    const diaryEntries = [\n        { title: 'First Diary', date: '2023-10-01', content: 'Today was really a happy day!' },\n        { title: 'Second Diary', date: '2023-10-02', content: 'It\\'s a rainy day. I feel a little down.' },\n        { title: 'Third Diary', date: '2023-10-03', content: 'I looked at the sky while reading a good book.' },\n    ];\n\n    return (\n        
\n            
My Diary<\/h1>\n            {diaryEntries.map((entry, index) => (\n                <\/diaryentry>\n            ))}\n        <\/div>\n    );\n};\n\nexport default App;\n    <\/pre>\n
State Management and Styling<\/h2>\n
To enhance the styles of the diary app, various styles can be applied along with state management. For example, implementing features to add and delete diary entries can improve user experience.<\/p>\n
Using State Management Libraries<\/h3>\n
We will use the useState<\/code> and useEffect<\/code> hooks for state management in React. Add the code below to src\/App.js<\/code> to implement the feature for adding diary entries:<\/p>\n
\nimport React, { useState } from 'react';\n\/\/ import DiaryEntry from '.\/DiaryEntry';\n\/\/ import '.\/App.css';\n\nconst App = () => {\n    const [entries, setEntries] = useState([\n        { title: 'First Diary', date: '2023-10-01', content: 'Today was really a happy day!' },\n        { title: 'Second Diary', date: '2023-10-02', content: 'It\\'s a rainy day. I feel a little down.' },\n    ]);\n\n    const [title, setTitle] = useState('');\n    const [content, setContent] = useState('');\n\n    const addEntry = () => {\n        const newEntry = {\n            title,\n            date: new Date().toLocaleDateString(),\n            content,\n        };\n        setEntries([...entries, newEntry]);\n        setTitle('');\n        setContent('');\n    };\n\n    return (\n        
\n            
My Diary<\/h1>\n             setTitle(e.target.value)}\n            \/>\n