4 maneiras de criar componentes no React

React é uma biblioteca JavaScript muito popular nos dias de hoje, e nos traz uma produtividade incrível no desenvolvimento front-end.

A comunidade em torno do React é bastante engajada. Ou seja, existe bastante material na internet para te ajudar com seu aprendizado e com suas dúvidas em geral. 👨‍💻

Como dito no título, podemos criar os componentes de 4 maneiras diferentes. Para todos os exemplos, vamos fazer um botão que incremente o contador.

Componente CreateReactClass

Esta 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. (entenda o que mudou da versão ES5 para a ES6 neste artigo)

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.

Componente de Classe ES6

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 de escopo: sempre que criamos uma função, temos que criar um bind como ajuste de escopo. Além disso, tinha o uso constante da palavra-chave this. (para entender melhor o uso dobinde dothis, você pode ler este artigo)

Você pode ver o exemplo neste link.

Componente funcional

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

Além disso, com a chegada dos hooks, as classes do React se tornaram obsoletas devido à complexidade de suas estruturas. (mais informações na documentação oficial do React)

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.

Componente usando Arrow Function

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? Já conhecia todas essas formas de criar componentes?

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

Até a próxima! ✋