Introduction to Components, Functions and Hooks

This module introduces the foundational ideas that make React development possible and powerful. You’ll learn about components, functions and event handling, state and the useState Hook, and how you render a list of items dynamically in your To-Do List app—each one explained simply, practically, and in context.

Components

Components are the building blocks of any React application. Think of a component as a chunk of the UI—a function that returns some JSX to display. With React, you can design your UI as a tree of components, each one responsible for rendering specific content and handling its own logic.

We typically create one main App component and other smaller components (like Todo and Footer) that can be reused.

In This App:

• You have a single main function component: App.
• App manages everything: input, button, todo list, and logic.

Functions (Arrow Functions & Event Handling)

React apps rely heavily on arrow functions for event handling and logic. These functions keep your code concise and readable.

In this app, you use functions like:

const addTodo = () => { ... }

const deleteTodo = (index) => { ... }

They’re passed into JSX elements like buttons or checkboxes using event listeners:

<button onClick={addTodo}>Add</button>

Here’s what happens:

• When the user clicks the button, addTodo runs.
• React calls your function and updates the app’s state (and UI).

The same applies for:

• onChange (used for input fields)
• onClick (used for buttons)
• onCheckboxChange (used to toggle tasks)

This is how user interaction turns into visible changes on the page.

State & Hooks (useState)

To make your app dynamic and responsive, you need to store data—like the list of tasks or what the user types. This is done using React’s useState hook.

Here’s how it looks in your code:

const [todos, setTodos] = useState([]);

const [inputValue, setInputValue] = useState("");

What this means:

• todos: an array storing all your tasks
• inputValue: a string tracking what the user types

The setTodos() and setInputValue() functions are used to update the state. When these are called, React re-renders the component, showing the updated data on screen.

For example:

setTodos([...todos, { text: inputValue, completed: false }])

• This adds a new task to the list.
• The UI refreshes automatically, showing the new task.

Hooks like useState allow React to remember data between renders—without needing a backend or database.

How User Actions Drive UI Changes

Your app may not fetch data from an external API, but it's still reactive and interactive. Instead of external data, you're working with internal user input and managing it with React logic.

Here's how interaction flows in your app:

Each of these actions changes React state, and React responds by automatically updating the visible UI.