MUI Templates
Getting started with a new framework is sometimes difficult. When working framework upgrades, it’s easier to test through an online editor like CodeSandBox. In the process I like to make it easier for others by providing templates showing off new features. These make for easy to copy projects, avoiding boilerplates. These are Redux, React, and MUI Templates. Now let me share these templates with you, making it really easy to jump in yourself!
MUI Templates
One of my favorites has been my MUI Theme Template for MUI v5. This is mostly due to how much the theme controls the styling of the entire project. If you haven’t had a chance to use MUI v5 yet, this is the perfect way to get a quick showcase of what can be accomplished. It also shows how you can style the majority of your app through the theme alone. If you are just starting with MUI v5, be sure to check out my article on MUI v5 Themes, which covers these styling features in detail.
Material-UI Template
If you still want see how to use Material-UI v4, the original Material-UI template shows you the basics of Material-UI, and using the makeStyles hook. I’ll admit, this one isn’t even close to as feature-rich as the MUI v5 template. It was my first template, and was simply made to make it easy to create a new test bed with Material-UI. If you want to test a v4 to v5 migration, this could be a good test bed. If you haven’t read it already, I go over additional MUI transition practices using MUI v5 with Emotion.
Redux Toolkit
As someone that has used Redux since it was first introduced, getting use to Redux Toolkit (aka RTK) was incredibly different. Knowing this was the case, a RTK template had to be made. Learning how to use the much more compact, and hook-based library is drastically different from its original framework/library. In addition to Redux Toolkit, this template also uses a MUI v5 theme to style the app.
That’s it for now, but I hope you find these template helpful. If you have suggestions, or features you would like to see added, please comment below. Happy coding!
No Comments