Intro to React Components: Building a To-Do App

When I first started learning React, the most important idea was that everything is a component. Components are reusable, independent pieces of UI that make building complex apps much easier.

In this post, let’s go through React components with a simple To-Do App example.

What is a Component?

In this post, let’s go through React components with a simple To-Do App example.

				
					function Welcome() {
  return <h1>Hello, React!</h1>;
}

This small piece of code is a full React component.

Two Types of Components (Back Then)

1. Class Components

Class components were the standard before hooks.

				
					function TodoItem({ text }) {
  return <li>{text}</li>;
}

They had lifecycle methods like do componentDidMount..

2. Functional Components

Simple and stateless (before hooks came).

				
					# Store data
Rails.cache.write("user_#{user.id}_posts", user.posts, expires_in: 10.minutes)

# Read data
posts = Rails.cache.fetch("user_#{user.id}_posts") do
  user.posts.to_a
end

Today, with hooks, functional components do everything.

Building a To-Do App

App Component

				
					import React, { useState } from "react";

function App() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState("");

  const addTodo = () => {
    if (newTodo.trim() === "") return;
    setTodos([...todos, newTodo]);
    setNewTodo("");
  };

  return (
    <div>
      <h1>My To-Do App</h1>
      <input 
        value={newTodo} 
        onChange={(e) => setNewTodo(e.target.value)} 
        placeholder="Add a task"
      />
      <button onClick={addTodo}>Add</button>

      <ul>
        {todos.map((todo, index) => (
          <TodoItem key={index} text={todo} />
        ))}
      </ul>
    </div>
  );
}

function TodoItem({ text }) {
  return <li>{text}</li>;
}

export default App;

Key Takeaways

- Components = building blocks of React apps.
- Props = how data flows into components.
- State = how components manage data internally.
- Functional components + hooks = modern React.

Final Thoughts

When I first built a to-do app in React, it felt magical to see data update instantly without refreshing the page. Even today, the same principles apply in large-scale apps: break things into smaller, reusable components.

Once you master components, everything else in React starts to make sense.