Thread by @marcobrunodev

Arquitetura de pastas para projetos #React

Minha base são as arquiteturas: #ITCSS e #RSCSS.

Visão geral do projeto e na thread mostro como organizo a pasta 📂𝙨𝙧𝙘

📂.𝚐𝚒𝚝𝚑𝚞𝚋
📂.𝚟𝚜𝚌𝚘𝚍𝚎
📂𝚊𝚙𝚒
📂𝚙𝚞𝚋𝚕𝚒𝚌
📂𝙨𝙧𝙘📌
∟📂🧵

📌Onde está
🧵Próximo passo

📂𝙨𝙧𝙘📌
∟📂𝚊𝚜𝚜𝚎𝚝𝚜🧵
∟📂𝙶𝚕𝚘𝚋𝚊𝚕𝚂𝚝𝚢𝚕𝚎𝚜
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜
∟📂𝚙𝚊𝚐𝚎𝚜
∟📂𝚜𝚎𝚛𝚟𝚒𝚌𝚎𝚜
∟📄𝚖𝚊𝚒𝚗.𝚓𝚜𝚡
∟📄𝚛𝚘𝚞𝚝𝚎𝚛.𝚓𝚜𝚡

📂𝙨𝙧𝙘
∟📂𝚊𝚜𝚜𝚎𝚝𝚜📌
∟📂𝚏𝚘𝚗𝚝𝚜
∟📂𝚒𝚖𝚊𝚐𝚎𝚜
∟📂𝚒𝚌𝚘𝚗𝚜
∟📂𝙶𝚕𝚘𝚋𝚊𝚕𝚂𝚝𝚢𝚕𝚎𝚜🧵
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜
∟📂𝚙𝚊𝚐𝚎𝚜
∟📂𝚜𝚎𝚛𝚟𝚒𝚌𝚎𝚜
∟📄𝚖𝚊𝚒𝚗.𝚓𝚜𝚡
∟📄𝚛𝚘𝚞𝚝𝚎𝚛.𝚓𝚜𝚡

📂𝙨𝙧𝙘
∟📂𝙶𝚕𝚘𝚋𝚊𝚕𝚂𝚝𝚢𝚕𝚎𝚜📌
∟📂𝚂𝚎𝚝𝚝𝚒𝚗𝚐𝚜
∟📂𝙶𝚎𝚗𝚎𝚛𝚒𝚌
∟📂𝙴𝚕𝚎𝚖𝚎𝚗𝚝𝚜
∟📂𝚝𝚘𝚘𝚕𝚜
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜𝚡
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜🧵

Pra saber mais sobre a pasta GlobalStyles procure por ITCSS

📂𝙨𝙧𝙘
∟📂𝚌𝚘𝚖𝚙𝚘𝚗𝚎𝚗𝚝𝚜
∟📂𝙱𝚞𝚝𝚝𝚘𝚗📌
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜🧵
∟📄𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚘𝚛𝚒𝚎𝚜.𝚓𝚜
∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗

∟📂𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜📌
∟📄𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚘𝚛𝚒𝚎𝚜.𝚓𝚜🧵

Quando um componente é simples e só precisamos de um #CSS para representar ele, uso a 𝙞𝙣𝙙𝙚𝙭.𝙟𝙨 com #styledComponents. Um código de exemplo:

∟📂𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜
∟📄𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚘𝚛𝚒𝚎𝚜.𝚓𝚜📌
∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗🧵

O 𝘽𝙪𝙩𝙩𝙤𝙣.𝙨𝙩𝙤𝙧𝙞𝙚𝙨.𝙟𝙨 é um arquivo de documentação do componente. Uso o @storybookjs, o que você usa?

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗 🧵
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚘𝚛𝚒𝚎𝚜.𝚓𝚜𝚡
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜𝚡
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚢𝚕𝚎𝚜.𝚓𝚜
∟📄𝚞𝚜𝚎𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜𝚡

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗📌
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜𝚡🧵

𝙇𝙤𝙜𝙤𝙪𝙩𝘽𝙪𝙩𝙩𝙤𝙣 é um componente mais complexo que tem a responsabilidade de realizar o logout quando o usuário clicar nele, sendo assim não conseguimos resolver ele apenas com CSS

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜𝚡📌
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚢𝚕𝚎𝚜.𝚓𝚜🧵

𝙇𝙤𝙜𝙤𝙪𝙩𝘽𝙪𝙩𝙩𝙤𝙣.𝙟𝙨𝙭 é a camada do componente responsável pela estrutura (#html), ele pode receber props mas isso nem sempre é necessário

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚜𝚝𝚢𝚕𝚎𝚜.𝚓𝚜📌
∟📄𝚞𝚜𝚎𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜🧵

𝘽𝙪𝙩𝙩𝙤𝙣.𝙨𝙩𝙮𝙡𝙚𝙨.𝙟𝙨 é responsável por cuidar da camada visual (#CSS), a seguir um código de exemplo:

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝚞𝚜𝚎𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜📌
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜𝚡🧵

𝙪𝙨𝙚𝙇𝙤𝙜𝙤𝙪𝙩𝘽𝙪𝙩𝙩𝙤𝙣.𝙟𝙨𝙭 é responsável pela regra de negócio, ou seja o código responsável para realizar o logout quando o usuário clicar no botão:

∟📂𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗
∟📄𝚞𝚜𝚎𝙻𝚘𝚐𝚘𝚞𝚝𝙱𝚞𝚝𝚝𝚘𝚗.𝚓𝚜
∟📄𝚒𝚗𝚍𝚎𝚡.𝚓𝚜𝚡📌
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜🧵

𝙞𝙣𝙙𝙚𝙭.𝙟𝙨𝙭 é responsável por juntar a regra de negócio (𝙪𝙨𝙚𝙇𝙤𝙜𝙤𝙪𝙩𝘽𝙪𝙩𝙩𝙤𝙣.𝙟𝙨) com a estrutura (𝙇𝙤𝙜𝙤𝙪𝙩𝘽𝙪𝙩𝙩𝙤𝙣.𝙟𝙨𝙭):

📂𝙨𝙧𝙘
∟📂𝚕𝚊𝚢𝚘𝚞𝚝𝚜📌🧵

𝙡𝙖𝙮𝙤𝙪𝙩𝙨 são componentes com objetivo único, você pode reutiliza-los mas eles têm caracteristicas muito especificas. Por exemplo:

- HeaderSite

Não conseguimos reutilizar o HeaderSite da mesma forma que podemos reutilizar um Button
🧵

Dentro da pasta 𝙡𝙖𝙮𝙤𝙪𝙩𝙨 temos a mesma estrutura que adotamos para o componente LogoutButton

Não vou entrar nos detalhes das outras pastas e arquivos porque é uma abordagem comum em projetos #FrontEnd com diferentes frameworks

🧵

Ah! Se sentiu falta da camada de testes, foi de propósito porque esse tema vai além da arquitetura de pastas e merece uma thread única para ser apresentada e discutida.

🧵

O objetivo dessa thread é mostrar como faço a arquitetura de pastas de um projeto React, não expliquei detalhes de como o framework funciona.

Se tiver qualquer dúvida, critica e sugestões não deixe de mandar, isso não é uma bala de prata e não quero ser o dono da verdade.