O React (também denominado React.js ou ReactJS) é uma biblioteca front-end JavaScript de código aberto com foco em criar interfaces de usuário em páginas web, criado em 2011 pelo Facebook, com o objetivo de otimizar a atualização e a sincronização de atividades simultâneas no feed de notícias da rede social e melhorar a manutenção de código, com a criação de views declarativas e componentes.
É mantido pelo Facebook, Instagram, outras empresas e uma comunidade de desenvolvedores individuais. É utilizado nos sites da Netflix, Imgur, Feedly, Airbnb, SeatGeek, HelloSign, Walmart e, outros.
Em 2015, o Facebook anunciou o módulo React Native, que em conjunto com o React, possibilita o desenvolvimento de aplicativos para Android e iOS utilizando componentes de interface de usuário nativos de ambas plataformas, sem precisar usar o HTML.
Na pesquisa de 2018 sobre hábitos de desenvolvedores do site Stack Overflow, o React foi a terceira biblioteca ou framework mais citado pelos usuários e desenvolvedores profissionais, ficando atrás somente do Node.js e Angular, respectivamente.
JSX O JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que escrever a interface do usuário de forma semelhante ao HTML. Embora seu uso não seja obrigatório, a maioria dos desenvolvedores usa para descrever como a UI deveria parecer. Essa abordagem facilita a criação dos componentes da interface do usuário no React, pois os componentes são definidos de forma declarativa deixando o código legível e intuitivo. Exemplo:
import { useState } from 'react'; import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
// Estado reativo const [name, setName] = useState('Mundo');
root.render( <h1>Olá, {name}!</h1> );
Depois da compilação usando o Babel, as expressões em JSX são transformadas em chamadas normais de funções que retornam objetos JavaScript. O JSX pode ser usado fora do React, se configurar uma transformação personalizada do JSX via Babel.
Virtual DOM A Virtual DOM (do inglês, "DOM virtual") é uma representação virtual da interface do usuário que é armazenada em memória e mantida em sincronia com a DOM “real”. Dessa forma, o React só altera na verdadeiro DOM apenas o que foi modificado. Assim, é abstraída a manipulação de atributos, de eventos e atualização manual do DOM.
A Virtual DOM está associada aos elementos da biblioteca, que são objetos representando a UI. Entretanto, o React também possui os “fibers”, que são objetos internos que contém informações sobre a árvore de componentes e podem ser considerados parte da Virtual DOM.
Algoritmo de reconciliação Reconciliação é o processo pelo qual o React atualiza o DOM do navegador. A cada renderização o React retorna uma árvore de elementos diferentes. Nesse sentido, é necessário descobrir como a interface deve ser atualizada para estar em sincronia com a última árvore apresentada. Os conceitos por trás deste algoritmo são a Virtual DOM e o algoritmo de diffing.
Em toda atualização, é criado uma nova Virtual DOM e compara com a sua versão anterior. Essa comparação ocorre pelo algoritmo de diffing. Após a comparação ser realizada, uma outra Virtual DOM é produzida já com as alterações adicionadas. Por fim, o React faz a atualização da DOM “real” no navegador com o menor número de atualizações possíveis.
Ver também Next.js Angular (framework) SolidJS Svelte Vue.js
Categoria:Bibliotecas JavaScript