React Concepts for Counter App: Components, Hooks, Events

Here we cover the key React concepts used in the Counter App: components, state/hooks, and event handling.

Components

A React component is a reusable piece of UI logic that returns some JSX (which looks like HTML) to display. Components can be defined as JavaScript classes or functions. By convention, component names must start with an uppercase letter (so React knows it’s a custom component).

Function components are now the standard for new React code: they are simpler and use less boilerplate than class components. In this project we will create at least one main component (e.g. App) to hold our counter logic. We may also create sub-components if needed. A component encapsulates its own rendering and can maintain its own state.

Functions (Hooks and Event Handlers)

In React function components, we use hooks to add features like state. The primary hook is useState, which lets a component track a state value. For example, inside our component we will write:

const [count, setCount] = useState(0);

This initializes a state variable count to 0 and provides a function setCount to update it. As W3Schools explains, “The React useState Hook allows us to track state in a function component.” It returns the current state and a function to update that state. We will use setCount whenever the user clicks a button to change the count.

We also need to respond to events (button clicks). In React, event handlers use camelCase (e.g. onClick) and are specified in JSX inside curly braces. For example:

<button onClick={increment}>Increment</button>

Here increment is a function we define (see below). React uses onClick={shoot} instead of the HTML onclick="shoot()" syntax. In our code, we’ll write functions like:

function increment() {
  setCount(count + 1);
}
function decrement() {
  setCount(count - 1);
}
function reset() {
  setCount(0);
}

Each function updates the state appropriately. Clicking a button calls the function via onClick, triggering React to re-render the component with the new state value.

JSX Expressions

React uses JSX, a syntax that lets you write HTML-like code inside JavaScript. Inside JSX, you can embed any JavaScript expression by using curly braces {}. For example, writing <h1>{count}</h1> displays the current value of count. The Medium tutorial explains that {1 + 3} would render as 4 in JSX.

In our app, we will include {count} in the JSX so the on-screen number updates whenever the state changes. This is how React mixes markup and logic seamlessly.