O que é ReactJS? - Thiago Gaelzer

Se você já navegou por uma aplicação web moderna e interativa, é bem provável que tenha experimentado o poder do ReactJS, uma das bibliotecas JavaScript mais populares do mundo.

Desenvolvido pelo Facebook, o React revolucionou a forma como desenvolvedores constroem interfaces de usuário (UIs), graças à sua abordagem baseada em componentes, uso do Virtual DOM e foco em desempenho.

Neste artigo, você vai entender o que é o ReactJS, como ele surgiu, quais são suas principais características, vantagens e desvantagens — e ainda vai aprender a dar os primeiros passos com um exemplo prático. Se você está iniciando no desenvolvimento front-end ou buscando se atualizar com as ferramentas mais modernas do mercado, este guia é para você.

1 – O que é ReactJS?

ReactJS (frequentemente chamado apenas de React) é uma biblioteca JavaScript de código aberto para a construção de interfaces de usuário (UIs) interativas e reativas. Desenvolvida pelo Facebook, ela se destaca por seu foco na componentização e na criação de aplicações de página única (SPAs) eficientes e responsivas. Em vez de manipular diretamente o DOM (Document Object Model) do navegador, o React introduz um conceito inovador: o Virtual DOM, que otimiza drasticamente o desempenho das aplicações.

1.1 – Como o ReactJS surgiu?

O React foi criado por Jordan Walke, um engenheiro de software do Facebook, em 2011. Sua motivação inicial foi resolver os desafios de manutenção e escalabilidade enfrentados pelas interfaces de usuário complexas do Facebook, especialmente no news feed. A arquitetura tradicional de manipulação do DOM estava se tornando um gargalo, e a necessidade de uma abordagem mais eficiente e declarativa era evidente.

Inicialmente chamado de “FaxJS”, o React foi introduzido publicamente em 2013, durante a conferência JSConf US. Desde então, sua adoção cresceu exponencialmente, impulsionada pela sua eficácia na construção de UIs complexas e pela forte comunidade que se formou ao seu redor.

2 – As principais características do React

O React se destaca por diversas características que o tornam uma escolha poderosa para o desenvolvimento front-end:

Baseado em Componentes: o coração do React são os componentes. Uma interface de usuário é dividida em pequenas partes isoladas e reutilizáveis, como botões, barras de navegação ou cartões de produto. Cada componente possui sua própria lógica e aparência, o que facilita a organização, manutenção e reusabilidade do código.
Virtual DOM: em vez de fazer atualizações diretas no DOM real do navegador (as quais são custosas), o React cria uma cópia leve desse DOM em memória, chamada de Virtual DOM. Quando o estado de um componente muda, o React compara o Virtual DOM atual com o anterior e calcula a forma mais eficiente de atualizar apenas as partes que realmente mudaram no DOM real. Isso resulta em um desempenho superior.
Abordagem Declarativa: no React, você descreve como a UI deve se parecer para um determinado estado. E o React se encarrega de renderizá-la e mantê-la atualizada. Isso contrasta com a abordagem imperativa, onde você dita passo a passo como manipular o DOM. A abordagem declarativa torna o código mais previsível e fácil de depurar.
JSX: o JSX (JavaScript XML) é uma extensão de sintaxe para JavaScript que permite escrever código HTML dentro do JavaScript. Embora não seja obrigatório, o JSX é amplamente utilizado no React por tornar a criação de componentes mais intuitiva e legível, misturando a lógica JavaScript com a estrutura da interface.
Fluxo de Dados Unidirecional (One-Way Data Binding): o React segue um fluxo de dados unidirecional, onde os dados fluem de componentes pais para componentes filhos através de props (propriedades). Isso simplifica o rastreamento e a depuração do estado da aplicação, tornando-a mais previsível.

2.1 – Vantagens e desvantagens

Como qualquer tecnologia, o React possui seus pontos fortes e fracos. Vamos ver uma lista de vantagens e desvantagens dessa biblioteca, começando pelas vantagens:

