使用React，打字稿，Vite和Chakra UI构建一个Todo Crud应用-DEV365 开发者社区

介绍

你好！ ð

最近，我一直在学习如何在几个项目中使用vite，所以我认为我会接受我学到的东西，并向您展示如何使用以下堆栈来创建一个简单的crud应用程序：react，typescript， Vite，脉轮UI。

我还将使用jsonserver，如果您快速需要REST服务器，这是一个非常有用的模块。服务器的请求将使用Axios模块完成。

好吧，让我们开始。 ð

使用此堆栈的原因

首先，我想解决为什么要在本教程中使用上述堆栈。

React：流行的前端库。反应使我们能够制作交互式用户界面。其基于组件的体系结构有助于代码可重复性和状态管理。我还处理比vue.js等更多的反应项目
打字稿：Typescript是添加静态类型的JavaScript的超集。它有助于尽早发现错误，提高代码质量，并通过Intellisense提供更好的开发人员体验。
vite：Vite是一种现代化的构建工具，可提供闪电般的热模块更换（HMR），以使开发人员体验更流畅。它针对现代JS生态系统进行了优化。
Chakra UI：这是一个模块化且易于访问的组件库，使我们在不牺牲功能或性能的情况下简单地设置了我们的反应应用程序。
jsonserver：jsonserver使用JSON文件嘲笑REST API，让Frontend开发人员原型和无后端测试。
Axios：Axios是一个简化HTTP请求的JavaScript库。它比内置的fetch api更直观，并且与现代异步/等待语法很好地整合。

现在让我们开始创建应用程序。 -

设置项目

首先，我们需要安装Vite CLI，打开一个终端窗口并输入以下命令：

npm i -g create-vite

旁边创建一个Vite项目，您需要运行以下命令：

create-vite vite-todo --template react-ts

模板告诉VITE我们需要一个反应打字稿应用程序。

下一个通过以下命令安装依赖项：

cd vite-todo && npm i

我们还需要安装此项目所需的依赖项，这可以通过以下命令完成：

npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion

接下来，我们需要设置模拟REST API服务器，这可以通过创建一个简单的JSON文件，创建一个名为“ DB.JSON”的文件来完成，并在以下内容中填充它：

{
    "todos": []
}

在这里，我们用一个空数组来创建它，以表示没有招待。

下一个使用以下命令启动模拟JSON服务器：

npx json-server --watch db.json --port 5000

现在，服务器应在以下URL上工作：
http://localhost:5000/todos

访问它，您应该得到一个空数组。现在，我们可以开始编码前端。 ð

编码前端

现在，我们最终可以开始编码应用程序的前端，打开“ src/app.tsx”，然后用以下内容替换内容：

import React, {
  useState,
  useEffect
} from 'react';
import axios from 'axios';
import {
  Box,
  Button,
  Input,
  VStack,
  Checkbox,
  HStack,
  Container,
  Heading,
  Center
} from '@chakra-ui/react';

type Todo = {
  id: number;
  title: string;
  completed: boolean;
};

const App = () => {
  const [todos, setTodos] = useState<Todo[]>([]);
  const [newTodo, setNewTodo] = useState<string>('');

  useEffect(() => {
    const fetchTodos = async (): Promise<void> => {
      const response = await axios.get<Todo[]>('http://localhost:5000/todos');
      setTodos(response.data);
    };

    fetchTodos();
  }, []);

  const addTodo = async (): Promise<void> => {
    const response = await axios.post<Todo>('http://localhost:5000/todos', {
      title: newTodo,
      completed: false
    });

    setTodos([...todos, response.data]);
    setNewTodo('');
  };

  const updateTodo = async (id: number, title: string): Promise<void> => {
    const updatedTodo = { title, completed: false };
    await axios.put(`http://localhost:5000/todos/${id}`);
    setTodos(todos.map(todo => (todo.id === id ? { ...todo, title } : todo)));
  };

  const deleteTodo = async (id: number): Promise<void> => {
    await axios.delete(`http://localhost:5000/todos/${id}`);
    setTodos(todos.filter(todo => todo.id !== id));
  };

  const toggleComplete = async (id: number): Promise<void> => {
    const todo = todos.find(todo => todo.id === id);

    if (todo) {
      const updatedTodo = { ...todo, completed: !todo.completed };
      await axios.put(`http://localhost:5000/todos/${id}`, updatedTodo);
      setTodos(todos.map(todo => (todo.id === id ? updatedTodo : todo)));
    }
  };

  return (
    <Container maxW="container.md" p={5}>
      <Center>
        <Heading mb={5}>Simple Todo App</Heading>
      </Center>

      <Input
        value={ newTodo }
        onChange={
          (e) => setNewTodo(e.target.value)
        }
        placeholder="Add a new todo"
      />

      <Center mt={2} mb={5}>
        <Button
          onClick={ addTodo }
          mt={2}
        >Add Todo</Button>
      </Center>

      <VStack spacing={ 4 }>
        { todos.map(todo => (
          <HStack key={ todo.id }>
            <Checkbox
              isChecked={ todo.completed }
              onChange={
                () => toggleComplete(todo.id)
              }
            />
            <Input
              defaultValue={ todo.title }
              onBlur={
                (e) => updateTodo(todo.id, e.target.value)
              }
            />
            <Button onClick={
              () => deleteTodo(todo.id)
            }>
              Delete
            </Button>
          </HStack>
        ))}
      </VStack>
    </Container>
  );
};

export default App;

使用上述代码，我们导入所需的依赖项，定义A TODO类型并使用Chakra UI创建基本UI。我们还为每个CRUD操作提供了功能。

接下来，我们需要编辑“ src/main.tsx”文件才能显示我们的应用程序，打开文件并用以下内容替换内容：

import React from 'react';
import { createRoot } from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <ChakraProvider>
      <App />
    </ChakraProvider>
  </React.StrictMode>
);

全部完成了！ ð为了运行应用程序运行以下命令：

npm run dev

接下来打开浏览器并访问以下URL：
http://localhost:5173/

您现在应该查看以下页面：（我添加了几个Todos）

完成！ ðº可以随意使用UI等。

结论

在本教程中，我向您展示了如何使用React，Typecript，Vite和Chakra UI创建基本的TODO应用程序，并使用Jsonserver作为REST API以及使用Axios向服务器提出请求。

我希望本教程能帮助您入门，我对Vite的学习很有趣。

随时尝试用真实的API和数据库替换模拟REST API，也许尝试改进UI。

像往常一样，您可以在我的github上找到教程的代码：
https://github.com/ethand91/vite-todo

愉快的编码！ ð

如果您感谢我的工作？我涵盖了各种主题。有关更多信息，请喜欢并关注我。
另外，我喜欢咖啡。

如果您想学习算法模式以ace进行编码面试，我建议following course