What is a component?

A component in frontend development is an independent, reusable block of user interface. It encapsulates its structure (HTML), style (CSS), and behavior (JavaScript). Components help break down complex interfaces into smaller, manageable parts, which improves code readability, maintenance, and testing.

Main characteristics:

• Encapsulation: Logic, markup, and styling are contained within the component.
• Reusability: A component can be used in different parts of an application or even in other projects.
• Independence: Changes in one component minimally affect others.
• State and props: Components can have internal state (data that can change) and receive data from outside via props (properties).

Example of a component structure (React):

// Button.js component
import React from 'react';
import './Button.css'; // Import styles

function Button(props) {
  return (
    <button className="button-style" onClick={props.onClick}>
      {props.label}
    </button>
  );
}

export default Button;

/* Button.css styles */
.button-style {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

// Using the component
import Button from './Button';

function App() {
  const handleClick = () => {
    console.log('Button clicked!');
  };

  return (
    <div>
      <h1>My Application</h1>
      <Button label="Click me" onClick={handleClick} />
    </div>
  );
}

export default App;

The concept of components is central in modern JavaScript frameworks and libraries such as React, Vue, and Angular.