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.

1. What is React?

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.

2. Project Setup

To create the diary app, we need to set up a React project. Use the command below to create a new React project.

npx create-react-app diary-app

This command will create a new React application named `diary-app`. Once the project is created, navigate to the project directory.

cd diary-app

3. Installing Required Libraries

To use React Router, you need to install the `react-router-dom` library. Please install it using the command below.

npm install react-router-dom

4. Project Structure

The basic folder structure of the diary app will be as follows:

• src/
  • components/ – Stores React components.
  • pages/ – Defines individual pages.
  • App.js – The main application file.
  • index.js – The entry point.

5. Creating React Components

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.

5.1 Header Component

import React from 'react';

const Header = () => {
    return (
        

            
Diary
        
    );
};

export default Header;

5.2 DiaryList Component

This component is responsible for displaying the list of diary entries.

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

const DiaryList = ({ diaries }) => {
    return (
        

            
Diary List
            

                {diaries.map(diary => (
                    

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

export default DiaryList;

5.3 DiaryDetail Component

This component shows the details of the selected diary entry.

import React from 'react';

const DiaryDetail = ({ diary }) => {
    return (
        

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

export default DiaryDetail;

5.4 DiaryForm Component

This is the form for writing a new diary entry or editing an existing one.

import React, { useState } from 'react';

const DiaryForm = ({ onSubmit }) => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onSubmit({ title, content });
        setTitle('');
        setContent('');
    };

    return (
        

            
            
            Save
        
    );
};

export default DiaryForm;

6. Setting Up the Router

Now let’s set up the router in the `App.js` file. This file defines the routing logic for the entire application.

import React, { useState } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Header from './components/Header';
import DiaryList from './components/DiaryList';
import DiaryDetail from './components/DiaryDetail';
import DiaryForm from './components/DiaryForm';

const App = () => {
    const [diaries, setDiaries] = useState([]);

    const addDiary = (diary) => {
        setDiaries(prevDiaries => [...prevDiaries, { id: prevDiaries.length, ...diary }]);
    };

    return (
        
            

            
                 } />
                 } />
                 {
                        const diary = diaries[match.params.id];
                        return diary ?  : 
No diary entry found.
;
                    }}
                />
            
        
    );
};

export default App;

7. Dynamic Path Routing

Using React Router, we can implement dynamic path routing. In the example above, the path `/diary/:id` dynamically loads diary details based on the diary ID. At this time, `match.params.id` is used to retrieve the diary with that ID.

8. Running the Project

Once all of the above setup is complete, you can run the application using the command below.

npm start

Access the diary app by visiting http://localhost:3000 in your browser.

9. Conclusion

In this course, we created a simple diary app using React. This app includes basic CRUD functionality as well as dynamic path routing features using React Router. Through this process, you have gained an understanding of React components and routing that can be applied to real application development.

I hope this article has been helpful in your learning of React! In the next course, we will explore adding more features or other tools in the React ecosystem.