React Course: Diary App Example, Preparing for the Project

React is a JavaScript library for building user interfaces, helping developers create web applications more efficiently and intuitively. In this course, we will learn the basic concepts of React by creating a simple diary application, and we will detail the process of preparing for an actual project.

1. What is React?

React is a library that enables the development of declarative and component-based web applications. Developed by Facebook, it is now used by many companies and developers. The main advantages of React are as follows:

  • Reusable Components: React allows developers to break the UI into smaller units called components. These components can easily be reused in different places.
  • Virtual DOM: React uses a Virtual DOM to minimize actual DOM manipulations. This greatly enhances performance.
  • One-way Data Flow: Since data flows in one direction only, it makes predicting the state of data easier and code maintenance more manageable.

2. Overview of the Diary App Project

In this project, we will create a simple diary application that allows users to write, view, and delete diary entries. The basic functionalities are as follows:

  • View diary list
  • Write a new diary entry
  • Delete diary entries

To implement these functionalities, we will learn about React’s state management and the way data is passed between components.

3. Setting Up the Development Environment

Before starting the project, we need to set up the React development environment. The following tools need to be installed:

  • Node.js: A server-side JavaScript runtime used to run and manage React applications.
  • npm or yarn: JavaScript package managers used to install React-related libraries.
  • Code Editor: Choose an editor for coding tasks, such as VSCode or Atom.

If Node.js is installed, use the following command to create a project with create-react-app:

npx create-react-app diary-app

When the command is executed, a folder named diary-app will be created, and the basic React structure will be set up. Move to the created folder and run the development server:

cd diary-app
npm start

Opening http://localhost:3000 in a browser will show the default page.

4. Designing the Component Structure

The app’s component structure will be designed as follows:


    - App
        - DiaryList
        - DiaryForm

The App component is the top-level component that manages the state. The DiaryList component displays the list of diary entries, and the DiaryForm component provides a form for writing a new diary entry.

5. Managing State

In React components, state is a way to manage the data of a component. We will use the useState hook to manage diary data in the App component. For example, we can set the initial state to an empty array:


import React, { useState } from 'react';

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

            {/* Components */}
        

    );
};

6. Implementing the Diary Entry Form

We will create the DiaryForm component to allow users to write diary entries. We will create an input tag to handle user input and manage the input value using the useState hook:


const DiaryForm = ({ onAdd }) => {
    const [text, setText] = useState('');

    const handleSubmit = (e) => {
        e.preventDefault();
        onAdd(text);
        setText('');
    };

    return (
        

            
            
        

    );
};

7. Displaying the Diary List

We will create the DiaryList component to display the list of diary entries that have been added. The entries will be rendered using the map function:


const DiaryList = ({ diaries, onDelete }) => {
    return (
        
    
            {diaries.map((diary, index) => (
                
  • 
                    {diary}
                    
                
    • 
            ))}
        

    );
};

8. Integrating into the App Component

Now we will integrate each component into the App component and connect the functionalities for adding and deleting diary entries:


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

    const addDiary = (text) => {
        setDiaries([...diaries, text]);
    };

    const deleteDiary = (index) => {
        setDiaries(diaries.filter((_, i) => i !== index));
    };

    return (
        

            
            
        

    );
};

9. CSS Styling

To make the diary app more visually appealing, we can add CSS styles. Create a src/App.css file to set up basic styles:


body {
    font-family: Arial, sans-serif;
}

form {
    margin-bottom: 20px;
}

input {
    margin-right: 10px;
    padding: 5px;
}

button {
    padding: 5px 10px;
}

Now when you refresh the app, you will see the diary app with basic styles applied.

10. Additional Considerations

This course only covers basic functionality, but you may consider adding the following features while actually working on the project:

  • Recording the date and time of diary entries
  • Adding editing functionality for diary entries
  • Implementing user authentication
  • Communicating with a server (REST API)

11. Project Deployment

Once the project is complete, you can deploy it to the web to use the app in a real environment. You can easily deploy using services like Vercel or Netlify. First, I will explain the process of building and deploying the app.

npm run build

When the command is executed, a build folder will be created, and the files inside this folder will be the ones actually deployed. You just need to upload these files to Vercel or Netlify for deployment.

Conclusion

In this course, we explored the process of developing a diary app using React. We looked at the basic component structure design, state management, styling, and deployment process. While working on real projects, you will be able to deepen your understanding of React by adding your own features. We hope you will continue to explore and develop more React functionalities!

References