Visão geral do React

  • Artigo

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 é voltado exclusivamente para a criação de exibições de aplicativo por meio de unidades encapsuladas chamadas de 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 do 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 em conformidade com o navegador no navegador.

O React funciona no Windows?

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

O que você pode fazer com o React?

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

  • Aplicativos Web básicos: se você é iniciante no React e tem interesse principalmente em aprender a criar um aplicativo Web básico com ele, recomendamos que você instale o create-react-app diretamente no Windows. Se você pretende criar um aplicativo Web que será implantado em produção, o ideal é considerar a instalação do create-react-app no WSL (Subsistema do Windows para Linux), para aprimorar 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 costuma ser um servidor Linux).

  • SPAs (aplicativos de página única) : são sites que interagem com o usuário pela reescrita dinâmica da página da Web atual com novos dados de um servidor, em vez do padrão do navegador de carregar páginas novas inteiras. Caso você deseje criar um site de SPA orientado ao conteúdo estático, recomendamos instalar o Gatsby no WSL. Caso você deseje criar um site de SPA renderizado pelo servidor com um back-end do Node.js, recomendamos instalar o Next.js no WSL. (Embora o Next.js agora também ofereça serviços de arquivos estáticos).

  • Aplicativos da área de trabalho nativos: o React Native para Windows e macOS permite que você crie aplicativos da área de trabalho nativos com JavaScript que são executados em vários tipos de computadores desktop, laptops, tablets, Xbox e dispositivos de realidade misturada. Ele dá suporte ao SDK do Windows e ao SDK do macOS.

  • Aplicativos móveis nativos: o React Native é uma forma 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 o Windows, o React Native e a CLI do Expo, confira React Native para desenvolvimento do Android no 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: o JSX é a linguagem que costuma ser usada para os 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. O Babel é um exemplo de compilador que dá suporte ao JSX.
  • Agrupamento: como o desempenho é fundamental para os aplicativos Web modernos, é importante que o JavaScript de um aplicativo inclua apenas o código necessário para o aplicativo e seja combinado no mínimo de arquivos possível. 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 no seu aplicativo, incluindo a atualização deles e o gerenciamento de dependências. Os gerenciadores de pacotes normalmente usados incluem o Yarn e o 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 o React que usa esta cadeia de ferramentas é o Vite, que gera um aplicativo simples de uma página para você. A única configuração necessária para usar 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 diretório do React Native fornece uma lista de bibliotecas de componentes que podem ser filtradas pela plataforma de destino.

Opções da cadeia de ferramentas de pilha completa do React

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 o React são o npm (que está incluído no NodeJS) e o 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 ajudar você com itens como URLs que podem ser adicionadas a Favoritos para seu aplicativo Web ou uma forma combiná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 com a 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 conhecida como empacotador de módulo. 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 kit de ferramentas de análise, minificação, compressão e embelezamento de JavaScript.
  • Babel: um compilador de JavaScript usado principalmente para converter o código ECMAScript 2015 e posterior em uma versão compatível com versões anteriores de JavaScript em navegadores ou ambientes atuais e antigos. Também pode ser útil usar o babel-preset-env para que você não precise microgerenciar transformações de sintaxe ou polyfills de navegador e possa definir quais navegadores da Internet terão suporte.
  • ESLint: uma ferramenta usada para identificar e relatar os padrões encontrados no código JavaScript que ajuda você a tornar seu código mais consistente e evitar bugs.
  • Enzyme: um utilitário de teste de JavaScript para o React que facilita o teste da saída dos componentes do React.
  • Jest: uma estrutura de teste incorporada ao pacote create-react-app para ajudar na escrita de testes de JavaScript idiomáticos.
  • Mocha: uma estrutura de teste executada em Node.js e no navegador para ajudar no teste assíncrono, no relatório e no mapeamento de exceções não capturadas dos 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