Estrutura de um projeto em ReactJS

Estrutura de um projeto em ReactJS

Olá leitor, seja bem vindo a segunda lição da jornada que vai te transformar em um desenvolvedor em ReactJS.

Acredito que esse incrível framework, já esta instalado na sua máquina, e que você também chegou a criar o seu primeiro projeto, chamado de meuapp, estou certo?

Se sim, maravilha!

Isso significa que você completou a primeira lição, que fala sobre a Introdução a Jornada ReactJS 😁

Mas antes de começarmos a colocar a mão na massa, é super importante que você entenda alguns tópicos, tópicos estes que já foram previamente discutidos aqui no portal da Micilini, são eles:

Os conhecimentos existentes em cada uma dos links acima, são de extrema importância na sua vida como desenvolver ReactJS.

Se você entendê-los, garanto que não terá dificuldades em criar aplicações mais seguras e super otimizadas daqui em diante.

Entendendo as estruturas de pastas de um projeto

Antes de começarmos, vamos criar mais um projeto em ReactJS para que possamos nos familiarizar ainda mais com o framework, ainda se lembra como se faz isso?

É simples, veja só: Dentro da sua pasta de projetos (ou dentro da sua área de trabalho) abra o terminal do seu sistema operacional, e execute o comando:

npx create-react-app entendendo-pastas

Atualmente criei um novo projeto chamado de entendendo-pastas, fazendo jus ao tópico que estamos aprendendo.

Esse processo de criação de projeto pode demorar alguns minutos, então é só aguardar 😉

Perfeito, quando criamos um projeto totalmente do zero em ReactJS, essa é a estrutura de pastas que estamos acostumados a encontrar:

node_modules

A pasta node_modules é um tipo de pasta que sempre estará presente em um projeto ReactJS, dentro dela você poderá encontrar todas as dependências do projeto que estão instaladas, e que são necessarias para o projeto rodar.

Assim que você executa o seu projeto (npm start), você especifica as dependências necessárias no arquivo package.json , de modo a chamar algumas delas para rodar o projeto no seu navegador.

Fazendo uma breve comparação, a pasta node_modules é bem similar a pasta Windows que existe em todos os sistemas operacionais que rodam o Windows. Pois sem essa pasta, o sistema operacional não existe e você não conseguiria acessar a calculadora, internet, jogos, aplicações e etc.

Nunca apague a pasta Windows do seu sistema operacina!

Como desenvolvedor ReactJS, é muuuuuito raro nós precisarmos mexer em algo dentro dessa pasta, ao menos que você esteja criando um pacote por contra própria.

Portanto, a pasta node_modules é aquele tipo de pasta que nós nunca iremos mexer ou alterar algo dentro dela, ok?

public

Como uma aplicação em ReactJS representa o front-end de um website, a pasta public é onde você coloca arquivos estáticos que serão servidos diretamente pelo servidor web. 

Esses arquivos, geralmente são arquivos globais de folhas de estilo (CSS), ícones, imagens, vídeos, além de arquivos de SEO como sitemaps.xml e robots.txt.

Ou seja, são arquivos estáticos que serão servidos durante toda a sua aplicação.

De modo padrão, assim que criamos um novo projeto em ReactJS, o sistema cria automaticamente alguns arquivos estáticos como:

favicon.ico: representa o ícone da sua aplicação (inicialmente é o ícone do react) que está sendo chamado dentro do index.html.

logo192.png e logo512.png: é um outro tipo de favicon que é lido pelos dispositivos da apple e que está sendo chamado dentro do index.html.

manifest.json: é um arquivo de manifesto (informações) que é usado em aplicativos da web progressivos (PWAs) e em alguns outros contextos da web moderna. Ele também está sendo chamado dentro do index.html.

Ele contém metadados sobre os aplicativo da web, como o nome, ícone, cores temáticas e informações sobre como o aplicativo, que devem ser exibidas quando instalado na tela inicial de um dispositivo móvel.

