Compartilhar via

Visão geral do React

O que é o React JS?

O React é uma biblioteca JavaScript de software livre usada para criar interfaces do usuário de front-end. Ao contrário de outras bibliotecas JavaScript que fornecem uma estrutura de aplicativo completa, o React se concentra apenas na criação de exibições de aplicativos por meio de unidades encapsuladas chamadas componentes que mantêm o estado e geram elementos de 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 normalmente são escritos em JavaScript e JSX (JavaScript XML), que é uma extensão do JavaScript que se parece muito com HTML, mas tem alguns recursos de sintaxe que facilitam a execução de tarefas comuns, como o registro de manipuladores de eventos para elementos da interface do usuário. Um componente React implementa o método render, que retorna o JSX representando 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 e renderizado no navegador.

Importante

Em fevereiro de 2025, a equipe do React anunciou que o CRA (Create React App) 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 build como Vite, Parcel ou RSBuild.

O React funciona no Windows?

Sim. Windows dá suporte a dois ambientes diferentes para o desenvolvimento de aplicativos React:

O que você pode fazer com o React?

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

  • Aplicativos Web: se você é novo no React e está interessado principalmente em aprender a criar um aplicativo Web básico com o React, recomendamos que você criar um aplicativo React usando as ferramentas de front-end de vite no Windows. Se você estiver planejando criar um aplicativo Web que será implantado para produção, convém considerar criar um aplicativo React usando as ferramentas de front-end de vite no Windows Subsystem for Linux (WSL), para melhorar a velocidade de desempenho, a compatibilidade de chamadas do sistema e o alinhamento entre o ambiente de desenvolvimento local e o ambiente de implantação (que geralmente é um servidor Linux).

  • Aplicações de Página Única (SPAs): são sites que interagem com o usuário ao reescrever dinamicamente a página da web atual com novos dados de um servidor, em vez do padrão do navegador de carregar novas páginas inteiras. Se você quiser criar um site SPA orientado a conteúdo estático, recomendamos instalar o Gatsby no WSL. Se você quiser criar um site spa renderizado pelo servidor com um back-end Node.js, recomendamos instalar Next.js no WSL. (Embora Next.js agora também ofereça serviço de arquivo estático).

  • Native desktop apps: React Native for Desktop + macOS permite criar aplicativos de área de trabalho nativos com JavaScript que são executados em vários tipos de computadores desktop, laptops, tablets, Xbox e dispositivos Mixed Reality. Ele dá suporte ao SDK Windows e macOS SDK.

  • Aplicativos móveis nativos: o React Native é uma maneira multiplataforma de criar aplicativos Android e iOS com JavaScript que são renderizados para o código da interface do usuário da plataforma nativa. Há duas maneiras principais de instalar o React Native: a CLI do Expo e a CLI do React Native. Há uma boa comparação dos dois no StackOverflow. O Expo tem um aplicativo cliente para dispositivos móveis iOS e Android para executar e testar seus aplicativos. Para obter instruções sobre como desenvolver um aplicativo Android usando Windows, React Native e a CLI da Expo, consulte React Native for Android development on Windows.

Opções de instalação

Há várias maneiras diferentes de instalar o React junto com uma cadeia de ferramentas integrada que funcione melhor para seu cenário de caso de uso. Veja algumas das mais populares.

Ferramentas do React

Embora a escrita de um componente simples do React em um editor de texto sem formatação seja uma boa introdução ao React, o código gerado dessa maneira é volumoso e lento, além de ser difícil de ser mantido e implantado. Há algumas tarefas comuns que os aplicativos de produção precisarão executar. Essas tarefas são processadas por outras estruturas JavaScript que são consideradas pelo aplicativo como uma dependência. Essas tarefas incluem:

  • Compilação – JSX é o idioma comumente usado para aplicativos React, mas os navegadores não podem processar essa sintaxe diretamente. Em vez disso, o código precisa ser compilado na sintaxe JavaScript padrão e personalizado para diferentes navegadores. Babel é um exemplo de um compilador que dá suporte ao JSX.
  • Empacotamento – como o desempenho é fundamental para aplicativos para web modernos, é importante que o JavaScript de um aplicativo inclua apenas o código necessário e seja combinado no menor número possível de arquivos. Um empacotador, como o webpack , executa essa tarefa para você.
  • Gerenciamento de pacotes – os gerenciadores de pacotes facilitam a inclusão da funcionalidade de pacotes de terceiros em seu aplicativo, incluindo a atualização deles e o gerenciamento de dependências. Os gerenciadores de pacotes comumente usados incluem Yarn e npm.

Em conjunto, o pacote de estruturas que ajuda você a criar, compilar e implantar seu aplicativo é chamado de cadeia de ferramentas. Um ambiente de desenvolvimento fácil de configurar para react que usa essa cadeia de ferramentas é o Vite , que gera um aplicativo simples de uma página para você. A única configuração necessária para usar o Vite é Node.js.

Diretório de componentes do React Native

Os componentes que podem ser usados em um aplicativo React Native incluem os seguintes:

  • Componentes principais: componentes cujo desenvolvimento e suporte fazem parte da estrutura React Native.
  • Componentes da comunidade: componentes desenvolvidos e mantidos pela comunidade.
  • Componentes nativos: componentes que você pode criar por conta própria, usando o código nativo da plataforma e registrá-los para serem acessíveis no React Native.

O React Native Directory fornece uma lista de bibliotecas de componentes que podem ser filtradas pela plataforma de destino.

Opções de ferramentas de desenvolvimento para React Fullstack

O React é uma biblioteca, não uma estrutura. Portanto, pode exigir ferramentas adicionais para a criação de um aplicativo mais complexo. Além de usar o React, o ideal é considerar o uso dos seguintes:

  • Gerenciador de pacotes: dois gerenciadores de pacotes populares para React são npm (que está incluído no NodeJS) e yarn. Os dois dão suporte a uma ampla biblioteca de pacotes bem mantidos que podem ser instalados.
  • React Router: uma coleção de componentes de navegação que pode ajudá-lo com itens como URLs que podem ser adicionadas aos favoritos para seu aplicativo Web ou uma maneira componível de navegar no React Native. O React está realmente voltado apenas ao gerenciamento de estado e em renderizar esse estado para o DOM, de modo que a criação de aplicativos React geralmente exige 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. Provavelmente, ele não é algo de que você precise até chegar a um desenvolvimento mais avançado do React. Citando Dan Abramov, um dos criadores do Redux: "Não use o Redux até ter problemas com o React básico".
  • Webpack: uma ferramenta de build que permite compilar módulos JavaScript, também conhecidos como empacotador de módulos. Quando o webpack processa seu aplicativo, ele cria internamente um grafo de dependência que mapeia cada módulo de que o seu projeto precisa e gera um ou mais pacotes.
  • Uglify: Um analisador JavaScript, minifier, compressor e kit de ferramentas beautifier.
  • Babel: um compilador JavaScript usado principalmente para converter código ECMAScript 2015+ em uma versão compatível com versões anteriores do JavaScript em navegadores ou ambientes atuais e mais antigos. Também pode ser útil usar babel-preset-env para que você não precise microgerenciar transformações de sintaxe ou polyfills do navegador e pode definir quais navegadores da Internet dar suporte.
  • 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.
  • Enzima: um utilitário de teste JavaScript para React que facilita o teste dos componentes React.
  • Jest: uma estrutura de teste que funciona em conjunto com o 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 capturadas para os casos de teste corretos.

Cursos e tutoriais do React

Estes são alguns lugares recomendados para aprender a usar o React e criar aplicativos de exemplo:

Recursos adicionais

  • Last updated on