4 maneiras de criar componentes no React

Durante a quarentena eu fiz um post no meu Linkedin divulgando o "April Free Month" da Pluralsight. Eles ofereceram todos os cursos das plataforma de forma gratuita durante o mês de Abril.

Eu aproveitei a oportunidade para fazer a trilha de React. Sempre tive contatos básicos com React, fazendo pequenas alterações, mas nunca me aprofundei na arquitetura.

E digo com todas as letras que valeu muito a pena. Fiz 5 cursos de React do básico ao avançado, e todos muitos bons. (principalmente os do Cory House)

Desde então o que tenho feito para fixar o aprendizado: estou criando uma aplicação usando React no front (logo mais vou divulgar), e decidi criar conteúdo.

Portanto esse é o primeiro artigo sobre React que estou escrevendo.

Vamos lá!

Como dito, podemos criar os componentes de 4 diferente formas.

Para todos os exemplos, vamos fazer um botão que incremente o contador.

ES6 Class Component

Esse era o modo mais usado antes da versão 16.8 do React. Pois era o que melhor trabalhava com ciclos de vida do componente.

class Counter extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      counter: 0
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({
      counter: this.state.counter + 1
    });
  }

  render() {
    return (
      <>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>+1</button>
      </>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

Um dos problemas deste formato era o problema de escopo, sempre que criamos uma função, temos que criar um bind para esta função como ajuste de escopo. E além disso, tinha o uso constante da palavra-chave this.

Você pode ver o exemplo neste link.

CreateReactClass Component

Este maneira está em desuso nos dias de hoje por conta da complexidade e quantidade de código que temos que escrever. Ela se assemelha à forma como criávamos objetos no ES5.

const Counter = createReactClass({
  getDefaultProps: function() {
    return { initialCount: 0 };
  },
  getInitialState: function() {
    return { counter: this.props.initialCount };
  },
  handleClick: function() {
    this.setState({
      counter: this.state.counter + 1
    });
  },
  render: function() {
    return (
      <>
        <h1>{this.state.counter}</h1>
        <button onClick={this.handleClick}>+1</button>
      </>
    );
  }
});

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

Neste formato também usamos a palavra-chave this.

Você pode ver o exemplo neste link.

Functional Component

Este é o formato mais usado atualmente (após o lançamento da versão 16.8), pois é o que melhor trabalha com os Hooks, evitando o uso do ciclo de vida do componente, além de evitar a palavra-chave this.

Além disso, existe a proposta que as classes do React deixem de existir em um futuro próximo.

function Counter() {
  const [counter, setCounter] = React.useState(0);

  function handleClick() {
    setCounter(counter + 1);
  }

  return (
    <>
      <h1>{counter}</h1>
      <button onClick={handleClick}>+1</button>
    </>
  );
}

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

Neste exemplo é perceptível como tivemos que escrever menos código. Aqui, usamos o hook useState que trabalha o controle de estado dos objetos.

Você pode ver o exemplo neste link.

Arrow Function Component

Este formato é bastante parecido com o anterior, e é bastante usado para criar componentes apenas com JSX. Por conta disso, alterei um pouco o exemplo, adicionando 2 componentes que renderizam os elementos HTML.

const Counter = () => {
  const [counter, setCounter] = React.useState(0);

  function handleClick() {
    setCounter(counter + 1);
  }

  return (
    <>
      <Header label={counter} />
      <Button
        whenClicked={handleClick}
        label="+1"
      />
    </>
  );
}

const Header = (props) => <h1>{props.label}</h1>;
const Button = (props) => (
  <button onClick={props.whenClicked}>
    {props.label}
  </button>
);

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);

Você pode ver o exemplo neste link.

E aí, o que achou?

Qualquer sugestão e/ou feedback sempre serão muito bem-vindos.

Até o próximo artigo! ✋