Componentes de Apresentação

Também conhecidos como componentes “burros” ou “stateless”, esses componentes se concentram apenas na renderização da UI. Eles recebem dados como props e não gerenciam estado ou lógica de negócios complexa. O objetivo é que sejam reutilizáveis e fáceis de testar.

É nesses componentes que geralmente vamos ver a maior quantidade de código HTML mesmo.

Exemplo em React

import React from 'react';
 
function UsersDisplay({ users, loading, error }) {
    if (loading) return <div>Loading users...</div>;
    if (error) return <div>Error: {error}</div>;
 
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>{user.name} - {user.email}</li>
            ))}
        </ul>
    );
}
 
export default UsersDisplay;
 

Explicação:

• Este é o componente de apresentação. Ele é “burro” no sentido de que não sabe nada sobre como os dados são carregados ou manipulados.
• Ele simplesmente recebe propriedades (props) e as usa para determinar o que renderizar: um indicador de carregamento, uma mensagem de erro, ou a lista de usuários.
• Sua única responsabilidade é a apresentação dos dados e estados que recebe.