Eficiência e Desempenho: graças ao Virtual DOM, o React otimiza as atualizações da UI, resultando em aplicações rápidas e responsivas.
Reusabilidade de Componentes: a arquitetura baseada em componentes promove a modularidade e reusabilidade do código, acelerando o processo de desenvolvimento e reduzindo a duplicação de códigos.
Grande Comunidade e Ecossistema: o React possui uma das maiores e mais ativas comunidades de desenvolvedores, o que significa vasta documentação, tutoriais, bibliotecas de terceiros e suporte constante.
Curva de Aprendizagem Moderada (para o básico): embora existam conceitos avançados, os fundamentos do React (componentes, props, estados) são relativamente fáceis de assimilar, especialmente para quem já tem algum conhecimento em JavaScript.
Flexibilidade: o React é uma biblioteca, não um framework. Dessa forma, ele oferece flexibilidade para escolher outras bibliotecas e ferramentas (como roteadores, gerenciadores de estado, etc.) que melhor se adaptem às necessidades do seu projeto.

Mas, como não existe nenhuma ferramenta perfeita, ao conhecer o React é importante levar em conta algumas pequenas desvantagens dessa bilbioteca:

Biblioteca, Não Framework: em alguns casos, a flexibilidade pode ser uma desvantagem para iniciantes, que podem se sentir perdidos com a quantidade de escolhas de ferramentas e bibliotecas complementares. Um framework oferece uma estrutura mais “opiniosa”.
JSX pode ser um Obstáculo Inicial: para quem nunca teve contato, a sintaxe JSX pode parecer estranha no início, aumentando a curva de aprendizagem da ferramenta.
Grande Velocidade de Mudanças: o ecossistema React evolui rapidamente, com novas ferramentas e abordagens surgindo frequentemente. Nesse cenário, manter-se atualizado pode ser um grande desafio.
SEO para SPAs: embora tenha melhorado muito, as Single Page Applications (SPAs) construídas com React podem apresentar desafios iniciais de SEO se não forem configuradas corretamente para renderização no lado do servidor (SSR) ou pré-renderização.

3 – Como instalar o React?

Para começar a desenvolver com React, você precisará ter o Node.js e o npm (Node Package Manager) ou Yarn instalados em sua máquina. Se você ainda não tem o Node.js em sua máquina, clique aqui para conhecer mais sobre esse ambiente de execução JavaScript e para aprender a como instalá-lo.

A maneira mais comum e recomendada de iniciar um novo projeto React é usando o Create React App. Para instalar o Create React App e criar um novo projeto, abra o terminal de sua IDE (ou do seu sistema operacional) e execute os seguintes comandos:

npx create-react-app contador-de-cliques-react
cd contador-de-cliques-react
npm start

npx create-react-app meu-primeiro-app-react: este comando utiliza o npx (que executa pacotes npm sem a necessidade de instalá-los globalmente) para baixar e executar o create-react-app. Ele criará uma nova pasta com o nome meu-primeiro-app-react contendo toda a estrutura inicial do seu projeto React.

cd meu-primeiro-app-react: navega para o diretório do seu novo projeto.

