Configurando um Projeto React com Create React App

React é uma das bibliotecas JavaScript mais populares para o desenvolvimento de aplicações front-end. É uma biblioteca de código aberto que foi originalmente desenvolvida pelo Facebook. O React rapidamente se tornou popular para criar aplicações rápidas com JSX – um paradigma de programação que combina JavaScript com uma sintaxe semelhante ao HTML.

Anteriormente, configurar um projeto React teria sido um processo complexo. Exigia a configuração manual dos seguintes componentes:

• Um sistema de build
• Transpilador de código (converte sintaxes modernas em códigos legíveis pelo navegador)
• A estrutura de diretórios base para o projeto

Felizmente, esses dias já vão longe, graças ao Create React App. É uma ferramenta maravilhosa que automatiza todas essas etapas. O Create React App cuida da transpilação de código, linting, testes e sistemas de build. Além disso, ele vem com um servidor que suporta hot reloading, o que significa atualizar as páginas da web à medida que as alterações são feitas. Claro, tudo isso é feito dentro de uma estrutura de diretórios organizada.

Em suma, não há necessidade de passar pelo trabalho manual de configurar sistemas de build como Webpack, ou transpilador como Babel. Com menos coisas com que se preocupar, você está livre para se concentrar totalmente no desenvolvimento front-end. O Create React App permite que você comece a usar o React com o mínimo de preparação.

Neste guia, mostraremos como usar o Create React App e colocar uma aplicação React básica em funcionamento. Ela pode servir como base para qualquer projeto de aplicação futuro.

Pré-requisitos

Para realizar as etapas demonstradas neste tutorial, você precisará do seguinte software configurado previamente.

• • Um servidor Ubuntu configurado corretamente. Você pode seguir as etapas de configuração de um servidor Ubuntu na CloudSigma.
  • A versão mais recente do Node.js instalada. Aqui está um guia passo a passo sobre como instalar o Node.js no Ubuntu.

Passo 1: Criar um Diretório de Projeto npm Dedicado

Para pacotes Node.js, o npm é o gerenciador de pacotes padrão. Usaremos npm para criar um diretório de projeto dedicado. Ele hospedará arquivos importantes como package.json que armazenam todos os metadados sobre o projeto e módulos de dependência adicionais do Node.js. O JSON é um formato padrão de compartilhamento de dados baseado em objetos JavaScript. Consulte este guia se quiser saber mais sobre o JSON.

Primeiro, crie um diretório dedicado:

Em seguida, diremos ao npm para iniciar um ambiente de desenvolvimento dentro do arquivo. Ele criará o arquivo package.json necessário para o projeto. Altere o diretório atual:

Execute o comando npm init:

Observe que, se você quiser que este diretório faça parte de um repositório git, é recomendável configurá-lo primeiro. O script de inicialização irá detectá-lo automaticamente e configurar tudo de acordo. Uma vez concluído, deve haver um arquivo package.json no diretório. Verifique-o com um editor de texto:

Passo 2: Criar um Projeto React com o Create React App

Nesta etapa, invocaremos o Create React App para estabelecer nosso projeto React de exemplo. Este script copiará tudo o que é necessário para um novo diretório, juntamente com todas as dependências. O gerenciador de pacotes npm também vem com a ferramenta npx. Ela é usada para executar pacotes executáveis. Nós a usaremos para executar o script do Create React App sem realmente baixar o projeto.

A execução rodará create-react-app no diretório especificado. Também executará comandos npm install para instalar as dependências. Para facilitar o uso, usaremos o nome cloudsigma-react-react-tutorial. Execute o seguinte comando:

No final do processo, você verá o seguinte aviso. É a mensagem de sucesso se a instalação tiver sido bem-sucedida. Ela também informa o local onde o projeto foi criado.

Passo 3: Aplicar React-Scripts

Agora, teremos uma breve visão geral dos vários react-scripts que foram instalados durante a instalação.

• • Executaremos o test para executar o código de teste.
  • O build criará uma versão minificada do nosso projeto (para o ambiente de produção).
  • Finalmente, o eject oferece controle total sobre a personalização.

Primeiro, verifique o conteúdo do diretório do projeto React:

Aqui está uma descrição de cada arquivo:

