Aprenda React – Componentes, State e Props

Olá pessoal. No último post, falamos sobre JSX, a extensão de sintaxe para Javascript que facilita muito a tarefa de criar interfaces com React, levando a um código que se assemelha muito com um Javascript misturado com HTML.

Link for this post in English / Link para este post em inglês

Neste post, vamos falar sobre um dos conceitos mais legais do React, os componentes. Vamos aprender a criar componentes, importá-los e como organizar as informações de sua aplicação em torno destes componentes.

Para exemplificar, vamos construir um simples contador com botões para incremento e decremento, que vai permitir que coloquemos em prática todos os conceitos relativos a componentes, state (estado), e props (propriedades).

Vamos novamente utilizar a configuração que trabalhamos no primeiro post da série Aprenda React. Pode clicar aqui para ir até ele, e lá você achará o link para o repositório no Github (ou pode só clicar aqui), que você pode clonar e acompanhar o post.

Componentes

Como de costume, vou demarcar o nosso código básico, de onde partiremos. Isto é o que temos no momento:

import React from "react";
import ReactDOM from "react-dom";

const Index = () => {
  return <div>Hello React!</div>;
};

ReactDOM.render(<Index />, document.getElementById("index"));

Ok. A primeira coisa que você tem que saber é que, com o código acima, você já criou seu primeiro componente. Ao definir Index e fazer com que retorne um elemento JSX, utilizamos uma das duas formas principais de criar um componente, que é através da definição de uma função. Bem, vamos começar a organizar as coisas, movendo este componente para o seu próprio arquivo. Teremos um componente principal, onde importaremos os outros componentes que vão compor nosso simples contador. Primeiro, dentro da pasta src, vamos criar a pasta components, e então, dentro desta pasta, vamos criar o arquivo App.js. Este será nosso componente principal:

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <div>Hello React!</div>;
};

export default App;

Agora, vamos importar este componente e utilizá-lo. No nosso arquivo index.js, localizado dentro da pasta src, vamos remover a definição de Index e então importar o componente App que acabamos de criar, e vamos então passar este componente para o método render. Ficará assim:

import React from "react";
import ReactDOM from "react-dom";

import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("index"));

Se o seu servidor do Webpack ainda não estava rodando, execute o comando yarn run start em seu terminal, abra o seu navegador e se maravilhe em como sua aplicação não mudou nada. Era esperado, visto que só mudamos o componente que estava no arquivo principal para seu próprio arquivo.

Agora, vamos criar um novo componente, que será o responsável por exibir nossa contagem. Nessa primeira iteração, a contagem será simplesmente definida manualmente, mas logo vamos ver como torná-la dinâmica. Primeiro, criamos o arquivo CountDisplay.js dentro da pasta components. Este é o código inicial para este componente:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = () => {
  return <p>The count is 0</p>
};

export default CountDisplay;

Como vimos no post anterior sobre JSX, podemos incluir o valor de uma variável dentro de um elemento, usando as chaves ({}). Mas e se pudéssemos passar a informação para este componente sobre qual o valor atual da contagem?

Props

Props, que é uma abreviação de properties, ou propriedades, são informações que podem ser passadas para um componente. Pode ser uma string, um número, até mesmo uma função. Este valor pode então ser utilizado pelo componente que a recebe. Primeiro, passamos o dado que desejamos passar ao componente definindo-o como um atributo, onde o componente é utilizado. Vamos passar a prop currentCount para o componente CountDisplay, que está sendo chamado no arquivo App.js. Para o valor numérico, passamos o mesmo dentro de chaves. Vejamos:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

const App = (props) => {
  return <CountDisplay 
    currentCount={3}
  />;
};

export default App;

Agora, vamos resgatar este valor no componente CountDisplay para utilizá-lo. Para isso, na definição de componente, podemos incluir as props como parâmetro da função. E aí, teremos todas as props que foram passadas para este componente. Vamos dar um console.log nas props para ver o que temos. O código no arquivo CountDisplay.js fica desse jeito:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = (props) => {
  console.log(props);
  return <p>The count is 0</p>;
};

