Setting Common Styles

Hello! In this React tutorial, we will learn about React and how to set common styles through a diary app example. React is a component-based library that is very useful for building user interfaces. The diary app we will develop in this tutorial will be an application where users can record their thoughts and feelings.

Project Setup

First, we will create a new React project. For this, we will use create-react-app. Run the command below to set up the project:

    npx create-react-app diary-app
    cd diary-app
    npm start
    

Setting Common Styles

To ensure visual consistency in the diary app, we need to set common styles. Generally, styles can be set through a CSS file, but in React, we can use methods such as styled-components or CSS Modules. Here, we will simply use the App.css file to set up styles.

Creating Basic Styles

First, open the src/App.css file and add the basic styles as follows:

    body {
        background-color: #f0f4f8;
        font-family: 'Arial', sans-serif;
        margin: 0;
        padding: 0;
    }

    h1 {
        color: #333;
        text-align: center;
    }

    .diary-entry {
        border: 1px solid #ddd;
        border-radius: 4px;
        padding: 15px;
        margin: 10px 0;
        background: #fff;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.1);
    }

    .entry-title {
        font-size: 1.5em;
        color: #007acc;
    }

    .entry-date {
        color: #888;
        font-size: 0.9em;
    }

    .entry-content {
        margin-top: 10px;
        font-size: 1.1em;
    }
    

Creating a Diary Component

We will create a new component to display diary entries. Create a file named src/DiaryEntry.js and write as follows:

// src/DiaryEntry.js
import React from 'react';
import './App.css';

const DiaryEntry = ({ title, date, content }) => {
    return (
        

            
{title}
            
{date}
            
{content}
        
    );
};

export default DiaryEntry;
    

Final Structure of the Diary App

Now, let’s open the src/App.js file and write as follows:

// src/App.js
import React from 'react';
import DiaryEntry from './DiaryEntry';
import './App.css';

const App = () => {
    const diaryEntries = [
        { title: 'First Diary', date: '2023-10-01', content: 'Today was really a happy day!' },
        { title: 'Second Diary', date: '2023-10-02', content: 'It\'s a rainy day. I feel a little down.' },
        { title: 'Third Diary', date: '2023-10-03', content: 'I looked at the sky while reading a good book.' },
    ];

    return (
        

            
My Diary
            {diaryEntries.map((entry, index) => (
                
            ))}
        
    );
};

export default App;
    

State Management and Styling

To enhance the styles of the diary app, various styles can be applied along with state management. For example, implementing features to add and delete diary entries can improve user experience.

Using State Management Libraries

We will use the useState and useEffect hooks for state management in React. Add the code below to src/App.js to implement the feature for adding diary entries:

import React, { useState } from 'react';
// import DiaryEntry from './DiaryEntry';
// import './App.css';

const App = () => {
    const [entries, setEntries] = useState([
        { title: 'First Diary', date: '2023-10-01', content: 'Today was really a happy day!' },
        { title: 'Second Diary', date: '2023-10-02', content: 'It\'s a rainy day. I feel a little down.' },
    ]);

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

    const addEntry = () => {
        const newEntry = {
            title,
            date: new Date().toLocaleDateString(),
            content,
        };
        setEntries([...entries, newEntry]);
        setTitle('');
        setContent('');
    };

    return (
        

            
My Diary
             setTitle(e.target.value)}
            />
             setContent(e.target.value)}
            />
            <button onclick="{addEntry}">Add Diary</button>
            {entries.map((entry, index) => (
                <diaryentry content="{entry.content}" date="{entry.date}" key="{index}" title="{entry.title}"></diaryentry>
            ))}
        
    );
};

export default App;
    

Conclusion

Now we have learned how to set up a diary app using React and how to set common styles. Through these basic elements, we have established a foundation necessary to develop more complex applications. Upcoming topics will include styling libraries, data fetching, and more complex state management patterns. I hope you continue to learn and practice React to become a better developer!