Se você abrir manifest.json, irá se deparar com as seguintes informações em formato JSON:

{
 "short_name": "React App",
 "name": "Create React App Sample",
 "icons": [
 {
 "src": "favicon.ico",
 "sizes": "64x64 32x32 24x24 16x16",
 "type": "image/x-icon"
 },
 {
 "src": "logo192.png",
 "type": "image/png",
 "sizes": "192x192"
 },
 {
 "src": "logo512.png",
 "type": "image/png",
 "sizes": "512x512"
 }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#000000",
 "background_color": "#ffffff"
}

Se você está criando um PWA com o ReactJS, invevitavelmente você precisa modificar algumas informações desse manifest.json, para que ele fique a cara e com o nome da sua aplicação.

robots.txt: este arquivo é um arquivo de texto simples usado para controlar o acesso dos robôs dos mecanismos de busca (como o Googlebot) aos diferentes partes do seu site, e representa uma das estratégias de SEO On-Page.

sitemap.xml: apesar desse arquivo não estar listado dentro da pasta public, ele é essêncial para o SEO On-Page do seu projeto, sendo assim, recomendo que você o crie.

No caso dos arquivos robots.txt e sitemap.xml os buscadores irão acessá-los diretamente da pasta raiz do seu site, por exemplo:

Não se esqueça de que a pasta public representa a raiz do diretório do seu site, neste caso, todo arquivo crucial para o seu sistema deve estar ali presente.

Além disso, o usuário sempre vai abrir o index.html quando enviar ou chamar alguma requisição para o seu site.

src

A pasta src, é a pasta mais importante de um projeto em ReactJS, pois é dentro dela que estará armazenado toda a lógica da sua aplicação, incluindo:

Ou seja, a pasta src é geralmente onde você coloca o código-fonte do seu aplicativo. Ela contém os arquivos JavaScript, JSX, CSS, imagens e outros recursos que compõem a lógica e a interface do seu aplicativo.

Inicialmente, ela conta com 8 arquivos diferentes que já foram pré setados pelo ReactJS, são eles:

App.js: começando pelo arquivo mais importante do projeto, ele é o componente principal da sua aplicação.

Onde contém a estrutura de alto nível da aplicação, ou seja, toda página, componente, estilo, imagem e afins, precisam passar por esse App.js.

É claro que não precisamos definir toda a lógica da nossa aplicação dentro dele (pois isso será feito em pequeno blocos existentes em suas respectivas pastas).

Mas é só pra você entender que ele é o arquivo principal e tudo o que é servido para o usuário, acaba passando e sendo executado por ele.

Incluindo a navegação entre páginas, a definição de rotas (se estiver usando React Router), e possivelmente a lógica de estado global.

App.css: este arquivo contém os estilos CSS específicos para o componente principal do seu aplicativo, o App.js. Aqui você pode definir estilos globais ou estilos específicos que poderão surtir efeito em toda a sua aplicação.

App.test.js: este arquivo contém testes para o componente App.js. Ele é usado para testar o comportamento e a renderização do componente, garantindo que ele funcione corretamente em diferentes cenários.

Ou seja, é um arquivo usado por testes unitários que testam o funcionamento da sua aplicação.

index.js: este é o ponto de entrada principal do seu aplicativo React. E para você entendê-lo é necessário que você pule para o tópico que eu falo sobre "Entendendo o arquivo index.html".

Basicamente o index.js é chamado dentro do index.html - que existe dentro da pasta public - onde é usado para trazer (renderizar) toda a lógica do arquivo App.js dentro da tag <div id="root"></div>.

E sim, em aplicações ReactJS nós criamos todas as tags HTML dentro de arquivos Javascript 🤯

Inicialmente isso pode parecer algo "mindblowing", mas em jornada futuras tudo começara a fazer sentido.

Resumindo, o index.js é responsável por renderizar o componente App.js na página HTML.

Além disso, é onde você pode configurar outras coisas, como a integração com o serviço de rotas (se estiver usando React Router) ou com o estado global (se estiver usando Redux, por exemplo).

index.css: funciona de forma similar ao App.css, onde contém estilos CSS globais que se aplicam a todo o seu aplicativo. Aqui você pode definir estilos que serão aplicados em toda a aplicação, independentemente do componente.

logo.svg: lembra que quando executamos a nossa aplicação pela primeira vez, apareceu um logo do React girando na tela? Então, esse é o arquivo. 

Obviamente que ele esta ali para representar um sistema inicial feito com ReactJS, e que esta sendo chamado dentro do App.js, mas é só pra você ter uma ideia de como as coisas funcionam por aqui.

reportWebVitals.js: este arquivo contém a lógica para reportar métricas de desempenho do seu aplicativo à equipe de desenvolvimento ou a serviços de monitoramento. Ele pode ser usado para medir e analisar o desempenho do seu aplicativo em tempo real.

setupTest.js: Este arquivo é usado para configurar o ambiente de teste do seu aplicativo. Ele pode conter configurações específicas para os testes, como configurações de mock ou configurações de ferramentas de teste como Jest.

Arquivos avulsos

Por fim, não menos importantes, nós temos 4 arquivos avulsos que estão espalhados na pasta raiz de um projeto ReactJS, são eles:

.gitignore: pertencente ao controle de versionamento Git, é usado para especificar arquivos e diretórios que o Git deve ignorar ao rastrear as alterações no repositório.

Para entender mais sobre o funcionamento do Git, nós temos uma jornada completíssima para você.

README.md: é um documento de texto formatado em Markdown que fornece informações sobre o projeto para os usuários e colaboradores, muito utilizado pela plataforma do GitHub.

package.json: é um arquivo de metadados do npm que contém informações sobre o projeto, como nome, versão, descrição e scripts de execução.

package-lock.json: é criado automaticamente pelo npm para manter um registro das versões exatas de todas as dependências instaladas em um projeto.

É importante ressaltar que projetos em ReactJS mais robustos, contam com diversos outros arquivos avulsos que representam configurações da aplicação, e que foram instalados por bibliotecas personalizadas.

No más, inicialmente a pasta raiz sempre começa com esses 4 arquivos.

Qual a diferença entre os arquivos index.css e app.css?

Nessa altura do campeonato talvez você esteja se perguntando: "Qual seria a diferença entre os arquivos index.css e app.css?".

Apesar deles serem bem parecidos (onde um deles é completamente opcional - veremos o motivo mais tarde -) os criadores resolveram fazer essa separação por algumas questões óbvias.

O index.css deve ser usado para armazenar os estilos globais que se aplicam em todo o seu aplicativo. Ele é ideal para definir estilos básicos, como configurações de fonte, estilo de links, cores padrão, entre outros, que serão usados em toda a aplicação.

Já o App.css deve ser usado para armazenar estilos que se aplicam a todos os componentes que foram declarados dentro do App.js. E podem incluir estilos que se aplicam apenas à interface do usuário dentro deste componente.

No caso do index.css, ele costuma substituir o style.css que geralmente criamos em aplicações front-end puras (só com HTML, CSS e JS).

Já o App.css costuma controlar os estilos de todos os componentes que estão declarados exclusivamente dentro do App.js.

No futuro você verá que cada componente dentro da pasta src, pode ter sua propria folha de estilo, como é o caso do componente Header (cabeçalho) que pode importar o header.css (folha de estilo exclusiva para o cabeçalho).

Em resumo, o index.css é usado para estilos globais que afetam todo o aplicativo, enquanto o App.css é usado para estilos específicos do componente App e sua interface de interna.

Essa separação ajuda a manter a organização e a modularidade dos estilos em um projeto ReactJS.

Tenha sempre em mente que um projeto feito em ReactJS ele precisa ser modular.

Então o index.css substitui todo e qualquer tipo de folha de estilo que exista dentro da pasta public?

Não necessariamente, enquanto o index.css pode definir estilos globais que se aplicam a todo o seu aplicativo, você ainda pode ter folhas de estilo adicionais na pasta public que se aplicam e se integram dentro do index.html.

Mas na maioria das vezes em que criamos o index.css, dificilmente precisamos importar um style.css que existe dentro de public para o seu index.html. Uma vez que o index.css já existe justamente para isso 😉

Mas nada impede de você criar estilos css dentro de public para serem imprtados dentro do seu index.html, ok?

Entendendo o arquivo index.html

Um dos arquivos igualmente importantes em uma aplicação feita em ReactJS é o index.html que está localizado dentro da pasta public.

Vejamos as surpresas que este arquivo nos reserva:

<!DOCTYPE html>
<html lang="en">
 <head>
 <meta charset="utf-8" />
 <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />
 <meta name="theme-color" content="#000000" />
 <meta
 name="description"
 content="Web site created using create-react-app"
 />
 <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 <!--
 manifest.json provides metadata used when your web app is installed on a
 user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
 -->
 <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 <!--
 Notice the use of %PUBLIC_URL% in the tags above.
 It will be replaced with the URL of the `public` folder during the build.
 Only files inside the `public` folder can be referenced from the HTML.

 Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
 work correctly both with client-side routing and a non-root public URL.
 Learn how to configure a non-root public URL by running `npm run build`.
 -->
 <title>React App</title>
 </head>
 <body>
 <noscript>You need to enable JavaScript to run this app.</noscript>
 <div id="root"></div>
 <!--
 This HTML file is a template.
 If you open it directly in the browser, you will see an empty page.

 You can add webfonts, meta tags, or analytics to this file.
 The build step will place the bundled scripts into the <body> tag.

 To begin the development, run `npm start` or `yarn start`.
 To create a production bundle, use `npm run build` or `yarn build`.
 -->
 </body>
</html>

Inicialmente é um arquivo simples, com uma estrutura HTML simples, que implementa algumas tags, ícones e arquivos de manifest.

Mas a lógica principal mesmo é executada dentro do <div id="root"></div>.

Mas daí você pode ser perguntar: "Cade a importação do index.js?".

Neste momento ela não existe, pois o index.html que existe dentro da pasta public, é apenas um template que ainda será transformado em um arquivo final na qual o index.js será importado.

"Tá, mas se ele ainda vai ser transformado, como o ReactJS consegue ser executado normalmente quando executamos um npm start?"

Quando você executa npm start em um projeto ReactJS, um servidor de desenvolvimento é iniciado. Este servidor utiliza ferramentas como o webpack e o Babel para transpilar e empacotar seu código JavaScript, incluindo o index.js, em um formato que o navegador possa entender.

Então, mesmo que a importação do index.js não esteja explicitamente presente no arquivo HTML inicial (index.html), o servidor de desenvolvimento garante que o código JavaScript seja transpilado e executado corretamente no navegador assim que você inicia o projeto com npm start.

Sendo assim, é fato que o index.js é inserido dentro do index.html por de baixo dos panos.

"Ok, e como eu faço para gerar e visualizar o arquivo final do index.html?"

Apesar desse ser um assunto para a próxima lição, você pode fazer isso executando o comando npm build dentro da pasta raiz do seu projeto.

"Espere aí, cade a tag <title> do index.html?"

No contexto de um projeto em ReactJS o arquivo index.html é gerado automaticamente e normalmente não contém uma tag <title>.

Isso ocorre porque o título da página é definido dinamicamente pelo React durante a renderização do aplicativo - aprenderemos a fazer isso mais tarde -.

Agora que você já entendeu o funcionamento do index.html, talvez esteja curioso para entender o funcionamento do index.js.

Entendendo o arquivo index.js

O aquivo index.js é o arquivo principal da sua aplicação, responsável por fazer a ponte entre o index.html e o App.js (que por sua vez pode puxar uma série de outros componentes).

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

A ideia desta lição não é fazer você entender a fundo o funcionamento do index.js, pois muitos dos conceitos usados por ele, serão conceitos que vamos explicar em lições futuras.

Perceba que ele esta usando o comando document.getElementById('root'), de modo a pegar o elemento <div id="root"></div> que existe dentro do index.html, para renderizar todo o conteúdo que existe dentro de App.js (<App />) dentro dele.

O que prova mais uma vez que o index.js é uma ponte que importa todos os seus componentes dentro da div root do seu index.html.

E é dessa forma que o conteúdo que existe dentro da pasta src é carregado no html principal (index.html).

Hands-On no ReactJS

Agora que você já entende o funcionamento e a estrutura de arquivos em um projeto ReactJS, chegou o momento de fazermos nosso Hands-On (mão na massa).

Os próximos tópicos abaixo possuem o objetivo de te instruir no passo a passo inicial antes de publicar um projeto em ReactJS.

Alterando o index.html

Como de praxe, você deve ter notado algumas tags dentro do index.html que precisam da nosso atenção, são elas:

Onde todas elas precisam ser modificadas para se adequar ao seu projeto, principalmente uma tag tão importante quanto a description.

Sendo assim, sempre quando você for publicar um novo projeto (npm build), nunca se esqueça de modificar o index.html e até mesmo adicionar novas tags, como é o caso Scheme Markeups, que são ótimas para o SEO do seu site.

Alterando o manifest.json e os ícones da aplicação

Como dito anteriormente, é recomendável que você crie novos ícones da sua aplicação, e faça as devidas alterações dentro do arquivo manifest.json. 

Por exemplo, supondo que eu esteja criando um novo projeto chamado de "Lojas Micilini", meu manifest.json ficaria mais ou menos assim:

{
 "short_name": "Lojas Micilini",
 "name": "Lojas Micilini: A sua loja de artigos de tecnologia.",
 "icons": [
 {
 "src": "favicon-lojasmicilini.ico",
 "sizes": "64x64 32x32 24x24 16x16",
 "type": "image/x-icon"
 },
 {
 "src": "logo192-apple-micilini.png",
 "type": "image/png",
 "sizes": "192x192"
 },
 {
 "src": "logo512-apple-micilini.png",
 "type": "image/png",
 "sizes": "512x512"
 }
 ],
 "start_url": ".",
 "display": "standalone",
 "theme_color": "#21262C",
 "background_color": "#ffffff"
}

Não se esqueça de criar os ícones personalizados com a cara do seu negócio. Ou você quer mostrar o ícone do ReactJS para os usuários da sua aplicação?

Limpando um projeto em ReactJS

É verdade que uma aplicação recém instalada pelo ReactJS contém arquivos desnecessários?

Sim, isso é totalmente verdade!

Muitos arquivos que foram apresentados no início desta lição, são totalmente opcionais, e você pode removê-los caso desejar, são eles.

Pasta src:

Além disso, você vai precisar remover a importação do reportWebVitals.js dentro do index.js, de modo que o resultado final fique parecido com este:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
 <App />
 </React.StrictMode>
);