npm start: inicia o servidor de desenvolvimento do React, que abrirá automaticamente seu aplicativo no navegador (geralmente em http://localhost:3000).

Você perceberá que seu projeto terá uma estrutura idêntica a essa aqui:

Estrutura inicial do contador de cliques.

E se você acessar http://localhost:3000 (ou o endereço que você definiu para subir a aplicação), verá uma tela semelhante a essa aqui:

Página de exemplo inicial de projetos React.

Por enquanto, vamos manter nosso projeto assim. Nos tópicos a seguir vamos construir um exemplo prático e didático com React. Mas antes disso, vamos ver dois pontos muito importantes:

3.1 – IDEs para desenvolver em React

Uma IDE (Ambiente de Desenvolvimento Integrado) ou um editor de código bem otimizado é uma ferramenta crucial para garantir uma boa produtividade e tornar o processo de desenvolvimento mais agradável. Essas ferramentas oferecem recursos como realce de sintaxe, autocompletar inteligente, depuração integrada e suporte a extensões que facilitam muito a escrita de código React.

Embora, em teoria, você possa usar qualquer editor de texto, algumas ferramentas se destacam pelo seu suporte robusto a JavaScript e React. As mais populares e recomendadas pela comunidade são:

Visual Studio Code (VS Code): de longe a escolha mais popular, o VS Code é um editor de código leve, mas extremamente poderoso, desenvolvido pela Microsoft. Ele possui um vasto ecossistema de extensões que transformam-no em uma IDE completa para desenvolvimento React, com funcionalidades como IntelliSense, depuração de código, integração com Git e muito mais. É uma excelente opção tanto para iniciantes quanto para desenvolvedores experientes.
WebStorm: desenvolvido pela JetBrains, o WebStorm é uma IDE JavaScript mais robusta. Ele oferece uma integração mais profunda com as tecnologias front-end, proporcionando recursos avançados de refatoração, análise de código e depuração, além de um suporte excepcional para React. É ideal para quem busca uma experiência de desenvolvimento mais completa e profissional.
Sublime Text: um editor de texto rápido, leve e elegante. Conhecido por sua alta performance, embora seja menos completo que as opções anteriores por padrão, ele pode ser estendido com pacotes e plugins para dar suporte ao desenvolvimento React.

É importante frisar que, além dessas opções, há muitas outras disponíveis no mercado. A escolha da IDE é pessoal e depende das suas preferências e necessidades. No entanto, eu recomendo o VS Code, pois ele é amplamente recomendado por sua flexibilidade, leveza, ampla gama de extensões e, além de tudo isso, é gratuito.

3.2 – Documentação oficial

A documentação oficial do React é um recurso inestimável para qualquer desenvolvedor, seja ele iniciante ou experiente. Ela é constantemente atualizada, abrangente e fornece guias detalhados, exemplos de código e explicações claras sobre todos os conceitos do React.

Você pode acessá-la em: https://react.dev/

É altamente recomendável consultá-la sempre que tiver dúvidas ou quiser aprofundar seus conhecimentos em algum tópico específico.

4 – Exemplo prático: um componente de contador simples

Vamos criar um simples componente de contagem de cliques para ilustrar os conceitos de estado e JSX no React.

No projeto em que criamos no item 3, vamos criar um novo diretório chamado contador e dentro dele vamos criar dois novos arquivos: contador.jsx e contador.css. Sua estrutura ficará assim:

Estrutura atualizada do contador de cliques com a pasta contador.

Agora, você vai inserir os códigos abaixo em seus respectivos arquivos. Para um melhor entendimento, lembre-se a função de cada arquivo:

– contador.jsx: é o componente do contador de cliques em si.
– contador.css: é o componente que contém a estilização do contador.
– App.js: é o componente principal, onde a estrutura inicial da aplicação é definida e outros componentes são renderizados.

contador.jsxcontador.cssApp.js


import { useState } from 'react'; // Importa o hook useState do React
import './contador.css' // Importa a folha de estilos do componente

export default function Contador() {
  // Declara uma variável de estado 'count' e uma função 'setCount' para atualizá-la
  // O valor inicial de 'count' é 0
  const [count, setCount] = useState(0);

  // Função para incrementar o contador
  const incrementar = () => {
    setCount(count + 1);
  };

  // Função para decrementar o contador
  const decrementar = () => {
    setCount(count - 1);
  };

  return (
    <div className='container'>
      <h1> Contador React</h1>
      <p> Valor atual: {count}</p> {/* Exibe o valor do estado */}
      <button> onClick={incrementar}>+ Incrementar</button> {/* Botão para incrementar */}
      <button onClick={decrementar}>- Decrementar</button> {/* Botão para decrementar */}
    </div>
  );
}


body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

h1 {
  color: #333;
}

p {
  font-size: 1.5rem;
  margin: 20px 0;
}

button {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 20px;
  margin: 5px;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #45a049;
}


import './App.css';
import Contador from './contador/contador';

function App() {
  return (
    <Contador/>
  );
}

export default App;

Ao aplicar esses códigos você chegará em um resultado idêntico a esse aqui:

Demonstração do contador de cliques em funcionamento.

Veja que, apesar de simples, o contador de cliques já nos traz uma boa introdução de como o React funciona. Ao utilizar essa biblioteca podemos ir muito mais longe, criando aplicações robustas e altamente escaláveis. Não deixe de pesquisar e se aprofundar nessa ferramenta amplamente popular no desenvolvimento front-end.

Conclusão

O ReactJS é uma das bibliotecas JavaScript mais populares que existe e possui um ecossistema completo que transformou a forma como criamos aplicações web.

Com sua arquitetura baseada em componentes reutilizáveis, atualização eficiente via Virtual DOM e uma comunidade extremamente ativa, ele oferece uma base sólida para o desenvolvimento de interfaces modernas, escaláveis e de alta performance.

Neste artigo, você teve uma introdução completa ao React, aprendeu a configurá-lo, explorou suas principais vantagens e ainda desenvolveu um componente simples. Agora é hora de ir além: explore a documentação oficial, teste outros componentes e aprofunde-se nas ferramentas que tornam o React ainda mais poderoso.

Espero que este conteúdo seja útil em sua trajetória! Se você gostou do conteúdo, compartilhe com seus amigos e aproveite para conhecer mais sobre programação aqui!