Design comparison
Solution retrospective
As I am starting my journey in web development and have some basic HTML, CSS, and JS behind me I am wanting to learn react with material UI especially since my main goal is to one day work as a MERN developer.
What are some best practices for organizing your react folder structure when you have components, themes, and assets?
Any comments on ways to better utilize MUI, especially in regards to styling? In vanilla css you have a .css file where you do all the styling but with MUI it seems very much inline.
Appreciate the feedback
Community feedback
- @sirajsharmaPosted over 1 year ago
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 helpful1@dawkey95Posted over 1 year ago@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"?
0@sirajsharmaPosted over 1 year ago@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 helpful1@dawkey95Posted over 1 year ago@sirajsharma Awesome that makes sense. Thank you for the feedback
1
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord