Quer tornar seu site do React o mais rápido e acessível possível? Você veio ao 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. Os outros guias desta seção abordarão 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 rápidos e confiáveis do React. Esses 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 deste programa de aprendizado não se concentram em:
- Como usar o React
- Como o React funciona em segundo plano
Esses dois conceitos serão abordados quando necessário, mas todos os guias e codelabs nesta seção se concentrarão em como criar sites do React rápidos e acessíveis. Por isso, é necessário ter um conhecimento básico do React.
Criar app React
Criar um app React (CRA, na sigla em inglês) é 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 build que contém um bundler de módulo (webpack) e um transcompilador (Babel).
Em um shell de linha de comando, basta 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 de CRA recém-inicializado.
Há vários arquivos de configuração e scripts de build que o CRA usa para configurar um webpack e um processo de build do Babel que incluem uma configuração básica do Jest para testes. Para simplificar as coisas para o usuário, esses arquivos ficam ocultos e não podem ser acessados até que você ejete 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ê precisaria realmente modificar para trabalhar no seu aplicativo. A documentação do CRA explica isso em detalhes.
Qual é a próxima etapa?
Agora que você sabe como começar a criar um app React, confira como melhorar o desempenho e a acessibilidade do seu app com todos os guias deste programa de aprendizado:
- Divisão de código com React.Lazy e Suspense
- Virtualize listas grandes com a janela de reação
- Pré-armazenamento em cache no app Create React com Workbox
- Pré-renderizar rotas com React-Snap
- Adicionar um manifesto de app da Web com o recurso Criar app React
- Auditoria de acessibilidade com React-axe e eslint-plugin-jsx-a11y (em inglês)