Partilhar via

Visão geral do React

O que é o React JS?

O React é uma biblioteca JavaScript de código aberto para a construção de interfaces de usuário front-end. Ao contrário de outras bibliotecas JavaScript que fornecem uma estrutura de aplicação completa, o React foca-se exclusivamente na criação de vistas de aplicação através de unidades encapsuladas chamadas componentes que mantêm o estado e geram elementos de interface. Você pode colocar um componente individual em uma página da Web ou aninhar hierarquias de componentes para criar uma interface do usuário complexa.

Os componentes React são normalmente escritos em JavaScript e JSX (JavaScript XML), que é uma extensão JavaScript que se parece muito com HTML, mas tem alguns recursos de sintaxe que facilitam tarefas comuns, como registrar manipuladores de eventos para elementos da interface do usuário. Um componente React implementa o método de renderização , que devolve o JSX que representa a interface do componente. Em um aplicativo Web, o código JSX retornado pelo componente é convertido em HTML compatível com o navegador renderizado no navegador.

Importante

Em fevereiro de 2025, a equipa React anunciou que Create React App (CRA) foi descontinuada para novas aplicações. A equipe recomenda que os aplicativos existentes migrem para uma estrutura como Next.js ou React Router ou migrem para uma ferramenta de compilação como Vite, Parcel ou RSBuild.

O React funciona no Windows?

Sim. O Windows suporta dois ambientes diferentes para desenvolver aplicações React:

O que pode fazer com o React?

O Windows suporta uma vasta gama de cenários para programadores de React, incluindo:

  • Basic web apps: Se é novo no React e está principalmente interessado em aprender a construir uma aplicação web básica com React, recomendamos que crie uma aplicação React usando as ferramentas frontend Vite no Windows. Se planeia criar uma aplicação web que será implementada para produção, pode querer considerar criar uma aplicação React usando as ferramentas frontend vite no Windows Subsystem for Linux (WSL), para melhor velocidade de desempenho, compatibilidade com chamadas de sistema e alinhamento entre o seu ambiente local de desenvolvimento e o ambiente de implementação (que é frequentemente um servidor Linux).

  • Single-Page Apps (SPAs): São sites que interagem com o utilizador reescrevendo dinamicamente a página web atual com novos dados de um servidor, em vez do padrão do navegador de carregar páginas inteiras novas. Se quiser construir um site SPA estático orientado para conteúdos, recomendamos instalar o Gatsby em WSL. Se quiser construir um site SPA renderizado por servidor com um backend Node.js, recomendamos instalar Next.js em WSL. (Embora Next.js agora também ofereça serviço estático de ficheiros).

  • Aplicações nativas de ambiente de trabalho: React Native for Desktop + macOS permite construir aplicações nativas de ambiente de trabalho com JavaScript que funcionam em vários tipos de computadores de secretária, portáteis, tablets, Xbox e dispositivos de Realidade Mista. Suporta tanto o SDK Windows como o SDK macOS.

  • Aplicações móveis nativas: O React Native é uma forma multiplataforma de criar aplicações Android e iOS com JavaScript que renderizam para código nativo de interface de plataforma. Há duas maneiras principais de instalar o React Native -- a CLI da Expo e a CLI do React Native. Há uma boa comparação entre os dois no StackOverflow. A Expo tem uma aplicação cliente para dispositivos móveis iOS e Android para executar e testar as suas aplicações. Para instruções sobre como desenvolver uma aplicação Android usando Windows, React Native e a CLI Expo, veja React Native para desenvolvimento Android em Windows.

Opções de instalação

Há várias maneiras diferentes de instalar o React, juntamente com uma cadeia de ferramentas integrada que melhor funciona para o seu cenário de caso de uso. Aqui estão alguns dos mais populares.

Ferramentas React

