React Folder Structure Best Practices - For Large Projects

This is the folder structure pattern I follow whenever working on a big react application.

Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬

Tags:
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

#reactjs #coding

[frankthedsigner]

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!

[kovendanragupathi]

@PedroTech, I really like your content on React since you are bringing production grade best practices. Please keep posting like these type of content Bro.

[OgamerRato]

I really want to thank you. I have been watching your vids and learning a loot. Not only that, but I just release my first project for a company a couple of weeks ago and didn't like the final result in a lot of aspects.
Then a got into your channel and learned a loot, and it is making me a better programmer and helping me a loot at work.
For that, really thanks man

[hizokadarkwolf]

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.

[khursheedalam]

Loved it. I use the almost same folder structure. Few things I add in my project.
For every component I have subcomponents.ts file in which I made styling for particular components.
Create helpers.ts file for global helping functions.

[ricko]

You're killing it Pedro 🔥 keep it goin' 💯

[peladno]

I'm learing programming so I was looking for a video like this. Thank you a lot :), especially because I have only one folder and are a lot of files and is a bit confusing heheheh

[GabrielMartinez-ezue]

Y yo buscando este material! Finalmente! Thanks man

[marcus]

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

[oziati]

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

[malletdevoted]

Such a nice video, thanks for sharing.

[haidershahs]

Would you not use a separate features folder?
For example if you have a feature for creatingNotes, which you want to show on the dashboard page but also on the homepage.
Wouldn't it be easier to have features/ creatingNotes. And then you can import creatingNotes to any page which needs it?

[devkasunlakshitha]

What you using to mange state instead of Redux?

[sujikumarts]

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

[cbijay]

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

[rajarock]

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

[ademolaakindotuni]

This is awesome. I couldn't find the link to the GitHub repo in the description, do you mind sharing it here?

[louaiboumedienne]

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

[nivethan_me]

at 10:15 naming components as index.ts will cause confusion when you working with multiple components in vscode. all components title will says index.ts. how to overcome this issue?
i personally tried barrels on index.ts i write something like
export { default } from './Navbar';
then i create a new file called Navbar and write the component code there but this felt like a lot of work and lot of unnecessary files. any better idea?

[cdey]

very useful content, thank you. Just and off topic question though, how'd you make the background animation?