Aprenda React 18: Apresentando Componentes

Componentes são os blocos de construção de um aplicativo React. Eles são um pouco semelhantes a uma função JavaScript que você pode definir em um programa. Eles são entidades independentes que compõem a interface do usuário do seu aplicativo e você pode reutilizá-los várias vezes.

Na verdade, você pode definir um componente usando classes ou funções. Componentes funcionais são a técnica mais atualizada, então é isso que vou mostrar nesta lição.

Criando um componente React

Vamos começar atualizando nosso aplicativo “Hello World” do primeiro tutorial para que ele use um componente React. Vamos modificá-lo de uma maneira que nos permita dizer olá a alguém específico em vez de todo o mundo.

Quando os componentes React são definidos como funções, você pode passar a eles um único argumento de objeto chamado props com todos os dados necessários. Essas funções retornarão um elemento React. Nosso helloElement do tutorial anterior ficou assim:

let helloElement = React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');

Podemos convertê-lo em uma função que retorne um elemento React usando o código abaixo:

function Greeting() {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, 'Hello, World!');
}

let helloElement = React.createElement(Greeting);

Abrir a página da Web no navegador ainda nos mostrará o mesmo antigo Olá Mundo! message porque a mensagem é codificada na função.

Vamos modificá-lo para que ele aceite um prop objeto como um argumento com todas as informações que ele precisa.

function Greeting(props) {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`);
}

let helloElement = React.createElement(Greeting, {name: 'Nitish'});

Existe outra maneira de criar nosso componente, conforme mostrado abaixo. No entanto, tenha em mente que uma simples chamada de função como esta só funcionará se o Greeting componente não tem nenhum gancho (não tem neste caso). Eu sugiro que você continue com o método acima de criar componentes.

function Greeting(props) {
    return React.createElement('h1', {id: 'greeting', className: 'hello'}, `Hello, ${props.name}!`);
}

let helloElement = Greeting({name: 'Nitish'});

Abra a página da Web em um navegador e você verá “Hello, Nitish!” em vez de “Olá, Mundo!”. Podemos dizer olá a qualquer um agora.

Criando componentes mais complicados

O código que escrevemos até agora para criar componentes é gerenciável. No entanto, definimos apenas um componente muito básico que consiste em um único elemento de cabeçalho. Na vida real, você terá que criar layouts muito mais complicados e usar o método acima para criar componentes não será mais viável.

O exemplo a seguir cria outro componente que demonstrará como pode ser complicado criar componentes complicados com vários filhos.

function Country(props) {
    return React.createElement('div', {
        className: "container"
    }, React.createElement('h2', {
        className: "country-name"
    }, `Country Name: ${props.name}`), React.createElement('p', {
        className: "capital"
    }, `Capital: ${props.capital}`), React.createElement('p', {
        className: "population"
    }, `Population: ${props.population}`));
}

let countryElement = React.createElement(Country, {name: 'United States', capital: 'Washington, D.C.', population: '332 million'});

let rootElement = document.getElementById('root');
ReactDOM.createRoot(rootElement).render(countryElement);

Depois de atualizar a página da Web, a marcação na guia do inspetor será semelhante à imagem abaixo:

Usei um pouco de CSS para deixar o componente mais apresentável.

Você pode ver o resultado final da execução do código acima em um navegador no CodePen abaixo. Tente modificar o código para adicionar mais um elemento ao componente que mostra a área dos Estados Unidos.

Pensamentos finais

Conseguimos produzir nosso componente da maneira que queríamos. No entanto, você pode ver que exigia que escrevêssemos muito código. Escrever tanto código para criar componentes simples é propenso a erros e reduzirá a produtividade.

Existem várias ferramentas e bibliotecas por aí que podem ajudá-lo a criar um aplicativo React escrevendo muito menos código. O código para nosso componente também pode ser reduzido significativamente usando JSX. Vamos aprender sobre isso no próximo tutorial.