Material UI React Tutorial | Material UI Responsive Project

hello my friends today we are gonna design this beautiful page using react and material ui we are gonna be using the most useful material ui components like upper cards avatar group tooltip model snack bar and more and after this tutorial you are gonna see how easy to create a modern app design without any effort because everything you see is ready to use components only thing you should do is choosing your component and customizing it to your delight moreover it's fully responsive i think it's the most powerful features of the material ui because it's super easy and super fast to use breakpoints for any screen size i highly recommend giving a shot you won't regret it ok i hope you will like it if you want to see more tutorials like this please subscribe to the channel and like the video if you are ready let's get started okay firstly i'm gonna create my react application to do that you can write here mpx create react up and inside this folder and after that it's going to create your application but if you do that there will be some unnecessary files here like icons logo service workers and unnecessary lines inside your js files so if you don't want to waste your time you can open up our official github repository you can find this branch react mini and as you can see i'm opening source and there is no unnecessary files here as you can see and inside my app jazz there is only hello world text here and index file as you can see it's clear so basically i'm gonna use this repository to do that let's come here and copy this url and inside your vs code you can write git clone and it's going to be only single branch single branch and i'm going to write here my branch name which is react mini and after that i'm gonna paste my url inside this folder i'm gonna enter and as you can see they are here but it doesn't include our libraries to do that only thing you should do is writing here npm install or if you are using yarn like me just yeah during this process let's check our material ui website and here which library we are gonna use is here let's copy this npm install or yarn at i'm just gonna copy this and after that we are gonna paste our google font we are gonna be using roboto of course you can change it and here one more thing we are gonna be using material icons it's one of my favorite library it's really useful and it's really easy to use as you can see there are tons of icons here you can search for anything plain home person as you can see there are many options to use these icons we are going to install one more package and it's going to be material ui icons so let's install them i will say yarn add material ui core and material ui icons okay let's open up our documentation but before i'm just gonna copy this font family and inside public index.html and somewhere here i'm gonna paste it okay let's see our application i'm gonna start it npm start or yarn start and it's ready hello world perfect so i'm opening my documentation get started we have already installed our libraries so we don't need this section i'm going to components and as you can see there are many things here of course we are not going to try everything here because it will take probably 10 hours or something but i'm going to show you the most popular ones the real world use cases so it's gonna be kinda crash course okay let's start with buttons for example we are gonna create an epsom example don't worry but for now for the beginning i'm just gonna show you how to use them so there are some buttons here and here text version and outline version so let's try couple of them i will open up my app.js here and instead of hello world i'm gonna write buttons i'll see button and material ui of course you should import this first as you can see material ui core and button i'm gonna import like that if you save nc as you can see it's an empty button when you hover over there is a default effect here so let's change this button i will come here and say variant and it's going to be contained and as you can see right now it's filled a color if i come here and say color and primary for example right now it's blue if i say secondary it's going to be red like that and if i change this variant for example outlined it's going to be something like that i have so so it's really easy to use you can come here and try any of them for example for size we can give small medium or large let's try i will say size and it's going to be small right now it's a little bit smaller if i say large it's gonna be something like that okay now you can give some icons inside let's check as you can see only thing you should do is writing here start icon i'll say start icon and inside we are gonna write our material ui icon let's choose here one of them for example person let's copy this and here i will say person and close this tag to import this you can just select last letter and write it again and it's gonna give you some options as you can see material ui icons and person i will import this and it's here right now and if i save it and our icon is here now so so it's really easy to create real world examples something like this delete button send button save they look really nice or also you can use just icons so i'm not gonna show all of them as you can see it's really easy and i don't wanna waste your time if you go to the documentation you can try whatever you want but the important thing is here using custom css for example you can change your colors font size won't weight everything you can do in css so in this case you don't have to use this primary or secondary or this text color you can change everything so how you can do this so let's make content again and i'm gonna delete this color and here basically you can write style and background color and i will say just for example purple let's see right now it's purple let's say color which is text color it's going to be white something like that but it's not the efficient way that because imagine you are using tons of styles here and you have divs buttons texts and it's going to be really messier and unreadable so i'm going to delete this there is a material ui solution let's see i'm scrolling here and there is a styles button let's come here and see our example as you can see make style function from our material ui core and after that we are creating an instance and inside these make styles we can write any component our buttons texts divs everything here and after that we are going to be using this instance inside our function for example we will say cost classes and use styles we are going to be able to use these classes and everything inside this style for example classnameclasses.root which is here so let's do that i will come here and say const use styles and it's going to be make styles and inside this i'm going to write my button for example i will say button color white and background color it's gonna be black well it didn't import this let's delete here and import again okay it doesn't work i will copy this and paste here okay let's create our class here const classes and it's gonna be use styles and after that i'm gonna copy this and indicate my class name i will say classes dot button which is here okay let's try right now it's and text color is white perhaps by the way you don't have to write your custom colors there is a material ui option if you come here and say material ui palette and it provides us default values for example primary and with three options light main and dark secondary error warning info something like that but to use them i should write here team in this case i can use material ui default library so i'm going to close this here so i will say team and palette and let's use this one for example palette success and main palette success you can see here your options success and it's gonna be dark light or main let's say dark i will save and right now it's green perfect so what if i have custom theme colors for example we are gonna create an app and i'm gonna use for example five main colors and i don't wanna come here each time and write color codes for example something like that this grayish black of course inside codes okay so imagine we have many pages many components and i'm gonna use this main color inside every components of course copy and paste is an option but there is one more solution for that as you can see we have create team option so you can create your own theme for example if you write your palette and primary is blue for example here as you can see there is primary and main secondary light will be something like that main will be something like that so basically you can write here whatever you want and when you create really complex applications is going to be really helpful for you so let's see this example it created this theme and after that we should rub our components or pages with this team provider so how to import this theme provider as you can see it comes from material ui and styles i'm gonna open up new terminal here and i will say yarn adds material ui and styles after that i'm gonna create my own theme and i'm gonna wrap my whole application let's come here and create new folder or just a file i will say team.js and here i will say export const and team so i will say create team and inside i'm gonna write my objects i will say palette and i'm gonna change my primary color it's gonna be primary and inside main color will be let's say dark blue so i'm gonna import this theme here you can wrap your whole applications or you can go to the index.js and import this here import team from my team file here so let's come here i'm going to wrap my whole application so i'll say team provider an application will be inside this provider i'm going to provide my theme here and after that i'm going to change this color you can come here and say team and palette primary and main let's see oops i can't write the dark blue interesting so let's change it so i will write here it's gonna be black okay it works but how i'm gonna use these colors okay firstly we are writing our color and then it's tones or shades so let's write it here i'm going to delete this and by the way we are importing these colors from material ui core so i will say blue i will import and 500 let's see i'm gonna and it looks really nice i will write 50 shades of grey let's see i'll refresh okay it's something like that you don't have to use these default names you can create here anything you want i will say my button let's say background color color red color white and border for example one pixel solid and black it's gonna look a little bit strange but i'm just gonna show you so if i come here and delete this i'm gonna destructure this i will say team dot my button let's see okay but it's not red okay there is a mistake here background and it works so once you create your own components your buttons your titles for example you're gonna be able to use it in everywhere every component and it's really useful okay i hope you understood i just didn't want to show you only these basic buttons you can already reach them there is no meaning copy and paste them and show you in a tutorial it's really easy but important things are here i think okay let's create something real world so i'm gonna delete this button and here and i'm gonna create some components here firstly i'm going to create components folder here components and inside we are going to have number and then let's check here what we are going to create first if we are going to have now bar here and then we are going to create slide bar and here we are going to have our post feeds and finally i am going to create a right bar so lets create them left bar js or jsx and right bar and feed okay let's close here and i'm gonna copy this component and paste to others let's delete them first these are necessary things okay i'm gonna copy this and paste for number i'm gonna change the name it's gonna be mobile component and i will save and for the others i will do the same thing let's say left bar right bar and feet okay let's close this index and team let's start with number to do that i'm gonna write here my number let's close and inside my number let's write something and see okay let's see as you can see it's here perfect so i'm opening my documentation and here components and navbar it's inside surfaces and apple okay as you can see there are many options and i'm gonna create something like that it looks really nice if i open here as you can see it's a little bit complex here when you look here you will probably be confused but don't worry it's not that hard i'm gonna show you two easiest way so basically first we are gonna be using this app bar component and then we are gonna be using toolbar and after that we are gonna fill inside this toolbar i'm gonna add here my logo search input and our icons so let's do that i'm gonna delete these divs instead i'm gonna write appbar i'm gonna import this from material ui core and after that let's write here toolbar okay but there's a mistake here a is missing okay let's save and see as you can see we have number here and it's empty firstly i'm gonna create my logo but we are not gonna be using image i will write just a text of course you can use span or h1 but there is a material ui solution for that if i come here and search for typography okay it's here but i'm just looking for my component here ok as you can see usage of this component is like that we are writing typography and inside we have variant and we are gonna write here our html tags like h1 h2 and here is our variants we can use them so for my logo i'm gonna be using h6 by the way there is a component here you don't have to write this how it works when you create h1 tag it means you're gonna be using h1 style but you are gonna be using that as h2 what i mean by that let's copy this and paste here i'm gonna import this and let's save if i come here as you can see it's h1 and i'm gonna open my console and inside elements let's open up our title here our header and div as you can see it's h2 we are using h1 style but our label is h2 if i say span for example it's going to be still the same it looks like really huge h1 tag but we are using this as span so it's working like that so we don't need that here i'm gonna be using h6 and here let's say lamadev and save okay but in the example remember our app bar it should be blue by default but in our application it's right that because we are using our own team to prevent this i'm gonna just lay my team here we are not gonna use this theme which we created before let's delete and save and it's blue right now okay it was just an example so after this logo i'm gonna create my search bar and my icons but before i'm gonna show you one of the most important thing material ui is a really useful design tool for your responsive designs let's open up our console and here i'm gonna choose device toolbar here and as you can see this is our mobile device if i create my search bar and icons it's gonna be a little bit strange because it's not gonna be probably responsive to prevent this i highly recommend you to toggle your application time to time and just observe the behavior if i create everything right now it's gonna be really huge problem for me to make this responsive to prevent this i should plan my responsive design also so what i will do here my logo is a little bit long for this device what i will do is deleting this logo or shortening it i can make this a little bit short to do that i will write here one more typography and it's gonna be let's say just lama or uppercase so when i open my device i don't want to see this longer logo anymore i just want to see this one so i'm going to give them class names i will say class name it's gonna be my classes remember here we are still using these styles i will say classes dot logo let's say large and for other one let's copy here and i'm gonna paste here it's gonna be local small so if i come here and say logo large and logo small of course comma here okay so what i will say is if this screen smaller than a particular breakpoint don't use this long logo just make it display note so how i'm gonna use media queries here it's really easy i'm gonna search for material ui breakpoints and as you can see extra small 0 pixels small is less than 600 pixels medium large and x large and to use these queries there is an easy implementation only thing visual 2 is writing theme.breakpoint and here we are gonna indicate it's smaller than this size or bigger than this size so basically it means if my screen smaller than this key which is 600 pixels make this background color main secondary and me and for example if it's more than md which is 960 make it primary main it works like that you will understand better right now i'm gonna come here and say make it display no but if my team and breakpoint is bigger than small i will say small make this display block for example let's see as you can see it's disappeared but if i close this toolbar right now i can see this longer one so i can do the same thing for this llama this second one i will just copy this and here it's gonna be display block by the way i'm not sure there's a material ui extension or not or if you check just let me know in the comments okay let's check as you can see it's my longer logo i'm gonna open my device and right now it's the short one perfect so let's create our search button i will come here after typography i will say div and class name will be classes and i will say search and insight firstly i'm gonna need an icon let's search for it i'll say search okay we are gonna be using this icon i will copy and let's paste here i should import it material ui and icons okay and after that let's create our input as you can see search bar and it uses search icon as we did and it's using input based component so i can copy this and paste here i'm gonna import of course and i'm gonna write placeholder and it's gonna be search okay let's check okay it's here i'm just gonna close here we can see better right now we have icon and search input okay we are going to arrange this but before let's take care of this toolbar display because they are really close and if i create here my icons let's say for example icons as you can see it's here so how i'm gonna separate them it's really easy i can make this toolbar display flex and if i say justify content space between my logo will be here search button will be here and icons will be here let's do that i will come here and give class name it's going to be classes and toolbar i'll copy this and here before this logo watch i will say display flags and just file content it's going to be space between let's see as you can see they are separated right now if i say space evenly for example it's gonna give even space between them and if i say center for example they all are gonna be here like that okay let's change this perfect so i can do the same thing for search area that because our icon is here and search is here we can center them but this time it's not going to be just why content because it's horizontal it's going to be align items let's give class name okay we already gave i will copy this and here i'm gonna say display flex flex and align item center okay it didn't work center cluster search ah okay it's gonna be uppercase and right now it's perfect so i'm gonna give background color and when i hover over it's gonna change again to do that i don't wanna waste time i'm just gonna copy and paste from here let's check this search button here as you can see we are going to be using alpha it comes from core and styles let's copy and paste this and by the way we are using hover like that i know it's a little bit strange but it's how it works so i will copy and paste here i'm going to import this alpha of course you don't have to you can use here white or just soft blue it's gonna be something like that so how i'm gonna give border radius of course you can write here for the radius 10 pixels or something but there is one more thing to use it comes from material ui you can write port radius and here instead of writing 10 or something we are going to be using our team again so i will say team shape and border radius so it's gonna automatically give us a border radius something like that okay perfect but it's really small for this screen i can write here with 50 for example you can try and change you can make it bigger or smaller but it looks really nice for me it's going to stay like that and i want to separate this icon and this placeholder let's come here and give class name for this class name it's going to be classes and input and let's write here input and i will give margin and it's going to be white let's say color white and margin left it's gonna be again you can use 10 pixels 20 pixels whatever you want but you can also use your team and spacing is gonna be one let's see okay it's white and there is a space if i make this two for example it's gonna be longer perfect why we are using them it's really useful when it comes to consistency that because we are giving space here 10 pixels for example and gives somewhere else 20 pixels sometimes 15 and there is no consistency if you write just one here you can use same thing for other components and it's gonna look a little bit better okay let's come here and instead of icons i'm gonna create another div and class name will be classes and icons and inside i'm going to create my page what's page let's check here okay it's here as you can see it allows us to use icons and some notification numbers here it's really nice so i can copy this actually this one because it's secondary it's gonna be red let's copy this and paste here let's import this page and here my icon will be mail i'm gonna import this also and let's check this out okay perfect so i'm gonna create one more page and it's gonna be our notifications let's write here and it's going to be 2. okay now right now i'm going to create my avatar my profile picture to do that material ui solution i'm gonna write here avatar as you can see it's here and it's really easy to use you will just write avatar component and your source let's copy this and i'm gonna paste here of course my source will be different because we don't have any static file and i'm gonna copy my source and paste here let's import this and see as you can see it's here perfect so i can do the same things for this icons component sorry div so i will copy this and here i'm gonna say icons and display flags and align item center okay awesome so let's give last name for these pages and we can separate them we can give spaces i will come here and take two of them and i will say class name and it's gonna be classes and let's say patch let's copy this and here i'm gonna use spacing so i will say margin right and it's gonna be team space spacing and it's gonna be two let's see okay helps it looks great but if i open my device as you can see it looks pretty ugly so what i will do is deleting this search input and creating here a button so when it's smaller than 600 pixels we are gonna be seeing this icon i will create here search icon and i'm gonna give class name classes and let's say search button okay it's here first here i'm gonna give spacing and after that we are gonna do something more professional search button and spacing will be the same i can delete this area remember we are going to be using this phrase so for this search button i will say if it's smaller than small label it's gonna be display no okay but when i click this nothing is happening this area will be disappeared and we are gonna see only search button here what i mean by that you will understand better right now firstly i'm gonna create use statehook here and i will say const open and set open and at the initial state you state it's gonna be false okay so when i click the button i'm gonna update my state it's gonna be true and when it's true i will say make this style of this area display known and show me my search input here it sounds confusing right now but you will understand better right now don't worry and i will say on click event if i click this button update my state and set open will be true okay so how i'm gonna apply this condition if you are using material ui it's really easy and it's really powerful you can't do this with css directly so i will write here my open state so basically you can pass any prop to your use style here and i can use this probe anywhere inside this style elements for example i'm going to be using in my search div so i will come here and say if my screen is smaller than sm make my display and i'm gonna create here my condition take the props and here props dot open which we passed here open we are using this and if it's true make this flex so we will be able to see this if it's not if it's false make it known of course code here okay let's see i'm clicking and it's here abs so i can do the same thing for this right side icon steve i will copy this and here for icons remember it's our due i will say if open is true it's gonna be none if it's not it's going to be flex actually i can delete this breakpoint you don't need that and i can delete this flags and we have only one condition here if it's open it's going to be none if it's not it's going to be flex because we don't need it if i close here and in desktop mode we are not going to see this icon so it's not going to be possible to set our state again so i can write my condition here i will say if it's bigger than small make this display now so here search button i will say if it's bigger than sm it's gonna be known so if it's small as you can see i'm clicking and we see this search apps i can stop this here but i want you to make more practice on these props and conditions because the important part of material ui is just these props and conditions others if you go to the documentation you can just find when i watch any tutorials about material ui they are just showing you avatars just great systems typographies but there is no sense llama there is for real-world applications so what i will do is creating here one more button going to be our cancel button and when i click this we are going to roll back everything we are going to see our icons here let's do that i will come here and inside by search to after this input base i'm gonna create one more icon which is cancel as you can see material ui and icon and i'm gonna give class name and it's going to be classes and let's say cancel and i'm going to write here one click my state will be false again oops okay set open and it's gonna be false i will close here actually you can see better okay let's see before as you can see our button is here and i'm clicking as you can see they are here again perfect so i can make this bigger maybe if it's small let's say width maybe 70 percent it's too much i think but we can try no it looks really nice so it works but if i go to the desktop mode my button is still here let's create our breakpoint for this i will come here after input i will say cancel and i'm gonna write my breakpoint team and breakpoints and i will say if it's bigger than small display will be not and it's not here anymore perfect i'm opening my device again it looks awesome i'm clicking and it's here i'm clicking cancel and i keep seeing my icons it works so let's create other components and firstly i'm gonna create my container to do that we can search for container oops it's here as you can see it's regular container bounded by the max bit you can make it fixed and that's all i think for the container so we can use it here i'm going to open my left bar with finished here i can close and instead of do i will say container okay and inside i'm gonna create my menu my each item includes one icon and one text like home icon home page video icon videos something like that let's do that i will say dear and class name will be and let's say item one icon let's say home by the way i'm not searching for them to prevent wasting time if you come here and just write home it's here i'm not writing because i already know i use them a lot so what does i'm gonna write here typography and i'm gonna write my menu name it's gonna be home page let's give classes for them it's gonna be icon and it's gonna be text so i can replicate this item so how i'm gonna see this left bar i'm going to app and here i'm gonna create one more deal because in our application we are gonna see our left bar feed and right bar so in this case i'm gonna create here a container and it's gonna include our whole items but i'm going to give some size for each item for example left bar it's going to be two units for example or three our feed will be a little bit larger let's say 8 units and the right bar will be 3 or 3 units something like that to do that we can give sizes or percentages for each components or we can use grid system let's come here and write grid and as you can see it's really important it uses css flexbox so it's not using grid system let's see how we are using this i'm gonna open this code and as you can see we are creating grids and first it's gonna be container which wraps our whole grid here and after that we are going to create another grids and they are going to be item so it's an item item item and we can give spacing for them and that's all i think you will understand better when i write here let's come here and write our container grid i'll say great let's import okay and it's gonna be container and inside i'm gonna create three more grids this is going to be my left bar feet and right bar and they all are going to be item oops here item okay if you come here there's an epsom example as you can see we can separate them imagine we have 12 units and if you write x as 12 it's going to contain whole your main container if you write 6 it's going to be half of your container if you write 3 it's going to be something like that of course you can use breakpoints you can say for example for x small it's gonna be 12 if it's small it's gonna contain half of the screen so i will come here and say small if the screen is small or bigger than small i will say let's make it 2 and our feet will be 7 and right bar will be 3. so total 12 okay let's write here our components it's going to be left bar and fit and right bar okay let's write for them something and we can see better i will say right bar fit let's open our application okay we have a problem here that because we didn't give any position for this nut bar so if i come here and open up my nut bar and i'm gonna come here and say position static if i do that as you can see it works perfectly what else we can do here we can write for example fixed if i do that we are going to have same problem but when we screw our application and we are gonna keep seeing it it's better option i think so in this case i can give some paddings here for each items so let's do that if i go to the left bar and for my container let's say class name and it's going to be classes and container and here i will say container padding top and i'm gonna be using my theme and spacing let's say 10. let's see okay have some and for others i'm gonna do the same thing i will just copy here for right bar and fit and i'm gonna use container here let's copy this for right bar and i can delete this deal i'm gonna import my container okay for fit i'm gonna do the same thing let's paste here and inside i will write fit and i'm gonna import content right now they all have padding and it's gonna look something like that perhaps so let's take care of these items i will say item and it's gonna be display flex and i will say align item center let's see okay i can give some margin i will say margin bottom and i'm gonna use spacing theme.spacing let's say three maybe more for ok but when i go to my device we are going to be seeing only these icons and spacing will be a little bit more so i will write here team dot breakpoints breakpoints and if it's more than small it's gonna be spacing three but if it's not if it's for mobile device it's gonna be four so if it's for desktop i will say cursor pointer i will close okay so i'm gonna give background color for this left bar so i will come here and say background color team palettes and primary anime okay so as you can see it doesn't contain whole screen here so i can write height and 100 vh which is full screen okay perhaps i can change this color color white so how i'm gonna delete this text as you remember we have class name here and i'm gonna come here and say actually i can copy this and paste here and if it's small screen so down i'm gonna say display none okay but as you can see we have a problem here that because we didn't arrange any size for our grids in the small screen is for desktop our application and i will say if it's smaller than sm which is x small it's going to be 2 again and my feet will be 10. so in this case we don't need this right bar so i don't want to see that i can write here my class name and it's going to be classes and let's say just right so if i come here and see right and for a small screen team dot breakpoints and if it's smaller than sm it's gonna be display no as you can see we don't have right bar anymore and left bar is 2 units and feet is 10 units if i go to the desktop it's 2 units 7 units and 3 units perfect but in this case it doesn't look good i'm gonna change this color let's come here left bar and my container i'm gonna write breakpoint again i will copy and paste and i will say if it's bigger than small background color will be white and i can change text color it's going to be color and let's say 555 okay nice maybe i can give here border border one pixel solid and something light grip but maybe softer something like that let's try okay it's nice maybe i can make this icon smaller let's come here item before text i can write here icon because remember we have class name i can change it so i will say firstly i will give margin because they are really close margin right and i will say team spacing and and one and after that i'm gonna use my breakpoints team breakpoints if it's bigger than small it's gonna be font size 18 pixels for example okay it's better i think and maybe i can give font fade for this text so if it's bigger than small so i'm not gonna write here i'm gonna write here font weight it's gonna be 500. let's see okay it's better right right now i'm gonna write different icons and texts here i will see you then okay it's ready it looks nice if i go to the device mode and as you can see it looks much much better so what about this feed let's open our component here fit we can write here our posts but the better option is creating here another component and i will say post jsx so i will copy here and paste here i'm gonna change my component name it's gonna be post and we don't need it hello of course i should cover this first okay so here i'm gonna write couple posts i'm gonna call my component okay right now i can duplicate this like that and let's see so i'm gonna close here and i'm gonna create card component here let's check that i will write here card it's here as you can see you can create your simple cards it's a good dictionary example here and outlined and as you can see something for social media and wait for image and some information we can use this actually it looks nice let's see how we are gonna use it as you can see we are creating card component and inside we have action area and content area we can write our image component and for the content we can write our title and descriptions and we are going to create our buttons and it has some default effect here it looks really nice so let's use it i will come here and post i will say cart and i'm gonna import from material core and inside i'm gonna write card action area and here i'm gonna write my image which is card media okay let's give class name it's gonna be classes and media and then i'm gonna write my image address i will just copy and paste it and finally we can write here any title it's like alt for html so i will say title it's gonna be my post okay and after that let's say card content and inside first we are gonna have title typography and i will say my first post and it's gonna be variant h5 and one more typography and it's gonna be body and let's write here something using gloria so let's check as you can see our posts are here but i can see my image card media and it's here it looks okay but let's give some height for this maybe that's the reason i'll say media and height will be let's say 250 pixels by the way you can write this directly like that it's exactly the same thing let's try ah okay it's here we need height okay so what about our actions here our buttons i will come here after action area i will say card action okay and here i'm gonna create two buttons button and first one will be let's say share and other one learn more and i'm gonna write here my size it's gonna be small small buttons and color will be primary let's see okay and i can give some margin here so i will come here and say class name classes and cart let's copy this and here i will say margin bottom and team spacing it's going to be 5. i hope it's enough let's see okay it's good actually maybe i can give here margin also to do that you can give here class name and say margin bottom but one more thing you can do is writing here cutter button okay there is a little bit more space perfect i will just duplicate this text maybe it will look better but as you can see this body text is a little bit small if i change this to body 2 ok it's much better i think because remember the beginning of the video in the typography section we have h1 to h6 and body and body two and as you can see our nail bar is always here because it's sticky so i can do the same thing for left and right bar because when i scroll the page it looks empty so it can stick here how i'm gonna do that i will come here left bar and my container here i'll say position sticky and in this case i should indicate any position and it's going to be top 0 so it's going gonna stay on always top zero i'm scrolling as you can see it's here let's open our device it looks really nice and i'm scrolling it's here but here this image looks a little bit strange maybe i can just make it smaller let's come here post and for media it's here i'm gonna use breakpoints team breakpoints and if it's smaller than sm it's gonna be height let's say 150 okay it's better writing so i'm gonna create another component and it's gonna be at let's copy here and paste here i will delete this container and change my component name add and i'm gonna delay it here and we don't need container by the way i can delete this and delay it post okay i'm going to app.js and here i'm going to write my component but make sure that it's your component because first thing is ir icon so i'm going to choose my component and close this tag and let's see if i scroll the page as you can see it is here but i will make this position absolute and i'm gonna create button here to do that let's check out our documentation and i'm gonna search for toolkit tooltip i'm sorry okay it's here and there is some examples here and when i hover over as you can see there is a text under and it says add there are some other examples like that you can create normal button but for the tutorial i just want wanna show you something like that it looks really nice okay i'm gonna use this one actually i can just copy and paste so i will paste here let's import our icon fab and tooltip let's see oh there is a problem tooltip there is no add by the way our component name is add also that's the reason i think let's come here and i will say icons our icon name is add also so i'm gonna change this name it's gonna be as ad icon so i will write you that icon so there will be no problem i hope and right now it's here perfect so i can change this color it can be blue it was secondary i will say primary and for this class name actually i can change it let's say fab and here i will say position fixed you can make absolute also but i wanna see this always here so i'm gonna make it fixed and let's give some position it's going to be bottom 10 and right of course there comma okay let's see i'm perfect let's see and it's fixed maybe 20. okay it's better writing right now what i'm gonna do is creating use statehook and create open and set open and when i click this we are gonna create here a model so let's come here i will say const open and set open we did this before remember it's going to be similar not the same but similar use state and at the beginning it's gonna be false and when i click this button i'll say on click and it's gonna be set open and it's gonna be true okay so how i'm going to create model let's come here and search for model it's here and as you can see there is an example when i click it's opening model here and when i click somewhere else on the screen it's closing apps so let's create after this tooltip i will say model i will import and inside let's say hello i'm gonna write here open and it's gonna and it's gonna be open up when our state is true our state here let's see but i'm gonna create here container first i'll say container and inside let's say my model i'm clicking and as you can see something happened but we can't see it here okay it's here right because we didn't give any size for our component so let's do that i will come here and for the container i will say class name it's going to be classes and container let's copy this and here i'm going to say which for example 500 oops i can't do like that like css with it's going to be 500 and height let's say 550 and background color it's gonna be white and i will give position let's try before whether it works or not okay perfect so i can center that i will say position absolute so if i say top 0 and bottom left and right and if i write here margin auto it's gonna be centered oops didn't work okay i have a mistake here okay perfect of course it's not the only solution for centering but it just first thing came my mind okay for the desktop it's nice but if i go to the device as you can see it looks a little bit strange so i'm gonna write here condition i'll say team and breakpoints and if it's smaller than which means stone and small and i'm going to say width 100 vw and height 103h which is full secret let's see okay right now i can create here a form so we can enter our title post description and other things what can we try for example select radio and text fields something like that so it will be nice i think let's do that inside my container okay let's delete this and create a form i will say form and i will give class name it's going to be classes m4 so i will say autocomplete and it's going to be off that's because i don't want to see my credentials there okay let's create first item let's create view class name is going to be item results item and my first item will be text field here like that it looks really nice let's copy this and paste here i'm going to import and label will be title let's see something like that and it's a little bit big i will say size small okay nice i can make this input full screen a hundred percent to do that you can give class name but i'm gonna right here quickly as i said you can use it like that if you are not using lines of codes so i will say a hundred percent so i'm gonna need one more t and it's gonna be description and style a hundred percent again something like that but it's not going to be only one line input let's come here we can change it validation multiline you can check everything here so let's check it how is the usage variant is outlined and we can give any rows here and it's going to be multiline actually i can just copy here and paste here i'm not going to delete label and size and i'm going to delete this label okay let's see okay perfect i will change it tell your story okay nice we are gonna handle this margin and padding inside our form don't worry but before let's create something different i'm going to open new itemd here and this time let's use other text fields as you can see there are some select buttons here we can use them they look really nice you can use icons for texts there are tons of things here okay let's check this how is the usage as you can see we have text field again and after that we are using an array and our all items are here okay we can do this without any array so let's come here and say text field and this is going to be select type will be select and let's say label visibility and here my items first one will be public and my value will be public again and i'm gonna duplicate this this is gonna be private and it's gonna be let's say unlisted let's see okay there is no value here let's write something value let's say public okay when i click i can choose any of them and when i click out of the box it's gonna be closed perfect so what else i can use i can use radio let's come here i'm gonna choose radio here and as you can see we can give some options and user can choose one of them disabled option we can use it also and other solutions okay let's use it actually i can copy and paste it i don't want to waste time so here i'm going to create another div and paste it let's import them import this label and here i will write radio again and import from our core okay of course class name for item and here i can write any form label like this i forgot copying this i will copy and paste and let's import this also and here it's not going to be gender it's going to be let's say who can comment like that okay let's delete them we are not going to select anything it's just going to be design and here for the first one value and label will be everybody and second one let's say my friends for example and it's gonna be nobody and for this disabled one let's write something creative custom and we will say custom but it's for premium accounts so i'm sorry you can't click it awesome and we can't click this one but they are really big maybe i can give some size here let's choose all of them and i will say size small okay it's much better i think and after that finally i'm gonna create my buttons let's create another do i will copy this and i will create two buttons button first one will be create let's write here our variants and it's going to be outlined and color will be primary which is blue and one more thing it's gonna be secondary and here i will say cancel let's see okay perfect but i can give margin here so i'm gonna just write here style it's just one property so i will say style it's gonna be margin left sorry right and it's gonna be just too many for example let's see okay nice so when i click this button i want to close this model so what i will do is really easy i'll say on click event and it's gonna be set my open remember it was true but this time it's going to be false i'm clicking and it's close open closed apps so what about this style let's take care of this form and these items i will come here after container sorry it's for breakpoint here i'll say four i will give some padding it's gonna be team.spacing let's say two like that and for items margin bottom and again team spacing it's going to be 3. like that it looks really nice i can write my title description and set my visibility and who can comment i have typo here let's correct this okay who can comment okay what else we can use let's make it fancier when i click this button i wanna see here a line and it's gonna say the post has been created or something like that it's really easy on material ui again i will come here and say snack bar here so i'm clicking and as you can see there is a notification here of course we can choose any warning sorry this is error this is warning information and success we are gonna be using this one when i click this button as you can see it shows up here and after couple seconds it gets disappeared okay as you can see snack bar and alert this is a success message i'm gonna copy this and i'm gonna paste after this model i'm gonna import this so how we are gonna use it let's come back i'm going to open this code firstly as you can see our alert comes from material ui lab so i should import this library of course you don't have to do that but i want to see that green notification it looks really nice so i will say yarn add material ui lab and after that i'm going to create my alert function and i'm going to import this okay now after that let's check here as you can see auto height duration is six seconds maybe we can do it three seconds or something but to use that you have to create your handle close function like this and there is a condition here if the reason is click away it's not gonna run anything otherwise the set open will be false of course we already have open and set open but it belongs another tool remember our button so we should create new use state by the way i know this function is a little bit confusing but it how this auto hydration works so we have to write this so don't worry about that so i will come here and paste of course it's not going to be set open let's create another one open let's say alert and set open alerts it's gonna be false so in this case i can replace this okay so let's come here i wrote everything here i know you can create another components and separate them but i just want to show you everything inside one component that because it's easy to understand let's save our file and let's try by the way it's not gonna be open it's gonna be open alert let's see i'm gonna open my model and if i create something it doesn't work because we didn't write our function i forgot that for create here i will say one click and it's gonna be set open alert it's gonna be true let's see it again i'm clicking and it's here and after six seconds it's gonna be disappeared i can change it let's say three or four okay but it shows up here but i wanna see this for example here how i'm gonna do this if you come here and as you can see you can change the position top right bottom right bottom center okay so we are going to be using this one so how is the usage let's check and here as you can see we have anchor origin and we are providing an object which contains vertical top or bottom and horizontal left or right so i can copy this it's going to be bottom left and i can write here anchor origin and i'm going to paste this object i will save and let's see again i'm clicking and it's here after four seconds it's gonna be disappear perhaps so we'll almost finish our project what else we can write here i didn't think about this but we can check if we find something nice we can add on our right bar so let's add our friends for example where is the avatar okay we created our profile picture and other options here for example you can just add letters here you don't have to write any image url for example if user doesn't have any profile picture you can use these letters or here there is a avatar group we can use this group and see our friends avatars so i will copy this there is nothing special here so i will open right bar and here inside container i'm gonna paste it but before i can create a title let's say typography and i will say online friends and here i will paste and i'm gonna import my components avatar group and avatar so i'm gonna add here to full url okay let's see as you can see it shows the first three awater and then it says there are two more so if i change here two only one avatar let's say six and i will say 6 7 8 for example as you can see it works like that by the way if you don't have any profile picture let's delete this for example as you can see automatically it shows this no avatar image perfect i can change this title let's give class name if i write variant let's try i will say h6 no it's too big so i'm gonna use class name class name and it's gonna be classes and title i will say font size let's say 16 and font weight will be 500 a little bit thicker and i will give color maybe space here you can right here or you can say cutter button okay perfect what can we add here let's see we add badge snack bar we can add slider okay it's not image slider it's for inputs maybe image list okay it can look nice we can try i'm gonna copy this and here i'm gonna add another title i will move this here and it's going to be let's say calorie for example and after that i'm going to paste this we don't have any array i'm going to delete this let's import and list item we don't have array so we don't need this and i can delete here and let's paste some images actually i can use them and i'm gonna replicate this six six is enough i think and let's choose other ones as you can see it looks really nice if you want you can change this height only thing you should do is writing here a hundred for example like that and if you want to you can change this column number for example just two in this case it's gonna look like that if you say four for example it's gonna look like that it's really useful if you try to do this with only css it can take really long time but thanks to material ui it's really really easy so let's change it again 3 and by the way i will give space here so i will come here and actually i can write here style it's only one element so i will say margin bottom it's going to be 20. okay perfect what else we can use i don't know there are many things here maybe we can adjust categories let's write another title by the way again i'm gonna give margin bottom so let's say style and margin bottom it's to be 2080 okay i'm not sure should i do this two or three both of them looked really nice but i don't know doesn't matter let's change this i will say categories and here i'm gonna add my links if you search for links it's here and as you can see there is basic link here i'm gonna copy what else we have okay only this i think you can change color or variant so i will just paste it let's import and i'm gonna delete this let's say sport for example and i will give class name classes and link okay i can duplicate this put for example movies man let's say science let's see i can change this variant it looks a little bit ugly variant and it's going to be body too okay i can separate them and make them bigger okay we have class name let's come here and i'll say margin right it's gonna be team and spacing let's say two and color will be a little bit softer and font size let's say 60. i should cover this with code okay let's see okay nice but as you can see it's too close to this button i can see this last letter what i can do is separating this list of course there is a easy way to do that i will search for divider [Music] okay as you can see you can divide your items like that like this or as you can see like that we are gonna be using this one so when we divide our items the second side is gonna move to other line so how i am gonna do this i will say divider after two items i can say here to either i will import and after that i'm gonna write flex item so let's see as you can see we divided them 12 of them are here and second part is here i have some of course i can give space style margin bottom it's gonna be 10 style okay maybe less five is okay i think okay perfect so i can add two more i think it's gonna look better so i will say what can i say music and here i will say life okay perfect and as you can see it's not sticky so i can do the same thing as we did for the left bar remember we set position sticky and top zero so i will paste it and also so we can make more examples but it's totally enough for this tutorial i think we learned a lot of things and it looks pretty nice for the beginning it's an epsom project after creating this example you can go to the documentation and search for others and i know as i said before if you have never used any css framework or design tool like that it can be confusing but after a couple examples couple projects you are gonna see it's a time saver and after couple usage you are gonna memorize some tools here you don't have to go to documentation and check you're just gonna write your code by your heart okay it's that easy i hope you enjoyed the tutorial if you learned something new today please subscribe to the channel and like the video and if you write any comment even just one word i would be appreciated and it really motivates me and don't forget to follow lamada social media accounts you can ask your questions there and you can find your coding body you can share your projects ok that's all i think i hope i will see you in the next tutorial goodbye

Channel: Lama Dev

Views: 24,049

Rating: 4.9877553 out of 5

Keywords: material ui, material ui tutorial, material ui course, learn material ui, material ui crash course, material ui full course, react material ui, material ui react tutorial, material ui vs, material ui grid, material ui navbar, material ui box, material ui form, material ui modal, material ui design, material ui real world project, material ui tips, react, react course, react web design, learn react, react project, lama dev, material ui responsive

Id: lKZiXQWnlUw

Length: 105min 29sec (6329 seconds)

Published: Thu Aug 05 2021