4.1-FormasDeDeclarar.md

Formas de declarar um componente

Atualmente no React temos duas formas de declarar componentes:

1. Componentes de classe
2. Componentes de função(Você viu este no ultimo capítulo)

Componentes de classe

Como o próprio nome já diz, declaramos um componenente criando uma classe javascript.

Para declarar precisamos:

• Criar uma classe

• Extender essa classe com o React.Component.

• Adicionar o método render() e seu retorno.

  Essa função chamada render() é responsavel por renderizar nosso componente em tela, ela sempre deve retornar um código html.

import React from "react";

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1> Renderizando um componente de classe </h1>
      </div>
    );
  }
}

Componentes de Função

Esta forma consiste em declarar componentes através de funções. Você já deve ter visto no capítulo anterior e em outros lugares.

Tudo que você precisa é:

• Criar uma função com a primeira letra Maiuscula
• Retornar um código HTML desta função

Pronto, agora tu já tem seu componente de função.

Observação: Apartir do React 17, não é necessário mais importar o React nos arquivos.

import React from "react";

function ComponenteDeFuncao() {
  return (
    <div>
      <h1> Meu componente de função </h1>
    </div>
  );
}

Uma terceira forma??

Sim, temos uma terceira forma. Na verdade, não passa de um componente de função(ou funcional). Com os recursos do Javascript ES6 podemos declarar da seguinte forma:

import React from "react";

const ComponenteA = () => {
  return (
    <div>
      <h1> Componente es6 </h1>
    </div>
  );
};

// Ou

const ComponenteB = () => (
  <div>
    <h1>Componente es6 2</h1>
  </div>
);

Ok mas o que está acontecendo? Declaramos uma váriavel com letra maíuscula e dizemos que ela é uma função que possui um retorno. No caso do ComponenteA, abrimos uma função e fazemos o nosso return como estamos acostumados, isto é chamado retorno explícito.
Já no ComponenteB acontece o que chamados de retorno implícito, quisemos apenas renderizar um componente e não possuimos nenhum dado para tratar dentro da função, dessa forma o javascript irá entender que ali é o return da função.

Qual devo utilizar?

Ao chegar aqui tu aprendeu sobre como declarar os componentes e provavelmente surgiu a seguinte dúvida: "Qual tipo de componente devo utilizar?"
A resposta é bem simples, use sempre componentes funcionais pois não só é uma forma mais prática e limpa mas também com a chegada dos hooks (spoiler) eles se tornaram muito melhores.
PERAI
Não pense que aprender componentes de classe é algo desnecessário, pelo contrário você precisará deles para poder entender melhor o ciclo de vida (spoiler) dos componentes e também os hooks (spoiler de novo). Talvez você os encontre em projetos legados (antigos) e precise converter para funcionais ou até mesmo dar manutenção... Então todo conhecimento é válido!

Podemos concluir nesse capítulo que temos mais de uma forma para declarar componentes e o por que aprender ambas formas.

No próximo capítulo tu aprenderás sobre as Propriedades dos componentes, entenderá que podemos criar componentes muito mais dinâmicos que os que fizemos anteriormente.

Ir para Próxima Seção

Made with 💜