Everything about antd version 5 in react js | New release | typescript #react #antd #typescript

hey hello hello hello um and I hope you are doing good and everything is fine so today we actually gonna talk and build something out of this thing which is and design version five and I think it's going to be very very good so you know recently uh I stumbled upon this release and I was actually seeing what has changed so a lot has changed but a lot has like the coding post point of view from what you already have a lot has not changed right so things are like quite the same so we'll we'll actually be going through this uh in this particular video and we'll see what all things have been changed and we'll try to make again the dashboard of course you know East OS dashboard is the best our our thing right so we'll be making a dashboard again and we'll see what has improved and will maybe we'll both be learning something by the way this is in the stable release right now it's not in beta and diversion 5. so that's the plan right so uh by mistake I don't know why I have launched Android Studio which I was not which I did not wanted to do I wanted to launch item which is a terminal app right so let's first you know very quickly create a create a project that to invade right so we'll go to our desktop and then maybe projects folder right and then we'll say npm create ah wheat at the rate latest we'll be using uh beats latest version right and let's call it a cool dashboard we'll be using something called react and uh we'll use type for this particular project right by the way uh server side component right that the third option that's a very also a very cool component maybe I'll be creating a video on that as well very soon so stay updated right okay let me drink some water first okay I'm sorry I am feeling hmm so far so good okay so we have our project created right so it's a cool dashboard as far as I can remember and what I'll do is I'll just uh maybe I'll run npm IE which will install all the dependencies for this particular project and then we'll be running it okay wait wait wait by the way uh till the time this building meet my new plants this plant's name is ugao and he is he's really good bring this in Focus yeah it's really good meet ugao I hope so hey Google these are the people who are learning Andy kind of cool okay so if you have any message just comment down below I'll tell him I promise okay so then we'll run npm uh npm run Dev right I don't know why I do run but still npm run tab which will basically start our application on Port 515173 right uh if I could open five one seven three and it could show you this is what you get by default this this nice hover effect and this is the default website but the problem is we do not need it so the next thing what we'll do is we'll import yeah zoom in ah why do we have to do that because oh let me actually I know the trick okay let me actually increase the bond size of this particular thing how to do how do you do that uh um here you go let's do it something like that okay so so we'll do npm I and D that will basically so it's in stable and it's released so it will be basically installed uh directly so damn installed right so uh Andy has been installed and let's quickly open it up in the in the vs code the editor of choice the Holy Grail of programmers oh we had a new release of vs code that's cool what do we have that's cool we'll go through this later on maybe we'll see what all new things is there in the this latest new version of vs code uh I just want to do something first thing first uh you know if you already remember this is the folder structure right the default folder structure and we'll go to the app.ta section we'll simply remove this whatever they have provided by default and we'll also remove this app.css we'll be removing this logo we'll be removing this class we'll remove a lot of things that's kind of cool right and we'll have this app now this should be blank I think yeah but this uh this black the reason why this is black is it can go to the mains style file which is index file you have a lot of styles over here let me get get rid of these as well right so let's remove these and here you can see oh the more man okay I just like the font family so we'll keep that but other than that everything is gone right the next thing the next important thing while setting up Andy is actually uh in your main in in create react app it will be index.css right just import the this there's something called reset file I don't know why they have named it that way but whatever it is what it is so we'll call it reset.css right I think it is reset.ucss yeah it is right so once you import this the next very important thing is to actually have a conflict provider for your app now what is conflict provider it's basically a configuration like a thing which you can like where you can configure all the primary secondary and background colors of your entire and the applications and it's quite cool right so if you want features such as dark mode or anything like that it will be really helpful so what we can do is we can just go over here and we can say uh config provider right config provider something like that and then wrap our app inside this config provider right in CRA like create react app just uh you'll be having this in the index.ksx right so this is the app and then what you can do is you can provide a property to this known as theme and now theme will have something called uh I believe token right token have a lot of options like background color foreground color a hell lot of options right you can use context or a state simply to toggle between dark and light and whatever mode you want you know pink pink mode someday right I hate the color pink but still let's move ahead okay so the color uh so right now what we want to change is color primary I think there should be something about color print yeah so this is the primary color of all the controls everything which you see on the website so let's go and pick some good color so we'll say color right and quickly pick some good color this is this is the color which I don't like I like like something like very dark purple something like that right so I picked that up I pasted This Here and Now whatever you do will have this particular color as the primary color I hope so this is visible right yeah this is this is visible I believe okay so uh I think that that was kind of like the thing uh that was kind of like the thing now uh basically we'll start be using it so for just like just showing you what has happened till now what I'll do is I'll just make a test button right I'll I'll keep the type as primary right so if I keep the type as primary and if I just go and show you this see this does have our primary color which we set in the config right that's what the config is for right if that makes sense so uh yeah whatever let's reset the so if you go to the Andy uh you know uh documentation right so if you do components right there are a lot of like okay I know it is the release what do you want from me okay let's get lost okay okay so uh a lot of new components has been introduced like uh you know if I could show you like there is some action buttons and all but we'll go through them but before that I'll just give a general overview of and D what Andy is if you are not familiar with if you already familiar with that kind of cool just look this is version five few things here and there have changed which I'll discuss so I will get rid of this button now uh there's something very interesting called layout in this now we'll just use that layout and what I'll do I'll also create a Styles holder which will hold all my Styles and this is dashboard.css right and we'll import our CSS file as well so dot slash style slash dashboard.css right so we have this up in there so basically what is layout layout if you don't already know I know a lot of you have already seen my uh my Andy video you know no offense just see it twice the revision recall things will be good then right so uh I'll be just showing you the layout weight if I could find it if I could find it I am pretty sure okay uh it will be in the top man I'll see that's the layout right oh that's still layout so basically layout is like what kind of structure General structure do you want for your app so you know you could have like this structure or like a sidebar and a bottom Navar a lot of examples has been given over here but I would recommend you just what just watch what I'm telling you right now because you know that will give you a very good sense right so uh let's start with this right what are things called in a layout so in a layout the top thing you know where you have the navigation bar and stuff that is called a header the middle section the main uh the main area where you have the content is called the content section the putter section the slider section just remember these right but there is a very weird thing you know I'll just show you right so if I just create a let's say if I create a header right for example if I create a header right and I call it test all right and if I create a cider right and call it test again you'll see you know if if I just go here right if I really refresh stuff you can see this is the cider stuff and this is the header stuff uh you know I might need to give some uh layout or or container something like that right so you know I might have to give this oh that would not work but that would work wait I've directly imported it so if I just uh you know write container and if I just say height is like 100 VH is what we want right if this is okay with this you can see you know uh width also like with also we want 100 vertical width right so if you do this things go weird right you see this right but there's a trick right I'll just show you right so how you do this is if you want a cider right you need to place it inside oh wait is it due to like due to like we do not have a Content yet let's add a Content I mean this is a content right so this is the content section now you can see this is not right right all right right so the top bar is here the sidebar is here there's a Content section things are messed up right but the solution is to basically place the signal content inside other layout and design taping team if you're watching this just tell me why do I need another layout inside the main layout yeah now things are good right so you can see this is the content section this side and is the top bar right so things are good now things are happy now okay inside the header you can just definitely set a theme or I think color or something um yeah let's let's actually make the bag like the background white because I hate the headers dark background let's call it header let's call it background uh color maybe I would put it white or something copy this header from here paste it as a class over here and that's it yeah so no change man no change that's kind of insane okay uh what should we do headers uh is a theme color white what is that does that serve our purpose no how do you create a light themed header man that's kind of sick uh you basically have a cider which has a cider yeah that's kind of cool then we have a layout again then we have a header which has or you basically have to pass it in styles for some reason you know that's that's not good but still how this doesn't work for in the okay let's pass it as a style right then let's make it a background color okay and let's pass it wide ah hell but it doesn't work for the CSS class I mean what what on Earth is happening over here okay whatever so uh we have this color white whatever uh let's get rid of this right inside which it uh you can place basically anything which you wish for now I'll just uh create a class we'll call it a brand okay and you know we'll say text font size something like what 3 RAM it will be very big three Ram let's see so if we just go over here and like write brand and just write cool dashboard right cool dashboard ah this that's kind of big let's commit 2.3 Ram right and let's give some padding as well so let's give some padding like uh 10 or something that's cool so we have the cool dashboard thing ready we'll Zoom it in a little bit right so cool dashboard thing ready so we just want the cider as well to have a nice menu and stuff right so how to have the side how to have your slider look good and have a nice menu I think this does have a theme if I'm not wrong yeah this have a light theme see okay so now what we want is we want a menu inside and here is what the where the change comes right if you remember the previous time when I did the video it was like menu dot item and stuff so now you do not have to go to any of those clutter it's it's very simple now so what you can do is you know I'll just I'll do this like this you actually have to pass something called items to this right and you pass an array and basically now you can Define your entire menu inside this data and how does it go is basically you have to remember three or four things I think one is the label which you the label which You Wanna Give let's say I want to give home then you have to supply a key I think which is which should be unique so if you do that that will basically create your first menu item right you can go on creating this but before that I would like to install one more uh Library called react icons like this is a very cool library for icons tons and thousands and thousands and thousands of icons by the way uh you know you can go to this website called react icons right and you can explore all the different icons available so let's say you know what do we have for whom we have all these icons for home so for now which one is the best which one is the good which one is the better one looking one okay oh I don't know if I home this kind of looks good uh hi outline oh wow that looks cool okay um so let's actually go to vs code and quickly import this icon and I'll show you how to place an icon inside the menu so it will import basically this from react icons slash remember this hi start from hi just place it h i so it will be inside that if you copy that thing from there and place it as an icon over here right uh which is like this you basically have an icon now of your you can see this this there's a home icon right uh there's much more to it by the way let's create some some more things about us right key will be maybe about underscore us and icon will be maybe uh this is there any icon for about us is there any icon for organization and stuff uh that's kind of looking gr organization yeah import [Music] uh paste it from the ACT icons what happened I read okay uh react icon slash grid so once you have this you can you know place this over here but that's not it I'm just telling you right you can even you know you can see I think why do I have to refresh this I don't know maybe okay so this is about us this is the contact us now this the fun part is actually you can create Sub sub category inside all these children so I'll just show you right so let's say it's inside home you want like um first home second home and third home something like that I don't know why do I have so bad examples but you know you can pass basically a children into this right so children will be basically again an array with the same options so it could be what could have what could we have inside this Add profile like that right and maybe you know the key is Add profile right we could have other stuff as well we could have uh all you label right so all users something like that and then we can have another all users as keys so if you do that now this is expandable but you can see you know this is coming like in the side but you wanted like below getting it right but how do you do that so basically there's something called uh mode I think you can basically pass some more this is like there are three more horizontal inline vertical horizontal is when you have horizontal menus so for the top bar or something like that you can just pick horizontal inline is basically you know just pick it up and just show you what is in line in line is this what what we want basically so right this inline and vertical is basically vertical but yeah that's pretty much it so uh that looks sick right so you can basically add profiles as well you know let's let's without icon they're not looking good let's add a person I can how does it look man okay that's kind of sick I oh which one choosing an icon is very hard oh okay so let's actually place it in both of them I want the same icon for both of them because importing icons is hard and I don't want to do it simple stuff right so oh wait oh man okay oh okay so uh we have the same icon for both of these and I think I don't know if I have to actually refresh for all okay so you can see you know we have a sub icon inside this and you know you can do this so This has changed by the way so this is how you basically give this right menu stuff there's few more changes which we'll be discussing about which is one of is in the drop down so you know uh I'll just you know do few stuff with the content I'll give a very huge padding maybe 24 pixel or something like that by the way uh before doing any of those uh stuff I would like to show you one thing you know you can make this collapsible as well right so you can make it like collapse into these icons and then expand into maybe uh this full version of this so how will you do that so for that you know what I would do is I would uh simply go to the brand you know in the in the header section maybe anywhere you so and let's actually have an hamburger icon so uh okay let's actually have an hamburger something like that something like that right uh something like that maybe right let's import that stuff import something like that from GI react icons yeah right so basically uh what I've meant is basically uh so now you have this but in the header what I want is I want to place that icon right over here but that would that would not be sick I'm telling you there would be an issue if I place that I think just like this because uh whatever okay so I want the hamburger I can to be there where's my hamburger so uh you know I'll just place the hamburger icon over there like let's save it like that what's that okay there's there's a hamburger I can and it basically goes below so what we have to do is we have to take this and maybe uh have it there and maybe uh give a style and uh maybe display Plex right so basically uh you have this um and item align items and uh yeah so basically you have the uh margin right maybe 20 okay so yeah if you want like if you click this you want this to be collapsed if you unclick I want this to be bigger you know you can set a size to this uh 34. it's too big 28 yeah it's kind of cool right so let's say if you want like this whenever this is clicked you want this to be collapsed even on this open how do you do that it's kind of simple right so what you do is you basically create a state over here so uh let's call it collapsed instead collapsed right so you can just create a state and by default let's say you know we we don't want this to be collapsed right you basically go to the header right so this header section right and you basically pass something called collapsed I think there is something called collapsed wait it's it's there not here I mean where does it oh it's not here I mean it's in the cider sorry so there's something called collapse right so you can basically pass the collapsed over here right and uh that's that's pretty much it right and you know on the click of this hamburger icon basically what you can do is you can toggle that collapse you can say a set collapsed I don't know uh you can see that collapse not collapse so whatever it is just to reverse that right if you do that now you know you can do this this is kind of sick right you can you can have a full menu you can have a half menu and you'll you know when this is collapsed you'll have something like this when this is full you'll have something like this this right by the way what if what if we keep kept the same theme right so what if like the theme was dark let's try that out what if the ciders theme was no great so what if we make this talk again oh that's that does not look good okay that's kind of sick right so you have uh this done will be maybe if we if we'll see if I below if uh we'll see we can even create a dark mode version of this we will think about that whether we want to do it or not okay so this is the this is how you create menus right so the next stuff is basically how do you how do you create other stuff in the content area this is how you do it right so basically I'll go to the content area where this is our content area right so uh yeah we also have a class called content we'll apply that right and uh some of the things which has changed drop down right so drop down uh right but wait wait give me a second right so let's go and actually explore some of the components which Andy has to offer and let's see what do we got there so we have buttons which we have already discussed a lot so if you don't know about buttons you can watch that first video right icons we have already discussed these are icons available Andy I don't care about these icons because we have the monster icons Library which is create icons right we have this thing you know some of the things which I I think really are essential in order to like uh in order to work with something like uh Andy is like cards layouts there's something called I'll just I'll just show you right this is a Content area I'll just show you design okay so there's something called uh a card right you can have a card like this right and you can just then there's something called typography right so typography dot you know you could have title paragraphs over here so I could see like okay so uh sales maybe right so I can I can say something like this now you have a card with sales as a title right you can even like have a paragraph over here right so you can say uh typography dot uh paragraph and maybe you can have a lot of Epsom full right so this is actually now one of the UI so you have sales as a paragraph This is a description and this that's the use of the card icon right there's something else called uh called I just it's called space I think that's not a very cool thing so let's say if you want to create small cards which basically holds the data values right how do you do that so basically what you do is you you basically uh say uh space right and then you give a Direction so let's say I want a direction in the horizontal side of it so now this will basically lay things inside it in a horizontal way with a with some space between them right so basically I want cards between them and I want uh let's say some icons growth money right so let's say how much sales did I do this week I want to show that so I can definitely do that if anybody knows the solution of getting an autocomplete for these icons it would be amazing just just just just tell me right I don't get it and it's very it's very annoying right so uh uh I think uh let's say this is the again okay so you have this right so then you can uh basically have this and again maybe we can have another space between them Direction maybe horizontal again and uh we can have this we can have like maybe again we can have like a typography dot title over here and we can and we can even have a small over here with like total sales maybe right and we can have like um maybe this much sales we did right so something like that but you want this uh this thing to appear below uh like this so how will you do that so basically bring that out from this whatever thing it is right so yeah right and then you can place uh yeah that's that's kind of how it looks right and you can you could have multiple of these things right we could have multiple of these lying like beside each other right and you'll have it like this so that's that's kind of like your data Matrix thing right and uh maybe I I might change stuff there see I know this is not a UI which looks very sick what I want is I want to lay the concepts right so of Andy and how do you actually go for doing stuff right the next thing which is very interesting to learn is about the grid like how does the grid thing works right so there's something called call and there's something called call and row column and row in this thing right so we'll where should I demonstrate this if I just if I just sort of grid documentation right that's how you do it right so basically the total uh width like in bootstrap if you remember it's 12 right but in and read is 24 right so you basically can specify spans so like this six pan six pan like the pan six columns pan six columns man six column and you you have things like that right so if you if I just show you for example right so uh below this all these are spaces you know we'll have a divider by the way divider is actually a line segment so if you see this line there a very faint a very some line that line is due to that divider thing which I just did right so let's say if I want to show you a grid right and then oh there's nothing automated but okay whatever so I can have a row right a row and then I could have like calls with various paths so I can say the span is like let's say uh fix for now right so and if I says what about this there's a card and there's like some data out of there um right so I want to play something big there so typography dot itel something right so let's say this is the card right so now this is taking six out of the total 24 division which it did with the available spaces right so if I just go and create another call right another call with all the rest division how much would it would be 24 minus 6 is 18. let's call it 18 right so you can see this this actually took all the other divisions right and then you can I think there's something called gap which you can specify spacing no okay it's not happy with the spacing and stuff which I want to specify is there should be something for spacing rate is that should be I mean come on oh you basically saw Gutter and that's 16. oh okay uh what What's Gutter Gutter is like the spacing I think so go to the spacing let's let's try it out gutter is let's say I want 10 gutter oh gutter is actually the spacing see different vocabularies different words does the same thing right so you could have a lot of these uh a lot of these like sort of thing like you could have like a various grid structure and whatnot with this row and call stuff you could create a lot of stuff using this this how grids work in ND if I go further you know what what are all other space so we have already discussed buttons I think typography icon I don't want to discuss because I don't think so that's useful dividers we have already discussed grid we have already lay out spaces what is anchors man what is anchors oh this is anchors I haven't used anchor ever in my life of Andy but let's try it out let's give it give it a shot right so basically you basically say anchors and then you specify Links full of links and they are basically anchors oh is that so let's use one of our cards to for that demonstration right so if I just say anchor right and if I just say links right with href as hash test right link one something like that ah see we have an anchor that's kind of cool okay I think we can create a lot of these so like to be or that but that's side by side man why just side by side I mean in the example there's like okay what's the catch oh you oh do you basically Supply a title not like this something like this okay you supply a title and you call it like link one um several times and then you so you basically had two you basically say three you say four you say five and that's that's how you do it uh save it oh there's no nothing appearing in the Screen Man why what's my mistake now okay is the link same that's the issue let's copy this example only like let's see what what do we what do we got oh this link is not what we are expecting actually this is something else this link is actually uh I think react routers link okay so this link is not oh this is not this is coming from anchor where's this link coming from oh this we don't want this link from here we want the link from the anchor so const uh link right anchor I'm sorry anchor right so uh and if we just say link right save it and kind of cool right so I think this should appear as expected yeah see we have our anchor there that's the anchor right you basically can specify an hierarchy of links and you'll you'll go wherever that anchor takes you life is free whatever okay so what's next the breadcrumb The Bread crumb bread I'll not demonstrate bread crumb right now because this kind of depends on the react router of this stuff it doesn't but you know you can you can do something like this with breadcrumb like you can show things side by side and let's make quite self-explanatory there's nothing complex in this let's find something complex and let's try to understand that right uh what's this however okay that's how you do it foreign something complex right which is Stables I think tables in Andes like the best tables available out there like that's kind of very sick that has like insane features so that's what will be demonstrating the next thing right so we'll have another row now we'll have maybe another row in our uh in our dashboard we'll we'll give this uh call spacing of maybe 18 to this call spacing of a span of 18 to this uh and next thing what we'll do is we'll just start by uh having a table now how does the table work in this particular thing if there's no data it will appear like no data I want some space from the top cutter is like again maybe 10. and uh Style margin top right so uh you know in this table oh this is not visible oh this is not visible or what should we do let's remove the top row I know I don't need this now okay I thought I hope so this table is visible now right so how do you specify tables basically two things it requires just requires the data and provides a column description right so let's Supply the data data across right so uh let's actually use Faker for the data I mean I don't wanna npmi paper is that how you do it packages with the installation man how do you okay this is how you get started let's copy that paste it over here okay that's kind of cool okay so we are doing this we have installed Faker uh and it's over here right so the next thing what we'll do is we will be basically having a lot of data generated from the speaker so let's write a small function const data is equal to uh is equal to what is equal to a function right and let's call it D let's call it a dot something like that right and let's generate some data for that I is equal to zero I less than something like what how many radar should we generate 34 looks a good number I plus plus right uh const uh dot dot push oh come on dot push what do we want to show we want to show an ID which will be picker okay we'll have to import picker now okay so uh we have a faker Faker dot uh what do you want this is actually an ID right so this is uh random or data type Dot we have data type dot numbers no we're not database man data types and then number maybe like uh something something like 1000 just generate a randomly 9000 that's what I'm saying over here name is like a faker dot taker dot um name dot full name right what else could we have we can have email right so we can say Faker dot internet Dot email ID right uh what else could we have we could have a description or we could have like a status right so which is like active or not active we can say like mad dot random like if there's more than 0.5 like there's the 50 chance of being it active or not active will show something very interesting by this right so we'll say this is uh true or this is false right sorry we'll say this is this is two if this is true and then false with this false right so this this kind of like generates our data right so we'll return this dat now uh kind of cool okay and we'll call this function as well so okay whatever this let's call this function okay whatever let's call it generate data written the real data will be over here so we'll say cons data is equal to uh simulate data right so you have the data right so you can pass the data to your table which is which is over here right and then you actually have to give a column description so column descriptions how do you do it is uh basically you specify the data source data index of each of these things like which you want to show in that particular shell for my case like let's say this and then use basically specify I think a title which is the heading which you want I want ID as a heading and they can also specify a key for this I think so that you know yeah and then you actually have to specify this by everything which you do there's something special you know I'll just show you data index I want this for the name and I'm on this for like something like name and I want uh the key to be also named something like that maybe uh yeah it's kind of cool okay so uh ah data index what else do we have email ID we have I think so so it's called an email ID and the key is also email see this is I'm just teaching you right so like not I'm teaching you like we both are basically uh kind of making sense of this whole thing so oh this is available over there right and this by default you know I just uh would like to show you that this a specific height I want to give you maybe uh 500 only 400 maybe 300 no I cannot well that's that's root that's root can I give us a height to this column maybe uh 300 100 it just doesn't listen to me so I'm sorry uh it just in not in a mood of listening to me but still I will show you what I would what do I mean it does provide a page Nation to you but like by which you can see the further data like data which is above or like uh you know uh before this so you can see all the data which is available so this is the column and you can do quite sick thing with this right so let's say you know you have a scenario where you have like this status thing right and you want to show a card or something else that is not a text that is not a general text right so you can definitely do that I'll just show you how you could how you would do that so say uh something like the data index is still like that same what was the data index data index was status right and then the title is basically the same status right and then uh you can say something like render and you can render absolutely anything the first parameter leave it uh so you can have a value for this as well so you have a Val right the value is basically the value of these status right so status this is the same what will you will be specifying over there if the state is right and you can basically say that if the Val is true right so you can just uh pass maybe a tag or something with like uh active otherwise you can say you know otherwise and again a tag you'll say not active something like that you can see you know this is like this is how it generated you can even like if you don't like it's not compulsory to even have a data index State you just need a title and a like that's pretty much it so that you can you know we can have something called actions as well but you know in the children we can render like maybe some pattern groups now if you don't know what button groups are hear it what it is so it's like a group of buttons that's exactly what it sounds like right buttons and you can say you know add or edit or something like that right it's not it's angry at me what happened oh this is not children this is render sorry it's render not children see so uh oh it's not happy with me for some reason okay you can see you know it written you could add like uh 30 different buttons you can have like edit or delete right with a lot of stuff right you can even you can set up like uh the type is a primary and it is a danger button right you can do this and it's completely okay right so you can you can uh do this by the way you can even make some uh columns fixed so if you don't want them to be scrolled or something like that uh you can even do that so how will you do that that's kind of very simple just if you want to make the ID effects or name fixed just say fixed true and now if they're scrollable right it's like it's it's fixed it's always fixed ID would never scroll uh if you'll see that little bit of documentation you can even make this responsive I think there was something called responses indeed something like that uh whatever let's leave it for now I will not focus up the responsive stuff right now but here's how you basically can create tables in and design do we do we have anything left so drop downs kind of simple stuff we've already discussed this steps your steps keep me awake and put me down do you remember the song cool song okay so this steps what is steps steps is basically what you take in your life to become successful but this is a different one so this is also very simple you know I would like to show you this as well right uh let's let's put it above this maybe put a card over here directly I don't want to do that uh yeah let's let's put a card over here right okay right and you can say steps right uh oh you don't need the closing one and if you if you focus right away it's pretty simple right you basically give a current index and you give the items with a title and a description that's that's all what you need basically so you basically you give like that current index maybe one and you take like I think items here and then you basically say a title uh it's like okay that's not not like that maybe I don't know what what's what's the matter what's the matter man okay uh okay you basically need this to be in the curly bracket because that's what a value is in react.js so basically specify a title maybe it will be like um sign up description please sign up or else I'll whoop your ass URS kind of very very gentle reminder to the to your to your your user base that they need to sign up right very gentle one not very rude one whatever you know we will collapse this up right so this is this is how it is you can specify a lot of them right so you can say sign up and then maybe uh give some money maybe sign up after sign up what they do pay subscription buy subscription by subscription you can give you can definitely go and ah come on description you can specify like okay uh buy some subscription okay whatever you can see these two steps you can add multiple of these you can specify one more title this will be something else write description do something with this right okay this is how you basically can create steps which is kind of cool you know you have your full UI kind of very you know like you know you have the whole thing ready you know you have your dashboard ready basically in in hours instead of days by Andy because you have all the components which you basically need you must be thinking about charts but the charts is a complete whole different topic we'll be covering it in a very separate video what's next let's see do we have anything interesting the autocomplete is kind of not very interesting then you have the transfer thing what is this uh it's it's loading it's just loading it's not in a mode of actually what happened man you just okay this is a okay let's let's talk about the next very important thing which is forms because you have forms everywhere inside a website right how do you put forms in your website so it's very pretty simple you know it's it's the dopest way you can put forms it's quite good so you can you just have to specify a form thing right and then you basically specify a form dot item stuff stuff right and then you specify an input to this right so you basically specify an input you say okay this is import your form basically start you have the single input over there but you don't have a title do this you you need a label right so you basically specify a label over here say name right you specify a name over here and you can see this is appearing in a horizontal way right so the name is appearing on the the side the values on that side you can just definitely change that you know you can you can go to your you can go to your form right you can say like mode or layout I think right you can you can set what kind of layout you want if you want like vertical go for it there you have a vertical layer the name on the top then put control in the bottom classic right so this does the name and you could have like 30 different stuff you know like that and you know maybe you can have email you can even set types to this email you can have like a maybe date of birth or like uh what else do you have a password right and you can have type as password right and kind of great you know you have this right uh but how will you uh you know we can have a form dot item maybe submit button so uh button you can have like submit or sign up right sign up you can set a type to this button you can say you know this is a primary button secondary button ghost button whatever you want it's totally up to you so you have the sign up button and you can basically uh set a type to this HTML type which is type which is HTML type and you can say this is like a submit button right which basically makes this form submit right but another question is how will you get the value of this form when set is submitted right but basically you use something called formic or use used control like uh control controlled form elements maybe you you could you could store it on the state but there's no hassle in Andy things are quite chill I'll just show you how you can do that just specify a name to every uh item which you have maybe name um email specify a name simple stuff uh password and you don't need any name for the submit button right you just list something called on finish or basically a function which will give you all the values over here so I'll just log the values into I don't have any value for these values so I'm not using this but you can definitely have it okay so I'll just show you right so maybe I'll just make it a little bit bigger whatever right so if I just uh go to the console right and there's somewhere called each key should have a unique key props that's true uh let's give it let's solve this issue first um I don't care we'll be thinking about that later on okay so if I just say uh if I just say a test user right if it's a test at the gmail.com if I say test hash at the rate something like that right and if I just uh submit you can see you know you immediately have all the values as an object available in that on finish you know you what you're saying you cannot see it now can you I believe you can so that's that's pretty much it I you know that's how you do it Andy's cool dope there's one thing which you have to remember you know Andy's actually developed kind of like like everything this has a Chinese influence just remember this thing that's that's pretty much it which I don't like about it other than that I think it is one of the best component libraries available out there quite cool quite awesome you know this has a ton of other components so let's this time because school you know should we should we should we do something about it I think now DJs is cool this supports DJs that's kind of cool okay if you just uh if you just uh you know let's let's put let's make up one more form element Maybe uh Palm element right com dot item right let's place this over here right and let's uh let's import time and now this is not happy with me because we don't have the JJs which we need to install which we will install because dangerous school right so import dages from why do I write form instead of from always right kind of cool right so now we should have I don't know we should have something that's not happy with me man what do you want oh you have you have kind of a day picker so you can pick a day and a time and a lot of stuff from there right you can and you can even have a title for this as well so which I will supply in this my case so this is my day pick a time picker I can just say and then then another time eleven pick some time all right so basically you are the time picker right so you can you can do a ton of from this you know or you can just say now it's kind of cool right so this is the time picker you could you have a ton of different components I'm pretty sure uh transfer you can I have never used this no use case for me pre-select hmm kind of similar man batches our Avatar School Avatar school I would like definitely like to show you some Avatar uh some cool Avatar let's find some cool avatars ah these are these are garbage man you know East of West Popeye is the best Popeye this dude's Avatar would be the best and I would go for this one because this looks sick right I'll just I'll just copy the address right okay ah for example let's say you know if I want to show this over here in an avatar you can pass an SRC to this right something like this and now you have an avatar present in your application stick right you can even set a size of this particular you know you can I think there is something called size and you have large basically so you have a large Avatar present over there right a ton of component available a ton a ton of components really cool components right you have this empty thing this is also very cool right so let's say if you have a list and you don't uh you don't have anything to show right you can definitely show this empty thing right so this is also cooler I don't know my whole component is filled up so much that I'm just confused what where to keep things this is my menu is my card okay this was like another card okay it's the content section is my first card okay this is okay this is the form okay so uh I know I would like to show you the simply as well so if I just place this empty over here right you can you can see this empty thing so see this this is how it looks school you know if you don't have any data this is very cool right you just you just show like there's no data just get lost we don't care about you I'm sorry yeah then you have card we have already discussed calendar I think you know this is just too much it's it's very good it's very good buying each other but I haven't used this so I'll not go in this like to detail uh Carousel I have used this Crossville how do you pronounce this I don't know maybe some way this is also cool you know if you want I can show you this as well uh I don't know what has changed in version 5 but this was cool is very simple you know just place the console as a parent element and just have your divs and remember one stuff that you should have all your dips of the same like width and height because uh whatever that that's that kind of cool so uh yeah let's not go in that description what is description man oh this is this so uh [Music] hmm oh it's kind of cool okay so you can see description over here you can you can show this something like this in a form of borders which is thick man this description looks sick right you agree do you agree we should try this we should descriptions look sick okay so we'll try descriptions now so descriptions right how do you do that so description you provide a title you provide a title and uh title is users data yeah right and then basically you uh you provide something like um description dot item and then you you have a label over there and you have a value in the as it's children you pass the value so let's say name so let's place my name over here Jack what do you see ah it's just like that's kind of cool I can just I like the bordered one more than what we have before so this is like this this thing I can just copy paste this few times maybe instead of name we could have like my roll number at my class if I remember my roll number my this is my actual roll number it was 18 right and then I kind of have an address what is my address maybe some lorem maybe 12 words with what's wrong 20 controller whatever so this address oh this is this kind of Junkie why is it in three rows uh I don't know I don't know why why why is that we have name again J we have this over here okay I think this is oh that's hard so we could like what if I uh we have a description dot uh dot item and place it like over here is it is it how sandal no that's not the way man you don't pass it as a children how do you how do you specify rows and columns in a description that's the question right which I'm asking so I don't want this everything to be in single row let's go and see right so how do you how do you do stuff so you basically have this you stay this this is okay this is bordered and you see this okay you basically specify and span okay so usage time um you specify span so if I just slash span of 2 well there's what will happen that's the question oh I'll have this below that's kind of cool so you basically saying two things I want to appear from here all right that's what you what it is oh that's kind of cool okay so how descriptions work right so it's that's also sick item descriptions are also sick uh empty we have already discussed image I'm not sure you know how image is helpful is how it images are basically it's fine SRC like always right and uh yeah oh lists I think these are very useful things so uh yeah if I just uh this is how lists are so uh so there's two ways you know you could have your list so you know one is you already have the data one is you don't have the data let's see both ways right so first is the you know you just you just go and you say okay this is my list and you say this is my list dot item and they say okay uh hello maybe a few more items you know you just test that's one right so you have these items in your list and it's visible as this like this list right this other there could be another way where you actually have end data a full data with of your list right so how do you do that so I think this is like list and it's it's what's described over here right so if you say uh you basically have a header or a footer you can pass a header or whatever that's not compulsory you can have a bordered list and you can say specified data source and then render item so for this I would what I would do is I'll have it bordered I'll have a data source which is I think the data which we have above and then uh render item so you basically get a function with a single item right and then you can return anything which you wish I will return a div with maybe that uh item Dot name email rename right let's see what do we have uh yeah you can see a lot of these of these names right but you will have it all in a div that's not it's not cool so I don't understand list item Place dot item right so it kind of gives you the iterator yeah that it looks so good man showing a list of people a list of things this is very sick for that purpose right foreign yeah you know I could give a description over here it will be kind of cool it's a good descriptions right so you you know I could have uh I could have these borders bordered two right and I could have a title user details uh right and I could have like a descriptions dot item and I don't know about span or anything you know we'll think about that later on right so we can title we can have a title let's not have it boarded I think that's not a cool idea and let's have a label uh let's call it like a name right let's have a value as item dot name right we could do kind of similar things two three four more times you could have a name you could have an email you could have like active uh Dot use status may be right um if it's true right so it's like active otherwise not active right so as you can see the full user details kind of as listed below you know beautiful UI we already have so that's how you basically can render data as well as like other stuff that's that's how this works right I would like to limit the data I would like to slice it to like zero to like maybe only three data that's what or what I want right so three data will go over here do we have any other component left we have a pop over that's also cool oh I just forgot you know the models they are quite cool models are cool right I'll just show you various types of models you can build and they are sick so first the simplest version of models right so which you can like which you basically use to confirm stuff right so if you delete your profile or confirm that your profile that's that's one stuff right so what you can do is you can just say Okay confirm um okay text okay you can have like delete what else do you got body style or text or title are you sure are you sure you wanna delete your profile and you could like uh you know you could have a simple button over here right you can say button right so you can say something like a delete profile right and you can specify a type type to this maybe primary maybe Danger right whatever right and you can basically specify on on cancel and on on on OK stuff right log right why are you angry at me you know you can see something like this oh cancel cancel okay a lot of them has been there there's some bug in this for sure yeah what's the issue property children does not there's no type of intrinsic okay the children does not exist on type this okay uh what if I just remove this is fine with that no oh that's not happy with me how do you how do you how do you do that then how do you do that man how do you how do you confirm pop-up model uh okay your model your pop confirmed that's exactly what I don't want I want it as a model man you get it yeah I don't like it okay oh you have um Can it can I have like the confirm thing oh confirmation model dialogue with confirmer that that's exactly what I want how do you do that and what is the mistake which I'm doing that's what I want to know okay you say confirm oh this is this function called confirm it's simple stuff ah and where this confirm comes from it comes from model okay that's that's I got it this is not a function right so you basically do not need to do this you basically need to have a button right you know like uh Delete like danger like uh primary right and you basically on this click of this right you need to call something from that like which is uh modal.com confirm right and then you can say okay you can specify various things to this so you can say you know the title would be like uh whatever let's let's copy this stuff from here we don't want this thing right whatever so if you just say this does it work let's let's see let's refresh this stuff okay so we can just see there see that works that's how confirmation dialog works right so you can just have the confirmation and that's how simple it is they imagine right but what if like you have a complete different requirements really or senior imagine comes up with a complete form which you have to show it on your model how do you do that so then you go a little complex you basically uh create a state right so uh you know you create a state like a const uh model open set model open right so you just use a use State and you know initially you want the model to be not open that's why you set it to pause and then just go anywhere in the body anywhere anywhere absolutely anywhere where you wish and just specify a model right uh and just specify a body over here so say you know I want a title like uh add a new user for example right so something like that right and you just have a form inside this for some reason I don't know why you want to have a form inside this you have some input right uh so you wanna have labels you just say you know name maybe some other stuff you just copy paste this three four times name email ID and you have you have nothing like this is an item but you don't specify a name over here but save button okay you don't even need buttons right that's kind of cool you don't you didn't need buttons right whatever so let's say you you want to control this this is open or not right so if I just say open you say model open on cancel which is on closed you say set model set model up into false right and uh you know you just have to toggle that state with any button of your choice so let's say you know we have another add user button instead of delete we have another add user button so let's call it a button add user on click basically set that state to something set model open to maybe not modal open or true right so you know you you want the model to be open that's how you actually kind of makes the model right that's that's it you know you get all these buttons and if you're thinking like how the heck am I going to modify these buttons and stuff that's also very simple right so how the heck am I going to give action through this button it's like this on so not on this I mean on this so basically you say on uh on okay on cancel you have all those all those kinds of event handlers over there it's kind of sick okay what next let's let's kind of like let's play around the theming a little bit so can we make it a dark theme or anything like that right so it's let's let's see yeah can we can we do something like that or not right so this is how it looks right now right so if you if you do something from here right you could do a lot of stuff right so so you can just say DG base maybe something like hash five five five five five five five right so that's kind of dark color you can see this is a base background color right which is for some reason doesn't look good uh BG color hmm what all colors do we have BG color BG border color BG mask BG layout okay if you just say this then what's oh you have this so background of this could be set through this okay that's kind of cool I want a little bit more dark right uh I think color what else color we can set Mass Spotlight container base okay we want this to be like absolutely zero uh uh that's that's not sick okay so um whatever you can if you can have a text color I believe color text really white yeah you see we have a black version of our app you know you just have to toggle this with the you know we have set it through the uh if you remember the displays right so if you just modify this to something like black oh you oh this doesn't work of course I just remembered okay you just go over here and you modify this to something like black with cider collapsed Dot do you have enough version of this no oh okay so basically uh what if you just uh go to your header which is this and you just say black right and just say you know the color I want this to White right so you you basically have a dark version of your entire dashboard within seconds Within this so it's kind of sick right so a lot of components I wasn't able to explain this video I think that would be a very very long video which I don't want right so maybe you know we'll do something like skeletal result these all things are quite sick you know notifications I would like to cover notifications this is quite sick right so if you let's say you know you want uh user to be notified it's very simple by the way right so if you if I just Place one more button over here just to show you right uh and so if I just show you uh okay show notification how do you do that is you basically say on click right whenever this is clicked you want simply here notification right dot whatever success error whatever you have so let's say you know I want to show a successful something like that right use a success you specific message you say uh whatever user registered successfully or user created successfully right so if you do that and if I just click on this button you will see this nice notification coming up there right so I hope so this was a cool introduction of Andy version 5 by the way I didn't discuss the core components of version five that's kind of sick right so uh you know if you want to see what has changed so I would definitely like to show you that resources I would like to go over here right so Andy getting started not that whereas like the Andy version five you know stuff so you have these this float buttons right these are the things which have been introduced new so if I just search for float load button great these are the things which have been newly introduced in basically in Andy so you could have these floating buttons I would I can place that also if you need load button I don't know how does that work okay does it does it take an icon Maybe right so then you can say add add Gran right so if you say this I think we'll have this you can see you know this thing this oh you cannot see that right you can see this right you can you can have you'll have this floating button over there so whatever you scroll it's kind of there by the way if you're thinking like why okay but what is this man you know this is not sick so you just have to make this uh uh overflow Scroll of the content you know just make it like overflow Auto overflow kinda overflow um so this will be like now this right instead of that you know this right so okay I hope so the serum you learned a lot of things from this video if you want me to cover something else or if you think you know I did something with the rash in this video you can just let me you know let me know your suggestions in the comments below and if you have any doubt feel free to contact me anywhere if I wish and if you are someone which I have not replied replied in the previous oh man I'm sick of myself uh whatever okay thank you have a great day have a great winter if you're in India thank you bye have a great day

Channel: ithinktechnologies

Views: 25,966

Keywords:

Id: GDqLMbgAQFs

Length: 75min 43sec (4543 seconds)

Published: Sat Dec 10 2022