Trong bài viết này, chúng tôi sẽ tạo một ứng dụng việc cần làm để hiểu những điều cơ bản về ReactJS . Chúng tôi sẽ làm việc với các thành phần dựa trên lớp trong ứng dụng này và sử dụng mô-đun React-Bootstrap để tạo kiểu cho các thành phần. Danh sách việc cần làm này có thể thêm các nhiệm vụ mới, chúng tôi cũng có thể xóa các nhiệm vụ bằng cách nhấp vào chúng. Logic được xử lý bởi trình xử lý sự kiện nhấp chuột bất cứ khi nào người dùng nhấp vào một tác vụ thì nó sẽ bị xóa khỏi danh sách.

Các bước để tạo Ứng dụng:

• NPX: Đây là một công cụ chạy gói đi kèm với npm 5.2+, npx rất dễ sử dụng các công cụ CLI. Npx được sử dụng để thực thi các gói Node.

npx create-react-app todo-react

• Bây giờ, hãy vào thư mục

cd todo-react

• Cài đặt mô-đun bootstrap và Reac-bootstrap

npm install bootstrap
npm install react-bootstrap

Sau khi làm theo các bước trên, cấu trúc Thư mục sẽ như sau:

Cấu trúc thư mục:

Các phần phụ thuộc trong tệp pack.json sẽ có dạng:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "bootstrap": "^5.3.0",
    "react-bootstrap": "^2.7.4",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example: 

// App.js File
import React, { Component } from "react";
import "bootstrap/dist/css/bootstrap.css";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Button from "react-bootstrap/Button";
import InputGroup from "react-bootstrap/InputGroup";
import FormControl from "react-bootstrap/FormControl";
import ListGroup from "react-bootstrap/ListGroup";
  
class App extends Component {
    constructor(props) {
        super(props);
  
        // Setting up state
        this.state = {
            userInput: "",
            list: [],
        };
    }
  
    // Set a user input value
    updateInput(value) {
        this.setState({
            userInput: value,
        });
    }
  
    // Add item if user input in not empty
    addItem() {
        if (this.state.userInput !== "") {
            const userInput = {
                // Add a random id which is used to delete
                id: Math.random(),
  
                // Add a user value to list
                value: this.state.userInput,
            };
  
            // Update list
            const list = [...this.state.list];
            list.push(userInput);
  
            // reset state
            this.setState({
                list,
                userInput: "",
            });
        }
    }
  
    // Function to delete item from list use id to delete
    deleteItem(key) {
        const list = [...this.state.list];
  
        // Filter values and leave value which we need to delete
        const updateList = list.filter((item) => item.id !== key);
  
        // Update list in state
        this.setState({
            list: updateList,
        });
    }
  
    editItem = (index) => {
      const todos = [...this.state.list];
      const editedTodo = prompt('Edit the todo:');
      if (editedTodo !== null && editedTodo.trim() !== '') {
        let updatedTodos = [...todos]
        updatedTodos[index].value= editedTodo
        this.setState({
          list: updatedTodos,
      });
      }
    }
  
    render() {
        return (
            <Container>
                <Row
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        alignItems: "center",
                        fontSize: "3rem",
                        fontWeight: "bolder",
                    }}
                >
                    TODO LIST
                </Row>
  
                <hr />
                <Row>
                    <Col md={{ span: 5, offset: 4 }}>
                        <InputGroup className="mb-3">
                            <FormControl
                                placeholder="add item . . . "
                                size="lg"
                                value={this.state.userInput}
                                onChange={(item) =>
                                    this.updateInput(item.target.value)
                                }
                                aria-label="add something"
                                aria-describedby="basic-addon2"
                            />
                            <InputGroup>
                                <Button
                                    variant="dark"
                                    className="mt-2"
                                    onClick={() => this.addItem()}
                                >
                                    ADD
                                </Button>
                            </InputGroup>
                        </InputGroup>
                    </Col>
                </Row>
                <Row>
                    <Col md={{ span: 5, offset: 4 }}>
                        <ListGroup>
                            {/* map over and print items */}
                            {this.state.list.map((item, index) => {
                                return (
                                  <div key = {index} > 
                                    <ListGroup.Item
                                        variant="dark"
                                        action
                                        style={{display:"flex",
                                                justifyContent:'space-between'
                                      }}
                                    >
                                        {item.value}
                                        <span>
                                        <Button style={{marginRight:"10px"}}
                                        variant = "light"
                                        onClick={() => this.deleteItem(item.id)}>
                                          Delete
                                        </Button>
                                        <Button variant = "light"
                                        onClick={() => this.editItem(index)}>
                                          Edit
                                        </Button>
                                        </span>
                                    </ListGroup.Item>
                                  </div>
                                );
                            })}
                        </ListGroup>
                    </Col>
                </Row>
            </Container>
        );
    }
}
  
export default App;

Steps to run the Application:

npm start
Gõ đường dẫn sau

 http://localhost:3000/