React入门项目：创建你自己的待办事项清单

前端

2022-12-20 07:59:38

React初学者入门：创建一个待办事项清单

踏入前端开发领域的初学者，欢迎使用这个简单实用的React入门项目。通过构建一个精巧的待办事项清单，我们将掌握一些核心React概念，如组件、道具和状态管理。

初学者的完美切入点

这个项目专为初学者设计，以清晰简洁的样式为主，让您专注于构建组件、传递道具、管理状态等基础操作。

需要准备的工具

代码编辑器（如Visual Studio Code或Atom）
Node.js和npm
React
文本编辑器

步步深入，构建待办事项清单

1. 创建新项目

在终端中输入 npx create-react-app todo-list 创建一个名为todo-list的React项目。

2. 安装依赖项

使用 npm install --save react-router-dom 安装用于导航的react-router-dom依赖项。

3. 创建TodoList组件

在src文件夹中创建一个TodoList.js文件，包含一个TodoList组件：

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]); // 定义待办事项列表状态

  const addTodo = (todo) => { setTodos([...todos, todo]); }; // 添加待办事项函数

  const removeTodo = (todo) => { setTodos(todos.filter((t) => t !== todo)); }; // 删除待办事项函数

  return (
    <div>
      <ul>
        {todos.map((todo) => ( // 渲染待办事项列表
          <li key={todo}>{todo} <button onClick={() => removeTodo(todo)}>X</button></li>
        ))}
      </ul>
      <input type="text" placeholder="Add a todo" onKeyPress={(e) => { if (e.key === 'Enter') addTodo(e.target.value); }} /> // 添加待办事项输入框
    </div>
  );
}

export default TodoList;

4. 创建路由

在src文件夹中创建一个App.js文件，包含一个App组件：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import TodoList from './TodoList';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={TodoList} /> // 将根路由映射到TodoList组件
      </Switch>
    </Router>
  );
}

export default App;