Um Guia para Iniciantes no React.js

A biblioteca React.js foi lançada em 2013 pelo Facebook. Seu foco não é ser um framework completo como o Angular e sim ser somente o “V” do MVC (Model View Controller) focando apenas na criação de componentes visuais.

Certo, você deve estar se perguntando: “já que o React é focado apenas na view, como fazemos para que a aplicação se comunique com uma API, consuma dados e tenha outras funcionalidades que não estejam ligadas somente ao “V” do MVC?”. O que permite a criação de uma aplicação SPA completa é a adição de outras bibliotecas que fazem parte do ecossistema React, como por exemplo a biblioteca Axios para fazer requisições HTTP.

Meu foco nesse post será te guiar na abordagem e exemplificação dos conceitos principais do React. Essa primeira parte será mais conceitual, no próximo post iremos colocar todos esses conceitos em prática na criação de uma aplicação que irá consumir uma API.

Conhecendo o JSX

O JSX é algo que causa bastante estranheza inicialmente e até mesmo algumas críticas, pois vai de encontro ao princípio “Separation of concerns” ao juntar o HTML com o JavaScript, mas mesmo sendo estranho inicialmente, logo vemos que essa forma faz sentido e facilita muito o desenvolvimento, pois temos tudo que precisamos na estrutura do componente.

O significado de JSX é JavaScript eXtension, ou seja, uma extensão de sintaxe para o JavaScript. Vale lembrar que o JSX não será interpretado pelo navegador, é preciso usar um transpiler como o Babel, que irá transformar o JSX em código JavaScript.

Desenvolvimento Orientado a Componentes

Ao desenvolver com React utilizamos componentes para dividir a interface em diversas partes independentes que podem ser reutilizadas e tratadas de forma isolada. Dessa forma, não precisamos criar componentes únicos e complexos, mantemos cada componente simples com a responsabilidade de fazer uma única coisa bem feita e criamos interfaces ricas e complexas ao combinar os componentes menores.

Em React temos dois tipos diferentes de componentes, componentes funcionais e componentes de classe.

Componentes Funcionais

Os componentes funcionais tem como função receber um objeto “props” como argumento e retornar um elemento React sem se importar com o estado da aplicação. Esse tipo de componente é chamado de funcional porque é basicamente uma função JavaScript. Um componente funcional também é chamado de “apresentacional”, “mudo” ou “sem estado”.

Exemplo com ES5:

import React from 'react';

export default function person() {
   return <h1>Person Name</h1>
}

Exemplo com ES6:

import React from 'react';

const person = () => {
    return <h1>Person Name</h1>
};

export default person;

Componentes de Classe

Os componentes de classe precisam estar cientes do estado da aplicação, de acordo com determinada ação do usuário(como clicar em um botão) o componente deve responder de alguma forma. O componente de classe também é conhecido como “container”, “smart” ou “stateful”.

Props

Props é um objeto passado por um componente pai para um componente filho, e contém todas as informações relevantes para aquele componente.

Exempo de passagem de prop do componente pai para o componente filho.

Exempo de uso de uma prop no componente filho.

Estado

O estado de um componente React é um objeto JavaScript responsável por armazenar e reagir aos eventos do usuário. Todo componente de classe tem seu próprio objeto de estado possibilitando assim, sempre que o estado de um componente for alterado, o componente e seus filhos serão renderizados novamente.

Para inicializarmos o estado inicial de um componente de classe, fazemos a definição no método construtor e para acessar o estado usamos this.state:

Quando o componente possui um método construtor, é obrigatória a chamada ao método super(), pois o componente é uma subclasse da classe Component. Para usar this.props no contexto do método construtor é preciso passar props como parâmetro para o método super().

Ciclo de Vida

Nos componentes React é possível declarar métodos que serão chamados automaticamente em certas ocasiões durante o ciclo de vida. Para entendermos todo o ciclo de vida, é preciso diferenciar as ações ocorridas em cada fase como a fase de criação, mudança no estado e mudança no objeto props.

Ciclo de Montagem

Métodos de Ciclo de Vida invocados no Ciclo de Montagem

Ciclo de Desmontagem

Método de Ciclo de Vida invocado no Ciclo de Desmontagem

Ciclo com mudança em props

Métodos de Ciclo de Vida chamados quando as props de um componente mudam

Ciclo com mudança no state

Métodos de ciclo de vida invocados quando ocorre mudança de estado no componente

O fluxo de mudança de estado é praticamente o mesmo fluxo disparado pelas alterações em props, com exceção que não há uma chamada ao método componentWillReceiveProps. Alterações em props podem causar uma mudança no state, mas o oposto não pode ocorrer. Se for preciso executar operações após uma mudança de estado devemos utilizar o método componentWillUpdate.

Conclusão

Abordamos nesse post alguns dos principais conceitos para começar o estudo do React, mas isso é só o começo, para dominar todo o ecossistema React ainda temos muito estudo pela frente. No próximo post vamos partir para a prática e criar uma aplicação onde iremos aplicar todos os conceitos vistos até aqui.

Fontes:
- Documentação do React 
- Livro The Road to learn React
- Livro Pro React
- Curso React 16.6 — The Complete Guide