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 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>;
  }
  ```
2. **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**.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.