第一步:创建项目
使用 Create React App 工具初始化项目:
npx create-react-app todo-app
cd todo-app
第二步:设置项目结构
创建 components
目录用于存放组件文件
mkdir src/components
第三步:实现组件
1. Header.js
- 应用标题
// src/components/Header.js
import React from 'react';
const Header = () => {
return (
<header className="header">
<h1>待办事项应用</h1>
</header>
);
};
export default Header;
2. TodoItem.js
- 单个待办事项
// src/components/TodoItem.js
import React from 'react';
const TodoItem = ({ todo, toggleComplete, deleteTodo }) => {
return (
<div className={`todo-item ${todo.completed ? 'completed' : ''}`}>
<span onClick={() => toggleComplete(todo.id)}>{todo.text}</span>
<button onClick={() => deleteTodo(todo.id)}>删除</button>
</div>
);
};
export default TodoItem;
3. TodoList.js
- 待办事项列表
// src/components/TodoList.js
import React from 'react';
import TodoItem from './TodoItem';
const TodoList = ({ todos, toggleComplete, deleteTodo }) => {
return (
<div className="todo-list">
{todos.map((todo) => (
<TodoItem
key={todo.id}
todo={todo}
toggleComplete={toggleComplete}
deleteTodo={deleteTodo}
/>
))}
</div>
);
};
export default TodoList;
4. App.js
- 主应用组件
// src/App.js
import React, { useState } from 'react';
import Header from './components/Header';
import TodoList from './components/TodoList';
import './styles.css';
const App = () => {
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
const addTodo = (text) => {
setTodos([
...todos,
{ id: Date.now(), text, completed: false }
]);
};
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));
};
const handleSubmit = (e) => {
e.preventDefault();
if (inputValue.trim()) {
addTodo(inputValue);
setInputValue('');
}
};
return (
<div className="app">
<Header />
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="添加待办事项"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
/>
<button type="submit">添加</button>
</form>
<TodoList todos={todos} toggleComplete={toggleComplete} deleteTodo={deleteTodo} />
</div>
);
};
export default App;
第四步:样式文件
styles.css
/* src/styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.app {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 300px;
}
.header {
text-align: center;
margin-bottom: 20px;
}
form {
display: flex;
justify-content: space-between;
}
form input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
}
form button {
margin-left: 10px;
padding: 10px 15px;
border: none;
background: #007bff;
color: white;
border-radius: 4px;
cursor: pointer;
}
.todo-list {
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid #ddd;
}
.todo-item.completed span {
text-decoration: line-through;
color: #999;
}
.todo-item button {
border: none;
background: #ff4d4d;
color: white;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
第五步:启动应用
确保在项目根目录下执行:
npm start
在浏览器中访问 http://localhost:3000
,你应该能看到一个简单的待办事项应用。
项目概述
- 组件化:应用分为
Header
,TodoItem
, 和TodoList
等独立组件。 - 状态管理:通过
useState
钩子管理待办事项列表及输入框状态。 - 事件处理:处理添加、完成、删除待办事项的事件。
- 样式:简单的 CSS 样式。
这个入门项目帮助你掌握 React 的基础概念,理解如何使用状态、钩子和组件进行开发。可以在此基础上进一步扩展功能,如添加本地存储、使用 Redux 等。