Introdução ao React

Rafael Gerônimo

Uma rápida introdução aos princípios básicos do React.

Rafael Gerônimo

17 maio, 2019

Tutorial rápido para começar com a mais famosa biblioteca JavaScript do momento

Esse tutorial vai proporcionar um básico e rápido entendimento do React através da criação de uma aplicação muito simples. Vamos deixar de fora tudo que não for essencial.

O básico

Para começar a usar o React, vamos usar a configuração mais simples possível: um arquivo html que importe as bibliotecas React e ReactDOM, usando as tags de script.

<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    </head>
    <body>
        <div id="app"></div>
        <script type="text/babel" src="script.js"></script>
    </body>
</html>

Nós também importamos o Babel. Pois o React utiliza o JSX para escrever as marcações, e o Babel será o encarregado de transformar o JSX em JavaScript, para que o navegador consiga interpretá-lo.

Além disso, adicionamos uma <div> com o id "app". Este é o ponto de entrada para o nosso aplicativo. Aqui é onde nosso código vai ganhar vida.

Por último, adicionamos a nossa chamada para um arquivo externo, chamado script.js. É nesse arquivo que vamos escrever nosso código React.

Pronto. Nosso arquivo .html está preparado, esperando o React fazer sua mágica.

Components

Tudo no React é um component, e este geralmente possui as mesmas características que as classes do JavaScript. Criamos um component usando a classe React-Component. Vamos criar um component chamado Hello:

class Hello extends React.Component {
  render() {
    return <h1>Hello world!</h1>;
  }
}

E então, definimos os métodos para nosso component. No exemplo temos apenas um método, e esse é chamado de render().

Dentro do render() devemos colocar o que realmente desejamos mostrar na página. No caso acima, queremos simplesmente que ele exiba uma tag h1 com o texto Hello world! dentro dele.

Para que nosso conteúdo seja renderizado na tela, vamos precisar usar o ReactDOM.render():

ReactDOM.render(<Hello />, document.getElementById("app"));

É aqui que conectamos o nosso component Hello com o ponto de entrada do aplicativo no código html (<div id="app"></div>).

Então, estamos simplesmente dizendo: Ei React! Por favor, renderize o component Hello dentro do elemento do DOM com o id igual a app__!

E o resultado é esse:

A sintaxe html que vemos tomar forma no resultado acima (<h1> e <Hello />) é o nosso código JSX mencionado anteriormente. E isso não é realmente HTML, é muito mais poderoso! Embora tudo que escrevemos acabe tornando-se tags HTML no DOM.

O próximo passo é fazer com que nosso aplicativo manipule dados.

Manipulando dados

Existem dois tipos de dados no React: props e state. A diferença entre os dois é um pouco difícil de entender no começo, então não se preocupe se achar um pouco confuso. Será mais fácil quando você começar a trabalhar com eles.

A principal diferença entre os dois é que o state é privado e pode ser alterado a partir do próprio component onde se encontra. Já os props são externos e não são controlados pelo component proprietário diretamente. Seus dados transitam entre os components, e todos o controlam.

Um component pode alterar seu state interno diretamente, mas não pode mudar seus próprios props****.

Vamos dar uma olhada nos props primeiro.

Props

Nosso component Hello é completamente estático. Ele processa sempre a mesma mensagem, não importa qual ela seja. No entanto, uma das grandes características do React é a sua capacidade de reutilização, ou seja, a capacidade de escrever um component uma vez e, em seguida, reutilizá-lo em outro caso. Por exemplo, para exibir mensagens diferentes.

Para alcançar esse tipo de reutilização, adicionaremos props. E é assim que você passa props para um component:

ReactDOM.render(<Hello message="my friend" />, document.getElementById("app"));

Essa props é chamada de message e tem o valor 'my friend'. Podemos acessar essa props dentro do component Hello referenciando this.props.message, assim:

class Hello extends React.Component {
  render() {
    return <h1>Hello {this.props.message}!</h1>;
  }
}

Como resultado, teremos isso renderizado na tela:

A razão pela qual estamos escrevendo {this.props.message} com chaves é porque precisamos informar ao JSX que queremos adicionar uma expressão JavaScript. Isso é chamado de escaping.

Agora, temos um component reutilizável, que pode renderizar qualquer mensagem que quisermos na página! Yeah!

No entanto, e se quisermos que o component possa alterar seus próprios dados? Então temos que usar o state em vez disso!

State

Outra maneira de armazenar dados no React é no component state. E, ao contrário da props - que não pode ser alterada diretamente pelo component - o state pode.

Portanto, se você quiser que os dados do seu aplicativo sejam alterados, por exemplo, com base nas interações do usuário, ele deve ser armazenado no state de um component em algum lugar do aplicativo.

Inicializando o `state`

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "my friend (from state)!"
    };
  }
  render() {
    return <h1>Hello {this.state.message}!</h1>;
  }
}

Antes de definirmos o state, temos que chamar o super() no constructor. Isso ocorre porque ele não pode ser inicializado sem que o super() tenha sido chamado.

Alterando o `state`

Para modificar o state, simplesmente chame this.setState(), passando o novo objeto state como argumento. Faremos isso dentro de um método que chamaremos de updateMessage.

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "my friend (from state)!"
    };
    this.updateMessage = this.updateMessage.bind(this);
  }
  updateMessage() {
    this.setState({
      message: "my friend (from changed state)!"
    });
  }
  render() {
    return <h1>Hello {this.state.message}!</h1>;
  }
}

Nota: Para que isso funcione, também precisamos vincular (bind) a palavra chave this ao método updateMessage__. Caso contrário, não teríamos acesso ao conteúdo dentro do método.

Manipuladores de Eventos

O próximo passo é criar um botão para clicar e acionar o método updateMessage().

Então, adicionemos o botão ao render():

render() {
    return (
        <div>
            <h1>Hello {this.state.message}!</h1>
            <button onClick={this.updateMessage}>Click me!</button>
        </div>
    )
}

Aqui, estamos adicionando um event listener no botão quando adicionamos o eventos onClick. Esse, ao ser acionado, chama o método updateMessage.

Aqui está o component inteiro:

class Hello extends React.Component {
  constructor() {
    super();
    this.state = {
      message: "my frien (from state)!"
    };
    this.updateMessage = this.updateMessage.bind(this);
  }

  updateMessage() {
    this.setState({
      message: "my friend (from changed state)!"
    });
  }

  render() {
    return (
      <div>
        <h1>Hello {this.state.message}!</h1>
        <button onClick={this.updateMessage}>Click me!</button>
      </div>
    );
  }
}

O método updateMessage chama então o this.setState(), que altera o valor this.state.message. E quando clicamos no botão, temos esse resultado:

Parabéns! Agora você tem uma compreensão básica dos conceitos mais importantes do React.

<rafael.geronimo.dev/blog>