React

website: https://reactjs.org/

Criado pelo Facebook em 2011 e liberado para a comunidade em 2013, o React se define como uma "biblioteca Javascript para se criar interfaces de usuário".

Website do React Com o React você consegue criar interfaces interativas com mais facilidade através de uma arquitetura baseada em componentes que gerenciam seu próprio estado e usam esses dados para renderizar HTML no lado do cliente.

As lógicas dos componentes do react são escritas em Javascript ao invés de templates como o EJS e o estado de cada componente se trata de basicamente dados em variáveis especiais que podem ser alterados de maneira interativa, fazendo com que a interface "reaja" a essas mudanças, se alterando e apresentando os novos valores de forma correta, assim como vimos no VueJS.

Um simples componente React

No React componentes podem ser usando classes ou funções Javascript em conjunto com uma tecnologia chamada JSX, que lembra o HTML ou o XML e pode ser utilizado "dentro" de códigos Javascript de forma mais clara que em templates.

Um simples componente React usando uma classe e JSX é algo como:

class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.nome}
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage nome="Maria José" />,
  document.getElementById('hello-example')
);

Resultado:

Hello Taylor

Repare que o componente HelloMessage é uma classe que extende React.Component e nessa classe existe um método chamado "render()" que retorna um bloco de código JSX que nada mas é que uma junção entre javascript e HTML similar ao uso de templates, mas com mais restrições e mais performático. O bloco é uma DIV com o texto "OI {this.props.nome}", e isso será substituído pelo atributo "nome" passado para o componente quando ele for utilizado. "props" é o objeto que guarda esses atributos.

Logo abaixo do código o componente HelloMessage é utilizado com o atributo nome="Maria José" o que faz com que dentro do componente exista this.props.nome com o valor em questão.

A parte que faz ReacDOM.render(.....) é usada quando se está se desejando se renderizar um componente do react em um elemento da página. Nesse caso o componente é o HelloMessage e o elemento seria algum qualquer com o id 'hello-example' que exista em seu HTML.

Além disso, o React permite que você tenha um gerenciamento local do estado do componente com o que chamamos de "state".

Existem duas formas de se criar componentes com o React e, da mesma forma, duas formas de se gerenciar states dentro de componentes.

Digamos que no exemplo do componente HelloMessage, a gente desejar criar um contador de cliques no nome. Seria necessário uma variável de estado para se guardar o número de vezes que o nome foi clicado e uma forma de atualizar o seu valor quando houver um novo click.

A primeira forma é usando classes (como já está), e essa funcionalidade seria assim:

class HelloMessage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contador: 0
    }
    // necessário usar o bind para usar o "this.state" dentro do método
    this.clicou = this.clicou.bind(this);
  }

  clicou(e) {
    this.setState({
      contador: this.state.contador + 1
    })
  }
  render() {
    return (
      <div onClick={this.clicou} style={{cursor: "pointer"}}>
        Oi {this.props.nome}<br/>
        clicou {this.state.contador} vezes
      </div>
    );
  }
}

ReactDOM.render(
  <HelloMessage nome="Maria José" />,
  document.getElementById('hello-example')
);

Resultado:

Oi Maria José
clicou 10 vezes

Repare que algumas coisas precisaram ser feitas. Primeiro a classe precisa de um construtor que chama o método super(props), depois cria uma variável de classe especial chamada this.state com um valor inicial com o contador = 0. Depois é necessário criar um método chamado "clicou(e)" e no construtor realizar um bind dele com o "this" para se poder usar o this.setState dentro do método para trocar o valor do estado. Com tudo isso pronto, aí sim podemos dentro do render() agora colocar o {this.state.contador} para ser exibido e um onClick={this.clicou} no div principal para executar o método que incrementa o contador e altera o estado do componente.

É muito trabalhoso sim, e a equipe do React criou uma forma mais simples de se realizar o gerenciamento de estados locais, o React Hooks.