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.

In this course, we will explore the process of implementing the Editor component as part of developing a diary app using React. The Editor component plays an important role by providing input fields necessary for users to write their diaries and helps manage the submitted content. In this article, I will explain in detail the design and implementation of the component, the necessary state management methods, and various features to enhance the user experience.

1. Overview of the Editor Component

The Editor component is a core component of the diary app, performing the following functions:

• Providing a text area for user input
• Functionality to save the title and content
• Validating the input and providing error messages
• An event handler to pass the submitted content to the parent component

Through these functions, users can write diaries and save them for later review.

2. Designing the Editor Component

Before designing the Editor component, we need to determine what data is required. The states managed in the component are as follows:

• Title: State to capture the title of the diary
• Content: State to capture the content of the diary
• Error Message: State to store error messages resulting from input validation

Each state is managed using the useState hook.

2.1 State Initialization

import React, { useState } from 'react';

const Editor = ({ onSave }) => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');
    const [error, setError] = useState(null);

    // ...
};

2.2 Defining Props

The Editor component will receive a save handler passed from the parent component via a prop called onSave. This handler is called when the user writes and saves their diary.

3. Handling Input

The input elements used in the Editor include two input elements for the title and content, and one textarea element. Event handlers are set up to update the state when input occurs.

3.1 Input Event Handlers

const handleTitleChange = (event) => {
    setTitle(event.target.value);
};

const handleContentChange = (event) => {
    setContent(event.target.value);
};

3.2 Render Method

Now we will define how the Editor component will render based on the state and event handlers. The JSX structure containing the input fields and save button is as follows:

return (
    

        
Write a Diary
        
        
        {error && 
{error}
}
        Save
    
);

4. Implementing the Save Functionality

To save the diary written by the user, we implement the handleSave function, which is called when the save button is clicked. This function includes logic to validate the input values and call the parent’s onSave handler if there are no issues.

4.1 Validating Input

const handleSave = () => {
    if (!title || !content) {
        setError('Title and content are required fields.');
        return;
    }
    setError(null);
    onSave({ title, content });
    // Clear input fields
    setTitle('');
    setContent('');
};

5. Integration: Using the Editor Component in Parent

The Editor component with the save functionality implemented needs to be integrated with other parts of the user interface. The parent component will use the Editor to save the written diary and add it to the list.

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

const DiaryApp = () => {
    const [entries, setEntries] = useState([]);

    const handleSaveEntry = (entry) => {
        setEntries([...entries, entry]);
    };

    return (
        

            
My Diary
            
            

                {entries.map((entry, index) => (
                    

                        
{entry.title}
                        
{entry.content}
                    
                ))}
            
        
    );
};

export default DiaryApp;

6. Conclusion and Additional Features

In this article, we covered the process of implementing the Editor component for a diary app using React. Basic functionality for users to write and save diaries has been established. Additionally, the following features can be considered:

• Functionality to edit saved diaries
• Diary deletion functionality
• Functionality to sort or filter diaries by date
• Functionality to save written diaries to local storage or a server

The experience of combining various components and managing state to create an interactive app using React is very rewarding. I encourage you to continue studying and challenging yourself on various topics!

This course provides a step-by-step explanation of how to implement common components like
Button and Header for a diary application using React.
The diary app is a web application that allows users to write and save their diaries,
and it is recommended to use React to make the basic UI components familiar.

What is React?

React is a JavaScript library for building user interfaces.
When building the UI of web applications, it maximizes reusability and efficiency through a component-based structure.
React allows for easy management and updating of dynamic UIs using state and props.

What are Common Components?

Common components refer to UI elements that can be reused in multiple places.
In the diary application, elements such as Button and Header are frequently used,
so separating them into components can reduce code duplication and make maintenance easier.

Project Setup

Before starting the project, you need to set up the React environment.
To start a new React application, enter the following command to create a React app:

npx create-react-app diary-app

Then, navigate to the created directory and run the project:

cd diary-app
npm start

Implementing Common Components

1. Button Component

Button component is responsible for creating a clickable button.
This component allows for the easy addition of various button styles and functionalities.
Let’s create the Button component with the code below.

import React from 'react';
import './Button.css'; // CSS file for styling

const Button = ({ onClick, children, className }) => {
    return (
        
            {children}
        
    );
};

export default Button;
    

In the above code, the Button component receives three properties:

• onClick: The function to be called when the button is clicked
• children: The content to be placed inside the button
• className: A property that allows the application of additional CSS classes

Now, let’s create a Button.css file to define the styles.
We will set the basic style of the button as follows.

.button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

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

2. Header Component

Header component contains the title and other elements displayed at the top of the application.
Let’s implement the Header component with the code below.

import React from 'react';
import './Header.css';

const Header = () => {
    return (
        

            
My Diary
        
    );
};

export default Header;
    

The above code creates a simple Header component that includes the title of the diary.
Create a Header.css file and specify the styles as follows.

.header {
    padding: 20px;
    background-color: #f8f9fa;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.header h1 {
    margin: 0;
    color: #333;
}
    

Integrating into the App Component

Now, let’s use the implemented Button and Header components in App.js.
Modify App.js as below to integrate the two components.

import React from 'react';
import Header from './Header';
import Button from './Button';

const App = () => {
    const handleButtonClick = () => {
        alert('Button has been clicked!');
    };

    return (
        

            

            

                
Write a Diary
                Write a Diary
            
        
    );
};

export default App;
    

Conclusion

In this course, we explored how to implement common components of the diary application,
Button and Header, using React.
By creating these common components, we can enhance code reusability and simplify maintenance.
If you have gained a deeper understanding of the basics of React components, it will greatly help you in developing more complex applications in the future.

Additional Learning Resources

The official React documentation offers more information and examples about components.
If you want to deepen your understanding of React, please refer to the links below.

• Official React Documentation
• Components and Props
• State and Lifecycle