It’s really nice to review the basics of semantics directly with reactjs and not in an html file. Thanks!

Another educator that use semantic tags properly and it feels satisfied. In a world of modern component based era, people are misusing 'div' everywhere. Thank you.

I love how you go straight to the point cover little things in a very huge way I really appreciate.

I'm now inspired to replace unnecessary div elements throughout my app with more semantic tags. Thanks for the insights!🙏

sometimes people forgot to learn the basics, great content!

I didn't consider the importance of semantic tags until I started using them in schema structures. They make a significant difference in SEO

As a junior developer I can affirm that this video is gold. Thanks a lot dude + subscribed

Wow, that was great especially since I liked how fast and straight you talk about everything not jumping around the subject. Thanks a lot ❤

You are really good teacher.

your videos suite my short attention span lol. you talk fast but calmly, and you get straight to the point, i learn a lot in a small amount of time. i would love to connect with you on linkedin

Nice video good information, one side note a is the same as a unless when you add an title, aria-label or aria-labelledby on the . Here's some more info on it --- A landmark containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page. Such a page summary could be generated dynamically by a user agent or assistive technology. Authors SHOULD limit use of the region role to sections containing content with a purpose that is not accurately described by one of the other landmark roles, such as main, complementary, or navigation. Authors MUST give each element with role region a brief label that describes the purpose of the content in the region. Authors SHOULD reference a visible label with aria-labelledby if a visible label is present. Authors SHOULD include the label inside of a heading whenever possible. The heading MAY be an instance of the standard host language heading element or an instance of an element with role heading. Assistive technologies SHOULD enable users to quickly navigate to elements with role region. Mainstream user agents MAY enable users to quickly navigate to elements with role region. --- As found on www.w3.org/TR/wai-aria/#region

this really is the best channel on youtube. The amount of knowledge I gained from this channel. I am looking forward to the nextjs course

I wish I wasn’t leaving a Svelte team for a React team

thanks, so many years, and now i understand the diff between article and section 🙌

This video was AMAZING! As soon as I started following your advice everything started to click! Please make one explaining forms, etc!

As a lead dev, semantics are important for accessibility but eventually you'll likely be building components that are abstracted away from the actual web page. It's still important to minimize div soup.

This video and the content is too good.

Your vid has good semantic meaning..

learned a lot, subbed

Thank you so much

Good stuff most people dont talk about. Personally, I am more interested in writing semantically correct markup although I am a bit confused when it comes to details. Nav without a Header if there is nothing but navigation in the header. Section in Main, if there is only 1 table and 1 button on the whole page.

what extensions you used with react and nextjs ?

is recommended using section with a heading tag, without causes warning

They didn't teach this in college, lol. Thanks!

This cleared up a lot of underlying doubts, great information, thanks for making it so easy

Great contents!👍

What a fantastic video! This really taught me much more about the meaning and value of semantics and layouts, you got a subscriber buddy :D

what an exceptional video! Trust me, this is one of a kind. Your semantic tag explanation with a real world popular website as a review -- this content cannot be found anywhere in the web for this alone you need a Subscribe + Bell icon hit. bravo....

Thanks! I learned new things today.

thanks

You should make a video on the folder structure best practices.

another hidden gem channel 💯, sleek explanation

I guess they called this dividities. And the way first versions of reactjs was it feels natural to wrap everything with div

I really like how informative your videos are, but it sure would be a lot easier to understand you if the sound were a bit louder. That said, keep up with the great content

I learned a lot from this video!

Thanks a lot

good video. if you let your jaw relax (drop all biting force deep in your molars and cheeks) and use your jaw more while you talk (let it slide side to side and front to back loosely and with energy with each word), it'll really help with your pronunciation.

Istg overwhelmed by everyone..Some people is saying div is everything..Some is saying don't start with the div..need a complete video on when to use div

Great video. Clear and concise, thanks

I really really like the content of this video a los of things that I was not paying attention and I was still doing like sometimes using divs instead of fragments and correct use of HTML semantics I that I was not aware of their correct meaning. Thanks!

