Stop using div in React (+ Fragment, Semantic Tags)

one of the biggest mistakes that Junior react developers make is using the div element too much so let's take a look at unnecessary usage of the div elements and some Alternatives that you have so in this example I just have a subscription component and here we have this Blossom view current plan now if the person has an active subscription we may also want to show these two other buttons upgrade plan and cancel plan so here I'm checking for has active subscription and if that's truly we're going to render these two buttons now in jsx you do need to wrap these two buttons in something so if I leave off the div here you will see I got red squiggly lines if I save here you can see we're going to get an error because we always need to return one react node not two now I'm returning two buttons so typically the junior react developer is going to try to wrap this in a div if I do this the error will be gone but we have two other problems the layout has been disrupted because with flexbox as well as CSS grid there is a relationship about the parent and child component so if you add a div in between there you can disrupt the layout that's the first problem with using unnecessary very div the second problem is you clutter up the HTML output so here if we inspect our project in the Dom's inspector tool we're going to see this div hair and this is just one div but in a bigger project you're going to have a lot of unnecessary dips a lot of unnecessary nesting so we don't really need this div so instead of what you can use in react is the react fragments element so we can use react dot fragment here as well if I now save here you can see that the layout has been fixed and everything still works and if I now inspect the HTML output here you can see we have a nice clean structure here no unnecessary nesting and instead of writing it like this people typically just write the shorthand which is just this so if I save here it will still work so should you always use the shorthand format of that reacts fragment and the answer is no so here I have another example here let's say we have some subscription options that I put in an array and this time we're going to map over that array so here I'm mapping over each element in the array and here I want to create a button and then if the index is zero so for the first button I I want to Output like a little dot hair at least that's my intention here right so for the first one we're gonna have this span here as well so now we are again returning two elements here and you need to wrap that in something so here I've wrapped this as a junior Rec developer would do in a div and now you can see the layout has been disrupted this is not the layout that we want so ideally of course we could just wrap this in a reacts fragment if I save here now you can see that this is indeed the layout that we want so everything is working now but there is one problem with this and that's because we are mapping over something you need to use the key now if you have the shorthand format of this react fragment you cannot just write the key like this this will not work so if you are mapping over something you do need to use that long form react fragment and then with the key key let's say index and of course for the closing tag as well alright so now everything works and now we also have the key properly set up you can of course also import this separately so instead of writing react.fragment just use fragments but then you don't have to import it separately like this this also works now the problem goes beyond react fragments though you also want to use semantic tags throughout your jsx there are basically three reasons first of all it becomes easier to read and scan your source code as well as the output code it's better for SEO so you have a higher chance of ranking in Google if you have a public website also better for screen readers accessibility purposes so let's quickly talk about the semantic tags that we have from HTML that we can use here in jsx so you have to think about it in terms of a page and a page starts with an HTML tag and in the HTML tag you typically have a head and then a body now I'm using next.js here and it depends a bit on how your framework is set up but next year s has the concept of pages and it does make all of this much easier so if you create a new next.js project you're going to get this root layout file this is basically the root component of your application and it's wrapping every page so on every page we will automatically have this HTML tag and this body tag typically next to body you also have this hat element where you specify essentially metadata for the page now since I'm using xjs we shouldn't do it like this we now have this metadata that will take care of that so you just export a metadata constant where you can specify the title and description of the page since I'm exporting this in my root layout file the title will be the same for all pages now unless I override it specifically in some other page and you can override it by simply exporting another constant metadata in that particular page file or layout file if you have nested layout so usually in this head you also want to have these two meta tags for the character set as well as for the viewport next.js will automatically include that even if you don't Define your own metadata for a route and what about things like fav icon and open graph images that you usually would also specify in the head that's now based on files so if you create a fav icon file here in the app directory this will be the fav icon for your project and you also use a separate file for open graph images for robots and for the site map so we don't want to specify hat like this ourselves so we can leave it out here so basically in the root layout component you determine what you want to have on every page that page will basically be substituted for children here so for example here then in this page the home page I can then have my main tag so if I go to the home page here and I inspect the HTML you can see I have an HTML tag I have a head tag from next.js body tag and then in there now I have my main tag here the main tag is for the dominant content on the page so the most important content typically you also have a header and footer and you want to have the same header and footer typically on every page so it makes sense that here in the body we also add a header and footer so I'll show you what a typical structure on the page looks like so we're going to have a header and here we're going to have basically the page and the page starts with main so we're going to have basically a main like this right and then we're gonna have a footer if I do it like this every page will have the same header and footer because it's in the root components so it will automatically add this to each page if I save here now you can see now I have a body and then I have a bunch of scripts here that's just from an XTS but then I also have header Main and footer what do you typically have in a header you have a nav you use the nav type for an important block of navigation in there you usually we have a set of links so it's going to be something like UL which is unordered list meaning the order doesn't matter if the order does matter you also have ordered lists for example you have the result of some championship and list of candidates you may want to have that an ordered list of the champion at top typically the order of the links doesn't really matter and then you have a bunch of list items and then in there you have the actual anchor tag perhaps it's quite nested here usually you just have a bunch of links there the next you ask typically you want to use the link components that you get from next.js this link component under the hood will actually just give you an anchor tag now if I save here we still have header main footer on the page if I open up the header we now have a nav UL Li and then we have these anchor tags in the header you often also want your logo and typically that would just be an image I will comment this out for now now I'm writing it all here in the root layout component and doesn't matter where you define it I could create a separate component out of this I could call those header and I would just create a separate component for header would be the exact same here and then I can just replace that with header are here right so now if I save here we're going to see the exact same here in the HTML structure so you can see it's the exact same I saved the file and it's the exact same with footer I could Define that as its own component in its own file but it doesn't change anything for the structure all right so what do we typically have in the footer actually in the footer you also have links usually but these are typically not an important set of Links at least not as important as you typically have in the header so typically you don't wrap that in a nav tag but you can still have a list and again it's very nested so you could still have that same structure like in the header right so don't use div for this you can just use footer this is a semantic tag it conveys extra meaning same with header right technically you can use div and it will work the same way but you lose semantic meaning right so header comes with certain semantic meaning which gives us these benefits right same with nav I could use a div for this and will work the same right div is divider it has basically no semantic meaning but nav does have some semantic meaning and it gives us these benefits let's quickly create a separate component for footer as well so it's more symmetric looking it's going to be the footer component cooler and I can just paste this right here import a link import link and now I can import the footer like this alright so now our root layout looks a bit cleaner I think but you can see I saved here and all still looks the same so we have header main from the page and footer all right let's go into the main then let's go here so this is the main that we see here that's typically I like to start every page with main because this is going to be the dominant content on the page the most important content so what other tags do we have so typically you're going to have multiple sections on your page a section is pretty much the same as div the only difference is that in section everything inside there is related to each other semantically speaking so here on the home page I may have some kind of landing page right SAS metrics Inc we provide the best metrics for your SAS business and it could be an introductory section and these two elements in there belong to that same overall semantic meaning and then we can have another section maybe the benefits and so here we could have the benefits of using this particular service and then maybe about us we started because right so here we have three different sections and we could use diffidence but suction is just a little bit more semantically correct because everything in there belongs to that same overall semantic meaning I'm using heading tags here and here H1 means it's the most important heading on the page and it's a hierarchy so H2 is slightly less important we also have H3 even less important these are equally important so you can give them the same tag we are of course also using this paragraph tag right you could use diff for that but let's use a paragraph because that actually describes properly what that is there's some other ones that you're going to see sometimes are aside this is for example for a sidebar this should not be the main focus essentially this is just something on the sides we also have article articles a little bit more common so article is essentially the same as section but an article you should be able to pull out of that website and put it somewhere else on a different website let's say and it should still make sense if I pull out this section here from this particular website and put it somewhere else it loses its meaning essentially it's not clear the benefits of what exactly this section needs the overall context here to make sense an article for example a Blog article I can take the entire article put put it somewhere else it's still clear what it is it's an article talking about something so it's self-contained in a world of web apps you may have some kind of widgets like a weather widget or maybe a chat widget those types of widgets are also self-contained you can put them anywhere you can take them out and put them somewhere else and it still makes sense and actually it's a good idea to use article tag for that although that's not really a great name for that but it does semantically make sense to use the article of attack for that because it's self-contained we also often have button people confuse it sometimes with anchor tags so when I click on an anchor tag the goal is navigation I should be navigating to some different route when I click on a button something interactive should happen maybe I'm opening up a modal you shouldn't use button for navigation navigation is Anchor tags button is more interactivity on the same page then we also have input and text area you want to use input for one line of input and text area for multiple lines let's say I have some text here and I want to make some part of the text bold so we have some other tags here that are a little bit strange to be honest for example we have the B tag from Bolt you can wrap part of the text in B and it will become bold this one actually doesn't have semantic meaning and then there's also strong it makes it bold but also adds semantic meaning as in this is more important now I wouldn't use these tags just for styling so styling I really try to contain to CSS so if I would just need this for styling I would just wrap this in a span which is essentially the same as div it has no semantic meaning this is an inline level element so it will not put this on a different Line This is a block level element it will put it on a different line and then here you can just style this right you can make it font bold you'll also get more granular control this way I can make it medium or semi-bolt the same with italic by the way so if you want to make it italic I'm using a Tailwind class here and I prefer that but in HTML we also have itac itag it's the same as the B tag it just makes it italic without semantic meaning and then there's also em emphasized so this also adds some additional meaning same as strong and so I don't like to use these tags I like to use span and just style it with CSS let's take a look look at some examples to see how other websites have done this and also show you when you can actually use this I like to use the stripe websites let's take a look alright so you can see here at the top they do have a header tag and if I open this up they have a bunch of divs div stands for divider so sometimes you need to do particular styling and it makes sense to group one part of the layout with some other parts right so you often need it for styling to separate certain parts Define them right so it's a definer element if you open up some part you will eventually see that they are indeed using the nav tank as well they have mobile versions as well so the markup here is a bit cluttered but it does follow what you would expect at a random now and then for their logo they actually use an anchor tag that wraps an SVG so if you click the logo you will actually go back to the home page all right and then they are using section here they don't seem to be using the main tag I think it's a mistake they have a bunch of different sections than after the header so here for the hero section typically that's the first part you see when you come to a page they are using the section tag for that and then if we scroll down a little bit they are also using a section tag for the next section because all of these logos belong to the same overall semantic meaning which is in this context that they are using Stripe Right so all of the elements in there they have the same semantic purpose therefore it's better to wrap it in section than with div but not article an article means I should be able to pull this out of here and put it somewhere else and should still make sense that's not the case here if I pull this out here and put it somewhere else it's not really clear what this is but here in the context of the overall website I understand what this is these are companies that are using stripe they're for Section tag here is the correct one right so then they have a bunch of other sections so here another section here you're using an H1 here and an H2 here for this subheading for subheadings I think it's better to use a paragraph tag actually typically you don't want to use an actual heading tag for these subheadings I think it's better to just use paragraphs but it's not a big deal and that's usually these landing pages right so just a bunch of different sections and then at the bottom they have a footer right so here they have their footer I usually also like to give the example of the mdn websites let's take a look at their article page so here they are actually using the main tag and here they actually wrap the entire article actually in an article tag which makes sense because if I pull this out of here I can put it somewhere else but the article still makes sense right it's still clear what it is it's self-contained it doesn't need the other contacts to make sense the article tag is essentially the same as section but the additional requirement that you should be able to pull it out and put it somewhere else and it should still make sense now here they actually have an interesting site navigation part and they are actually using the aside tag for that and then in there they have enough tag right so nav is not only in the header you can also use it here because this is also an important block of navigation so it's perfectly fine to wrap this in a nav as well here on the left side they are using the aside tag again for the sidebar on the left side so those are all quite traditional website what about web apps we live in the age of applications which are much more interactive than these more static Pages can you still use semantic tanks there this is one of the projects in my CSS course and I'm using semantic tags here so we have a header at the top and let me show you here when you can actually use a diff a good use case for div so you can see in this info bar here I have a publish Button as well as these breadcrumbs they are two different things they don't belong to the same overall semantic meaning but I still need to wrap them in something because I need to style them separately from the rest I need to wrap them in some element to get this layout I should not use a section here because they don't belong to the same semantic meaning I should use a definer here and then in there for the breadcrumbs themselves I should use section because the elements in there are this icon this text they belong together semantically speaking and here I want to publish whatever the result of this work is oh that's a button it should not be an anchor attack I don't want an applicant I want to do something maybe open up a model for example let's make sure if you want to become a react next year as developer that you've mastered the underlying fundamentals those are both HTML as well as CSS and actually also JavaScript of courses on both CSS and JavaScript and my react next year source is coming out very soon so check out the links in the description hope this was helpful thanks for watching and I hope to see you soon bye

Channel: ByteGrad

Views: 111,936

Keywords:

Id: duoNlz5uTYk

Length: 15min 48sec (948 seconds)

Published: Wed Aug 09 2023