Building a React Todo App: Complete Guide.

Avatar photoByAdil

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! 🚀

Similar Posts