1

Estou começando aprender React Js e estou com a intenção de criar um site nele, porém fiquei com uma dúvida.

O React Js é a base de componentes, certo?

Eu tenho o App.js onde eu chamo os meus componentes e ele irá mostrar na tela.

Vamos supor que quero começar a fazer a Index do meu site. Dentro da pasta src eu crio uma pasta chamada componentes.

Dentro da pasta componentes, crio umarquivo.js e umarquivo.css respectivamente para colocar o css do arquivo.js

Pensando pelo lado de criar componentes, eu não farei igual faço uma página normal com bootstrap apenas criando index.php.

Eu teria que fazer os componentes, não é?

Exemplo: pasta: src/componentes/header.js pasta: src/componentes/header.css

No header.js eu criaria a header do meu site, e no header.css eu criaria o css da minha header, certo?

A minha pergunta seria essa... Como eu faço para organizar os componentes? Para cada "página" eu criaria uma pasta dentro de src/componentes/index E nessa pasta index, eu criaria os componentes da mesma? Suponhamos que eu queira então criar a página "contato", eu criaria src/componentes/contato E dentro da pasta contato, os componentes .js e .css?

Pois penso que se eu não separar por pastas, os arquivos ficarão confusos quando o site estiver finalizado, pensando, é claro, que o site seria grande.

Me aprofundando mais na pergunta, o meu questionamento é: Como estruturar as pastas e os arquivos .js e .css para que estejam organizados e fáceis de serem encontrados, principalmente para manutenção?

3 Respostas 3

1

Particularmente eu gosto de utilizar a estrutura abaixo. Separo components (componentes realmente reutilizáveis em qualquer ponto da aplicação), pages (as páginas), services (qualquer acesso externo), helpers (funções para formatação de data, números, etc).

Dentro de cada pasta de componente, deixo o index.js e o styles.css do arquivo em questão:

root
├── src
│   ├── components
│   │   ├── Header
│   │   ├── ├── index.js
│   │   ├── ├── styles.css
│   │   ├── Card
│   │   ├── ├── index.js
│   │   ├── ├── styles.css
...
...
│   ├── pages
│   │   ├── Register
│   │   ├── ├── index.js
│   │   ├── ├── styles.css
│   │   ├── Profile
│   │   ├── ├── index.js
│   │   ├── ├── styles.css
...
...
│   ├── services
│   │   ├── api.js
│   │   ├── ibge.js
...
│   ├── helpers
│   │   ├── masks.js
│   │   ├── dateFormatter.js
...
1

O React Js é a base de componentes, certo?

Sim, segundo o próprio site: Baseado em componentes - Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs complexas.

No header.js eu criaria a header do meu site, e no header.css eu criaria o css da minha header, certo?


A minha pergunta seria essa... Como eu faço para organizar os componentes? Para cada "página" eu criaria uma pasta dentro de src/componentes/index E nessa pasta index, eu criaria os componentes da mesma? Suponhamos que eu queira então criar a página "contato", eu criaria src/componentes/contato E dentro da pasta contato, os componentes .js e .css?

A organização dos componentes é meio que pessoal, não tem um padrão totalmente estabelecido, mas, vou propor a você algo que a maioria no momento faz que é o seguinte.

Crie uma pasta dentro do src com o nome de components ai vamos super que vai ter que criar um top da sua página, então, faz o seguinte dentro de components cria uma pasta Header (components\Header e observer que o H é maiúsculo isso é um padrão utilizado quando for componente) e dentro dessa pasta um arquivo index.js e para o seu css especifico index.css e assim por diante.

src
    /components
               /Header
               /Body
               /Footer

isso seria a parte do componentes de uma aplicação. Se você tiver um css global ou você importa dentro do componente Pai ou coloque na pasta public dentro do index.html

Pois penso que se eu não separar por pastas, os arquivos ficarão confusos quando o site estiver finalizado, pensando, é claro, que o site seria grande.

Sim a forma de separar por componentes e organizar de uma maneira lógica em pastas vai auxiliar a parte da manutenção e como relatado anteriormente essa organização é um das mais utilizadas.

1

Nesse caso acredito que você deveria estudar design patterns, já que entender isso é exatamente o que sua dúvida busca.

Recomendo você dá uma olhada no modelo Fractal - Uma estrutura de aplicativos React para escala infinita.

(Fractal — A react app structure for infinite scale)

Você pode ler sobre no artigo abaixo. Se não souber inglês, use o google translate.

https://hackernoon.com/fractal-a-react-app-structure-for-infinite-scale-4dab943092af

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .