top of page
Logo der Online Agentur mdwp

Component

A React JS Component is a standalone, reusable chunk of code that divides the UI into manageable pieces. It's a JavaScript class or function that optionally accepts inputs i.e., properties (props) and returns a React element that describes how a section of the UI (User Interface) should appear.

React Components are similar to JavaScript functions. They can maintain private information, known as 'state', that can affect their output over time and can be reused through the application thereby providing a consistent look and feel.

There are two types of React Components:

1. Class Components: These are ES6 classes that extend from React.Component which have a render method, lifecycle methods, and often utilize state.

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

2. Function Components: These are a simpler way to write components that only contain a render method, do not have their own state and do not have lifecycle methods.

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

Use a component in JSX by declaring it as an HTML tag:

```jsx
<Welcome name="John Doe" />
```

The output of this component in UI will be `Hello, John Doe`.

In conclusion, a component in React helps split the UI into independent, reusable parts that individually manage their state and render method. This modular approach improves the overall maintainability and readability of the codebase.

bottom of page