export default CountDisplay;

Como você pode perceber ao atualizar a aba do seu navegador e abrir o console dele, o que temos é um objeto, com a prop que você acabou de passar para o componente CountDisplay. Vamos fazer um rápido teste e adicionar mais uma prop neste componente, que ficará assim:

const App = (props) => {
  return <CountDisplay 
    currentCount={3}
    name="Felipe"
  />;
};

Ao atualizar novamente a aba do seu navegador e checar o console novamente, temos exatamente o que esperamos. Agora, o objeto props possui valores para currentCount e name, conforme passamos.

Agora, podemos remover a linha onde fazemos o console.log e também a prop name, que utilizamos somente para um rápido teste. E então, vamos resgatar o valor de currentCount dentro do componente CountDisplay e substitui-lo no parágrafo que exibe a contagem. Ficará assim:

import React from "react";
import ReactDOM from "react-dom";

const CountDisplay = (props) => {
  return <p>The count is { props.currentCount }</p>;
};

export default CountDisplay;

Muito bem, agora você deve estar se perguntando em que isso nos ajuda, já que apenas mudamos o local onde definimos um valor fixo para ser repassado ao componente. Vamos lá, vamos falar de state.

State

State, assim como as props, são dados utilizados pelo componente. Novamente, pode ser uma string, um objeto, um array, um número. A diferença, no caso do state, é que ao invés de receber a informação e somente utilizá-la, o state é privado e completamente controlado pelo componente. Para utilizarmos o state, precisamos primeiro conhecer a segunda forma de criar um componente, que são os componentes de classe (em contraste aos componentes funcionais, ou de função, que temos criado até o momento). Primeiro, para criar um componente de classe, devemos extender a classe React.Component. Convertendo nosso componente funcional App.js para um componente de classe, ele fica assim:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  render() {
    return (
      <CountDisplay 
        currentCount={3}
      />
    );
  }
}

export default App;

Agora, para definir o state deste componente, devemos adicionar um constructor para esta classe, e dentro dela utilizar this.state para definir um objeto que terá os valores iniciais do state:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <CountDisplay 
        currentCount={3}
      />
    );
  }
}

export default App;

I defined the current count to 1 in the state, but notice that we are still passing the fixed value 3 to the component, and so, nothing changes for now. To use the value that is saved in the state, all we need to do is get it with this.state. With this step, the code is as follows:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <CountDisplay 
        currentCount={this.state.currentCount}
      />
    );
  }
}

export default App;

Now, let’s understand how we manipulate the state First, let’s create two buttons, one to increment and another one to decrement. Let’s use the button elememnt, and your App.js file will be like this:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  render() {
    return (
      <div>
        <button>
          +
        </button>
        <button>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Now, there is an attribute on the button element called onClick. With this attribute, we can define what happens when a button is clicked. Let’s use this attribute to run a function that will update our state, increasing or decreasing the value by 1 depending on the button pressed.First, let’s create the class methods to increment and decrement, and then, assign these methods to each button accordingly. To update the state for this component, we use this.setState, sendo this referente à instância do componente. Passamos a este método um objeto, com a chave que desejamos atualizar e o novo valor do mesmo. Neste caso, usaremos o valor atual da contagem, mais ou menos 1:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement.bind(this)}>
          +
        </button>
        <button onClick={this.handleDecrement.bind(this)}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Repare que após a função, utilizamos bind(this). Isto é necessário para que, dentro da função possamos usar o this, se referindo ao componente. Caso contrário, o this será undefined dentro da função e o setState não funcionará. Existem outras formas de fazer isso. A primeira é fazer o bind no constructor. Ficará assim:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};

    this.handleIncrement = this.handleIncrement.bind(this);
    this.handleDecrement = this.handleDecrement.bind(this);
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>
          +
        </button>
        <button onClick={this.handleDecrement}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

