Skip to main content

What is a component in React?

ReactJunior~1 min read
Suggest an edit

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

In simpler terms:

A component is a function (or class) that accepts data (props) and returns JSX (a UI description).

Example of a simple component:

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

Usage:

javascript
<Greeting name="Alex" />

Here:

  • Greeting is the component;
  • props.name is the input data;
  • the result is a piece of the interface: <h1>Hello, Alex!</h1>.

Types of components

  1. Function Components Regular functions that return JSX:
javascript
function Button({ text }) { return <button>{text}</button>; }
  1. Class Components Used earlier, before hooks appeared:
javascript
class Button extends React.Component { render() { return <button>{this.props.text}</button>; } }

Today 99% of new projects use function components with hooks (useState, useEffect, and so on).

Components can be:

  • Simple (presentational) - render UI, with no logic:

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

  • Container (smart) - manage state and behavior:

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

Why components are needed

  • They split the interface into small, independent parts.
  • They simplify maintenance and testing.
  • They allow UI elements to be reused (for example, a button, a product card, a modal).

The whole page = a tree of components

For example:

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

Each element is a component, which can contain other components.

Short Answer

Interview ready
Premium

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

Suggest an edit