Como começar: otimizar seu app React

Quer deixar seu site React o mais rápido e acessível possível? Você está no lugar certo.

A React é uma biblioteca de código aberto que facilita a criação de interfaces. Este programa de aprendizado abordará diferentes APIs e ferramentas do ecossistema que você precisa 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 vão abordar temas 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 rápidos e confiáveis do React. Esses guias abordam tudo isso pela perspectiva de um app React, em que apenas bibliotecas, APIs e recursos específicos do ecossistema React são mencionados.

O que você aprenderá?

Os tutoriais deste Programa de treinamento não se concentram em:

  • Como usar o React
  • Como o React funciona internamente

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

Create React App

O Create React App (CRA) é a maneira mais fácil de começar a criar aplicativos React. Ele fornece uma configuração padrão com vários recursos principais integrados, incluindo um sistema de build que contém um bundler de módulos (webpack) e um transpiler (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, você poderá navegar até o aplicativo e executá-lo com os seguintes comandos:

cd new-app
npm start

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

Há vários arquivos de configuração e scripts de build que o CRA usa para configurar um processo de build do webpack e do Babel que inclui uma configuração de Jest básica para testes. Para simplificar as coisas para o usuário, esses arquivos ficam ocultos e não podem ser acessados até que você saia do CRA. É melhor evitar a ejeção sempre que possível, já que isso significa aceitar 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 de CRA contém apenas os arquivos que você precisa modificar para trabalhar no aplicativo. A documentação do CRA explica isso em detalhes.

A seguir

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