Imagen Suyash Chandrakar

Este es un gran proyecto para principiantes porque es relativamente sencillo de implementar y le permite demostrar su comprensión de los conceptos básicos de React.

importar React, {useState} de “react”;
importar axios desde “axios”;

const ListaTodo = () => {
constante [todos, setTodos] = usarEstado([]);

const handleAddTodo = (todo) => {
axios.post(“/todos”, { todo })
.entonces((res) => {
establecerTodos([…todos, res.data]);
})
.catch((err) => {
consola.log(err);
});
};

const handleDeleteTodo = (id) => {
axios.delete(`/todos/${id}`)
.entonces((res) => {
setTodos(todos.filter((todo) => todo.id !== id));
})
.catch((err) => {
consola.log(err);
});
};

devolver (

);
};

exportar TodoList predeterminado;

Este código utiliza el usoEstado gancho para almacenar la lista de todos en el estado. Cuando se agrega una nueva tarea, el manejarAddTodo Se llama a la función, lo que hace que Solicitud de publicación hacia /todos punto final. Luego, la respuesta de la API se utiliza para actualizar la lista de todos en el estado.

El manejarDeleteTodo Se utiliza una función para eliminar una tarea pendiente de la lista. hace un Borrar petición hacia /todos punto final con la identificación de la tarea que se va a eliminar. Luego, la respuesta de la API se utiliza para actualizar la lista de todos en el estado.

El Lista de quehaceres El componente es un componente de React simple que muestra una lista de todos y un formulario para agregar nuevos todos. El manejarAddTodo y manejarDeleteTodo Las funciones se utilizan para interactuar con la API.

Para ejecutar este código, necesitará instalar el axios paquete. Puedes hacer esto ejecutando el siguiente comando en tu terminal:

npm instala axios

Una vez que haya instalado el axios paquete, puede ejecutar el código iniciando un servidor de desarrollo. Puedes hacer esto ejecutando el siguiente comando en tu terminal:

inicio de npm

Esto iniciará un servidor de desarrollo en puerto 3000. Luego puede abrir su navegador y navegar hasta http://localhost:3000 ver la aplicación de lista de tareas pendientes.

Para agregar una nueva tarea, simplemente ingrese el texto de la tarea en el campo de entrada y haga clic en el Botón “Agregar”. Para eliminar una tarea pendiente, haga clic en “Borrar” botón al lado de la tarea pendiente.

La aplicación de lista de tareas interactuará con la API para guardar y eliminar todas. Puede ver la documentación de la API abriendo el api.docs.json archivo en su editor de texto.