Como começar: otimizar seu app React

Quer deixar seu site do React o mais rápido e acessível possível? Você veio ao lugar certo!

Houssein Djirdeh

O React é uma biblioteca de código aberto que facilita a criação de IUs. Este programa de aprendizado abrangerá diferentes APIs e ferramentas do ecossistema que você deve considerar para melhorar o desempenho e a usabilidade do seu aplicativo.

Este guia mostra como começar a usar um aplicativo React. Todos os outros guias desta seção abordam tópicos para otimizar a velocidade ou a acessibilidade de um app React.

Por que isso é útil?

Há muito conteúdo que explica como criar aplicativos rápidos e confiáveis, mas não muitos que mostram como criar aplicativos React rápidos e confiáveis. Estes guias abordam tudo isso da perspectiva de um app React, em que apenas bibliotecas, APIs e recursos específicos do ecossistema do React são mencionados.

O que você aprenderá?

Os tutoriais neste programa de aprendizado não se concentram em:

  • Como usar o React
  • Como o React funciona em segundo plano

Embora esses dois conceitos sejam abordados quando necessário, todos os guias e codelabs desta seção se concentrarão em como criar sites React rápidos e acessíveis. Por esse motivo, é necessário ter um conhecimento básico do React.

Criar o app React

Criar um aplicativo React (CRA) é a maneira mais fácil de começar a criar aplicativos React. Ele oferece uma configuração padrão com vários recursos principais integrados, incluindo um sistema de compilação contendo um bundler de módulos (webpack) e um transpilador (Babel).

Em um shell de linha de comando, você só precisa executar o seguinte para criar um novo aplicativo:

npx create-react-app app-name

Quando a execução do comando terminar, navegue até o aplicativo e execute-o com os seguintes comandos:

cd new-app
npm start

A incorporação a seguir mostra a estrutura de diretórios e a página da Web real de um aplicativo CRA recém-inicializado.

Existem vários arquivos de configuração e scripts de compilação que o CRA usa para configurar um webpack e um processo de compilação do Babel que inclui uma configuração básica do Jest para testes. Para simplificar, esses arquivos ficam ocultos e não podem ser acessados até que você os ejete do CRA. É sempre melhor evitar a expulsão sempre que possível, porque isso significa usar todos esses arquivos de configuração como seu próprio código-fonte, o que pode se tornar difícil de gerenciar.

A estrutura de diretórios de um novo aplicativo CRA contém apenas os arquivos que você precisaria modificar para trabalhar no seu aplicativo. A documentação da CRA explica isso em detalhes.

A seguir

Agora que você sabe como começar a criar um app Create React, aprenda a melhorar o desempenho e a acessibilidade do seu app com todos os guias deste programa de aprendizado: