React is currently one of the most popular front-end libraries, offering a variety of features that make it easy to build complex user interfaces. In this tutorial, we will explore how to create a simple diary app using React and how to actually deploy it.<\/p>\n
First, let’s take a look at the basic features of the diary app. This app will allow users to write, edit, and delete their diaries and view the diaries they have written in a list format. The basic UI elements are as follows:<\/p>\n
We will use Create React App to set up the React development environment. Open the terminal and enter the command below to create a new project:<\/p>\n
npx create-react-app diary-app<\/code><\/pre>\nAfter moving to the project directory, we will install the necessary packages:<\/p>\n
cd diary-app<\/code><\/pre>\nnpm install axios react-router-dom<\/code><\/pre>\nHere, axios<\/code> is a library for making API calls, and react-router-dom<\/code> is a library for navigation between pages.<\/p>\n3. Basic Structure Design<\/h2>\n
The basic structure of the diary app is designed as follows:<\/p>\n
\nsrc\/\n|-- components\/\n| |-- DiaryList.js\n| |-- DiaryForm.js\n| |-- DiaryDetail.js\n|-- App.js\n|-- index.js\n<\/code><\/pre>\nThe roles of each component are as follows:<\/p>\n
\n- DiaryList.js<\/strong>: The component that shows the list of diaries<\/li>\n
- DiaryForm.js<\/strong>: The form for writing a new diary<\/li>\n
- DiaryDetail.js<\/strong>: The page that shows the details of the selected diary<\/li>\n<\/ul>\n
4. Component Implementation<\/h2>\n4.1 DiaryList.js<\/h3>\n
Let’s implement the component that displays the list of diaries. It fetches data from the API and displays it in a list format:<\/p>\n
\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nconst DiaryList = () => {\n const [diaries, setDiaries] = useState([]);\n\n useEffect(() => {\n const fetchDiaries = async () => {\n const response = await axios.get('\/api\/diaries');\n setDiaries(response.data);\n };\n fetchDiaries();\n }, []);\n\n return (\n \n My Diary List<\/h2>\n \n {diaries.map((diary) => (\n - {diary.title}<\/li>\n ))}\n <\/ul>\n <\/div>\n );\n};\n\nexport default DiaryList;\n<\/code><\/pre>\n
4.2 DiaryForm.js<\/h3>\n
Let’s create a form for writing diaries:<\/p>\n
\nimport React, { useState } from 'react';\nimport axios from 'axios';\n\nconst DiaryForm = () => {\n const [title, setTitle] = useState('');\n const [content, setContent] = useState('');\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n const newDiary = { title, content };\n await axios.post('\/api\/diaries', newDiary);\n \/\/ reset state\n setTitle('');\n setContent('');\n };\n\n return (\n