Scribd
Upload
2 views

Ajay Create a Todo app Code

The document outlines the steps to create a simple Todo application using Node.js for the backend and React for the frontend. It includes instructions for setting up the server with Express, handling CRUD operations for todos, and creating a React app to interact with the backend. Finally, it provides commands for starting both the backend and frontend applications.

Uploaded by

singhajaykavitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

Ajay Create a Todo app Code

The document outlines the steps to create a simple Todo application using Node.js for the backend and React for the frontend. It includes instructions for setting up the server with Express, handling CRUD operations for todos, and creating a React app to interact with the backend. Finally, it provides commands for starting both the backend and frontend applications.

Uploaded by

singhajaykavitha
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Coding:

Intiate a Node :

Mkdir todo-app-backend

Cd todo-app-backend

Npm init -y

Install dependencies :

Npm install express cors body-parser

Create the Server.js:

Const express = require(‘express’);

Const bodyParser = require(‘body-parser’);

Const cors = require(‘cors’);

Const app = express();

Const PORT = 5000;

App.use(cors());

App.use(bodyParser.json());

Let todos = [];

// Get all todos

App.get(‘/todos’, (req, res) => {

Res.json(todos);

});

// Add a new todo

App.post(‘/todos’, (req, res) => {


Const newTodo = { id: Date.now(), text: req.body.text };

Todos.push(newTodo);

Res.json(newTodo);

});

// Delete a todo

App.delete(‘/todos/:id’, (req, res) => {

Const id = parseInt(req.params.id, 10);

Todos = todos.filter(todo => todo.id !== id);

Res.json({ message: ‘Todo deleted successfully!’ });

});

App.listen(PORT, () => {

Console.log(`Server running on http://localhost:${PORT}`);

});

Front set Up :

Npx create-react-app todo-app-frontend

Cd todo-app-frontend

Install Axios :

Npm install axios

Update Src :

Import React, { useState, useEffect } from ‘react’;

Import axios from ‘axios’;

Const App = () => {

Const [todos, setTodos] = useState([]);

Const [newTodo, setNewTodo] = useState(‘’);


Const fetchTodos = async () => {

Const response = await axios.get(‘http://localhost:5000/todos’);

setTodos(response.data);

};

Const addTodo = async () => {

If (newTodo.trim() === ‘’) return;

Const response = await axios.post(‘http://localhost:5000/todos’, { text:


newTodo });

setTodos([…todos, response.data]);

setNewTodo(‘’);

};

Const deleteTodo = async (id) => {

Await axios.delete(`http://localhost:5000/todos/${id}`);

setTodos(todos.filter(todo => todo.id !== id));

};

useEffect(() => {

fetchTodos();

}, []);

Return (

<div style={{ padding: ‘20px’ }}>

<h1>Todo App</h1>

<div>
<input

Type=”text”

Value={newTodo}

onChange={€ => setNewTodo(e.target.value)}

placeholder=”Add a new todo”

/>

<button onClick={addTodo}>Add</button>

</div>

<ul>

{todos.map(todo => (

<li key={todo.id}>

{todo.text}

<button onClick={() => deleteTodo(todo.id)}


style={{ marginLeft: ‘10px’ }}>

Delete

</button>

</li>

))}

</ul>

</div>

);

};

Export default App;

Start the App :

Npm start

You might also like