React with MUI

As a part of phase-2 in the Flatiron School's Software Engineering bootcamp, we expanded our knowledge of JavaScript by learning how to use the popular JS library called React. At first I struggled a lot with react but as the week progressed, I felt more comfortable with how simple React makes JavaScript. One of the most fun learning aspect was teaching myself Material UI which is a comprehensive library of UI tools that developers can use for their web applications.

MUI does a great job of limiting how much CSS a developer needs when developing a web application. With most components using MUI we can add styling straight within the component code and most of the work just requires using separate code than the usual JSX we become accustomed to.

Regular JSX:

MUI:

As you can see with the two screenshots above, we implement component UI's from MUI and add our own styling for size, color, etc. MUI has a long list of possible UI tools that can help make any web application more appealing for both the developer and then end user.

A very important note to mention about using MUI is that when you include all your tools within your application, it will error out until you run the traditional "npm install" within the projects terminal. This will tell your application that you need to download the necessary modules in order to use the MUI tools you have written out.

My project partner and I decided to take full advantage of the tools MUI has at its disposal for our phase-2 project. Instead of having a long list of CSS styling for each component, we were able to import tools and make our application more professional looking. This was a very interesting learning experience given that we had just spent the last week learning React and now we decided to go above and beyond and try and teach ourselves MUI within the 4 days we had to create our project. It was a hurdle but at the end of the day, learning MUI has made React much more interesting to me than it was on day 1.