Cách tạo một ứng dụng React To-Do với React Hooks
React là một thư viện JavaScript front-end được dùng để tạo giao diện user tương tác cho ứng dụng của bạn.Trong hướng dẫn này, bạn sẽ tạo một ứng dụng việc cần làm. Ứng dụng của bạn cần hiển thị nhiệm vụ, thêm nhiệm vụ mới, đánh dấu nhiệm vụ là hoàn thành và xóa nhiệm vụ. Những hành động này sẽ liên quan đến bốn khía cạnh của ứng dụng CRUD (Tạo, Đọc, Cập nhật và Xóa) .
Loại dự án này thường được hoàn thành với các thành phần Class, nhưng ứng dụng này sẽ tích hợp React Hooks thay thế. React Hooks cho phép các thành phần chức năng có trạng thái và sử dụng các phương thức vòng đời, cho phép bạn tránh sử dụng các thành phần Lớp và có nhiều mã module và dễ đọc hơn.
Bạn có thể kiểm tra dự án đã hoàn thành trên CodeSandbox .
Yêu cầu
Để hoàn thành hướng dẫn này, bạn cần :
- Node.js được cài đặt local mà bạn có thể thực hiện theo Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ .
- Một số thông tin quen thuộc với React sẽ có lợi, nhưng không bắt buộc. Bạn có thể xem qua loạt bài Cách viết mã trong React.js của ta .
Bước 1 - Khởi động ứng dụng React
Trước tiên, bạn cần tạo một ứng dụng mới. Trong cửa sổ terminal của bạn, chuyển đến nơi bạn muốn đặt ứng dụng mới của bạn và nhập:
- npx create-react-app react-to-do
Lưu ý: Trước React 16.8, bạn sẽ phải cài đặt bản dựng alpha của React 16.7 để sử dụng React Hooks. Tại thời điểm viết bài này, Create React App sẽ cài đặt version ổn định mới nhất của React (16.13.1) hỗ trợ Hooks.
Tiếp theo, chuyển vào folder dự án mới:
- cd react-to-do
Sau đó, chạy dự án:
- npm start
Điều hướng đến localhost:3000 trong trình duyệt của bạn để xem biểu tượng React xoay tròn.
Ứng dụng của bạn hiện đã được cài đặt và bạn có thể tiếp tục xây dựng phần còn lại của ứng dụng.
Bước 2 - Tạo kiểu cho ứng dụng của bạn
Tạo kiểu sẽ không phải là trọng tâm của hướng dẫn này, nhưng nó sẽ giúp hiển thị các công việc cần làm.
Mở App.css trong trình soạn thảo mã của bạn:
- nano src/App.css
Thay thế nội dung của file này bằng ba lớp bạn sẽ sử dụng trong ứng dụng của bạn :
.app { background: #209cee; height: 100vh; padding: 30px; } .todo-list { background: #e8e8e8; border-radius: 4px; max-width: 400px; padding: 5px; } .todo { align-items: center; background: #fff; border-radius: 3px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15); display: flex; font-size: 12px; justify-content: space-between; margin-bottom: 6px; padding: 3px 10px; } Điều này tạo ra các lớp CSS cho app , todo-list , và todo . Nó tận dụng các đơn vị vh (chiều cao khung nhìn) và thuộc tính flexbox ( align-items và justify-content ).
Tạo kiểu đã hoàn tất. Bây giờ, bạn có thể triển khai các khía cạnh của CRUD.
Bước 3 - Đọc các mục cần làm
Hãy bắt đầu phần Đọc của CRUD. Bạn cần tạo một danh sách những thứ để bạn có thể đọc và xem danh sách.
Một ứng dụng việc cần làm sử dụng các lớp sẽ giống như sau:
class App extends Component { state = { todos: [ { text: "Learn about React" }, { text: "Meet friend for lunch" }, { text: "Build really cool todo app" } ] } setTodos = todos => this.setState({ todos }); render() { return <div></div> } } Bạn sẽ sử dụng React Hooks, vì vậy trạng thái sẽ khác một chút so với khi bạn sử dụng các lớp.
Mở App.js :
- nano src/App.js
Sửa đổi file này để thêm mã dòng sau vào Thành phần App :
import React from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const [todos, setTodos] = React.useState([ { text: "Learn about React" }, { text: "Meet friend for lunch" }, { text: "Build really cool todo app" } ]); return ( // ... ); } export default App; Thành phần là một thành phần chức năng. Trong các version trước đây của React, các thành phần chức năng không thể xử lý trạng thái, nhưng bây giờ, bằng cách sử dụng Hooks, chúng có thể.
- Tham số đầu tiên,
todos, là những gì bạn sẽ đặt tên cho trạng thái của bạn . - Tham số thứ hai,
setTodos, là những gì bạn sẽ sử dụng để cài đặt trạng thái.
Hook của useState là thứ React sử dụng để hook vào trạng thái hoặc vòng đời của thành phần. Sau đó, bạn sẽ tạo một mảng các đối tượng và bạn sẽ có sự khởi đầu của trạng thái của bạn .
Bạn cần tạo một thành phần mà bạn có thể sử dụng sau này khi return thành phần App chính. Bạn sẽ gọi đó là Todo và nó sẽ vượt qua trong các todo và hiển thị các text là một phần của todo ( todo.text ).
App.js lại App.js và thêm thành phần Todo mới trước thành phần App :
import React from 'react'; import logo from './logo.svg'; import './App.css'; function Todo({ todo }) { return ( <div className="todo"> {todo.text} </div> ); }; function App() { // ... } export default App; Hãy tạo một danh sách các mục.
App.js lại App.js và thay thế nội dung của return bằng các dòng mã mới sau:
function App() { // ... return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} /> ))} </div> </div> ); } Bằng việc sử dụng phương pháp JavaScript, map() , bạn có thể tạo ra một mảng mới của các mục bằng cách lập bản đồ trên todo mặt hàng từ nhà nước và hiển thị chúng theo chỉ số.
Điều này thêm một <div> cho app , một <div> cho todo-list , và một bản đồ của todos để Todo thành phần.
Đến đây, bạn cũng có thể xóa logo.svg vì nó sẽ không còn được sử dụng nữa.
Toàn bộ file src/App.js sẽ giống như sau:
import React from "react"; import "./App.css"; function Todo({ todo }) { return ( <div className="todo"> {todo.text} </div> ); }; function App() { const [todos, setTodos] = React.useState([ { text: "Learn about React" }, { text: "Meet friend for lunch" }, { text: "Build really cool todo app" } ]); return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} /> ))} </div> </div> ); } export default App; Mở ứng dụng của bạn trong trình duyệt web. Sẽ có ba mục việc cần làm được hiển thị:
Bạn hiện đang đọc dữ liệu và có thể tiếp tục sang các khía cạnh khác của CRUD.
Bước 4 - Tạo các việc cần làm
Bây giờ, hãy cung cấp cho ứng dụng của bạn sức mạnh để tạo một mục mới cho ứng dụng việc cần làm của bạn.
Khi ở trong file App.js , bạn cần thêm một số thứ.
Đầu tiên, bạn sẽ thêm một thành phần khác có tên là TodoForm . Trong thành phần này, bạn muốn:
- Bắt đầu với trạng thái trống cho một trường đầu vào.
- Có thể cập nhật biểu mẫu bằng cách cài đặt trạng thái.
- Xử lý bài nộp.
Để cài đặt trạng thái của bạn, bạn sẽ viết nó như sau:
const [value, setValue] = React.useState(""); Đầu tiên là “giá trị” và thứ hai là cách bạn sẽ cài đặt trạng thái. Trạng thái bắt đầu trống và khi bạn thêm mọi thứ vào trạng thái của bạn , nó sẽ thêm nó vào danh sách các việc cần làm của bạn.
Bạn cần thêm vào một biến handleSubmit có thể xử lý hàm addTodo của bạn và thêm mục vào danh sách. Nếu không có gì trong hộp nhập và user nhấn ENTER , bạn muốn nó không thêm mục trống vào danh sách.
Thêm chức năng vào biểu mẫu có hộp nhập:
// ... function TodoForm({ addTodo }) { const [value, setValue] = React.useState(""); const handleSubmit = e => { e.preventDefault(); if (!value) return; addTodo(value); setValue(""); }; return ( <form onSubmit={handleSubmit}> <input type="text" className="input" value={value} onChange={e => setValue(e.target.value)} /> </form> ); } function App() { // ... } // ... Thêm thành phần TodoForm mới này vào thành phần App của bạn:
function App() { // ... return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} /> ))} <TodoForm addTodo={addTodo} /> </div> </div> ); } Hãy xây dựng hàm addTodo ngay bây giờ.
Ở trong App.js , dưới trạng thái của thành phần App , chức năng sẽ có thể lấy danh sách các mục hiện có, thêm vào mục mới và hiển thị danh sách mới đó.
function App() { // ... const addTodo = text => { const newTodos = [...todos, { text }]; setTodos(newTodos); }; return( // ... ); } Lưu ý không có this.state . Với React Hooks mới, bạn sẽ không sử dụng this.state vì Hooks mới hiểu rằng nó sẽ được ngụ ý ở một số nơi nhất định.
Cũng có mộttoán tử spread trong mã. Ba chấm trước khi todos sao chép danh sách cho bạn để bạn có thể thêm vào mới để làm mục. Sau đó, sử dụng từ khóa mà bạn đã đặt trước đó, bạn sẽ cài đặt trạng thái với setTodos .
Mở ứng dụng của bạn trong trình duyệt web. Sẽ có ba mục việc cần làm được hiển thị. Cũng nên có một trường để thêm các mục việc cần làm mới:
Đến đây bạn đang tạo dữ liệu và có thể tiếp tục đến các khía cạnh khác của CRUD.
Bước 5 - Cập nhật các việc cần làm
Hãy thêm chức năng gạch bỏ một mục trong danh sách việc cần làm của bạn khi chúng hoàn thành.
Trạng thái trong Thành phần App của bạn cần thêm một chút để trạng thái "Đã hoàn thành" có thể thay đổi. Bạn sẽ thêm một cặp key-value khác vào danh sách các đối tượng của bạn .
Bằng cách thêm vào một giá trị isCompleted: false , bạn sẽ đặt giá trị đó thành false để bắt đầu và khi được yêu cầu , sẽ thay đổi giá trị đó thành true .
App.js lại App.js và thêm isCompleted vào trạng thái của bạn:
function App() { const [todos, setTodos] = React.useState([ { text: "Learn about React", isCompleted: false }, { text: "Meet friend for lunch", isCompleted: false }, { text: "Build really cool todo app", isCompleted: false } ]); // ... } Bạn cần một chức năng như chức năng addTodo , nhưng chức năng này sẽ có thể đánh dấu một mục là “Hoàn thành”. Bạn sẽ làm những việc tương tự như bạn đã làm trong addTodo , như sử dụng toán tử spread để lấy danh sách các mục hiện tại. Trong chức năng này, bạn sẽ thay đổi trạng thái isCompleted thành true để nó biết rằng nó đã hoàn tất. Sau đó, nó sẽ cập nhật trạng thái và đặt trạng thái thành newTodos .
Cập nhật mã của bạn với những điều sau:
function App() { // ... const completeTodo = index => { const newTodos = [...todos]; newTodos[index].isCompleted = true; setTodos(newTodos); }; return ( // ... ) } Bằng cách sử dụng completeTodo trong chức năng Todo , bạn có thể sử dụng chức năng đó. Khi nhấp vào nút Hoàn thành, nút này sẽ thêm vào dòng textDecoration: line-through tạo kiểu textDecoration: line-through và gạch bỏ mục đó.
Bạn sẽ sử dụng toán tử bậc ba để hoàn thành một mục và cập nhật danh sách:
function Todo({ todo, index, completeTodo }) { return ( <div className="todo" style={{ textDecoration: todo.isCompleted ? "line-through" : "" }} > {todo.text} <div> <button onClick={() => completeTodo(index)}>Complete</button> </div> </div> ); } Thêm completeTodo trong phần Todo của việc trả lại thành phần App :
function App() { // ... return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} completeTodo={completeTodo} /> ))} <TodoForm addTodo={addTodo} /> </div> </div> ); } Mở ứng dụng của bạn trong trình duyệt web. Sẽ có ba mục việc cần làm được hiển thị. Cũng sẽ có một nút Hoàn thành để đánh dấu các mục cần làm là đã hoàn thành.
Bạn hiện đang cập nhật dữ liệu và có thể tiếp tục các khía cạnh cuối cùng của CRUD.
Bước 6 - Xóa các việc cần làm
Hãy thêm chức năng xóa một mục trong danh sách việc cần làm của bạn khi chúng bị xóa.
Bạn sẽ xây dựng chức năng removeTodo để khi bạn nhấp vào dấu X để xóa một mục, mục đó sẽ bị xóa. Chức năng đó sẽ được đặt bởi những người khác bên dưới trạng thái của thành phần App ;
function App() { // ... const removeTodo = index => { const newTodos = [...todos]; newTodos.splice(index, 1); setTodos(newTodos); }; return ( // ... ) } Trong hàm removeTodo này, bạn sẽ lại sử dụng toán tử lây lan, nhưng khi bạn lấy danh sách hiện tại đó, bạn sẽ nối index đã chọn ra khỏi mảng các mục. Khi điều đó được xóa, bạn sẽ trả lại trạng thái mới bằng cách đặt nó với setTodos thành newTodos .
Trong chức năng Todo của bạn, bạn cần thêm một nút để xóa mục việc cần làm:
function Todo({ todo, index, completeTodo, removeTodo }) { return ( <div className="todo" style={{ textDecoration: todo.isCompleted ? "line-through" : "" }} > {todo.text} <div> <button onClick={() => completeTodo(index)}>Complete</button> <button onClick={() => removeTodo(index)}>x</button> </div> </div> ); } Thêm removeTodo trong phần Todo của việc trả về thành phần App :
function App() { // ... return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} completeTodo={completeTodo} removeTodo={removeTodo} /> ))} <TodoForm addTodo={addTodo} /> </div> </div> ); } Mở ứng dụng của bạn trong trình duyệt web. Sẽ có ba mục việc cần làm được hiển thị. Cũng sẽ có một nút X để xóa các mục việc cần làm.
Đến đây bạn đang xóa dữ liệu và đã triển khai tất cả bốn khía cạnh của CRUD.
Bước 7 - Hoàn thiện ứng dụng
Sau khi bạn đã tập hợp thành phần Todo , thành phần TodoForm và thành phần App , file App.js của bạn sẽ giống như sau:
import React from "react"; import "./App.css"; function Todo({ todo, index, completeTodo, removeTodo }) { return ( <div className="todo" style={{ textDecoration: todo.isCompleted ? "line-through" : "" }} > {todo.text} <div> <button onClick={() => completeTodo(index)}>Complete</button> <button onClick={() => removeTodo(index)}>x</button> </div> </div> ); } function TodoForm({ addTodo }) { const [value, setValue] = React.useState(""); const handleSubmit = e => { e.preventDefault(); if (!value) return; addTodo(value); setValue(""); }; return ( <form onSubmit={handleSubmit}> <input type="text" className="input" value={value} onChange={e => setValue(e.target.value)} /> </form> ); } function App() { const [todos, setTodos] = React.useState([ { text: "Learn about React", isCompleted: false }, { text: "Meet friend for lunch", isCompleted: false }, { text: "Build really cool todo app", isCompleted: false } ]); const addTodo = text => { const newTodos = [...todos, { text }]; setTodos(newTodos); }; const completeTodo = index => { const newTodos = [...todos]; newTodos[index].isCompleted = true; setTodos(newTodos); }; const removeTodo = index => { const newTodos = [...todos]; newTodos.splice(index, 1); setTodos(newTodos); }; return ( <div className="app"> <div className="todo-list"> {todos.map((todo, index) => ( <Todo key={index} index={index} todo={todo} completeTodo={completeTodo} removeTodo={removeTodo} /> ))} <TodoForm addTodo={addTodo} /> </div> </div> ); } export default App; Đến đây bạn có một ứng dụng cho tất cả bốn khía cạnh của CRUD. Tạo mục việc cần làm, đọc mục việc cần làm, cập nhật mục việc cần làm và xóa mục việc cần làm.
Kết luận
Ứng dụng việc cần làm có thể là một dấu nhắc nhở hoặc điểm khởi đầu tuyệt vời khi nói đến CRUD trong phát triển web. Khả năng đọc thông tin, tạo thông tin mới, cập nhật thông tin hiện có và xóa thông tin có thể rất mạnh trong bất kỳ ứng dụng nào.
Trong hướng dẫn này, bạn đã tạo một ứng dụng danh sách việc cần làm CRUD với React Hooks , cho phép mã rõ ràng, ngắn gọn và dễ hiểu.
Nếu bạn muốn tìm hiểu thêm về React, hãy xem trang chủ đề React của ta để biết các bài tập và dự án lập trình.
Các tin liên quan
