React Course: Diary App Example - Implementing the Diary Page

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.

1. Diary App Functional Requirements

The basic functionalities of the diary app are as follows:

Ability to write and save diaries
Ability to view saved diaries in a list
Ability to select a specific diary and edit its content
Ability to delete a diary

We will look into the basic knowledge of React and other related technologies required to implement these functionalities.

2. Required Tech Stack

In this example, we will use the following tech stack:

React: A library for building user interfaces
React Router: A library for navigating between pages
Context API: React’s built-in API for state management
CSS: Basic styling using CSS

Now, let’s look at how to set up the React application in detail.

3. Setting Up the React Application

To create a new React application, use the npx create-react-app diary-app command. This command automatically generates the necessary files and folder structure needed to set up a basic React project.

npx create-react-app diary-app

After moving to the directory, let’s run the development server.

cd diary-app
npm start

Now you can open your web browser and check the basic React app at http://localhost:3000. Let’s start developing the diary application.

4. Creating the Diary Page Component

To create the Diary page component, create the src/components/Diary.js file. Then, set up the basic structure as shown below.

import React, { useContext, useState } from 'react';
import { DiaryContext } from './DiaryContext';

const Diary = () => {
    const { diaryEntries, addEntry, deleteEntry } = useContext(DiaryContext);
    const [entry, setEntry] = useState("");

    const handleSubmit = (e) => {
        e.preventDefault();
        addEntry(entry);
        setEntry("");
    };

    return (
        
            Write a Diary
            
                
                
            

            Saved Diary List
            
                {diaryEntries.map((e, index) => (
                    
                        {e} 
                    
                ))}
            
        
    );
};

export default Diary;

In the code above, we use the useContext hook to access diary data and the useState hook to manage input data. This sets up a form for writing entries and displays a list of saved diaries.

5. Setting Up DiaryContext

To manage diary data and share it with other components, we will set up DiaryContext. Create the src/components/DiaryContext.js file and add the following code.

import React, { createContext, useState } from 'react';

export const DiaryContext = createContext();

export const DiaryProvider = ({ children }) => {
    const [diaryEntries, setDiaryEntries] = useState([]);

    const addEntry = (entry) => {
        setDiaryEntries([...diaryEntries, entry]);
    };

    const deleteEntry = (index) => {
        const newDiaryEntries = diaryEntries.filter((_, i) => i !== index);
        setDiaryEntries(newDiaryEntries);
    };

    return (
        
            {children}
        
    );
};

In this file, we defined the state that holds the list of diaries and the functions to update it. Now let’s configure this context to be used in the App.js file.

6. Modifying App.js

Open the App.js file and modify it as follows.

import React from 'react';
import { DiaryProvider } from './components/DiaryContext';
import Diary from './components/Diary';

const App = () => {
    return (
        
            
                My Diary App
                
            
        
    );
};

export default App;

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.

7. Application Styling

Now let’s add some simple styles to the application. Add the following basic styles to the src/App.css file.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

h1 {
    color: #333;
}

textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
}

button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Applying these styles provides a visually simple and comfortable user experience with a bright background.

8. Checking the Results

Now that we have completed all the settings and code, let’s actually check if the application works well by accessing http://localhost:3000 in a web browser.

Test the functionalities like writing a diary and deleting from the list.

9. Additional Feature Considerations

We have implemented the basic diary app so far. Additional features to consider include:

Edit Diary Feature: Add the ability for users to edit saved diaries.
Communication with the Server: Add the ability to retrieve or save diaries stored on a server.
Search and Filtering Features: Add functionality to search or filter the list of written diaries by date.
Style Improvements: Use CSS frameworks to provide better UX/UI.

10. Conclusion

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.

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!

React Course: Diary App Example – Implementing the Diary Page