React Folder Structure Best Practices - For Large Projects

How to get the images properly, without importing it individually

And how to get absolute path of any file

I recommend eslint-plugin-project-structure for validating folder structure and file naming/file extension

What do you use instead of Redux then?

Personally I find it confusing to have multiple index.tsx files open and being unable to tell at a glance which components they are associated with. I do see how it gives the code a nice clean feel, though.

thanks bro

love the structure! can you please share the github repo name?

Pedro, onde está seu linkedin? está retornando erro na pagina pelo link na descrição

do big companies like facebook use this pattern and what am i supposed to do with react routing?

My rule of thumb is the longer and more descriptive the file name, the better. For files that export React components, I use PascalCase. For everything else, I use dash-case.

Not it

great

Thankyou..

@PedroTech, u said ur not using redux that much anymore, so what are u using as a state management solution?

Thanks for the video.. Didn't find the link to the repository on github though, also checked on github, haven't seen it, maybe it has a different name?

Thanks for the tips. The naming of files is always controversial, but organization is the most critical aspect. Insufficient naming and bad folder organization can be painful for the next developer working on a project... I learned that I had to rename and split the code into different files and folders in Angular. I will try this way, as I am just getting started on React.

this was really the best Structure i have seen , could you please share it with us on gitub

pls provide this project github repo.

Where would you like to put layout inside setup folder or common folder ?

Such a nice video, thanks for sharing.

Hi PedroTech, I want to thank you for sharing this content to us. I'm wondering what's inside the common folder. You skipped it and you never went back on it.

Hi from Sweden 🇸🇪 😊 Love your videos and how you think in react, thanks for sharing!

Nice tutorial Pedro, I really liked it. I was just wondering if checking git/diff results involving component files, wouldn't be a bit harder in some situations or another as they are all named as 'index'. Anyway, thanks for sharing your knowledge man

@PedroTech you missed the common folder, haven’t you?

great ! which font you are using it's look pretty kindly let me know also with theme name.

Can we get the git hub location for a sample project with this directory structure , redux & graphql?

That is definitely not a folder structure for large projects. Maybe for medium ones

I appreciate you making this video, as folder structure, granted, has caused me to pull my hair as our app is scaling. However, I do want to point out that there are some hooks that can be used globally and shouldn't be grouped under a specific page, is it ideal to create a "hooks" folder in the "src" parent folder?

I can't joint your discord channel via the above link ,can u please resend me the lastest link

yeah i prefer the absolute path in importing.And i notice u did not mention about reusable components like buttons,breadcrump,loader etc .For i do have a customised folder for reusable components

i dont see an index.ts at your pages level. How do you combine these components inside your pages

So, for each page you have a <<components>> folder. Where do you put your layout component like <Footer.ts>? What about a button component that is gonna be used in different pages? You duplicate them everywhere?

wont the test failure stack trace say index.test.ts and be confusing?

could you recommend some great extensions, for instance the way your files/folders have great icons. I cam from webstorm and looking for similar functionality

thank you for your video. I'm always enjoying your video
and I have a question what's "common" folders for? and also models.ts in component folder?

shit... I love you. you always give me what I want

Isn't having one folder called "images" and one "svg" pretty ugly? Why not "png", "jpg", "svg" or "raster-images" and "vector-images". Or do you also have svg files in the images folder?

I don't understand what you do when the path to the file is "../../". Do you use jsConfig to put the path? please answer me

where is your index.tsx for each page

What you using to mange state instead of Redux?

You said that you don’t use redux that much today. What state manager do you use?

What if there is a component which shared by different pages in the app ?

GL

Wow, great video! I always find myself lost when having to setup a new project the correct way and I've watched many of your older folder structure videos in the past. Though, as my project scales it always gets messy but this is an awesome approach of doing it right from the start. Thanks for your updated video, love your content! keep it up!

Thanks a lot Pedro ! What do you put in the common folder ?

I would like a video on state management of react. What to use for enterprise grade applications? Thanks.

I am familiar with Angular and just can't get head over the mess of a framework react is.

Just use next js, it is structured

How do you do if you have posts and comments on the same page?