So I’ve been working with ReactJS quite a lot recently and have learnt an awful lot, I’m gonna be working on TDDing it with enzyme later on but I just wanna see what’s possible in terms of designing a good look for it, and I’ve recently just come across two packages that could prove crucial to help me with my task Material UI and React-Bootstrap. Without React I am a huge fan of Bootstrap it is by far the easiest way to quickly style a good looking responsive webpage that can be customised according to your taste, however when react enters the equation then, for me personally, Material UI becomes my tool of choice.
There are a number of reasons for this, firstly it uses Google’s material design initiative which is a minimalist beauty on it’s own, it’s been used to create some of the best looking apps for Google in recent memory especially when thinking back to when their designs weren’t so clean. The minimalistic nature of material design makes the applications you create very appealing to users because they are very easy on the eye and allow the passing of information in a clear and crisp manner. My fascination with material design may, however, just be due to my long term affiliation with Android phones and how much more I’ve been exposed to applications designed in that manner so I decided to test my thoughts by creating and styling a project with something else I’ve had a lot of exposure to, Bootstrap.
When I used React-Bootstrap I found it very quick and easy to use as I was used to the class names I was able to accurately determine what certain components would like and the way that they would behave. The grid system which is bootstraps crowning achievement also makes it a lot easier to plot your components and to understand where they’ll sit on your application. The names of the components is also very much easier to get used to as it seems to use the same names as the usual react components with capital letters for example table is simply Table, that sounds easy enough. My biggest issue was however compared to Material UI I didn’t enjoy using React-Bootstrap as much and my app suffered for this and looked much less professional although that may be due to the way the packages are designed to be used. Material UI is all set up that you can just put your app with the right components, add a few colours, and it’s done which a lot more restrictive on what exactly you can make for example I struggled to develop a footer without a component for it and using the App Bar seemed a bit too much. React-Bootstrap however is much more customisable and liberating if you feel like putting in work to customise and fully personalise your app with your own zany ideas you are free to do so without walking all over the principles and beliefs it was built on whereas Material UI has very defined principles that make this hard.
Those principle and beliefs may just why I love Material UI so much though.
All in all both packages have their benefits but for the sake of my own development I will more likely focus more on Material UI as it is something I haven’t used a lot in the past and it could be very helpful for on my path to eventually making universal mobile applications with ReactNative.
If you check out the project I did for these two it’s available here: