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:

Code mẫu tham khảo:

1. Xây dựng component ToDoList

ToDoList.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;

1. Xây dựng component ToDoItem

ToDoItem.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;

style.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%);
  }

1. Sử dụng ToDoList trong App

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:

npm install @ant-design/icons --save