O que é e porque React?

Antes de mais nada, é preciso entender que o React nada mais é do que uma biblioteca Javascript feita para facilitar a criação de interface com o usuário.

Vantagens do React

O react é uma tecnologia moderna, robusta e que permite criar essa interface com o usuário utilizando os componentes, facilitando o reuso do código da interface. Além de ser muito popular e ser a base tecnológica do React Native.

Imagem 1: React Native

Entendendo o DOM

Quando criamos HTML e CSS, estamos criando uma interface através da linguagem HTML. Porém, por trás, o browser mantém o DOM, que é a representação dessa árvore de componentes organizada de forma hierárquica. Então, o Document Object Model é uma representação da interface do usuário.

E uma coisa interessante é que o browser permite que essa parte seja alterada através do javascript, refletindo essa alteração na tela do usuário.

Single Page Application

Para trazer essa parte dinâmica, o React precisa alterar o DOM, com base nos estados e propriedades, armazenados no sistema. Caso essas informações mudem, o React irá "reagir", alterando o DOM e trazendo a mudança da interface.

Como o React faz essas alterações via javascript, a página permanece sem a sensação de carregamento, fazendo com que o usuário tenha essa mudança na tela, mas sem o reload da página. Atualmente, essa característica é comum nos sistemas web.

Esse conceito é denominado Single Page Application (SPA).

Virtual DOM

Como já foi dito, o React altera o DOM à medida que os dados mudam. Porém, para fazer isso, é utilizado o conceito do Virtual DOM, que nada mais é que uma cópia do DOM que o browser tem.

A ideia é que atualizar diretamente o DOM pode não ser tão performático e o React precisa ser cirúrgico nessas alterações. Então, primeiro as mudanças são carregadas nesse Virtual DOM, sendo verificada qual a diferença dele para o DOM do browser. Feita essa operação, o React vai no DOM do browser e atualiza somente o componente necessário.