Estrutura de pastas e arquivos com React \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 16 Horas 35 Min 45 Seg Tempo restante da oferta: 16 35 45 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Estrutura de pastas e arquivos com React [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) [ React ](https://www.treinaweb.com.br/blog/categoria/react) # Estrutura de pastas e arquivos com React Aprenda a criar uma estrutura de pastas e arquivos com React para ter uma aplicação com fácil manutenção e escalável. [ Ariel Sardinha ](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) 4 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/importancia-dos-testes-de-software-na-qualidade-do-sistema.png) Como neste artigo vamos falar sobre estrutura de pastas e arquivos com React, não estamos falando de arquitetura de software, estamos falando em organização de projetos. [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web "React") é uma biblioteca incrível que transformou o cenário do desenvolvimento [front-end](https://www.treinaweb.com.br/blog/o-que-e-front-end-e-back-end) e gerou um incrível ecossistema de ferramentas, bibliotecas e padrões. Ao longo desse tempo, o React mudou bastante e à medida que o React evolui nossos aplicativos, ferramentas e abordagens também evoluíram. Com essa percepção, muitas abordagens, de arquitetura de software, já foram testadas como MVC ([Model-View-Controller.](https://www.treinaweb.com.br/blog/o-que-e-mvc "Model-View-Controller.")), a [arquitetura Flux](https://www.treinaweb.com.br/blog/flux-descubra-o-motivo-do-sucesso-dessa-arquitetura-em-grandes-empresas "Arquitetura Flux") e muitos outros. Porém, nem sempre é simples organizar nosso projeto utilizando uma boa organização de pastas e arquivos e, simultaneamente, se preocupar se estamos seguindo regras da arquitetura de software desejada. Durante muitos testes, definir um padrão de projeto que coube muito bem para quem está começando no mundo React e que certamente pode ser muito útil para o seu negócio ou aprendizado. Então, durante todo esse artigo, nós iremos conhecer uma estrutura de pastas e arquivos, simples de entender, para qualquer nível de desenvolvedores e escalável para a maioria dos projetos. [ ![React - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/react-fundamentos) ## Objetivos O principal objetivo dessa estrutura é que ela seja fácil de aprender e que mantenha um certo nível de escalabilidade de um projeto. ## Por que utilizar? Quando estamos desenvolvendo uma aplicação com React certamente nos deparamos com a necessidade de estruturar de forma organizada o projeto, porém, para desenvolvedores iniciantes, pode ser difícil de entender arquitetura de software como, por exemplo, a arquitetura Flux e MVC. Então esse padrão é para quem ainda está aprendendo React e quer ter uma boa organização de projeto antes de partir para arquiteturas mais “robustas”. O interessante a se observar é que a estrutura de pastas e arquivos com React, pode-se dizer que, é a porta de entrada para um entendimento do porquê se preocupar com uma arquitetura de software e até um facilitador para entender como organizar o padrão de determinadas arquiteturas. ## Modelo da estrutura Os exemplos abaixo vão lhe oferecer um claro exemplo de como estruturar as pastas e arquivos do seu projeto. No projeto React é muito comum termos páginas HTML que serão apresentadas para o usuário. Todas as páginas serão agrupadas em um diretório chamado `pages`. Teremos outro diretório chamado `ui`. Aqui iremos agrupar tudo que será relacionado ao design da aplicação como, por exemplo, componentes, estilos [CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css), temas e partes de uma tela. E, por fim, teremos o diretório `data`, onde vamos agrupar tudo relacionado a regra de negócio, lógica, dados etc. Então nossa aplicação vai seguir a seguinte estrutura: ```text src ├───data │ ├───@types │ ├───contexts │ ├───hooks │ ├───reduces │ └───services ├───pages │ └───home └───ui ├───components ├───partials ├───styles └───theme ``` Vamos agora ver a seguir o que tem dentro de cada um dos diretórios de forma mais específica. [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## Diretório data Aqui não teremos muito o que discutir, é apenas um diretório onde você irá abstrair tudo relacionado aos seus dados e lógica. Então teremos os diretórios `@types`, onde ficam as interfaces e tipos, caso esteja utilizando [TypeScript](https://www.treinaweb.com.br/blog/precisamos-falar-sobre-o-typescript "TypeScript"), [hooks](https://www.treinaweb.com.br/blog/react-conheca-o-poder-dos-hooks "hooks"), [context](https://reactjs.org/docs/context.html "context"), [reducers](https://reactjs.org/docs/hooks-reference.html#usereducer "reducers") e services que é o local onde você pode colocar funções que vão ser reutilizadas em toda aplicação. Vamos detalhar um pouco mais o que deve ter cada um desses diretórios. ```text data ├───@types ├───contexts ├───hooks ├───reduces └───services ``` ### Diretório services No diretório service, você pode criar funções que vão ser utilizadas em toda a aplicação como, por exemplo, funções para converter dados, objetos, funções contendo configuração de [APIs](https://www.treinaweb.com.br/blog/o-que-e-uma-api "APIs"), para fazer requisições [HTTP](https://www.treinaweb.com.br/blog/o-que-e-http-request-get-post-response-200-404 "HTTP"), validação de formulários, etc. ### Diretório hooks Neste diretório você pode colocar a lógica das telas e componentes. É importante notar que aqui você vai criar diretórios dentro de diretórios para poder identificar de onde é aquele hook, se é referente a uma página ou componente. ```text hooks ├───components │ └───inputs │ └───UserForm │ └───forms └───pages ├───cadastro └───diarias ``` Note que separamos bem a origem de cada hook, se ele está em `pages` ou faz parte de um componente. ### Diretório @types O diretório `@types`, de uma aplicação React, só é utilizado quando estamos trabalhando com TypeScript, visto que lá iremos criar os tipos de cada objeto e, também, interfaces ```text @types ├───3rd └───forms └───user ``` Note que aqui, também, podemos organizar cada tipo em outros diretórios. No diretório `3rd` iremos colocar arquivos com a extensão, `*.d.ts`, caso haja a necessidade, que são [arquivos de declaração](https://github.com/treinaweb/treinaweb-workshop-multistack-react "arquivos de declaração") de tipos. [ ![React - Despertando o Poder dos Hooks](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react.svg) Curso React - Despertando o Poder dos Hooks Conhecer o curso ](https://www.treinaweb.com.br/curso/react-despertando-o-poder-dos-hooks) ## Diretório ui Aqui vamos agrupar tudo relacionado a nossa interface do usuário. Também temos uma proposta de como você deve agrupar esses elementos internamente. Uma das maiores vantagens do React é o modo de como é fácil componentizar sua UI, portanto neste diretório você deve criar um diretório para cada página ou `pages`. Podemos adicionar outro diretório de partes de uma página, dessa forma sua página principal pode ser lida facilmente, pois é montada com vários pedaços de uma página. E, se você já adivinhou, pode fazer isso, também, no nível da UI, criando um diretório `components` que vão ser utilizados em mais de uma página da aplicação. Então dentro de UI teremos o diretório `components`, `partials` que são partes de uma página, `styles` e até `themes` que é algo relacionado a configuração de temas. ```text ui ├───components ├───partials ├───styles └───themes ``` ### Diretório components Neste diretório nós, também, teremos outros diretórios para melhor organizar os componentes, aqui iremos organizar por categorias, por exemplo, um componente de botão e texto faz parte da categoria de inputs, outro componente de avatar ou status faz parte da categoria de data-display. ```text components ├───data-display │ ├───DataList │ ├───JobInformation │ ├───Status ├───feedback │ ├───Dialog ├───inputs │ ├───RoundedButton │ ├───TextField │ └───UserForm │ └───forms ├───navigation │ ├───Link └───surfaces ├───Footer └───Header ``` Eu costumo utilizar essas categorias seguindo o padrão do [Material UI](https://mui.com/pt/ "Material UI"), mas você pode seguir qualquer outro modelo de categorias que mais lhe agrada. ### Partials Diferente dos componentes, aqui nós teremos partes de uma tela, por exemplo, uma tela com uma estrutura muito grande, com algumas dezenas de sessões, podemos dividir essas partes em componentes que, na verdade, são partes de uma tela. ```text partials ├───diarias ├───encontrar-diarista └───index ├───advantages ├───frequent-question └───presentation ``` ## Conclusão A estrutura de pastas e arquivos com React apresentada é uma estrutura que pode ser utilizada por qualquer um. Vai te ajudar a entender a importância de se ter uma arquitetura e, também, ajudar a começar a entender como funcionam outras arquiteturas mais complexas. Hospedei uma aplicação de referência que você pode encontrar [neste repositório no GitHub](https://github.com/arielsardinha/next-js-adote-um-pet "diretório."). Caso queira aprender mais sobre o React, saiba que aqui na [TreinaWeb](https://www.treinaweb.com.br/) nós temos a formação [Desenvolvedor React - Funcional](https://www.treinaweb.com.br/formacao/desenvolvedor-react-funcional) que possui **12h40 de vídeo** e um total de **55 exercícios**. Veja quais são os cursos que fazem parte desta formação: - React - Fundamentos - React - Dominando Componentes Funcionais - React - Despertando o Poder dos Hooks - React - Conhecendo o React Router - React - Estilização com Emotion (Styled Components) - [ #Arquitetura de Software ](https://www.treinaweb.com.br/blog/tag/arquitetura-de-software) - [ #react ](https://www.treinaweb.com.br/blog/tag/react) - [ #Arquitetura de Software React ](https://www.treinaweb.com.br/blog/tag/arquitetura-de-software-react) Autor ![Ariel Sardinha](//secure.gravatar.com/avatar/d0b89ee09026eb2b9e26f286c04eba03?d=mm) ## Ariel Sardinha Professor e desenvolvedor. Formando em engenharia de software e Computação - Licenciatura. É autor de cursos em diversos temas, como, desenvolvimento front-end, Flutter, JavaScript, React,js e Vue.js. Nas horas vagas adora estudar sobre tecnologia, filmes e brincar com a pequena Maria Eduarda. [arielsardinha](https://www.linkedin.com/in/ariel-sardinha/) [Todos os artigos](https://www.treinaweb.com.br/blog/autor/ariel-sardinha) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/Plop.js-Automatize-a-criação-de-arquivos-400x280.png) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 6 anos atrás ## [ Plop.js - Automatize a criação de arquivos ](https://www.treinaweb.com.br/blog/plop-js-automatize-a-criacao-de-arquivos) O Plop.js facilita a criação de arquivos em seus projetos, evitando que você tenha sempre que escrever código repetido para iniciar uma estrutura. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/24110903/O-QUE-E-REACT-400x280.jpg) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 3 anos atrás ## [ Criando aplicações React com Vite e TypeScript ](https://www.treinaweb.com.br/blog/criando-aplicacoes-react-com-vite-e-typescript) Neste artigo veremos como criar aplicações React com Vite, que permite desenvolvermos aplicações modernas com recursos como HMR, entre outros. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/NEST-JS-UPLOAD-ARQUIVOS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 4 anos atrás ## [ Como realizar upload de arquivos locais no NestJS ](https://www.treinaweb.com.br/blog/como-realizar-upload-de-arquivos-locais-no-nestjs) Neste artigo vamos aprender a utilizar o recurso de upload de arquivos locais com o NestJS utilizando a biblioteca Multer do Express. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Criando componentes no Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-criando-componentes-no-razor-components) Veja neste artigo como é a estrutura de um componente do Razor Componente e aprenda a criar um. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/01/01132725/PETAPOCO-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 9 anos atrás ## [ Utilizando o Micro ORM PetaPoco em uma aplicação ASP.NET Core ](https://www.treinaweb.com.br/blog/utilizando-o-micro-orm-petapoco-em-uma-aplicacao-asp-net-core) Aprenda a utilizar o Micro ORM PetaPoco em uma aplicação ASP.NET Core. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/03104651/PHP-PSR4-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ PSR-4 a recomendação de autoload do PHP ](https://www.treinaweb.com.br/blog/psr-4-a-recomendacao-de-autoload-do-php) Nesse artigo falaremos de umas das PSRs mais importantes da linguagem PHP, a PSR-4, responsável por recomendações de autoload na linguagem. Venha conferir!!! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/10155418/recipes-symfony-400x280.png) [ PHP ](https://www.treinaweb.com.br/blog/categoria/php) 7 anos atrás ## [ Como criar recipes do Symfony Flex e enviar para o repositório ](https://www.treinaweb.com.br/blog/como-criar-recipes-do-symfony-flex-e-enviar-para-o-repositorio) Aprenda a criar recipes do Symfony Flex personalizados para automatizar as configurações de bundles. Além disso, o post também mostra como enviar o recipe para o repositório e testar na prática. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/asp-net-conhecendo-as-minimal-api-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 4 anos atrás ## [ ASP.NET - Conhecendo a Minimal API ](https://www.treinaweb.com.br/blog/asp-net-conhecendo-as-minimal-api) Neste artigo vamos conhecer um dos recursos que foram adicionados no .NET 6/ASP.NET 6, que é um novo template de aplicações Web, a Minimal API. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java-400x280.png) [ Java ](https://www.treinaweb.com.br/blog/categoria/java) 6 anos atrás ## [ Introdução ao Maven, aprenda como criar e gerenciar projetos Java ](https://www.treinaweb.com.br/blog/introducao-ao-maven-aprenda-como-criar-e-gerenciar-projetos-java) Neste artigo veremos como instalar o Maven e como podemos utilizá-lo para nos auxiliar na criação e no gerenciamento de dependência de um projeto Java. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/08/NEST-JS-400x280.png) [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 5 anos atrás ## [ O que é NestJS? ](https://www.treinaweb.com.br/blog/o-que-e-nestjs) Vamos ver neste artigo uma breve descrição sobre o que é o NestJS e como criar uma aplicação base em minutos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/09/04112944/DJANGO-PROJETOS-PYCHARM-400x280.png) [ Python ](https://www.treinaweb.com.br/blog/categoria/python) 7 anos atrás ## [ Criando o primeiro projeto Django ](https://www.treinaweb.com.br/blog/criando-o-primeiro-projeto-django) Com o ambiente de desenvolvimento devidamente configurado, veremos neste artigo como criar nosso primeiro projeto com Django. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/organizando-css-400x280.png) [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 10 anos atrás ## [ ITCSS - Organizando melhor o CSS ](https://www.treinaweb.com.br/blog/itcss-organizando-melhor-o-css) Você já teve dificuldade com a organização e escalabilidade do seu CSS? Veja como a arquitetura ITCSS pode te ajudar. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **16h 35min 45s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58