React & Material UI #27: How to learn Material UI & Frequently Asked Questions

hey everyone today's video we're going to be doing something a bit different i wanted to take some time to step back from the material ui tutorials on actual components and make a video um addressing some of the most popular questions i get about my toy ui on my channel as well as in my opinion what the best way for you to learn material ui is if you find value in this video please consider subscribing leaving a comment liking i literally live off of your guys's comments um i try to read every single one of them to get suggestions ideas um and i really appreciate all the love and feedback that you guys are giving me so thank you so much for all that now the first thing that i get the most is a lot of people that are trying to learn material eye for either two different reasons and they want to know the best way to go about it the first reason is you have been given a project and you have to use material ui for it whether it's for school or for work and the second reason is you just want to become a better programmer and you heard that material ui is great for learning with react and you want to get into it now in both of these situations um there are a couple different things you can do but if you are in the camp where you are just trying to sort of learn material from scratch here is what i would recommend for you guys first if you google matilda ui different examples and something like websites made with material ui you can see that there are a ton of different websites that you can sort of emulate and see that are made with it for example on matilda ui they have a showcase and a lot of these showcases are sort of just uh sites that are custom built but a lot of them are real sites for example trade mba if we go ahead and click on that you can see that this is a real site people visit this site um it has a bunch of different information on it and what i would try to do is i would try to pick a page um because obviously you can't remake the whole entire site unless you really wanted to and you had a lot of time in your hands but pick one of the pages and in your mind try to visually sort of understand what components we have here so for example we can clearly see this would be an app bar and a toolbar component to create this header this is just a drop down with menu we can see here here's another menu they have night mode which i've explained in one of my videos how to add dark mode to your website we can scroll down we can see these are pretty easy examples of cards and you can see everything's sort of in a grid format so i would highly recommend just going to one of these sites you can even go to for example uh some of the beta ui templates that they have online uh for example the blog template and try to just recreate this if not in your head um by mapping out the components uh mentally then i would even recommend trying to build it um from scratch and try to make it look as close as possible and the cool thing about the templates is that once you have built your version you can then download and look at the source code uh for the version that you copied so for example this blog and you can see how they split up their components um and how they made it and it's worth noting that not all of these are sort of best practice on how to create these templates um not all the code you're going to see here is best practice and you should copy to a t but it's still extremely good practice now the next thing you should pay attention to if you are someone that's building this for work or you already have a project in mind that you want to do is that once you sort of map out um the sort of mental aspect of your site so for example i did this in one of my other sites but what i'll do is i'll literally break the page down um in paint or something like that i'll i'll show everything i want um on the page and how i want the page to look um and then i will literally have like um what i'll do is i'll go through the entire site and i'll break down the components so for example if i have a header if i have some cards if i had like a section or a container with a typography header and maybe some brief typography you should definitely break the site down that you want to build just like that and go through the material ui documentation and sort of just get a feel for all the components they don't have too many components so you can get through it uh pretty briefly and pretty fast you can just go from component to components sort of understanding what each component is and once you have a good idea of that you can mentally build a website in your head and once you have the mental build of the website in your head it's really easy to translate that into code if you have a bit of experience and if you don't it's a perfect time to build experience another thing i want to talk about while we're here looking at the components is a lot of people um before i started the components tutorials were very confused about grid and even after i made my grid tutorials i still get some questions about it and the majority of the questions comes down to essentially knowing how flexbox works if you're going to be learning material i highly recommend doing a quick 30 minute tutorial on uh how flexbox which is just general css a library for css that was made a long time ago that um is sort of built into a lot of different ui libraries works and the way i learned um is from a site called flexbox froggy so if you just google flexbox froggy you'll see this is it and it's literally um a 24 level game where they have this really nice visual explanation of how flexbox works i highly recommend this for anyone starting material ui even before you get started even if you're new to react or anything like that this is pure css understanding and it'll really help you understand um how grid works uh under the hood um and which in turn really helps when you're sort of designing how you want your sites to work now another question i want to address from a lot of comments i get on um and i'll just even pull up my first video here if you scroll down you can see there are a lot of people that are sort of asking for one big project that uses the best practices and that uses a fake or any random api um i also get a lot of suggestions on doing a big like three hour video on creating an entire react application that uses material ui that starts from you know the create react app all the way to implementing material ui all the way to adding redux redux saga creating another project in express for the back end hooking them up adding a database and then deploying the whole thing and i do think uh that video would add a lot of value but um a video like that not only is it i guess really time intensive and i'm sort of working on other stuff at the moment um i tried to do something similar to that in the pokedex us tutorials if you want to see how to create a website sort of from scratch implement it with a very basic api um this is like a really great starter project in my opinion you can watch my pokedex series but other than that that type of video i might do sometime in the future but if i do do it it will come after i release a bunch of tutorials on standalone things like um redux redux saga react express and hooking all of them up together um which uh i wanted to ask if any of you guys have any suggestions in the comments um i'm thinking of sort of either slowing down on my toe ui components because we've covered so much of them and i'm sort of itching to do something new but in the future i still want to be adding on my toy components to the playlist now then but i just want to switch up the videos a bit if you guys would be interested in seeing something like a brand new react 2020 and 2021 tutorial going over the best practices for react um i did do a react series a bit ago and if you were to search up like react tutorial on youtube you'll see a lot of them are from two years and one years ago and let me tell you a ton a ton of things have changed um in that time and react is sort of unrecognizable from some of the tutorials that you'll see here in fact a lot of the tutorials i think are not to point any specific ones out i haven't watched any of these tutorials um but a lot of the tutorials that are out right now uh deal with class-based components instead of uh hooks um and functional based components and i think there would be a lot of uh value in maybe having a brand new react tutorial and in that react tutorial after i get over the basics of react i would love to go over redux redux saga um which essentially lets you connect to a backend and then maybe a brief express tutorial um that allows you to connect your front end to a backend and then adding material ui creating a whole website and then deploying it so if that's something you'd like to see leave it in the comments let me know and that sort of brings me to the next material ui tip which is if you are trying to learn material ui from scratch i would highly recommend um if you are going to build a full stack application to try and quote learn don't try to learn too much at once sort of bite off um basic bits i would first uh build the entire ui of the application you are building and then once you have the ui done with material ui you should definitely look into maybe adding either an api or a back end um and that's sort of also what we did with the pokedex series like i said before the api sort of came last we built the whole layout of everything before and i give you guys a really good breakdown on how to use mock data to sort of fill up the data on your page without having that api connection i know it was a blocker for me when i first tried to learn now the next thing i highly recommend you guys learning as you can see from a lot of my most recent videos is how react router works now react router when i was learning it um it didn't really have the i didn't find the documentation to be the best i found it to be a bit confusing and a bit all over the place there are a lot of good videos on react router but really you don't need to know too much um i would say just focus on the basics uh so for example if we come into their uh api i focus on the basics like understanding how history works um i would understand how like location works um and just the basic nesting of the applications themselves i think it's super important especially because every single application is going to contain things like a header it might contain a drawer if you want to implement tabs anything like that or breadcrumbs anything like that it's pretty essential to know how react router works so i would if i were you guys and i was just learning react um matilda ui from scratch i would watch maybe like a 10 to 20 minute video on react router just to have a brief idea and in a lot of my tutorials i actually go over how react router works from scratch anyways but it's still good to have that underlying information about what it is um and the same thing for uh redux if you are planning on using some of the more complex components for example snack bar um a lot of that revolves around uh sort of redux and i think it's really good idea to at least have an idea of what redux is used for um and if you are still new to react and you don't really have a good idea of why anyone would use redox or what it is in general um then maybe skip over some of those complex uh components for now and just try to make very basic applications uh with material ui so you get uh the general idea of it before moving into uh more um extreme examples that might be um a bit more complex now the next thing i want to talk about is how to use the material ui documentation which i think um a lot of people uh before seeing some of the videos i put out it was some feedback i got that a lot of people didn't really understand very well um and that is how to properly use the materialized documentation and it sounds pretty easy uh but let me break it down for you guys that might be sort of uh new to matilda ui um for each component so you can see here as soon as i go to the motel ui documentation i can click this drawer and i can click components there's two sections components and components api and those are probably where you'll be spending most of your time components if you click on components you will get an entire list of all these components and in the difference between the two is this just general components category will show you examples of all the components in use then the components api tutorial it will have almost all the same components will show you the api documentation for every single one of those components and let me show you how to use both of those in tangent so let's say for example i wanted to create a let's say tabs um so i'll go i'll click on tabs under the components category and you'll see here we have a lot of different examples of tabs so for example we have how to implement just some basic tab structure and if you're not familiar with tab it's just a component where you click one thing um you have these tabs and whenever you click it it will switch the view that the user sees so you can nest anything in here and it's really popular on websites i'm sure you guys have seen it around um but you can see we have some basic examples and then we have examples of different customizable props that they have so for example um the disable tab so disabled is a prop that you can pass in uh to your tab component and in this example they are just giving an example of a tab with a disabled prompt and material ui will do that a lot in their documentation if they have some props for components that are very commonly used they will have examples of that component with those props being passed in so for example disabled here's what it looks like with some other variants so for example if you take a full width if you want to center your tabs in the middle um if you want to make these things scrollable so for example having a little carousel because you have so many tabs that you can scroll through it um and a lot of other things like having icons uh just for your tabs et cetera et cetera and each like i said each component will have a different amount of examples depending on the amount of props and the complexity of the component itself you even have an example of vertical tabs i've never seen this before this sort of just looks like a cheaper copy of drawer um but that's besides the point now my favorite thing to do when i'm first learning a component before i get to the api i will go to this components view look at the most simple example of the components and i will either sort of look at the code that they provide here to understand it you can click this button here to show the entire code that they have here for this component or what i recommend doing is you can click this edit button and this will actually take you to a code sandbox link if you're not familiar with code sandbox it's a really cool tool it allows you to just create a react applications online that are shareable that virtually render over here on the right and you can add any dependencies and i'll tell you why the documentation in my opinion is one of the best documentaries i've seen because every single example they have they attach the code sandbox io um code to it so you can click on any example you want click on the little ed button and it'll open up a code sandbox link where you can look at the code and you can even edit it so for example if i wanted to edit this from saying item one i could say like you know this is for youtube youtube i wonder if i spell the youtube name wrong if they'll like penalize me in some sort of weird algorithmic way but anyways you can see here that not only um i don't know if you guys just saw that on the bottom right but not only did it you know update it but when you uh edit someone else's code sandbox it will automatically fork the repository um and make a new one where you can edit and you can share uh that around if you have an account which i highly recommend everything that you edit everything you do you can sort of save it and go back to it it'll automatically save it under your account so you can see all the code sandboxes you've made and you've edited in the past and um i think it's a really great way to learn which which in turn once you've sort of gone through the components and you sort of understand how it works on a basic level by playing around and you're like oh okay you can have this like tabs uh nested into the app bar and you can have a tab inside of every one of them and then they have this custom component name tab panel once you sort of get that understanding of a component i recommend scrolling all the way bottom and you will see all the actual components that they make public that you can actually download using your applications and all the apis for them so they have a sort of list so for tabs uh you see that while you know the example just as tabs there's a lot of actual tab components that go into making a full tab example the first one is the general tab then you have tap context you can use something called tab list tap panel uh the tabs tab scroll button and you can go ahead and click on every single one of them and each one of these components represents something new that you would be able to import into your application so in this simple example they're importing tabs and tab and you can go to the api for each one of these components and see what they are and how they are different uh from each other and as well as all the props so the props are really good to me through because it gives you an idea of what is customizable um for each component and this was really helpful for me because i use material let me tell you why for a lot of my consulting work that i do for a lot of different companies and sometimes ux the ux team will come to us and they're like okay i know we're using we tell you why but can we make this you know tabs component look like this and it'll look like something that is not really attainable and what i'll do is i'll go through this api documentation for the component and i'll be like okay there's no specific uh props that allow me to edit what they're asking for are there any css overrides for what they're asking for and it's like okay um this text color secondary they want it to be blue that is something i can target with uh the css classes so um i'm going to know that that is possible but let's say for example there was something in these tabs that isn't like for example maybe this little divot i know for a fact this little divot color is customizable but let's say for example it wasn't customizable i would be able to see that from the tabs api by scrolling down and looking uh through the css rules and the props and i could push back on ux and be like listen um if you want the you uh we if you want to use like material ui for these tabs which we are using um i don't think we can make it look like that because this specific element of the uh the component isn't customizable so we're either gonna have to use a different um we're either gonna have to use a different uh component or you're gonna have to change the ux designs uh so that we are using the color that material ui allows or something like that obviously like i said this little orange thing is definitely customizable i've done it before but that was just an example of how you can use api in sort of a more workplace uh why knowing the api in a workplace environment can be very useful and also just for your general knowledge um that is how i would go about using uh the documentation now let's look at some other useful things in the documentation one other useful thing i like to look at is the default theme um so if you're still new to material ui you might not have watched like my theme video and stuff like that but i highly recommend watching it i think it's number six and i also talk a bit about it in number three as well but pretty much i'm gonna tell you why just the tldr you can customize the theme which in turn will change every component that you use which is one of the most beautiful aspects of using material ui i would only recommend it if you're making like a bigger application that has its own real theme if you're just trying to learn material ui other than for the learning sake of it which could just be playing around with a couple values in your used theme i wouldn't worry too much about it or spend too much time doing it um i would probably primarily focus on just like getting the components down first before diving into it but if you're making a an application this is for a client or a consulting job or you're making like a really nice website that you want and it has its own you know color scheme and everything like that um the default theme documentation is really useful to know um pretty much all you have to do is type in default um all you have to do is type in default theme and it the first result will bring you here and what you have here is pretty much all the different objects that are nested inside the material ui theme and it's really important uh to sort of get a good idea of this uh because there are so many things you can change now the main ones that i've dealt with are break points palette typography and spacing spacing you're not going to have to worry about too too much but if we look at break points you can see here i can click values and it will show me and this is especially helpful if you're using grid a lot it will show you what every single breakpoint is set to and you can even edit it these are the standard breakpoints for most web applications which is you know um it goes from the largest and up which is 1920 pixels um and then you know large is categorized as 1280 to 1920 medium is categorized as 960 to 1280 and i think anything under small is considered to be mobile view um but yeah these values are really useful to know you can even edit them if you want to i don't think i've ever had to edit them before um but if that's something for your specific application that makes sense go for it um the next thing to look at is palette so this is where you're going to be uh number one getting all the default colors for so for example a lot of the colors if i even go to tabs let's see do they have so for example they have um a text color prop here uh indicator color so this indicator color is actually um funnily enough that color that was on the tab over there that orange you'll see here that when you look at the props for it it'll show either primary and secondary well if you're new to material ui you're going to be like what the heck is primary and secondary and the answer is material ui has a bunch of colors in their theme preset and all these colors are preset so for example if i click the primary object under palette you'll see here that the main is this hex code for this sort of blue color and we can see that that is actually what this color is that that is the primary color and then the next thing uh and by the way all these palettes are overrideable so you can change the sort of theme and a lot of these components use that little sort of theme coloring so once you change the palette your application will look almost completely different and like i said the last thing i want to talk about with in the default theme is sort of typography you can see here um and i have a whole video on how to override these typography styles um but just a big tldr is that there are a bunch of different typography variants there's h1 all the way to h6 sort of just like in regular html um and all of these can be overwritten in terms of font family the the weight so the boldness of it the size of it the line height and the leather spacing um so those are the really uh important things to know are a part of the default theme now the last thing i want to leave you guys with uh in terms of material ui tips is um really the idea and i know this sounds really uh counter-intuitive but googling is a really good resource when it comes to material eye and i know this sounds obvious but the reason i'm bringing this up is because a lot of the comments that get left on the videos are um just questions that i think if we're i appreciate the comments obviously because it really helps with the youtube algorithm but they're questions that i think if we're if they were typed into google um instead of like uh youtube um because youtube only has like very specific videos on specific things so it's really hard to find debugging answers on there but if you looked it up on google you would see a ton of answers on either stack overflow or github now if we go to the material ui github material is completely open source so you can see pretty much everything on there um there are a ton of different issues that are up here and you can find almost any answer as a beginner you have for a material ui component uh either here or on just google with stack overflow um one of the best things about moto ui is that it's such a commonly used um framework i honestly wanted to try becoming a contributor to moto ui myself because of how much i love it and i appreciate it and i want to give back but i've never contributed to anything on github in my life so i figured i might as well just stick to making videos about it or something instead but um you can find a lot of answers on here if you need any help or support the devs are highly responsive i highly recommend just creating a github issue if and only if you can't find an answer online to your question or if the question hasn't been asked before and resolved um because i know a lot of developers when it comes to open source projects for their projects um get a bit cranky if you if a lot of people ask the same question over and over again especially if it's a basic one that you could have just found the answer to on google but that's about it for this video um i hope i didn't miss anything if i did leave it in the comments and if i missed a lot and there's a lot of unanswered questions i might do a part two um but yeah um i'd love to hear your general opinions on uh the direction i should take my channel in after my toy like i said i'm leaning towards the idea of going into a bunch of react tutorials and sort of trying to do um a react series an introductory react series um with all the newest updates because like i said the most common ones are pretty outdated at this point react's a big library they're moving fast uh so i have no doubt even if i make a video on it today that in two or three years that might be outdated i might have to release a new one but yeah let me know in the comments and thank you all again for your amazing support in this materialized series i might still post a couple material live videos here and there but like i said i'm looking to try to diversify uh what i'm making videos on so thank you again for your support hope everyone's staying safe and have an amazing day

Channel: Anthony Sistilli

Views: 6,468

Keywords: Material UI, React Material UI Tutorial, MUI Tutorial, Material UI How To Learn, MUI Tips, Material UI FAQ

Id: FSF_RzUgDdE

Length: 26min 12sec (1572 seconds)

Published: Sat Jul 25 2020