Os Componentes React

Os componentes são os blocos de construção fundamentais do React. Eles permitem criar elementos de interface do usuário reutilizáveis e autônomos.

O que é um componente React?

Um componente React é uma função ou uma classe que retorna JSX (JavaScript XML). Ele pode ser tão simples quanto um botão ou tão complexo quanto um formulário completo.

Tipos de componentes

Existem dois tipos principais de componentes React:

1. Componentes funcionais (recomendados):

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

2. Componentes de classe (legado):

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

Criação do seu primeiro componente

Vamos criar um componente simples para exibir um cartão 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;

Para usar este componente: