MUI5 (Material UI) Crash Course

hello everybody and welcome back to the channel in this video what we're going to cover is a material ui 5 and this is a terrific react ui library now what exactly does that mean well it is a library that provides us with a bunch of ui elements so for example if in our react app we need a calendar we don't have to go ahead and build it on ourselves what we can do is we can download this library and use this ui element which is the calendar so really it just contains a bunch of ui elements that we can utilize rather than building it from scratch and reinventing the wheel and right here on the mui.com website you can see an example of some of the elements that they have so over here we have a calendar over here we have this play button we have a select we have uh different tables and these actually utilize some of the design best practices so your application will actually include that in as well so over here on the mui.com website what you can do is you can go to the docs and then once you go to the docs let me zoom in here once more you can actually go to the components and then in here you can see all of the different ui elements you can utilize in your react application and actually if you click on one of them so let's say i click on alerts you can see some of the examples and you can also see the source code and because there's so many ui elements in this crash course we're going to be utilizing and learning how to use the documentation to incorporate these elements inside of our application so we're going to be in the docs a lot because we're not going to be able to cover all of these elements in this crash course else this crash course would probably be like 10 hours long all right so with that being said let's actually look at what we're going to be building we're going to be building a tourism website so over here you can see we have a tourism website and we have a bunch of different tours these are the top niagara tours these are the top las vegas tours and you can see that there's a lot of ui elements going on first of all we have this app bar and then over here we have these cards and within these cards we have this ratings we have you know price we have this icon right over here so there's a bunch of things going on and then once you go ahead and you go to a specific tour you get redirected to this page and well in this page there's even more going on so we have this image and we also have this cool collage of images as you can see that you can scroll so you can learn more about the tour through these images then we have this text over here just telling us about the ticket and then we have these this accordion that shows you all of the frequently asked questions and then over here at the very bottom let me just zoom in here you can see that there's this fixed uh bottom navigation and the there's this button that says book now and what that does is it triggers a modal with um with a calendar and you can actually go ahead and book now none of this will be functional but this is just for purposes of teaching you material ui so there's actually a lot of things going on and if we had to build all these things from scratch well it would take us a very very long time but you're going to be surprised how easy it is to build something like this with material ui because all of the ui elements are already pre-built so well that's enough of that let's actually just get right into it into the next section like i said in the introduction it is super super important to get a good handle on the docs because there's so many different components out there in material ui so in this section and all the previous sections what we're going to do is focus in on a specific goal and then we're going to go to the docs to try to accomplish that goal so the first thing that i want to do is let's go over here to our demo what we want to accomplish i want to just simply build out this card very simple and so nothing insanely difficult and so what we're going to do is we're going to go to the docs and learn exactly how we can build out something like this so the first thing that we need to do is to create a react application and that's exactly what i did i created a bare bone react application as you can see right over here let me just zoom in once more so as you can see here we have just a bare bone react app and what i'm going to do is i'm just going to do a quick uh cleanup so i'm going to get rid of everything in here so let's get rid of that and then over here we can get rid of this and let's save that and actually let's keep the app.css but inside of the app.css what i'm going to do is i'm going to also get rid of all of these styles so we're just doing a little bit of cleanup here and then let's uh now let's go ahead and download material ui inside of our react application now of course to do this let's go to the documentation and once we go to the documentation you can see that we have this getting started tab let me zoom in here once more you can see here that we have this getting started tab and over here you can see installation so let's go ahead and install this and you can see here that to install this package what we need to run is npm install at mui slash material and there's some other libraries that we can also install as well that are complementary to material ui so let's go ahead and copy this we're gonna go ahead and copy that and we're just gonna paste that into our terminal so let's go here let's paste that in and that should be a okay so once we wait let's actually go back to our um to the installation docs and let's scroll down and you can see here that it says material ui was designed with roboto font in mind so to be sure to so be sure to follow these instructions for instance via google font web so essentially what it's saying is it wants you to take this link tag and append it inside of your index.html because this is the google font that links it to the roboto font so let's go over here and let's go to the public and let's actually paste that link in as well so we're going to go here and we're going to paste in that link so we can have the roboto font inside of our application all right so that is terrific the last thing that i want to do is i want to go to my index dot css file so inside of this index.css file i want to just get rid of these default styles and i want to have a style that applies to every single element so we're going to have over here this wild card the star and this means that hey i want a specific style applied to every single element so what i want is if if we don't specify any margin i want the margin to initially be zero and then what i also want is the padding to initially be zero if it's not specified i want the box sizing to be border box and then also let's say that the font family is going to be roboto so font family and we can say roboto for this all right so very very simple so now if we were to go to our react application you can see that it is completely empty so remember now what do i want to do well i want to build this card so let's go to the material ui documentation and let's go to the components section so in this component section you can see here that there's different categories there's input autocomplete button checkbox well i don't really need an input data display this isn't really data display feedback this isn't really feedback as well let's go over here we have surfaces okay surfaces seems like exactly what i need and you can see here that there's actually two different components that we might be able to utilize card or paper now let's actually go ahead and click on card and you can see here that this is well exactly similar to what we want we want to have a card like this so okay we found our component and what we can do is we can actually click on the source code just to see exactly how it was built out so this is terrific however i actually personally do not want to use card i actually prefer to use paper so paper is very very similar to card except it just gives it more of a paper feel if you will so let's go ahead and let's click on paper and this is really just a personal preference so if you click on paper you can see here that it kind of looks more like a paper if you will and you can see that well all you need to do is get this paper component and we pass it in a prop of elevation and you can see that the more elevation it has the more it feels that it's elevated from the surface and if we were to scroll down over here you can see some other props you can also give it variant outlined we can also give it square to make it square rather than rounded and you can see here all of the different elevation levels so you can see elevation of zero it's not elevated at all elevation of one it seems like it's barely elevated whereas an elevation of 24 it seems like it's just really floating out of the surface the the um the design is basically a box shadow or something like that so let's go ahead and let's utilize paper so what i'm going to do here is i am going to go to source and i'm going to create a components directory and in here i'm going to create a tour card dot js file and let's go ahead and let's create a just a very simple function based component so let's go here and we're going to say tour card and then here we're just going to return a very simple div for now so just go ahead and do that and inside of this div i'm just going to say hello so what i'm going to do is i'm going to take this div let's just get rid of all this and of course what we need to do is export default so let's export default to her card so i'm going to take this div and i'm just gonna place it right in here or i'm gonna take the component and place it right in here so i'm gonna say tour card and i'll notice that it auto imported and if we save that and we go to our app you can see that we should see this hello right over here awesome so i'm zoomed in four hundred percent for you it's probably going to be significantly smaller so now let's actually go ahead and start utilizing this paper uh paper component this ui element inside of our card so in order to do this let's actually look at the source code here and you can see that the source code all we need to do is import this paper component from at material ui slash material slash paper so let's go ahead and do that so let's go ahead and let's import that in and we don't want to import it in here we want to import it in the tour card so let's go here we're going to import that in and then what we're going to do is we're going to wrap this instead of being inside of a div we're going to wrap it inside of a paper component that we get from material ui so let's go ahead and just save that and let's see how that looks here so you can see that automatically looks a little bit different so you can see that we have a little bit of a box shadow there's a little bit of an elevation now of course what we can do to change the elevation is just pass elevation elevation and we can give the elevation whatever value we want so we can say 10 if we want to now you can see here that it seems like it's more elevated i'm going to say 3 personally i like that so i'm going to say 3. and of course we could also say square to make it more squared i think i spelled that incorrectly square so now you can see that it's squared as you can see look at the corners and when i remove it it's going to be more rounded so let's go here you can see that now it's rounded i i personally prefer it being grounded and we could also say variant and we can say something like outlined if we want to and now you can see that there's an outline around it but there's no box shadow and i honestly do not prefer that i like the box shadow so let's just say elevation all right so you can see here that we went ahead and created a very very simple uh component and we did that by reading the documentation and that's what we're going to be doing thoroughly throughout this crash course so this is a great step however there's a huge problem so if you look at our card right now and let me just zoom out you can see that our card is relatively small obviously it doesn't span the whole width of our screen it's relatively small and you can see that it's it's centered all of our content is centered in the middle as you can see here somewhere in the middle so you can see that there's some spacing here and there's also some spacing here and obviously our card is a lot smaller so how can we accomplish this with material ui we can actually accomplish this with layouts and we'll get to that in the next section so the first thing that i want to do is this effect right over here i want to put everything right in the center with a little bit of spacing in the left and the right so a little bit of spacing horizontally so how can we accomplish this well let's go to the documentation let's go to the components section and then in the components section let's scroll down until we find the layouts category and as you can see here this is the layouts category and over here we have a bunch of different components that we can utilize to better lay out all of the other components within our application so these components are just strictly for laying out our application so the first thing that we're going to look at and we're going to look at many of these but the first thing we're going to look at is container let's go ahead and click on container and you can see here that the container centers your content horizontally it's the most basic layout element okay so what does this mean so it centers everything horizontally let's actually scroll down here and you can see that it does exactly what i want right over here you can see what it does is it doesn't take up the entire width and then it also centers this content horizontally so this right here is the container and then everything outside isn't the container and this is exactly what i want over here so i want to have a container that doesn't take up the entire width and then centers it horizontally so that's exactly what we are going to utilize is the container component and over here you can see we can also give it a max width if you want to you can also take a look at the source code just to see exactly how things are done so what we can do here is you can just import container and let's actually put this inside of the app so we're going to import container from material ui and we're going to put this inside of the app so that everything inside of the application is going to be nice and centered so let's go here and let's just get rid of this uh let's go over here let's add a container component we're gonna say container i'm gonna of course close it off and that's pretty much all we need to do and now if we were to go over here you can see that now it is nice and centered and it's not spanning the entire width however of course there is still a problem now it's spanning the entire width of the container and obviously that's not what i want i want it to be uh you know relatively small i want to be able to fit four of them four cards inside of a container with a little bit of spacing now how can we accomplish this well there's actually a few ways that we can accomplish this if we are not using material ui from a styling purpose we can probably use something like flexbox or grid in this video what we're going to do is we're going to use the grid and the reason for this is because if we go back over here you can see that we have this grid component that is going to simulate the grid css layout so over here what we can do and if you don't know grid that's completely fine over here what we can do is you can see that we can actually accomplish something that looks exactly like this by having well components that look like this so what we can do here is you can have a grid container so you can have this grid container and we specify that this is a grid container by saying container and then we're going to say that any any item within this container is going to have a spacing of two so over here this spacing right here is two and then in here we're also going to have these same grid components but we're going to specify that this is going to be an item we're going to give it a size of 8. so in grid the total size horizontally in a specific row is 12. so by saying 8 that means it's going to span 8 out of 12 of the row so if i can do that math correctly 8 divided by 12 that's 4 divided by 6 which is 2 divided by three so around yeah sixty-six percent as as you can see here that is going to be 66 percent of this specific row and then over here we have this other grid item and this is four well that's going to be the other uh 33 and as you can see here we have the other 33 now if i wanted to accomplish something like this so i can have four evenly uh evenly sized cards within a row then what i would have to do is give this a um xs of three so that we have three three three three which equals to twelve so we're gonna do something like this so the first thing of course that we need to do is we need to wrap everything inside of the grid container so let's go ahead and do that and we're actually going to do that inside of the uh inside of the app.js component so let's go ahead and do that right now so let's go here and let's actually just remove the should we remove this i say i say we leave it let's just leave it for now and what i want to do is i want to wrap the tour card within a grid grid component so we're going to say import we're going to import grid from at material ui and the reason why we're doing at material ui slash and then whatever it is that we want whereas you can we could also do something like this which is a little bit cleaner just destructure out um everything that we need over here so container and then grid we could do it this way but the reason why i like to do it this way is that we're specifically asking for the gradient we're not going to get anything additional imported into this component so let's go here and we're going to say grid we're going to specify that this is going to be a container and we're also going to give it a spacing of let's give it a spacing of let's give it a spacing of 5. and then in here we're gonna have our tour card now our tour card we also need to import this because our tour card is gonna be the item so the item itself the grid item so let's go here and now wrap this with the grid item so we're gonna say here grid we're gonna close that off we're gonna say that this is a grid item so a grid item and we're gonna give it an x x s that is equal to three so that we can have four different uh cards inside of our row let's go ahead and paste back the paper and that's really all we need and now if we went over here you can see that our card is nice and beautiful how terrific is that really really good layout so now if i were to add you know four three more cards you can see that it's nice and laid out correctly the way that i wanted to now if i change my mind i was like okay i actually want to have uh three cards per row then i would just very simply change this item over here to four because remember four plus four plus four that's going to be equal to 12. that means three cards and of course if i want to also reduce the spacing i can do two here i can do whatever it is that i want i like five and also i want to change this to back to four all right so that's pretty much all it is that we need for layouts and of course there's gonna be other layout components that we are gonna get into so box is a very popular one that we're gonna get into and also image list we're going to get into that as well stack and hidden are we're not going to get into of course we're not going to get into everything but you know hopefully you guys kind of understand the premise of this all right so let's actually move on and and let's actually just make this component or make this card component look like this right over here because it's kind of looking pretty ugly right now in this section what we're going to do is finish off our card component because right now it looks like this of course we want it to look like this so let's quickly inspect what's going on here well of course we have the image itself at the very top but what i want to focus in on is this section right over here you can see that this section is filled with text we have the title the duration the reviews as well as the price and you can see that this text is formatted and styled differently this one's large and skinny the font weight is a little bit small this one's a little bit smaller this is small but this is even smaller than that whereas this one's larger and bold so how are we going to deal with text inside of material ui well there's actually a good way of dealing with it because there's a component inside of material ui called typography and we're going to use that component to build this text right over here and format it the way that we want it to so let's get right into it but before we do that let's actually start off with the image the image is i think the easiest thing to do so let's go ahead and do that so let's go here to our tour card and inside of our tour card the first thing that i want to do is i want to add the image so let's go inside of the paper let's remove the hello and we want to add an image now is there an image component inside of material ui if you do some digging around no there isn't so what you're going to need to do is just simply use a image tag so go ahead and use this image tag and inside of this image tag what we're going to do is we are going to supply it with an image url i'm just going to go ahead and copy this i'm going to do copy image address and you can go ahead and take all this data from my github page and i'll link it in the description below or you can just search for any picture of niagara falls and just put it inside of your source so at this point you can see here that we get this right over here so each card has this image obviously this isn't exactly the way that we want it we want to style it a little bit differently so the best thing to do in this case is to add some styles so let's actually go to our uh let's go to our app.css and in here we're going to add some styles for the image so let's give this a a class of image and then here this is where we're going to apply some of these styles that we need for the image so we're going to say that we want this to have a width of 100 so span the width of the card as well as a height of 5 rams and then once we go over here to the tour card we can actually give this a class name of image and now if we were to go over here you can see that this is looking a lot better okay cool so now what i want to do is i want to move on right over here to the typography so let's go to our tour card and then inside of our tour card well let's go ahead and import that typography component so to import that let's actually try to find it inside of the documentation let's go here let's try to find it uh where could it be let's do a quick search tie pograph and there we go it's right here under data display so let's go click on that and you can see here that it's using roboto okay we already have that that's completely fine and you can see here all of the different types of fonts you can see this is how an h1 is going to look and h2 is going to look and h3 is going to look and over here we have different paragraphs etc so this is really cool this is exactly what we want so how do we utilize this well we utilize this by using the typography component as you can see right over here and we're going to pass in two props we're going to pass in the variant and then we're going to pass in the component so the variant is how this is going to look so if we say that the variance is going to be h1 then it's going to look like this then this typography is going to look like this however the component is saying well what html element is going to be in this case we're going to say h2 so right here what we have is an h2 element that looks like an h1 so over here so this right here would be an h2 elements and this is really cool so maybe sometimes we want something really large as large as an h1 but we want it to be an h2 we can go ahead and do that with the variant and component so let's go ahead and start with the title so the title is the first thing that we want to do so let's go here to our uh let's go to here and let's see how things are imported so let's just go here let's look at the source code and typography where is typography let's go here to the source code and you can see we can import typography so we're going to import typography and then right in here what we want to do is we want to supply it with the tour name so what we can say is right under the image what we can have is a typography component typography component and let's close it off we're going to say here the tour is immersed into the falls immerse i don't even know how to spell that i forgot how to spell it immerse into the false i'm just going to copy it so immerse into the falls and what we're going to do is i want this to actually be an h2 because it's pretty important but it's not a header so i'm going to say h2 and let's actually give it the variance of h2 as well so we're going to say variant of h2 just to see how it looks like h2 and now if i were to come here okay this is a lot bigger than i wanted okay maybe i can change it to an h4 so this way is it's still going to be in h2 but the the the look of it is going to be a little bit different and just to prove it to you you can actually go ahead and inspect this and you can see that it's an h2 all right this is also very very big so well what can i do here i'm a little stuffed let's go back to the documentation and inside of the documentation you can see all of the different types that we have so we have h1 h2h3h4h5h6 but we also have subtitle and then subtitle and we also have body and body i think actually subtitle might work best for me and of course you can always take a look at the examples that they have i want something that looks like this or like this so i'm going to use subtitle for this and so let's go over here and let's use i'm wondering let's use subtitle one so we're going to say sub title one i think this is good and we're going to give it a component of h2 and now right away you can see okay this is looking good this is incredible uh okay now the one thing that i'm noticing here is over here we have a little bit of padding so we have this padding so so this image doesn't have any padding but anything inside of here any of the text has this padding so that it's not immersed right into the walls obviously over here well we don't have that padding so maybe we can actually fix this and we're actually going to use another layout component to fix this so to fix this what we're going to do is we're going to import box this is going to be another important layout component and this box component simply acts as a div as a wrapper for all of the other elements that we want so we're going to get this from box so box and over here again you can just simply treat this as a div so over here we're gonna say box we're gonna wrap it inside of the box now this of course doesn't do anything because now what we need to do is apply some styling inside of this box so what we can do here actually is just say padding and then inside of padding we can very simply say one and what this will do is it give us padding in the x-axis as well as the y-axis and now you can see that we have this good padding that we wanted all along so actually i do not want this padding to be um on the top i just want it to be left and right so maybe i can actually say having x instead and that way okay that looks a lot better to me all right cool so what's the next thing that we need inside of here well we need this right here which is going to be the duration so let's go ahead and add that in now over here you can notice that we also have this icon so how are we going to add this icon what i'm going to do is i'm actually going to wrap this this right here this section right over here i'm gonna wrap it inside of a box as well because i think it's uh it's uh it should be containerized inside of a div so i'm gonna wrap it inside of a box and i'm gonna give it a display a flex so it can display horizontally so i'm going to say box now you might be wondering okay well how can i add these custom styles i can add custom styles by utilizing the prop s x and then over here you can give it an object of all of these styles that we want so i'm going to say display flex and i'm also going to say align item center align items center all right awesome and then in here well we're going to display some of our uh we're going to display that duration so let's go over here and let's say typography and i'm going to say let's just hard code five hours for now and let's give it a variant we're going to give it a variant of body this time let's say body two so body two and we're also gonna give it a component of paragraph so it can be a p tag all right let's go ahead and save that and if we were to come here okay it's looking good it's looking pretty decent actually it's not bad uh however of course what's happening here is uh okay so what i need to do is i need to get this box i have to wrap it inside of this box right over here so i can get the padding get the padding all around now this is a little bit uh a little bit bigger than i wanted to you can see that this is relatively big uh so i actually don't do not want it to be this big and i'm going to show you how we can actually um customize these styles a little bit later of these variants a little bit later but for now we'll just leave it as is okay so we'll just leave that as this now what we need is the icon so how are we going to get the icon now in order to get the icon what we need to do is install another library that is associated to material ui so let's open up our terminal and we're going to do an npm install we're going to say at mui and then we're going to say icons and then we're going to say material so let's go ahead and install that and this is going to give us access to a bunch of different material ui icons so let's just wait to wait wait shouldn't take too too long and once that downloads and it did what we can do here is import a bunch of icons from at material ui the package that we just installed at the material ui slash icons material and what i want and you can of course explore this all of the different icons that you want but i want the access time icon so i'm going to say access time and all we need to do to utilize this icon is just render the components so let's go over here inside of the second box and we're going to say access time and let's just render that component and now if i were to save this and refresh let's see here it's taking a little bit of time let's open up our terminal just to see what's going on did anything fail uh i guess it's still compiling it's taking its sweet time to compile so let's uh refresh again i'm just gonna pause the video and wait until this is done compiling all right so it finished compiling and now as you can see we have our icon however the icon is a little bit too big i would like it to be a little bit smaller so what we can do here is we can go to the icon itself and then inside of the icon we can also supply it with the sx over here and then here what we're going to say is that this is going to be equal to a width and we're going to say that the width is going to be equal to 12.5 i just went ahead and played around with it and i found that 12.5 is the best width so if i refresh this you can see that it's a lot smaller however right now i also again want this text to be smaller but we just pretty much use the smallest variant so what we're going to need to do is figure out a way to make this variant even smaller than it is but we'll do that a little bit later uh another thing that i want to do is i want to have a little bit of spacing between these two let me zoom in a little bit of spacing between the icon and the text so in order to do that what we can do here is we can just very simply do a margin left and then we're going to say this margin left is going to be equal to 0.5 and now you can see there's a little bit of spacing there all right awesome so the next thing that we need to work on is this right over here so let's actually add this in a box itself because we're gonna have to do some styling as well so let's add another box in here let's create a box so right here we have another box and let's also give this these same styles that we have in this box so we're gonna get the styles we're going to apply those styles in here and so the first thing that we want to do is we want the ratings so let's go to material ui and let's actually just explore the components because there is a component called rating and as you can see here well we can get the controlled rating where somebody can actually select the rating which makes sense and then over here we have this read-only rating and this is actually what we want to use so over here we don't want people to select whatever rating it is you want to show them okay this thought this has 4.5 uh rating so instead of using controlled you want to use read only you can also say disabled if we ever wanted that or no rating given if you also wanted that so let's actually look at the source code of how this was created so we're going to have to import rating so let's go here let's import rating and then in here let's just go ahead and quickly save this so we can format it better and then in here what we're going to do is we're going to supply it with the rating so we're going to supply it with the rating and this rating is going to take in a few props because as you can see here we have the name which is going to be you know whether it's it's controlled or whether it's read only and then over here we have the value which is going to be you know whether it's three three out of five stars three and a half out of five stars four four and a half etc and then over here there's the on change however we don't need an on change because again this is going to be read only so uh you can see here that this this right here is kind of similar to what we're going to be using we're going to be using the name read only then we're going to also supply it with a value we're going to give it this re read only prop as well so let's actually just go ahead and copy this and uh let's just paste that in there okay that is good very very good so let's save this and let's actually just give it a value of 4.5 so let's go here and let's see how that looks at the moment all right so you can see that it's it's there which is which is really cool uh however there's a few problems for one it's it's pretty big i want i would love for it to be a little bit smaller and we also gave it a uh a rating of 4.5 so i think it would be nice to show half the star at the very end rather than the full star i'm not sure why it's showing all of these stars so there's a few things that we actually need to fix in order to fix this let's actually go back to the documentation and the first thing is rating precision so if we wanted to use a floating value which is something like 0.5 we have to specify the precision so over here by saying a precision of 0.5 that means that we can give ratings that have 0.5 within it so something like again 2.5 4.5 whatever so if i want if i were to go here and i say precision and i were to say 0.5 that should fix this issue you can see here now we have uh the half star if i were to however change this to zero point or 4.75 you can see that well we don't have that level of precision anymore because remember we specified that this is only 0.5 level of precision if we wanted to the 0.25 level of precision we can actually put that in there and it's very faintly it's very small you can see right here that the star is uh not covered so this this little part of the star hope you guys saw that uh but of course i just i just want 0.5 i'm okay with that and let's let's give it uh 4.5 so the next thing that we want to do is you want to make it smaller uh so over here you can look at the sizing so what we can do is we can just give it a size prop that is either going to be small or large and by default it's going to be medium so i think i'm going to give it small so let's go ahead here let's copy this and let's give this a size of small let's paste that right in there and by doing that you can see that okay now it's looking a lot better uh okay um there is a little bit of spacing here as you can see so what we can do is to the box we can give it a margin top so inside of this box that's housing the rating and all of the text you can also give this a margin we can margin top you can put this in here if you want to or we can just very simply just say margin top and then we can give this margin top of um let's give it a margin top of three let's save that and there we go all right so that's that's pretty good so now what we need is well we need the 4.5 as well as the reviews themselves so let's go ahead and figure out how we can do that i mean we're going to do that with typography of course so let's go ahead over here and in here so right after the rating we're going to add another typography so we're going to say typography so typography and we're going to actually make this the exact same size as this right over here which is the duration so over here we can give it the exact same properties uh except we'll give it a margin left of let's give it a margin left of one point and actually you know we'll leave it leave it as this 0.5 i think is a okay so in here what we're going to do is we are going to supply it with the rating which is going to be 4.5 so we can actually end up seeing what the rating is so 4.5 and and this is what i'm talking about right over here so 4.5 and now what we want is we want this right over here the number of reviews and you can see that this is extra small however the issue that we're facing here is uh well the body two is the smallest that we can get so again i'll show you how we can change it a little bit later but for now what we're going to do is we're going to just say the number of reviews is going to be um just 655 and we're going to say reviews we're going to wrap this in parentheses and what i'm going to say for now is this is going to be a body 3 even though this doesn't even exist let's give it a margin left of 1.5 okay so with that being said you can see here that it's really big you know we'll fix that a little bit later so the last thing that we need is this over here which is the price we can put this in its own box as well uh even though it might not be as necessary but it's good to kind of put things into their own little containers just in case so over here we can have a box and then we can have another typography i'm just going to copy this typography and this one's going to be nice and bolded so we're going to say that the variant is gonna be h6 however the uh component itself let's say h3 and do we need a margin well we need some margin top so we'll say margin top of zero so margin top of zero all right so if you were to save this and then over here we can just say from i'm gonna say c for canadian dollars and i'm gonna say i don't know 147 and if we were to go here you can see that we have our wonderful card so it's it's it's getting close i mean there's still a lot to do to be quite honest uh but it's getting there you can see when i zoom out it actually looks a little bit better so it's it's definitely getting there however the issue that we're facing is that you know we need to be able to customize some of our own fonts because i want to make this a little bit smaller i want to make this smaller i also kind of want to make this smaller over here so how do we do that let's get to it in the next section in this section what we're going to do is learn exactly how we can customize our own styles and we can do that by utilizing theme providers in material ui so let's just first look at exactly what we want to customize we want to customize the font we want the body to to be a little bit smaller than it is right now and we want to create a new body three field and we want to make it extremely small so how can we do this well like i said we can do this with theme providers so the first thing that we need to do is to create a theme and we can get that from material ui so what i can do here is from material ui i can import create theme i'm going to destructure this i'm going to say from material ui i'm going to say at mui material i'm going to get this thing called create theme so create theme and then over here what i can very simply do is say theme is equal to create theme and this is going to be a something that we're going to invoke and we're going to pass in an object and this is where the customization is going to occur so the first thing is we have to specify what component we want to customize so we're going to say components and specifically what we want to customize is the typography the typography components in material ui so to specify this all we have to say is mui and then well typography so we're going to say typography and of course we can do this for any any um any uh components you can do this for any component that we want but again we want to do this for typography so let's do it for typography typography and then what we want to say is well we want to start specifying some of the different variants inside of the typography so over here we can say variance and then here what we're going to do is we're going to supply it within an array of variants so and these each array is going to be an object and then the first property in the object is going to be the props so the props and the props over here we're going to say that we want the prop that is variant so over here you can see that we have this property here that is going to be variant and we want this to be equal to body 2. so if we supply a variant that is equal to body 2 as a prop then what styles do we want well we want the style of font size 11. so let's actually just look at this one more time so we're going to create a theme we're saying that hey we want to manipulate the typography component in material ui and we want to update the variance and so over here this is going to be an array so over here we have this prop so over here we have this prop inside of our array and we're saying that if the variant is equal to body 2 what we want to do is we want to make sure that the font size is 11. and now let's actually do the same exact thing but for body 3. so let's go ahead and copy this and over here we're going to say body three so this right here is going to override body two this one is going to add a new prop and we're gonna change this one to font size of nine font size of nine so now how can we utilize this because if i were to save this and then refresh here you can see that nothing has changed so in order to utilize this what we need to do is to import something else called the theme provider so over here we can import something called the theme provider and what we can do is we need to wrap all of the components that we want to have this specific theme that we created with the theme provider so i'm just going to wrap it around the the paper so over here i'm going to say theme provider we're going to close it off we're going to have a closing tag right over here as well the theme provider and then as a prop we're going to supply it with the theme and then we're going to say the theme that we just created so theme so if i were to save this now you can see that it has changed so we were able to do this now of course we can actually change this to whatever it is that we want we can add multiple styles so we can say hey if if the uh we also want the background color to be blue for instance so now you can see here we also are gonna get a blue background color so we can add whatever styles it is that we want of course i don't want that all right and we could again do this for multiple different components it doesn't matter exactly what the component is and this is a way that we can customize our styles there's a few more things that we need to complete in order to finish the landing page so the first thing that we need to do is to add the app bar and then the second thing that we need to do is need to add this title right over here that shows all of the best tours for a specific city so let's begin with the app bar again what we're going to do is we're going to go over here to the documentation and we're going to search for app bar so let's go ahead and look for it and over here you can see in services we have an app bar and over here you can see that well there's multiple different app bars that we can utilize now the app bar is kind of a special component because it's not comprised of just one component it's actually made up of multiple components so i actually want to use something that looks like this and you can see here if you were to click on the source code there is an app bar component but it's going to be sandwiched with a bunch of other components and styles so you can see here we have a bit of styles we have uh over here more styles for the icon wrapper so there's a bunch of different things going on and at this point it's actually best to simply just copy this and modify it as you go so what we can do here is you can just simply copy all this code and in here we can create an app bar dot js file maybe you can capitalize the bar and we can just simply paste this in and over here again i mean a lot of this stuff we've already learned you can see here we have we're using a bunch of different components and we're kind of uh creating this app bar with it so i think we're going to leave this as is over here we also have a bunch of different styles so this is another way of styling components so over here we're using styled components where we're styling a specific div and we're giving it all of these uh all of these uh styles and then over here the search icon wrapper we're gonna be using it down here so this is just another different way of styling our component you can also just use a plain old div and just give them these styles so i'm just gonna keep this as is and then over here i'm going to just call this an app bar or we'll leave it as actually search app bar even though it's not really going to have any search functionality so inside of the app.js what we want to do is we want to we'll utilize the search app bar but we do not want to put it inside of the container because we wanted to span the width of our entire screen so if we were to put it inside of the container you can see here if i were to refresh you can see here that it's only spanning the width of the container so instead what we're going to do is we're going to move it outside of the container and we're going to go ahead and save that and now you can see that it's looking a lot better now over here for the margin let's also give it a margin and we're gonna give it a margin now let's give it a margin of y inside of the container a margin y that is going to be equal to 5. so let's go here let's give this a quick refresh actually that doesn't seem to work so instead of what we're going to do is let's give it an sx and we're going to say here margin and then we're gonna say margin y of five and there we go so now we have a little bit of spacing between the cards as well as the app bar all right so that's that's really cool and again we can customize this however way we want but from for me i'm just going to leave it as is the next thing that i want to do is i want to add this right over here and i actually also want to start dynamically displaying some of these inputs or some of these cards so what i'm going to do is i'm going to go to my github page and over here i have a bunch of json that is going to contain data for uh for these cards so go ahead a link in the description below and then what you can do here is inside of the source create a data.json file and then in here we're going to paste that json in here so this is going to be an array of objects and then the object is going to be the the name of the city so the city first and then the city is going to have a property called tours and then that's also going to be an array of objects and this is going to be each individual tour so what we're going to do is we're going to iterate over the city to get the city and then we're going to iterate over these cities tours to get the tours so it's it's not uh insanely difficult actually so let's actually go ahead and we'll do that right now so in order to do this right now we're working in the app.js later on we're probably going to migrate from the app.js but for now let's just leave it as is and so what we want to do is we want to uh well we want to render the type the city and the city name and then we want to render the cards so for now let's just go ahead and comment this out i'm just going to comment this out for now and we're going to import these cities from that json data so i'm going to show cities from and i believe this is going to be from the same directory data.json okay and we're going to iterate over that so we're going to say cities dot map and then over here for each city what i am going to do is return so let's go here we're going to return and we are going to return typography so we're going to return the typography let's go ahead and import that notice that it auto imported we're going to say that this is going to be the variance that is equal to h4 we're going to say that the component is equal to h2 we're also going to say that we want a margin margin top that is equal to five and also a margin bottom that is equal to three so very very simple and uh of course all we need to do is we need a closing typography tag and then in here we're gonna say top and then city dot name and then uh tours so if we were to uh refresh this you can see here that we get top niagara tours top las vegas tours okay so this is good but now what we need to do is we need to start iterating over the the tours inside of the city so what we can actually do here is you can wrap this inside of a fragment so you can say fragments here so we can leave this typography in and then what we can do is you can get this grid paste that in there uncomment it and then inside of the grid inside of this grid what we're going to do is we're going to start iterating over the city dot tours dot map and then for each tour and we can of course supply it with eq we should probably do that uh so let's let's uh we'll supply with the key over here so let's go over here for each tour what we want to do is we want to return that tour card so we're gonna say here tour card to our card and what we're also going to do is we're going to pass in the tour as a prop so to where's the prop unless also uh let's also ask for the index so you can use that as a key so you can say key which is going to be the index let's go ahead and save that so now inside of the tour card we have to do a little bit of adjusting so what we need to do is we need to accept the tour and then in here this is not going to be a hard-coded image instead it's going to be tour dot img which is if you look at the json it's going to be or actually it's going to be image like this and then here this is gonna be uh tour dot name i believe let's double check name over here we're gonna have tour dot duration so tour dot duration here we're gonna have tour dot rating also same thing over here and then here we're gonna say number four views so right over here we're gonna say tour dot number of reviews and lastly over here we're gonna say tour dot price okay so now if you were to save this and if we were to go back you can see that everything has changed so well we completed the very first page which is really good and i think we learned a lot and now let's move on to the um the next page so the next page is going to look something like this and honestly this isn't going to be very difficult because we've already learned a lot of the principles even though this looks a lot more complicated we learned a lot of the principles we learned how to use docs so we're probably just going to breeze through this page so we finished our very first page but now what we want to do is we want to work on the second one in order to create a multiple page application this is where we're going to have to introduce routing to our app so there isn't anything material ui specific here so i do kind of expect you to know how to do this but let's just do it together nonetheless so in order to do this the first thing that we need to do is install a few dependencies so let's go over here to our terminal and we are going to install react router dom so this is the library that we're going to utilize to introduce routing inside of our react app so we're going to do npm install and then we're going to say react router dom react router so let's go ahead and install that in and let's give it a few seconds now we're going to introduce react rotor dom right in here inside of the app.js so what we actually need to do is we need to start moving some of this stuff from the app.js into its own page so inside of the source directory let's create a pages directory and in here we're going to create a home.js file and what i'm going to do in here is i'm just going to go ahead and grab all of this so i'm going to grab all of this and i'm going to create a function based component called home so const home is equal to a function based component that returns all of this stuff right over here and of course we're going to do an export default of home we're also going to need to import all of this over here so let's go ahead and do that and let's go ahead and import that and that should be everything so just to double check that everything is working a okay inside of the app.uh js file you can just render the home component that i'm going to auto import auto import the home component and let's get rid of this and we should get the same exact oh well not really so the issues that we're having here is some uh paths so over here what we can do is we can just move out of there and i believe that should work so if we move out of the pages directory then we hit the components yep that should work and over here we should do the exact same thing and over here exact same thing okay so you can see that it looks exactly the same awesome uh so now what we want to do is we want to introduce react router dom inside of our app.js again kind of expect you to know how to do this already so we're going to import a few things from react router dom we're going to import a browser router we're also going to import routes and route so those are the things that we're going to import and then in here what we're going to do is we're going to wrap this with browser router and then over here we're going to have routes and over here we're going to have a route and this is going to have the path of just slash so path is equal to slash and over here what we want to do is we want to render the element home page so you want to render the home component let's go ahead and get rid of that okay so that's pretty much all it is that we need to do another thing that i'd actually like to do is remove the search bar from here and actually just put it inside of the uh the app component because we're gonna want it for every single one of our pages so we're going to say here search app bar we're going to go ahead and save that and as you can see here this works a ok so now what we need is another page and this page we're going to call it the tour page so we're going to say here tour so tour.js and let's create another function based component for this we're going to say tour and let's have this return a div that just says hello and we're going to do export default tour and then in here we're going to add another route and this is going to be a dynamic path and over here we're going to say that we want to supply it with the id and we're going to do it dynamically that's why we have the colon and over here we're going to say tour and that's it so that's i think all it is that we need so now if we go to slash or whatever so let's say slash three we get hello as you can see here and we also get the navbar so now what we need to do is we need to create the tour component now typically what would happen is you wouldn't do something like slash 5 you would click on a specific tour as you can see here but this isn't really anything material ui specific um this is really just react and react router dom so i'm just going to leave that up to you guys and then over here when we go to an actual tour i'm just going to actually hard code it so no matter what id you go to we're not going to dynamically generate it later on you guys can obviously manipulate it so that you can maybe fetch from a database or fetch from the actual data because again i don't want to take some of the time away from material ui okay so this is what we're going to do we're going to go ahead and try to hard code this right over here and we're actually going to do this whole thing relatively easily in the next section so let's get right into it in this section of the course we're just going to learn about many of the other components inside of material ui and we're going to do this of course by building out this page right over here so let's begin with what we know so the first thing that i want to do is i want to of course wrap this inside of the container because as you can see here we have this container so let's go into our home page or not our home page our tour page let's just completely get rid of this div and let's wrap it with a container let's auto import that in and i personally prefer to get it from slash container like so and in here we can also say hello just to make sure that everything is a-okay now we can also supply this with a width so we can say uh sx is going to be equal to width if i want to make this a little bit smaller than usual so i'm going to say 900 for this and you can see here that now it's nice and wrapped inside of the container so the first thing that we need is this typography immersed into the falls which kind of makes no sense at this point because we're showing las vegas pictures or whatever so let's go over here and let's add a typography component so we're going to say tai pography and inside of this typography let's just say something about las vegas i don't know um you know explore the world and the reason why it's the world is because las vegas or las vegas um they typically have like a bunch of different uh architectures from all around the world they have like pyramids and the the eiffel tower etc so explore the world in vegas i've never been to vegas anyways but i i see pictures and i also play grand theft auto san andreas uh okay so over here what we're gonna do is we're gonna say variant and the variant we're gonna say is three h3 we're gonna say that the component is h1 because it's super important this is the title of it and also let's give it a margin top of let's give it a margin top of three so let's go ahead and save that and now you can see here explore the world in vegas okay so the next thing that we want to do is we want to supply it with the image now the image is really complicated actually we have this image then we have a bunch of these images over here so this is relatively complex so what i what i think is actually a good idea is to create a component for this i'm going to call this an image list component so let's go here we're going to say image image collage maybe collage i hope that's how you spell it i'm not sure let's go over here and let's create a very simple function based component that shows us the image collage so we're going to say image collage and for now let's just return to div an empty div and then let's go ahead and export default this image collage image collage so going back over here to the tours let's actually wrap all this logic inside of a box i think that makes most sense so we're gonna go here we're gonna wrap it inside of a box uh it didn't auto import let's say box okay so now it did auto import i wonder did we use system before i don't really remember using that let's go to home do we have any boxes here let's go into tour card i know we have boxes here yeah we didn't use system let's just use this so let's go back to our tour page let's get the box from here and let's wrap it inside of a box again our box is kind of like a div so let's give this a margin top that is equal to three we're also going to give this a display flex so let's do this display flex we're gonna say flex and okay so that's that's looking pretty good and let's in here let's give it an image and i'm gonna just hard code this image i'm just going to go ahead and just copy this image address you go on the internet find whatever image that you think works perfectly for you and you can also put in an alt i'm not going to do that and let's also supply it with a fixed width of uh let's give it a fix width of um let's uh what what do i want to give it let's give it 400. so yeah let's give it 400. actually no let's give it 325. so now if i were to refresh you can see here that we have our wonderful app so over here the image is a little bit bigger actually this should be height not width we're going to give it a height of 325. i think that's a okay we can also give it a fixed width but i'm not really sure what that width would be let's see here you know what you guys can go ahead and explore i highly suggest just pick this exact same image so that's the first part but now what we want to do is you also want the image collage so as the second part so over here you want to get this image collage and we're going to auto import that and right now it's nothing of course so how can we get this nice cool image collage this seems like a relatively complicated thing to get well let's go over here and we can actually get that from layout image list and you can see all of the different image collage that we can have so we can have this over here uh which is really cool and we can have this so this is is is actually exactly what i have here including the exact same images and how do we how do we do this this quilted image list where we have different sizing between different things well the best thing is is just to look at the source code and see how they did it so they have this list image zoom in here they have this list image this list image item and then in here you can see that they're giving this a width over here and a height for the uh the image you can see that we have four columns and over here we have the row height so how how uh how high is each row and uh then inside of the item you can see that you know we could tell it that hey this is going to span you know two columns or or three columns or anything else etc so over here is all the images as well as well as the pictures so let's actually just go ahead and copy this so this is actually kind of self-explanatory so let's go ahead over here and let's copy that and i'm going to go to the image collage and just very simply paste everything in so let's go here we're going to just paste it in and we're going to use it and we're just going to leave it as is because i personally think it's pretty self-explanatory the only thing that i might want to change is this over here i'm going to say that the width is going to be 300 and the height is going to be 325 and let's also give it a margin left of 1. so now if we were to go here you can see that we get our wonderful collage and of course you can change the pictures to whatever it is that you want so now what do we want to do well the next step is the about the ticket and this is actually going to be i think the easiest thing this is just very simple typography so in order to do this let us go over here to the tours and in here we're just going to use that typography component so let's just copy this and right over here maybe you can also put this inside of a box i think that makes the most sense and you can also separate this into their own separate components but i'm not going to do that so we're going to have this box with a typography and let's give this a variant of h6 and let's give it a component of h4 and let's give it a margin top believe it as three and over here we're going to say about this ticket so about this ticket and then we're going to use another typography for the paragraph so the paragraph is going to have a variance of well paragraph so paragraph and then we're also going to give this a component of p and then in here let's give it some lower ipsum so all we have to say is lorem and then we say 40 and we get some random text so now you can see here that we get we get everything it that we wanted right over here okay so now the next step is the accordion which is gonna ask us a bunch of different questions so this is gonna be relatively similar let's actually wrap this in a box as well so we're gonna go over here we're gonna wrap this in a box and then we're going to say here frequently asked questions so frequently asked questions save that we're also going to remove this typography because we don't need that and instead of what we want is the accordion of course so let's go into uh let's go into uh the documentation so inside of the documentation what we want to do is we want to find well the accordion so let's go here and let's search maybe we can even use the search we can say accordion and you can see here in surfaces we find this accordion so we can go ahead and look for all of the different accordions that we want you can see here that we get these really cool effects i think i think personally i like the controlled accordion you can also customize the accordions however way we want i personally like this this looks really cool for me so we're going to go ahead and utilize the controlled accordion so let's uh let's actually maybe take a look at some of the other accordions accordion summary uh yeah i think that's a-okay so what i'm gonna do is i'm gonna go ahead and take this accordion and let's just look at the source code for this just so we can understand it so we have an accordion component accordion details accordion summary and so over here we have this controlled accordion okay that makes sense and in here so inside of this uh controlled accordion we have well a bunch of different uh we have a bunch of different components we have the accordion component the accordion summary component we have the typography component so the accordion summary is going to be just the summary which is going to be the stuff in here so you can see here i am an accordion so this is the accordion summary general settings and then in here the accordion details so the stuff actually like inside is going to be the accordion details so yeah that's that's pretty much it so it's really really basic i wonder if there's actually a i think this accordion is a little bit better let's actually use this accordion because this accordion seems a lot simpler yeah and it works exactly the same way we have this accordion accordion summary and this accordion details inside of it so i'm going to do is i'm just going to copy all this copy and we are going to go and create a new component for this i'm just going to call this a core dn dot js and for this we're just going to paste everything in oh my copied way too much let's copy all of this and let's paste everything in here and there we go that's pretty much really all that it all that we need so in here what we can do is very simply just uh get that controlled accordion i believe is or accordion what was it called just i guess it was just called accordion uh no it's called where is it okay customized accordion that's what it's called so you can just get this customize accordions auto import that in and pretty much save it now of course in a real application what we're gonna have is uh we're gonna have uh like this is gonna be fetched from a database of course and it's gonna be dynamic for each person but again this is just a course on material ui and i'm actually not even going to bother changing these things you guys can do that on your own the only thing that i might want to do is go inside here and maybe instead of some you know just margin top let's also give it a margin bottom and we're gonna give it a margin about if maybe two two might work and there we go i think that works so now the very last thing that we need is this right over here this uh book now so you can see here that we have this little footer so we need to actually add that in and how do we do that well we do that by going of course the documentation and there's actually something called a bottom navigation so we can actually utilize this bottom navigation to get this exact same effect that we want however this is going to be a tad more complicated so let's get to it in the next section the last thing that we need to do is we'll work on that bottom navigation that we have right over here so obviously the best thing to do is to go to the docs and we want something similar to this so we want to have our content here and then this bottom navigation right at the bottom so let's take a look at how this is done by clicking on the source code and you can see here okay we have a list of all the items blah blah and over here inside of the paper you can see that we have this bottom navigation so this is exactly what it is that we want so let's actually go ahead and copy this paper and right below the box and let's give this box a margin bottom of 10. so right right below this box what we're going to do is we're going to add this paper so do we have paper imported we don't so let's go ahead and import that in so we're going to import paper from we're going to get that from at material ui at mui slash paper we should probably do the same thing for typography as well so let's go here let's get typography typography and get rid of this typography and we also want to get that um that bottom navigation and we actually do not want the bottom navigation action so we can get rid of this you can also get rid of the value as well as the on change we actually do not need that one bit so we can get rid of that and you can also get rid of the show label we don't really need that as well in here all we want to do is just display that one modal so over here let's say bottom navigation bottom navigation and let's go and say hello right in here so now you can see that well we have our wonderful uh fixed footer if you will this bottom navigation however the hello itself isn't displaying and that might be because we need to add the show labels uh show labels prop that's probably not it either i think it might just not display text like this so let's actually go ahead and now add the modal now the modal itself we're gonna add it in a separate component and we're gonna call this modal.js and very similarly to what we've done before we're just gonna go to the docs and just copy and paste what they have for the modal for this we can even search modal and in here so what we want is we want we want a basic modal kind of like this right over here very simple so let's actually look at the source code for this so very simply all it is is a div a button that's going to open the modal and then over here we have the modal itself and it checks whether it's open and then on close it just closes the modal so let's copy this and let's paste that in there and what is this called called the basic modal so let's just copy that in and we're going to just add it right over here so we're going to say basic modal and did i auto import that in seems like it didn't basic modal come on modal okay i guess it's not gonna work let's go ahead here let's say basic modal and we're going to get that from our components and our modal component save that and now if we were to come here you can see that we have this open modal and it works perfectly fine now of course i want to change the text to book now so let's go to the modal itself and to do this what we want to do is we want to change the button to book now okay so that's really all it is that we want and the last thing is we want to utilize the calendar so we want to have a calendar in here rather than having well this random text so again as per usual we're going to do this by looking at the documentation so let's look at the documentation for calendar now calendar is a little bit interesting uh because this is what we want to use right here and you can see that we have this this this uh thunderbolt and essentially what this is saying is that this is actually a premium uh premium feature so if you actually just want to display a calendar just like this for a material ui you actually have to indeed pay for it so this is going to be a premium feature however we can just utilize it for um for uh just development and testing purposes so let's just go ahead and we're going to copy this code let's not really worry about what it does let's just copy the code and again we're going to go in here and we're going to create a date picker so let's create a date picker component date picker.js and right in here we're going to paste in that date picker now of course what we want to do is we want to display that inside of the modal so inside of the modal let's go in here and now what we want to do is we want to update some things so let's get rid of the typography we do not need that one bit all we want is a box and we'll leave the styles as is but what we want to do is we want to display this static date picker range demo so let's go over here let's try to auto import that in there we go auto imported and that's pretty much it so let's go ahead and save that and now if i were to click on uh okay so there's some things that are missing here so there's some packages that we actually need to install like mui lab so let's go to our terminal let's just do an npm install at m ui dash lab go ahead and install that and that should fix this issue okay there we go let's refresh so now we're getting okay so now we also have to install this date functions library maybe i should have probably read the documentation so we're going to say date functions i think at this point everything should be a okay let's give it some time to download and let's refresh this okay cool so now if i click on this you can see that we get our calendar and we can select it however obviously the calendar seems to be cut off because the modal is a little bit too uh small so of course to fix this what we can very very simply do is just adjust the width of the modal so to do this we can just go to our modal right over here and let's adjust the width of this so over here the width is 400 what we could do is just completely remove this width just to make it with auto and if you were to refresh you can see here that now we have our whole calendar and of course obviously it doesn't do anything like this is pretty useless there's no book now button in here there's no prices but again this is all about material ui okay so that's pretty much it that's that's it so we actually learned quite a lot about material ui and i'm happy about it uh and hopefully you guys enjoyed it and i'll see you guys in the next one

Channel: Laith Academy

Views: 219,002

Keywords:

Id: o1chMISeTC0

Length: 88min 35sec (5315 seconds)

Published: Fri Dec 31 2021