Suggest an edit

Improve this article

Refine the answer for “What is a component in React?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

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>
  );
}
```

---

## Why components are needed

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.
</content>

Markdown · drag & drop images · ⌘B / ⌘I shortcuts408 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.