React Course: [Diary App] Deployment

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.

1. Project Overview

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:

Diary list display
Diary writing form
Diary detail view
Edit / delete diary functionality

2. Environment Setup

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:

npx create-react-app diary-app

After moving to the project directory, we will install the necessary packages:

cd diary-app

npm install axios react-router-dom

Here, axios is a library for making API calls, and react-router-dom is a library for navigation between pages.

3. Basic Structure Design

The basic structure of the diary app is designed as follows:


src/
|-- components/
|   |-- DiaryList.js
|   |-- DiaryForm.js
|   |-- DiaryDetail.js
|-- App.js
|-- index.js

The roles of each component are as follows:

DiaryList.js: The component that shows the list of diaries
DiaryForm.js: The form for writing a new diary
DiaryDetail.js: The page that shows the details of the selected diary

4. Component Implementation

4.1 DiaryList.js

Let’s implement the component that displays the list of diaries. It fetches data from the API and displays it in a list format:


import React, { useEffect, useState } from 'react';
import axios from 'axios';

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

    useEffect(() => {
        const fetchDiaries = async () => {
            const response = await axios.get('/api/diaries');
            setDiaries(response.data);
        };
        fetchDiaries();
    }, []);

    return (
        
            My Diary List
            
                {diaries.map((diary) => (
                    {diary.title}
                ))}
            
        
    );
};

export default DiaryList;

4.2 DiaryForm.js

Let’s create a form for writing diaries:


import React, { useState } from 'react';
import axios from 'axios';

const DiaryForm = () => {
    const [title, setTitle] = useState('');
    const [content, setContent] = useState('');

    const handleSubmit = async (e) => {
        e.preventDefault();
        const newDiary = { title, content };
        await axios.post('/api/diaries', newDiary);
        // reset state
        setTitle('');
        setContent('');
    };

    return (
        
             setTitle(e.target.value)}
            />
             setContent(e.target.value)}
            />
            <button type="submit">Submit</button>
        
    );
};

export default DiaryForm;

4.3 DiaryDetail.js

Let’s implement the diary detail view page:


import React, { useEffect, useState } from 'react';
import axios from 'axios';

const DiaryDetail = ({ match }) => {
    const [diary, setDiary] = useState({});

    useEffect(() => {
        const fetchDiary = async () => {
            const response = await axios.get(`/api/diaries/${match.params.id}`);
            setDiary(response.data);
        };
        fetchDiary();
    }, [match.params.id]);

    return (
        
            {diary.title}
            {diary.content}
        
    );
};

export default DiaryDetail;

5. Routing Setup

Now we will set up routing between pages using react-router-dom:


import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import DiaryList from './components/DiaryList';
import DiaryForm from './components/DiaryForm';
import DiaryDetail from './components/DiaryDetail';

const App = () => {
    return (
        
            
                
                
                
            
        
    );
};

export default App;

6. Backend Setup

Before deploying the diary app, we need to set up the backend. We will create a simple RESTful API using Express.js. Create a new directory with the command below and install Express:

mkdir diary-backend && cd diary-backend

npm init -y

npm install express body-parser cors

Now, create the server.js file and add the code below:


const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
const PORT = 5000;

app.use(cors());
app.use(bodyParser.json());

let diaries = [];

app.get('/api/diaries', (req, res) => {
    res.json(diaries);
});

app.post('/api/diaries', (req, res) => {
    const newDiary = { id: diaries.length + 1, ...req.body };
    diaries.push(newDiary);
    res.json(newDiary);
});

app.get('/api/diaries/:id', (req, res) => {
    const diary = diaries.find(d => d.id === parseInt(req.params.id));
    res.json(diary);
});

app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}.`);
});

7. Preparing for Deployment

Before deploying the app, we need to perform a few tasks. We will build the client and server to get them ready to run in a production environment.

npm run build

Now the client build has been generated in the build/ directory. We need to configure this directory’s contents to be served by the backend server.

8. Deployment

You can deploy the app using a cloud hosting service. For example, you can use Heroku.

heroku create diary-app

git add .

git commit -m "Deploying diary app"

git push heroku master

9. Conclusion

In this way, we have learned how to build and deploy a diary app using React and Express. Throughout this process, we were able to learn everything from the basic concepts of React to API integration and deployment. Now, try to build your own diary app!