🧩 Project Overview
You’ll build a simple Todo app that lets users:
✅ Add new tasks
✅ View the list of tasks
✅ Delete tasks
We’ll use only functional components and React Hooks (useState) — no backend needed.
🧰 1. Setup Your React Project
If you don’t already have one:
npx create-react-app todo-app
cd todo-app
npm start
This will start a local development server at http://localhost:3000/.
🧱 2. File Structure
Inside the src/ folder, you’ll have:
src/
├── App.js
├── components/
│ ├── TodoInput.js
│ ├── TodoList.js
│ └── TodoItem.js
└── index.js
⚙️ 3. App.js — Main Component
This is where the state for all todos lives.
import { useState } from 'react';
import TodoInput from './components/TodoInput';
import TodoList from './components/TodoList';
import './App.css';
function App() {
const [todos, setTodos] = useState([]);
// Add a new todo
const addTodo = (newTodo) => {
if (!newTodo.trim()) return; // ignore empty input
setTodos([...todos, newTodo]);
};
// Delete a todo
const deleteTodo = (index) => {
const updated = todos.filter((_, i) => i !== index);
setTodos(updated);
};
return (
<div className="App">
<h1>📝 React Todo App</h1>
<TodoInput addTodo={addTodo} />
<TodoList todos={todos} deleteTodo={deleteTodo} />
</div>
);
}
export default App;
✏️ 4. TodoInput.js — Add Todos
import { useState } from 'react';
function TodoInput({ addTodo }) {
const [input, setInput] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
addTodo(input);
setInput('');
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={input}
placeholder="Enter a new task..."
onChange={(e) => setInput(e.target.value)}
/>
<button type="submit">Add</button>
</form>
);
}
export default TodoInput;
📜 5. TodoList.js — Show Todos
import TodoItem from './TodoItem';
function TodoList({ todos, deleteTodo }) {
return (
<ul>
{todos.map((todo, index) => (
<TodoItem
key={index}
text={todo}
onDelete={() => deleteTodo(index)}
/>
))}
</ul>
);
}
export default TodoList;
🗑️ 6. TodoItem.js — Single Todo
function TodoItem({ text, onDelete }) {
return (
<li>
{text}
<button onClick={onDelete}>❌</button>
</li>
);
}
export default TodoItem;
🎨 7. Optional: Styling (App.css)
.App {
text-align: center;
margin-top: 50px;
}
input {
padding: 8px;
width: 200px;
margin-right: 10px;
}
button {
padding: 8px 12px;
cursor: pointer;
}
ul {
list-style: none;
padding: 0;
}
li {
margin: 8px 0;
}
🚀 8. Run the App
Start your development server:
npm start
You’ll see:
A text box to enter a task
A button to add it
A list of todos, each with a ❌ delete button
✅ Works fully in the browser — no backend needed!
🧠 Bonus: Improvements You Can Try
Once this works, you can:
Add task completion (mark as done)
Save todos in localStorage (so they persist)
Add edit functionality
Use useEffect to load/save data
Learn Full Stack JAVA Course in Hyderabad
Read More
State Management in React: useState and useEffect
React vs Angular: Which One to Learn?
Angular Basics for Full Stack Java Developers
Introduction to React for Java Developers
Visit Our Quality Thought Institute in Hyderabad
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments