WebApp Saga
Step 1 : Fbox – Overview
No modo React os componentes (pedaço de uma UI) são o coração desta tecnologia.
app React
Um app React é composto pela criação de vários componentes independentes e reutilizáveis para compor UI complexas.
Contém ao menos um componente (root), que contém outros componentes filhos. Ou seja, ela é uma árvore de componentes.
Em termos de implementação:
Um componente tem a implementação como uma classe JS que possui os métodos:
- State() responsável pela exibição dos dados quando o componente for renderizado.
- Render() responsável por descrever como a UI surge. A saída é um elemento React, um JS simples que faz o mapeamento do DOM.
Em resumo, o React é uma representação “ligth” do DOM em memória, um virtual DOM leve e de fácil criação.
Estado
Quando o estado de um componente sofrer alteração, temos um novo elemento React.
O React faz a comparação deste elemento com o anterior para ver o que mudou, e atualizará a parte relativa do DOM real para manter a sincronia com o DOM virtual. Desse modo, não precisamos tratar com a API do DOM no browser.
Apenas alteramos o estado de um componente, e o React irá se encarregar de atualizar automaticamente o DOM para equiparar o estado.
A lib React
Por este motivo, a lib é conhecida como React, ou seja, quando o estado muda, o React reaje a esta mudança e atualiza o DOM.
Assim, o React é uma lib e não um framework (como o Angular), e, sua responsabilidade é atuar na criação de (UI), por isso ela possui uma API pequena.
Então ao criar apps React, poderemos recorrer na utilização de outras libs para executar tarefas como:
- Roteamento
- Serviços HTTP
- …
Isso ocorre porque essas tarefas não são o foco do React.
