Build a Todo App with React: India Beginner Tutorial

Starting your journey as a web developer in India can feel overwhelming, with countless frameworks and tutorials promising the world. However, building a practical project like a Todo App is the perfect, time-tested way to cut through the noise and learn React—the library powering frontends at companies like Flipkart, Swiggy, and Zerodha. This hands-on guide is designed for Indian beginners, using familiar examples and a step-by-step approach to help you create your first interactive application and build a solid portfolio piece.

Why Learn React with a Todo App?

For any Indian student or aspiring developer, the job market is competitive. A portfolio with real projects is no longer a bonus; it's a necessity. A Todo App is the "Hello, World!" of modern web development because it teaches you the core concepts you'll use daily: managing state, handling user input, and updating the UI dynamically. Companies like Freshworks and Paytm use React for its efficiency in building fast, user-friendly interfaces. By completing this project, you demonstrate practical skills that go beyond theoretical knowledge, making your resume stand out to recruiters from TCS, Infosys, and startups alike.

Core Concepts You Will Master

This single project helps you solidify foundational React principles:

• Components & JSX: Learn to break the UI into reusable pieces, a practice essential for large-scale applications.
• State Management (useState Hook): Understand how to make your app remember and update data, like the list of tasks.
• Event Handling: Capture user actions, such as adding a new todo or marking one as complete.
• Conditional Rendering: Dynamically show or hide elements, like a "No tasks" message.

Setting Up Your Development Environment

Before writing code, you need the right tools. The standard method is using Node.js and create-react-app, which sets up a modern build pipeline. Many Indian developers, including popular YouTube educators like CodeWithHarry and Apna College, recommend this approach for beginners.

1. Install Node.js: Download the LTS version from the official website. This also installs npm (Node Package Manager), which you'll use to manage libraries.
2. Create Your React App: Open your terminal (Command Prompt or VS Code terminal) and run: npx create-react-app my-todo-app
3. Navigate and Run: Move into your project folder (cd my-todo-app) and start the development server with npm start. Your app will open in the browser, usually at http://localhost:3000.

If you face setup issues, a great alternative for an even quicker start is to use CodeSandbox or StackBlitz, online editors that require no installation—perfect for testing ideas instantly.

Building the Todo App: Step-by-Step

We'll build the app incrementally. Open the src/App.js file in your project and replace its contents with the code from each step.

Step 1: Creating the Basic Structure and State

First, we import the necessary useState Hook and set up the initial structure for our app's state—an array to hold our todos and a string to track the new task input.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [todos, setTodos] = useState([]);
  const [inputValue, setInputValue] = useState('');

  return (
    <div className="app">
      <h1>My Todo List</h1>
      {/* Input and button will go here */}
      {/* Todo list will be rendered here */}
    </div>
  );
}

export default App;

Step 2: Adding the Input and Button

Now, we create the user interface for adding a new task. We bind the input field to our inputValue state and create a function to handle the "Add" button click.

// ... inside the App function, before the return statement

const addTodo = () => {
  if (inputValue.trim() !== '') {
    setTodos([...todos, { text: inputValue, completed: false }]);
    setInputValue(''); // Clear the input
  }
};

// ... inside the return statement, after the <h1>
<div className="input-section">
  <input
    type="text"
    value={inputValue}
    onChange={(e) => setInputValue(e.target.value)}
    placeholder="What needs to be done?"
  />
  <button onClick={addTodo}>Add Task</button>
</div>

Step 3: Displaying and Managing the Todo List

This is where the app comes alive. We map over the todos state array to display each item. We'll also add functionality to mark a task as complete and to delete it.

// ... inside the App function
const toggleComplete = (index) => {
  const newTodos = [...todos];
  newTodos[index].completed = !newTodos[index].completed;
  setTodos(newTodos);
};

const deleteTodo = (index) => {
  const newTodos = todos.filter((_, todoIndex) => todoIndex !== index);
  setTodos(newTodos);
};

// ... inside the return statement, after the input-section div
<ul className="todo-list">
  {todos.map((todo, index) => (
    <li key={index} className={todo.completed ? 'completed' : ''}>
      <span onClick={() => toggleComplete(index)}>
        {todo.text}
      </span>
      <button onClick={() => deleteTodo(index)}>Delete</button>
    </li>
  ))}
</ul>

Styling Your Application with CSS

A functional app needs a clean interface. While Tailwind CSS is popular in the industry, we'll use plain CSS for clarity. Add these styles to your src/App.css file to make your app visually appealing.

.app {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.input-section {
  display: flex;
  margin-bottom: 20px;
  gap: 10px;
}

.input-section input {
  flex-grow: 1;
  padding: 10px;
  border: 2px solid #4a90e2;
  border-radius: 4px;
  font-size: 16px;
}

.input-section button {
  padding: 10px 20px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

.todo-list {
  list-style: none;
  padding: 0;
}

.todo-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  margin-bottom: 10px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 5px solid #4a90e2;
}

.todo-list li.completed {
  border-left-color: #28a745;
  opacity: 0.7;
}

.todo-list li.completed span {
  text-decoration: line-through;
  color: #6c757d;
}

.todo-list li span {
  cursor: pointer;
  flex-grow: 1;
}

.todo-list li button {
  padding: 6px 12px;
  background-color: #dc3545;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

Taking Your Project to the Next Level

Once your basic app is working, challenge yourself with these common interview-level features. Implementing these will significantly boost your understanding and portfolio.

• Persist Data with LocalStorage: Make your todos survive a page refresh by saving the todos array to the browser's localStorage.
• Add Filters: Implement buttons to show "All," "Active," or "Completed" tasks, teaching you about derived state.
• Edit Functionality: Allow users to click on a todo to edit its text inline, a great exercise in form handling and state management.
• Drag & Drop Reordering: Use a library like @dnd-kit to let users reorder tasks by dragging, a complex but impressive feature.

Deploying Your App and Adding to Your Portfolio

A project on your local machine won't impress recruiters. You need to host it online for free. The easiest way is using Vercel or Netlify, which integrate seamlessly with Git repositories like GitHub.

1. Create a repository on GitHub and push your project code to it.
2. Sign up for Vercel and connect your GitHub account.
3. Import your Todo App repository. Vercel will automatically detect it as a React app and deploy it.
4. You'll get a live URL (e.g., my-todo-app.vercel.app) that you can add to your resume, LinkedIn profile, or portfolio website.

Having a live link demonstrates not just coding skill, but also knowledge of the deployment process—a key expectation for roles at product-based companies.

Next Steps

Congratulations on building your first React application! This is a major milestone. To continue your learning journey and prepare for internships or jobs, explore more structured paths. You can browse free React courses from platforms like Coursera and edX with financial aid options. To strengthen your core web development fundamentals, check out our guide on learning JavaScript for free. When you're ready to tackle full-stack development, which is highly sought after by Indian startups, explore our curated list of free full-stack web development courses.