React para JavaScript (Node.js): guia completo com exemplos

O que é React e para que serve?

React é uma biblioteca JavaScript declarativa, eficiente e flexível de código aberto para criar interfaces de usuário (UI). Foi desenvolvida por engenheiros do Facebook (atual Meta) em 2013 e desde então se tornou uma das tecnologias front-end mais populares do mundo. React permite que desenvolvedores criem aplicações web complexas, interativas e escaláveis, dividindo a interface em componentes independentes e reutilizáveis.

Para que serve o React?

\n
• Abordagem baseada em componentes: React constrói a UI a partir de blocos isolados (componentes), cada um gerenciando seu próprio estado. Isso simplifica o desenvolvimento, teste e manutenção do código.
\n
• Declaratividade: Você descreve como a UI deve ser para cada estado da aplicação, e o React atualiza e renderiza eficientemente apenas os componentes que mudaram. Isso torna o código mais previsível e fácil de depurar.
\n
• DOM Virtual (Virtual DOM): React usa uma cópia leve do DOM real (Document Object Model). Quando o estado da aplicação muda, o React primeiro atualiza o DOM virtual, depois o compara com a versão anterior (diffing) e aplica o conjunto mínimo de alterações ao DOM real. Isso aumenta significativamente o desempenho, especialmente em aplicações com atualizações frequentes.
\n
• Comunidade e ecossistema enormes: React tem uma das maiores comunidades de desenvolvedores, o que significa abundância de soluções prontas, bibliotecas, ferramentas (React Router, Redux, Next.js, Gatsby) e materiais de aprendizado.
\n
• Versatilidade: React pode ser usado não apenas para aplicações web, mas também para mobile (React Native), desktop (Electron) e até aplicações VR (React 360).
\n

React é adequado para projetos de qualquer escala: desde simples aplicações de página única (SPA) até sistemas corporativos complexos e redes sociais.

Instalação do React (npm)

Para trabalhar com React, você precisará do Node.js (versão 14 ou superior) e de um gerenciador de pacotes npm (ou yarn). A maneira mais simples de iniciar um novo projeto é usar a ferramenta oficial Create React App.

# Instalação global do Create React App (opcional)\nnpm install -g create-react-app\n\n# Criação de um novo projeto com o nome my-app\nnpx create-react-app my-app\n\n# Navegar para o diretório do projeto\ncd my-app\n\n# Iniciar o servidor de desenvolvimento\nnpm start

Após executar esses comandos, seu navegador abrirá automaticamente no endereço http://localhost:3000 com a aplicação React em execução.

Importante: npx é uma ferramenta que executa pacotes sem instalá-los globalmente. Se você tiver uma versão antiga do npm (< 5.2), use npm install -g create-react-app e depois create-react-app my-app.

Método alternativo (instalação manual):

# Crie uma pasta para o projeto e inicialize o npm\nmkdir my-react-app && cd my-react-app\nnpm init -y\n\n# Instale React e ReactDOM\nnpm install react react-dom\n\n# Instale Babel para transpilação de JSX e Webpack para empacotamento (será necessário configurar)\nnpm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli html-webpack-plugin

No entanto, para iniciantes, é altamente recomendado usar o Create React App, pois ele cuida de toda a configuração complexa do empacotador (Webpack, Babel).

Início rápido com exemplo de código

Após criar o projeto com o Create React App, abra o arquivo src/App.js. Este é o componente principal da sua aplicação. Vamos criar uma aplicação simples "Olá, Mundo!" com um botão que altera o título.

// src/App.js\nimport React, { useState } from 'react';\nimport './App.css';\n\nfunction App() {