React Course: Diary App Example - Implementing the New Page

Author: [Author Name] | Date: [Date]

Introduction

React is a JavaScript library for building user interfaces. In this tutorial, we will cover the process of creating a diary app using React. We will implement the app’s “New” page, where users can create and save a new diary entry. This tutorial will provide detailed explanations of the basic concepts of React, including component design, state management, and event handling.

Prerequisites

To follow this tutorial, you will need the following prior knowledge:

Basic understanding of HTML and CSS
Basic syntax of JavaScript
Basic concepts of React (components, props, state, etc.)

Additionally, you must have Node.js and npm installed, and know how to start a project using create-react-app.

Setting Up the Project

First, create a new React project. Open your terminal and enter the following command to create a project using create-react-app:

npx create-react-app diary-app

Once the project is created, navigate to the folder and run the development server:

cd diary-app
npm start

Your basic React app should now be running. Next, we will install the necessary dependencies. Since we will be using React Router, enter the following command to install it:

npm install react-router-dom

Setting Up the Router

To set up the router, open the src/App.js file and add the following code:

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

function App() {
    return (
        
            
                
                
            
        
    );
}

export default App;

In the code above, we defined two routes. The Home component is rendered at the ‘/’ path, and the NewEntry component is rendered at the ‘/new’ path.

Creating the NewEntry Component

Now, to implement the page for writing a new diary entry, create the src/components/NewEntry.js file and write the following code:

import React, { useState } from 'react';

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

    const handleSubmit = (e) => {
        e.preventDefault();
        // Add diary saving logic here
        console.log('Title:', title);
        console.log('Content:', content);
    };

    return (
        
            Create New Diary Entry
            
                
                    Title:
                     setTitle(e.target.value)} />
                
                
                    Content:
                     setContent(e.target.value)}>
                
                
            
        
    );
}

export default NewEntry;

The code above manages the title and content as state, and logs to the console when the form is submitted. Now it’s time to add the diary saving logic.

Adding Diary Saving Logic

The diary saving logic can be implemented in various ways. Let’s take a look at a simple method to save it in local storage. Add the following code in the handleSubmit function of the NewEntry component:

const handleSubmit = (e) => {
    e.preventDefault();

    const newEntry = { title, content, date: new Date() };
    let entries = JSON.parse(localStorage.getItem('entries')) || [];
    entries.push(newEntry);
    localStorage.setItem('entries', JSON.stringify(entries));

    // Reset
    setTitle('');
    setContent('');
};

With this, when the user writes a diary entry and clicks the save button, the new diary entry will be stored in local storage. We have reset the state to allow the user to easily write the next diary entry.

Checking the Results

Now let’s write a new diary entry and check the saved content. We can update the Home component to display the list of saved diary entries. Open the src/components/Home.js file and write the following code:

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

function Home() {
    const [entries, setEntries] = useState([]);

    useEffect(() => {
        const storedEntries = JSON.parse(localStorage.getItem('entries')) || [];
        setEntries(storedEntries);
    }, []);

    return (
        
            Diary Entries
            
                {entries.map((entry, index) => (
                    
                        {entry.title}
                        {entry.content}
                        {entry.date}
                    
                ))}
            
        
    );
}

export default Home;

Now, the list of diary entries created by the user will be displayed on the home page. You will be able to see the diary titles, content, and the date as well.

Adding Styling

To make the React app more polished, let’s add some CSS styles. Open the src/App.css file and add the following styles:

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

h1, h2, h3 {
    color: #333;
}

form {
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

input, textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px 15px;
    background: #28a745;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background: #218838;
}

Now the overall design of the app has improved, providing a user-friendly experience.

Conclusion

In this tutorial, we explored in detail how to implement the “New” page of a diary app using React. We provided basic functionalities for users to write and save new diary entries, allowing them to learn about component structure and state management concepts in React. Additionally, we also learned how to save data using local storage and style using CSS.

We hope you think about adding more advanced features and expanding the app in the future. Use React’s capabilities to create your own amazing projects!

React Course: Diary App Example – Implementing the New Page