Como funciona o React?

O React é uma biblioteca JavaScript para criar interfaces de utilizador.

Os princípios e mecanismos principais do React incluem:

1. Abordagem baseada em componentes: A interface de utilizador é dividida em componentes independentes e reutilizáveis. Cada componente tem um estado (state) e propriedades (props) que determinam o seu comportamento e aparência.

2. DOM virtual: O React cria uma representação leve da árvore DOM na memória (DOM virtual). Quando os dados mudam (estado ou propriedades), o React constrói uma nova árvore DOM virtual.

3. Algoritmo de comparação de árvores (Diffing): O React compara a nova árvore DOM virtual com a anterior. Este processo chama-se "diffing". O algoritmo encontra rapidamente as diferenças entre as árvores.

4. Reconciliation: Com base nas diferenças encontradas, o React calcula o conjunto mínimo de operações necessárias para atualizar o DOM real.

5. Atualização do DOM real: O React aplica essas mudanças mínimas ao DOM real, minimizando operações dispendiosas de manipulação do DOM e melhorando o desempenho.

6. Fluxo de dados unidirecional: Os dados no React normalmente são transmitidos de cima para baixo, dos componentes pais para os filhos, através de propriedades (props). Isto facilita o acompanhamento de mudanças e a depuração.

7. JSX: Extensão de sintaxe do JavaScript que permite descrever a estrutura da interface de utilizador usando uma sintaxe semelhante a HTML, diretamente dentro do código JavaScript. JSX é compilado em chamadas de funções React (por exemplo, React.createElement).

// Exemplo de um componente React simples
function WelcomeMessage(props) {
  return <h1>Olá, {props.name}!</h1>;
}

// Uso do componente
const element = <WelcomeMessage name="Mundo" />;