What is a Component in React?

A component in React is a reusable UI block that manages its own structure, state, and functionality. React is built around components.

You can think of them as JavaScript functions that return JSX (HTML-like code).

---

Types of Components

React has two main types:

• Function Components - modern and most common approach
• Class Components - older approach, now rarely used

---

Function Component Example

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

This component accepts `props` and returns JSX.

---

Class Component Example

  
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}
  

Although this still works, today we mainly use function components with React Hooks.

---

Component Naming Rules

• Components must always start with capital letter (`MyComponent`)
• Can be placed in separate files for easy reuse
• In JSX, components are used as HTML tags: `<Welcome />`

---

Benefits of Components

• Reusability
• Separation of concerns
• Easy testing and modification

---

Props: Passing Data to Components

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

<Welcome name="Aram" />
  

`props` allow components to receive data dynamically.

---

Component as a UI Unit

A React component can have its own state, event handlers, and internal structure. In the next article, we'll talk about exactly this - **state and event handling**.

---

In the next part, we'll discuss component-local data (`state`) and how events are used.