• • node_modules/: Este diretório contém todas as bibliotecas JavaScript externas a serem usadas pelo aplicativo. Raramente é necessário mexer aqui.
  • public/: Ele hospeda alguns arquivos HTML, JSON e de imagem básicos. Ele serve como a raiz do projeto.
  • src/: Este diretório contém os códigos JavaScript do React para o nosso projeto. É aqui que passaremos a maior parte do nosso tempo. Exploraremos este diretório mais detalhadamente na próxima parte do guia.
  • .gitignore: É um arquivo que descreve quais diretórios o git irá ignorar, por exemplo, o diretório node_modules. Geralmente, é melhor excluir diretórios que contêm arquivos grandes ou hospedam arquivos de log que não são necessários para serem incluídos no controle de versão. Neste caso, ele também incluirá alguns diretórios específicos do React.
  • README.md: É um arquivo markdown contendo muitas informações úteis sobre o Create React App. Por exemplo, ele inclui um resumo de links de comandos para configuração avançada. Por enquanto, não temos o que fazer com ele. No entanto, à medida que o projeto avança, você adicionará mais documentação sobre o projeto.

Os arquivos package.json e package-lock.json são usados pelo npm. Ao executar o comando npx inicial, ele criou o projeto base. Quando as dependências adicionais foram instaladas, ele criou o package-lock.json. npm usa o package-lock.json para garantir que os pacotes correspondam às versões exatas. Dessa forma, se outra pessoa instalar seu projeto, ela também obterá dependências idênticas. Como ele é criado e gerenciado automaticamente, você raramente precisa tocá-lo.

O último arquivo sobre o qual precisamos falar é o package.json. Ele contém metadados sobre o projeto. Por exemplo, os metadados podem incluir um título do projeto, número de versão e dependências. Ele também inclui os scripts que você pode usar para executar o projeto. Confira o conteúdo do arquivo package.json:

É um arquivo JSON com vários objetos. Dê uma olhada no objeto scripts. Ele contém quatro scripts diferentes:

• • start
  • build
  • test
  • eject

Esses scripts estão listados de acordo com a sua importância. O script start inicia o servidor de desenvolvimento local. A seguir, detalharemos como você pode usar o restante dos scripts.

• • O Script de Build

Para executar um script npm, a estrutura do comando é a seguinte:

Para executar o script build , use o seguinte comando:

Ele iniciará o processo de compilação dos códigos em um pacote utilizável. Assim que terminar, verifique o diretório de saída:

Observe que há um novo diretório build/ disponível. Ele contém uma versão minificada e otimizada dos outros arquivos. É recomendável colocá-lo no arquivo .gitignore, pois sempre podemos gerá-lo usando o script build.

• • O Script de Teste

O script test é um daqueles scripts que não requerem o parâmetro run para o npm executá-lo. No entanto, ele ainda funcionará perfeitamente com ele. Quando executado, este script iniciará um executor de testes chamado Jest. O testador procura por qualquer arquivo de projeto com as extensões de arquivo .spec.js ou test.js e executa esses arquivos.

O seguinte comando npm executará o script test:

Há algumas coisas a serem observadas na saída. Lembra que o executor de testes só procura por arquivos com extensões específicas? Neste caso, há apenas uma única suíte de testes (apenas um arquivo com .test.js extensão). Ele contém apenas um único teste. O Jest pode autodetectar testes na hierarquia de código, então você está livre para aninhar testes em um diretório.

Além disso, o Jest não executa apenas o teste uma vez e sai. Ele continua executando o teste no terminal. Se alguma alteração for feita no código-fonte, ele executará novamente os testes. O Jest também permite limitar quais testes executar. Por exemplo, ao pressionar 0, você pode dizer ao Jest para testar apenas os arquivos que foram alterados. À medida que as suítes de testes crescem, essa opção economiza muito tempo. Para sair do executor de testes do Jest, pressione q.

• • O Script Eject

O eject script copia todas as dependências e arquivos de configuração para o projeto, oferecendo controle total sobre o código. Ao fazer isso, no entanto, você remove o projeto do conjunto de ferramentas integrado do Create React App. Uma vez executado, não há como desfazer.

O benefício do Create React App é que ele tira o fardo de inúmeras configurações. A construção de qualquer aplicação JavaScript moderna requer muitas ferramentas trabalhando em conjunto. O Create React App lida com todas as configurações para você, então ejetar o projeto significa que você terá que fazer tudo isso manualmente depois.

Uma desvantagem notável do Create React App é que, como ele gerencia todas as configurações por si só, ele não oferece personalização total do projeto. Para a maioria dos projetos, isso não é um problema. No entanto, se você quiser ter controle total do projeto, terá que ejetar o código. Uma vez ejetado, você não poderá atualizar para novas versões do Create React App. Você terá que gerenciar manualmente todas as melhorias.

Passo 4: Inicialização do Servidor

