React (JavaScript)

Origem: Wikipédia, a enciclopédia livre.
React
React-icon.svg
Autor Jordan Walke
Desenvolvedor Facebook
Plataforma Multiplataforma
Modelo do desenvolvimento Software de código aberto
Lançamento 29 de maio de 2013 (9 anos)[1]
Versão estável 17.0.2[2] (22 de março de 2021; há 21 meses)
Idioma(s) Multilíngue
Escrito em Javascript[3]
Sistema operativo Multiplataforma
Gênero(s) Biblioteca JavaScript
Licença Licença MIT[4]
Estado do desenvolvimento Corrente
Tamanho 5,9 MB[2]
Página oficial reactjs.org

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 a criação de views declarativas e baseando-se em componentes, possuía o intuito 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.

É 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.[5]

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 recorrer ao HTML.[6]

Na pesquisa de 2018 sobre hábitos de desenvolvedores do site Stack Overflow, o React foi a terceira biblioteca ou framework[7] mais citado pelos usuários e desenvolvedores profissionais, ficando atrás somente do Node.js e Angular, respectivamente.[8]

JSX[editar | editar código-fonte]

Semelhante ao HTML, o JSX é uma extensão de sintaxe para JavaScript. Embora seu uso não seja obrigatório, a maioria dos desenvolvedores o utiliza para descrever como a UI deveria parecer.

Exemplo :

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

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

Depois da compilação, as expressões em JSX se transformam em chamadas normais de funções que retornam objetos JavaScript.[9]

Virtual DOM[editar | editar código-fonte]

É 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.[10]

Algoritmo de Reconciliação[editar | editar código-fonte]

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.[11]

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.[12]

Referências

  1. JSConf (5 de agosto de 2013). «[JSConfUS 2013] Tom Occhino and Jordan Walke: JS Apps at Facebook». Youtube (em inglês). Consultado em 4 de julho de 2022 
  2. a b «Release 17.0.2 (March 22, 2021)». Github (em inglês). 22 de março de 2021. Consultado em 22 de maio de 2021 
  3. «facebook/react: A declarative, efficient, and flexible JavaScript library for building user interfaces.». Github (em inglês). Consultado em 22 de maio de 2021 
  4. «react/LICENSE at master». Github (em inglês). Consultado em 22 de maio de 2021 
  5. «JavaScript's History and How it Led To ReactJS». thenewstack.io (em inglês). Consultado em 19 de fevereiro de 2017 
  6. «React Native: Bringing modern web techniques to mobile - Facebook Code». Facebook Code (em inglês). 26 de março de 2015 
  7. Bhandwalkar, Akash (2018). «React Portal: Portals in ReactJS (Updated 2022)». CronJ. Web Design and UI design. Consultado em 4 de julho de 2022 
  8. «Developer Survey 2018». Stack Overflow. 2018. Consultado em 4 de julho de 2022 
  9. «Introduzindo JSX – React». pt-br.reactjs.org. Consultado em 29 de setembro de 2022 
  10. «React: The Virtual DOM». Codecademy (em inglês). Consultado em 29 de setembro de 2022 
  11. «Reconciliação (Reconciliation) – React». pt-br.reactjs.org. Consultado em 29 de setembro de 2022 
  12. «Reconciliação ReactJS – Acervo Lima». acervolima.com. Consultado em 29 de setembro de 2022 
Ícone de esboço Este artigo sobre Internet é um esboço. Você pode ajudar a Wikipédia expandindo-o.