Quer tornar seu site React o mais rápido e acessível possível? Este é o lugar certo!
O React é uma biblioteca de código aberto que facilita a criação de IUs. Este programa de aprendizado aborda diferentes APIs e ferramentas do ecossistema que você pode usar para melhorar o desempenho e a usabilidade do seu aplicativo.
Neste guia, mostramos 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. Esses guias abordam tudo isso da 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 aprendizado não se concentram em:
- Como usar o React
- Como o React funciona por trás dos panos
Embora esses dois conceitos sejam abordados quando necessário, todos os guias e codelabs desta seção se concentram em como criar sites React rápidos e acessíveis. Por isso, é necessário ter um conhecimento básico de React.
Criar app React
O Create React App (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 build com um empacotador de módulos (webpack) e um transpilador (Babel).
Em um shell de linha de comando, basta executar o seguinte para criar um novo aplicativo:
npx create-react-app app-name
Depois que o comando terminar de ser executado, 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.
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 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ê saia do CRA. É sempre melhor evitar a ejeção sempre que possível, já que isso significa assumir todos esses arquivos de configuração como seu próprio código-fonte, o que pode ser difícil de gerenciar.
A estrutura de diretórios de um novo aplicativo CRA contém apenas os arquivos que você realmente precisa modificar para trabalhar no aplicativo. A documentação do CRA explica isso em detalhes.
A seguir
Agora que você sabe como começar a criar um app React, aprenda a melhorar a performance e a acessibilidade do seu app com todos os guias deste programa de aprendizado: