This React UI Library is GAME CHANGER!

how to do so in the last couple of years we had tons of UI libraries popping up right and especially for reactors probably like two dozen of them out there and you know it was so hard to actually find one that I really enjoyed I'm not sure about you you can write it down in the comments but like we have bootstrap for example I think that's cool but does it look that nice really I mean come on come on man that's so nice um and then you have style components coming along so you write the CSS and JS kind of stuff and that was cool for a while um but then that came with its own downsides and then since server components popped up then you had all these issues of these UI clients not even working only in your client components so it got quite messy and I found Simplicity in tailwind and I love Tailwind I'm still gonna push Tailwind because I think it's one of the best ways to style your applications in general not only it's pretty much faster than any UI Library out there it's even faster than if you decide to write vanilla CSS but I really wanted to have components that I don't want to build out from scratch like calendar sliders forms especially if they don't have accessibility and stuff like that right that's really hard to get so so what we're going to take a look at is a closed by browser that I closed my browser uh chat CDN CN let's see the end which essentially is look at this look how gorgeous this is they're beautifully designed components built on top of radx UI and Radix UI essentially are these components that are unstyled and unopenedated but they have all the necessary accessibility for you to get going so here we go if you check out Radix UI as you can see why even waste time Reinventing UI components and when you have them here and they're unstyled so you can do whatever you want with them but they have the accessibility right so when you're making forms one of the most annoying thing is adding the accessibility to it so chat CN was built on top of this so what we're going to do is essentially create a yeah here are all the components but we're just going to choose one for this episode I'm gonna go with skeleton and I'll show you perhaps one of the simplest ways you can implement this so let's get going okay cool so here we go so we just have a Hello here and what we're going to do is we're gonna fetch some games and if the games are not loaded yet then we're gonna pop in a skeleton for us so to get started now you usually just not even have to install anything with chat CDN because uh it was never intended to be used like that it was intended for you to just go here find a specific uh UI component maybe let's see maybe the alert here right and you can just copy paste the code and that's it but now they have a CLI which is really cool uh so you can just pop in and install that specific component that you need so if we head over here to the CLI you can run this command here called MPX chat CDN UI and net all right so if we run this I already ran this and if you have Tailwind as well installed um it's gonna add all the necessary configuration to it should I say all right so after we run this perfect now we can just head down to any component that we want to use and I may make a video let me know if you want to see a more in-depth video on chat CD yeah maybe we can build out like a whole whole app with it that'd be quite fun actually [Music] um but yeah let's head over back here and we're gonna search for skeleton so here we go all we need to do is run this command MPX chat CDN at skeleton I'm going to use npm for that and I think I already did it once you install it so once you add it like that it's going to create a oops let me close that up it's going to create a component here for you automatically just like that super cool okay so let's actually create something here because we have absolutely nothing now and that's the present so what we're gonna do is yeah fetch some games so I'm using Rog RAR API for fetching games uh so all we can do is just do a const get games here and set that equal to an async function like that cool and then in here we can say const response and here we are gonna do a fetch request so again I'm using let's see where is it Rogue API all right and yeah you can fetch any games you can fetch popular games fight games like redfall uh really good games like Zelda [Music] um but yeah you just get your API key you add it in here and then you fetch the game so let's see that a weight Fetch and the link to this is gonna be https like that let me see here API the Rogue IO slash API slash games and then here I can add my key which I just added to my EMV local here all right so that's where my API key lies so I can just add it with process EMV dot Rogue like that cool now I can check if the response is not okay so I can say if res is not okay that means I have some sort of error so I can just throw a new error and say failed to fetch but if everything is okay I can say cons data is equal to await res dot Json like that all right and I need to return this so I'm going to say return data like that I guess you could do it in one line but it is what it is okay so now here uh this is a server component right if you don't have used clients at the top here that means you're working in a server component [Music] so what we can do here is just say const games equals get games like that and we have to add a weight as well like that Perfect all right so remember this is an async component here uh and let's let's see if that works We're Gonna Cancel logout games have a look here and try to visit to localhost 3000 so we can actually see if we can fetch that data and looks like we did look get request 200 it was hit and if we scroll up here we get to see all the different properties that we can use and now one note here is that it's an object as you can see and you have counts next previous and results now results is the array that actually holds all the games so I'm gonna return that data.results and I'm not gonna take everything out so I'm only gonna pull a couple of things out here in my types so I'm going to say type game equals to I'll just pass in the ID we'll do a background uh image which is going to be a type string we're gonna do a rating which is a type of number and a name that's a type of string again all I did was literally go through all of this shite and I pulled out the necessary properties that I want to use in my app so in this case I'll just use these four um all right and the way we can add it is here in the get games can add a colon and say promise and add this as a generic right here but we want to make sure we also add an array here um because we have multiple ones right we have an array of game objects so we pass that in there and as you can see now um typescript works on my games down here so if I do games dot uh map over each game like that I can return a diff for example with a key of game Dot and look at that we have the autocompletes called return game ID there okay cool so I added the H1 here saying game name the P tag and the image now the way I like to work with the image tag is to just add a fill on it and then I can customize everything else with the class name so by default fill is literally gonna just take up all the space uh relative to the outer div that it has so if I wrap this in a div like that and I can go here and add a class name to this and say I wanted to have an aspect of video which is 16x9 and I can add a relative so it sizes according to that and there we go look at that we have a nice system here going it's not like responsive or anything but we can quickly make that I'm gonna go to the main tag here and I'm gonna start off by just adding some margins M24 there we go just so it's not all stuck up there I can add a rounded MD um then we're going to do a grid all right I'm gonna say grid calls four there we go so we have four columns now and I'm also going to add a gap of 12 like that cool perfect now what I'm gonna do on this inner div here where I'm looping over I'm going to add a class name to this as well and I'm gonna say Cole span four so how how much should this div span across these columns because remember we have four columns so I'm saying stretch from one to four and hit save so that means it's taking up all the space now if we go on larger screens I can say call span should be two so there we go it's gonna look like a really small it's gonna go to one if I go bigger it's gonna go to two now you can keep going like this if you want if you want to do and on large screens I want a cold span of one right so then you would have four there we go now I probably don't want that that doesn't look too good so I'm just gonna get rid of that and keep four there we go two sorry okay cool so we got that going for us which is nice um yeah you could style up the text and everything but I'm not gonna waste your time with that so how can we do this what if I go up here and I say something like a weight new promise and we'll have a resolve here like that I'm gonna say set timeout set timeout to resolve and two thousand all right what does this code do so essentially we're awaiting and creating a promise and we're resolving the promise in the same line of code and basically we're adding a delay with set timeout so we're saying as long as the set timeout is running basically stop this from finishing wait for this promise to resolve and when it resolves keep going and fetch the data so in our case is going to take two seconds for this promise to be resolved so if we refresh the page now um I guess we'd have to close this and go back you're gonna get a blank page for two seconds right and you don't want that when your data is loading so how can we transform this and create a skeleton super easy and next 13 what you can do is just go to the page um or the folder where you have the page and create a loading.psx okay cool and then what we can do is say Imports sorry export function default I always get these wrong do you oh my God I find it impossible I I always do export function default or I don't even know how I do it sometimes I start doing const doesn't matter who cares let's try to return something so here I can just pretty much copy paste this over like that and I just need to make a couple of we changes so first of all we need to import uh that skeleton that we got from chat say the end so there we go import skeleton like that and since we don't have any what you call games here right we're not fetching any daytime we don't want to fetch data because that's the whole point we're trying to stop and show something else whilst the data is fetchik so what we can do is do something quite fun here we can say array [Music] and we can say from and I'm gonna say Here length in an object of 12. all right and then after this object I'm gonna add a comma and do an underscore and an i and I'm going to run a function here like this oops like that okay I'm gonna say I plus one and then we can map over it the same way so essentially what I'm doing here is just creating an array from scratch and I'm getting the index and I'm adding a one to that index and then here I'm just going to say ID it doesn't really matter what I add here I just want to make sure I can Loop over it like 12 times here we can leave this empty that's fine I'm gonna get rid of this as well because we're not gonna add any HTML here we're just going to control everything with the styling and the image can go as well alright so again I'm just uh yeah creating uh an array from scratch here I'm looping over it and then here I guess I should add the key I'm just gonna pop an ID here for now that's fine let's get rid of this old one let's see what other errors we have and looks like we don't so as you can see we just have this flashing white screen now and then we get our text back so rather than doing the H1 here what we can do is say skeleton instead like that and here I can add a class name to it and I'm just gonna add a bit of height to it so I'm gonna say height is gonna be six and the width is going to be let's see half of this card now if we refresh look at that and we are getting a nice loading animation right there now if it's hard to see feel free to customize it you can do a BG gray of 200 on it hit save and look at that cool so I can do the same thing basically for the paragraph here let's turn this into a skeleton and rather than doing this I can still keep the margin bottom I guess I could do a margin bottom of like two at the top as well and then here all I need to do is again I can do a height of six or whatever you prefer with of maybe a quarter of that because it's really small and let's refresh and there we go how cool is that and finally for the video again I can just make a new skeleton here from scratch to be honest and just add a class name to this and do maybe like a rounded of medium I think I had on it what if it's gonna be full I'm gonna add a large height to it in the background let's do something else like 400 and do refresh and take a look at that that's pretty cool maybe that's a bit too big maybe you do it you know like a more responsive fashion and a hard coded like that oh why is that not working height 84. and Save that is weird h why is that not working 80 that's gonna work and there we go look at that boom how cool is that so we added a full-on skeleton and barely any lines of code yeah I like that that's really cool all right so that's gonna be it for me hope you enjoyed this let me know what you think of chat CDN CN CM let's see the end uh have you played it with that do you like it do you have fun with it hopefully in a non-wear way um and yeah that's gonna be it for me please drop a subscribe if you enjoy the content on this channel I'd really appreciate it and yeah I'll see you in the next one I have loads of exciting things coming up I'm doing the Astro project next and I'm not gonna lie I've been working a lot with Arduino and messing around with that and that's super fun would it be fun to make an Arduino series on this channel I'm not sure if I'm reaching out of my comfort zone or it's something that you guys would enjoy I'm really not sure but if you guys like it then I'll gladly do it because I'm loving it it's amazing okay Ed stop talking and let you guys go

Channel: developedbyed

Views: 167,588

Keywords: react, react library, react tailwind, react shadcn, react ui library, dev ed, developedbyed, next 13, nextjs, learn react, learn react tailwind, react tailwind tutorial

Id: 7MKEOfSP2s4

Length: 18min 12sec (1092 seconds)

Published: Wed May 31 2023