Thanks for the good stuff, learned something new 👍

Please make tutorial on big project your portfolio website is amazing

great work. Covered some really good topics which people generally ignore because it still works for them. Just one thing, I thought I was watching the video on 1.25x but when I checked and it was normal speed.

Here it goes refactoring… Thanks for a great video!

And I am that Junior Developer...

Learned a lot, thanks.

You said it all. I always encourage my studs to use HTML5 with strict XML guidelines 😎👍

You can also return an array of elements, though I do not prefer that, either. I guess being able to pull out articles means that the structural content is meaningful, it does not have the environmental styling or accompanied behavior normally if you just pull out HTML code between opening and closing article tag. A lot of divs are spawned to use them for layouting as said in the video. This way, you can separate the concerns rather than passing the styling information to the contained element and making it their responsibility to correctly apply it.

Great, you learned from the comment on your yesterday's video, but it would be nice if you could speak a bit more loud.

Amazing tutorial!

Just a tip. Do not use index from an array method as the unique key identifier, it can cause problems when the list is dynamic, meaning that items can be deleted or added. Some of the problems are: Re-rendering, State preservation and animation problems. Better to use an ID, a slug or a hash.

That's really nice way of covering this topic. I had the same idea of diving in into HTML semantics, are there any good resources to read about this that you'd recommend?

Ok I didn't know that React Fragments can have a key property, I wish I knew this 3 hours ago, literally.

very impressive teaching but try to sound louder please

woow Thanks

This is really not an isolated issue in React. It's everywhere in the frontend world. I've seen many cases where multiple nested divs have been used for simple styling, instead of just putting the classes on the first div.

How do you get these code suggestions?

This video has good.. semantic meaning...

Is it same as using the empty fragment? ( Items )

section + div everywhere

Hey Bytegrad. I tried searching your course in Udemy for CSS. But it is not appearing there while searching. Only with the link it is working. I am able to see only Javascript course. Can you help on how to find your CSS course from Udemy website?

Couldnt you also use display:contents?

Hey amazing content, Could you please make a video on "Modal based routing" in nextjs. How one can implement that on a large project. So that i can share a link of a modal directly.

Hello brother when will you release react course on udemy still waiting already completed JS.

Great work❤

Subheding for SEO as always H tag

waiting for your React, Nodejs and MERN stack courses on Udemy. Big fan.

Which Visual Studio Code theme do you use?

Thank God I'm using Vue. It looks so complex, while vue is just html on steroids.

What is the keyboard shortcut to import components? Like for "Link" and "Footer" you click on something and they're instantly imported. How can I do that without having to click on the little lightbulb that imports it for me?

is division/subdivision for section, etc. I don't think it's just for styling.

Professional React & Next.js

7:00 for the Link tag you should use to="/" instead of href="/"

Stop using section, article always use div.

= ?

Div is good😅 Sometimes, over engineering

Stop using && in React Conditional Rendering, use the ternary operator instead

All of these are just good-to-know. At work and in production, the hierarchy of importance is: 1) Functionality 2) Optimization 3) Design 4) "Best" practices aka nerdsht preferences such as these which are actually negligible

according to React docs, you should avoid using index as a key tho.

Your mic sounds grainy for some reason. It seems you're even using a Shure mic too.

I'm going to use many divs as I want

No !

Awesome

This great.

It was awesome

About the button layout example, why do you even need a fragment? Couldn’t you just straight away map over the buttons inside the section?

speak slowly and speak loudly so we can understand what are you saying

I say just stops using React and use other framework that has better DX.

Div or die

HTML cluttering is not an argument. The rendered code is for the browser, not for the developer.

You stopped just when your channel started booming. Why is that?

Are you a robot | alien ?

Excuse me but, why you didn't show the empty element that works perfectly fine to wrap elements in a empty body instead of React.Fragment " "

i dont know are you just for real or just joking?

Better idea… stop using react.

k, I'll start using instead