Building a React Todo App: Complete Guide.
Building a Todo App with React
In this comprehensive tutorial, we’ll build a fully functional todo application using React.
Prerequisites
- Basic knowledge of JavaScript
- Understanding of React concepts
- Node.js installed
Project Setup
npx create-react-app todo-app
cd todo-app
npm start
Components Structure
App Component
function App() {
const [todos, setTodos] = useState([]);
return (
<div className="App">
<TodoList todos={todos} />
</div>
);
}
TodoItem Component
function TodoItem({ todo, onToggle, onDelete }) {
return (
<div className="todo-item">
<span>{todo.text}</span>
<button onClick={() => onToggle(todo.id)}>Toggle</button>
<button onClick={() => onDelete(todo.id)}>Delete</button>
</div>
);
}
State Management
We’ll use React hooks for state management:
const [todos, setTodos] = useState([]);
const [inputValue, setInputValue] = useState('');
Adding Todos
const addTodo = () => {
if (inputValue.trim()) {
setTodos([...todos, {
id: Date.now(),
text: inputValue,
completed: false
}]);
setInputValue('');
}
};
Styling
Add some basic CSS for a clean look:
.todo-item {
display: flex;
justify-content: space-between;
padding: 10px;
border: 1px solid #ddd;
margin: 5px 0;
}
Conclusion
You now have a fully functional todo app! This project covers:
- Component composition
- State management with hooks
- Event handling
- Conditional rendering
Next steps could include:
- Adding local storage
- Implementing drag and drop
- Adding due dates
- Creating categories
Happy coding! 🚀
