保姆级别手把手教写React的todolist案例

以下是一个简单的React ToDo List示例，包含添加和删除ToDo项的功能。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
 
const ToDoList = () => {
  const [todos, setTodos] = useState([]);
 
  const addTodo = (todo) => {
    setTodos([...todos, todo]);
  };
 
  const removeTodo = (index) => {
    setTodos(todos.filter((todo, i) => i !== index));
  };
 
  return (
    <div>
      <h2>ToDo List</h2>
      <input 
        type="text" 
        placeholder="Add a todo" 
        onChange={(e) => addTodo(e.target.value)} 
      />
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            {todo}
            <button onClick={() => removeTodo(index)}>Remove</button>
          </li>
        ))}
      </ul>
    </div>
  );
};
 
ReactDOM.render(<ToDoList />, document.getElementById('root'));

在HTML文件中，你需要有一个id为root的元素来挂载React应用：

<div id="root"></div>
 
<!-- 引入React和ReactDOM库 -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
 
<!-- 引入你的React应用代码 -->
<script src="your-app-code.js"></script>

确保将上述代码保存到your-app-code.js文件中，并替换上面HTML文件中的引用。这个ToDo List允许用户添加和删除ToDo项，使用React的函数组件和Hooks来管理状态。