React Architecture: Small vs. Mid vs. Large App Folder Structure

Best practices of a clean and scalable React component architecture are different depending on project sizes such as large or small React app architectures. Folder structure of the React app with its components, Redux, React Context and etc. adds up to an advanced React architecture that may be hard to get. I'll try to explain the React architecture the best way I can even though every approach is subjective.
======⚡⚡⚡======
Consider supporting the channel by clicking the "Thanks" button ❤️
👉 Get a 20% discount on Brilliant.org (to learn Science, Technology, Engineering, and Math): brilliant.sjv.io/kjVO2z
======⚡⚡⚡======
🙌 Become my Patreon and get exclusive perks: / softdevdiaries
💼 Follow me on LinkedIn and drop me a message if you'd like: / gusgadirov
💻 Also, let's connect on GitHub: github.com/gusgad
🕒 Timestamps:
(0:00) React architecture overview
(0:36) Small-size React apps
(2:50) Mid-size React apps
(6:13) Large-size React apps
And don't forget to subscribe for more videos like this 😊

[@kamrant8915]

Interesting idea for large project. Thanks a lot

[@asdasddas100]

I needed this badly. Thank you for the insight

[@SoftwareDeveloperDiaries]

Glad to hear :)

[@rutikwankhade337]

This is the kind of stuff i am subbed for. Please do more advance react stuff like performance and optimization

[@SoftwareDeveloperDiaries]

Will do! Thanks for the feedback.

[@bevik12]

I might be not alone who struggles with this as a beginner. Big help this is. Thank you!

[@SoftwareDeveloperDiaries]

Glad you found it useful! 😉

[@aburaihan-py4vi]

Excellent!

[@adeel3797]

Thank you for this video. Subbed.

[@SoftwareDeveloperDiaries]

Thanks, appreciate the sub!

[@HochiHuynh]

Thank for your tutorial. Please make this video with react query

[@DreamStreet2012]

This is such a juicy content

[@nishantsethi6625]

Its very good. Can u make a video of faster loading site tips such as api is taking some to load or heavy content in the site? It can be included which library can be handled later on

[@SoftwareDeveloperDiaries]

I'll note it down! In the meantime I think this one could be interesting to you too: ruclips.net/video/7nm1pYuKAhY/видео.html

[@elpeeda42]

Is react render props still relevant?

[@RS-ReyanbiteGaming.C]

Folder structure & architecture of application both are same things?

[@SoftwareDeveloperDiaries]

I would say in theory the folder structure is a part of the application architecture. Depending on different architectural choices, the folder structure would look different for every case.

[@user-vc4zc8nt5e]

Make a video for Gitlab Merge conflicts.

[@umakantabehera1701]

can you share the github link for that all types of project structure?

[@SoftwareDeveloperDiaries]

Unfortunately I didn't save the code for that video, but I'm trying to always push the newer ones!

[@bangunny]

me personally would move ui folder from services to components folder

[@khoroshoigra8388]

sir can you make a vid for Atomic Structure for React ?

[@SoftwareDeveloperDiaries]

I'll put it on my list :)

[@khoroshoigra8388]

@@SoftwareDeveloperDiaries Thanks sir :)

[@vincenguyendev]

My team uses mono-repo for large front-end application

[@SoftwareDeveloperDiaries]

Cool. Are you using a specific monorepo solution like Turborepo or Nx?

[@vincenguyendev]

@@SoftwareDeveloperDiaries we use lerna :) work really well , we can break down application by different domain(components,app,router,etc)

[@SoftwareDeveloperDiaries]

@@vincenguyendev Ah nice :)

[@TiagoDark]

github repo?

[@m.x.]

Funny how React developers end up recognising that Angular encouraged architecture is the way to go from the very beginning. And it's not an Angular merit, but rather decades of industry experience. React always late.

[@MaximBotezatu]

folder tree can not define app architecture, what a lol