Structuring react project

Question

im newbie in react and im having a hard time trying to organise my project structure. Right now im puting everything into my components folder but since its large website that im creating, it can become very confusing to navigate. What is the best practice to organise components? Lets say i have 2 subpages homepage and about us. In each of them i have 2 containers (sections) with 2 components each. So it would look smth like that:

Homepage - > Section A [component A, component B] | Section B [component C, component A] AboutUs -> Section New [component X, component Y] | Section Old [component Z, component A]

How would u create your folders for something like that?

Im putting everything into components folder so its look like long list: -Hompage -AboutUs -Sections A -Component A

... and so on.

Answer 1

It can be frustrating when you are just starting out trying to find a good folder structure and having everyone tell you to just do what works best for you. You may not have enough experience to know what works best for you!

There are 2 main ways I have organized my projects and it has always depended on what my team has preferred.

The first way is not my personal favorite:

Option1: Single Folder for Component + Test, notice we keep the very simple layout components in their own grouped folder. Sometimes there can also be a 'shared' folder for widely used components.

src/
├─ components/
│  ├─ layout/
│  │  ├─ header.jsx
│  │  ├─ footer.jsx
│  │  ├─ page.jsx/
|  |  |
│  ├─ hero-dispay/
│  │  ├─ HeroDisplay.jsx
│  │  ├─ HeroDisplay.test.jsx
│  ├─ login-form/
│  │  ├─ LoginForm.jsx
│  │  ├─ LoginForm.test.jsx
│  ├─ home-page/
│  │  ├─ HomePage.jsx
│  ├─ landing-page/
│  │  ├─ LandingPage.jsx
├─ App.jsx

Option 2: Separation of Concerns Here, we organize our components by where in the app they go. This works best for highly paginated apps. If I notice that I use something between two 'page' components, then I graduate it to its own folder in the 'components' folder. Again, I have a shared folder for very simple reusued components. Don't be afraid to use sub-folders under the parent folders.

src/
├─ components/
│  ├─ layout/
│  │  ├─ header.jsx
│  │  ├─ footer.jsx
│  │  ├─ page.jsx/
│  ├─ home-page/
│  │  ├─ HeroDisplay.tsx
│  │  ├─ HeroDisplay.test.tsx
│  │  ├─ HomePage.tsx
│  ├─ landing-page/
│  │  ├─ LoginForm.tsx
│  │  ├─ LoginForm.test.tx
│  │  ├─ LandingPage.jsx
│  ├─ shared/
│  │  ├─ Avatar.tsx
│  │  ├─ NotificationBar.tsx
├─ App.jsx

I will attach a picture of a recent small project I did that was a web-app for filtering job applications. Of course there will be people that disagree with my methods (and If I were to restart the app I may organize things differently). The important part is to not spend too long thinking about it. Just pick a pattern, and stick with it for the project. You will learn what you do and don't like as you go and can re try when you start a fresh project!

Best of Luck!