This course provides a step-by-step explanation of how to implement common components like
Button and Header for a diary application using React.
The diary app is a web application that allows users to write and save their diaries,
and it is recommended to use React to make the basic UI components familiar.

What is React?

React is a JavaScript library for building user interfaces.
When building the UI of web applications, it maximizes reusability and efficiency through a component-based structure.
React allows for easy management and updating of dynamic UIs using state and props.

What are Common Components?

Common components refer to UI elements that can be reused in multiple places.
In the diary application, elements such as Button and Header are frequently used,
so separating them into components can reduce code duplication and make maintenance easier.

Project Setup

Before starting the project, you need to set up the React environment.
To start a new React application, enter the following command to create a React app:

npx create-react-app diary-app

Then, navigate to the created directory and run the project:

cd diary-app
npm start

Implementing Common Components

1. Button Component

Button component is responsible for creating a clickable button.
This component allows for the easy addition of various button styles and functionalities.
Let’s create the Button component with the code below.

import React from 'react';
import './Button.css'; // CSS file for styling

const Button = ({ onClick, children, className }) => {
    return (
        
            {children}
        
    );
};

export default Button;
    

In the above code, the Button component receives three properties:

• onClick: The function to be called when the button is clicked
• children: The content to be placed inside the button
• className: A property that allows the application of additional CSS classes

Now, let’s create a Button.css file to define the styles.
We will set the basic style of the button as follows.

.button {
    padding: 10px 20px;
    font-size: 16px;
    color: white;
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.button:hover {
    background-color: #0056b3;
}
    

2. Header Component

Header component contains the title and other elements displayed at the top of the application.
Let’s implement the Header component with the code below.

import React from 'react';
import './Header.css';

const Header = () => {
    return (
        

            
My Diary
        
    );
};

export default Header;
    

The above code creates a simple Header component that includes the title of the diary.
Create a Header.css file and specify the styles as follows.

.header {
    padding: 20px;
    background-color: #f8f9fa;
    text-align: center;
    border-bottom: 1px solid #dee2e6;
}
.header h1 {
    margin: 0;
    color: #333;
}
    

Integrating into the App Component

Now, let’s use the implemented Button and Header components in App.js.
Modify App.js as below to integrate the two components.

import React from 'react';
import Header from './Header';
import Button from './Button';

const App = () => {
    const handleButtonClick = () => {
        alert('Button has been clicked!');
    };

    return (
        

            

            

                
Write a Diary
                Write a Diary
            
        
    );
};

export default App;
    

Conclusion

In this course, we explored how to implement common components of the diary application,
Button and Header, using React.
By creating these common components, we can enhance code reusability and simplify maintenance.
If you have gained a deeper understanding of the basics of React components, it will greatly help you in developing more complex applications in the future.

Additional Learning Resources

The official React documentation offers more information and examples about components.
If you want to deepen your understanding of React, please refer to the links below.

• Official React Documentation
• Components and Props
• State and Lifecycle