@sirajsharma
Posted
Hello,
There is no specific way to organize a React project since React is a library, not a framework. Therefore, developers organize their projects based on what they think is best suited for their development environment. The React project structure changes as the codebase scales. Even the React docs state that there is no opinionated React structure. You can read more about it here. Probably every React developer goes through this dilemma.
Here are some insightful links for structuring your project:
- React Project Structure Best Practices for Scalable Application
- React Project Structure: A Guide to Best Practices
- React folder structure for enterprise-level applications
- 20 Essential Parts Of Any Large Scale React App
For Material-UI (MUI), you can use styled-component, emotion, or styled-components. Personally, I prefer to use MUI in projects that only require Material Design. In custom projects, it can create more trouble than help in development.
Marked as helpful
@dawkey95
Posted
@sirajsharma Thanks for the feedback and good points about the react folder structure. I guess as long as it makes logical sense and not everything dumped into one :D
May I ask what you mean by "I prefer to use MUI in projects that only require Material Design"?
@sirajsharma
Posted
@dawkey95 The Material Design system was developed by Google, and the MUI library was created to work with this design system. If your design follows the rules of the Material Design system, you won't need to do much styling. However, if you want to incorporate custom designs using MUI, you'll need to make many changes to your code, such as adding inline CSS, creating custom UI components, or using styled-components. At this point, it may not make sense to use MUI in your code because you'll end up writing everything from scratch and cluttering your code.
Marked as helpful
@dawkey95
Posted
@sirajsharma Awesome that makes sense. Thank you for the feedback