Embora escrever um componente React simples em um editor de texto simples seja uma boa introdução ao React, o código gerado dessa forma é volumoso, difícil de manter e implantar e lento. Há algumas tarefas comuns que os aplicativos de produção precisarão executar. Essas tarefas são manipuladas por outras estruturas JavaScript que são tomadas pelo aplicativo como uma dependência. Estas tarefas incluem:

  • Compilação - JSX é a linguagem comumente usada para aplicações React, mas os navegadores não conseguem processar esta sintaxe diretamente. Em vez disso, o código precisa ser compilado em sintaxe JavaScript padrão e personalizado para diferentes navegadores. Babel é um exemplo de compilador que suporta JSX.
  • Agrupamento - Como o desempenho é fundamental para aplicações web modernas, é importante que o JavaScript de uma aplicação inclua apenas o código necessário para a aplicação e combinado no menor número possível de ficheiros. Um bundler, como o webpack , realiza esta tarefa por si.
  • Gestão de pacotes - Os gestores de pacotes facilitam a inclusão da funcionalidade dos pacotes de terceiros na sua aplicação, incluindo a sua atualização e a gestão de dependências. Os gestores de pacotes mais usados incluem Yarn e npm.

Juntos, o conjunto de estruturas que ajudam você a criar, criar e implantar seu aplicativo é chamado de cadeia de ferramentas. Um ambiente de desenvolvimento fácil de configurar para o React que utiliza esta cadeia de ferramentas é o Vite , que gera uma aplicação simples de uma página para si. A única configuração necessária para usar o Vite é Node.js.

Diretório de componentes React Native

Os componentes que podem ser usados em um aplicativo React Native incluem o seguinte:

  • Componentes principais - Componentes que são desenvolvidos e suportados como parte da estrutura React Native.
  • Componentes comunitários - Componentes que são desenvolvidos e mantidos pela comunidade.
  • Componentes nativos - Componentes que você mesmo cria, usando código nativo da plataforma, e registra para serem acessíveis a partir do React Native.

O React Native Directory fornece uma lista de bibliotecas de componentes que podem ser filtradas por plataforma-alvo.

Opções da cadeia de ferramentas Fullstack React

O React é uma biblioteca, não uma estrutura, portanto, pode exigir ferramentas adicionais para criar um aplicativo mais complexo. Além de usar o React, convém considerar o uso:

  • Gestor de pacotes: Dois gestores de pacotes populares para React são npm (que está incluído no NodeJS) e yarn. Ambos suportam uma ampla biblioteca de pacotes bem mantidos que podem ser instalados.
  • React Router: um conjunto de componentes de navegação que pode ajudar com coisas como URLs com favoritos para a sua aplicação web ou uma forma componível de navegar no React Native. O React está realmente preocupado apenas com o gerenciamento de estado e a renderização desse estado para o DOM, portanto, a criação de aplicativos React geralmente requer o uso de uma biblioteca de roteamento como o React Router.
  • Redux: Um contentor de estado previsível que ajuda na arquitetura de fluxo de dados. É provável que não seja algo que você precisa até entrar no desenvolvimento mais avançado do React. Para citar Dan Abramov, um dos criadores do Redux: "Não use Redux até ter problemas com o Vanilla React."
  • Webpack: Uma ferramenta de compilação que permite compilar módulos JavaScript, também conhecida como module bundler. Quando o webpack processa seu aplicativo, ele cria internamente um gráfico de dependência que mapeia cada módulo que seu projeto precisa e gera um ou mais pacotes.
  • Uglify: Um parser JavaScript, minifier, compressor e kit de ferramentas para embelezamentos.
  • Babel: Um compilador de JavaScript usado principalmente para converter código ECMAScript 2015+ numa versão retrocompatível de JavaScript em navegadores ou ambientes atuais e antigos. Também pode ser útil usar babel-preset-env para não precisar de microgerir transformações de sintaxe ou polifills do navegador e para definir que navegadores de internet suportar.
  • ESLint: Uma ferramenta para identificar e reportar padrões encontrados no seu código JavaScript que o ajuda a tornar o seu código mais consistente e evitar bugs.
  • Enzyme: Uma utilidade de teste JavaScript para o React que facilita testar a saída dos seus Componentes React.
  • Jest: Um framework de testes que trabalha em conjunto com o Babel para ajudar a escrever testes JavaScript idiomáticos em aplicações React.
  • Mocha: Um framework de testes que corre em Node.js e no navegador para ajudar em testes assíncronos, reporte e mapeamento de exceções não apanhadas para os casos de teste corretos.

Cursos e tutoriais do React

Aqui estão alguns lugares recomendados para aprender o React e criar aplicativos de exemplo:

Recursos adicionais

  • Last updated on