React简单实战项目
时间: 2023-11-26 09:40:30 浏览: 39
React是一个流行的前端JavaScript库,用于构建用户界面。在React中实现简单的实战项目可以帮助你更好地理解和应用React的概念和功能。以下是一个简单的React实战项目示例:
1. 创建一个TodoList(待办事项列表)应用:该应用允许用户添加、完成和删除待办事项。可以使用React的组件化和状态管理功能来实现该应用。
```javascript
import React, { useState } from 'react';
const TodoList = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = () => {
if (inputValue.trim() !== '') {
setTodos([...todos, inputValue]);
setInputValue('');
}
};
const completeTodo = (index) => {
const updatedTodos = [...todos];
updatedTodos[index] = `✓ ${updatedTodos[index]}`;
setTodos(updatedTodos);
};
const deleteTodo = (index) => {
const updatedTodos = todos.filter((_, i) => i !== index);
setTodos(updatedTodos);
};
return (
<div>
<h1>Todo List</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button onClick={addTodo}>Add Todo</button>
<ul>
{todos.map((todo, index) => (
<li key={index}>
{todo}
<button onClick={() => completeTodo(index)}>Complete</button>
<button onClick={() => deleteTodo(index)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;
```