In recent years, React has established itself as one of the most popular libraries for web application development. With React, you can create fast, efficient, and reusable UI components. In this tutorial, we will examine how to create a simple diary app using React. Additionally, we will discuss performance optimization.
1. Project Setup
Before getting started, you need to have Node.js and npm (Node Package Manager) installed. These tools are essential for creating and managing React projects. Once the installation is complete, you can create a new React project using the following command.
npx create-react-app diary-appThis command creates a basic React project template. After moving into the project folder, you can install the required libraries.
cd diary-appNext, we will install the libraries needed for state management and styling in the diary app.
npm install axios bootstrap2. Designing the Basic Structure
Now, let’s design the basic project structure. The diary app is divided into the following main components:
- DiaryList: A component that displays the list of diary entries.
- DiaryEntry: A component for creating or editing a new diary entry.
- Header: A header component that includes the app title and navigation links.
These components will be created as individual files within the src folder.
3. Implementing the DiaryList Component
Create a DiaryList.js file and add the following code.
import React from 'react';
const DiaryList = ({ diaries }) => {
return (
My Diary List
{diaries.length === 0 ? (
No diaries available.
) : (
diaries.map(diary => (
{diary.title}
{diary.content}
))
)}
);
};
export default DiaryList;This component displays the title and content of each diary entry through the diaries array received as a prop. If there are no diaries, it outputs an appropriate message.
4. Implementing the DiaryEntry Component
Now, create a DiaryEntry.js file and implement a form that allows the user to write a diary entry.
import React, { useState } from 'react';
const DiaryEntry = ({ onSubmit }) => {
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
onSubmit({ title, content });
setTitle('');
setContent('');
};
return (
);
};
export default DiaryEntry;This component uses the useState hook to manage the title and content, and it calls the function passed via the onSubmit prop when the user submits the form to save the diary entry.
5. Implementing the Header Component
Create a Header.js file and implement the app’s header.
import React from 'react';
const Header = () => {
return (
My Diary
);
};
export default Header;6. Configuring the App Component
Now, we will modify the App.js file to integrate the components we created earlier.
import React, { useState } from 'react';
import Header from './Header';
import DiaryList from './DiaryList';
import DiaryEntry from './DiaryEntry';
import './App.css';
function App() {
const [diaries, setDiaries] = useState([]);
const addDiary = (diary) => {
setDiaries([...diaries, { id: diaries.length + 1, ...diary }]);
};
return (
Now, the basic implementation of the diary app is complete. Users can enter a title and content to create diary entries and view the entries in a list.
7. Optimization
When building a React application, performance optimization is also important. Here are some optimization techniques:
7.1. React.memo
React components are re-rendered by default when props change. However, by using React.memo, you can prevent the component from re-rendering unless the props change.
const DiaryList = React.memo(({ diaries }) => {
// Component content
});7.2. useCallback and useMemo
The useCallback hook memoizes functions so that the same function is returned unless the dependency array changes. useMemo memoizes computed values. This can help prevent unnecessary re-renders.
const addDiary = useCallback((diary) => {
setDiaries((prevDiaries) => [...prevDiaries, { id: prevDiaries.length + 1, ...diary }]);
}, []);7.3. Lazy Loading
In React, you can use Lazy Loading through code splitting. This allows you to load components only when needed, improving initial load speed. You can utilize React’s React.lazy and Suspense.
const DiaryList = React.lazy(() => import('./DiaryList'));
return (
);8. Conclusion
In this tutorial, we created a basic diary app using React. We also discussed performance optimization techniques to explore more efficient ways of application development. When applying this code and optimization techniques to real projects, refer to them to create better-performing apps.
React is an easy-to-learn and powerful tool. I hope you gain a deeper understanding by creating various applications. Happy Coding!