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 (
<router>
<switch>
<route component="{Home}" exact="" path="/"></route>
<route component="{DiaryEntry}" path="/entry"></route>
<route component="{DiaryDetail}" path="/diary/:id"></route>
</switch>
</router>
);
}
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 (
<div>
<h2>Diary</h2>
<link to="/entry">Write a new diary
{/* Add the diary list here */}
</div>
);
}
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 (
<div>
<h2>Write a Diary</h2>
<form onsubmit="{handleSubmit}">
<input placeholder="Title" type="text" value="{title}" onchange="{(e)" ==""> setTitle(e.target.value)} required />
<textarea placeholder="Content" value="{content}" onchange="{(e)" ==""> setContent(e.target.value)} required />
<button type="submit">Save</button>
</form>
</div>
);
}
export default DiaryEntry;
</code></pre>
<h3>DiaryDetail Component</h3>
<p>The DiaryDetail component is the page that shows the detailed content of the selected diary. It displays the diary’s title, content, and other metadata.</p>
<pre><code>
import React from 'react';
import { useParams } from 'react-router-dom';
function DiaryDetail() {
const { id } = useParams();
// Logic to fetch diary data corresponding to the id is needed here.
return (
<div>
<h2>Diary Detail (ID: {id})</h2>
{/* Output diary content here */}
</div>
);
}
export default DiaryDetail;
</code></pre>
<h2>6. Saving and loading data</h2>
<p>To save the diary written by the user, state management is needed. In this example, we will implement data saving simply using React’s state. For more complex applications, it is advisable to use Redux or Context API for state management.</p>
<h3>Managing diary data</h3>
<pre><code>
import React, { useState } from 'react';
// Manage diary data in the App component.
function App() {
const [diaries, setDiaries] = useState([]);
const addDiary = (diary) => {
setDiaries([...diaries, diary]);
};
return (
<Router>
<DiaryContext.Provider value={{ diaries, addDiary }}>
<Switch>
<Route component="{Home}" exact path="/"></Route>
<Route component="{DiaryEntry}" path="/entry"></Route>
<Route component="{DiaryDetail}" path="/diary/:id"></Route>
</Switch>
</DiaryContext.Provider>
</Router>
);
}
</code></pre>
<h2>7. Conclusion</h2>
<p>In this lesson, we explored how to create a diary application using React and implement page routing. With React’s component structure and data management, it is easy to add various features and facilitate smoother interactions with users.</p>
<p>Based on the example above, you can add more diverse functions. For example, you can add features to edit or delete diaries or introduce user authentication to expand it into a personal diary.</p>
<h2>8. Additional study materials</h2>
<p>To better understand React, please refer to the following materials:</p>
<ul>
<li><a href="https://reactjs.org/docs/getting-started.html">Official React Documentation</a></li>
<li><a href="https://reactrouter.com/web/guides/quick-start">React Router Guide</a></li>
<li><a href="https://redux.js.org/introduction/getting-started">Official Redux Documentation</a></li>
</ul>
<h2>9. Questions and Answers</h2>
<p>If you have any questions about this lesson, please leave a comment. I hope this can be a place for us to think and grow together!</p>
<p></body></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=49&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=98&d=mm&r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://atmokpo.com/w/en/author/root/">root</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://atmokpo.com/w/32929/" rel="bookmark"><time class="entry-date published" datetime="2024-11-01T09:12:32+00:00">2024/11/01</time><time class="updated" datetime="2024-11-01T11:21:26+00:00">2024/11/01</time></a></span><span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://atmokpo.com/w/category/react-basics-course/" rel="category tag">React basics course</a></span> </footer><!-- .entry-footer -->
</article><!-- #post-32929 -->
<article id="post-32927" class="post-32927 post type-post status-publish format-standard hentry category-react-basics-course">
<header class="entry-header">
<h2 class="entry-title"><a href="https://atmokpo.com/w/32927/" rel="bookmark">React Course: Diary App Example and Optimization</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p>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.</p>
<h2>1. Project Setup</h2>
<p>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.</p>
<pre><code>npx create-react-app diary-app</code></pre>
<p>This command creates a basic React project template. After moving into the project folder, you can install the required libraries.</p>
<pre><code>cd diary-app</code></pre>
<p>Next, we will install the libraries needed for state management and styling in the diary app.</p>
<pre><code>npm install axios bootstrap</code></pre>
<h2>2. Designing the Basic Structure</h2>
<p>Now, let’s design the basic project structure. The diary app is divided into the following main components:</p>
<ul>
<li><strong>DiaryList</strong>: A component that displays the list of diary entries.</li>
<li><strong>DiaryEntry</strong>: A component for creating or editing a new diary entry.</li>
<li><strong>Header</strong>: A header component that includes the app title and navigation links.</li>
</ul>
<p>These components will be created as individual files within the <code>src</code> folder.</p>
<h2>3. Implementing the DiaryList Component</h2>
<p>Create a <strong>DiaryList.js</strong> file and add the following code.</p>
<pre><code>import React from 'react';
const DiaryList = ({ diaries }) => {
return (
<div className="diary-list">
<h2>My Diary List</h2>
{diaries.length === 0 ? (
<p>No diaries available.</p>
) : (
diaries.map(diary => (
<div key="{diary.id}">
<h3>{diary.title}</h3>
<p>{diary.content}</p>
<hr/>
</div>
))
)}
</div>
);
};
export default DiaryList;</code></pre>
<p>This component displays the title and content of each diary entry through the <code>diaries</code> array received as a prop. If there are no diaries, it outputs an appropriate message.</p>
<h2>4. Implementing the DiaryEntry Component</h2>
<p>Now, create a <strong>DiaryEntry.js</strong> file and implement a form that allows the user to write a diary entry.</p>
<pre><code>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 (
<form onSubmit="{handleSubmit}">
<input onChange="{(e) => setTitle(e.target.value)}" placeholder="Title" type="text" value="{title}" required />
<textarea onChange="{(e) => setContent(e.target.value)}" placeholder="Content" value="{content}" required />
<button type="submit">Save</button>
</form>
);
};
export default DiaryEntry;</code></pre>
<p>This component uses the <code>useState</code> hook to manage the title and content, and it calls the function passed via the <code>onSubmit</code> prop when the user submits the form to save the diary entry.</p>
<h2>5. Implementing the Header Component</h2>
<p>Create a <strong>Header.js</strong> file and implement the app’s header.</p>
<pre><code>import React from 'react';
const Header = () => {
return (
<header>
<h1>My Diary</h1>
</header>
);
};
export default Header;</code></pre>
<h2>6. Configuring the App Component</h2>
<p>Now, we will modify the <strong>App.js</strong> file to integrate the components we created earlier.</p>
<pre><code>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 (
<div className="App">
<Header />
<DiaryEntry onSubmit="{addDiary}" />
<DiaryList diaries="{diaries}" />
</div>
);
}
export default App;</code></pre>
<p>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.</p>
<h2>7. Optimization</h2>
<p>When building a React application, performance optimization is also important. Here are some optimization techniques:</p>
<h3>7.1. React.memo</h3>
<p>React components are re-rendered by default when props change. However, by using <code>React.memo</code>, you can prevent the component from re-rendering unless the props change.</p>
<pre><code>const DiaryList = React.memo(({ diaries }) => {
// Component content
});</code></pre>
<h3>7.2. useCallback and useMemo</h3>
<p>The <code>useCallback</code> hook memoizes functions so that the same function is returned unless the dependency array changes. <code>useMemo</code> memoizes computed values. This can help prevent unnecessary re-renders.</p>
<pre><code>const addDiary = useCallback((diary) => {
setDiaries((prevDiaries) => [...prevDiaries, { id: prevDiaries.length + 1, ...diary }]);
}, []);</code></pre>
<h3>7.3. Lazy Loading</h3>
<p>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 <code>React.lazy</code> and <code>Suspense</code>.</p>
<pre><code>const DiaryList = React.lazy(() => import('./DiaryList'));
return (
<Suspense fallback="{<div>Loading...</div>}">
<DiaryList diaries="{diaries}" />
</Suspense>
);</code></pre>
<h2>8. Conclusion</h2>
<p>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.</p>
<p>React is an easy-to-learn and powerful tool. I hope you gain a deeper understanding by creating various applications. Happy Coding!</p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=49&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=98&d=mm&r=g 2x' class='avatar avatar-49 photo' height='49' width='49' decoding='async'/><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://atmokpo.com/w/en/author/root/">root</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://atmokpo.com/w/32927/" rel="bookmark"><time class="entry-date published" datetime="2024-11-01T09:12:32+00:00">2024/11/01</time><time class="updated" datetime="2024-11-01T11:21:26+00:00">2024/11/01</time></a></span><span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://atmokpo.com/w/category/react-basics-course/" rel="category tag">React basics course</a></span> </footer><!-- .entry-footer -->
</article><!-- #post-32927 -->
<article id="post-32925" class="post-32925 post type-post status-publish format-standard hentry category-react-basics-course">
<header class="entry-header">
<h2 class="entry-title"><a href="https://atmokpo.com/w/32925/" rel="bookmark">React Course: Diary App Example</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p><body></p>
<p>In this course, we will learn in detail how to develop a diary app using React.</p>
<h2>What is React?</h2>
<p>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.</p>
<h2>Overview of the Diary App</h2>
<p>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.</p>
<h2>Project Setup</h2>
<p>To start a React app, Node.js and npm must be installed. Create a new React project using the command below.</p>
<pre><code>npx create-react-app diary-app</code></pre>
<h3>Project Structure</h3>
<p>The folder structure of the project is as follows:</p>
<ul>
<li>diary-app/
<ul>
<li>public/
<ul>
<li>index.html</li>
</ul>
</li>
<li>src/
<ul>
<li>components/
<ul>
<li>DiaryEntry.js</li>
<li>DiaryList.js</li>
<li>DiaryForm.js</li>
</ul>
</li>
<li>App.js</li>
<li>index.js</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2>Main Feature Implementation</h2>
<h3>1. Diary Adding Functionality</h3>
<p>To implement the functionality for adding a diary, we will use the <code>DiaryForm</code> component. This component takes diary content input from the user, updates the state, and passes it to the parent component.</p>
<pre><code>
import React, { useState } from 'react';
const DiaryForm = ({ addDiary }) => {
const [content, setContent] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
if (!content) return;
addDiary(content);
setContent('');
};
return (
<form onsubmit="{handleSubmit}">
<textarea onchange="{(e) => setContent(e.target.value)}"
placeholder="Enter your diary here."
/>
<button type="submit">Add</button>
</form>
);
};
export default DiaryForm;
</code></pre>
<h3>2. Diary List Display Functionality</h3>
<p>To display the diaries added by the user, we will implement the <code>DiaryList</code> component. This component maps the diary data received from the parent component and renders it on the screen.</p>
<pre><code>
import React from 'react';
import DiaryEntry from './DiaryEntry';
const DiaryList = ({ diaries }) => {
return (
<div>
{diaries.map((diary, index) => (
<DiaryEntry diary="{diary}" key="{index}"></DiaryEntry>
))}
</div>
);
};
export default DiaryList;
</code></pre>
<h3>3. Diary Deleting Functionality</h3>
<p>To implement the functionality for deleting a diary, we will add the <code>DiaryEntry</code> component. This component renders individual diaries and provides a delete button.</p>
<pre><code>
import React from 'react';
const DiaryEntry = ({ diary, deleteDiary }) => {
return (
<div>
<p>{diary}</p>
<button onclick="{deleteDiary}">Delete</button>
</div>
);
};
export default DiaryEntry;
</code></pre>
<h2>State Management</h2>
<p>For state management, we will use React’s <code>useState</code> hook. This allows components to re-render with the latest state whenever the data changes. Below is a simple example of <code>App.js</code>.</p>
<pre><code>
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 (
<div>
<h1>My Diary</h1>
<DiaryForm addDiary="{addDiary}"></DiaryForm>
<DiaryList deleteDiary="{deleteDiary}" diaries="{diaries}"></DiaryList>
</div>
);
};
export default App;
</code></pre>
<h2>Conclusion</h2>
<p>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.</p>
<h2>Next Steps</h2>
<p>You can enhance the diary app by adding the following features:</p>
<ul>
<li>Diary search function</li>
<li>Diary editing function</li>
<li>Diary sorting by date function</li>
<li>Building a backend to save diary data</li>
</ul>
<p>Challenge yourself with more diverse projects using React!</p>
<p></body></p>
</div><!-- .entry-content -->
<footer class="entry-footer">
<span class="byline"><span class="author vcard"><img alt='' src='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=49&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/5b7f47db621d1eab02540d35048be506?s=98&d=mm&r=g 2x' class='avatar avatar-49 photo' height='49' width='49' loading='lazy' decoding='async'/><span class="screen-reader-text">Author </span> <a class="url fn n" href="https://atmokpo.com/w/en/author/root/">root</a></span></span><span class="posted-on"><span class="screen-reader-text">Posted on </span><a href="https://atmokpo.com/w/32925/" rel="bookmark"><time class="entry-date published" datetime="2024-11-01T09:12:31+00:00">2024/11/01</time><time class="updated" datetime="2024-11-01T11:21:27+00:00">2024/11/01</time></a></span><span class="cat-links"><span class="screen-reader-text">Categories </span><a href="https://atmokpo.com/w/category/react-basics-course/" rel="category tag">React basics course</a></span> </footer><!-- .entry-footer -->
</article><!-- #post-32925 -->
<article id="post-32923" class="post-32923 post type-post status-publish format-standard hentry category-react-basics-course">
<header class="entry-header">
<h2 class="entry-title"><a href="https://atmokpo.com/w/32923/" rel="bookmark">React Course: Diary App Example, Page Routing with React Router</a></h2> </header><!-- .entry-header -->
<div class="entry-content">
<p><body></p>
<p>In this course, we will explain step by step how to create a simple diary web application using React. This application allows users to write, edit, and delete diaries. Additionally, we will cover how to implement routing to various pages using React Router. This course will be explained in detail so that beginners can easily follow along.</p>
<h2>Table of Contents</h2>
<ol>
<li><a href="#intro">1. Project Introduction</a></li>
<li><a href="#setup">2. Setting Up the Development Environment</a></li>
<li><a href="#create-app">3. Creating a React App</a></li>
<li><a href="#add-router">4. Adding React Router</a></li>
<li><a href="#build-components">5. Building Components</a></li>
<li><a href="#state-management">6. State Management</a></li>
<li><a href="#test">7. Testing and Debugging</a></li>
<li><a href="#deploy">8. Deploying</a></li>
<li><a href="#conclusion">9. Conclusion</a></li>
</ol>
<h2 id="intro">1. Project Introduction</h2>
<p>The diary app provides users with a space to write personal diaries. Users can create new diaries, view previously written diaries in a list, and edit or delete them if necessary. In this process, we will learn the basic concepts of React and how to use React Router.</p>
<h2 id="setup">2. Setting Up the Development Environment</h2>
<p>To use React, you must first install Node.js and npm (Node Package Manager). Once you have installed Node.js and npm, you can easily create and manage React applications. Please download and install it from the official website.</p>
<h3>Installing Node.js</h3>
<p>Download and install the installation file suitable for your operating system from the <a href="https://nodejs.org/">official Node.js website</a>.</p>
<h3>Updating the Package Manager</h3>
<p>After installation, check if npm is up to date and update it if necessary. Enter the following command in the console:</p>
<pre><code>npm install -g npm@latest</code></pre>
<h2 id="create-app">3. Creating a React App</h2>
<p>Now let’s create a new React project using create-react-app. Enter the following command in the console:</p>
<pre><code>npx create-react-app my-diary-app</code></pre>
<p>Navigate to the project folder:</p>
<pre><code>cd my-diary-app</code></pre>
<p>Then, start the development server:</p>
<pre><code>npm start</code></pre>
<p>Navigate to <strong>http://localhost:3000</strong> in your browser to check if the default React page is displayed.</p>
<h2 id="add-router">4. Adding React Router</h2>
<p>Now, let’s install React Router to add routing functionality to the application. Enter the following command to install React Router:</p>
<pre><code>npm install react-router-dom</code></pre>
<p>Open the app/src/index.js file and set up the router:</p>
<pre><code>import { BrowserRouter as Router } from 'react-router-dom';</code></pre>
<p>Wrap the app with the Router:</p>
<pre><code>
ReactDOM.render(
<Router>
<App></App>
</Router>,
document.getElementById('root')
);</code></pre>
<h2 id="build-components">5. Building Components</h2>
<p>Now, let’s create components to set up the pages for routing. We will create a diary list page and a diary creation page.</p>
<h3>Diary List Component</h3>
<p>Create app/src/components/DiaryList.js and enter the following code:</p>
<pre><code>
import React from 'react';
const DiaryList = () => {
return (
<div>
<h2>Diary List</h2>
<ul>
<li>Title: Day One, Content: I felt good today.</li>
<li>Title: Day Two, Content: The weather was nice.</li>
{/* You can add more diaries */}
</ul>
</div>
);
};
export default DiaryList;</code></pre>
<h3>Diary Creation Component</h3>
<p>Create app/src/components/CreateDiary.js and enter the following code:</p>
<pre><code>
import React from 'react';
const CreateDiary = () => {
return (
<div>
<h2>Create Diary</h2>
<form>
<label>Title: </label>
<input type="text"/>
<label>Content: </label>
<textarea></textarea>
<button type="submit">Save</button>
</form>
</div>
);
};
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 (
<div>
<h1>My Diary</h1>
{/* Add routing settings */}
</div>
);
};
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!