# 2.4. Ứng dụng component vào dự án đơn giản

Vận dụng kiến thức về component đã học để hoàn thiện giao diện todo-app list đơn giản theo hình dưới đây:

<figure><img src="/files/r8pycRpRtvifsIM4zaoX" alt=""><figcaption></figcaption></figure>

*Code mẫu tham khảo:*

1. Xây dựng component ToDoList

{% code title="ToDoList.jsx" %}

```jsx
import ToDoItem from "../ToDoItem";
import { PlusCircleOutlined } from '@ant-design/icons'

const ToDoList = () => {
    return (
        <div className="ToDoList" style={{marginLeft: '10px'}}>
            <h1>My work 🎯</h1>
            <div>
                <ToDoItem title="Gửi email nộp bài tập về nhà" dueDate="Hôm nay"></ToDoItem>
                <ToDoItem title="Học từ vựng tiếng anh mỗi ngày" dueDate="Ngày mai"></ToDoItem>
                <ToDoItem title="Viết tiểu luận môn Triết học" dueDate="Tuần tới"></ToDoItem>
            </div>
            <div style={{marginTop: '5px'}}>
                <PlusCircleOutlined style={{fontSize: '20px', color: '#d1453b'}} /> Add Task
            </div>
        </div>
    )
}
export default ToDoList;
```

{% endcode %}

2. Xây dựng component ToDoItem

{% code title="ToDoItem.jsx" %}

```jsx
import './style.css';
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
const ToDoItem = (props) =>{
    return (
        <div className="ToDoItem">
            <input type="checkbox" />
            <div className='ItemContent'>
                <p className='Title'>{props.title}</p>
                <p className='DueDate'>{props.dueDate}</p>
            </div>
            <div className='Action'>
                <EditOutlined />
                <DeleteOutlined />
            </div>
        </div>
    );
}
export default ToDoItem;
```

{% endcode %}

{% code title="style.css" %}

```css
.ToDoItem{
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
}
.ItemContent{
    margin-right: 50px;
    margin-left: 10px;
    width: 90%;
}

.ToDoItem .Title{
    font-size: 14px;
}

.ToDoItem .DueDate {
    font-size: 12px;
}

.ToDoItem .Action *{
    margin-right: 5px;
}

.ToDoItem input[type="checkbox"] {
    appearance: none; /* Loại bỏ kiểu mặc định của checkbox */
    -webkit-appearance: none; /* Loại bỏ kiểu mặc định cho trình duyệt WebKit */
    -moz-appearance: none; /* Loại bỏ kiểu mặc định cho Firefox */
    width: 20px; /* Đặt kích thước checkbox */
    height: 20px;
    background-color: #fff; /* Màu nền */
    border: 2px solid #000; /* Đặt viền */
    border-radius: 50%; /* Biến checkbox thành hình tròn */
    position: relative;
    cursor: pointer;
}

.ToDoItem input[type="checkbox"]:checked {
    background-color: #007bff; /* Màu nền khi được chọn */
    border-color: #007bff;
}

.ToDoItem input[type="checkbox"]:checked::before {
    content: "\2713"; /* Biểu tượng dấu check (dùng mã Unicode) */
    color: white; /* Màu của dấu check */
    font-size: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
```

{% endcode %}

3. Sử dụng ToDoList trong App

```javascript
import React from 'react';
import './App.css';
import ToDoList from './components/ToDoList';

function App() {
  return (
    <div className="App">
       <ToDoList></ToDoList>
    </div>
  );
}

export default App;
```

Trong đoạn code trên, sử dụng thêm thư viện AntDesgin để sử dụng các component icon. Phần này, chúng ta sẽ được tìm hiểu sau. Nếu bạn nào sử dụng thư viện này, có thể cài đặt bằng cách chạy lệnh sau:&#x20;

```bash
npm install @ant-design/icons --save
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://vu-van-thuong.gitbook.io/web/2.-kien-truc-va-component/2.4.-ung-dung-component-vao-du-an-don-gian.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.