Los componentes de React

Los componentes son los bloques de construcción fundamentales de React. Permiten crear elementos de interfaz de usuario reutilizables y autónomos.

¿Qué es un componente de React?

Un componente de React es una función o una clase que devuelve JSX (JavaScript XML). Puede ser tan simple como un botón o tan complejo como un formulario completo.

Tipos de componentes

Existen dos tipos principales de componentes de React:

1. Componentes funcionales (recomendados):

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

2. Componentes de clase (legacy):

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

Creación de tu primer componente

Vamos a crear un componente sencillo para mostrar una tarjeta de perfil:

// ProfileCard.js
function ProfileCard({ name, role, avatar }) {
  return (
    <div className="profile-card">
      <img src={avatar} alt={name} className="avatar" />
      <h2>{name}</h2>
      <p>{role}</p>
    </div>
  );
}

export default ProfileCard;