Um Guia para Iniciantes no React.js
Para outros posts sobre React, JavaScript, .Net entre outras tecnologias confira meu site pessoal: thiagoreis.dev.
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:
Exemplo com ES6:
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.
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
Ciclo de Desmontagem
Ciclo com mudança em props
Ciclo com mudança no state
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