Primeiros passos com React: crie um contador

React é uma biblioteca JavaScript criada pelo Facebook (hoje Meta). Ela é usada para construir interfaces de usuário interativas e dinâmicas. É bem conhecida no mundo do desenvolvimento web pela eficiência, reutilização de código e facilidade de manutenção.

No React, usamos tags parecidas com HTML, mas elas se chamam elementos JSX (JavaScript XML). Uma das coisas legais do JSX é que ele permite escrever sintaxe parecida com HTML dentro do JavaScript, facilitando criar e gerenciar a interface (UI).

Existem algumas diferenças importantes entre HTML e JSX. Por exemplo, tags como <img>, <br> e <input> precisam sempre ser fechadas em si mesmas com uma / no JSX. Além disso, como class é uma palavra reservada do JavaScript, usamos className no JSX para definir classes CSS.

Dito isso, vamos nos divertir com o React criando um contador simples! Você pode usar essas tags e elementos para construir outros componentes também.

Preparando o Ambiente de Desenvolvimento

Antes de começar, verifique se você tem instalado:

• Node.js: você pode instalar aqui -> https://nodejs.org/pt
• Gerenciador de Pacotes: o Node.js já vem com o npm
• Editor de Código: VS Code -> https://code.visualstudio.com/download

Criando o projeto

Abra seu terminal e rode o seguinte comando (uma dica útil é criar um diretório¹ específico para o seu projeto usando mkdir, o que deixa mais fácil de achar e mantém seu espaço de trabalho organizado ):

$ npx create-react-app my-app

Nota: o "my-app" será o nome do projeto, então troque se quiser. Mas cuidado com nomes muito longos e caracteres especiais!

Agora, entre no diretório do projeto e inicie o servidor de desenvolvimento:

$ cd my-app
$ npm start

Seu projeto deve estar rodando!

O Script

Entendendo a Estrutura do Projeto

Como você deve ter percebido, há muitos arquivos e scripts no projeto recém-criado. Vamos modificar alguns deles para atender às nossas necessidades.

Criando um Componente

Primeiro, crie um novo diretório dentro da pasta src. Aqui, vamos chamá-lo de Components. Dentro dessa pasta, crie outra pasta chamada Member, que vai conter um arquivo chamado index.js. Abaixo está o script:

import React, { Component } from 'react';
class Member extends Component{
    render(){
        return(
            <div>
                Member
            </div>
        );
    }
}
export default Member;

Modificando o App.js

Em seguida, modificamos o arquivo App.js para implementar nosso contador:

//importar o react e o component para criar uma classe.
import React, { Component } from 'react'; 
//App herda as funcionalidades de Component.
class App extends Component {
  constructor(props) {
//super props é o construtor pai, e você só pode usar this depois de chamar o super(props).
    super(props);
//inicializa o estado (state) do componente como um contador definido em 0
    this.state = {
      counter: 0
    };
//increase e decrease são vinculados ao contexto da classe usando bind. Isso é necessário para que os métodos mantenham acesso ao this quando usados como callbacks de eventos.
    this.increase = this.increase.bind(this);
    this.decrease = this.decrease.bind(this);
  }
//aumenta o valor em 1
  increase() {
    let state = this.state;
    state.counter += 1;
//atualiza o state e dispara uma nova renderização
    this.setState(state);
  }
//diminui o valor em 1
  decrease() {
    let state = this.state;
    state.counter -= 1;
//atualiza o state e dispara uma nova renderização
    this.setState(state);
  }
  render() {
    return (
      <div>
        <h1>Counter</h1>
        <h3>
          <button onClick={this.decrease}>-</button>
          {this.state.counter}
          <button onClick={this.increase}>+</button>
        </h3>
      </div>
    );
  }
}
export default App;

Explicação do Código

O arquivo App.js define um componente React chamado App. Dentro do seu construtor, inicializamos um objeto de estado com a propriedade counter definida como 0.

No React, os componentes usam dois tipos principais de dados: props e state.

• Gerenciamento de Estado: usamos this.state para armazenar e gerenciar o valor do contador.
• Vinculação de Métodos: as funções increase e decrease modificam o estado do contador e são vinculadas no construtor.
• Atualização da Interface: o método render retorna uma estrutura JSX contendo um título <h1> e um elemento <h3> com dois botões (+ e -) para atualizar o valor do contador.
• Tratamento de Eventos: os botões chamam this.increase e this.decrease ao serem clicados, atualizando o estado e re-renderizando o componente com o novo valor do contador.

O método render() define a estrutura visual do componente:

1. Um título “Counter”
2. Um botão de diminuir (-) que chama o método decrease quando clicado
3. O valor atual do contador (this.state.counter)
4. Um botão de aumentar (+) que chama o método increase quando clicado

Entendendo Props e State no React

• Props (Propriedades):
  • Props são imutáveis, ou seja, não podem ser modificadas dentro do componente que as recebe.
  • Elas são passadas dos componentes pai para os componentes filhos.
  • As props permitem renderizar conteúdo dinâmico com base nos dados do componente pai.
• State (Estado):
  • Diferente das props, o state é mutável, ou seja, pode ser alterado dentro do componente.
  • O método setState é usado para atualizar o state e disparar uma nova renderização do componente.
  • O state é útil para elementos interativos e dinâmicos, como o nosso contador.

Ao entender a diferença entre props e state, você consegue gerenciar com eficiência o fluxo de dados e as interações entre componentes nas suas aplicações React.

Agora você tem um contador funcional em React! Experimente, personalize e explore mais sobre componentes React e gerenciamento de estado.

Bons códigos!

1. Diretórios e pastas do seu computador é a mesma coisa. Um exemplo de diretório é a pastas Downloads, onde encontramos tudo que baixamos. ↩︎