What is a component in React?

ReactJunior~1 min read

A component in React is an independent, reusable block of the user interface, that describes how a specific part of the page should look and behave.

In other words:

A component is a function (or class) that accepts data (props) and returns JSX - a description of what needs to be shown in the browser.

A simple component example

javascript

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

Usage:

javascript

<Greeting name="Alex" />

Here:

Greeting is the component;
props is an object with the passed data;
the returned JSX is -> <h1>Hello, Alex!</h1>.

Types of components

1. Function Components - the modern standard

These are ordinary functions that return JSX:

javascript

function Button({ text }) {
  return <button>{text}</button>;
}

2. Class Components - the old syntax (before hooks)

javascript

class Button extends React.Component {
  render() {
    return <button>{this.props.text}</button>;
  }
}

Today 99% of projects use function components with hooks (useState, useEffect, etc).

Components can be:

Simple (presentational)

responsible only for the appearance

javascript

const Title = () => <h2>Welcome!</h2>;

Container (smart)

hold state and logic

javascript

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
    </div>
  );
}

They split the interface into small, understandable parts They allow you to reuse code (the same button, card, etc.) They simplify maintenance and testing They make the UI modular and predictable

Application structure

Usually a whole React application is a tree of components:

javascript

<App>
 ┣ <Header />
 ┣ <Main>
 ┃  ┣ <ProductCard />
 ┃  ┣ <ProductCard />
 ┃  ┗ <ProductCard />
 ┗ <Footer />

Each component can:

contain other components (nesting),
manage state (useState),
react to events (onClick, onChange),
and update the interface when the data changes.

Summary

Term	What it means
Component	A function (or class) that returns JSX
Props	Data passed into a component
State	A component's internal data
JSX	Syntax for describing the UI structure
Composition	Nesting components inside one another

In short:

A component in React is a building block of the interface. It combines markup, data and behavior logic into one self-contained unit.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.