Rating The Most Popular React UI Frameworks

not to sneak up on people oh my gosh get avoiding my gorgeous friends on the internet today I thought we're gonna have some fun so I put together a list of like top most popular UI Frameworks for react and we're gonna raid them from Perfection all the way to trash get out of here it's just another framework and web development which is the case most of the time but anyway let's get into the list oh I want to say also that the Black Friday deal is still running so all the courses on developed by ed.com are still 40 off if you use the coupon code bf40 so check that out and let's get into the list okay so first of all I want to start off with kind of the default built-in tools that you get in react one of them is inline CSS and as you can see it doesn't have a logo because it's just something that the react team did so I just took a screenshot of my vs code okay so how does it work well essentially what you do is you go to an element in this case I just have a home page here and you just add a style property here like that and then you pass in an object so if you want to do a background color you type in background color red and that should just work fine and there we go what is nice about this and what is not well one thing I don't like about it is that you have to write it in like javascripty way right so you have to do camel casing here and uppercase the C and I don't like camel case let's say in Egypt another thing that's quite funny about it is that it's quite long because you have to write out background color red blah blah blah and then you add your comma and whatnot so if you have multiple ones here it's gonna look quite crazy if you have multiple properties um so I'm not big of a fan of that either now one thing you can do is actually separate it up here because essentially this is just an object so I can just do a const object style here and just paste it in here like that and that should work the same way so if I do that and I can paste it in like that and we're still gonna get a background read on that div so that's really cool um you can also separate it to another file if you want so you can do export const object style and then just import it here and it's going to work the same way for me I just think it takes too much effort I think it's like a just an okay built-in solution but nothing special about it so for that reason I'm gonna put it on the okay list the react team did an okay job on the online Styles now another one is called react CSS modules now one thing about this that's Superior to this like let's say I want to add The Styling to the H1 here there's no way for me to just do a H1 here and add a styling right which means that I need to make an object like this for every single element that I want to style which makes it really difficult right now you could do normal CSS styling but the problem with that is that it's going to play globally so if I do H1 selection here like that and I add a color of red that's going to apply to everything in my code all the H1s in my code whereas CSS modules literally does that it only applies to one single component so in this case we have a home. module CSS so if I add a H1 here and add a styling to it like color red this is only going to apply to my home page here if I import the Styles okay so it's not working because the way you need to format the code is in here the whole modules you cannot just do H1 like that actually you need to add a class associated with that so we can do I can do color let's say home page right and I can add a bit of styling to this background light blue and then if I do home H1 then I can do color red all right and then in the page.jsx what we need to do I'll import this as Styles actually and on the div that you want to add the Styles you do Styles Dot and then the name of the class so home like that and that should work now anyway my problem with this is that there's just so many extra steps from creating your files importing it properly adding The Styling it just takes forever and I've never been a big fan of this because now we have another folder with loads of styles that's completely separate so if I want to change something let's say I want to go to the contact page right it'd be nice to just go to the contact page in the jsx to that component and then adjust the styling or adjust whatever functionality I need to it but with modules you'd have to actually go into the Styles folder look for it right find the file and then look for the thing you want to update update it and I don't know it just feels very slow it feels like there's lots of setup to do with it and I'm not a big fan of importing it like this and then adding the style like that um I don't know just never been a fan of it it's still a built-in solution but I actually I'm gonna put it to come on because it's just not fun to do next up on the list we have styled components which was one of the most popular uh react UI Frameworks out there probably for a very long time so what are the advantages of this well first of all um you get to like you get to write normal CSS in a way so what you do is you create a object like like that kind of like inline Styles but the difference is you get to use their special property here called styled and then you you add like whatever you want to sound like an a tag or a H1 and then you do back decks and you get to write just normal CSS which is really nice and then at the end all you do is you essentially replace um let's see so I have a H1 here right like that so what you do is I'll create the H1 Style set that equal to style.h1 and then here I can just add my normal styling like that all right and there's an extension as well for this which is really good because it's going to recognize it like see a normal CSS so you can add all your styling here and then what you do is you replace the H1 here with the H1 style so it's a really good solution you can modularize it again you can export it and import it in this file so you can do an export const H1 style the thing I like about it most is that it's very easy to read because it's normal CSS looking like you can do stuff with props add state to change the styling based on that and there's just loads of things that you can do with it which is really nice you can extend Styles so you can create your own system very easily it's really really good one thing I didn't like about it for a long time is that I have to replace my H1s here with H1 style okay I just aesthetically I don't think that looks that great to be honest especially when you have loads of components you cannot tell which one's actually a real component or just the styling it becomes a bit tricky so you have to be very careful with how you name these because it can get really confusing very quick but other than that I think it's a great great library to use so for that reason I'm gonna put it quite high and say amazing I'm not gonna put it to Perfection just because it's still a bit wonky again with um with naming conventions and some things break sometimes like for example now with next JS that version 13. it's not even working so you cannot even use it on it because they changed the whole system up again so it's not gonna work so it's like stuff like that that's a bit annoying so it's amazing but that's it next up on the list we have something called grommet and I haven't never heard about it but it was rated one of the top first ones on the list and to be honest like I'm not really a huge fan of how it looks like even like their documentation here right it just looks a bit like one of the first websites I built uh learning CSS and like if you look at the stylings here I mean they're not that pretty to be honest so the way this works essentially is uh you create these they give you these components that you can put together right so you have a card uh component and then you can add certain properties to it like small and you can add a background to it I just honestly don't think it looks that good and I think there is other better Solutions out there so this just felt a bit to me like they were trying to get in on on making another framework just for the sake of it to be honest because I haven't really found anything on it that's really separates it from all the other ones so just for that reason um I don't like the way it looks I don't think the styling is that pretty uh so for that reason as just another framework to be honest nothing special about it next up on the list we have react bootstrap essentially if you like bootstrap and vanilla CSS then you're gonna love it here uh so it's pretty much the same way it works uh in like a component system so you install it and then essentially you just import a button from their system which is already styled for you so if we go here to let's say components for example and there you go so if you want an alert button here or alert div sorry I should say you import it from react and then you have a bit of a variety that you can do to customize it but nothing crazy you get certain colors you get certain properties that you can change and that's about it so this is used essentially for really quick prototyping uh which is great I love that sometimes you just want to Pro together something really quick the thing for me though is that bootstrap just feels so outdated like remember five to ten years ago how easy it was for you to recognize a bootstrap site there's just certain things about like the colors and the buttons that they look like it just looks outdated to me so I just found it a bit funny that we are kind of bringing that in here right that's kind of essentially like bringing jQuery into 2023 uh which I don't think is uh is really good if you liked it if you know it then you could probably just instantly pick it up and use it but the next UI framework I'm gonna talk about I think is just a bit better than this one so for that reason I'm gonna take this one and put it where is it I'm gonna put it on ah Come on come on nothing special nothing great so it's gonna go there but the next one I'm gonna talk about is material UI which I think is pretty much a new version of bootstrap or modern version that was made for react and I know it's not uh I know it's a bit newer so of course it's going to be a bit more nice but here we go so essentially it still works as a component system so you import something and you apply it but it just looks much prettier it doesn't have that bootstrappy look to it which I really like and it's it's quite vast the amount of things that they have in here especially um they give you like templates that you can purchase as well which is really cool so you can just import them if you want some really quick prototyping um they have icons they have components pretty much everything and I think the code as well looks a bit cleaner the way they have it here but the documentation is amazing as well so it's really easy to go in here and just find something and get up and running and as you can see they have animations as well um and they have javascripty stuff right like accordions and cards that open up um so yeah really good I really like material material UI it's one of those Frameworks that feels like loads of effort went into it so for that reason only I think if you're looking for like a bootstrap type fast prototyping framework material UI is quite amazing so I'm gonna put it up to Perfection I think they nailed it next up we have tailwind and you know I'm a big fan of Tailwind but am I is it perfect no it's not perfect unfortunately but but essentially how Tailwind does it is you get these small utility classes that you can apply to your code so as you can see here you basically just go to the element that you want to style in this case like the P tag and you just add a utility cluster so if I want a bigger font size you can add text large you can add a fun medium etc etc the thing I like most about Tailwind is just how fast it is so even setting it up it takes like a second because it's it's so integrated and so used with next and and just react in general the the docs and the way that the setup works is so intuitive that I really love about it but anyway let's say if I just have a H1 here I can add so much styling to it in such a quick manner so let's say I have a Hello here right so let's say I want to add some padding to it make the text larger change the color to it so I can just do another display Flex maybe to it so I can just do padding I can do class name padding five like that all right so that adds five all around padding and then I can do text large if I want the text large I can just add flex and text Center so that's gonna do all the flex things I want to do sorry it's item Center and then I can do uh justify between right so really quick whereas in normal CSS that would look like this H1 this and then you did display flex and then you do justify content and then you do Center and then you do I align item center right it takes so long whereas this is so quick especially because one of the properties that you use the most is padding and margin so you just do M two B three it's really quick and that's why I absolutely love Tailwind uh one one problem I'd say about it is once you start having like a couple uh of elements in here especially if they're the same and then you need to update one that's a bit annoying you'd have to do like like let's say modify the padding on here right I do too then you'd need to go and update all of these because yes you could you could separate it and add it uh to like a CSS file and then import it in here but that kind of defeats the purpose of tailorman so essentially you'd need to learn like shortcuts to basically select multiple elements like this at the same time so you can do updates like that but overall it's great it's really quick and you have the flexibility to style your elements in any way you want that's what I love about it you're you're not gonna get that bootstrappy look you're not gonna get that material UI look you get to make your own system and also the way they have it so it's prioritized where it's mobile first so basically all the styling that I'm adding here is going to apply to mobile but if I want the padding to look different on the larger screen I can just do on large screens like that I want padding four like that and that's it I think it's the other way around maybe but essentially that's it and then you have a fully responsive system going on and yeah very quick way you can also extend the Styles in its own file it can go on forever about this but it's great and they also have pre-built components which I really like it looks really clean really good and they just seem to be working really hard on it to yeah to make it like this One-Stop shop of of adding your style components and I love it because everything is in one file so you don't need to worry uh you don't need a Styles folder it's just very clean and very intuitive and one other benefit of it is that you can use it with any framework out there so if you like swelt you like View yeah Tailwind is still the way so for that reason I I think it's great so I'm gonna put it up to perfection we are very solid Choice chakra is our last one which is essentially kind of like a material which is like a Tailwind I should say more than a material UI so let's take a look at Chakra UI uh it's written a bit differently um let's take a look at the code here essentially the way this works is every single property is separated like that so you don't do a class name like you do in until when you do M like that for margin and set that equal to 23 or whatever and then you have your height and you set that equal to whatever right so that's essentially the way they're doing it and I think honestly it does look a bit easier to read I'd say but it's so much more effort to write it out like this where this is really quick you can just do class name p2m2 boom boom boom whereas this you have to do m equals two and then you do the strings and 23 blah blah blah so you just don't like the format of it too much so that's why I'm not a big fan of it but essentially they try to do a lot of things like Tailwind tried to do um I don't know not a huge fan about it what I do like about it is that they have these built-in uh components that are really cool which have like JavaScript uh animations to it and that's really easy and nice to to write out so I'll give them that for that reason see like if we have alerts as well uh let's see what else they have toast included as well look at that so that's really clean so for that reason I'm gonna rate it quite high but I guess this is also kind of preference which system you like more the way it's being written more I'm not a huge fan of it but I still think it's quite good so that's exactly where I'm gonna place it and good so that's it that's the list there from Perfection to just another framework I'm still gonna keep using Tailwind from now on I think it's a it's a great solution I'm not touching loads of them now because they don't work especially because I'm working mainly in xjs so all of these JS and sorry CSS and JS libraries broke uh with the new version of next JS so Tailwind is the one I'm gonna I'm gonna keep working again and to be honest I might actually look more towards chalk random material UI because I do like a couple of things about it I'll move it up here I'll move style components down big change because I feel like style components is going out of popularity to be honest and I would never really go back to use it you going down here son okay that's gonna be my list thank you so much for watching hope you enjoyed this episode let me know if you wanted me to make another one of these with JavaScript Frameworks that'd be fun all right until next time take care drop a subscribe down below let me know give me your list I want to see your list how you rated all of these because I wonder if I'm just weird all right until next time Merry Christmas

Channel: developedbyed

Views: 147,484

Keywords: react, react ui, react styling, next js, react ui framework, rating react frameworks, tailwind css, react tailwind, react styled components, styled components, material ui, css moules, chakra ui

Id: 8Fvn4as79OA

Length: 21min 20sec (1280 seconds)

Published: Wed Dec 14 2022