Com relação ao App.js, eu sempre gosto de criar uma versão nova e simples para ele, como por exemplo:

export default function App() {
 return (
 <div>Olá ReactJS!</div>
 );
}

Ao executar o seu projeto (npm start), você já deve ser capaz de visualizar uma mensagem de boas vindas ao ReactJS.

Isso significa que o projeto já está rodando com sucesso! 😍

"Eu preciso limpar o meu projeto sempre quando criar uma nova aplicação em ReactJS?"

É claro que alguns itens que marquei como "desnecessário", podem ser importantes para a sua aplicação, isto é, caso você saiba usa-los.

Mas é fato de que existem muitas coisas ali dentro - principalmente ícones e estilos -, que costumam ser desnecessários em qualquer aplicação.

Caso preferir, você pode baixar essa versão minimalista atraves deste link do GitHub.

Repositório da Jornada no GitHub

Sim, você pode acompanhar todos os projetos de cada uma das lições dentro de um repositório principal da jornada ReactJS no GitHub, para isso você pode acessar por meio deste link.

Os arquivos da lição estão separados em cada uma de suas respectivas pastas dentro do repositório, onde o nome dos commits identifica o nome da lição.

Perguntas & Respostas

Abaixo você pode encontrar algumas perguntas e respostas mais comuns de todo desenvolvedor ReactJS que está ingressando na área.

