React é uma estrutura de interface do usuário desenvolvida pelo Facebook com um crescente índice de adesão pelos desenvolvedores. Foi rankeada como a linguagem ou tecnologia preferida na pesquisa de desenvolvedores da Stackoverflow 2019.
Sua criação data de 2016 como um caminho suportado para criar apps com configuração zero para qualquer hospedagem de sites. Desde então, o projeto teve um significativo crescimento, com cerca de 950 commits por mais de 250 colaboradores.
Afinal, como utilizar o Create React App em seu projeto front-end?
No artigo de hoje vamos te explicar como utilizar o Create React App em seu projeto front-end e dar os primeiros passos em configuração e aproveitar todas as vantagens de ter um blog em Wordpress. É importante que você seja familiar com editores de texto e na navegação em linhas de comando.
1. Configurar a aplicação boilerplate
Para este passo a passo, usaremos o Node package manager (Npm). Você precisará ter o Node instalado previamente. É possível criar manualmente um aplicativo React, mas o Facebook criou um módulo de nó create-react-app para gerar uma versão padrão de um app React.
Além de fornecer algo que funcione prontamente, isso vai beneficiar também uma estrutura consistente para os aplicativos React, que você conhecerá ao se mover entre os projetos do React.
Ele também ofere um script de compilação e servidor de desenvolvimento já prontos para utilização. Usaremos o npm para instalar a interface de comandos (CLI) create-react-app globalmente (-g).
Abra seu terminal e execute npm install -g create-react-app:
Agora que você tem o CLI disponível para uso, navegue para o diretório parental que você gostaria de posicionar a aplicação dentro. A seguir, execute o create-react-app com o nome que você gostaria de usar para seu projeto (mas não utilize letras maiúsculas).
create-react-app <name-of-app>
Terminada a conclusão, você vai obter algumas dicas rápidas sobre como utilizar a aplicação. Antes de executar o app, vamos dar uma olhada sobre sua estrutura e ver o que ela contém.
2. Estrutura React App
Este é um passo extremamente importante para que você aprenda como utilizar o Create React App em seu projeto front-end. Mude os diretórios dentro do app que você acabou de criar. Se você listar os conteúdos do diretório incluindo arquivos ocultos (Is -la), você verá a seguinte estrutura:
O create-react-app cuidou configuração da principal estrutura de aplicação, bem como de algumas configurações do desenvolvedor. A maior parte do que você vê não será visível para o visitante do seu aplicativo da web. O React usa uma ferramenta chamada webpack que transforma os diretórios e arquivos aqui em ativos estáticos. Os visitantes do seu site recebem esses ativos estáticos.
.gitgnore
Este é o arquivo padrão usado pela ferramenta de controle de origem git para determinar quais arquivos e diretórios devem ser ignorados ao confirmar o código. Enquanto esse arquivo existe, o create-react-app não criou um repositório Git dentro da pasta. Se você der uma olhada no arquivo, ele resolveu vários itens (até os usuários do .DS_Store for Mac)
package.jso
Este arquivo descreve todas as configurações do aplicativo React.
- name – é o nome do seu aplicativo
- version – é a versão atual
- “private”: true – é uma configuração à prova de falhas para evitar a publicação acidental de seu aplicativo como um pacote público no ecossistema npm. As dependências contêm todos os módulos e versões necessários para o aplicativo.
Aqui, ele contém duas dependências, que nos permitem usar – react – e – react-dom em nosso JavaScript. Na captura de tela acima, a versão especificada é ^15.5.4. Isto significa que o npm instalará a versão principal mais recente do 15.x.x. Em contraste, você também ver algo como ~1.2.3 no pacote .json, que instalará apenas a versão secundária mais recente correspondente ao 1.2.x.
- devDependencies – contém módulos e versões úteis de nós para usar o aplicativo React em um ambiente de desenvolvimento. Aqui, ele contém uma dependência, react-scripts, que fornece um conjunto de scripts de desenvolvimento úteis para trabalhar com o React.
- scripts – especifica aliases que você pode usar para acessar alguns dos comandos react-scripts de uma maneira mais eficiente. Por exemplo, executar o teste npm em sua linha de comnado executará o teste react-scripts test --env=jsdom nos bastidores.
node_modules
Este diretório contém dependências e subdependências de pacotes usados pelo aplicativo React atual, conforme especificado por package.json. Se você der uma olhada, pode se surpreender com a quantidade.
package.json
Este arquivo contém a árvore de dependência exata instalada em node_modules /. Isso fornece às equipes que trabalham com aplicativos particulares uma maneira de garantir que eles tenham a mesma versão de dependências e subdependências. Ele também contém um histórico de alterações package.json, para que você possa analisar rapidamente as alterações de dependência.
public
Este diretório contém ativos que serão atendidos diretamente sem processamento adicional pelo webpack. Index.html fornece o ponto de entrada para o aplicativo Web. Você também terá um favicon (ícone de cabeçalho) e um manifest.json.
src
Ele contém o JavaScript que será processado pelo webpack e é o coração do aplicativo React. Navegando nesta pasta, você vê o principal componente do App JavaScript (App.js), seus estilos associados (App.css) e o conjunto de testes (App.test.js). index.js e seus estilos (index.css) fornecem uma estrada no aplicativo e também iniciam o registerServiceWorker.js.
Esse será o responsável pelo serviço que cuida do armazenamento de cache e da atualização dos arquivos para o usuário final. Permite capacidade offline e carregamento mais rápido de páginas.
À medida que o aplicativo React cresce é comum adicionar um diretório components/ para organizar componentes e arquivos relacionados a componentes e um diretório de visualizações para organizar visualizações do React e arquivos relacionados à visualização.
3. Inicializando o servidor de desenvolvimento React App
Como foi declarado na mensagem de sucesso ao executar o create-react-app, você só precisa executar o npm start no diretório do aplicativo para começar a servir o servidor de desenvolvimento.
Ele deve abrir automaticamente uma guia no seu navegador que aponte para http://localhost:3000/ (caso contrário, visite manualmente esse endereço). Você será recebido com o banner de boas-vindas do React.
Gostou de entender melhor como utilizar o Create React App em seu projeto front-end? Essa com certeza pode ser uma grande novidade para muitos e, por isso, acreditamos que esse tipo de conteúdo seja essencial. Se tiver alguma dúvida, é só deixar nos comentários. Boa programação!
Gostou de nosso post? Compartilhe:
