React (JavaScript)

React
Autor	Facebook
Desenvolvedor	Facebook
Plataforma	Multiplataforma
Modelo do desenvolvimento	Software de código aberto
Lançamento	29 de maio de 2013 (11 anos)
Versão estável	19.0.0 (5 de dezembro de 2024)
Idioma(s)	Multilíngue
Escrito em	JavaScript, TypeScript, Rust, C++
Sistema operativo	Linux, macOS, Windows
Gênero(s)	Biblioteca JavaScript
Licença	Licença MIT
Estado do desenvolvimento	Ativo
Tamanho	237 kB
Página oficial	react.dev
Repositório	github.com/facebook/react

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:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

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

É 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

• Angular (framework)
• SolidJS
• Svelte
• Vue.js