Agora, vamos iniciar o servidor local e executar o projeto em um navegador web. Para iniciar o servidor, temos outro script à mão. Executá-lo não requer o npm run comando. Quando executado, o script inicia um servidor local, executa o código do projeto, inicia um observador e escuta as alterações no código. As alterações são mostradas diretamente no navegador. O seguinte comando iniciará o servidor:

A saída mostrará a URL para visitar o projeto em um navegador. Também mostrará várias informações sobre o projeto em execução. Abra a URL em um navegador:

Como a saída mostra, o Create React App usa a porta 3000 para servir o projeto. Se a porta já estiver em uso, o Create React App usará a próxima porta disponível. Se você tiver um firewall configurado, ele deve permitir o tráfego para a porta 3000 (ou a porta que o Create React App relatar). Você pode aprender mais sobre como gerenciar o firewall UFW aqui.

Para sair do servidor, pressione Ctrl+C na janela do terminal. Isso encerrará o processo em execução (a instância do servidor).

Passo 5: Modificação da Página Inicial

A seguir, aprenderemos como modificar os códigos armazenados no public/ diretório. Ele contém a página HTML base e serve como a raiz do projeto. Embora você possa não precisar editá-lo mais no futuro, ele serve como a base do projeto.

Primeiro, inicie o servidor com npm, depois vá para o public/ diretório:

O diretório conterá arquivos como favicon.ico, logo192.png, logo512.png, etc. Esses são ícones que um usuário que visita a página web veria em sua aba, navegador ou telefone. O navegador selecionará automaticamente o de tamanho adequado. Eventualmente, você os substituirá por ícones adequados para o seu projeto. Por enquanto, vamos deixá-los como estão.

O arquivo manifest.json hospeda um conjunto estruturado de metadados. Ele descreve o projeto, lista os ícones disponíveis e muito mais.

O arquivo robots.txt hospeda informações para rastreadores web. Os rastreadores web “rastreiam” a World Wide Web, indexando páginas para mecanismos de busca. Não há necessidade de ajustar o arquivo, a menos que você tenha um motivo específico para isso. Por exemplo, você pode querer tornar certas URLs para conteúdos específicos não facilmente acessíveis. Adicione o local ao robots.txte ele não será indexado pelos mecanismos de busca.

O arquivo index.html é a raiz da nossa aplicação. Sempre que acessar o app, este é o arquivo que é servido. Este é o arquivo que você vê na tela. Vamos dar uma olhada rápida nele. Abra-o em um editor de texto:

É um arquivo bem curto. Note que não há imagens ou palavras no <body>. O React constrói esses conteúdos usando seu próprio mecanismo e os injeta usando JavaScript. No entanto, o React precisa saber onde injetar o código. O arquivo index.html serve para esse propósito.

Vamos alterar o <title> para Meu React App:

Depois, salve o arquivo e feche o editor. Agora, verifique a página web no navegador:

Como você pode ver, o título da aba foi alterado para Meu React App. Se não mudou automaticamente, recarregue a página pressionando F5 ou Ctrl+R.

Vamos voltar para o editor de texto. Todos os projetos React devem começar a partir de um elemento raiz. Pode haver mais de um em uma única página. No entanto, pelo menos um é obrigatório. Ele diz ao React onde colocar todos os códigos HTML gerados. No nosso index.html, encontre a localização do elemento <div id="root">. É a <div> que o React usará para alterações futuras. Tente alterar o id valor de root para base:

 

 

Depois disso, recarregue a página no navegador. Ela não mostrará nenhum conteúdo. Como as Ferramentas de Desenvolvedor Web do Firefox mostram, um erro é gerado:

Volte para o editor de texto e altere o valor de id de volta para root:

Passo 6: Tag de Cabeçalho e Alterações de Estilo

Até agora, iniciamos o servidor local e fizemos pequenas alterações no arquivo HTML raiz. Agora, vamos trabalhar com os componentes React localizados no src/ diretório. Faremos alterações no código CSS e JavaScript. As alterações serão aplicadas automaticamente usando hot reloading.

Se o servidor foi parado, inicie-o usando npm. Depois, dê uma olhada no conteúdo do src/ diretório:

Existem vários arquivos JavaScript e CSS aqui. Vamos analisá-los um por um.

• ServiceWorker.js

É um arquivo importante se você deseja criar aplicativos web progressivos. Este service worker oferece várias funcionalidades, como notificações push, cache offline, etc. Por enquanto, vamos deixá-lo como está.

• SetupTests.js e App.test.js

Como o nome desses arquivos sugere, eles são usados para testar arquivos. Sempre que executamos o test script usando npm, ele executou esses arquivos. O arquivo setupTests.js contém alguns métodos expect personalizados.

Vamos dar uma olhada no App.test.js. Abra-o em um editor de texto:

