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 aplicativo completa, o React é focado apenas na criação de exibições de aplicativos por meio de unidades encapsuladas chamadas componentes que mantêm o estado e geram elementos da interface do usuário. 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 render método, que retorna o JSX que representa a interface do usuário 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 equipe do React anunciou que o Create React App (CRA) foi preterido para novos aplicativos. 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 oferece suporte a dois ambientes diferentes para o desenvolvimento de aplicativos React:

O que pode fazer com o React?

O Windows oferece suporte a uma ampla variedade de cenários para desenvolvedores React, incluindo:

  • Aplicativos Web básicos: Se você é novo no React e está interessado principalmente em aprender sobre como criar um aplicativo Web básico com o React, recomendamos que você crie um aplicativo React usando as ferramentas de frontend vite no Windows. Se estiveres a planear criar uma aplicação web que será implantada para produção, convém considerar criar uma aplicação React usando as ferramentas de front-end Vite no Windows Subsystem for Linux (WSL), para melhorar o desempenho, a compatibilidade com chamadas de sistema e o alinhamento entre o teu ambiente de desenvolvimento local e o ambiente de implantação (que é frequentemente um servidor Linux).

  • Single-Page Apps (SPAs): São sites que interagem com o usuário reescrevendo dinamicamente a página da Web atual com novos dados de um servidor, em vez do padrão do navegador de carregar páginas novas inteiras. Se você quiser criar um site SPA estático orientado a conteúdo, recomendamos instalar o Gatsby no WSL. Se você quiser criar um site SPA renderizado por servidor com um back-end Node.js, recomendamos instalar Next.js no WSL. (Embora o Next.js agora também ofereça serviço de arquivos estáticos).

  • aplicativos de desktop nativos: React Native for Desktop + macOS permite criar aplicativos de desktop nativos com JavaScript que são executados em vários tipos de desktops, laptops, tablets, Xbox e dispositivos de realidade mista. Ele suporta o Windows SDK e macOS SDK.

  • Native mobile apps: React Native é uma maneira multiplataforma de criar aplicativos Android e iOS com JavaScript que renderizam para código de interface do usuário da plataforma nativa. Há duas maneiras principais de instalar o React Native -- a CLI da Expo e a CLI do React Native. Há uma boa comparação dos 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 obter instruções sobre como desenvolver um aplicativo Android usando o Windows, o React Native e a CLI da Expo, consulte React Native para desenvolvimento Android no 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 um compilador que suporta JSX.
  • Bundling - Como o desempenho é fundamental para aplicativos Web modernos, é importante que o JavaScript de um aplicativo inclua apenas o código necessário para o aplicativo e seja combinado no menor número possível de arquivos. Um empacotador, como webpack executa essa tarefa para você.
  • Gestão de pacotes - Os gerenciadores de pacotes facilitam a inclusão de funcionalidades de pacotes de terceiros na sua aplicação, incluindo a atualização e o gerenciamento de dependências. Os gerenciadores de pacotes comumente 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 com a cadeia de ferramentas para React é 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 de destino.

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:

  • Gerenciador de pacotes: Dois gerenciadores de pacotes populares para o 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: uma coleção de componentes de navegação que podem ajudá-lo com coisas como URLs marcáveis para seu aplicativo Web ou uma maneira composable 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 contêiner 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 conhecidos 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 kit de ferramentas JavaScript de analisador, minificador, compressor e embelezador.
  • Babel: Um compilador JavaScript usado principalmente para converter o código ECMAScript 2015+ em uma versão compatível com versões anteriores do JavaScript em navegadores ou ambientes atuais e antigos. Também pode ser útil usar babel-preset-env para que você não precise microgerenciar transformações de sintaxe ou polipreenchimentos do navegador e possa definir quais navegadores de internet suportar.
  • ESLint: Uma ferramenta para identificar e relatar padrões encontrados em seu código JavaScript que ajuda você a tornar seu código mais consistente e evitar bugs.
  • Enzyme: Um utilitário de teste JavaScript para o React que facilita o teste da saída dos componentes do React.
  • Jest: Uma estrutura de teste que trabalha em conjunto com a Babel para ajudar a escrever testes JavaScript idiomáticos em aplicativos React.
  • Mocha: Uma estrutura de teste que é executada no Node.js e no navegador para ajudar com testes assíncronos, relatórios e mapeamento de exceções não detetadas 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