React项目实战示例

项目示例：待办事项应用

项目结构

代码示例

1. index.js

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'));

2.App.js

// src/App.js
import React, { useState } from 'react';
import './App.css';
import Todo from './components/Todo';

function App() {
  const [tasks, setTasks] = useState([]);
  const [inputValue, setInputValue] = useState('');

  const addTask = () => {
    if (inputValue) {
      setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
      setInputValue('');
    }
  };

  const deleteTask = (id) => {
    setTasks(tasks.filter(task => task.id !== id));
  };

  const toggleTaskCompletion = (id) => {
    setTasks(tasks.map(task => 
      task.id === id ? { ...task, completed: !task.completed } : task
    ));
  };

  return (
    <div className="App">
      <h1>待办事项列表</h1>
      <input 
        type="text" 
        value={inputValue} 
        onChange={(e) => setInputValue(e.target.value)} 
        placeholder="添加新任务"
      />
      <button onClick={addTask}>添加</button>
      <ul>
        {tasks.map(task => (
          <Todo 
            key={task.id} 
            task={task} 
            deleteTask={deleteTask} 
            toggleTaskCompletion={toggleTaskCompletion} 
          />
        ))}
      </ul>
    </div>
  );
}

export default App;

3.Todo.js

// src/components/Todo.js
import React from 'react';

const Todo = ({ task, deleteTask, toggleTaskCompletion }) => {
  return (
    <li style={{ textDecoration: task.completed ? 'line-through' : 'none' }}>
      {task.text}
      <button onClick={() => toggleTaskCompletion(task.id)}>
        {task.completed ? '未完成' : '完成'}
      </button>
      <button onClick={() => deleteTask(task.id)}>删除</button>
    </li>
  );
};

export default Todo;

4.App.css

/* src/App.css */
.App {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

input {
  padding: 10px;
  margin: 10px 0;
}

button {
  margin-left: 5px;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

用户可以添加新任务、标记任务为完成或未完成，并删除任务。整个应用简单直观，非常适合学习和实践React基础。