In this course, we will learn in detail how to develop a diary app using React.
What is React?
React is an open-source JavaScript library developed by Facebook for building user interfaces (UIs). React enables reusable UI components through a component-based architecture. It is primarily used in single-page applications (SPAs) and helps manage state and data flow efficiently.
Overview of the Diary App
The diary app is a simple application that allows users to record and manage their diaries. This app provides functionality for users to add new diary entries, edit or delete existing ones. Additionally, users can search or sort diaries by date.
Project Setup
To start a React app, Node.js and npm must be installed. Create a new React project using the command below.
npx create-react-app diary-appProject Structure
The folder structure of the project is as follows:
- diary-app/
- public/
- index.html
- src/
- components/
- DiaryEntry.js
- DiaryList.js
- DiaryForm.js
- App.js
- index.js
- components/
- public/
Main Feature Implementation
1. Diary Adding Functionality
To implement the functionality for adding a diary, we will use the DiaryForm component. This component takes diary content input from the user, updates the state, and passes it to the parent component.
import React, { useState } from 'react';
const DiaryForm = ({ addDiary }) => {
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!content) return;
addDiary(content);
setContent('');
};
return (
);
};
export default DiaryForm;
2. Diary List Display Functionality
To display the diaries added by the user, we will implement the DiaryList component. This component maps the diary data received from the parent component and renders it on the screen.
import React from 'react';
import DiaryEntry from './DiaryEntry';
const DiaryList = ({ diaries }) => {
return (
{diaries.map((diary, index) => (
3. Diary Deleting Functionality
To implement the functionality for deleting a diary, we will add the DiaryEntry component. This component renders individual diaries and provides a delete button.
import React from 'react';
const DiaryEntry = ({ diary, deleteDiary }) => {
return (
{diary}
);
};
export default DiaryEntry;
State Management
For state management, we will use React’s useState hook. This allows components to re-render with the latest state whenever the data changes. Below is a simple example of App.js.
import React, { useState } from 'react';
import DiaryForm from './components/DiaryForm';
import DiaryList from './components/DiaryList';
const App = () => {
const [diaries, setDiaries] = useState([]);
const addDiary = (content) => {
setDiaries([...diaries, content]);
};
const deleteDiary = (index) => {
const newDiaries = diaries.filter((_, i) => i !== index);
setDiaries(newDiaries);
};
return (
My Diary
Conclusion
In this course, we learned how to create a simple diary app using React. This app provides the basic functionalities needed for users to write and manage their diaries, leveraging React’s component-based architecture. Based on this example, more functionalities can be added to expand your personal diary app.
Next Steps
You can enhance the diary app by adding the following features:
- Diary search function
- Diary editing function
- Diary sorting by date function
- Building a backend to save diary data
Challenge yourself with more diverse projects using React!