O que costumamos fazer e o que não costumamos fazer dentro das pastas de um projeto ReactJS?

Como vimos anteriormente, a pasta node_modules é a última pasta que iremos mexer, seguida da pasta public, onde só precisamos fazer alterações no final do projeto.

Como desenvolvedor ReactJS, costumamos apenas trabalhar dentro da pasta src, uma vez que é lá que está declarada toda a lógica da nossa aplicação.

Se eu fosse fazer uma estimativa, 95% do tempo serão dedicadas a criação de conteúdos que existem dentro da pasta src, onde apenas 5% estão espalhados entre a raiz do projeto e a pasta public.

O que fazer quando você precisar clonar (baixar) um projeto feito em ReactJS?

Como você verá na próxima lição, existe dois tipos de projetos em ReactJS:

No que diz a respeito a projetos compilados, é quando o desenvolvedor executou o npm build de modo a gerar um "executável" que consiste em arquivos otimizados e minificados prontos para serem implantados em um servidor web.

Esses arquivos geralmente incluem o código JavaScript da aplicação, juntamente com os recursos necessários, como estilos CSS e imagens. Essa compilação é útil para otimizar o desempenho da aplicação e reduzir o tempo de carregamento para os usuários finais.

Já os projetos brutos, são aqueles que você pode encontrar no repositório desse curso, onde não foram compilados, e estão prontos para serem editados.

