Skip to main content

O React é uma ferramenta que se originou de uma biblioteca do Facebook e serve para criar interfaces de usuários para aplicações webs a partir do JavaScript.

De forma mais simples, ele é uma biblioteca em JavaScript utilizada para a criação de uma interface de usuário (UI).

O que é React e suas principais características

Suas principais características estão ligadas ao uso de componentes, props, states, Virtual DOM e o JSX.

Componentes

O uso de componentes é uma das principais características do React.

Para entender uma determinada página e agir sobre ela, o React a divide em pequenas partes chamadas componentes e as isola, e antes da tecnologia, cada parte era independente uma da outra.

Esses componentes são reutilizáveis ​​e, uma vez categorizados, podem ser reutilizados em qualquer página de um site ou aplicativo.

Os componentes da página podem ser organizados, por exemplo, na barra lateral, MenuSuperior, BotaoCamada ou o que o programador preferir.

Componentes podem ser comparados a funções em JavaScript.

Props

As propriedades, ou props se encontram dentro dos componentes.

Estas props são objetos com várias informações que podem ser de variados tipos, como função, número ou string.

State

Os estados, ou states, também são objetos ou informações.

No entanto, ao invés de serem passadas para o componente, eles são criados dentro do componente.

Diferentemente das propriedades, os states são mutáveis, como por exemplo variáveis declaradas dentro de uma função.

Virtual DOM

O VDOM é uma representação em memória do DOM (Document Object Model) real de uma interface.

No caso, o DOM real é a estrutura que representa a camada visual de uma página.

Para que entenda melhor, imagine o seguinte processo:

Para atualizar uma página, o React primeiro salva suas alterações em memória, ou seja, em um ambiente chamado de Virtual DOM.

Isso acontece porque manipular um DOM virtual é muito mais rápido do que manipular um DOM real — ou seja, a página que está sendo atualizada.

Em front-end, a atualização de DOMs é extremamente rápida, uma vez que é através deles que as páginas de um site ou aplicativo são efetivamente atualizadas.

Após criada esta estrutura virtual, o React a traduz para a tela real com o mínimo de processos possível, trazendo mais agilidade para a atualização.

Este processo é chamado de reconciliação.

JSX

O JSX possui uma sintaxe bastante familiar com HTML, mas com elementos de JavaScript.

Todos os componentes do React são descritos com o JSX, então se você pretende trabalhar com o React e todo o seu universo de possibilidades, é necessário aprender antes a compreender o JSX.

No entanto, existe o React e o React Native, por isso não vá se confundir e achar que são as mesmas ferramentas.

Qual a diferença entre React e React Native?

Enquanto o React é utilizado para a criação de aplicações de qualquer dispositivo, o React Native é utilizado para a construção de aplicativos mobile em Android e IOS.

Outra diferença importante é que o react é uma biblioteca para UI (como dissemos anteriormente), enquanto o React Native é um tradutor da linguagem JS para a linguagem nativa do dispositivo.

Vantagens do React

 

O React é uma das bibliotecas front end mais famosas e mais utilizadas no mundo. Logo após ter sido criada, ela se tornou open source, e isso contribuiu muito para o seu crescimento.
Hoje essa lib é encontrada em praticamente todos os dispositivos, apresentando como principais vantagens:

⦁ Sua flexibilidade relacionada a sua estrutura (diferente do Angular);

⦁ Permite usar javascript, ES6(javascript moderno com novas funcionalidades), TypeScript;

⦁ Utilização do JSX, que permite escrever HTML e CSS dentro de um arquivo JS, além de todos os recursos da linguagem como loops, funções de formatação, validações e muito mais;

⦁ Browser Tools, ferramentas que auxiliam no debug e construção das aplicações direto no browser;

⦁ Fácil de migrar entre versões;

⦁ A estrutura de componentes permite muito reaproveitamento de código e facilita muito na manutenção e evolução do código;

⦁ Muito popular;

⦁ Mobile com react native.

SEO-Friendly, a linguagem possui uma interface amigável para SEO, devido ao Virtual DOM, permitir uma renderização e performance leve nos servidores.

 

banner-conteige

Desvantagens do React

No entanto, suas desvantagens são:

⦁ Documentação oficial reduzida;

⦁ Nem todas as pessoas gostam do JSX por conta de ser difícil para quem está aprendendo a programar, ou para quem gosta de programar separadamente o HTML e CSS do JS;

⦁ É livre para definir padrão, o que pode gerar projetos pouco escaláveis, caso não seja estudado e se procure uma boa estrutura do projeto.

 

Antes da escolher o React, é necessário se perguntar se esses pontos negativos são um problema para você, e entender mais sobre ferramentas que te auxiliam nesse processo.

Como hospedar o React?

 

O React necessita de uma plataforma que suporte o Node.js para funcionar corretamente e aqui na Conteige.Cloud, você pode utilizar nossa Hospedagem Node.js para hospedar sua aplicação React com a máxima Performance e Segurança.

 

Gostou do artigo?

Leia outros artigos do nosso blog ou venha conhecer nossa ferramenta Conteige.Cloud e descubra como ela pode facilitar sua vida como desenvolvedor.