😡 React Destroys Your CSS Layout | Full Screen React Components
Вставка
- Опубліковано 26 вер 2024
- Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
😡 React Destroys Your CSS Layout | Full Screen React Components
React's nested divs can destroy your otherwise excellent full page app layout.
🚩 Subscribe ➜ bit.ly/3nGHmNn
📬 Course Updates ➜ courses.davegr...
❓ Questions - Please post them to my Discord ➜ / discord
☕ Buy Me A Coffee ➜ www.buymeacoff...
👇 Follow Me On Social Media:
Github: github.com/git...
Twitter: / yesdavidgray
LinkedIn: / davidagray
Note: You should check if everyting looks allright on mobile as vh/dvh/lvh/svh usually dont work good with mobile. + never use it for typography as it will block zooming in/out.
The root can be changed to any other element. Also, you can use css's "display: contents" on the root or any other element to eliminate it's effect on the DOM display layout.
Good note additions!
“…React has a 🤠rOoT🤠 div element…”
Tnx. I was literally struggling with this problem in the morning
I had a project for uni and i kept running into this every time thank for the tip
Glad it helped!
This helped me alot , I was wondering about this issue since it was working without react
I find that using 100vh creates an annoying effect on mobile where the URL bar is counted as part of the viewport leading to you being able to scroll down slightly. You can get around this by just applying a height of 100% to html,body,#root. Though you need to be careful with other container elements that might also wrap your content.
Have you heard of 100dvh or 100svh? These new properties are supposed to solve this.
@@iAmTheWagon last time I checked those properties had bad browser support but that may very well have changed
@@lilyydotdev aaaahh they only work on chrome
A word of caution when using 100% for height as I demonstrate here: ua-cam.com/video/dpuKVjX6BJ8/v-deo.html
@@lilyydotdev you can hack it using css variables and "resize" event on window. Just set --vh css variable to 1/100th of window height in handleResize function and use var(--vh) instead of vh units
How does your page not have a scrollbar? Usually the body has a padding/margin by default and doing a height of 100 will cause a scrollbar to appear since the browser does not take into account the size of the padding
Use a CSS reset to remove that default padding OR use Tailwind or similar that removes it by default. I also now recommend dvh instead of vh for a full height.
My favorite web dev teacher🙏. When is your Next.js series dropping Mr Gray?
Thank you! It has already started: ua-cam.com/video/6h649f2fB9Q/v-deo.html 🚀
@@DaveGrayTeachesCode Awesome So excited to dive into it soon!
Thank you so much!!! This helps me tons 😁
Happy to help!
You can do it with one div tag. Not two div . I think
Shouldn't you apply height of 100% to all parent elements of App class?
No. I don't recommend this. Applying height of 100% can lead to issues as I demonstrate here: ua-cam.com/video/dpuKVjX6BJ8/v-deo.html
Tailwinds - I’ve been coding (S)CSS for ages and this utility first approach has been amazing.
thank you for the tip
I am new to learning all of this so excuse my lack of understanding. As I learned html, we progressed away from in-line styling and traded that for the organization of having the CSS file to keep everything together. Now we are learning bootstrap, seeing this makes me feel like these new libraries are moving some style back to the html file, more like in-line again. Wouldn’t it be more organized if these libraries worked with the CSS file?
In React there's a css file that we put our style in called App.css otherwise we can create the file and import it.
Just focus on what you're learning now step by step you'll know how easy it is with hardwork ofc
I'd like to share some information on this because I think your observation a very astute and warrants it.
=History=
In the olden days, a webpage was made all in 1 html file. If you have only a homepage with a few elements that require custom styling, then you can imagine that simply using the style attribute is fine.
But the moment the page grows and you have a bunch of styling repeated, then you'd want to use a class. Defining the class in a ... within the html file, is fine since you only have 1 page.
Now imagine you have multiple pages and want to share those classes with those other html files (remember 1 html file = 1 page). You could copy the ... to every page. But now you lose what you gained from using classes in the first place. Which is that if you boss wants to turn all the cards to round borders, then you have to make sure all the different files are changed.
This is where importing a separate css file comes in. Which can also be cached in the browser, which saves you from sending data from the server.
There are some problems with this approach. All the classes are global variable, which means that you can get classes with the same name defined differently. Some styling gets overwritten depending on which class was defined last and some styling just gets merged. For example, you loaded a plugin for your website. But they are using sharp corners for their cards, and now your is angry at you because you removed the rounded corners he asked of you before.
Another issue is naming things all together. Sometimes you just want to give that specific padding and nothing else. Instead of writing 30 classes with different names only containing exactly the same padding. You might as well make a "padding" class.
Last problem with the approach of loading in a single css file. Is that you might have css that you don't need on every page. If you have 1k pages with unique styling on your imaginary complex website. You might want to make sure not everything gets loaded in everywhere.
=Current Day=
Webdevelopment uses components as opposed to the 1 html file = 1 page (or html templates on the server). So your card is now in its own file. Because the files that requires styling has gotten very small again, it's more sensible to keep the styling near the component.
This fact makes inline useful again. You can also use the "padding" utility class idea for other of such css styles. (Think of bootstrap and tailwind) That way you don't have to keep track of the exact number of px your normal padding is in every file. So you keep the power of classes and you don't have class collision since you compose the complete styling for the element in the component on the element itself. The name of the component is now how you identify what part of the website you're looking at instead of using the class name.
Another modern approach is using css modules. Which solves the issue of class collision while still making use of css classes instead of only utility classes. You can now also only load the styling if it's actually used.
There have also been naming conventions like BEM (block__element--modifier) for css to solve these problems. But this is falling out of fashion.
=Summary=
I think I've dumped a bunch if history on you and the main issues that have lead to the changes in convention.
First structure (html) - design (css) - logic (js) was combined in 1 file. The structure became bigger, which made the rest grow. So it was smart to divide these 3 concepts into their own files. Now we're moving towards components that get combined to make the page, so we can combine the 3 concepts into 1 file (or move the files closer to each other).
In the end, how you organize your files is mainly opinion. Working on an changing website in production, for half a year to a year, will make you see the problems with any opinion and it's trade-offs.
Now go young Padawan, center that div and figure out which element is causing that horizontal scrollbar.
Thank you please uploaded all explain with translation like this
Thanks for explaining this problem
Welcome!
Thanks for this video, I am dying to see the full css used here because I need a layout that always sticks the footer where it belongs without using the position: absolute/fixed and bottom: 0.
Please help me with this flex layout thing.
Here's the flexbox chapter from my full CSS course for beginners: ua-cam.com/video/B8BFVzbKmPI/v-deo.html
@@DaveGrayTeachesCode Thanks a million
this actually broke me the first time learning react lol
Hi dave , can you please make a tutorial on how react supports server side rendering
Great request! I will for just React in the future. My current Next.js series just covered SSG and SSR.
Honestly, I don't consider that as a big issue since it's customizable, but I share the same empathy in general that yeah react ruined at least for me my DX as a developer for a long time 😂
that's why it's better to use class or per component css
Either must account for parent elements. The #root div is often overlooked by beginners.
Can also apply "display: contents" on root and app
Yes, that is a good fix, too!
published video in 2002?
the rut huh
Tailwind, I can’t thank you enough.
What about:
body > .root,
body > .root > .App {
display: contents;
}
That could flatten it nicely if you have applied those classes.
Right, even easier! I looked over id="root".
So:
#root, #root > .App
would be the selector.
Why do you stack the elements vertically rather than just make the whole video horizontal
This is a UA-cam short. They are formatted for mobile phones.
@@DaveGrayTeachesCode Phones can...rotate? :woah:
Omg!! Amazing
What icon pack do you use in vscode?
I recently made a short about that choice: ua-cam.com/users/shorts-uhzj-kjfV4
that is not react that is your default of your setup automation app of choice.
The root div is one of the reasons I don't use React for lazy loading blog posts in several websites I maintain.
do you know you can render react app in literally any html tag you want? you can even use a tag
@@ElektrykFlaaj yeah exactly so if I have tiles of blog posts inside of a parent, I can't just append new tiles to the parent. I have to render into a root element, which means the new React rendered tiles will never sit as true siblings to the original blog tiles.
@@MobiusCoin that's a strange use case of react to be honest, why can't you just render all posts using react if you want to use react anyway?
@@ElektrykFlaaj Infra level issues, lots of these sites I manage are on managed hosting platforms that won't allow the install of v8js. Thus I wouldn't be able to SSR the initial blog posts with React. So I have to rely on PHP to load the initial twenty or so. OR I could just have a blank div and have client side React render the blog posts on load, but it's awkward because the blog posts pop in after the rest of the DOM has been loaded.
That would be helpful
It’s so helpful
Thank you!
Actually we should use 100svh to get same result in mobile devices.
Global support is currently only 68% for svh. caniuse.com/?search=svh
Use tailwind nextday
What editor is this
VS Code
That's why you use grid for page layout.
You must still account for the #root div when you do.
I wonder why devs at React did not use the body, and render everything there?
Is it something related to how portals are created ?
Or, that the scripts were enjected and they were meant to be injected at the end of the body?
Ok now I can stop banging my head on the wall! 🤷😖
What accent is it that makes you say rot instead of root 🤔
Kansas / Oklahoma accent. I think I say it more like rut. If I say rot, it has an ahh sound.
My father in law from California says it like that.
Joe Rogan codes?!
I've got a lot more hair than Joe!
how about in nextjs?
Same thing, but target layout.js or _app.js ❤
This has nothing to do with React. If you apply the right styles to the wrong selector, you won't get the expected output. It's misleading and unfair to new developers to conflate this with anything React related.
I disagree. It is something those learning React often overlook. The root div is part of React. And it's ok if we disagree.
@@DaveGrayTeachesCode the root div is not part of React though. It's only there because of the createRoot() call which is passed a DOM element from standard JS's `document.getElementById('root')` which is THEN passed to React's render/createRoot. One could, createRoot on . Anyway, I meant no offense. It's great that you're trying to help others learn - more people should be like you. That said, the problem of applying CSS to the wrong DOM element is a problem, regardless of your front end framework. I personally felt like the language was then click-baity or otherwise misleading and wanted to call that out for those who may also be confused. Thanks for your content and best of luck to you going forward.
I was looking for this. I think the title is misleading. Thanks
That root div messed me up sooo bad the first time I did react. I would just put a: body,#root{ min-height:100vh;} and usually sorts it out
Interesting
Just use grid...
I get it man but why would you even do this?! I mean, layouting with Flex?! Why?!
It's an example, and a full page flex layout is not unusual. The concept of remembering their is a wrapper #root div is in there applies to any layout you may choose.
Definitely the most irritating thing about React, except maybe not being able to call hooks outside functional components
I feel your pain. 💯
@@DaveGrayTeachesCode Related to this, i was curious about best practices for writing reusable components that adapt to the kind of data it needs to show, as conditional statements are out due to the “fixed call order” for hooks. Maybe a video idea if you have time 😁
Amazing work tho, owe you a LOT!
Use “use” man 🎉
Awesome
Yes JSX.
Another reason why react sucks. Adding on elements that break stuff...
So glad I started frontend web dev in rust.
ReactJS creating again another problem that is not really a problem.
I don’t see why this is a problem, that’s how css works
It's a reminder for beginners. They often overlook the root div as a parent container.
You're right, you should use jquery only so you can simplify a couple lines of css
What? No way I recommended jQuery 😂
Vue JS has no meta or Google backing.. it's actually a better framework than going for Library such as React
Rut
...Row Raggy. Thanks Scoob! 😆
Woah calling React out specifically really ? No need at all.
Chill. No need to get triggered either. Just about the #root div. And titles are about UA-cam.
React is a clusterfrick of bad abstractions. Please stop using it. Use one of the many more modern solutions.
Caution, 100vh isn't without its issues.
This is true - especially in mobile. But alas, 60 seconds only allows for one quick topic.
i never once encountered this
Well, this just saved me a lot of future headaches wondering why they aren't working.
Glad it helped!
Nice, thanks for share information
You're welcome!
Its not necessary to use id root you can render the whole react on body making it more legit
Nice tip - I wonder why it isn't default?
@@DaveGrayTeachesCode We can have even multiple root elements in react. Creating micro instances
In case we want to integrate React in existing system we can create instance as
id="sidebar" and render the sidebar in React
id="notifications" and make the notification section in React
Or individual page or parts of the page ✌
Amazing exposure Sir
Thank you!
Great tip ..this one can become very frustrating..thanks for sharing
Glad it was helpful!
I am finding an abundance of golden info in your videos. Cheers...and thank you.
This solves exactly the problem I've been wrestling with.
Glad it helped!