React Course: Implementing the Edit Page in the Diary App Example

In this course, we will explain in depth how to create an Edit page while implementing a simple diary app using React. Through this process, you will understand the basic concepts of React and learn technologies such as state management, routing, and event handling.

1. Preparing the Project

First, you need to create a React project. You can easily get started using Create React App.

npx create-react-app diary-app

After moving to the project directory, install the necessary packages.

cd diary-app
npm install react-router-dom

2. Designing the Basic Structure

Define the basic structure of the diary app. Create pages to manage the diary and components to manage each diary entry.

2.1. Modifying the App.js File

Modify the App.js file to add routing.

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import Edit from './components/Edit';

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

2.2. Home Component

The Home component is responsible for displaying the list of diaries. Here, we will create dummy data as an array for the example.

import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {
    const diaries = [
        { id: 1, title: 'First Diary', content: 'Today is a nice day.' },
        { id: 2, title: 'Second Diary', content: 'I am learning React.' },
    ];

    return (
        

            
Diary List
            

                {diaries.map(diary => (
                    

                        {diary.title}
                    
                ))}
            
        
    );
};

export default Home;

3. Creating the Edit Page

The Edit page will implement a form to modify the title and content of the selected diary.

3.1. Creating the Edit Component

Create an Edit.js file and implement it as follows.

import React, { useState } from 'react';
import { useParams, useHistory } from 'react-router-dom';

const Edit = () => {
    const { id } = useParams();
    const history = useHistory();
  
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // Here you can send a PUT request to the server.
        console.log({ id, title, content });
        history.push('/');
    };

    return (
        

            
Edit Diary
            

                

                    Title:
                     setTitle(e.target.value)}
                        required
                    />
                
                

                    Content:
                     setContent(e.target.value)}
                        required
                    >
                
                Save
            
        
    );
};

export default Edit;

3.2. State Management

In React, there are various methods to manage state. Here, we will use Simple State Management.

• We will manage the title and content as state using React’s useState hook.
• In the form submission handler, we log the data to send it to the server.

4. Server Integration

Now it’s time to integrate with actual data. You can use the Axios library to communicate with server APIs.

npm install axios

4.1. Implementing CRUD with Axios

Create a CRUD API that can showcase various CRUD operations. We will cover the basics of CRUD on GitHub and distributed servers.

5. Conclusion and Deployment

After writing all the code and testing the edit page, you can proceed to build for deployment. You can generate optimized deployment files by entering the command below.

npm run build

Conclusion

Through this course, we learned how to create a simple diary app using React and implement an Edit page. This process will be a good exercise for those who are new to React.

Adding more features and further developing it to communicate with an actual database will also be a good exercise!