纯净代码，简单上手：React 脚手架组件指南

前端

2023-09-28 22:04:37

使用 React 脚手架组件快速构建 React 应用：终极指南

构建 React 应用的捷径

React 脚手架组件是一种预先构建的组件库，可让您快速创建功能齐全的 React 应用程序。通过将这些组件组合在一起，您可以省去从头开始编写代码的麻烦，从而节省大量时间和精力。

一步一步指南：TodoList 项目

为了展示 React 脚手架组件的强大功能，我们将构建一个简单的 TodoList 应用程序。

1. 项目搭建

首先，使用以下命令创建一个新的 React 项目：

npx create-react-app my-app

然后，安装以下依赖项：

npm install react-router-dom axios

2. 构建 TodoList 组件

接下来，让我们构建一个 TodoList 组件：

import React, { useState } from "react";
import { Link } from "react-router-dom";

const TodoList = () => {
  const [todos, setTodos] = useState([]);

  const addTodo = () => {
    setTodos([...todos, "New todo"]);
  };

  const deleteTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>
            <Link to={`/todos/${index}`}>{todo}</Link>
            <button onClick={() => deleteTodo(index)}>Delete</button>
          </li>
        ))}
      </ul>
      <button onClick={addTodo}>Add Todo</button>
    </div>
  );
};

export default TodoList;

3. 路由配置

在 App.js 文件中，配置路由：

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

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={TodoList} />
        <Route path="/todos/:id" component={TodoDetails} />
      </Switch>
    </Router>
  );
};

export default App;