Learn Material UI in One Hour - React Material UI Project Tutorial [2022]

hello everyone and welcome to a new javascript mastery video are you new to material ui have you heard about it but never actually tried it out maybe you dived into it but it felt overwhelming it's easy to learn if you know where to start this video will help you to get started quickly material ui is by far my most favorite react ui library simply put it makes your app look extremely professional if you've ever built a project with a consistent design you know how time consuming and irritating it can be by choosing material ui you're saving yourself a lot of time that you can spend on building new features for your project or business material ui can be used with all the javascript frameworks like angular and vue and libraries like react to make your applications look well simply better in this video we'll be working with react and we're going to build this application it is a simple application in which we'll cover all the most used cases of material ui you're going to learn how to create a header how to use typography for the text how to create buttons and how to create these nice looking cards as well as the footer this one simple project is going to teach you not only what material ui is but also how you can immediately start using it on your own projects this video is special because it acts as a practical guide to get you up and going with material ui you're not only going to learn things to learn them you're going to learn them so that you can put them into practice and immediately start using them in your own projects if you've been subscribed to javascript mastery for quite some time now you know that that is the way that we do it on this channel project only if you're still not subscribed well now is the time to click that subscribe button so that you can be sure to not miss any of the newest projects material ui is built by following material design guidelines material design is a system created by google to help teams build high quality digital experiences as you can see on the screen material design provides guidelines for colors typography shape and much more by following their principles you can use numerous components that look good and feel good to use if you'd like me to create a second part where i go into some more complex material ui features make sure to comment and subscribe if this video reaches 5 000 likes we're recording part 2. with that said i only have one more thing i want to let you know and we'll jump straight into the project alongside teaching you material ui in this video i'm also going to show you how to use tascade an all-in-one collaboration tool i've partnered with them and made sure that all of you guys get the pro version the only thing that you have to do to get cascade pro for free is simply contact cascade and let them know the javascript mastery sent you so what are the main features of cascade you can map out your workflow from ideas to action you can customize the view all the way from a simple task list to any more complex workflow like a board action or mind map it is built for collaboration you can see what each teammate is doing in real time it has amazing calendar views so that you are always up to date with what needs to be done cascade is also available on all the major devices and operating systems later on in this video i'm gonna show you how to use tascade while we go through the process of learning material ui with that said let's start creating our material ui project [Music] as always we'll start off by creating a new empty folder let's call it something like material ui demo then you can open your code editor of choice in this case i'll be using visual studio code the only thing that you have to do is drag and drop your empty folder into visual studio code once that is done you can open the terminal by going to view and then terminal right here in this case we want to initialize an empty react application you can do so by typing mpx create dash react dash app and then just do dot slash because we want to create it in the current directory after you do that we're going to wait about a minute and we'll be right back once your react application is initialized you'll see that a lot of files and folders have been created for you the most important folder here is going to be the source folder it's going to have a lot of files that we're not going to need so what i always like to do is simply delete it and create a new one from scratch inside of the source folder we absolutely need to have a file called index.js so let's go ahead and create it inside of the index.js we need to import react from react and we also need to import react dom from react-dom okay now that we have react dom you can say react dom dot render in here we need to render some sort of a component so let's call it an app component this is going to be the main component of this app and you're going to render that to the dom then we have to provide a document.getelementbyid and we need to say root so what is happening here is you're saying i want to render the app component right inside of this root viv that react provides us with as you can see app is still not defined so let's do that in the source folder you can create a new file and we're going to call it app.jsx this is where our component is going to be but first before we create that component let's just import that app into our index.js file you can say import app from dot slash app and that is going to be it for this file you always need to have one file in your react application where you have the react dom and then reactdom.render in this file for now we're going to create a simple react component import react from react now we can create our functional component by saying const app is equal to a functional component and then in there we can have a return statement that is for now going to return simply a div and then that div is going to have let's say an h1 that is going to say hello world finally you have to export default your component that's it this by itself should be a functional react component before we run it let's just install all the necessary dependencies that we'll need to use our material ui to install material ui into our react application i'm going to head to the tascade guide i created right for you as you can see under the installation section the only thing that you have to do is run npm install at material ui forward slash core and add material ui forward slash icons so let's do just that while this is installing we can also go to the material ui's website inside of here you can also see the guide to install material ui we simply need to do this and then you also need to load the font so let's just copy this line that is on material.ui.com go back to our application go to the public folder and then right into here inside of the index.html you can do it just above the title you can paste that link script right here and with that said that is it we've successfully installed material ui so let's go here and i'm just going to take this as solved the next step is going to be usage let's see how we can actually start using material ui back in our application we can run mpm start and that's going to start our react application on port localhost 3000 as you can see that is it this is our hello world application just a simple h1 now the question is how can we start using material ui to make this instantly look better well it is as simple as importing some components from material ui library you can do that by saying import then you can use curly braces to say that this is a named import meaning it's not a default one and you can save from add material ui for slash core so what components are we going to import well in this case we can do something like a typography typography is a component that you're going to use really really often in material ui don't be scared by the long word typography is just a text any text element like a paragraph or a h1 or h2 anything that you can see as text that's going to be a material ui typography so we can change this h1 into typography and then in here you can provide it a prop which is a variant we can say variant h1 and right now you can already notice something material ui is going to have these components and it's going to have a lot of different props that can modify those components in a really simple manner in this case we're saying we have this typography and the variant is going to be h1 so let's save this and see how does it look like in the browser as you can see it's just changed the font a bit and made it look better but of course this is still nothing this is just a simple piece of text so how can we start using more components all together to make a meaningful material design that's what we're going to do right now we've just learned how to use components that's simple but in this video we're going to go through one of the most popular material ui templates let's go here and as you can see there are a lot of these templates that you can choose from you can simply copy the code and start using it for example we have a dashboard we have a really nice sign in with an image here we also have a few more nice components that you can immediately copy the code for and start using for example this blog right here that has a lot of interesting things we also have something like a sticky footer we also have a modal for a checkout with a lot of fields in this case we're going to use this album one i'm choosing to use this one because it nicely covers most of the things that you need to know to learn material ui we have a header every application has a header we have a nice hero section with an h1 and some text we have call to action buttons we also have these cards which are great for representing data and moving forward we also have a footer so in this video what we are going to do is not simply go here go to the source code and simply copy the entire code that we have here that way you wouldn't learn anything what we are going to do is we are going to write this component entirely from scratch line by line and i'm going to teach you how to do that not only how you can watch me and copy that i'm going to teach you how you can replicate this and extend that and build more projects using material ui so let's get started in our application we'll need more components than a simple typography so let's import all these components right now first is going to be the typography then we're going to have the app bar which is going to be that navigation bar we need card as well as the card actions and also card content we also need card media alongside that we're gonna need a css baseline that's going to immediately provide some styling for our application next we need a grid we're going to use a grid for responsive design and positioning then we have a toolbar we'll have a typography and finally we're going to have a container these are all the components that we need as you can see it's quite a long list but in this video i'm going to teach you how to use them we're gonna also need an icon for our navigation bar considering that we're building some sort of a photo album we'll use a camera icon and how can you do that well you can simply say import photo camera from add material ui forward slash icons great in case you want to see what icons are available you can head to material ui components and then icons and then in here you can search from 1000 different icons you can have them as outlined rounded two-tone sharp you simply need to copy the name of the actual icon great with that said we're going to use the photo camera to start off i'm going to delete what we have right now and i'm just going to wrap everything in a simple react fragment this just encloses different things that we want to put in there then inside of there at the top of your component where you want to use this you can use the css baseline by putting this css baseline here it's going to provide a lot of default styling for your material ui applications so you don't have to worry about the styles as soon as i add a few more components you'll start noticing the difference the first thing below that is going to be the app bar app bar is simply our navigation bar it is going to have a position of relative inside of there we're also going to have a toolbar toolbar is that blue line you'll be able to see it really soon inside of the toolbar we'll first have the icon the only thing that you have to do to include that icon is simply putting it right there that is it finally next to the icon we're gonna have a typography we already learned what that is that is simply a piece of text in this case we're going to have a variant that is going to be equal to h6 inside of the typography you can type the text that you want to use in this case let's say something like photo album just before we test it out i noticed that this here should have been a default import we also needed to put curly braces around it with this done what do you think what are we going to see if we check our website well take a look at that we already have this nice looking navigation bar at the top great so now let's continue on to our main part of the application we're going to use semantic html tags like main to indicate that we are now on the main part of the website inside of there we're going to create a div and then inside of that div we're going to create a material ui container container is basically as the word sounds it contains different things inside of a specific area of the page this container is going to have a max width of small sm for short now we're going to put something into it and then we'll see how does it look like first thing that we're going to put in there is going to be a typography so i'm going to put a typography right there this typography is going to have a variant of let's do h2 it's going to have a property a line which is going to be set to center and the color is going to be equal to text primary these are all properties that material ui allows you to have we're also going to add one more property which is called gutter bottom this simply is going to add some margin to the bottom of this specific typography now in there let's type something like again let's do photo album great so if we save that let's see how does it look like as you can see we already have this nice heading at the start of course later on we'll have to style it a bit add some margin and make it look nice in the center of the page now let's add one more typography this one was a heading simply saying what page we're on but the second one we're going to add right now is going to be the explanation of what people are going to see on this page again let's do a variant this time we can use something like h5 a bit smaller we'll again use the align which is going to be set to center and this time the color is going to be of text secondary nice and we can also provide a paragraph this is going to make sure that it loops through the lines inside of this typography let's have a longer paragraph just so we can see how is it going to look like on the page let's do something like hello everyone this is a photo album and i'm trying to make this sentence as long as possible so we can see how does it look like on the screen great so this is a long sentence that i just made up and let's see how does it look like as you can see we have this primary text and we also have this secondary text right there but you might be wondering how did i know to put this variant h2 here how did i know to put this max width small here how did i know to put the align color gutter paragraph or anything else that you can use as a prop to material ui components and that is the main question i don't want you to simply remember these four or five different props i want you to understand where you can find and learn more of these props and that's exactly what you're going to learn right now on the material ui site click the upper left menu and you'll see a sidebar we'll first going to talk about two sections components and the components api the main difference between these two sections is that the component sections contains examples demos and explanations for each component let's take a look as you can see if you expand it you can see that we have demos and explanations for each specific component on the other hand the components api contains a complete list of props and css rules classes for each component and no examples each component appears in both sections creating a nice separation between the exploration and checking exact property names so how would you go about researching this let's say that you want to use a typography the one that we just used you would first go to the component section and then in here you would find a typography you can also just search on the right top side so in here typography components in here you can see what components can you use and how you can achieve this look the component section is where you're going to spend most of your time when researching how to use material ui the most important part about each component is that there is actually working examples on the page that you can try out for example you can see the full source code by pressing this icon right here show the source when you click that you'll be able to see the entire code to reproduce what you just saw right in here best of all is these examples actually work so you can simply copy and paste the full code into your project and that's it you'll have it right there let's not take the typography let's take something that we haven't used so far something more complex for example so if we go into the components let's try taking a button group for example as you can see this is a group of a few buttons to actually create this using normal css it would take some time but in here you have it really really simply so you can click show the full source then you need to import some things in this case i'm going to import the button in the button group so you can head back to the project we're first going to copy that part right in here and then you can simply scroll down and you can take the example that you want for example i'll take the second one and that is going to be this one here i'm going to copy this button group and simply paste it right inside of my application let's do it just below this div right here i'm going to indent this properly and save the file if i go back to the application as you can see right on the left side we have this button group right here looks nice has the hover effects has the click effects and you can simply start adding the logic this is the power of material ui for now let's get rid of this let's get rid of the imports as well and let's focus on the things that we actually used already these are going to be typographies so for the typography you don't want to simply go to the components and then typography you want to go to the components api and then you need to find the typography right in here so if you just scroll a bit we can use the search bar on the right side of course but let's find it right in here there we go this is not the typography component this is the typography api inside of here you can see the full documentation of all the props that you can put for example you know that in the code we use the align center so now that you know you can use the align center we can also provide some classes you can see which colors can you choose from you can for example change the display you can add the bottom margin we also use this if we use paragraph the bottom will have if we use the paragraph prop it's going to have the bottom margin as well and you can also see all the different variants this is amazing this is how you learn how to use any specific package it doesn't have to be material ui it can be an npm package you found online you need to read the api reference documentation with that said now you know how you can find new components that you want to use in your applications in the component section and then once you start using them you can read more about them in the components api section that is amazing with that we went through the last part of our cascade list but while we're here i just want to show you a few more features cascade is amazing for collaboration on different projects you can invite project managers developers and everybody can collaborate right there you can also view this in a few different styles you can have a board style we can have a list that you just saw you can also create an action tab out of this or even a mind map you can see how you can see that in different views once again i cannot really recommend pascate enough i really want you to give it a try you can have a lot of different task lists you can create different themes add them together and generally it uses a really simple design where you can simply invent things that are grouped together with that said don't forget to shoot them an email to get the pro version completely for free and let's continue with their material ui project right below this typography we're going to create another div inside of this div we'll want to position some content and we do positioning and responsive design in material ui using the grid component so inside of here we're going to create a grid component and they always come in pairs first you have a grid that is of a type container and then in there you can provide some spacing between the element so let's do spacing is equal to two and then in this case we'll want to use the flex justify to simply center now inside of there we're gonna have the second pair and that is going to be the grid of type item so you have a grid container that wraps grid items inside of this grid item we're gonna have a button okay and i think i forgot to import it at the top so we'll add the import right in here this button is going to have a variant of contained which simply means that it's all going to be colored contain simply is a style of the button we can go to the material ui documentation and check that out so if we go right in here and if we search for the button in here you can see that we have different styles we have contained buttons which look like this we also have text buttons we have the outline buttons and you have a lot of different styles sizes and so on in this case we'll simply use a contain button that is going to have a color of primary inside of there you simply want to say something in this case since we're working on a photo album let's say see my photos that is some sort of a call to action button below that i'm going to copy this entire grid and simply paste it one more time in this case i'm gonna put an outline button and the color is going to also say as primary this would be some sort of a secondary action so let's do secondary action so now that we have these buttons in a grid let's see how does it look like if we go here you can see that it looks really really good again keep in mind how much time would you have to spend to get to this design just using plain css and it still wouldn't look as good as this looks right now also something that is phenomenal about material ui which i really like is that it is completely responsive if you open the console and click right there on toggle device toolbar you'll see that it is extremely responsive the only thing that we have to do right now is just add some custom styling to add the margin top to this photo album and to center this on the page for that we're going to go to our next lecture which is learning about how to style material ui components there are a lot of different ways in which you can style your material ui applications there are a lot of different ways in which you can style your material ui applications of course since we're working in react the simplest way would be to use the inline styles for example if we want to provide a margin top to this container you can simply say style is equal to margin top and then we can do something like 100 pixels if we save that let's see that in the browser that already made it look so much better but now imagine if you want to do some more complex styles this wouldn't be ideal because you would clutter your view in the jsx and you would merge the styling and the representation in one part but now imagine that you want to do some more complex styles like 3 4 10 different styles to each one of these components that would clutter your view and your component would become really really unreadable you don't want to put the styling right into your jsx you want to have it separate so let's explore different ways in which you can style your material ui applications in a better way the best way is to use the material ui recommended styling so let's explore how we can do that first we'll have to scroll up and you're gonna have to import something called make styles so import make styles and that's going to be coming from at material ui forward slash core forward slash styles now that you have these make styles we're going to create a hook called use styles so you can say const use styles is equal to make styles bear with me i know that the syntax is a bit confusing and then in there you have a callback function that returns an object so this is the syntax i know that it is a bit confusing but let's go through it line by line or rather word by word we're creating a hook called use styles that is equal to to a function call called make styles inside of that function call we pass in a callback function that simply immediately returns an object which contains all the styles make sure to re-watch this a few times i know it can be confusing but once you get used to it you just start creating these styles really quickly in here we also get access to the theme which you can use to provide additional styling now that we have this hook we have to create classes object out of it to do that you need to go inside of your component and say const classes is equal to use styles and then you call it as a function to provide a class to an element you simply need to say class name is equal to classes dot and then you can think of a name in this case let's go for a container now in this object you need to create a new object called container and in here you provide the styles i know it's a bit unorthodox to people who were just writing styles in the css but material ui uses something known css in js and this is how you write styles i know it's not perfect but if you get used to it material ui is going to really allow you to do a lot of things with dynamic styling so what are we going to do for our container well for example let's try adding a background color you can simply say background color and that is going to be equal to any color but in this case we are going to use material ui's built in background color and how can we do that you can say theme dot palette dot background dot paper this is going to give you a lightish background color also let's give it some padding you can say padding is equal to theme dot spacing and then in here you can provide different spacing as a function we're going to do 8 0 6. i know this might be a bit confusing but you don't have to use this you can just use padding is equal to something like you know 20 pixels i just wanted to show you that you have this theme object which you can explore on material ui's website and it provides you certain padding measures that you can use all across your application with that said let's save this and see if it worked if we inspect this page as you can see it added the padding to this main div and then also it added a background color of white and because of our css baseline everything else has this grayish color i'm not sure if you can see it on the screen but it is there there is a difference between those two colors it's really subtle but it is there with that said as we keep adding more styles we're gonna still clutter our view from our app jsx we're gonna have the imports and then hundreds of lines of styling and then the jsx so what i prefer to do is create a new file just for the styles and you can do that easily inside of the src i'm going to create a styles.js file inside of here we're going to import everything we mentioned about the styles okay and now the last thing that you have to do is just say export default use styles so now these styles are being exported and you can see we're missing them right here but we can simply import them by saying import use styles from and that's going to be dot slash styles great so now we have only one line we're not cluttering our view with any inline styles we're simply going to use the class names that we're going to add the styles for right in here and i know it might be confusing but you're gonna get used to it if you start using it more and more at first i hated this css in js type of styling but later on i grew used to it so now let's continue adding some styles that we missed maybe at the start of our application in this case we also want to add the classes for our icon so in here i'm going to say class name is equal to classes dot icon also in this div for the buttons i want to say class name is equal to classes dot buttons so now we know that we have to add the styles for the icon and the buttons so i'm going to open this on the side and then in here we're going to add those styles you can simply add new objects so just below the container i'm gonna say icon and i'm gonna also open the new object for the buttons okay so what styling do we want to add well for the icon we want to give it some margin right so i'm gonna say margin right and you could do something like theme dot spacing and then you can say two but you don't really have to you can simply say something like let's do 20 pixels and keep in mind all the styles in css and js need to be wrapped in strings okay and then for our buttons we're gonna do margin top and let's do something like let's do 40 pixels great now that we have that let's see how does it look like great so we added some differentiation on the top left side we have some margin there and we added the margin top on our buttons of course we misspelled it here so if we fix it you can see that looks so much better now now that we covered the styling let's keep moving forwards with adding new components to our application next below our div for the container right in here we're going to create another container this one is going to be for our cards so let's go ahead and create a new container this container is going to have a class name of classes dot card grid it's also going to have a max width of md which stands for medium inside of there we're gonna use a grid we already learned what grid is it is simply for responsive design and for positioning some things on the page we also learned that we first need to have a grid container with some spacing let's do four this time and then inside of there we have to have a lot of grid items in this case our grid item is going to be a card so let's do that grid it's going to have the property of item inside of that grid we're going to have a card element that card is going to have a class name of classes dot card we're not adding the styling yet we're gonna add it as soon as we're done with this part inside of the cart we're gonna have a card media which is used for the image that card media is going to be a self-closing element so we don't have to have any opening and closing elements it's going to have a class name which is going to be equal to classes dot card media it's also going to have an image property and that image is simply going to be an image from the web in this case we can use the image from unsplash that's going to be https forward slash forward slash source dot unsplash.com and they have this nice library called random so you're going to get a new random image every time that you visit the page and finally we can have a title this is going to be something like image title we don't have to focus on it right now each card also has a card content so just below the card media we're going to have card content that card content is going to have a class name of classes dot card content okay and then inside of there you can provide all the content for your card primarily that is going to be a typography this typography is going to have a gutter bottom and a variant of h5 and now that i'm thinking about it it would be great if we could see the code while at the same time we're looking at the changes that we're making so i'm going to put the window side by side there we go our windows are now side by side so you can see in real time what we're creating right in here right now you can see it is basically nothing it is an empty div it's really invisible right there okay let's keep adding more stuff so that you can see what we are creating furthermore our typography is going to have a heading and then we're going to have one more typography below this one this typography is simply going to say this is a media card you can use this section to describe the content great so now we have this typography let's save it and as you can see on the right side this is already starting to look like a car that we want to use finally below the card content we are also going to have card actions card actions is a bottom part of the card where you want to put some buttons in so let's do just that we'll use two buttons the first button is going to have the size of small and it is also going to have a color of primary first one can say something like view let's say that we have a lot of photos we want to view the first one we can replicate this line and the second one is simply going to say edit if we save this you can see we have this nice looking two buttons great now what you might be wondering is where is our image well the thing with images is you have to give it a height otherwise it's not going to know how high it is so what we have to do is we have to start adding some classes remember we added the card grid the card card media and card content so now we have to go to our styles and we have to provide a specific styling for each one of these classes so let's do just that okay i'm gonna use some shortcuts magic to create this if you want a video about visual studio code shortcuts just let me know like this video comment down below with that said let's start with our card grid our card grid is going to have a padding top or we can just do padding and that's going to be equal to let's do 20 pixels on top and bottom and zero on left and right our card is going to have a height of 100 percent it's going to have a display of flex as well as flex direction is going to be column again if you're writing code in css and js left side needs to be in camel case you cannot have something like flex direction like this it has to be camel case and then the right side has to be in a string finally we have the card media card media is going to have the padding top of something like 56 dot 25 percent this is not a magic number with this you're simply getting an aspect ratio of 16 by nine which is how you're used to seeing the images in this image ratio finally the card content is going to have the flex grow which means it's going to expand fully to 1. these are our styles and if we save it you can see on the right side we have this nice looking huge card that has the image right now great so this is going to be our card but let's say that you want to have 10 or 20 different cards what would you have to do well one would assume that you can simply take the grid item which is basically the actual card and we can replicate it a few times down below like this let's save it and as you can see we have this grid items going one below another but again take a look for something simple as this website you just brought your code to have almost 150 lines and if you just added like 10 more of these your code would have more than 200 lines so that's not going to be the solution that we're going to go for our solution is going to be mapping over our items so how can we do that well first of all let's create an array of different cards so in here i'm going to say const cards is equal to and let's do one two three four five six seven eight nine we're gonna have nine different images great now we can loop over those images to show the cards we're going to loop over them right inside of our grid container so right inside of here you can open a jsx logic block and you can say cards.map of course you need to open a callback function and we're going to have an instant return keep in mind this is a parenthesis not a curly brace and now you can simply put this entire grid card inside of our map and just like that as you can see we have nine different cards while still remaining at 78 lines of code that is great whenever you're mapping over something you need to get the actual card and then you have to provide a key in this case the key is simply going to be the card but again this is not ideal because we are on a desktop and if i expand this a bit you can see cards are simply going one below another even though there is a lot more horizontal space so how can we solve that there are responsive properties on the grid item inside of the grid item you can specify how much space each card is going to take on a specific device size so we start by extra small these are mobile devices on mobile devices we want to take the full width and the full width is 12 spaces so you can see now it's taking 12 spaces and if we go to the mobile view this is exactly what you want on mobile you wanted to take the full entire space because there's not a lot of horizontal space but if we are on small devices and larger we wanted to take half because there is a lot of horizontal space on bigger devices than medium we want to use 4 because 12 divided by 4 is 3. that means that we'll show three cards per row and just by this you immediately have a responsive design you can see how it scales we have three images on bigger devices and as soon as we start moving it from mobile we have just one and if we go to something like an ipad we have two per row this page is fully and 100 responsive the last thing that we need in this page to make it look complete is going to be a simple footer so just below our main we can create a new html5 semantic tag which is footer inside of there we'll give it a class which is going to be a class name equal to classes dot footer while we're here we can also just simply add that class and it's going to be nothing more than a simple background color so we can go ahead and save footer give it a background color and that background color is going to be the same as this one so it's simply going to be a whitish color and then we can also give it some padding so we can say padding is equal to and let's do something like 50 pixels on top and bottom so we can say 50 pixels and then zero on left and right okay with that said we can start implementing that padding and that's going to be really straightforward it is going to have a few typographies you can already see how typography is a really useful tool that you can use in material ui we're going to give it a variant of something like let's do h6 we're also going to give it a line of center and we are also going to give it a gutter bottom okay finally this is going to say something like footer that makes sense okay and we're going to have one more typography below this one this one is going to have a few different properties we're going to use a variant which is equal to subtitle one it is going to be aligned to center as well so align center it is going to have a color of text secondary it's not going to be so prominent so we can do color is equal to text secondary and that's going to be it and what we're going to do in here well let's do something here to give the footer a purpose great if we save that you should see a nice looking footer appear on our page and that's basically it i know this application is not all that complex it is really simple but i wanted to give you a good look and feel of how you can start creating material ui components yourself and how you can start using practically material ui in your new projects if you'd like me to create a more complex material ui video with theming and a lot more complex components and use cases feel free to let me know and i'll do just that if you haven't already make sure to check out cascade they sponsor this video and with that said thank you for watching and have an amazing day [Music]

Channel: JavaScript Mastery

Views: 400,051

Keywords: material ui, material ui react, material ui react tutorial, material ui grid, material ui tutorial, material ui react project, material ui project, learn material ui, learn material ui react, material ui react layout, reactjs material ui project, react project using material ui, react js project with material ui

Id: Xoz31I1FuiY

Length: 48min 34sec (2914 seconds)

Published: Sun Feb 28 2021