E ainda há outra forma, que é usar arrow functions. Neste caso, você não tem que fazer bind, porque a arrow function já faz isso automaticamente. Fica desta forma:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleIncrement()}>
          +
        </button>
        <button onClick={() => this.handleDecrement()}>
          -
        </button>
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Todas estas formas funcionam e atingem o mesmo resultado. Você pode usar aquela que lhe parecer mais legível, mais clara.

Agora, nosso componente está totalmente funcional, mas podemos refatorar um pouco. A ideia é que estes botões sejam um componente a parte. Vamos ver como faremos para atualizar o state de um componente a partir da chamada da função em outro.

Primeiro, vamos criar um componente CounterButtons.js. Agora, vamos apenas extrair o que já temos no componente App.js e passar para o novo componente que criamos. Nosso componente CounterButtons.js então ficará assim:

import React from "react";
import ReactDOM from "react-dom";

class CounterButtons extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.handleIncrement()}>
          +
        </button>
        <button onClick={() => this.handleDecrement()}>
          -
        </button>
      </div>
    );
  }
}

export default CounterButtons;

E no componente App.js, vamos ter o seguinte:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";
import CounterButtons from "./CounterButtons";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement(event) {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement(event) {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <CounterButtons />
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

Neste momento, sua aplicação já será renderizada como antes, mas os botões não irão funcionar, pois eles não tem acesso aos métodos que atualizam o state. O que vamos fazer, então, é passar uma função como uma prop, e chamar esta função através das props recebidas no componente novo que criamos. Vamos lá então.

Primeiro, no componente App.js, vamos passar os métodos através das props do componente CounterButtons.js. Vamos utilizar como nomes para as props, onIncrement e onDecrement. O componente App.js ficará desta forma:

import React from "react";
import ReactDOM from "react-dom";

import CountDisplay from "./CountDisplay";
import CounterButtons from "./CounterButtons";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {currentCount: 1};
  }

  handleIncrement() {
    this.setState({currentCount: this.state.currentCount + 1});
  }

  handleDecrement() {
    this.setState({currentCount: this.state.currentCount - 1});
  }

  render() {
    return (
      <div>
        <CounterButtons
          onIncrement={this.handleIncrement.bind(this)}
          onDecrement={this.handleDecrement.bind(this)}
        />
        <CountDisplay 
          currentCount={this.state.currentCount}
        />
      </div>
    );
  }
}

export default App;

E agora, no componente CounterButtons.js, nós alteramos o atributo onClick dos botões para que chame as funções passadas através das props. Para que possamos já chamar a função diretamente, sem precisar fazer bind e chamar um método definido externamente, vamos utilizar arrow functions. E então, seu componente CounterButtons.js ficará desta forma:

import React from "react";
import ReactDOM from "react-dom";

class CounterButtons extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => this.props.onIncrement()}>
          +
        </button>
        <button onClick={() => this.props.onDecrement()}>
          -
        </button>
      </div>
    );
  }
}

export default CounterButtons;

Neste caso, onde nossa aplicação é muito simples, tudo isso parece apenas adicionar complexidade de forma desnecessária, mas em aplicações maiores, essa separação de conceitos e organização em componentes é vital.

Conclusão

Para resumir um pouco tudo que vimos, seguem alguns pontos:

  • Existem duas formas de criar componentes, a forma funcional e componentes de classes
  • Props são dados passados a um componente para serem usados por ele
  • State são dados a serem usados pelo componente, privados e controlados pelo próprio
  • Apenas componentes de classes podem utilizar o state no React
  • Você pode passar funções através das props ao organizar sua aplicação em componentes

Bem, com este post espero ter ajudado a esclarecer um pouco os conceitos sobre componentes, state e props no React. Qualquer dúvida é só enviar nos comentários.

Abraços

One comment on “Aprenda React – Componentes, State e Props

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *