Estrutura da pasta de um projeto React com Vite
Compreender a estrutura de pastas de um projeto React é crucial para organizar o código e manter a escalabilidade.
A seguir estão os componentes principais de um projeto React típico:
node_modules
Esta pasta contém todas as dependências e bibliotecas instaladas. Sempre que um pacote é instalado usando npm install, ele é armazenado aqui. Ela é gerada automaticamente com base no arquivo package.json e deve ser excluído do controle de versão.
𝗽𝘂𝗯𝗹𝗶𝗰
Esta pasta abriga ativos estáticos, como imagens e fontes .
𝘀𝗿𝗰 (𝗦𝗼𝘂𝗿𝗰𝗲 𝗖𝗼𝗱𝗲)
Nesta pasta residem os ficheiros com o código fonte da aplicação. Dentro da pasta src, são encontrados os seguintes arquivos principais:
- App.jsx: O componente raiz da aplicação React, responsável por estruturar o layout geral. Os subcomponentes e a lógica da aplicação geralmente são criados aqui.
- main.jsx: O ponto de entrada para a aplicaçãoo React, onde ReactDOM renderiza o componente raiz (App.jsx) no documento HTML index.html.
- App.css / index.css: folhas de estilo para definir a aparência da aplicação, geralmente vinculadas a componentes específicos como App.jsx.
index.html
Este ficheiro serve como ponto de entrada da aplicação. É o arquivo que renderiza a aplicação React no navegador. Nenhuma alteração dinâmica é feita neste ficheiro, mas ele é fundamental para a montagem dos componentes da aplicação.
𝗽𝗮𝗰𝗸𝗮𝗴𝗲.𝗷𝘀𝗼𝗻
Este ficheiro é o coração de um projeto React. Ele contém metadados sobre o projeto, como nome do projeto, versão e scripts (por exemplo, npm start ou npm run build). Ele também rastreia todas as dependências instaladas e devDependencies necessárias para o seu projeto.
𝘃𝗶𝘁𝗲.𝗰𝗼𝗻𝗳𝗶𝗴.𝗷𝘀
Este ficheiro contém definições de configuração para Vite, a ferramenta de construção. É usado para personalizar o servidor de desenvolvimento, especificar plug-ins e otimizar o processo de construção.
Por exemplo. neste ficheiro podemos especificar a porta em que o servidor vai correr.
.𝗴𝗶𝘁𝗶𝗴𝗻𝗼𝗿𝗲
Define ficheiros e pastas a serem ignorados pelo Git, como node_modules ou diretórios de construção, evitando que arquivos desnecessários sejam confirmados no controle de versão.
𝗥𝗘𝗔𝗗𝗠𝗘.𝗺𝗱
Um ficheiro markdown que fornece informações essenciais do projeto, instruções de configuração e diretrizes de uso. É importante para novos programadores ingressando no projeto ou para contribuidores de código aberto.
𝗲𝘀𝗹𝗶𝗻𝘁𝗿𝗰.𝗰𝗷𝘀
Se o ESLint estiver integrado, esse ficheiro de configuração definirá as regras e configurações para linting de código, ajudando a manter a qualidade e a consistência do código.