Styling React: Material UI vs Bootstrap

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.
uynp5qi3
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:

Kendrick Lamar – Drama

King Kenny is back!

Going from the strength of the The Heart Pt. 4 to humble to this Drama album, Kendrick is on a roll reminding us of just what he can do with his lyrical aerobatics. He doesn’t approach this one in an overly technical manor but somehow manages to channel his emotion a lot better to create an intense but deeply enjoyable experience.

I’m a lot more into the aesthetics of the back over the front but thats my own tastes, I know the artist had a loaded message behind it

LOYALTY with Rihanna is one hell of a gem, Rihanna’s flow is kinda sick she might be completing for best verse on the album, hey. The track with U2 also doesn’t suck which was a huge fear of mine ever since the tracklist was released but they pulled it off, King Kenny reigns again.

Key Tracks: ELEMENT. LOYALTY. DUCKWORTH.

Software Development

During the last 3 months I decided to up my software development game and attend Makers Academy and my goodness that was one of the greatest experiences of my life. I was able to learn so much in those 3 months and met so many interesting new people that I hoped it would never end, but all good things come to an end and here I am wandering in the wasteland of the real world having learnt a lot but with oh so much more to learn.
Some of the technologies I used at Makers Academy:

Ruby

Ruby

Rails

Rails

NodeJS

NodeJS

MongoDB

MongoDB

HTML5, CSS3, JavaScript

HTML5, CSS3, JavaScript

After graduation I very quickly realised that Makers Academy was only one of the first steps in my journey to become an established and professional software developer and now that it is over it is time for me to take my next step continuing to learn better was to develop good software and hopefully gain some experience at a company where I can create projects that will change people’s lives for the better. This week I decided to tackle some work on ReactJS one of the current trendy JavaScript frameworks which a lot of people love. I first heard about it from a few friends at Makers Academy but never got the opportunity to fully immerse myself in it but now time is all I have, well and a drive to find meaningful work but that is for a different blog post.

To learn ReactJS I took on a tutorial from hashnode.com, on which sadly the resources are outdated so I had to work to figure out what to do essentially translating information from my own resources to accomplish what they asked.

ReactJS is hard compared to a lot of other frameworks I’ve used, the creation of elements as components adds a very complex layer on top of the NodeJS+ Express back end however as I moved further through the challenges I began to see the benefits involved in the use of React the way it makes page loading faster through the use of components, the way you can manipulate the components before they’re rendered and mounted onto the DOM and just the pure fluidity of it when using JavaScript to manipulate the front end. The sheer difficulty I’ve run into learning React however has given me a spark that I was missing in my life before Makers Academy, I believe Makers Academy has given me a drive to just keep continuously learning new things and an efficient and effective way to learn and I hope to keep these qualities with me wherever my journey takes me next.

You can checkout some of my projects on: Github: https://github.com/Taziva

Portfolio: http://codepen.io/SHOIII/pen/PzWwpg