Xây dựng một ứng dụng danh sách việc cần làm đơn giản với React

Xây dựng một ứng dụng danh sách việc cần làm đơn giản với React
Độc giả như bạn giúp hỗ trợ MUO. Khi bạn mua hàng bằng các liên kết trên trang web của chúng tôi, chúng tôi có thể kiếm được hoa hồng liên kết. Đọc thêm.

Học một công nghệ mới như React có thể gây nhầm lẫn nếu không có kinh nghiệm thực hành. Là một nhà phát triển, xây dựng các dự án trong thế giới thực là một trong những cách hiệu quả nhất để hiểu các khái niệm và tính năng.





MUO video trong ngày CUỘN ĐỂ TIẾP TỤC VỚI NỘI DUNG

Thực hiện theo quy trình tạo danh sách việc cần làm đơn giản với React và nâng cao hiểu biết của bạn về các nguyên tắc cơ bản của React.



Điều kiện tiên quyết để tạo danh sách việc cần làm

Trước khi bạn bắt đầu dự án này, có một số yêu cầu. Bạn cần có hiểu biết cơ bản về HTML, CSS, JavaScript, ES6 và Phản ứng. Bạn cần có Node.js và npm, trình quản lý gói JavaScript . Bạn cũng cần một trình chỉnh sửa mã, như Visual Studio Code.





Đây là CSS mà dự án này sẽ sử dụng:

 /* styles.css */ 
.App { 
  font-family: sans-serif; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
  height: 100vh; 
} 
 
.Todo { 
  background-color: wheat; 
  text-align: center; 
  width: 50%; 
  padding: 20px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
  margin: auto; 
} 
 
ul { 
  list-style-type: none; 
  padding: 10px; 
  margin: 0; 
} 
 
