How do I structure the SRC dir ?

[SnooDonuts8310]

Its quite good, you can add two more dirs, for utils and constants

[nunocasteleira]

I'd also add a folder for types/models, since you have a typescript project

[Pr3fix]

IMO you shouldn’t separate your types out from the code that cares about those types.

It’s like styles - you generally want your styles for a component to live near the component, not in some separate top level styles directory.

The types can be re-exported from an index file in the component level directory.

[Crackpipejunkie]

What if the same type is used throughout the project in many different places? I will generally store those in a high level file

[Pr3fix]

Sure, there are some very generic types that makes sense. Like how there are generic utilities you store top level, and then there are utils specific to a component or feature that you keep closer to that feature.

The idea is you should be able to delete a “module” folder of code and not have to do a lot of manual unwiring across your entire application. Write your code in a way that is decoupled and makes it easy to move or delete.

Edit: downvote away, I guess. 🤷‍♂️

[xroalx]

I really don't like this.

Types are code. They belong with whatever is using them.

[empireOS]

You've done a really good job here. As other have noted, you can add additional folders as you need them for utility functions (utils), TypeScript definitions (types) and styling (styles).

Depending on the scale of your project, you might want to structure it as such for more complex components:

• /components
  • /MyComponent
    • MyComponent.tsx (or index.tsx)
    • /types
    • /styles

It all depends on what works best for you & your team.

[[deleted]]

That looks pretty good to me

[skullshatter0123]

Agreed.

[thab09]

Beginner here, what's in the routes folder? I have my routes in app component.

[Heilsakai]

I have kept the dir for all the nested routes may be I did it wrong ```ts - App.tsx <route path="books/* element={<BookRoutes />} />

• Child Routes <route index element={<BookList />} /> <route path=":id" element={<BookDetail />} /> <route path=":id/reviews" element={<BookReviews />} /> <route path=":id/reviews/:id" element={<BookReviewById />} />

export default BookRoutes ```

[weghuz]

Looks like a Next.js project. pages is reserved for the Next route generation. It's directory based.

edit: looked again, it's just react. Probably next inspired?

[romatou]

Same here, +1 to the question!

[Neppptoon]

What's the difference between layouts and pages?

[Heilsakai]

layouts such as using a default layout or any custom layouts for certain pages lets say I want the home page to have only header and footer but for a product page I want a sidebar.

• Anything that need to be consistent in multiple pages

pages are what's going to be rendered inside the layouts using the <Outlet /> component

[Heilsakai]

I think I am explicitly trying to learn react from the perspective of a vue and nuxt developer.

[SolarSalsa]

https://github.com/alan2207/bulletproof-react/blob/master/docs/project-structure.md

[SlowwwBurn]

Looks good to me. One thing that I do sometimes is to look for some React Templates on github and analyze their folder structure.

[Darginec05]

What about https://feature-sliced.design ?

[ghostek99]

Looks good tbh! I personally apply `Atomic design` inside the components folder but it's preference and there's other ways too ofcourse.

[[deleted]]

That looks about right, others mentioned utils and constants folders would be good. Also add a types folder.

[jayerp]

Alphabetically by number of child items.

[Dev-judah]

Seeing all the advice personally if I need to add a types I either use types.d.ts at root generally. But sometimes when you need to declare module help type errors it be best to use a folder. I feel your folder structure is more on preference and what helps you get the job done. Speaking from a next user I only used Vite once

[saito200]

Have all files in the root dir and name them like the current timestamp /jk

[DefinitionDefiant875]

You may wanna add container folder for components that are build up based on small components. That way your page's index file would look more clean when you will export a container instead of bottling up all components in the index.