Ele contém um teste básico que procura pela frase learn react para estar presente no documento. Se você tiver a aba do navegador aberta, poderá ver a frase na página. Ao contrário de outros testes unitários, os testes do React são diferentes. Como os componentes podem incluir informações visuais como marcação (e lógica para manipulação de dados), os testes unitários tradicionais não funcionam facilmente. Nesse sentido, os testes do React são melhor descritos como uma forma de teste funcional ou de integração.

• Arquivos CSS

Existem vários arquivos de estilo disponíveis: App.css, index.css, e logo.svg. Você pode seguir vários métodos para estilizar no React. A maneira mais fácil é escrever CSS puro, pois não é necessária nenhuma configuração adicional.

Você pode importar CSS diretamente para um componente. Isso permite dividir os arquivos CSS para se aplicarem apenas a um componente individual. Na verdade, você não está separando o CSS do JavaScript. Em vez disso, você está agrupando todos os componentes relevantes (CSS, JavaScript, imagens e marcação) juntos.

Abra App.css com um editor de texto:

É um arquivo CSS padrão sem pré-processadores CSS especiais. Você pode adicioná-los mais tarde, se quiser. O Create React App se esforça para ser neutro, oferecendo uma experiência sólida e pronta para uso.

Vamos fazer uma alteração e vê-la em ação. Altere o valor do background-color para blue:

Verifique a alteração no navegador:

• • Index.js

Agora, é hora de fazer alterações no código JavaScript do React. Abra o index.js usando um editor de texto:

No topo, ele está importando React, ReactDOM, index.css, App, e serviceWorker. Ao importar React, estamos trazendo o código necessário para converter JSX em JavaScript. ReactDOM é o código que conecta nosso código React ao elemento base ( index.html, por exemplo). Observe a seguinte linha:

Ele está instruindo o React a encontrar um id com o rótulo root e injetar os códigos React lá. <App/> é o elemento raiz e tudo se ramifica a partir dele.

Observe que também importamos arquivos CSS (como index.css) mas na verdade não fizemos nada com eles. Ao importar, estamos na verdade dizendo ao Webpack via scripts do React para incluir os códigos CSS no pacote compilado final. Caso contrário, os estilos CSS não aparecerão.

• App.js

A seguir, daremos uma olhada no App.js. Abra-o em um editor de texto:

 

Vamos ver como a alteração do seu conteúdo afeta o nosso projeto. Altere o conteúdo da <p>tag:

Em seguida, salve o arquivo e verifique as alterações no navegador:

Voilá! Você fez seus primeiros ajustes de componente React!

Há mais uma coisa a notar. Olhe para o elemento <img>:

Observe que o logo é passado entre chaves. Sempre que passar atributos (que não sejam strings ou números), eles devem ser passados entre chaves. Assim, o React os tratará como objetos JavaScript em vez de strings.

Neste caso, o aplicativo não está realmente importando a imagem. Em vez disso, é uma referência para a imagem. Quando o Webpack compila o projeto, ele coloca a imagem na posição apropriada. Podemos verificar isso no navegador. Abra as Web Developer Tools no Firefox:

O Webpack deseja atribuir caminhos de arquivo exclusivos para todas as imagens. Portanto, mesmo que as imagens tenham sido importadas com o mesmo nome, elas terão caminhos diferentes.

Passo 7: Compilação do Projeto

Nesta etapa, aprenderemos como compilar o projeto em um pacote implantável. Inicie o terminal e execute o script de build do projeto:

O compilador criará o diretório dedicado build/onde colocará a saída. Para ver o que o processo de compilação faz, abra o arquivo index.html do diretório build/diretório:

Como você pode ver, todos os códigos são compilados e minificados para o menor estado utilizável. A legibilidade não é uma preocupação, pois não é a parte do código voltada para o público. Códigos minificados ocupam menos espaço, mantendo todas as suas funcionalidades. Ao contrário de linguagens onde o espaço em branco é muito importante (Python, por exemplo), as linguagens web (HTML, CSS e JavaScript) não exigem espaçamento adequado para que o navegador as interprete.

Considerações Finais

Neste guia, demonstramos com sucesso como criar uma aplicação React. Também mostramos algumas configurações básicas usando ferramentas de build do JavaScript sem detalhes técnicos complexos. Este é o principal valor que o Create React App oferece. Você não precisa saber tudo para começar a usar o React. Você pode se dar ao luxo de não aprender as etapas complicadas de build enquanto se concentra exclusivamente no código React.

Aqui, também demonstramos como iniciar, testar e compilar um projeto React. Esses comandos são fundamentais para projetos de todos os tamanhos.

Boa computação!