button { 
  width: 70px; 
  height: 35px; 
  background-color: sandybrown; 
  border: none; 
  font-size: 15px; 
  font-weight: 800; 
  border-radius: 4px; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.input { 
  border: none; 
  width: 340px; 
  height: 35px; 
  border-radius: 9px; 
  text-align: center; 
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; 
} 
 
.Top { 
  display: flex; 
  justify-content: center; 
  gap: 12px; 
} 
 
li { 
  display: flex; 
  justify-content: space-evenly; 
  align-items: center; 
  padding: 10px; 
} 
 
li:before { 
  content: "*"; 
  margin-right: 5px; 
}

1. Thiết lập môi trường dự án

Giai đoạn này bao gồm tất cả các lệnh và tệp cần thiết để thiết lập dự án. Để bắt đầu, hãy tạo một dự án React mới. Mở một thiết bị đầu cuối và chạy lệnh này:



 npx create-react-app todo-list

Quá trình này mất vài phút để cài đặt tất cả các tệp cần thiết cũng như các gói. Nó tạo ra một ứng dụng React mới có tên todo-list. Khi bạn thấy một cái gì đó như thế này, bạn đang đi đúng hướng:

Một danh sách các lệnh để chạy bên trong một thư mục.

Điều hướng đến thư mục của dự án mới tạo của bạn bằng lệnh này:



 cd todo-list

Chạy dự án của bạn cục bộ bằng lệnh này:

 npm start

Và sau đó xem dự án trong trình duyệt của bạn tại http://localhost:3000/.



Trong thư mục src của dự án của bạn, có một vài tệp mà bạn không cần. Xóa các tệp này: Ứng dụng.css , Ứng dụng.test.js , logo.svg , báo cáoWebVitals.js , setupTests.js .

Các tệp trong thư mục src của ứng dụng React.

Đảm bảo rằng bạn tìm câu lệnh nhập trong các tệp có sẵn và xóa mọi tham chiếu đến các tệp đã xóa.

2. Tạo Thành phần TodoList

Đây là thành phần chúng tôi sẽ triển khai tất cả các mã cần thiết cho danh sách việc cần làm. Tạo một tệp có tên “TodoList.js” trong thư mục src của bạn. Sau đó, để kiểm tra xem mọi thứ có hoạt động bình thường không, hãy thêm đoạn mã sau:

 import React from 'react'; 
 
const TodoList = () => { 
    return ( 
        <div> 
            <h2>Hello World </h2> 
        </div> 
    ); 
}; 
 
export default TodoList;  
 

Mở tệp App.js của bạn, nhập thành phần TodoList và hiển thị nó bên trong thành phần Ứng dụng. Nó sẽ trông giống như thế này:

 import React from 'react'; 
import './styles.css' 
import TodoList from './TodoList'; 
 
const App = () => { 
    return ( 
        <div> 
            <TodoList /> 
        </div> 
    ); 
}; 
 
export default App;

Truy cập trình duyệt cục bộ của bạn có localhost:3000 đang chạy và kiểm tra xem “Xin chào thế giới” được viết đậm. Tất cả đều tốt? Đến bước tiếp theo.

3. Xử lý đầu vào và thay đổi đầu vào

Bước này cho phép bạn kích hoạt một sự kiện khi bạn nhập một tác vụ vào hộp nhập liệu. Nhập hook useState từ gói React của bạn. useState là một React hook cho phép bạn quản lý trạng thái một cách hiệu quả .

 import React, { useState } from 'react';

Sử dụng hook useState để tạo một biến trạng thái có tên là “inputTask” với giá trị ban đầu là một chuỗi rỗng. Ngoài ra, hãy gán hàm “setInputTask” để cập nhật giá trị của “inputTask” dựa trên đầu vào của người dùng.

 const [inputTask, setInputTask] = useState("");

Tạo một hàm gọi là “handleInputChange”, nhận một tham số sự kiện. Nó sẽ cập nhật trạng thái inputTask bằng hàm setInputTask. Truy cập giá trị của mục tiêu sự kiện với event.target.value. Điều này sẽ chạy bất cứ khi nào giá trị của trường đầu vào thay đổi.

 const handleInputChange = (event) => { 
    setInputTask(event.target.value); 
};

Trả về một vài phần tử JSX. Đầu tiên là tiêu đề ghi “My Todo-List”, bạn có thể quyết định bất kỳ tiêu đề nào bạn thích. Bao gồm một vài thuộc tính cho các yếu tố đầu vào của bạn. gõ = “văn bản” : Điều này chỉ định loại đầu vào của bạn là văn bản, giá trị={inputTask} : Điều này liên kết giá trị của trường đầu vào với biến trạng thái inputTask, đảm bảo rằng nó phản ánh giá trị hiện tại. onChange={handleInputChange} : Điều này gọi hàm handleInputChange khi giá trị của trường đầu vào thay đổi, cập nhật trạng thái inputTask.

 <div className="Todo"> 
    <h1>My To-Do List</h1> 
    <div className="Top"> 
        <input className="input" type="text" value={inputTask} 
           onChange={handleInputChange} placeholder="Enter a task" />

Tiếp tục, tạo một nút sẽ thêm tác vụ đã nhập vào danh sách.

         <button className="btn">ADD</button> 
   </div> 
</div>

Ở giai đoạn này, đây là cách đầu ra trình duyệt của bạn sẽ trông như thế nào.

Một danh sách việc cần làm trống rỗng.

4. Thêm chức năng vào nút 'THÊM'

Sử dụng sử dụngState hook để tạo một biến trạng thái có tên là 'list' với giá trị ban đầu là một mảng trống. Biến 'setList' lưu trữ mảng tác vụ dựa trên đầu vào của người dùng.

 const [list, setList] = useState([]);

Tạo một hàm handleAddTodo sẽ chạy khi người dùng nhấp vào nút “ADD” để thêm một tác vụ mới. Nó nhận tham số todo, đại diện cho tác vụ mới được nhập bởi người dùng. Sau đó, tạo một đối tượng newTask với một id duy nhất được tạo bằng Math.random() và thuộc tính việc cần làm chứa văn bản đầu vào.

Tiếp tục, cập nhật trạng thái danh sách bằng cách sử dụng toán tử trải phổ […list] để tạo một mảng mới với các tác vụ hiện có trong danh sách. Nối newTask vào cuối mảng. Điều này đảm bảo rằng chúng tôi không thay đổi mảng trạng thái ban đầu. Cuối cùng, đặt lại trạng thái inputTask thành một chuỗi trống, xóa trường nhập khi người dùng nhấp vào nút.

 const handleAddTodo = (todo) => { 
    const newTask = { 
        id: Math.random(), 
        todo: todo 
   }; 
 
   setList([...list, newTask]); 
    setInputTask(''); 
};

Bao gồm cái onClick thuộc tính cho phần tử nút bằng văn bản 'THÊM'. Khi được nhấp vào, nó sẽ kích hoạt chức năng handleAddTodo, chức năng này sẽ thêm tác vụ mới vào trạng thái danh sách

 <button onClick={() => handleAddTodo(inputTask)}>ADD</button>

Ở giai đoạn này, đầu ra trình duyệt của bạn sẽ trông giống như vậy nhưng nếu bạn nhấp vào nút 'THÊM' sau khi nhập tác vụ, trường nhập liệu sẽ trống. Nếu nó hoạt động tốt, hãy chuyển sang bước tiếp theo.

cách sử dụng internet trên roku

5. Thêm nút Xóa

Đây là bước cuối cùng để cho phép người dùng xóa tác vụ của họ nếu họ mắc lỗi hoặc đã hoàn thành tác vụ. Tạo một hàm handleDeleteTodo hoạt động như một trình xử lý sự kiện khi người dùng nhấp vào nút “Xóa” cho một tác vụ cụ thể. Nó lấy id của tác vụ làm tham số.

Bên trong hàm, sử dụng phương thức lọc trên mảng danh sách để tạo một mảng mới newList loại trừ tác vụ có id phù hợp. Phương thức lọc lặp qua từng mục trong mảng danh sách và trả về một mảng mới chỉ chứa các mục thỏa mãn điều kiện đã cho. Trong trường hợp này, hãy kiểm tra xem ID của từng tác vụ có bằng ID được truyền dưới dạng tham số hay không. Cập nhật trạng thái danh sách bằng cách gọi setList(newList), đặt trạng thái thành mảng được lọc mới, loại bỏ tác vụ có id phù hợp khỏi danh sách một cách hiệu quả.

 const handleDeleteTodo = (id) => { 
    const newList = list.filter((todo) =>  
        todo.id !== id 
   ); 
 
    setList(newList);  
};

Sử dụng phương thức bản đồ để lặp lại từng mục trong mảng danh sách và trả về một mảng mới. Sau đó, tạo một phần tử

  • để thể hiện một nhiệm vụ cho từng đối tượng việc cần làm trong mảng danh sách. Đảm bảo thêm thuộc tính key khi hiển thị danh sách các thành phần trong React. Nó giúp React xác định duy nhất từng mục trong danh sách và cập nhật giao diện người dùng một cách hiệu quả khi nó thay đổi. Trong trường hợp này, hãy đặt khóa thành id của từng đối tượng việc cần làm để đảm bảo tính duy nhất.

    Truy cập thuộc tính todo của từng đối tượng todo. cuối cùng, tạo một nút mà khi được nhấp vào sẽ kích hoạt hàm handleDeleteTodo với id của tác vụ tương ứng làm tham số, cho phép chúng tôi xóa tác vụ khỏi danh sách.

     <ul> 
    { list.map((todo) => ( 
       <li className="task" key={todo.id}> 
            {todo.todo} 
            <button onClick={() => handleDeleteTodo(todo.id)}>Delete</button> 
        </li> 
    ))} 
    </ul>

    Đây là cách mã cuối cùng của bạn sẽ trông như thế nào:

     import React, { useState } from 'react'; 
     
    const TodoList = () => { 
        const [inputTask, setInputTask] = useState(''); 
        const [list, setList] = useState([]); 
     
        const handleAddTodo = () => { 
            const newTask = { 
                id: Math.random(), 
                todo: inputTask 
            }; 
     
           setList([...list, newTask]); 
            setInputTask(''); 
        }; 
     
       const handleDeleteTodo = (id) => { 
            const newList = list.filter((todo) => todo.id !== id); 
            setList(newList); 
        }; 
     
       const handleInputChange = (event) => { 
            setInputTask(event.target.value); 
        }; 
     
       return ( 
            <div className="Todo"> 
                <h1>My To-Do List</h1> 
     
                <div className="Top"> 
                    <input className="input" type="text" value={inputTask} 
                       onChange={handleInputChange} placeholder="Enter a task" /> 
     
                    <button className="btn" onClick={handleAddTodo}>ADD</button> 
                </div> 
     
               <ul> 
                    { list.map((todo) => ( 
                        <li className="task" key={todo.id}> 
                            {todo.todo} 
                            <button onClick={() => handleDeleteTodo(todo.id)}> 
                               Delete 
                           </button> 
                        </li> 
                    ))} 
                </ul> 
            </div> 
        ); 
    }; 
     
    export default TodoList;

    Đây là kết quả cuối cùng của bạn sẽ như thế nào, với cả nút thêm và nút xóa hoạt động như mong đợi.

    Một danh sách việc cần làm hiển thị một số nhiệm vụ.

    Xin chúc mừng, bạn đã tạo một danh sách Việc cần làm có thêm và xóa các nhiệm vụ. Bạn có thể tiến xa hơn bằng cách thêm kiểu dáng và nhiều chức năng hơn.

    Sử dụng các dự án trong thế giới thực để học phản ứng

    Thực hành có thể là một cách học hiệu quả. Nó cho phép bạn áp dụng các khái niệm và phương pháp hay nhất của React theo cách thực hành, củng cố hiểu biết của bạn về framework. Có rất nhiều dự án ngoài kia, bạn nên tìm những dự án phù hợp.