No que diz a respeito a estes projetos, o ideal é que você sempre execute o comando npm i ou npm install dentro da pasta raiz do projeto. Fazemos isso para instalar os pacotes que geralmente não costumam vir em uma aplicação (famosa pasta node_modules).

Vamos tomar como exemplo o projeto-limpo, perceba que no caso dele, a pasta node_modules não se faz presente. Em casos como esses, o ideal é que você faça um clone de todos os conteudos dessa pasta e execute um npm install dentro da pasta raiz.

Isso vai fazer com que o NPM abra o package.json, e posteriormente instale todos os modulos necessários para rodar o projeto (que já estão declarados no arquivo package.json).

"Por que a pasta node_modules não costuma ser enviada no push em um projeto do GitHub?"

Se você não sabe o que é push, recomendo dar uma olhada nessa lição.

Responde a pergunta, ela não enviada por algumas razões principais:

Tamanho: A pasta node_modules tende a ser muito grande devido ao grande número de dependências de um projeto Node.js.

Enviá-la para o repositório aumentaria significativamente o tamanho do repositório, tornando o processo de clonagem mais lento e ocupando mais espaço no servidor.

Redundância: As dependências do projeto são listadas no arquivo package.json, portanto, é desnecessário armazenar todas as dependências no repositório.

Em vez disso, os desenvolvedores podem simplesmente instalar as dependências listadas no package.json executando npm install ou yarn install localmente após clonar o repositório.

Uma vez que essas dependencias já existem separadamente em um repositório online onde todos podem baixar.

Velocidade de Transferência: Enviar a pasta node_modules durante cada push pode tornar o processo de push e pull mais lento, especialmente em conexões de internet mais lentas.

É por esse motivo que essa pasta é ignorada dentro do arquivo .gitignore 😉

Conclusão

Nesta lição você aprendeu o funcionamento das estruturas de pastas de um projeto em ReactJS.

Na próxima lição, vamos aprender a compilar o nosso projeto e como coloca-lo no ar 😄