How to structure React Js folders and files?

Question

I’m starting to learn React Js and I’m intending to create a website on it, but I was left with a question.

The React Js is the component base, right?

I have the App.js where I call my own components and it will show on the screen.

Let’s say I want to start doing Index of my website. Inside the folder src I create a folder called componentes.

Inside the folder componentes, crybaby umarquivo.js and umarquivo.css respectively to put the css of the arquivo.js

Thinking about creating components, I won’t do the same as I do a normal page with bootstrap just by creating index.php.

I would have to make the components, isn’t it?

Example: briefcase: src/componentes/header.js briefcase: src/componentes/header.css

In the header.js I would create the header of my website, and header.css I would create the css of my header, right?

My question would be this... how do I organize the components? For each "página" I would create a briefcase inside src/componentes/index And in that index folder, I would create the componentes of the same? Suppose I then want to create the page "contato", I would create src/componentes/contato And inside the contact folder, the components .js and .css?

Because I think if I don’t sort by folders, the files will get confused when the site is finished, thinking, of course, that the site would be great.

Going deeper into the question, my question is: How to structure the pastas and the archives .js and .css to be organized and easy to find, mainly for maintenance?

Answer 1

I particularly like to use the structure below. Separation components (truly reusable components at any point of application), pages (the pages), services (any external access), helpers (functions for date formatting, numbers, etc).

Inside each component folder, I leave index.js and Styles.css of the file in question:

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
...

Answer 2

In this case I believe you should study design Patterns, since understanding this is exactly what your doubt seeks.

I recommend you take a look at the Fractal model - A React application structure for infinite scale.

(Fractal - A React app Structure for Infinite Scale)

You can read about it in the article below. If you don’t know English, use google Translate.

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

Answer 3

React Js is the foundation of components, right?

Yes, according to the website itself: Component Based - Create encapsulated components that manage your own state and then combine them to create complex uis.

In header.js I would create the header of my site, and in header.css I would create the css of my header, right?

---

My question would be this... how do I organize the components? For each "page" I would create a folder within src/components/index And in that index folder, would I create the components of it? Suppose I then wanted to create the "contact" page, I would create src/components/contact and within the contact folder, the . js and . css components?

The organization of the components is kind of personal, it doesn’t have a fully established standard, but, I’m going to propose to you something that most at the moment do which is the following.

Create a folder within src by the name of components Then we go super we will have to create a top of your page, so do the following within components creates a folder Header (components\Header and Observer that the H is capitalized this is a default used when component) and within that folder a file index.js and for your specific css index.css and so on.

src
    /components
               /Header
               /Body
               /Footer

that would be the component part of an application. If you have a css either you matter within the Parent component or put in the folder public within the index.html

Because I think if I don’t sort by folders, the files will stay confused when the site is finished, thinking, of course, that the site would be great.

Yes the way to separate by components and organize in a logical way into folders will assist the maintenance part and as reported earlier this organization is one of the most used.