React Course: Diary Application Example and Page Routing

Hello! In this lesson, we will create a simple diary application using React. This application will implement features that allow users to write, save, and read their diaries. We will also learn how to structure various pages through page routing.

1. What is React?

React is a JavaScript library for building web applications. It focuses on building user interfaces and is designed to be component-based, making it highly reusable. React uses a virtual DOM to optimize performance and helps developers create dynamic web applications more easily.

2. Setting up the project environment

The first step in creating the diary application is to set up the development environment. Let’s use create-react-app to generate a basic template.


npx create-react-app diary-app
cd diary-app
npm start

By executing the above commands, a React project will be created and a basic development server will start. Now, let’s install the necessary packages for the basic project.


npm install react-router-dom

3. Designing the component structure

Now, let’s design the basic structure of the application. The diary application can consist of the following components:

  • Home: The main page that displays a list of previous diaries.
  • DiaryEntry: The page where users can write a diary.
  • DiaryDetail: The page that shows the details of the selected diary.

4. Implementing page routing

To create an application composed of multiple pages using React, we will implement routing using react-router-dom. First, let’s set up the router.


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

function App() {
    return (
        
            
                
                
                
            
        
    );
}

export default App;

5. Implementing components

Home Component

The Home component is the page where users can view their previous diaries. It provides a link to write a new diary along with the diary list.


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

function Home() {
    return (
        

            
Diary

            Write a new diary
            {/* Add the diary list here */}
        

    );
}

export default Home;

DiaryEntry Component

The DiaryEntry component is the page where a user writes a new diary. Users can input a title and content, and when they click the save button, the diary is saved.


import React, { useState } from 'react';

function DiaryEntry() {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        // Logic to save the diary
        console.log({ title, content });
    };

    return (
        

            
Write a Diary

            

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