安装react并创建一个demo

<think>我们将创建一个简单的待办事项列表（Todo List）应用，使用React的useState Hook来管理状态。 功能包括：添加新任务、标记任务为完成、删除任务。 注意：使用函数组件和Hooks。</think>以下是一个简单的 React 待办事项列表 (Todo List) 应用示例，使用 React Hooks 实现状态管理： ```jsx import React, { useState } from 'react'; function TodoApp() { const [todos, setTodos] = useState([]); const [inputValue, setInputValue] = useState(''); // 添加新待办事项 const addTodo = () => { if (inputValue.trim()) { setTodos([...todos, { id: Date.now(), text: inputValue, completed: false }]); setInputValue(''); } }; // 切换完成状态 const toggleComplete = (id) => { setTodos(todos.map(todo => todo.id === id ? { ...todo, completed: !todo.completed } : todo )); }; // 删除待办事项 const deleteTodo = (id) => { setTodos(todos.filter(todo => todo.id !== id)); }; return ( <div style={{ maxWidth: '400px', margin: '20px auto' }}> <h2>待办事项列表</h2> <div> <input type="text" value={inputValue} onChange={(e) => setInputValue(e.target.value)} placeholder="添加新任务..." onKeyPress={(e) => e.key === 'Enter' && addTodo()} /> <button onClick={addTodo}>添加</button> </div> <ul style={{ listStyle: 'none', padding: 0 }}> {todos.map(todo => ( <li key={todo.id} style={{ margin: '8px 0' }}> <input type="checkbox" checked={todo.completed} onChange={() => toggleComplete(todo.id)} /> <span style={{ textDecoration: todo.completed ? 'line-through' : 'none', margin: '0 10px' }}> {todo.text} </span> <button style={{ color: 'red' }} onClick={() => deleteTodo(todo.id)} > 删除 </button> </li> ))} </ul> </div> ); } export default TodoApp; ``` ### 功能说明： 1. **状态管理**：使用 `useState` 管理待办事项列表和输入框值 2. **添加任务**：通过输入框添加新任务（支持回车提交） 3. **完成任务**：点击复选框切换任务状态（显示删除线） 4. **删除任务**：点击删除按钮移除任务 5. **响应式样式**：已完成任务显示删除线样式 ### 使用说明： 1. 在输入框输入任务内容 2. 点击"添加"按钮或按回车键提交 3. 点击复选框标记任务完成状态 4. 点击"删除"按钮移除任务