O problema que o React resolve

Antes do React e de bibliotecas similares que usam algo parecido com o DOM virtual (vamos falar sobre isso em breve), manter o DOM sincronizado era doloroso. Porque dizemos isso? Porque basicamente tínhamos 2 maneiras de fazer isso:

1. Renderizar novamente o DOM quando houvesse mudança nos dados.
2. Escrever funções de manipulação do DOM para sincronizar de acordo com a mudança dos dados.

As duas abordagens tem problemas e nós vamos analisar quais problemas são esses atráves de um simples exemplo. Imagine que estamos construindo um carrinho de compras sem o React ou biblioteca similar.

Imagine que você tem o seguinte JSON que deseja mostrar na sua tela:

[
  'Café',
  'Banana',
  'Bolo de Morango'
]

Renderizar isso é fácil, não é? Renderizando esse JSON em uma lista no HTML, teríamos o seguinte:

<ul>
  <li>Café</li>
  <li>Banana</li>
  <li>Bolo de Morango</li>
</ul>

e o resultado final seria:

source code

Agora imagine que você deseja dar suporte a adição de um novo item na lista. Se o usuário fosse adicionar o item Arroz na lista, nosso JSON então ficaria assim:

[
  'Café',
  'Banana',
  'Bolo de Morango',
  'Arroz'
]

Atualizamos os dados, e agora como atualizar o DOM? Como fazer isso sem React, ou qualquer biblioteca similar?

Como vimos, temos duas opções:

1. Renderizar novamente seções do DOM quando houver mudança dos dados.
2. Escrever funções de manipulação do DOM para sincronizar o DOM com a mudança dos dados.

Vamos explorar cada uma dessas opções nas próximas duas seções.