Complete React Material UI Tutorial Introduction

quick demo of this video series with this video we have shattered a video series on building complete react app with material you are using practical examples in upcoming tutorials we will discuss things like customization of material UI components and theme form design and validation with commonly used controls tab with paging sorting and filter operation pop-up dialog or modal pop-up confirm dialog notifications and much more so this is the complete react material UI tutorial will be discussed all you need to know to create a beautiful react application what's up YouTube welcome to code affection so this is the first video in the series of complete react material UI in this tutorial we are getting started with react and we are going to discuss the material UI basics or the foundation forests of the videos so do not skip this first video here each and every points will be discussed with a sample project from scratch before getting into this topic I would like to thank for your paypal donations for my previous books in order to make more helpful and quality tutorials like this you can also support me through PayPal donation I have given the link in video description and inside the first comment of this video so without further ado let's look how we can design a beautiful application with material UI before then let me tell you how this framework comes into the picture so here is the official website for the framework material - UI comm material you are is an UI framework and which is a react implementation of Google material design if you don't know Google has already created a design system called material design so here is the official website for the system material dot IO it has detailed documentation on this design system the appearance and behavior of each components are deeply documented inside this system here nowadays most of the Android devices are using material design because Google mobile development works like waddling or flat or using material design components by default nowadays all of the Google products like Gmail YouTube are using material design components and by inspired from these products more and more developers are interested in material design as a result of that here we have the reaction of material design which is called as material UI like this angular has its ocean of material design called as angular material I have already done a series of videos on angular material I have given the link in video description now let's look how we can make use of this material UI in action first of all let me create a react application inside this folder directory here so let me open command prompt from the same folder directly so you can use this shortcut inside this folder path just got CMD then hit enter so here we have opened the command prompt from the same folder directory to create a new react application you can execute this command and px create react app and then name of the application it would be something complete material UI system hit enter it may take a while to complete this process of creating new react application so please be patient finally as a result of this command execution here we have created a new react application inside this new folder here now let's navigate inside that folder to open this project inside vs code editor you can do this code space period hit enter so here we have the brand new react application now back to the material UI documentation here click on get started here as per the documentation here first therefore we have to install this material UI package so let me copy this npm installation command now let's execute that inside the vs code terminal once you are done with the package installation back to the documentation here material UI was designed with Roboto font in mind since I also like this Google Roboto I just want to add that into my application it is completely optional so let me copy this phone stand sheet reference and back to the application here then open index dot HTML here and then I will paste that just about this head end tag here now let's specify this phone inside our stand sheet here so here is the global stylesheet index dot CSS the body of the application is already using this Roboto font we just need to give the first priority for this Roboto font so let me move this phone to the first now back to the documentation here since we use phone icons in our application let me copy this link reference and then I will just paste that just below this font family reference here and we also have to install the corresponding NPM package material ui /i cons so let me copy this installation command and then I will just execute the same command here so here we have done with the installation of required packages now let me run this application so NPM is charged so this is how the fresh react application looks like inside this application here we have the route JavaScript file which is index dot J's along with the index torches here we have the global statute index dot CSS but we have already updated the form family and this javascript file is executed over this index dot HTML here so for the whole application this index dot HTML will be though here we have the HTML declaration here we have the head part and the body part inside the body you could see this div with the ID root and which is replaced inside this index process with this component app so this div is responsible for the default be of the application here - style elements inside this component we have a special we have a special CSS file with the same name AB dot CSS now let's start customizing this app first of all let me clear these CSS rules then I will get rid of these default elements here we don't need this logo inside this app component I will just add this do and let me start with this text here we go now back to the application so here we have the same text I want to add a new separate folder for this app component here so let me create a new folder app and I will just move all of these files into the folder here as we move along towards creating a complete material app the application will get bigger so it is important to organize everything under control so we have more all of these files into the app folder now we have to update the import statement first of all here we have the index dot HTML I will just update this imported menhir now back to the app component there is nothing to update so let me save this back to the application now let's talk about the layout of the application that we want to build so here we have the application layout so first of all we will have this side menu to the left at the top will have this header inside any page we will have a page header and a page content so this is how we are going to design the application so first of all let me show this side menu so then I will create a new folder called components I'm going to create a new component for side menu so side menu DOJ's inside then let's create a new component for that I will use this snippet react snippet our FC react functional component we are going to create all of the components inside this application with react hooks now let's show this side menu inside the app dorje is file here side menu here and let's import that here here we have a red squiggly line saying there should be only one parent element meaning there should be only one parent outer elements so I'm gonna enclose all of this with this react fragment okay so this is how we can get rid of that error so this is basically a short representation for react dot fragment okay so actually you have to do this but using this shortcut we just need to do this so this is how we can get rid of that one parent error now inside this side menu component here for now we just reserve a space for side menu for that we have to add some height and width with background we can do that with CSS so I will just add this class normally we will do this class is equal to something on side menu but it won't work with react we have to use this attribute class name now let's discuss how to style an element in react application so here we have applied the class side menu now let's define that inside the global style sheet here index dot ceases so side menu then I will set the background color with this custom color let me save this back to the application so that's in here we have reserved a space for side menu with the help of directs SS rules like we used to do in traditional applications but in almost all react applications when we work with material you I will be using the sx index to define CSS source so here is the official documentation the sex in Jes dot org so basically this index allows us to define these rules with the help of JavaScript the main benefit of this method it allows us to define CSS rules dynamically for example we can define CSS rules in with respect to within parameters that we can see in a bit and we can reuse such JSX stars in various react components in order to work this approach we have to install some of the plugins that is listed here some of them are optional you can see that it is already the inside react application by default let's expand this node modules folder here so these packages starting with JSX allows us to work with jss in our react application it will be there by default in any react application now let's look how to convert this direct method into JSX index for that let me cut this part here into JSX index inside this side menu component here so first of all we have to define a constant object like this I will name it as Styles so it will be a JSON object like this and then you can name it as whatever you wish side menu is equal to another object inside this object we can define these styles here so first of all we have display is equal to flags and then we have flex direction since - or - is not valid in a JavaScript identifier we have to remove that and the first character after that be uppercase so flex direction and then we have position in case of this background color also we have to skip we - and we have to uppercase the first letter after that so background color so this is how we can define CSS source with jss now let me get it off these stars here so here we have defined this role with Jace's we have to convert this into their original sin - in order to do this conversion we are going to use two methods from material UI they are with styles and make styles let's do the conversion with this makes dyes function here so we can call this function make styles into this function we just need to pass this JSON object that we have defined here now we have to add the import statement for these functions make stars and with styles so this function will return another function we can call the function here classes is equal to I will call the function Stars so this function returns another function and it will be stored inside this constant I want to rename this function with something meaningful so use the shortcut f2 or click on this option here use styles so inside this constant there would be an object with the Stars that we have defined this object here so in order to apply this rule that we have defined here we can do this first of all we will have a pair of curly brace meaning we are going to write something in JavaScript so classes dot side menu back to the application that's it here we have done the same like we used to do with pain CSS in order to see what really happens in background let me log this process object here console dot log classes and let's inspect this application here so we have the classes object inside that you could see the side menu that we have specified here but it is assigned with a string now let's check this dev here so here we have the div that is returned from this side menu component here and here you could see that this class is replaced this property side menu is replaced with this string that is the inside the object the class name is replaced in place of the side menu here and inside this Styles tab here all of these styles that we have applied inside this are JSX here is converted into corresponding plain CSS rules flex direction and background color is properly converted into pane processes and if you click on this style here you could see this section for this style it is automatically created or converted with respect to the JSX index here so this is what happens in background when we define CSS rules with JSS so how this application in order to do this conversion I will be using this function make Styles now let's look how to do the same with this function with styles first of all we will define an object like this so let me remove this from here I will name properly this constant here with style and we don't need this constant here and I will store this component function in a separate constant so constant is equal to side menu so here we have defined the component function with an arrow function and at the end of the file we will do this export so export default side menu and we will call the function here with stars into this function we will pass this object here so style and we will wrap this side menu component in another pair of parenthesis require this function with charge with this parameter and this function related another function to that return function we have passed this component side menu as a parameter so these types of functions are called as higher-order functions now in order to access the Stars inside this component here let me remove this log statement here the converter Stars can be accessed through the probes parameter of the component so constant we can use this syntax destructive syntax like this process is equal to probes so you can use either of these functions here to do the conversion so this is how it works first of all these stars that we have written here will be converted into a plain CSS source with a custom name replace the SS rows corresponding to this index will be injected into the website like we have seen here and there will be a custom class name like this and that class name will be stored inside this our property here so that custom name will be replaced in place of this property here so this is how it works in background actually jaysis allows to have various variations in syntax like we used to have with the pain thesis rules that we can discuss in a bit so far we have reserved a space for side menu in future if you want to see me implementing or designing a side menu we can do that also now let's move to the header part here so back to the app component here then I will have this div inside it they will be showing all of these header page header and page content so we want to apply some margin for this and a div with the width of this side menu here so let's do that with this index use Styles function and we can call the function here make Styles click on this autosuggestion here it will automatically add the impose statement at the top here now into this function we can pass the object like this I will be using this key mein now let's add the padding the same width as that of the side menu and then I will set the width to 100 percentage now to access these stars we can do this constant classes is equal to we can call the function use stars now let's apply the class here class name is equal to plus s dot me now let's add a component for header and we can do inside this folder components header now let's create a functional component with the snippet power of C so in order to display a header we can use a bar component from material UI so we are going to add the fourth component from material you are into our application so you can search for the component here like a bar and inside these solutions we have two sections components and component API inside this component section we are having some examples on using this component a bar and inside the API part here it exposes all of the related classes and properties from the component can see all of these components from this side bar also inside the components you could see the examples on using that component and here we have the implementation of the component inside this API section so here we have the app bar so these are the various examples on using app bar in our application so back to the application let's add the app bar here AB bar like we have some various examples on using the component we also can see the API documentation here containing all of the exposed properties and CSS reference and now we want to apply this property position and it has all of these valid values we are going to apply this static so that it will have the normal behavior nothing else so I will set the position as static here inside that we need a tool bar will be having this component whenever we work with header of page or website so let's add that here to the app component and let's show the header part here so here we have the app bar now let's start adding components into the app bar here first of all in order to organize or arrange elements or components inside the app we have to familiarize with the grid component from material UI this is similar to bootstrap grid system so basically it has 12 columns we can divide them as per our requirement as you can see here first of all we have to add this component grid here we have to mark this as a container yeah and in order to show a grid column we will use the same component grid and then we have to add this attribute item okay now let me copy this and this thing here now let's look how we can assign number of columns to an item here now let's go to the component API here here we have all of the available properties now along with grid component in material UI we also have to understand break points in material UI they are divided into five break points based on device screen width extra small small medium large extra large and you could see the appropriate break point width here you could see these break points as a property inside this grid component here with these properties we can set number of columns to a great call now inside these properties description you could see this defines number of grids B component is going to use and it's applied for the specific break point and wide screens if not overridden so if we set em D is equal to 4 then that component will take 4 columns when screen width is within this range here and suppose for the same component you have not set the large screen width or the extra-large screen width and the same configuration of forms will be applied for the wider screens also so that is what we have meant with this description here now with this example here I would like to show you how you can make use of material you I agreed for responsive layouts as per the code snippet here we have a grid and it has two grade columns so this same source code will be rendered on different devices based on the device screen width for example suppose here we have a mobile device for both of these grid columns we have set access attribute as 12 columns so in small devices both of these grid column will take end up with horizontally inside the screen the same code will be rendered differently in large devices with screen width greater than medium break point which is mentioned here so up to this brief it will take 12 cones for the force and second grid and about that width it will take six columns each so in this way we can use material UI gear system for designing responsive layouts so this will apply number of columns for an element in small screen like we used to do in bootstrap called MD 6 or some 6 like that let's set the column width the property SM so SM is equal to 4 and here we have to understand one more thing when we are passing values to an attribute if it is a string we can enclose them in course otherwise we have to enclose them with a pair of curly brace like this it is applied to numeric numbers also let's apply the number of columns here also so 4 plus 8 becomes 12 here we can differentiate them separately so let me apply some border for that I am NOT going to create a separate GSS object like we used to do here when we have few CSS to apply you can do that in line also so for that we can do this style since we have to pass that inside an object we can do this border it is possible to use the SS index without using those functions or make styles or you is just because of other packages that we have added into node modules here it will take care of these in line so let me apply the border here border let me copy this and pissing here with a black bottom let me save this back to the app so here we have the first column with four columns and the rest of the eight columns here we are seeing this border as a line since we don't have any elements inside the create items so let's start adding them first of all I want to have a search box in order to search through all of the pages inside the application for that we can use this component from material UI input base and inside the second column here I want to show icon buttons like this so let me add that here icon button inside this icon I want to show a notification icon with active number of notifications for that I will be using a combination of badge and the material icons here so let's look how we can do that first of all we will have this badge inside that we can have the icons or all of the available material icons are listed here now let's search for an icon for notification I will select this one so let me copy this import statement and I will paste that here now let's add the icon here notification nun icon now in order to show the number of active notifications we can do that with this badge content and then we can set the color also so color is equal to secondary so by default material UI allows us to combination of two colors for designing our app one is primary and one is secondary so this is how the default color looks like for primary and secondary now let me copy this badge and pacing below that suppose with this bad we want to show a number of Android messages so first of all let's look for corresponding icons here I would select this one so let me copy this import statement that will paste that here I will use that here I will be using this primary color sorry we have to have icon buttons for each badge so let me add one icon button for message also so everything is properly formatted I hope now we have to have one more icon button for log out for that we don't need the bad so let me remove that from here let's look for an icon here I'll be using this one so let me copy this import statement and let's paste that here okay now let me save this and back to the application so that's it here we have all of the icons that we have added the search box is here it's not visible now let's remove this water for the grid column it's not necessary now I want to move these icons to the right side for that for that we are going to use some tweaks here for that first of all I will remove this as some attribute here so that this grade column will take the width required for the inner child here now let's do the same here also and in between that I will add another grid and I will pass this SM here so this is similar to passing true here this also comes under the item or column grid so this is what happens these forced and third column here will take the width required for its inner child and this middle grade will take rest of the space and this way we can float items left and right in order to see the icons you have to scroll to the right here so in order with this problem in almost all application we have some general comment CSS rules like we will be removing all of the body margin to 0 padding to 0 etcetera like that like that there is one more comment rule for every elements you could set this box sizing is equal to border box so this is what happened when we applied 320 padding here so the element moves to the right side so that is what happened here so this is a common CSS rule applied to almost all applications like that we have some common rules so in order to apply those common rules we have to do this inside the parent component app component here you can do this we will add this component CSS base line so this will add such common CSS source and that way we can avoid adding such comment rules into our application so all of those such common rules are added into application you can check that in our website here all of those CSS rules are added inside this section here Mui CSS baseline so these are the common CSS rules applied to our application we don't have to add that separately just add this element here then it will do the rest of the job so that's it guys we have completed with the first video in the next video also we have to cover a few more basics on material UI which is the customization of material UI components and theme on top of these basics we will be designing our application with form tablet model pop up etc so do not skip this video and the next video which is the basics for rest of the video sees all of the upcoming tutorials link will be the in video description and inside the first comment of the video once they are uploaded if you found this video helpful please thumbs up this video and for more Overson videos like this please please subscribe to this channel Cod affection please share this video with your friends and colleagues so that they can also find this helpful have a nice day bye

Channel: CodAffection

Views: 40,510

Keywords: material-ui tutorial, react material-ui getting started with react material-ui, introduction to material-ui, complete react material-ui tutorial, material ui grid, style components with jss, material ui with example, how to install material ui, CodAffection

Id: bL-ZwwF6wTc

Length: 31min 10sec (1870 seconds)

Published: Mon Jun 29 2020