Category: React basics course

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

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 />
                
                    
                

            

        );
    };

    export default CreateDiary;

6. State Management

To manage the diaries written in the diary app, you need to use React’s useState hook. Open the App.js file and set up the state.


    import React, { useState } from 'react';
    import DiaryList from './components/DiaryList';
    import CreateDiary from './components/CreateDiary';

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

        // Add diary entry functions and more example code here
            
        return (
            

                
My Diary

                {/* Add routing settings */}
            

        );
    };

    export default App;

7. Testing and Debugging

Test each component and functionality of the application to ensure they work properly. If the desired results do not appear, use console.log for debugging. For instance, check if the state updates as expected.

8. Deploying

To deploy, you first need to build the app. You can do this by entering the following command in the console:

npm run build

You can then deploy the generated build folder to a server. Various deployment services such as Firebase, Vercel, and Netlify can be used.

9. Conclusion

In this course, we learned how to create a simple diary application using React and how to implement routing to multiple pages using React Router. Through practical exercises, we were able to grasp the basic principles of React, state management, and routing. We hope you gain more experience by implementing additional features and deploying your application.

Thank you!